119 lines
2.5 KiB
Vue
119 lines
2.5 KiB
Vue
<template>
|
|
<div class="press-releases-page">
|
|
<customDefaultPage>
|
|
<template #content>
|
|
<main
|
|
class="p-[80px] mx-auto"
|
|
style="max-width: 100vw; min-width: 375px;"
|
|
>
|
|
<div class="title mb-[24px]">
|
|
{{ t('press_releases.title') }}
|
|
</div>
|
|
<div class="search-container">
|
|
<n-select
|
|
:options="state.selectOptions"
|
|
v-model:value="state.selectedValue"
|
|
class="search-select"
|
|
:font-size="72"
|
|
/>
|
|
<n-input
|
|
v-model:value="state.inputValue"
|
|
type="text"
|
|
:placeholder="t('press_releases.search.placeholder')"
|
|
class="search-input"
|
|
clearable
|
|
:font-size="72"
|
|
/>
|
|
<n-button
|
|
type="primary"
|
|
@click="handleSearch"
|
|
class="search-button"
|
|
:font-size="72"
|
|
>
|
|
{{ 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',
|
|
},
|
|
], //下拉选项
|
|
inputValue: '', //输入值
|
|
})
|
|
|
|
const handleSearch = () => {
|
|
// 搜索处理逻辑
|
|
console.log('搜索:', state.inputValue)
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.title {
|
|
font-size: 113px;
|
|
font-weight: bold;
|
|
color: #333;
|
|
text-align: center;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.search-container {
|
|
margin-bottom: 24px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
background-color: #f6f7f9;
|
|
border-radius: 8px;
|
|
padding: 8px;
|
|
gap: 16px;
|
|
}
|
|
|
|
.search-select {
|
|
width: 1000px;
|
|
:deep(.n-base-selection) {
|
|
padding: 4px 0;
|
|
}
|
|
}
|
|
|
|
.search-input {
|
|
width: 100%;
|
|
}
|
|
|
|
:deep(.n-input) {
|
|
.n-input__input {
|
|
padding: 4px 0;
|
|
border-radius: 4px;
|
|
}
|
|
}
|
|
|
|
:deep(.n-select) {
|
|
.n-select__input {
|
|
padding: 8px 12px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
}
|
|
}
|
|
|
|
:deep(.n-button) {
|
|
width: 260px;
|
|
padding: 20px 16px;
|
|
border-radius: 4px;
|
|
}
|
|
</style>
|