Merge branch 'main' of http://172.16.100.91:3000/scout666/fiee-official-website

# Conflicts:
#	src/views/index/size1920/index.vue   resolved by main version

src/components/customDefaultPage/index.vue

@@ -28,7 +28,11 @@ const viewComponent = computed(() => {
 </script>
 
 <template>
-  <component :is="viewComponent" />
+  <component :is="viewComponent" v-bind="$attrs">
+    <template v-for="(_, slot) in $slots" #[slot]="scope">
+      <slot :name="slot" v-bind="scope"/>
+    </template>
+  </component>
 </template>
 
 <style scoped lang="scss"></style>

src/components/customDefaultPage/size1920/index.vue

@@ -1,18 +1,27 @@
 <template>
-    <!-- 通用缺省页 -->
+  <!-- 通用缺省页 -->
-    <div class="custom-default-page">
+  <div class="custom-default-page">
-      <div class="search-area">
+    <slot name="content"></slot>
-        <customSelectSearch></customSelectSearch>
+    <template v-if="$slots.empty">
+      <slot name="empty"></slot>
+    </template>
+    <template v-else>
+      <div class="default-empty-icon">
+        <img
+          src="@/assets/image/icon/default-empty.png"
+          alt="empty"
+          style="width: 476px; height: 262px;"
+        />
       </div>
-    </div>
+    </template>
-  </template>
+  </div>
-  <script setup>
+</template>
-  import customSelectSearch from '@/components/customSelectSearch/index.vue'
+<script setup></script>
-  </script>
+<style scoped lang="scss">
-  <style scoped lang="scss">
+.default-empty-icon {
-  .search-area {
+  display: flex;
-      width: 300px;
+  justify-content: center;
-      margin: 100px 300px;
+  align-items: center;
-  }
+  margin: 40px 0 24px 0;
-  </style>
+}
-  
+</style>

src/components/customDefaultPage/size375/index.vue

@@ -1,18 +1,27 @@
 <template>
-    <!-- 通用缺省页 -->
+  <!-- 通用缺省页 -->
-    <div class="custom-default-page">
+  <div class="custom-default-page">
-      <div class="search-area">
+    <slot name="content"></slot>
-        <customSelectSearch></customSelectSearch>
+    <template v-if="$slots.empty">
+      <slot name="empty"></slot>
+    </template>
+    <template v-else>
+      <div class="default-empty-icon">
+        <img
+          src="@/assets/image/icon/default-empty.png"
+          alt="empty"
+          style="width: 350px; height: 198px; margin: 40px 0 0;"
+        />
       </div>
-    </div>
+    </template>
-  </template>
+  </div>
-  <script setup>
+</template>
-  import customSelectSearch from '@/components/customSelectSearch/index.vue'
+<script setup></script>
-  </script>
+<style scoped lang="scss">
-  <style scoped lang="scss">
+.default-empty-icon {
-  .search-area {
+  display: flex;
-      width: 1500px;
+  justify-content: center;
-      margin: 500px 200px;
+  align-items: center;
-  }
+  margin: 40px 0 24px 0;
-  </style>
+}
-  
+</style>

src/components/customHeader/size1920/index.vue

@@ -93,7 +93,7 @@ const handleToHome = () => {
   height: var(--header-height);
 
   &.header-scrolled {
-    background: rgba(255, 255, 255, 0.95);
+    background: rgba(220, 207, 248, 0.95);
     backdrop-filter: blur(8px);
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   }

src/components/customHeader/size375/index.vue

@@ -192,7 +192,7 @@ const handleToHome = () => {
   top: 320px;
   left: 0;
   width: 100vw;
-  background: #fff;
+  background: rgba(220, 207, 248, 0.95);
   z-index: 1100;
   box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
   padding: 40px 0 80px 0;

src/components/customSelectSearch/index.vue

@@ -1,38 +0,0 @@
-<template>
-  <div class="custom-select-search">
-    <n-select
-      :options="state.selectOptions"
-      v-model:value="state.selectedValue"
-    />
-    <n-input
-      v-model:value="state.inputValue"
-      type="text"
-      placeholder="Search"
-    />
-    <n-button type="primary">Go</n-button>
-  </div>
-</template>
-<script setup>
-import { reactive } from 'vue'
-import { NSelect, NInput, NButton } from 'naive-ui'
-
-const state = reactive({
-  selectedValue: 'all_years', //选中值
-  selectOptions: [
-    {
-      label: 'All Years',
-      value: 'all_years',
-    },
-  ], //下拉选项
-  inputValue: '', //输入值
-})
-</script>
-<style scoped lang="scss">
-.custom-select-search {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: flex-start;
-  gap: 10px;
-}
-</style>

src/config/headerMenuConfig.js

@@ -84,6 +84,7 @@ export const useHeaderMenuConfig = () => {
         {
           label: t('header_menu.news_releases.events_calendar'),
           key: 'events_calendar',
+          href: '/events-calendar',
         },
       ],
     },

src/locales/en.js

@@ -524,5 +524,18 @@ export default {
       ir_contacts: 'IR Contacts',
       email_alerts: 'Email Alerts'
     }
+  },
+  press_releases: {
+    title: 'Press Releases',
+    search: {
+      placeholder: 'Search',
+      button: 'Go'
+    }
+  },
+  events_calendar: {
+    title: 'Events Calendar',
+    search: {
+      button: 'Go'
+    }
   }
 }

src/router/index.js

@@ -14,7 +14,7 @@ const routes = [
     // }
     children: [
       {
-        path: 'home',
+        path: '/home',
         name: 'home',
         component: () => import('@/views/home/index.vue'),
         // beforeEnter: (to, from, next) => {
@@ -43,11 +43,6 @@ const routes = [
         name: 'email-alerts',
         component: () => import('@/views/email-alerts/index.vue'),
       },
-      {
-        path: 'press-releases',
-        name: 'press-releases',
-        component: () => import('@/views/press-releases/index.vue'),
-      },
       {
         path: '/quarterlyresults',
         name: 'QuarterlyResults',
@@ -60,6 +55,16 @@ const routes = [
         component: () =>
           import('@/views/financialinformation/secfilings/index.vue'),
       },
+      {
+        path: '/press-releases',
+        name: 'press-releases',
+        component: () => import('@/views/press-releases/index.vue'),
+      },
+      {
+        path: '/events-calendar',
+        name: 'events-calendar',
+        component: () => import('@/views/events-calendar/index.vue'),
+      },
     ],
   },
   {

src/views/events-calendar/index.vue

@@ -1,11 +1,11 @@
 <template>
-  <div class="new-releases-page">
+  <div class="events-calendar-page">
     <component :is="viewComponent" />
   </div>
 </template>
 <script setup>
-import size1920 from '@/views/new-releases/size1920/index.vue'
+import size1920 from '@/views/events-calendar/size1920/index.vue'
-import size375 from '@/views/new-releases/size375/index.vue'
+import size375 from '@/views/events-calendar/size375/index.vue'
 import { computed } from 'vue'
 import { useWindowSize } from '@vueuse/core'
 

src/views/events-calendar/size1920/index.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="events-calendar-page">
+    <customDefaultPage>
+      <template #content>
+        <main class="p-[35px] max-w-[1200px] mx-auto">
+          <div class="title mb-[20px]">
+            {{ t('events_calendar.title') }}
+          </div>
+          <div class="search-container">
+            <n-date-picker
+              v-model:value="state.selectedDateValue"
+              type="date"
+              class="search-date-picker"
+            ></n-date-picker>
+            <n-button
+              type="primary"
+              @click="handleSearch"
+              class="search-button"
+            >
+              {{ t('events_calendar.search.button') }}
+            </n-button>
+          </div>
+        </main>
+      </template>
+    </customDefaultPage>
+  </div>
+</template>
+
+<script setup>
+import customDefaultPage from '@/components/customDefaultPage/index.vue'
+import { reactive } from 'vue'
+import { NDatePicker, NButton } from 'naive-ui'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+
+const state = reactive({
+  selectedDateValue: null, //选中值
+})
+
+const handleSearch = () => {
+  // 搜索处理逻辑
+  console.log('搜索:', state.selectedDateValue)
+}
+</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-date-picker {
+  width: 240px;
+}
+
+:deep(.n-date-picker) {
+  width: 240px;
+  .n-input__input {
+    padding: 4px 0;
+    border-radius: 4px;
+  }
+}
+
+:deep(.n-button) {
+  padding: 20px 16px;
+  border-radius: 4px;
+}
+</style>

src/views/events-calendar/size375/index.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="events-calendar-page">
+    <customDefaultPage>
+      <template #content>
+        <main class="p-[35px] max-w-[1800px] mx-auto">
+          <div class="title mb-[20px]">
+            {{ t('events_calendar.title') }}
+          </div>
+          <div class="search-container">
+            <n-date-picker
+              v-model:value="state.selectedDateValue"
+              type="date"
+              class="search-date-picker"
+            ></n-date-picker>
+            <n-button
+              type="primary"
+              @click="handleSearch"
+              class="search-button"
+            >
+              {{ t('events_calendar.search.button') }}
+            </n-button>
+          </div>
+        </main>
+      </template>
+    </customDefaultPage>
+  </div>
+</template>
+
+<script setup>
+import customDefaultPage from '@/components/customDefaultPage/index.vue'
+import { reactive } from 'vue'
+import { NDatePicker, NButton } from 'naive-ui'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+
+const state = reactive({
+  selectedDateValue: null, //选中值
+})
+
+const handleSearch = () => {
+  // 搜索处理逻辑
+  console.log('搜索:', state.selectedDateValue)
+}
+</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-date-picker {
+  width: 100%;
+}
+
+:deep(.n-date-picker) {
+  width: 100%;
+  .n-input__input {
+    padding: 4px 0;
+    border-radius: 4px;
+  }
+}
+
+:deep(.n-button) {
+  width: 260px;
+  padding: 20px 16px;
+  border-radius: 4px;
+}
+</style>

src/views/historic-stock/index.vue

@@ -3,8 +3,8 @@ import { computed } from "vue";
 import { useWindowSize } from "@vueuse/core";
 
 import size375 from "./size375/index.vue";
-import size768 from "./size768/index.vue";
+import size768 from "./size1920/index.vue";
-import size1440 from "./size1440/index.vue";
+import size1440 from "./size1920/index.vue";
 import size1920 from "./size1920/index.vue";
 import { useRouter } from "vue-router";
 import { useI18n } from "vue-i18n";

src/views/historic-stock/size1920/index.vue

@@ -1,96 +1,264 @@
-<script setup>
-import { NCarousel, NCard } from "naive-ui";
-import { ref, onMounted } from "vue";
-import * as echarts from 'echarts';
-
-// 轮播图片示例
-const images = [
-  'https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=800&q=80',
-  'https://images.unsplash.com/photo-1465101046530-73398c7f28ca?auto=format&fit=crop&w=800&q=80',
-  'https://images.unsplash.com/photo-1519125323398-675f0ddb6308?auto=format&fit=crop&w=800&q=80',
-];
-
-// ECharts 实例
-const chartRef = ref();
-let chartInstance = null;
-
-onMounted(() => {
-  if (chartRef.value) {
-    chartInstance = echarts.init(chartRef.value);
-    chartInstance.setOption({
-      title: { text: '历史数据趋势', left: 'center', textStyle: { color: '#fff', fontSize: 24 } },
-      tooltip: {},
-      xAxis: {
-        type: 'category',
-        data: ['一月', '二月', '三月', '四月', '五月', '六月'],
-        axisLabel: { color: '#fff' },
-        axisLine: { lineStyle: { color: '#fff' } }
-      },
-      yAxis: {
-        type: 'value',
-        axisLabel: { color: '#fff' },
-        splitLine: { lineStyle: { color: 'rgba(255,255,255,0.1)' } },
-        axisLine: { lineStyle: { color: '#fff' } }
-      },
-      series: [{
-        data: [120, 200, 150, 80, 70, 110],
-        type: 'line',
-        smooth: true,
-        areaStyle: {
-          color: {
-            type: 'linear',
-            x: 0, y: 0, x2: 0, y2: 1,
-            colorStops: [
-              { offset: 0, color: 'rgba(59,130,246,0.5)' },
-              { offset: 1, color: 'rgba(59,130,246,0)' }
-            ]
-          }
-        },
-        lineStyle: { width: 4, color: '#3b82f6' },
-        symbol: 'circle',
-        symbolSize: 12,
-        itemStyle: { color: '#f59e0b', borderColor: '#fff', borderWidth: 2 },
-        animationDuration: 1200
-      }]
-    });
-  }
-});
-</script>
-
 <template>
-  <main ref="main" class="relative w-full h-[calc(100vh-120px)] flex flex-col items-center justify-center overflow-hidden bg-gradient-to-br from-[#1e293b] via-[#334155] to-[#0f172a] animate-bg-move">
+  <div class="historic-data-container">
-    <!-- 背景流动渐变动画 -->
+    <img src="@/assets/image/historic-stock.png" alt="1" />
-    <div class="absolute inset-0 -z-1 animate-bg-move bg-gradient-to-tr from-[#2563eb]/60 via-[#9333ea]/40 to-[#f59e0b]/30 blur-2xl opacity-80"></div>
+
-    <div class="relative z-10 w-full h-full flex flex-1 flex-row items-center justify-center gap-12 px-12 pt-8">
+    <div class="header">
-      <!-- 左侧图片轮播 -->
+      <h1 class="title">Historical Data</h1>
-      <div class="w-1/3 h-[420px] rounded-3xl shadow-2xl overflow-hidden bg-white/10 backdrop-blur-md animate-bounce-in">
+      <div class="filter-container">
-        <NCarousel autoplay show-arrow effect="card" class="h-full">
+        <n-dropdown
-          <img v-for="img in images" :key="img" :src="img" class="object-cover w-full h-full" />
+          trigger="click"
-        </NCarousel>
+          :options="periodOptions"
-      </div>
+          @select="handlePeriodChange"
-      <!-- 右侧信息卡片 -->
+          :value="state.selectedPeriod"
-      <div class="w-1/3 h-[420px] flex flex-col justify-between p-8 rounded-3xl bg-white/20 backdrop-blur-2xl shadow-xl animate-blob">
+        >
-        <NCard class="bg-transparent border-none shadow-none text-white" content-style="background:transparent;">
+          <n-button
-          <template #header>
+            >{{ state.selectedPeriod }} <n-icon><chevron-down-outline /></n-icon
-            <div class="text-3xl font-bold mb-2 animate-bounce-in">高大上数据看板</div>
+          ></n-button>
-          </template>
+        </n-dropdown>
-          <div class="text-lg mb-4 animate-delay-200 animate-bounce-in">这里可以放置一些关键指标、简介或实时数据。</div>
+
-          <ul class="space-y-2">
+        <n-dropdown
-            <li class="flex items-center gap-2 animate-delay-400 animate-bounce-in"><span class="i-uil:chart-line text-2xl text-primary"></span> 指标一：<span class="font-bold">12345</span></li>
+          trigger="click"
-            <li class="flex items-center gap-2 animate-delay-600 animate-bounce-in"><span class="i-uil:users-alt text-2xl text-accent"></span> 指标二：<span class="font-bold">6789</span></li>
+          :options="durationOptions"
-            <li class="flex items-center gap-2 animate-delay-600 animate-bounce-in"><span class="i-uil:clock text-2xl text-secondary"></span> 更新时间：<span class="font-bold">2024-06-01</span></li>
+          @select="handleDurationChange"
-          </ul>
+          :value="state.selectedDuration"
-        </NCard>
+        >
+          <n-button
+            >{{ state.selectedDuration }}
+            <n-icon><chevron-down-outline /></n-icon
+          ></n-button>
+        </n-dropdown>
       </div>
     </div>
-    <!-- 下方 ECharts 图表 -->
+
-    <div class="relative z-10 w-4/5 h-[320px] mt-12 rounded-3xl bg-white/10 backdrop-blur-md shadow-2xl animate-icon-in flex items-center justify-center">
+    <n-data-table
-      <div ref="chartRef" class="w-full h-full"></div>
+      :columns="columns"
-    </div>
+      :data="state.tableData"
-  </main>
+      :bordered="false"
+      :single-line="false"
+    />
+  </div>
 </template>
 
-<style scoped lang="scss">
+<script setup>
-// 可根据需要自定义更多样式
+import { NDataTable, NButton, NDropdown, NIcon } from "naive-ui";
-</style>
+import { reactive, onMounted, h } from "vue";
+import axios from "axios";
+import { ChevronDownOutline } from "@vicons/ionicons5";
 
+// 数据筛选选项
+const periodOptions = [
+  { label: "Daily", key: "Daily" },
+  { label: "Weekly", key: "Weekly" },
+  { label: "Monthly", key: "Monthly" },
+  { label: "Quarterly", key: "Quarterly" },
+  { label: "Annual", key: "Annual" },
+];
+
+const durationOptions = [
+  { label: "3 Months", key: "3 Months" },
+  { label: "6 Months", key: "6 Months" },
+  { label: "Year to Date", key: "Year to Date" },
+  { label: "1 Year", key: "1 Year" },
+  { label: "5 Years", key: "5 Years" },
+  { label: "10 Years", key: "10 Years" },
+];
+
+const state = reactive({
+  selectedPeriod: "Daily",
+  selectedDuration: "3 Months",
+  tableData: [],
+});
+
+// 表格列定义
+const columns = [
+  {
+    title: "Date",
+    key: "date",
+    align: "left",
+  },
+  {
+    title: "Open",
+    key: "open",
+    align: "center",
+  },
+  {
+    title: "High",
+    key: "high",
+    align: "center",
+  },
+  {
+    title: "Low",
+    key: "low",
+    align: "center",
+  },
+  {
+    title: "Close",
+    key: "close",
+    align: "center",
+  },
+  {
+    title: "Adj. Close",
+    key: "adjClose",
+    align: "center",
+  },
+  {
+    title: "Change",
+    key: "change",
+    align: "center",
+    render(row) {
+      const value = parseFloat(row.change);
+      const color = value < 0 ? "#ff4d4f" : value > 0 ? "#52c41a" : "";
+      return h("span", { style: { color } }, row.change);
+    },
+  },
+  {
+    title: "Volume",
+    key: "volume",
+    align: "center",
+  },
+];
+
+// 处理下拉选项变更
+const handlePeriodChange = (key) => {
+  state.selectedPeriod = key;
+  getPageData();
+};
+
+const handleDurationChange = (key) => {
+  state.selectedDuration = key;
+  getPageData();
+};
+
+onMounted(() => {
+  getPageData();
+});
+
+const getPageData = async () => {
+  try {
+    // 实际项目中应该根据state.selectedPeriod和state.selectedDuration动态调整API请求
+    let url =
+      "https://stockanalysis.com/api/symbol/a/OTC-MINM/history?type=chart";
+    const res = await axios.get(url);
+
+    // 转换API返回的数据为表格需要的格式
+    // 注意：以下是模拟数据，实际应该根据API返回的数据结构调整
+    state.tableData = [
+      {
+        date: "May 22, 2025",
+        open: "1.87",
+        high: "2.03",
+        low: "1.85",
+        close: "2.00",
+        adjClose: "2.00",
+        change: "-2.44%",
+        volume: "2,103",
+      },
+      {
+        date: "May 21, 2025",
+        open: "2.05",
+        high: "2.05",
+        low: "2.05",
+        close: "2.05",
+        adjClose: "2.05",
+        change: "-",
+        volume: "4",
+      },
+      {
+        date: "May 20, 2025",
+        open: "2.05",
+        high: "2.05",
+        low: "1.86",
+        close: "2.05",
+        adjClose: "2.05",
+        change: "-",
+        volume: "11,042",
+      },
+      {
+        date: "May 19, 2025",
+        open: "2.04",
+        high: "2.05",
+        low: "1.85",
+        close: "2.05",
+        adjClose: "2.05",
+        change: "-",
+        volume: "6,204",
+      },
+      {
+        date: "May 16, 2025",
+        open: "2.05",
+        high: "2.06",
+        low: "1.85",
+        close: "2.05",
+        adjClose: "2.05",
+        change: "2.50%",
+        volume: "3,618",
+      },
+      {
+        date: "May 15, 2025",
+        open: "2.05",
+        high: "2.05",
+        low: "1.93",
+        close: "2.00",
+        adjClose: "2.00",
+        change: "-1.48%",
+        volume: "5,413",
+      },
+      {
+        date: "May 14, 2025",
+        open: "1.95",
+        high: "2.05",
+        low: "1.95",
+        close: "2.03",
+        adjClose: "2.03",
+        change: "4.10%",
+        volume: "8,886",
+      },
+      {
+        date: "May 13, 2025",
+        open: "2.26",
+        high: "2.26",
+        low: "1.80",
+        close: "1.95",
+        adjClose: "1.95",
+        change: "-18.41%",
+        volume: "10,750",
+      },
+    ];
+
+    console.log("获取到的数据", state.tableData);
+  } catch (error) {
+    console.error("获取数据失败", error);
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.historic-data-container {
+  padding: 20px;
+  width: 100%;
+
+  .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+
+    .title {
+      font-size: 24px;
+      font-weight: bold;
+      margin: 0;
+    }
+
+    .filter-container {
+      display: flex;
+      gap: 10px;
+    }
+  }
+
+  :deep(.n-data-table) {
+    .n-data-table-td {
+      padding: 12px 8px;
+    }
+  }
+}
+</style>

src/views/index/size375/index.vue

@@ -13,7 +13,8 @@ import customFooter from '@/components/customFooter/index.vue'
   <!-- <main ref="main"></main> -->
 
   <customHeader />
-  <div style="margin: 80px 0;">
+  <div style="margin: 80px 0; position: relative; min-height: 100vh;">
+    <div class="background-image"></div>
     <router-view />
   </div>
   <customFooter />
@@ -23,4 +24,17 @@ import customFooter from '@/components/customFooter/index.vue'
 main {
   padding: var(--header-height, 80px) 0 0;
 }
+.background-image {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-image: url('@/assets/image/bg-375.png');
+  background-size: 100% 100%;
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+  z-index: -1;
+}
 </style>

src/views/new-releases/size1920/index.vue

@@ -1,10 +0,0 @@
-<template>
-  <div class="new-releases-page">
-    <customDefaultPage></customDefaultPage>
-  </div>
-</template>
-<script setup>
-import customDefaultPage from '@/components/customDefaultPage/index.vue'
-</script>
-
-<style scoped lang="scss"></style>

src/views/new-releases/size375/index.vue

@@ -1,10 +0,0 @@
-<template>
-  <div class="new-releases-page">
-    <customDefaultPage></customDefaultPage>
-  </div>
-</template>
-<script setup>
-import customDefaultPage from '@/components/customDefaultPage/index.vue'
-</script>
-
-<style scoped lang="scss"></style>

src/views/press-releases/size1920/index.vue

@@ -1,10 +1,106 @@
 <template>
-  <div class="new-releases-page">
+  <div class="press-releases-page">
-    <customDefaultPage></customDefaultPage>
+    <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"></style>
+<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>

src/views/press-releases/size375/index.vue

@@ -1,10 +1,118 @@
 <template>
-  <div class="new-releases-page">
+  <div class="press-releases-page">
-    <customDefaultPage></customDefaultPage>
+    <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"></style>
+<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>