fiee-official-website/src/views/press-releases/size1920/index.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',
    },
  ], //下拉选项
  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: 160px;
  :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>