111 lines
2.4 KiB
Vue
111 lines
2.4 KiB
Vue
<template>
|
|
<div class="press-releases-page">
|
|
<customDefaultPage>
|
|
<template #content>
|
|
<main class="p-[35px] max-w-[1200px] mx-auto">
|
|
<div class="title mb-[20px]">
|
|
{{ t('press_releases.title') }}
|
|
</div>
|
|
<div class="search-container">
|
|
<n-select
|
|
:options="state.selectOptions"
|
|
v-model:value="state.selectedValue"
|
|
class="search-select"
|
|
/>
|
|
<n-input
|
|
v-model:value="state.inputValue"
|
|
type="text"
|
|
:placeholder="t('press_releases.search.placeholder')"
|
|
class="search-input"
|
|
/>
|
|
<n-button
|
|
type="primary"
|
|
@click="handleSearch"
|
|
class="search-button"
|
|
>
|
|
{{ t('press_releases.search.button') }}
|
|
</n-button>
|
|
</div>
|
|
</main>
|
|
</template>
|
|
</customDefaultPage>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import customDefaultPage from '@/components/customDefaultPage/index.vue'
|
|
import { reactive } from 'vue'
|
|
import { NSelect, NInput, NButton } from 'naive-ui'
|
|
import { useI18n } from 'vue-i18n'
|
|
|
|
const { t } = useI18n()
|
|
|
|
const state = reactive({
|
|
selectedValue: 'all_years', //选中值
|
|
selectOptions: [
|
|
{
|
|
label: 'All Years',
|
|
value: 'all_years',
|
|
},
|
|
...Array.from({ length: 2025 - 1990 + 1 }, (_, i) => {
|
|
const year = 2025 - i
|
|
return { label: String(year), value: String(year) }
|
|
})
|
|
], //下拉选项
|
|
inputValue: '', //输入值
|
|
})
|
|
|
|
const handleSearch = () => {
|
|
// 搜索处理逻辑
|
|
console.log('搜索:', state.inputValue)
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.title {
|
|
font-size: 40px;
|
|
color: #333;
|
|
}
|
|
|
|
.search-container {
|
|
margin-bottom: 20px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
gap: 10px;
|
|
}
|
|
|
|
.search-select {
|
|
width: 7rem;
|
|
:deep(.n-base-selection) {
|
|
padding: 4px 0;
|
|
}
|
|
}
|
|
|
|
.search-input {
|
|
width: 240px;
|
|
}
|
|
|
|
:deep(.n-input) {
|
|
.n-input__input {
|
|
padding: 4px 0;
|
|
// border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
}
|
|
}
|
|
|
|
:deep(.n-select) {
|
|
.n-select__input {
|
|
padding: 8px 12px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
}
|
|
}
|
|
|
|
:deep(.n-button) {
|
|
padding: 20px 16px;
|
|
border-radius: 4px;
|
|
}
|
|
</style>
|