修正股票变动颜色逻辑：将负值显示为绿色，正值显示为红色，确保在不同屏幕尺寸下的一致性。

去掉括号
fix news
2025-06-09 12:12:56 +08:00 · 2025-06-06 18:41:48 +08:00 · 2025-06-06 17:59:21 +08:00 · 2025-06-03 11:11:20 +08:00 · 2025-06-03 11:01:06 +08:00 · 2025-06-03 10:59:20 +08:00
120 changed files with 47922 additions and 3623 deletions
--- a/index.html
+++ b/index.html
@ -2,7 +2,7 @@
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/src/assets/image/icon.png" />
+    <link rel="icon" href="/favicon.ico" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
      <title>FiEE</title>
  </head>
--- a/package.json
+++ b/package.json
@ -18,6 +18,7 @@
    "axios": "^1.7.3",
    "cnjm-postcss-px-to-viewport": "^1.0.1",
    "countup.js": "^2.8.2",
+    "dayjs": "^1.11.13",
    "echarts": "^5.6.0",
    "gsap": "^3.12.5",
    "jsdom": "^24.0.0",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -29,6 +29,9 @@ importers:
      countup.js:
        specifier: ^2.8.2
        version: 2.8.2
+      dayjs:
+        specifier: ^1.11.13
+        version: 1.11.13
      echarts:
        specifier: ^5.6.0
        version: 5.6.0
@ -2068,6 +2071,9 @@ packages:
  date-fns@3.6.0:
    resolution: {integrity: sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==}

+  dayjs@1.11.13:
+    resolution: {integrity: sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==}
+
  debug@4.3.6:
    resolution: {integrity: sha512-O/09Bd4Z1fBrU4VzkhFqVgpPzaGbw6Sm9FEkBT1A/YBXQFGuuSxa1dN2nxgxS34JmKXqYx8CZAwEVoJFImUXIg==}
    engines: {node: '>=6.0'}
@ -6478,6 +6484,8 @@ snapshots:

  date-fns@3.6.0: {}

+  dayjs@1.11.13: {}
+
  debug@4.3.6:
    dependencies:
      ms: 2.1.2
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/icon.png
+++ b/public/icon.png
--- a/src/assets/file/AUDIT
+++ b/src/assets/file/AUDIT
--- a/src/assets/file/CODE
+++ b/src/assets/file/CODE
--- a/src/assets/file/COMPENSATION
+++ b/src/assets/file/COMPENSATION
--- a/src/assets/file/FiEE,
+++ b/src/assets/file/FiEE,
--- a/src/assets/file/FiEE,
+++ b/src/assets/file/FiEE,
--- a/src/assets/file/FiEE,
+++ b/src/assets/file/FiEE,
--- a/src/assets/file/FiEE,
+++ b/src/assets/file/FiEE,
--- a/src/assets/file/NOMINATING
+++ b/src/assets/file/NOMINATING
--- a/src/assets/file/footer/FiEE,
+++ b/src/assets/file/footer/FiEE,
--- a/src/assets/file/footer/FiEE,
+++ b/src/assets/file/footer/FiEE,
--- a/src/assets/file/footer/FiEE,
+++ b/src/assets/file/footer/FiEE,
--- a/src/assets/image/icon/echarts_markPointer.png
+++ b/src/assets/image/icon/echarts_markPointer.png
--- a/src/assets/image/icon/icon-link.png
+++ b/src/assets/image/icon/icon-link.png
--- a/src/assets/image/icon/icon-new.png
+++ b/src/assets/image/icon/icon-new.png
--- a/src/assets/image/logo.png
+++ b/src/assets/image/logo.png
--- a/src/components/customEcharts/index.vue
+++ b/src/components/customEcharts/index.vue
@ -0,0 +1,34 @@
+<script setup>
+import { computed } from 'vue'
+import { useWindowSize } from '@vueuse/core'
+
+import size375 from '@/components/customEcharts/size375/index.vue'
+import size768 from '@/components/customEcharts/size375/index.vue'
+import size1440 from '@/components/customEcharts/size1920/index.vue'
+import size1920 from '@/components/customEcharts/size1920/index.vue'
+import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+
+const router = useRouter()
+const { width } = useWindowSize()
+const { t } = useI18n()
+
+const viewComponent = computed(() => {
+  const viewWidth = width.value
+  if (viewWidth <= 500) {
+    return size375
+  } else if (viewWidth <= 960) {
+    return size768
+  } else if (viewWidth <= 1500) {
+    return size1440
+  } else if (viewWidth <= 1920 || viewWidth > 1920) {
+    return size1920
+  }
+})
+</script>
+
+<template>
+  <component :is="viewComponent" />
+</template>
+
+<style scoped lang="scss"></style>
--- a/src/components/customEcharts/size1920/index.vue
+++ b/src/components/customEcharts/size1920/index.vue
@ -0,0 +1,602 @@
+<template>
+  <div class="custom-echarts">
+    <div>
+      <div class="echarts-header">
+        <div class="echarts-header-title">
+          <span>FiEE, Inc. Stock Price History</span>
+        </div>
+        <div class="echarts-search-area">
+          <div class="echarts-search-byRange">
+            <text style="font-size: 0.9rem; font-weight: 400; color: #666666;">
+              Range
+            </text>
+            <div class="search-range-list">
+              <div
+                class="search-range-list-each"
+                v-for="(item, index) in state.searchRange"
+                :key="index"
+                @click="changeSearchRange(item)"
+              >
+                <span>{{ item }}</span>
+              </div>
+            </div>
+          </div>
+          <div class="echarts-search-byDate">
+            <n-date-picker
+              v-model:value="state.selectHistoricStartDate"
+              type="date"
+              :is-date-disabled="disableAfterDate"
+              @update:value="changeSearchRangeStartDate"
+              input-readonly
+            />
+            <!-- <n-icon size="16">
+                <ArrowForwardOutline />
+              </n-icon> -->
+            <span>to</span>
+            <n-date-picker
+              v-model:value="state.selectHistoricEndDate"
+              type="date"
+              :is-date-disabled="disablePreviousDate"
+              @update:value="changeSearchRangeEndDate"
+              input-readonly
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div id="myEcharts" class="myChart"></div>
+  </div>
+</template>
+<script setup>
+import { onMounted, watch, reactive } from 'vue'
+import * as echarts from 'echarts'
+import markPointerIcon from '@/assets/image/icon/echarts_markPointer.png'
+import axios from 'axios'
+import { NDatePicker, NIcon } from 'naive-ui'
+import { ArrowForwardOutline } from '@vicons/ionicons5'
+
+const state = reactive({
+  searchRange: ['1m', '3m', 'YTD', '1Y', '5Y', '10Y', 'Max'],
+  selectHistoricStartDate: '2009-10-07',
+  selectHistoricEndDate: new Date(),
+})
+
+let myCharts = null
+let historicData = []
+let xAxisData = []
+
+//初始化eCharts
+const initEcharts = (data) => {
+  historicData = data
+  xAxisData = data.map((item) => {
+    return new Date(item.date).toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric',
+    })
+  })
+  const yAxisData = data.map((item) => item.price)
+  // console.error(xAxisData, yAxisData)
+  // 基于准备好的dom，初始化echarts实例
+  myCharts = echarts.init(document.getElementById('myEcharts'), null, {
+    renderer: 'canvas',
+    useDirtyRect: true
+  })
+  // 绘制图表
+  myCharts.setOption({
+    animation: false,
+    progressive: 500,
+    progressiveThreshold: 3000,
+    // title: {
+    //   text: 'FiEE, Inc. Stock Price History',
+    // },
+    grid: {
+      left: '8%', // 或 '2%'，根据实际情况调整
+      right: '12%', // 给右侧y轴留空间，数值可根据y轴label宽度调整
+    },
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'line',
+        label: {
+          backgroundColor: '#6a7985',
+        },
+      },
+      formatter: function (params) {
+        const p = params[0]
+        return `<span style="font-size: 1.1rem; font-weight: 600;">${p.axisValue}</span><br/><span style="font-size: 0.9rem; font-weight: 400;">Price: ${p.data}</span>`
+      },
+      triggerOn: 'mousemove',
+      confine: true,
+      hideDelay: 1500
+    },
+    xAxis: {
+      data: xAxisData,
+      type: 'category',
+      boundaryGap: false,
+      inverse: true,
+      axisLine: {
+        lineStyle: {
+          color: '#CCD6EB',
+        },
+      },
+      axisLabel: {
+        color: '#323232',
+        fontWeight: 'bold',
+        interval: 'auto',
+        hideOverlap: true
+      },
+    },
+    yAxis: {
+      type: 'value',
+      position: 'right',
+      interval: 25,
+      //   max: 75.0,
+      show: true,
+      axisLabel: {
+        color: '#323232',
+        fontWeight: 'bold',
+        formatter: function (value) {
+          return value > 0 ? value.toFixed(2) : value
+        },
+      },
+    },
+    series: [
+      {
+        data: yAxisData,
+        type: 'line',
+        sampling: 'lttb',
+        symbol: 'none',
+        lineStyle: {
+          color: '#2c6288',
+        },
+        areaStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 0,
+                color: '#2c6288',
+              },
+              {
+                offset: 1,
+                color: '#F4F6F8',
+              },
+            ],
+          },
+        },
+        markPoint: {
+          symbol: 'image://' + markPointerIcon,
+          symbolSize: 24,
+          data: [],
+        },
+        progressive: 500,
+        progressiveThreshold: 3000,
+        large: true,
+        largeThreshold: 2000
+      },
+    ],
+
+    dataZoom: [
+      {
+        type: 'inside',
+      },
+      {
+        type: 'slider',
+        show: true,
+        dataBackground: {
+          lineStyle: {
+            color: '#2C6288',
+          },
+          areaStyle: {
+            color: {
+              type: 'linear',
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [
+                { offset: 1, color: '#2c6288' },
+                { offset: 0, color: '#F4F6F8' },
+              ],
+            },
+          },
+        },
+        selectedDataBackground: {
+          lineStyle: {
+            color: '#2C6288',
+          },
+          areaStyle: {
+            color: {
+              type: 'linear',
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [
+                { offset: 1, color: '#2c6288' },
+                { offset: 0, color: '#F4F6F8' },
+              ],
+            },
+          },
+        },
+        fillerColor: 'rgba(44, 98, 136, 0.3)',
+        realtime: false,
+      },
+    ],
+  })
+
+  // 监听 showTip 事件，动态显示 markPoint
+  myCharts.on('showTip', function (params) {
+    if (params) {
+      const dataIndex = params.dataIndex
+      const x = myCharts.getOption().xAxis[0].data[dataIndex]
+      const y = myCharts.getOption().series[0].data[dataIndex]
+      myCharts.setOption({
+        series: [
+          {
+            markPoint: {
+              symbol: 'image://' + markPointerIcon,
+              symbolSize: 24,
+              data: [{ coord: [x, y] }],
+            },
+          },
+        ],
+      })
+    }
+  })
+  // 鼠标移出时，清除 markPoint
+  myCharts.on('globalout', function () {
+    myCharts.setOption({
+      series: [
+        {
+          markPoint: {
+            symbol: 'image://' + markPointerIcon,
+            symbolSize: 24,
+            data: [],
+          },
+        },
+      ],
+    })
+  })
+  myCharts.on('dataZoom', function (params) {
+    // 获取当前 dataZoom 范围
+    const option = myCharts.getOption()
+    const xAxisData = option.xAxis[0].data
+    const dataZoom = option.dataZoom[1] || option.dataZoom[0]
+
+    // 获取 dataZoom 的 startValue 和 endValue
+    let startValue = dataZoom.endValue
+    let endValue = dataZoom.startValue
+
+    // 如果是索引，转为日期
+    if (typeof startValue === 'number') {
+      startValue = xAxisData[startValue]
+    }
+    if (typeof endValue === 'number') {
+      endValue = xAxisData[endValue]
+    }
+
+    // 更新日期选择器
+    state.selectHistoricStartDate = new Date(startValue)
+    state.selectHistoricEndDate = new Date(endValue)
+  })
+}
+
+onMounted(() => {
+  getHistoricalData()
+})
+
+//获取历史数据
+const getHistoricalData = async () => {
+  let now = new Date()
+  let toDate =
+    now.getFullYear() +
+    '-' +
+    String(now.getMonth() + 1).padStart(2, '0') +
+    '-' +
+    String(now.getDate()).padStart(2, '0')
+  let url =
+    'https://common.szjixun.cn/api/stock/history/base/list?from=2009-10-07&to=' +
+    toDate
+  const res = await axios.get(url)
+  if (res.status === 200) {
+    if (res.data.status === 0) {
+      initEcharts(res.data.data)
+    }
+  }
+}
+
+// 适配倒序数据，返回大于等于目标日期的最近一天索引
+function findClosestDateIndex(data, targetDateStr) {
+  let left = 0,
+    right = data.length - 1
+  const target = new Date(targetDateStr).getTime()
+  let res = data.length - 1 // 默认返回最后一个
+  while (left <= right) {
+    const mid = Math.floor((left + right) / 2)
+    const midTime = new Date(data[mid].date).getTime()
+    if (midTime > target) {
+      left = mid + 1
+    } else {
+      res = mid
+      right = mid - 1
+    }
+  }
+  return res
+}
+
+// 适配倒序数据，返回小于等于目标日期的最近一天索引
+function findClosestDateIndexDescLeft(data, targetDateStr) {
+  let left = 0,
+    right = data.length - 1
+  const target = new Date(targetDateStr).getTime()
+  let res = -1
+  while (left <= right) {
+    const mid = Math.floor((left + right) / 2)
+    const midTime = new Date(data[mid].date).getTime()
+    if (midTime > target) {
+      left = mid + 1 // mid 比目标新，往更旧的方向找
+    } else {
+      res = mid     // mid <= target，记录下来，继续往更新的方向找
+      right = mid - 1
+    }
+  }
+  return res
+}
+
+//点击切换搜索区间
+const changeSearchRange = (range, dateTime) => {
+  const now = new Date()
+  let startDate = ''
+  let endDate = ''
+  if (range === '1m') {
+    const last = new Date(now)
+    last.setMonth(now.getMonth() - 1)
+    startDate = last.toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric',
+    })
+    endDate = new Date(new Date()).toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric',
+    })
+  } else if (range === '3m') {
+    const last = new Date(now)
+    last.setMonth(now.getMonth() - 3)
+    startDate = last.toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric',
+    })
+    endDate = new Date(new Date()).toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric',
+    })
+  } else if (range === 'YTD') {
+    startDate = new Date(now.getFullYear(), 0, 1).toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric',
+    })
+    endDate = new Date(new Date()).toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric',
+    })
+  } else if (range === '1Y') {
+    const last = new Date(now)
+    last.setFullYear(now.getFullYear() - 1)
+    startDate = last.toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric',
+    })
+    endDate = new Date(new Date()).toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric',
+    })
+  } else if (range === '5Y') {
+    const last = new Date(now)
+    last.setFullYear(now.getFullYear() - 5)
+    startDate = last.toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric',
+    })
+    endDate = new Date(new Date()).toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric',
+    })
+  } else if (range === '10Y') {
+    const last = new Date(now)
+    last.setFullYear(now.getFullYear() - 10)
+    startDate = last.toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric',
+    })
+    endDate = new Date(new Date()).toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric',
+    })
+  } else if (range === 'Max') {
+    startDate = ''
+    endDate = ''
+  } else if (range === 'startDateTime') {
+    startDate = dateTime
+    endDate = ''
+  } else if (range === 'endDateTime') {
+    startDate = ''
+    endDate = dateTime
+  }
+  if (startDate || endDate) {
+    // historicData 和 xAxisData 需在 initEcharts 作用域可用
+    if (
+      typeof historicData !== 'undefined' &&
+      typeof xAxisData !== 'undefined'
+    ) {
+      let startValue = xAxisData[0]
+      if (startDate) {
+        const idx = findClosestDateIndex(historicData, startDate)
+        // 用 historicData[idx].date 格式化为 xAxisData 的格式
+        startValue = new Date(historicData[idx].date).toLocaleDateString(
+          'en-US',
+          {
+            month: 'short',
+            day: 'numeric',
+            year: 'numeric',
+          },
+        )
+      }
+      let endValue = endDate
+      if (endDate) {
+        // console.warn(endDate)
+        const idx = findClosestDateIndexDescLeft(historicData, endDate)
+        // console.warn(idx)
+        // 用 historicData[idx].date 格式化为 xAxisData 的格式
+        endValue = new Date(historicData[idx].date).toLocaleDateString(
+          'en-US',
+          {
+            month: 'short',
+            day: 'numeric',
+            year: 'numeric',
+          },
+        )
+        // console.warn(endValue)
+      }
+
+      if (startDate) {
+        myCharts.setOption({
+          dataZoom: {
+            endValue: startValue,
+          },
+        })
+        state.selectHistoricStartDate = new Date(startValue)
+      }
+      if (endDate) {
+        myCharts.setOption({
+          dataZoom: {
+            startValue: endValue,
+          },
+        })
+        state.selectHistoricEndDate = new Date(endValue)
+      }
+    }
+  } else {
+    myCharts.setOption({
+      dataZoom: {
+        startValue: '',
+        endValue: '',
+      },
+    })
+
+    state.selectHistoricStartDate = new Date('2009-10-07')
+    state.selectHistoricEndDate = new Date()
+  }
+}
+
+// 禁用2009-10-07之后的日期
+const disableAfterDate = (date) => {
+  return date < new Date('2009-10-06') || date > new Date()
+}
+
+// 禁用过去的日期
+const disablePreviousDate = (date) => {
+  return date < new Date(state.selectHistoricStartDate) || date > new Date()
+}
+
+// 切换搜索区间开始日期
+const changeSearchRangeStartDate = (date) => {
+  // console.error(date)
+  changeSearchRange(
+    'startDateTime',
+    new Date(date).toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric',
+    }),
+  )
+}
+
+// 切换搜索区间结束日期
+const changeSearchRangeEndDate = (date) => {
+  // console.error(date)
+  changeSearchRange(
+    'endDateTime',
+    new Date(date).toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric',
+    }),
+  )
+}
+</script>
+<style lang="scss" scoped>
+.custom-echarts {
+  .myChart {
+    width: 100%;
+    height: 25rem;
+  }
+
+  .echarts-header {
+    .echarts-header-title {
+      span {
+        font-size: 2rem;
+        font-weight: 600;
+        color: #323232;
+      }
+    }
+    .echarts-search-area {
+      padding: 2rem 0 0;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+
+      .echarts-search-byRange {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: flex-start;
+        gap: 10px;
+        .search-range-list {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          justify-content: flex-start;
+          gap: 10px;
+          .search-range-list-each {
+            padding: 5px 10px;
+            border-radius: 5px;
+            background-color: #f3f4f6;
+            cursor: pointer;
+            span {
+              font-weight: 600;
+              font-size: 0.9rem;
+            }
+          }
+        }
+      }
+
+      .echarts-search-byDate {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: flex-start;
+        gap: 0.4rem;
+      }
+    }
+  }
+}
+</style>
--- a/src/components/customEcharts/size375/index.vue
+++ b/src/components/customEcharts/size375/index.vue
@ -0,0 +1,604 @@
+<template>
+  <div class="custom-echarts">
+    <div>
+      <div class="echarts-header">
+        <div class="echarts-header-title">
+          <span>FiEE, Inc. Stock Price History</span>
+        </div>
+        <div class="echarts-search-area">
+          <div class="echarts-search-byRange">
+            <text style="font-size: 0.9rem; font-weight: 400; color: #666666;">
+              Range
+            </text>
+            <div class="search-range-list">
+              <div
+                class="search-range-list-each"
+                v-for="(item, index) in state.searchRange"
+                :key="index"
+                @click="changeSearchRange(item)"
+              >
+                <span>{{ item }}</span>
+              </div>
+            </div>
+          </div>
+          <div class="echarts-search-byDate">
+            <n-date-picker
+              v-model:value="state.selectHistoricStartDate"
+              type="date"
+              :is-date-disabled="disableAfterDate"
+              @update:value="changeSearchRangeStartDate"
+              input-readonly
+            />
+            <!-- <n-icon size="30">
+              <ArrowForwardOutline />
+            </n-icon> -->
+            <span>to</span>
+            <n-date-picker
+              v-model:value="state.selectHistoricEndDate"
+              type="date"
+              :is-date-disabled="disablePreviousDate"
+              @update:value="changeSearchRangeEndDate"
+              input-readonly
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div id="myEcharts" class="myChart"></div>
+  </div>
+</template>
+<script setup>
+import { onMounted, watch, reactive } from 'vue'
+import * as echarts from 'echarts'
+import markPointerIcon from '@/assets/image/icon/echarts_markPointer.png'
+import axios from 'axios'
+import { NDatePicker } from 'naive-ui'
+import { ArrowForwardOutline } from '@vicons/ionicons5'
+
+const state = reactive({
+  searchRange: ['1m', '3m', 'YTD', '1Y', '5Y', '10Y', 'Max'],
+  selectHistoricStartDate: '2009-10-07',
+  selectHistoricEndDate: new Date(),
+})
+
+let myCharts = null
+let historicData = []
+let xAxisData = []
+
+//初始化eCharts
+const initEcharts = (data) => {
+  historicData = data
+  xAxisData = data.map((item) => {
+    return new Date(item.date).toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric',
+    })
+  })
+  const yAxisData = data.map((item) => item.price)
+  // console.error(xAxisData, yAxisData)
+  // 基于准备好的dom，初始化echarts实例
+  myCharts = echarts.init(document.getElementById('myEcharts'))
+  // 绘制图表
+  myCharts.setOption({
+    animation: false,
+    progressive: 500,
+    progressiveThreshold: 3000,
+    // title: {
+    //   text: 'FiEE, Inc. Stock Price History',
+    // },
+    grid: {
+      left: '8%', // 或 '2%'，根据实际情况调整
+      right: '15%', // 给右侧y轴留空间，数值可根据y轴label宽度调整
+    },
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'line',
+        snap: true,
+        label: {
+          backgroundColor: '#6a7985',
+        },
+      },
+      formatter: function (params) {
+        const p = params[0]
+        return `<span style="font-size: 1.1rem; font-weight: 600;">${p.axisValue}</span><br/><span style="font-size: 0.9rem; font-weight: 400;">Price: ${p.data}</span>`
+      },
+      confine: true,
+      hideDelay: 1500
+    },
+    xAxis: {
+      data: xAxisData,
+      type: 'category',
+      boundaryGap: false,
+      inverse: true,
+      axisLine: {
+        lineStyle: {
+          color: '#CCD6EB',
+        },
+      },
+      axisLabel: {
+        color: '#323232',
+        fontWeight: 'bold',
+        // formatter: function (value) {
+        //   return value ? value.split('-')[0] : ''
+        // },
+        // interval: function (index, value) {
+        //   if (index === 0) return true;
+        //   const axisData = this && this.axis && this.axis.data ? this.axis.data : [];
+        //   if (!axisData[index - 1]) return true;
+        //   return value.split('-')[0] !== axisData[index - 1].split('-')[0];
+        // },
+      },
+    },
+    yAxis: {
+      type: 'value',
+      position: 'right',
+      interval: 25,
+      //   max: 75.0,
+      show: true,
+      axisLabel: {
+        color: '#323232',
+        fontWeight: 'bold',
+        formatter: function (value) {
+          return value > 0 ? value.toFixed(2) : value
+        },
+      },
+    },
+    series: [
+      {
+        data: yAxisData,
+        type: 'line',
+        sampling: 'lttb',
+        symbol: 'none',
+        lineStyle: {
+          color: '#2c6288',
+        },
+        areaStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 0,
+                color: '#2c6288',
+              },
+              {
+                offset: 1,
+                color: '#F4F6F8',
+              },
+            ],
+          },
+        },
+        markPoint: {
+          symbol: 'image://' + markPointerIcon,
+          symbolSize: 24,
+          data: [],
+        },
+      },
+    ],
+
+    dataZoom: [
+      {
+        type: 'inside',
+      },
+      {
+        type: 'slider',
+        show: true,
+        dataBackground: {
+          lineStyle: {
+            color: '#2C6288',
+          },
+          areaStyle: {
+            color: {
+              type: 'linear',
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [
+                { offset: 1, color: '#2c6288' },
+                { offset: 0, color: '#F4F6F8' },
+              ],
+            },
+          },
+        },
+        selectedDataBackground: {
+          lineStyle: {
+            color: '#2C6288',
+          },
+          areaStyle: {
+            color: {
+              type: 'linear',
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [
+                { offset: 1, color: '#2c6288' },
+                { offset: 0, color: '#F4F6F8' },
+              ],
+            },
+          },
+        },
+        fillerColor: 'rgba(44, 98, 136, 0.3)',
+        realtime: false,
+      },
+    ],
+  })
+
+  // 监听 showTip 事件，动态显示 markPoint
+  myCharts.on('showTip', function (params) {
+    if (params) {
+      const dataIndex = params.dataIndex
+      const x = myCharts.getOption().xAxis[0].data[dataIndex]
+      const y = myCharts.getOption().series[0].data[dataIndex]
+      myCharts.setOption({
+        series: [
+          {
+            markPoint: {
+              symbol: 'image://' + markPointerIcon,
+              symbolSize: 24,
+              data: [{ coord: [x, y] }],
+            },
+          },
+        ],
+      })
+    }
+  })
+  // 鼠标移出时，清除 markPoint
+  myCharts.on('globalout', function () {
+    myCharts.setOption({
+      series: [
+        {
+          markPoint: {
+            symbol: 'image://' + markPointerIcon,
+            symbolSize: 24,
+            data: [],
+          },
+        },
+      ],
+    })
+  })
+  
+  myCharts.on('dataZoom', function (params) {
+    // 获取当前 dataZoom 范围
+    const option = myCharts.getOption()
+    const xAxisData = option.xAxis[0].data
+    const dataZoom = option.dataZoom[1] || option.dataZoom[0]
+
+    // 获取 dataZoom 的 startValue 和 endValue
+    let startValue = dataZoom.endValue
+    let endValue = dataZoom.startValue
+
+    // 如果是索引，转为日期
+    if (typeof startValue === 'number') {
+      startValue = xAxisData[startValue]
+    }
+    if (typeof endValue === 'number') {
+      endValue = xAxisData[endValue]
+    }
+
+    // 更新日期选择器
+    state.selectHistoricStartDate = new Date(startValue)
+    state.selectHistoricEndDate = new Date(endValue)
+  })
+}
+
+onMounted(() => {
+  getHistoricalData()
+})
+
+//获取历史数据
+const getHistoricalData = async () => {
+  let now = new Date()
+  let toDate =
+    now.getFullYear() +
+    '-' +
+    String(now.getMonth() + 1).padStart(2, '0') +
+    '-' +
+    String(now.getDate()).padStart(2, '0')
+  let url =
+    'https://common.szjixun.cn/api/stock/history/base/list?from=2009-10-07&to=' +
+    toDate
+  const res = await axios.get(url)
+  if (res.status === 200) {
+    if (res.data.status === 0) {
+      initEcharts(res.data.data)
+    }
+  }
+}
+
+// 适配倒序数据，返回大于等于目标日期的最近一天索引
+function findClosestDateIndex(data, targetDateStr) {
+  let left = 0,
+    right = data.length - 1
+  const target = new Date(targetDateStr).getTime()
+  let res = data.length - 1 // 默认返回最后一个
+  while (left <= right) {
+    const mid = Math.floor((left + right) / 2)
+    const midTime = new Date(data[mid].date).getTime()
+    if (midTime > target) {
+      left = mid + 1
+    } else {
+      res = mid
+      right = mid - 1
+    }
+  }
+  return res
+}
+
+// 适配倒序数据，返回小于等于目标日期的最近一天索引
+function findClosestDateIndexDescLeft(data, targetDateStr) {
+  let left = 0,
+    right = data.length - 1
+  const target = new Date(targetDateStr).getTime()
+  let res = -1
+  while (left <= right) {
+    const mid = Math.floor((left + right) / 2)
+    const midTime = new Date(data[mid].date).getTime()
+    if (midTime > target) {
+      left = mid + 1 // mid 比目标新，往更旧的方向找
+    } else {
+      res = mid     // mid <= target，记录下来，继续往更新的方向找
+      right = mid - 1
+    }
+  }
+  return res
+}
+
+//点击切换搜索区间
+const changeSearchRange = (range, dateTime) => {
+  const now = new Date()
+  let startDate = ''
+  let endDate = ''
+  if (range === '1m') {
+    const last = new Date(now)
+    last.setMonth(now.getMonth() - 1)
+    startDate = last.toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric',
+    })
+    endDate = new Date(new Date()).toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric',
+    })
+  } else if (range === '3m') {
+    const last = new Date(now)
+    last.setMonth(now.getMonth() - 3)
+    startDate = last.toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric',
+    })
+    endDate = new Date(new Date()).toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric',
+    })
+  } else if (range === 'YTD') {
+    startDate = new Date(now.getFullYear(), 0, 1).toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric',
+    })
+    endDate = new Date(new Date()).toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric',
+    })
+  } else if (range === '1Y') {
+    const last = new Date(now)
+    last.setFullYear(now.getFullYear() - 1)
+    startDate = last.toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric',
+    })
+    endDate = new Date(new Date()).toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric',
+    })
+  } else if (range === '5Y') {
+    const last = new Date(now)
+    last.setFullYear(now.getFullYear() - 5)
+    startDate = last.toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric',
+    })
+    endDate = new Date(new Date()).toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric',
+    })
+  } else if (range === '10Y') {
+    const last = new Date(now)
+    last.setFullYear(now.getFullYear() - 10)
+    startDate = last.toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric',
+    })
+    endDate = new Date(new Date()).toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric',
+    })
+  } else if (range === 'Max') {
+    startDate = ''
+    endDate = ''
+  } else if (range === 'startDateTime') {
+    startDate = dateTime
+    endDate = ''
+  } else if (range === 'endDateTime') {
+    startDate = ''
+    endDate = dateTime
+  }
+  if (startDate || endDate) {
+    // historicData 和 xAxisData 需在 initEcharts 作用域可用
+    if (
+      typeof historicData !== 'undefined' &&
+      typeof xAxisData !== 'undefined'
+    ) {
+      let startValue = xAxisData[0]
+      if (startDate) {
+        const idx = findClosestDateIndex(historicData, startDate)
+        // 用 historicData[idx].date 格式化为 xAxisData 的格式
+        startValue = new Date(historicData[idx].date).toLocaleDateString(
+          'en-US',
+          {
+            month: 'short',
+            day: 'numeric',
+            year: 'numeric',
+          },
+        )
+      }
+      let endValue = endDate
+      if (endDate) {
+        // console.warn(endDate)
+        const idx = findClosestDateIndexDescLeft(historicData, endDate)
+        // console.warn(idx)
+        // 用 historicData[idx].date 格式化为 xAxisData 的格式
+        endValue = new Date(historicData[idx].date).toLocaleDateString(
+          'en-US',
+          {
+            month: 'short',
+            day: 'numeric',
+            year: 'numeric',
+          },
+        )
+        // console.warn(endValue)
+      }
+
+      if (startDate) {
+        myCharts.setOption({
+          dataZoom: {
+            endValue: startValue,
+          },
+        })
+        state.selectHistoricStartDate = new Date(startValue)
+      }
+      if (endDate) {
+        myCharts.setOption({
+          dataZoom: {
+            startValue: endValue,
+          },
+        })
+        state.selectHistoricEndDate = new Date(endValue)
+      }
+    }
+  } else {
+    myCharts.setOption({
+      dataZoom: {
+        startValue: '',
+        endValue: '',
+      },
+    })
+
+    state.selectHistoricStartDate = new Date('2009-10-07')
+    state.selectHistoricEndDate = new Date()
+  }
+}
+
+// 禁用2009-10-07之后的日期
+const disableAfterDate = (date) => {
+  return date < new Date('2009-10-06') || date > new Date()
+}
+
+// 禁用过去的日期
+const disablePreviousDate = (date) => {
+  return date < new Date(state.selectHistoricStartDate) || date > new Date()
+}
+
+// 切换搜索区间开始日期
+const changeSearchRangeStartDate = (date) => {
+  // console.error(date)
+  changeSearchRange(
+    'startDateTime',
+    new Date(date).toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric',
+    }),
+  )
+}
+
+// 切换搜索区间结束日期
+const changeSearchRangeEndDate = (date) => {
+  // console.error(date)
+  changeSearchRange(
+    'endDateTime',
+    new Date(date).toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric',
+    }),
+  )
+}
+</script>
+<style lang="scss" scoped>
+.custom-echarts {
+  .myChart {
+    width: 100%;
+    height: 25rem;
+  }
+
+  .echarts-header {
+    .echarts-header-title {
+      span {
+        font-size: 2rem;
+        font-weight: 600;
+        color: #323232;
+      }
+    }
+    .echarts-search-area {
+      padding: 2rem 0 0;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      justify-content: center;
+
+      .echarts-search-byRange {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: flex-start;
+        gap: 0.7rem;
+        .search-range-list {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          justify-content: flex-start;
+          gap: 0.7rem;
+          .search-range-list-each {
+            padding: 0.2rem 0.3rem;
+            border-radius: 5px;
+            background-color: #f3f4f6;
+            cursor: pointer;
+            span {
+              font-weight: 600;
+              font-size: 0.9rem;
+            }
+          }
+        }
+      }
+
+      .echarts-search-byDate {
+        padding: 1.5rem 0 0;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: flex-start;
+        gap: 0.4rem;
+      }
+    }
+  }
+}
+</style>
--- a/src/components/customFooter/index.vue
+++ b/src/components/customFooter/index.vue
@ -3,7 +3,7 @@ import { computed } from 'vue'
 import { useWindowSize } from '@vueuse/core'

 import size375 from '@/components/customFooter/size375/index.vue'
-import size768 from '@/components/customFooter/size1920/index.vue'
+import size768 from '@/components/customFooter/size768/index.vue'
 import size1440 from '@/components/customFooter/size1920/index.vue'
 import size1920 from '@/components/customFooter/size1920/index.vue'
 import { useRouter } from 'vue-router'
@ -15,7 +15,7 @@ const { t } = useI18n()

 const viewComponent = computed(() => {
  const viewWidth = width.value
-  if (viewWidth <= 450) {
+  if (viewWidth <= 500) {
    return size375
  } else if (viewWidth <= 1100) {
    return size768
--- a/src/components/customFooter/size1920/index.vue
+++ b/src/components/customFooter/size1920/index.vue
@ -1,23 +1,69 @@
 <template>
  <!-- 通用页脚 -->
  <div class="custom-footer">
-    <span>Copyright &copy; 2024-2027 FiEE</span>
+    <div class="custom-footer-box">
+      <span>&copy; 2025 FiEE, Inc. All Rights Reserved.</span>
+      <div class="footer-links">
+        <span @click="handleLink('privacyPolicy')">Privacy Policy</span>
+        <span @click="handleLink('termsOfUse')">Terms of use</span>
+        <span @click="handleLink('siteMap')">Site Map</span>
+      </div>
+    </div>
  </div>
 </template>

-<script setup></script>
+<script setup>
+import { useRouter } from "vue-router";
+const router = useRouter();
+import privacyPolicy from "@/assets/file/footer/FiEE, Inc. _ Privacy policy.pdf";
+import termsOfUse from "@/assets/file/footer/FiEE, Inc. _ Terms of Use.pdf";
+import siteMap from "@/assets/file/footer/FiEE, Inc. _ Site Map.pdf";
+
+//点击跳转到对应的链接页面
+const handleLink = (link) => {
+  // if (link === "privacyPolicy") {
+  //   window.open(privacyPolicy, "_blank");
+  // } else if (link === "termsOfUse") {
+  //   window.open(termsOfUse, "_blank");
+  // } else if (link === "siteMap") {
+  //   window.open(siteMap, "_blank");
+  // }
+  router.push(link)
+};
+</script>

 <style scoped lang="scss">
 .custom-footer {
  width: 100%;
-  text-align: center;
-  padding: 24px 0;
-  color: #888;
-  // font-size: 15px;
-  font-size: 1.05rem;
  background: #f7f8fa;
-  letter-spacing: 1px;
  border-top: 1px solid #ececec;
  z-index: 100;
+
+  .custom-footer-box {
+    max-width: 1700px;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    letter-spacing: 1px;
+    color: #888;
+    // font-size: 15px;
+    font-size: 1.05rem;
+    padding: 1rem 40px;
+    text-align: center;
+  }
+
+  .footer-links {
+    margin: 0.4rem 0 0;
+    span {
+      border-right: 1px solid #d2d2d7;
+      padding: 0 10px;
+      cursor: pointer;
+    }
+    span:nth-last-child(1) {
+      border: 0;
+    }
+  }
 }
 </style>
--- a/src/components/customFooter/size375/index.vue
+++ b/src/components/customFooter/size375/index.vue
@ -1,23 +1,70 @@
 <template>
-    <!-- 通用页脚 -->
-    <div class="custom-footer">
-      <span>Copyright &copy; 2024-2027 FiEE</span>
+  <!-- 通用页脚 -->
+  <div class="custom-footer">
+    <span>&copy; 2025 FiEE, Inc. All Rights Reserved.</span>
+    <div class="footer-links-box">
+      <div class="footer-links">
+        <span @click="handleLink('privacyPolicy')">Privacy Policy</span>
+        <span @click="handleLink('termsOfUse')">Terms of use</span>
+        <span @click="handleLink('siteMap')">Site Map</span>
+      </div>
    </div>
-  </template>
-  
-  <script setup></script>
-  
-  <style scoped lang="scss">
-  .custom-footer {
-    width: 100%;
-    text-align: center;
-    padding: 120px 0;
-    color: #888;
-    font-size: 75px;
-    background: #f7f8fa;
-    letter-spacing: 5px;
-    border-top: 5px solid #ececec;
-    z-index: 100;
+  </div>
+</template>
+
+<script setup>
+import { useRouter } from "vue-router";
+const router = useRouter();
+
+import privacyPolicy from "@/assets/file/footer/FiEE, Inc. _ Privacy policy.pdf";
+import termsOfUse from "@/assets/file/footer/FiEE, Inc. _ Terms of Use.pdf";
+import siteMap from "@/assets/file/footer/FiEE, Inc. _ Site Map.pdf";
+
+//点击跳转到对应的链接页面
+const handleLink = (link) => {
+  // if (link === "privacyPolicy") {
+  //   window.open(privacyPolicy, "_blank");
+  // } else if (link === "termsOfUse") {
+  //   window.open(termsOfUse, "_blank");
+  // } else if (link === "siteMap") {
+  //   window.open(siteMap, "_blank");
+  // }
+  router.push(link)
+};
+</script>
+
+<style scoped lang="scss">
+.custom-footer {
+  width: 100%;
+  text-align: center;
+  padding: 1rem 0;
+  color: #888;
+  font-size: 0.9rem;
+  background: #f7f8fa;
+  letter-spacing: 5px;
+  border-top: 5px solid #ececec;
+  z-index: 100;
+
+  .footer-links-box {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin: 0.6rem 0 0;
+
+    .footer-links {
+      span {
+        border-right: 1px solid #d2d2d7;
+        padding: 0 0.8rem;
+        cursor: pointer;
+        font-size: 0.75rem;
+        display: inline-block;
+        text-align: left;
+      }
+      span:nth-last-child(1) {
+        border: 0;
+      }
+    }
  }
-  </style>
-  
+}
+</style>
--- a/src/components/customFooter/size768/index.vue
+++ b/src/components/customFooter/size768/index.vue
@ -0,0 +1,59 @@
+<template>
+  <!-- 通用页脚 -->
+  <div class="custom-footer">
+    <span>&copy; 2025 FiEE, Inc. All Rights Reserved.</span>
+    <div class="footer-links">
+      <span @click="handleLink('privacyPolicy')">Privacy Policy</span>
+      <span @click="handleLink('termsOfUse')">Terms of use</span>
+      <span @click="handleLink('siteMap')">Site Map</span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useRouter } from "vue-router";
+const router = useRouter();
+import privacyPolicy from "@/assets/file/footer/FiEE, Inc. _ Privacy policy.pdf";
+import termsOfUse from "@/assets/file/footer/FiEE, Inc. _ Terms of Use.pdf";
+import siteMap from "@/assets/file/footer/FiEE, Inc. _ Site Map.pdf";
+
+//点击跳转到对应的链接页面
+const handleLink = (link) => {
+  // if (link === "privacyPolicy") {
+  //   window.open(privacyPolicy, "_blank");
+  // } else if (link === "termsOfUse") {
+  //   window.open(termsOfUse, "_blank");
+  // } else if (link === "siteMap") {
+  //   window.open(siteMap, "_blank");
+  // }
+  router.push(link)
+};
+</script>
+
+<style scoped lang="scss">
+.custom-footer {
+  width: 100%;
+  text-align: center;
+  padding: 24px 0;
+  color: #888;
+  // font-size: 15px;
+  font-size: 1.05rem;
+  background: #f7f8fa;
+  letter-spacing: 1px;
+  border-top: 1px solid #ececec;
+  z-index: 100;
+  padding: 1rem 0;
+
+  .footer-links {
+    margin: 0.4rem 0 0;
+    span {
+      border-right: 1px solid #d2d2d7;
+      padding: 0 10px;
+      cursor: pointer;
+    }
+    span:nth-last-child(1) {
+      border: 0;
+    }
+  }
+}
+</style>
--- a/src/config/headerMenuConfig.js
+++ b/src/config/headerMenuConfig.js
@ -48,15 +48,20 @@ export const useHeaderMenuConfig = () => {
      label: t("header_menu.financial_information.title"),
      key: "financial_information",
      children: [
+          {
+            label: t("header_menu.financial_information.sec_filings"),
+            key: "sec_filings",
+            href: "/secfilings",
+          },
        {
-          label: t("header_menu.financial_information.sec_filings"),
-          key: "sec_filings",
-          href: "/secfilings",
+          label: t("header_menu.financial_information.annual_reports"),
+          key: "annual_reports",
+          href: "/annualreports",
        },
        {
-          label: t("header_menu.financial_information.quarterly_results"),
-          key: "quarterly_results",
-          href: "/quarterlyresults",
+          label: t("header_menu.financial_information.quarterly_reports"),
+          key: "quarterly_reports",
+          href: "/quarterlyreports",
        },
      ],
    },
@ -74,11 +79,11 @@ export const useHeaderMenuConfig = () => {
          key: "historic_stock_price",
          href:'/historic-stock'
        },
-        {
-          label: t("header_menu.stock_information.investment_calculator"),
-          key: "investment_calculator",
-          href:'/calculator'
-        },
+        // {
+        //   label: t("header_menu.stock_information.investment_calculator"),
+        //   key: "investment_calculator",
+        //   href:'/calculator'
+        // },
      ],
    },
    {
--- a/src/dict/secFiles.js
+++ b/src/dict/secFiles.js
--- a/src/locales/en.js
+++ b/src/locales/en.js
@ -488,7 +488,7 @@ export default {
      title: "Financials",
      overview: {
        title: "Company Financial Overview",
-        desc: "This page offers access to our <strong>Annual Reports</strong> and <strong>SEC Filings</strong>. These sections provide key financial data and regulatory documents, keeping you informed about our financial performance and compliance.",
+        desc: "This page offers access to our <strong>Annual Reports</strong>. These sections provide key financial data and regulatory documents, keeping you informed about our financial performance and compliance.",
      },
      annual_reports: {
        title: "Annual Reports",
@ -498,12 +498,12 @@ export default {
      },
      sec: {
        title: "SEC Filings",
-        desc: "To Access All Of Our Fillings With Sec Sites, Please",
-        click_here: "Click Here",
+        desc: "To access all of our filings with the SEC, please",
+        click_here: "click here",
      },
    },
-    quarterlyresults: {
-      title: "Quarterly Results",
+    quarterlyreports: {
+      title: "Quarterly Reports",
      search: {
        placeholder: "Search",
        button: "Go",
@ -525,7 +525,8 @@ export default {
    financial_information: {
      title: "Financial Information",
      sec_filings: "SEC Filings",
-      quarterly_results: "Quarterly Results",
+      annual_reports: "Annual Reports",
+      quarterly_reports: "Quarterly Reports",
    },
    stock_information: {
      title: "Stock Information",
@ -560,18 +561,17 @@ export default {
  HOME: {
    CONTAIN: {
      TITLEONE: {
-        TITLE: "Company positioning",
-        CONTENT:
-          "To empower global talents through innovative technology solutions",
+        TITLE: "Company Positioning",
+        CONTENT: "",
        CONTENTTWO:
-          "Leveraging IoT, connectivity, and artificial intelligence to create targeted, multilingual digital brands, fostering a global community of Key Opinion Leaders and providing unparalleled value throughout the digital content lifecycle",
+          "Leveraging IoT, connectivity, and Al to create targeted, multilingual digital brands, fostering a global community of Key Opinion Leaders and providing unparalleled value throughout the digital content lifecycle",
      },
    },
    CONTAINY: {
      STOCK_INFO: {
-        TITLE: "Stock Info",
-        LAST_PRICE: "Last Price",
-        CHANGE: "Change",
+        TITLE: "Stock Information",
+        LAST_PRICE: "Price",
+        CHANGE: "% Change",
        STOCK_CODE: "Stock Code",
        VOLUME: "Volume",
        MARKET_CAP: "Market Cap",
@ -607,7 +607,7 @@ export default {
    TITLETWO: {
      TITLE: "About FiEE, Inc.",
      CONTENT:
-        'FiEE, Inc. (NASDAQ: MINM) was formerly Minim, Inc. founded in 1977. We have a historical track record of delivering a comprehensive WiFi/Software as a Service platform in the market. After years of development, we made the strategic decision to transition to a Software First Model in 2023 to expand our technology portfolio and revenue streams. By 2025, we have rebranded ourselves as a technology company leveraging our expertise in IoT, connectivity, and artificial intelligence ("AI") to explore new business prospects and extend our global footprint.',
+        'FiEE, Inc. (NASDAQ: MINM), formerly Minim, Inc., was founded in 1977. We have a historical track record of delivering a comprehensive WiFi/Software as a Service platform in the market. After years of development, we made the strategic decision to transition to a Software First Model in 2023 to expand our technology portfolio and revenue streams. In 2025, we  rebranded ourselves as a technology company leveraging our expertise in IoT, connectivity, and artificial intelligence ("AI") to explore new business prospects and extend our global footprint.',
      CONTENTTWO:
        'into four key categories: Cloud-Managed Connectivity (WiFi) Platform, IoT Hardware Sales & Licensing, SAAS Solutions, and Professional To-C and To-B Services & Support. Notably, we have introduced our innovative Software as a Service ("SaaS") solutions, which integrate our AI and data analytics capabilities into content creation and brand management. This initiative has led to the nurturing of a robust pool of Key Opinion Leaders (KOLs) on major social media platforms worldwide, assisting them in developing, managing, and optimizing their digital presence across global platforms. Our services include customized graphics and posts, short videos, and editorial calendars tailored to align with brand objectives.',
      CONTENTTHREE:
@ -615,16 +615,16 @@ export default {
      CONTENTTWOTITLE: "Our services are structured",
    },
    TITLETHREE: {
-      TITLE: "Our mission and vision",
+      TITLE: "Our Mission and Vision",
      CONTENT:
-        "•To empower global talents through innovative technology solutions",
+        "• To empower global talents through innovative technology solutions",
      CONTENTTWO:
-        "•Leveraging IoT, connectivity, and artificial intelligence to create targeted, multilingual digital brands, fostering a global community of Key Opinion Leaders and providing unparalleled value throughout the digital content lifecycle",
+        "• Leveraging IoT, connectivity, and artificial intelligence to create targeted, multilingual digital brands, fostering a global community of Key Opinion Leaders and providing unparalleled value throughout the digital content lifecycle",
    },
    TITLEFOUR: {
      CONTENT: "",

-      TITLE: "Corporate Milestone",
+      TITLE: "Corporate Milestones",
      SUBHEADING: "1977 – 2015 : Founding & Licensing",
      paragraph: {
        ONE: "• Founded as Zoom Telephonics in 1977. ",
@ -632,7 +632,7 @@ export default {
      },
      SUBHEADINGTWO: "2020 : Merger & AI Advancement",
      paragraphTwo: {
-        ONE: "• November 2020: Merged with Minim Inc.; adopted Minim name/OTCQB ticker",
+        ONE: "• November 2020: Merged with Minim Inc.; adopted Minim name/OTCQB ticker.",
        TWO: "• Rolled out AI-driven Wi-Fi management and IoT security platform.",
        THREE: "",
      },
@ -645,22 +645,22 @@ export default {
      SUBHEADINGFOREFF: "2023 – 2024: Pivoting to A Software First Model",
      paragraphFOUR: {
        ONE: "• Enhanced its MinimOS cloud platform and API suite for ISPs/OEMs, with major deployments like Vox’s AI-driven Wi-Fi Home Manager.",
-        TWO: "• Signed a merger agreement with e2Companies to broaden its technology and revenue base",
+        TWO: "• Signed a merger agreement with e2Companies to broaden its technology and revenue base.",
        THREE: "",
      },
      SUBHEADINGFIVE: "2025 Rebranding & New C-Suite",
      paragraphFIVE: {
-        ONE: "• Officially rebranded from Minim Inc. to FiEE Inc.",
+        ONE: "• Officially rebranded from Minim Inc. to FiEE, Inc.",
        TWO: "• Appointed Li Wai Chung as CEO and Cao Yu as CFO.",
        THREE:
          "• Leverage on foundation in IoT, connectivity and AI to pursue new business opportunities.",
-        FOUR: "• Launched SaaS product in the market to generate recurring revenue streams",
-        FIVE: "• Acquisition of  Suzhou Yixuntong Network Technology Co., Ltd., a high growth technology service provider in PRC",
+        FOUR: "• Launched SaaS product in the market to generate recurring revenue streams.",
+        FIVE: "• Acquisition of  Suzhou Yixuntong Network Technology Co., Ltd., a high growth technology service provider in PRC.",
      },
    },
    TITLEFIVE: {
      CONTENT:
-        "•We developed our own AI-driven cloud software platform and applications, providing efficient and high quality network management and security solutions for home and business users, as well as the service providers that assisted them.",
+        "•We developed our own AI-driven cloud software platform and applications, providing efficient and high-quality network management and security solutions for home and business users, as well as the service providers that assisted them.",
      TITLE: "Outstanding Achievements",
    },
  },
@ -675,31 +675,30 @@ export default {
          "FiEE, Inc.’s core solutions encompass the following four major categories.",
        paragraph: {
          ONE: {
-            TITLE: "(1)Cloud-Managed Connectivity (WiFi) Platform: ",
-            CONTENT: "•SaaS powering OS for consumers and SMBs ",
-            CONTENTTWO:
-              "•AI-driven threat protection, and over-the-air updates",
+            TITLE: "(1) Cloud-Managed Connectivity (WiFi) Platform: ",
+            CONTENT: "SaaS powering OS for consumers and SMBs ",
+            CONTENTTWO: "AI-driven threat protection, and over-the-air updates",
          },
          TWO: {
-            TITLE: "(2)IoT Hardware Sales & Licensing: ",
+            TITLE: "(2) IoT Hardware Sales & Licensing: ",
            CONTENT:
-              "•IoT products and technologies, including developing VR/AR online sharing technologies",
-            CONTENTTWO: "•IoT data collection, analysis and management",
+              "IoT products and technologies, including developing VR/AR online sharing technologies",
+            CONTENTTWO: "IoT data collection, analysis and management",
          },
          THREE: {
-            TITLE: "(3)SAAS Solutions",
-            CONTENT: "•Internet sales and IoT support",
-            CONTENTTWO: "•KOL branding services",
+            TITLE: "(3) SAAS Solutions",
+            CONTENT: "Internet sales and IoT support",
+            CONTENTTWO: "KOL branding services",
            CONTENTTHREE:
-              "•AI-enabled content creation and fans habit analysis solutions",
+              "AI-enabled content creation and fans habit analysis solutions",
          },
          FOUR: {
-            TITLE: "(4)Professional To-C and To-B Services & Support",
+            TITLE: "(4) Professional To-C and To-B Services & Support",
            CONTENT:
-              "•Managed-service agreements with ISPs and enterprise customers for network-support, security monitoring, and custom development",
-            CONTENTTWO: "•KOL branding services",
+              "Managed-service agreements with ISPs and enterprise customers for network-support, security monitoring, and custom development",
+            CONTENTTWO: "KOL branding services",
            CONTENTTHREE:
-              "•AI-enabled content creation and fans habit analysis solutions",
+              "AI-enabled content creation and fans habit analysis solutions",
          },
        },
      },
@ -708,20 +707,21 @@ export default {
  // 管理
  MANAGEMENT: {
    ONE: {
-      TITLE: "Wai Chung LI",
-      TITLETWO: "Chief Executive Officer and President",
+      TITLE: "Li Wai Chung",
+      TITLETWO: "Chief Executive Officer",
      CONTENT:
-        "Mr. Li is the Chief Executive Officer and President, with extensive experience in accounting, corporate management and finance management. His role encompasses the oversight of our daily business operations and plays a vital part in the overall management of our Group.With a track record spanning prestigious roles at Deloitte China, Shanghai Prime Machinery Company Limited, Lens Technology Co., Ltd., and more, Mr. Li brings invaluable expertise to lead the team. He chaired Audit Committees for Fulu Holdings and Taizhou Water Group in Hong Kong, and Nedschroef in the Netherlands, showcasing his global leadership. Holding key positions in investment management, business consulting, and directorial roles in listedcompanies, his insights drive strategic decision-making. ",
-      CONTENTTWO: "",
+        "Mr. Li is our Chief Executive Officer. Mr. Li has extensive experience in accounting, corporate management and finance management. His role encompasses the oversight of our daily business operations and plays a vital part in the overall management of our Group.With a track record spanning prestigious roles at Deloitte China, Shanghai Prime Machinery Company Limited, Lens Technology Co., Ltd., and more, Mr. Li brings invaluable expertise to our team.",
+      CONTENTTWO:
+        "He served as chair of the Audit Committees for Fulu Holdings and Taizhou Water Group in Hong Kong, and Nedschroef in the Netherlands, showcasing his global leadership. Mr. Li has previously held key positions in investment management, business consulting, and directorial roles in publicly listed companies.",
      CONTENTTHREE: "",
    },
    TWO: {
      TITLE: "Cao Yu",
      TITLETWO: "Chief Financial Officer, Secretary, Treasurer and Director",
      CONTENTONE:
-        "Ms. Cao is the Chief Financial Officer, Secretary, Treasurer and Director, with a wealth of experience in financial management. She oversees financial operations, strategic planning, risk management, and reporting to ensure the company's financial health and compliance with regulations.",
+        "Ms. Cao is our Chief Financial Officer, Secretary, Treasurer and Director. Ms. Cao has a wealth of experience in financial management. She oversees financial operations, strategic planning, risk management, and reporting to ensure our financial health and compliance with regulations.",
      CONTENTTWO:
-        "Ms. Cao was previously served as the treasury director of Taifeng Cultural Communication Co., Ltd where she oversees its financial matters from November 2018 to November 2024. Prior to that, Ms. Cao served as a business manager of Yangfeng Art Exchange Co., Ltd from February 2016 to October 2018. From March 2011 to January 2016, she served as the treasury officer of financial department of Suzhou Industrial Park Xinfushida Plastic Profile Products Co., Ltd.",
+        "Ms. Cao previously served as the treasury director of Taifeng Cultural Communication Co., Ltd where she oversaw its financial matters from November 2018 to November 2024. Prior to that, Ms. Cao served as a business manager of Yangfeng Art Exchange Co., Ltd from February 2016 to October 2018. From March 2011 to January 2016, she served as the treasury officer of financial department of Suzhou Industrial Park Xinfushida Plastic Profile Products Co., Ltd.",
    },
  },
 };
--- a/src/router/index.js
+++ b/src/router/index.js
@ -48,10 +48,10 @@ const routes = [
        component: () => import("@/views/email-alerts/index.vue"),
      },
      {
-        path: "/quarterlyresults",
-        name: "QuarterlyResults",
+        path: "/quarterlyreports",
+        name: "quarterlyreports",
        component: () =>
-          import("@/views/financialinformation/quarterlyresults/index.vue"),
+          import("@/views/financialinformation/quarterlyreports/index.vue"),
      },
      {
        path: "/secfilings",
@ -59,11 +59,28 @@ const routes = [
        component: () =>
          import("@/views/financialinformation/secfilings/index.vue"),
      },
+      {
+        path: "/secfilingsDefail",
+        name: "SecFilingsDetail",
+        component: () =>
+          import("@/views/financialinformation/secfilingsdetail/index.vue"),
+      },
+      {
+        path: "/annualreports",
+        name: "AnnualReports",
+        component: () =>
+          import("@/views/financialinformation/annualreports/index.vue"),
+      },
      {
        path: "/press-releases",
        name: "press-releases",
        component: () => import("@/views/press-releases/index.vue"),
      },
+      {
+        path: "/news",
+        name: "news",
+        component: () => import("@/views/news/index.vue"),
+      },
      {
        path: "/events-calendar",
        name: "events-calendar",
@ -104,6 +121,26 @@ const routes = [
        name: "govern",
        component: () => import("@/views/govern/index.vue"),
      },
+      {
+        path: "/privacyPolicy",
+        name: "privacyPolicy",
+        component: () => import("@/views/footerLinks/privacyPolicy/index.vue"),
+      },
+      {
+        path: "/termsOfUse",
+        name: "termsOfUse",
+        component: () => import("@/views/footerLinks/termsOfUse/index.vue"),
+      },
+      {
+        path: "/cookiesSettings",
+        name: "cookiesSettings",
+        component: () => import("@/views/footerLinks/cookiesSettings/index.vue"),
+      },
+      {
+        path: "/siteMap",
+        name: "siteMap",
+        component: () => import("@/views/footerLinks/siteMap/index.vue"),
+      },
    ],
  },
  
--- a/src/store/auth/index.js
+++ b/src/store/auth/index.js
@ -15,7 +15,7 @@ import { useRouter } from "vue-router";
 import { showImagePreview } from "vant";

 export const useAuth = createGlobalState(() => {
-  console.log("useRouter", useRouter);
+  // console.log("useRouter", useRouter);
  const router = useRouter();
  const token = useStorage("token", "", localStorage);
  const workUid = useStorage("workUid", "", localStorage);
@ -44,7 +44,7 @@ export const useAuth = createGlobalState(() => {
      const millisecondsIn48Hours = 48 * 60 * 60 * 1000;
      voteToken.value.expireTime = currentTimestamp + millisecondsIn48Hours;
      voteToken.value.authorization = res.data?.authorization;
-      console.log("voteToken", voteToken.value);
+      // console.log("voteToken", voteToken.value);
    }
  };
  const sendVote = async () => {
--- a/src/store/stock-quote/index.js
+++ b/src/store/stock-quote/index.js
@ -1,6 +1,9 @@
 import { ref } from 'vue'
 import { createGlobalState, useLocalStorage } from '@vueuse/core'
 import axios from 'axios'
+import dayjs from 'dayjs'
+import utc from 'dayjs/plugin/utc'
+import timezone from 'dayjs/plugin/timezone'

 export const useStockQuote = createGlobalState(() => {
  const stockQuote = useLocalStorage('stockQuote', {
@ -14,30 +17,7 @@ export const useStockQuote = createGlobalState(() => {
      ""
    ]
  })
-
-  // 计算美东时间的当前时间
-  function getTargetFridayTime() {
-    // 当前美东时间
-    const now = new Date(new Date().toLocaleString('en-US', { timeZone: 'America/New_York' }))
-    // 获取今天是周几（0=周日, 1=周一, ..., 5=周五, 6=周六）
-    const day = now.getDay()
-    // 计算本周五的日期
-    const diffToFriday = 5 - day
-    const thisFriday = new Date(now)
-    thisFriday.setDate(now.getDate() + diffToFriday)
-    thisFriday.setHours(16, 0, 0, 0) // 设置为16:00:00
-
-    if (now >= thisFriday) {
-      // 当前时间在本周五16:00及以后，显示本周五16:00
-      return thisFriday
-    } else {
-      // 当前时间早于本周五16:00，显示上周五16:00
-      const lastFriday = new Date(thisFriday)
-      lastFriday.setDate(thisFriday.getDate() - 7)
-      return lastFriday
-    }
-  }
-
+  const date = new Date();
  const options = {
    year: 'numeric',
    month: 'short',
@ -48,12 +28,51 @@ export const useStockQuote = createGlobalState(() => {
    timeZone: 'America/New_York',
    timeZoneName: 'short'
  };
+  let lastTradingDay
+  dayjs.extend(utc)
+  dayjs.extend(timezone)
+  /*
+  美股的常规发行日（交易日）为周一至周五，遇到法定假日则顺延。
+  如果你只需要“上一个交易日”（不考虑法定假日）的情况下
+  获取当前美东时间。
+  如果今天是周一，则上一个交易日为上周五。
+  如果今天是周日，则上一个交易日为上周五。
+  如果今天是周六，则上一个交易日为周五。
+  其他情况，上一个交易日为昨天。
+  */

-  const formatted = ref(getTargetFridayTime().toLocaleString('en-US', options))
+  const getLastTradingDay = async () => {
+    const toDate = dayjs().format('YYYY-MM-DD');
+    const finalFromDate = dayjs().subtract(7, 'day').format('YYYY-MM-DD');
+    let url =
+      'https://common.szjixun.cn/api/stock/history/list?from=' +
+      finalFromDate +
+      '&to=' +
+      toDate;
+    const res = await axios.get(url)
+    if (res.status === 200) {
+      if (res.data.status === 0) {
+        lastTradingDay = dayjs(res.data.data[0].date)
+      }
+      return lastTradingDay.format('MMM D, YYYY') + ' 4:00 PM EDT'
+    }
+  }

-  const getStockQuate= async()=>{
-    const res = await axios.get('https://saas-test.szjixun.cn/api/chart/forward/test')
-    stockQuote.value=res.data
+  const formatted = ref(null)
+  const init = async () => {
+    formatted.value = await getLastTradingDay()
+  }
+  init()
+  const getStockQuate = async () => {
+    // const res = await axios.get('https://saas-test.szjixun.cn/api/fiee/chart/forward/test')
+    const res = await axios.get('https://common.szjixun.cn/api/stock/company/data')
+    // console.error(res)
+    if (res.status === 200) {
+      if (res.data.status === 0) {
+        stockQuote.value = res.data.data
+
+      }
+    }
  }
  return {
    formatted,
--- a/src/views/BusinessServices/size1440/index.vue
+++ b/src/views/BusinessServices/size1440/index.vue
@ -4,115 +4,49 @@
      <!-- 渐变背景标题区 - 增加层次感 -->
      <section class="hero-section">
        <div class="container">
-          <div class="title-wrapper">
-            <h1 class="hero-title">
-              {{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.TITLE") }}
-            </h1>
-          </div>
-          <div class="hero-description">
+          <h1 style="font-size: 40px" class="hero-title">
+            {{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.TITLE") }}
+          </h1>
+          <div style="font-size: 18px" class="hero-description">
            {{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENT") }}
          </div>
        </div>
      </section>
-
      <!-- 业务核心解决方案 -->
-      <main class="container">
+      <main style="margin-top: 40px" class="container">
        <section>
-          <h1 class="hero-title">
+          <h1 class="hero-title" style="font-size: 22px">
            {{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENTTWO") }}
          </h1>
        </section>

-        <!-- 解决方案网格 - 响应式弹性布局 -->
        <div class="solution-grid">
-          <!-- 主推解决方案组 -->
-          <div class="solution-group">
-            <div class="featured-solution">
-              <div class="solution-card" :style="{ '--delay': '0s' }">
-                <div class="card-header">
-                  <div class="decorative-line"></div>
-                  <h2 class="card-title">{{ solutions[0].title }}</h2>
-                </div>
-                <ul class="card-content">
-                  <li
-                    v-for="(point, pIndex) in solutions[0].points"
-                    :key="pIndex"
-                    class="content-point"
-                  >
-                    <div class="point-icon">➤</div>
-                    <div class="point-text">{{ point }}</div>
-                  </li>
-                </ul>
-              </div>
-            </div>
-
-            <div class="featured-solution">
-              <div class="solution-card" :style="{ '--delay': '0.2s' }">
-                <div class="card-header">
-                  <div class="decorative-line"></div>
-                  <h2 class="card-title">{{ solutions[1].title }}</h2>
-                </div>
-                <ul class="card-content">
-                  <li
-                    v-for="(point, pIndex) in solutions[1].points"
-                    :key="pIndex"
-                    class="content-point"
-                  >
-                    <div class="point-icon">➤</div>
-                    <div class="point-text">{{ point }}</div>
-                  </li>
-                </ul>
-              </div>
-            </div>
-          </div>
-
-          <!-- 次推解决方案组 -->
-          <div class="solution-group">
-            <div class="featured-solution">
-              <div
-                class="solution-card"
-                style="height: auto"
-                :style="{ '--delay': '0.4s' }"
-              >
-                <div class="card-header">
-                  <div class="decorative-line"></div>
-                  <h2 class="card-title">{{ solutions[2].title }}</h2>
-                </div>
-                <ul class="card-content">
-                  <li
-                    v-for="(point, pIndex) in solutions[2].points"
-                    :key="pIndex"
-                    class="content-point"
-                  >
-                    <div class="point-icon">➤</div>
-                    <div class="point-text">{{ point }}</div>
-                  </li>
-                  <li style="padding-bottom: 105px"></li>
-                </ul>
-              </div>
-            </div>
-
-            <div class="featured-solution">
-              <div
-                class="solution-card"
-                style="height: auto"
-                :style="{ '--delay': '0.6s' }"
-              >
-                <div class="card-header">
-                  <div class="decorative-line"></div>
-                  <h2 class="card-title">{{ solutions[3].title }}</h2>
-                </div>
-                <ul class="card-content">
-                  <li
-                    v-for="(point, pIndex) in solutions[3].points"
-                    :key="pIndex"
-                    class="content-point"
-                  >
-                    <div class="point-icon">➤</div>
-                    <div class="point-text">{{ point }}</div>
-                  </li>
-                </ul>
+          <!-- 统一使用弹性列布局，通过媒体查询控制排列方式 -->
+          <div
+            v-for="(solution, sIndex) in solutions"
+            :key="sIndex"
+            class="featured-solution"
+          >
+            <div
+              class="solution-card"
+              :style="{ '--delay': `${sIndex * 0.2}s` }"
+            >
+              <div class="card-header">
+                <div class="decorative-line"></div>
+                <h2 class="card-title">{{ solution.title }}</h2>
              </div>
+              <ul class="card-content">
+                <li
+                  v-for="(point, pIndex) in solution.points"
+                  :key="pIndex"
+                  class="content-point"
+                >
+                  <div class="point-icon">•</div>
+                  <div style="font-size: 18px" class="point-text">
+                    {{ point }}
+                  </div>
+                </li>
+              </ul>
            </div>
          </div>
        </div>
@ -163,34 +97,10 @@ const solutions = computed(() => [

 <style scoped>
 /* 基础样式 */
-.container {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 0 2rem;
-}
-
-/* 标题区样式 */
-.hero-section {
-  background: linear-gradient(135deg, #f8fbfe 0%, #e6f0ff 100%);
-  padding: 8rem 0 6rem;
-  position: relative;
-  overflow: hidden;
-}
-
-.hero-section::after {
-  content: "";
-  position: absolute;
-  bottom: -50px;
-  left: 0;
-  width: 100%;
-  height: 100px;
-  background: white;
-  transform: skewY(-3deg);
-}

 .hero-title {
  font-size: 40px;
-  color: #2c3e50;
+  color: black;
  margin-bottom: 2rem;
  animation: slideIn 1s ease;
 }
@ -199,7 +109,7 @@ const solutions = computed(() => [
  margin: 0 auto;
  font-size: 1.1rem;
  line-height: 1.8;
-  color: #5a6d80;
+  color: black;
 }

 :root {
@ -228,22 +138,12 @@ const solutions = computed(() => [
 /* 标题区 - 紫色渐变 */
 .hero-section {
  background: var(--primary-gradient);
-  padding: 10rem 0 8rem;
+  padding: 5rem 0 0rem;
  position: relative;
  overflow: hidden;
  color: white;
 }

-.hero-section::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><path fill="rgba(255,255,255,0.05)" d="M0,0 L100,0 L100,100 Q50,80 0,100 Z"></path></svg>')
-    no-repeat bottom/100% 30%;
-}
 .title-decoration {
  position: absolute;
  bottom: -15px;
@ -254,11 +154,6 @@ const solutions = computed(() => [
  border-radius: 2px;
 }

-/* 解决方案网格 */
-.solution-grid {
-  padding: 6rem 0 4rem;
-}
-
 .solution-group {
  display: flex;
  flex-direction: column;
@ -275,10 +170,7 @@ const solutions = computed(() => [

  .featured-solution {
    flex: 1;
-  }
-
-  .solution-card {
-    height: 350px;
+    margin-top: 20px;
  }
 }

@ -314,39 +206,15 @@ const solutions = computed(() => [

 /* 卡片公共样式 */
 .solution-card {
-  background: white;
  border-radius: 16px;
  padding: 2.5rem;
-  box-shadow: 0 10px 40px rgba(137, 91, 255, 0.1);
  transform: translateY(20px);
  opacity: 0;
  animation: cardEnter 0.6s ease forwards;
-  position: relative;
-  overflow: hidden;
  border: 1px solid rgba(137, 91, 255, 0.2);
  background: linear-gradient(135deg, #f9f6ff 0%, #f0e9ff 100%);
 }

-.solution-card::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(
-    135deg,
-    rgba(137, 91, 255, 0.03) 0%,
-    rgba(137, 91, 255, 0) 100%
-  );
-  z-index: -1;
-}
-
-.solution-card:hover {
-  transform: translateY(-8px);
-  box-shadow: 0 15px 50px rgba(137, 91, 255, 0.2);
-}
-
 .card-header {
  margin-bottom: 2rem;
 }
@ -377,7 +245,7 @@ const solutions = computed(() => [
 }

 .point-icon {
-  color: var(--primary-color);
+  color: #4a3a6b;
  font-size: 1.2rem;
  flex-shrink: 0;
 }
@ -385,7 +253,7 @@ const solutions = computed(() => [
 .point-text {
  color: #4a3a6b;
  line-height: 1.6;
-  font-size: 1rem;
+  font-size: 18px;
 }

@keyframes cardEnter {
--- a/src/views/BusinessServices/size1920/index.vue
+++ b/src/views/BusinessServices/size1920/index.vue
@ -4,115 +4,49 @@
      <!-- 渐变背景标题区 - 增加层次感 -->
      <section class="hero-section">
        <div class="container">
-          <div class="title-wrapper">
-            <h1 class="hero-title">
-              {{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.TITLE") }}
-            </h1>
-          </div>
-          <div class="hero-description">
+          <h2 class="hero-title">
+            {{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.TITLE") }}
+          </h2>
+          <div style="font-size: 18px" class="hero-description">
            {{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENT") }}
          </div>
        </div>
      </section>
-
      <!-- 业务核心解决方案 -->
-      <main class="container">
+      <main style="margin-top: 40px" class="container">
        <section>
-          <h1 class="hero-title">
+          <h1 style="font-size: 30px" class="hero-title">
            {{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENTTWO") }}
          </h1>
        </section>

-        <!-- 解决方案网格 - 响应式弹性布局 -->
        <div class="solution-grid">
-          <!-- 主推解决方案组 -->
-          <div class="solution-group">
-            <div class="featured-solution">
-              <div class="solution-card" :style="{ '--delay': '0s' }">
-                <div class="card-header">
-                  <div class="decorative-line"></div>
-                  <h2 class="card-title">{{ solutions[0].title }}</h2>
-                </div>
-                <ul class="card-content">
-                  <li
-                    v-for="(point, pIndex) in solutions[0].points"
-                    :key="pIndex"
-                    class="content-point"
-                  >
-                    <div class="point-icon">➤</div>
-                    <div class="point-text">{{ point }}</div>
-                  </li>
-                </ul>
-              </div>
-            </div>
-
-            <div class="featured-solution">
-              <div class="solution-card" :style="{ '--delay': '0.2s' }">
-                <div class="card-header">
-                  <div class="decorative-line"></div>
-                  <h2 class="card-title">{{ solutions[1].title }}</h2>
-                </div>
-                <ul class="card-content">
-                  <li
-                    v-for="(point, pIndex) in solutions[1].points"
-                    :key="pIndex"
-                    class="content-point"
-                  >
-                    <div class="point-icon">➤</div>
-                    <div class="point-text">{{ point }}</div>
-                  </li>
-                </ul>
-              </div>
-            </div>
-          </div>
-
-          <!-- 次推解决方案组 -->
-          <div class="solution-group">
-            <div class="featured-solution">
-              <div
-                class="solution-card"
-                style="height: auto"
-                :style="{ '--delay': '0.4s' }"
-              >
-                <div class="card-header">
-                  <div class="decorative-line"></div>
-                  <h2 class="card-title">{{ solutions[2].title }}</h2>
-                </div>
-                <ul class="card-content">
-                  <li
-                    v-for="(point, pIndex) in solutions[2].points"
-                    :key="pIndex"
-                    class="content-point"
-                  >
-                    <div class="point-icon">➤</div>
-                    <div class="point-text">{{ point }}</div>
-                  </li>
-                  <li style="padding-bottom: 45px"></li>
-                </ul>
-              </div>
-            </div>
-
-            <div class="featured-solution">
-              <div
-                class="solution-card"
-                style="height: auto"
-                :style="{ '--delay': '0.6s' }"
-              >
-                <div class="card-header">
-                  <div class="decorative-line"></div>
-                  <h2 class="card-title">{{ solutions[3].title }}</h2>
-                </div>
-                <ul class="card-content">
-                  <li
-                    v-for="(point, pIndex) in solutions[3].points"
-                    :key="pIndex"
-                    class="content-point"
-                  >
-                    <div class="point-icon">➤</div>
-                    <div class="point-text">{{ point }}</div>
-                  </li>
-                </ul>
+          <!-- 统一使用弹性列布局，通过媒体查询控制排列方式 -->
+          <div
+            v-for="(solution, sIndex) in solutions"
+            :key="sIndex"
+            class="featured-solution"
+          >
+            <div
+              class="solution-card"
+              :style="{ '--delay': `${sIndex * 0.2}s` }"
+            >
+              <div class="card-header">
+                <div class="decorative-line"></div>
+                <h2 class="card-title">{{ solution.title }}</h2>
              </div>
+              <ul class="card-content">
+                <li
+                  v-for="(point, pIndex) in solution.points"
+                  :key="pIndex"
+                  class="content-point"
+                >
+                  <div class="point-icon">•</div>
+                  <div style="font-size: 18px" class="point-text">
+                    {{ point }}
+                  </div>
+                </li>
+              </ul>
            </div>
          </div>
        </div>
@ -163,34 +97,10 @@ const solutions = computed(() => [

 <style scoped>
 /* 基础样式 */
-.container {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 0 2rem;
-}
-
-/* 标题区样式 */
-.hero-section {
-  background: linear-gradient(135deg, #f8fbfe 0%, #e6f0ff 100%);
-  padding: 8rem 0 6rem;
-  position: relative;
-  overflow: hidden;
-}
-
-.hero-section::after {
-  content: "";
-  position: absolute;
-  bottom: -50px;
-  left: 0;
-  width: 100%;
-  height: 100px;
-  background: white;
-  transform: skewY(-3deg);
-}

 .hero-title {
  font-size: 40px;
-  color: #2c3e50;
+  color: black;
  margin-bottom: 2rem;
  animation: slideIn 1s ease;
 }
@ -199,7 +109,7 @@ const solutions = computed(() => [
  margin: 0 auto;
  font-size: 1.1rem;
  line-height: 1.8;
-  color: #5a6d80;
+  color: black;
 }

 :root {
@ -228,22 +138,12 @@ const solutions = computed(() => [
 /* 标题区 - 紫色渐变 */
 .hero-section {
  background: var(--primary-gradient);
-  padding: 10rem 0 8rem;
+  padding: 5rem 0 0rem;
  position: relative;
  overflow: hidden;
  color: white;
 }

-.hero-section::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><path fill="rgba(255,255,255,0.05)" d="M0,0 L100,0 L100,100 Q50,80 0,100 Z"></path></svg>')
-    no-repeat bottom/100% 30%;
-}
 .title-decoration {
  position: absolute;
  bottom: -15px;
@ -254,11 +154,6 @@ const solutions = computed(() => [
  border-radius: 2px;
 }

-/* 解决方案网格 */
-.solution-grid {
-  padding: 6rem 0 4rem;
-}
-
 .solution-group {
  display: flex;
  flex-direction: column;
@ -275,10 +170,7 @@ const solutions = computed(() => [

  .featured-solution {
    flex: 1;
-  }
-
-  .solution-card {
-    height: 350px;
+    margin-top: 20px;
  }
 }

@ -314,39 +206,15 @@ const solutions = computed(() => [

 /* 卡片公共样式 */
 .solution-card {
-  background: white;
  border-radius: 16px;
  padding: 2.5rem;
-  box-shadow: 0 10px 40px rgba(137, 91, 255, 0.1);
  transform: translateY(20px);
  opacity: 0;
  animation: cardEnter 0.6s ease forwards;
-  position: relative;
-  overflow: hidden;
  border: 1px solid rgba(137, 91, 255, 0.2);
  background: linear-gradient(135deg, #f9f6ff 0%, #f0e9ff 100%);
 }

-.solution-card::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(
-    135deg,
-    rgba(137, 91, 255, 0.03) 0%,
-    rgba(137, 91, 255, 0) 100%
-  );
-  z-index: -1;
-}
-
-.solution-card:hover {
-  transform: translateY(-8px);
-  box-shadow: 0 15px 50px rgba(137, 91, 255, 0.2);
-}
-
 .card-header {
  margin-bottom: 2rem;
 }
@ -377,7 +245,7 @@ const solutions = computed(() => [
 }

 .point-icon {
-  color: var(--primary-color);
+  color: #4a3a6b;
  font-size: 1.2rem;
  flex-shrink: 0;
 }
@ -385,7 +253,7 @@ const solutions = computed(() => [
 .point-text {
  color: #4a3a6b;
  line-height: 1.6;
-  font-size: 1rem;
+  font-size: 18px;
 }

@keyframes cardEnter {
--- a/src/views/BusinessServices/size375/index.vue
+++ b/src/views/BusinessServices/size375/index.vue
@ -1,118 +1,53 @@
 <template>
  <div class="home-page">
    <div class="business-page">
-      <!-- 渐变背景标题区 - 增加层次感 -->
+      <!-- 渐变背景标题区 -->
      <section class="hero-section">
        <div class="container">
-          <div class="title-wrapper">
-            <h1 class="hero-title">
-              {{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.TITLE") }}
-            </h1>
-          </div>
-          <div class="hero-description">
+          <h1 style="font-size: 40px" class="hero-title">
+            {{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.TITLE") }}
+          </h1>
+          <div style="font-size: 18px" class="hero-description">
            {{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENT") }}
          </div>
        </div>
      </section>
-
      <!-- 业务核心解决方案 -->
-      <main class="container">
+      <main style="margin-top: 40px" class="container">
        <section>
-          <h1 class="hero-title">
+          <h1 style="font-size: 40px" class="hero-title">
            {{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENTTWO") }}
          </h1>
        </section>

        <!-- 解决方案网格 - 响应式弹性布局 -->
        <div class="solution-grid">
-          <!-- 主推解决方案组 -->
-          <div class="solution-group">
-            <div class="featured-solution">
-              <div class="solution-card" :style="{ '--delay': '0s' }">
-                <div class="card-header">
-                  <div class="decorative-line"></div>
-                  <h2 class="card-title">{{ solutions[0].title }}</h2>
-                </div>
-                <ul class="card-content">
-                  <li
-                    v-for="(point, pIndex) in solutions[0].points"
-                    :key="pIndex"
-                    class="content-point"
-                  >
-                    <div class="point-icon">➤</div>
-                    <div class="point-text">{{ point }}</div>
-                  </li>
-                </ul>
-              </div>
-            </div>
-
-            <div class="featured-solution">
-              <div class="solution-card" :style="{ '--delay': '0.2s' }">
-                <div class="card-header">
-                  <div class="decorative-line"></div>
-                  <h2 class="card-title">{{ solutions[1].title }}</h2>
-                </div>
-                <ul class="card-content">
-                  <li
-                    v-for="(point, pIndex) in solutions[1].points"
-                    :key="pIndex"
-                    class="content-point"
-                  >
-                    <div class="point-icon">➤</div>
-                    <div class="point-text">{{ point }}</div>
-                  </li>
-                </ul>
-              </div>
-            </div>
-          </div>
-
-          <!-- 次推解决方案组 -->
-          <div class="solution-group">
-            <div class="featured-solution">
-              <div
-                class="solution-card"
-                style="height: auto"
-                :style="{ '--delay': '0.4s' }"
-              >
-                <div class="card-header">
-                  <div class="decorative-line"></div>
-                  <h2 class="card-title">{{ solutions[2].title }}</h2>
-                </div>
-                <ul class="card-content">
-                  <li
-                    v-for="(point, pIndex) in solutions[2].points"
-                    :key="pIndex"
-                    class="content-point"
-                  >
-                    <div class="point-icon">➤</div>
-                    <div class="point-text">{{ point }}</div>
-                  </li>
-                  <li style="padding-bottom: 45px"></li>
-                </ul>
-              </div>
-            </div>
-
-            <div class="featured-solution">
-              <div
-                class="solution-card"
-                style="height: auto"
-                :style="{ '--delay': '0.6s' }"
-              >
-                <div class="card-header">
-                  <div class="decorative-line"></div>
-                  <h2 class="card-title">{{ solutions[3].title }}</h2>
-                </div>
-                <ul class="card-content">
-                  <li
-                    v-for="(point, pIndex) in solutions[3].points"
-                    :key="pIndex"
-                    class="content-point"
-                  >
-                    <div class="point-icon">➤</div>
-                    <div class="point-text">{{ point }}</div>
-                  </li>
-                </ul>
+          <!-- 统一使用弹性列布局，通过媒体查询控制排列方式 -->
+          <div
+            v-for="(solution, sIndex) in solutions"
+            :key="sIndex"
+            class="featured-solution"
+          >
+            <div
+              class="solution-card"
+              :style="{ '--delay': `${sIndex * 0.2}s` }"
+            >
+              <div class="card-header">
+                <div class="decorative-line"></div>
+                <h2 class="card-title">{{ solution.title }}</h2>
              </div>
+              <ul class="card-content">
+                <li
+                  v-for="(point, pIndex) in solution.points"
+                  :key="pIndex"
+                  class="content-point"
+                >
+                  <div class="point-icon">•</div>
+                  <div style="font-size: 18px" class="point-text">
+                    {{ point }}
+                  </div>
+                </li>
+              </ul>
            </div>
          </div>
        </div>
@ -162,34 +97,23 @@ const solutions = computed(() => [
 </script>

 <style scoped>
-/* 基础样式 */
 .container {
  margin: 0 auto;
  padding: 0 2rem;
 }

-/* 标题区样式 */
+/* 标题区 - 紫色渐变 */
 .hero-section {
-  background: linear-gradient(135deg, #f8fbfe 0%, #e6f0ff 100%);
-  padding: 8rem 0 6rem;
+  background: var(--primary-gradient);
+  padding: 5rem 0 0rem;
  position: relative;
  overflow: hidden;
-}
-
-.hero-section::after {
-  content: "";
-  position: absolute;
-  bottom: -50px;
-  left: 0;
-  width: 100%;
-  height: 100px;
-  background: white;
-  transform: skewY(-3deg);
+  color: white;
 }

 .hero-title {
  font-size: 40px;
-  color: #2c3e50;
+  color: black;
  margin-bottom: 2rem;
  animation: slideIn 1s ease;
 }
@ -198,7 +122,7 @@ const solutions = computed(() => [
  margin: 0 auto;
  font-size: 1.1rem;
  line-height: 1.8;
-  color: #5a6d80;
+  color: black;
 }

 :root {
@ -211,6 +135,7 @@ const solutions = computed(() => [
    var(--primary-color) 100%
  );
 }
+
 .home-page {
  background-image: url("@/assets/image/bg-mobile.png");
  background-size: 100% 100%;
@ -218,99 +143,29 @@ const solutions = computed(() => [
  background-repeat: no-repeat;
 }

-.container {
-  margin: 0 auto;
-  padding: 0 2rem;
-}
-
-/* 标题区 - 紫色渐变 */
-.hero-section {
-  background: var(--primary-gradient);
-  padding: 10rem 0 8rem;
-  position: relative;
-  overflow: hidden;
-  color: white;
-}
-
-.hero-section::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><path fill="rgba(255,255,255,0.05)" d="M0,0 L100,0 L100,100 Q50,80 0,100 Z"></path></svg>')
-    no-repeat bottom/100% 30%;
-}
-.title-decoration {
-  position: absolute;
-  bottom: -15px;
-  left: 0;
-  width: 80%;
-  height: 4px;
-  background: rgba(255, 255, 255, 0.5);
-  border-radius: 2px;
-}
-
-/* 解决方案网格 */
+/* 解决方案网格 - 响应式布局 */
 .solution-grid {
-  padding: 6rem 0 4rem;
-}
-
-.solution-group {
-  display: flex;
-  flex-direction: column;
+  padding: 0rem 0 4rem;
+  display: grid;
+  grid-template-columns: 1fr; /* 默认单列（移动端） */
  gap: 3rem;
-  margin-bottom: 4rem;
 }

-/* 桌面端布局（>=768px） */
-@media (min-width: 768px) {
-  .solution-group {
-    flex-direction: row;
-    gap: 4rem;
-  }
-
-  .featured-solution {
-    flex: 1;
-  }
-
-  .solution-card {
-    height: 350px;
+/* 中等屏幕（768px-1439px） - 单列布局 */
+@media (min-width: 768px) and (max-width: 1439px) {
+  .solution-grid {
+    grid-template-columns: 1fr;
  }
 }

-/* 移动端布局（<768px） */
-@media (max-width: 767px) {
-  .home-page {
-    background-image: url("@/assets/image/bg-mobile.png");
-  }
-
-  .hero-title {
-    font-size: 1.8rem;
-  }
-
-  .solution-group {
-    flex-direction: column;
-    gap: 2rem;
-  }
-
-  .featured-solution {
-    width: 100% !important; /* 强制占满容器 */
-    margin-bottom: 2rem;
-  }
-
-  .solution-card {
-    padding: 2rem;
-    height: auto;
-  }
-
-  .content-point {
-    padding: 1rem 0;
+/* 大屏幕（≥1440px） - 双列布局 */
+@media (min-width: 1440px) {
+  .solution-grid {
+    grid-template-columns: 1fr 1fr;
  }
 }

-/* 卡片公共样式 */
+/* 卡片样式 */
 .solution-card {
  background: white;
  border-radius: 16px;
@ -322,22 +177,17 @@ const solutions = computed(() => [
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(137, 91, 255, 0.2);
-  background: linear-gradient(135deg, #f9f6ff 0%, #f0e9ff 100%);
+  transition: all 0.3s ease;
 }

-.solution-card::after {
+.solution-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
-  height: 100%;
-  background: linear-gradient(
-    135deg,
-    rgba(137, 91, 255, 0.03) 0%,
-    rgba(137, 91, 255, 0) 100%
-  );
-  z-index: -1;
+  height: 4px;
+  background: var(--primary-gradient);
 }

 .solution-card:hover {
@ -355,6 +205,7 @@ const solutions = computed(() => [
  background: var(--primary-gradient);
  margin-bottom: 1rem;
  border-radius: 3px;
+  transition: width 0.3s ease;
 }

 .solution-card:hover .decorative-line {
@ -374,8 +225,12 @@ const solutions = computed(() => [
  border-bottom: 1px solid rgba(137, 91, 255, 0.1);
 }

+.content-point:last-child {
+  border-bottom: none;
+}
+
 .point-icon {
-  color: var(--primary-color);
+  color: #4a3a6b;
  font-size: 1.2rem;
  flex-shrink: 0;
 }
--- a/src/views/BusinessServices/size768/index.vue
+++ b/src/views/BusinessServices/size768/index.vue
@ -4,21 +4,18 @@
      <!-- 渐变背景标题区 -->
      <section class="hero-section">
        <div class="container">
-          <div class="title-wrapper">
-            <h1 class="hero-title">
-              {{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.TITLE") }}
-            </h1>
-          </div>
-          <div class="hero-description">
+          <h1 style="font-size: 40px" class="hero-title">
+            {{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.TITLE") }}
+          </h1>
+          <div style="font-size: 18px" class="hero-description">
            {{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENT") }}
          </div>
        </div>
      </section>
-
      <!-- 业务核心解决方案 -->
-      <main class="container">
+      <main style="margin-top: 40px" class="container">
        <section>
-          <h1 class="hero-title">
+          <h1 style="font-size: 40px" class="hero-title">
            {{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENTTWO") }}
          </h1>
        </section>
@ -45,8 +42,10 @@
                  :key="pIndex"
                  class="content-point"
                >
-                  <div class="point-icon">➤</div>
-                  <div class="point-text">{{ point }}</div>
+                  <div class="point-icon">•</div>
+                  <div style="font-size: 18px" class="point-text">
+                    {{ point }}
+                  </div>
                </li>
              </ul>
            </div>
@ -98,56 +97,33 @@ const solutions = computed(() => [
 </script>

 <style scoped>
-/* 基础样式 */
 .container {
+  max-width: 1280px;
  margin: 0 auto;
  padding: 0 2rem;
-  max-width: 1600px;
 }

-/* 标题区样式 */
+/* 标题区 - 紫色渐变 */
 .hero-section {
-  background: linear-gradient(135deg, #f8fbfe 0%, #e6f0ff 100%);
-  padding: 8rem 0 6rem;
+  background: var(--primary-gradient);
+  padding: 5rem 0 0rem;
  position: relative;
  overflow: hidden;
-}
-
-.hero-section::after {
-  content: "";
-  position: absolute;
-  bottom: -50px;
-  left: 0;
-  width: 100%;
-  height: 100px;
-  background: white;
-  transform: skewY(-3deg);
+  color: white;
 }

 .hero-title {
-  font-size: 2.5rem;
-  color: #2c3e50;
+  font-size: 40px;
+  color: black;
  margin-bottom: 2rem;
-  position: relative;
-}
-
-.hero-title::after {
-  content: "";
-  position: absolute;
-  bottom: -10px;
-  left: 0;
-  width: 80px;
-  height: 4px;
-  background: linear-gradient(135deg, #895bff 0%, #6a11cb 100%);
-  border-radius: 2px;
+  animation: slideIn 1s ease;
 }

 .hero-description {
-  max-width: 1000px;
  margin: 0 auto;
  font-size: 1.1rem;
  line-height: 1.8;
-  color: #5a6d80;
+  color: black;
 }

 :root {
@ -170,7 +146,7 @@ const solutions = computed(() => [

 /* 解决方案网格 - 响应式布局 */
 .solution-grid {
-  padding: 6rem 0;
+  padding: 0rem 0 4rem;
  display: grid;
  grid-template-columns: 1fr; /* 默认单列（移动端） */
  gap: 3rem;
@ -255,7 +231,7 @@ const solutions = computed(() => [
 }

 .point-icon {
-  color: var(--primary-color);
+  color: #4a3a6b;
  font-size: 1.2rem;
  flex-shrink: 0;
 }
--- a/src/views/CommitteeAppointment/size1440/index.vue
+++ b/src/views/CommitteeAppointment/size1440/index.vue
@ -1,11 +1,10 @@
 <template>
  <div class="committees-page">
    <!-- 标题区 -->
-    <section class="hero-section">
-      <div class="container">
-        <h1 style="font-size: 40px">Committee Composition</h1>
-      </div>
-    </section>
+
+    <div class="title mb-[50px] text-center">
+      <h1 style="font-size: 40px; margin-top: 60px">Committee Composition</h1>
+    </div>

    <!-- 委员会表格 -->
    <div class="container">
@ -35,7 +34,11 @@
            <div class="director-info">
              <div class="avatar"></div>
              <div>
-                <router-link :to="'/boarddirectors'" class="director-link">
+                <router-link
+                  :to="'/boarddirectors'"
+                  style="font-size: 18px"
+                  class="director-link"
+                >
                  {{ director.name }}
                </router-link>
                <!-- <p class="director-title">{{ director.title }}</p> -->
@ -49,11 +52,15 @@
              <template v-if="getCommitteeRole(director.name, 'Audit')">
                <div
                  class="role-badge"
-                  :class="
-                    getCommitteeRole(director.name, 'Audit').toLowerCase()
-                  "
+                  :class="{
+                    [getCommitteeRole(
+                      director.name,
+                      'Audit'
+                    )?.toLowerCase()]: true,
+                    chair: getCommitteeRole(director.name, 'Audit') === 'Chair',
+                  }"
                >
-                  <span class="badge-icon"></span>
+                  {{ getCommitteeRole(director.name, "Audit") }}
                </div>
              </template>
            </div>
@ -64,14 +71,17 @@
              <template v-if="getCommitteeRole(director.name, 'Compensation')">
                <div
                  class="role-badge"
-                  :class="
-                    getCommitteeRole(
+                  :class="{
+                    [getCommitteeRole(
                      director.name,
                      'Compensation'
-                    ).toLowerCase()
-                  "
+                    )?.toLowerCase()]: true,
+                    chair:
+                      getCommitteeRole(director.name, 'Compensation') ===
+                      'Chair',
+                  }"
                >
-                  <span class="badge-icon"></span>
+                  {{ getCommitteeRole(director.name, "Compensation") }}
                </div>
              </template>
            </div>
@ -82,11 +92,16 @@
              <template v-if="getCommitteeRole(director.name, 'Governance')">
                <div
                  class="role-badge"
-                  :class="
-                    getCommitteeRole(director.name, 'Governance').toLowerCase()
-                  "
+                  :class="{
+                    [getCommitteeRole(
+                      director.name,
+                      'Governance'
+                    )?.toLowerCase()]: true,
+                    chair:
+                      getCommitteeRole(director.name, 'Governance') === 'Chair',
+                  }"
                >
-                  <span class="badge-icon"></span>
+                  {{ getCommitteeRole(director.name, "Governance") }}
                </div>
              </template>
            </div>
@ -99,34 +114,34 @@

 <script setup>
 const otherDirectors = [
-  {
-    name: "Cao Yu",
-    title: "Chief Financial Officer, Secretary, Treasurer and Director",
-  },
-  { name: "David Lazar", title: "Director" },
+  // {
+  //   name: "Cao Yu",
+  //   title: "Chief Financial Officer, Secretary, Treasurer and Director",
+  // },
+  // { name: "David Lazar", title: "Director" },
  { name: "Hu Bin", title: "Director" },
  { name: "David Natan", title: "Director" },
  { name: "Chan Oi Fat", title: "Director" },
 ];

-// 模拟数据 - 实际应从API获取
+// Updated committee roles according to requirements
 const committeeRoles = {
  "Cao Yu": {},
  "David Lazar": {},
  "Hu Bin": {
-    Compensation: "Chair",
+    Audit: "Member",
+    Compensation: "Member",
    Governance: "Member",
-    Audit: "Chair",
  },
  "David Natan": {
-    Compensation: "Chair",
-    Governance: "Member",
    Audit: "Chair",
+    Compensation: "Member",
+    Governance: "Member",
  },
  "Chan Oi Fat": {
+    Audit: "Member",
    Compensation: "Chair",
-    Governance: "Member",
-    Audit: "Chair",
+    Governance: "Chair",
  },
 };

@ -136,6 +151,29 @@ const getCommitteeRole = (name, committee) => {
 </script>

 <style scoped>
+.role-badge.chair {
+  color: orange;
+}
+.title h1 {
+  position: relative;
+
+  &::after {
+    content: "";
+    position: absolute;
+    bottom: -14px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 80px;
+    height: 3px;
+    background: #895bff;
+    border-radius: 3px;
+    transition: width 0.3s ease;
+  }
+
+  &:hover::after {
+    width: 120px;
+  }
+}
 /* 紫色主题变量 */
 :root {
  --primary: #895bff;
--- a/src/views/CommitteeAppointment/size1920/index.vue
+++ b/src/views/CommitteeAppointment/size1920/index.vue
@ -1,11 +1,9 @@
 <template>
  <div class="committees-page">
    <!-- 标题区 -->
-    <section class="hero-section">
-      <div class="container">
-        <h1 style="font-size: 40px">Committee Composition</h1>
-      </div>
-    </section>
+    <div class="title mb-[50px] text-center">
+      <h1 style="font-size: 40px; margin-top: 60px">Committee Composition</h1>
+    </div>

    <!-- 委员会表格 -->
    <div class="container">
@ -35,10 +33,13 @@
            <div class="director-info">
              <div class="avatar"></div>
              <div>
-                <router-link :to="'/boarddirectors'" class="director-link">
+                <router-link
+                  :to="'/boarddirectors'"
+                  style="font-size: 18px"
+                  class="director-link"
+                >
                  {{ director.name }}
                </router-link>
-                <!-- <p class="director-title">{{ director.title }}</p> -->
              </div>
            </div>
          </div>
@ -49,11 +50,15 @@
              <template v-if="getCommitteeRole(director.name, 'Audit')">
                <div
                  class="role-badge"
-                  :class="
-                    getCommitteeRole(director.name, 'Audit').toLowerCase()
-                  "
+                  :class="{
+                    [getCommitteeRole(
+                      director.name,
+                      'Audit'
+                    )?.toLowerCase()]: true,
+                    chair: getCommitteeRole(director.name, 'Audit') === 'Chair',
+                  }"
                >
-                  <span class="badge-icon"></span>
+                  {{ getCommitteeRole(director.name, "Audit") }}
                </div>
              </template>
            </div>
@ -64,14 +69,17 @@
              <template v-if="getCommitteeRole(director.name, 'Compensation')">
                <div
                  class="role-badge"
-                  :class="
-                    getCommitteeRole(
+                  :class="{
+                    [getCommitteeRole(
                      director.name,
                      'Compensation'
-                    ).toLowerCase()
-                  "
+                    )?.toLowerCase()]: true,
+                    chair:
+                      getCommitteeRole(director.name, 'Compensation') ===
+                      'Chair',
+                  }"
                >
-                  <span class="badge-icon"></span>
+                  {{ getCommitteeRole(director.name, "Compensation") }}
                </div>
              </template>
            </div>
@ -82,11 +90,16 @@
              <template v-if="getCommitteeRole(director.name, 'Governance')">
                <div
                  class="role-badge"
-                  :class="
-                    getCommitteeRole(director.name, 'Governance').toLowerCase()
-                  "
+                  :class="{
+                    [getCommitteeRole(
+                      director.name,
+                      'Governance'
+                    )?.toLowerCase()]: true,
+                    chair:
+                      getCommitteeRole(director.name, 'Governance') === 'Chair',
+                  }"
                >
-                  <span class="badge-icon"></span>
+                  {{ getCommitteeRole(director.name, "Governance") }}
                </div>
              </template>
            </div>
@ -99,34 +112,34 @@

 <script setup>
 const otherDirectors = [
-  {
-    name: "Cao Yu",
-    title: "Chief Financial Officer, Secretary, Treasurer and Director",
-  },
-  { name: "David Lazar", title: "Director" },
+  // {
+  //   name: "Cao Yu",
+  //   title: "Chief Financial Officer, Secretary, Treasurer and Director",
+  // },
+  // { name: "David Lazar", title: "Director" },
  { name: "Hu Bin", title: "Director" },
  { name: "David Natan", title: "Director" },
  { name: "Chan Oi Fat", title: "Director" },
 ];

-// 模拟数据 - 实际应从API获取
+// Updated committee roles according to requirements
 const committeeRoles = {
  "Cao Yu": {},
  "David Lazar": {},
  "Hu Bin": {
-    Compensation: "Chair",
+    Audit: "Member",
+    Compensation: "Member",
    Governance: "Member",
-    Audit: "Chair",
  },
  "David Natan": {
-    Compensation: "Chair",
-    Governance: "Member",
    Audit: "Chair",
+    Compensation: "Member",
+    Governance: "Member",
  },
  "Chan Oi Fat": {
+    Audit: "Member",
    Compensation: "Chair",
-    Governance: "Member",
-    Audit: "Chair",
+    Governance: "Chair",
  },
 };

@ -137,6 +150,9 @@ const getCommitteeRole = (name, committee) => {

 <style scoped>
 /* 紫色主题变量 */
+.role-badge.chair {
+  color: orange;
+}
 :root {
  --primary: #895bff;
  --primary-light: #a07cff;
@ -151,7 +167,26 @@ const getCommitteeRole = (name, committee) => {
  background-repeat: no-repeat;
  min-height: 100vh;
 }
+.title h1 {
+  position: relative;

+  &::after {
+    content: "";
+    position: absolute;
+    bottom: -14px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 80px;
+    height: 3px;
+    background: #895bff;
+    border-radius: 3px;
+    transition: width 0.3s ease;
+  }
+
+  &:hover::after {
+    width: 120px;
+  }
+}
 /* 标题区设计 */
 .hero-section {
  background: linear-gradient(
--- a/src/views/CommitteeAppointment/size375/index.vue
+++ b/src/views/CommitteeAppointment/size375/index.vue
@ -1,12 +1,9 @@
 <template>
  <div class="board-members-page">
    <!-- 页面头部 -->
-    <section class="hero-section">
-      <div class="container">
-        <h1 class="page-title">Committee Composition</h1>
-      </div>
-    </section>
-
+    <div class="title mb-[50px] text-center">
+      <h1 style="font-size: 40px; margin-top: 60px">Committee Composition</h1>
+    </div>
    <!-- 移动端视图 -->
    <div class="container">
      <div
@ -43,14 +40,18 @@
                v-for="(committee, idx) in getCommittees(director.name)"
                :key="idx"
              >
-                <div
-                  class="role-badge"
-                  :class="
-                    getCommitteeRole(director.name, committee).toLowerCase()
-                  "
-                >
-                  <span>{{ getCommitteeRole(director.name, committee) }}</span>
-                  <span class="committee-name"></span>
+                <div class="committee-position">
+                  <div
+                    class="role-badge"
+                    :class="
+                      getCommitteeRole(director.name, committee).toLowerCase()
+                    "
+                  >
+                    <span>{{ getCommitteeShortName(committee) }}</span>
+                  </div>
+                  <div style="font-size: 16px" class="role-title">
+                    {{ getCommitteeRole(director.name, committee) }}
+                  </div>
                </div>
              </template>
            </div>
@ -66,43 +67,50 @@ import { ref, computed } from "vue";

 // 董事会成员数据
 const otherDirectors = [
-  {
-    name: "Cao Yu",
-    title: "Chief Financial Officer, Secretary, Treasurer and Director",
-  },
-  { name: "David Lazar", title: "Director" },
+  // {
+  //   name: "Cao Yu",
+  //   title: "Chief Financial Officer, Secretary, Treasurer and Director",
+  // },
+  // { name: "David Lazar", title: "Director" },
  { name: "Hu Bin", title: "Director" },
  { name: "David Natan", title: "Director" },
  { name: "Chan Oi Fat", title: "Director" },
 ];

-// 委员会角色数据
+// 委员会角色数据 - 现在包含职位类型 (Chair/Member)
 const committeeRoles = {
  "Cao Yu": {},
  "David Lazar": {},
  "Hu Bin": {
-    Compensation: "Audit Committee ",
-    Governance: "Compensation Committee",
-    Audit: "Nominating Committee",
+    Audit: "Member",
+    Compensation: "Member",
+    Governance: "Member",
  },
  "David Natan": {
-    Compensation: "Audit Committee ",
-    Governance: "Compensation Committee",
-    Audit: "Nominating Committee",
+    Audit: "Chair",
+    Compensation: "Member",
+    Governance: "Member",
  },
  "Chan Oi Fat": {
-    Compensation: "Audit Committee ",
-    Governance: "Compensation Committee",
-    Audit: "Nominating Committee",
+    Audit: "Member",
+    Compensation: "Chair",
+    Governance: "Chair",
  },
 };

+// 委员会完整名称
+const committeeFullNames = {
+  Audit: "Audit Committee",
+  Compensation: "Compensation Committee",
+  Governance: "Nominating and Corporate Governance Committee",
+};
+
 // 获取委员会列表
 const getCommittees = (name) => {
  return Object.keys(committeeRoles[name] || {});
 };

-// 获取委员会角色
+// 获取委员会角色 (Chair/Member)
 const getCommitteeRole = (name, committee) => {
  return committeeRoles[name]?.[committee] || "";
 };
@ -128,6 +136,60 @@ const getInitials = (name) => {
 </script>

 <style scoped>
+/* 添加这些样式来显示职位类型 */
+.committee-position {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.role-title {
+  font-size: 12px;
+  color: #666;
+  margin-top: 4px;
+  text-transform: capitalize;
+}
+
+/* 保持原有的角色徽章样式 */
+.role-badge {
+  padding: 6px 12px;
+  border-radius: 20px;
+  font-size: 14px;
+  font-weight: 500;
+  display: inline-flex;
+  align-items: center;
+}
+
+.role-badge.chair {
+  background-color: #e6f2ff;
+  color: #0066cc;
+}
+
+.role-badge.member {
+  background-color: #f0f0f0;
+  color: #555;
+}
+.title h1 {
+  position: relative;
+
+  &::after {
+    content: "";
+    position: absolute;
+    bottom: -14px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 80px;
+    height: 3px;
+    background: #895bff;
+    border-radius: 3px;
+    transition: width 0.3s ease;
+  }
+
+  &:hover::after {
+    width: 120px;
+  }
+}
 /* 基础变量 */
 :root {
  --primary: #895bff;
--- a/src/views/CommitteeAppointment/size768/index.vue
+++ b/src/views/CommitteeAppointment/size768/index.vue
@ -1,12 +1,9 @@
 <template>
  <div class="board-members-page">
    <!-- 页面头部 -->
-    <section class="hero-section">
-      <div class="container">
-        <h1 class="page-title">Committee Composition</h1>
-      </div>
-    </section>
-
+    <div class="title mb-[50px] text-center">
+      <h1 style="font-size: 40px; margin-top: 60px">Committee Composition</h1>
+    </div>
    <!-- 移动端视图 -->
    <div class="container">
      <div
@ -43,14 +40,18 @@
                v-for="(committee, idx) in getCommittees(director.name)"
                :key="idx"
              >
-                <div
-                  class="role-badge"
-                  :class="
-                    getCommitteeRole(director.name, committee).toLowerCase()
-                  "
-                >
-                  <span>{{ getCommitteeRole(director.name, committee) }}</span>
-                  <span class="committee-name"></span>
+                <div class="committee-position">
+                  <div
+                    class="role-badge"
+                    :class="
+                      getCommitteeRole(director.name, committee).toLowerCase()
+                    "
+                  >
+                    <span>{{ getCommitteeShortName(committee) }}</span>
+                  </div>
+                  <div style="font-size: 16px" class="role-title">
+                    {{ getCommitteeRole(director.name, committee) }}
+                  </div>
                </div>
              </template>
            </div>
@ -66,43 +67,50 @@ import { ref, computed } from "vue";

 // 董事会成员数据
 const otherDirectors = [
-  {
-    name: "Cao Yu",
-    title: "Chief Financial Officer, Secretary, Treasurer and Director",
-  },
-  { name: "David Lazar", title: "Director" },
+  // {
+  //   name: "Cao Yu",
+  //   title: "Chief Financial Officer, Secretary, Treasurer and Director",
+  // },
+  // { name: "David Lazar", title: "Director" },
  { name: "Hu Bin", title: "Director" },
  { name: "David Natan", title: "Director" },
  { name: "Chan Oi Fat", title: "Director" },
 ];

-// 委员会角色数据
+// 委员会角色数据 - 现在包含职位类型 (Chair/Member)
 const committeeRoles = {
  "Cao Yu": {},
  "David Lazar": {},
  "Hu Bin": {
-    Compensation: "Audit Committee ",
-    Governance: "Compensation Committee",
-    Audit: "Nominating Committee",
+    Audit: "Member",
+    Compensation: "Member",
+    Governance: "Member",
  },
  "David Natan": {
-    Compensation: "Audit Committee ",
-    Governance: "Compensation Committee",
-    Audit: "Nominating Committee",
+    Audit: "Chair",
+    Compensation: "Member",
+    Governance: "Member",
  },
  "Chan Oi Fat": {
-    Compensation: "Audit Committee ",
-    Governance: "Compensation Committee",
-    Audit: "Nominating Committee",
+    Audit: "Member",
+    Compensation: "Chair",
+    Governance: "Chair",
  },
 };

+// 委员会完整名称
+const committeeFullNames = {
+  Audit: "Audit Committee",
+  Compensation: "Compensation Committee",
+  Governance: "Nominating and Corporate Governance Committee",
+};
+
 // 获取委员会列表
 const getCommittees = (name) => {
  return Object.keys(committeeRoles[name] || {});
 };

-// 获取委员会角色
+// 获取委员会角色 (Chair/Member)
 const getCommitteeRole = (name, committee) => {
  return committeeRoles[name]?.[committee] || "";
 };
@ -128,6 +136,60 @@ const getInitials = (name) => {
 </script>

 <style scoped>
+/* 添加这些样式来显示职位类型 */
+.committee-position {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.role-title {
+  font-size: 12px;
+  color: #666;
+  margin-top: 4px;
+  text-transform: capitalize;
+}
+
+/* 保持原有的角色徽章样式 */
+.role-badge {
+  padding: 6px 12px;
+  border-radius: 20px;
+  font-size: 14px;
+  font-weight: 500;
+  display: inline-flex;
+  align-items: center;
+}
+
+.role-badge.chair {
+  background-color: #e6f2ff;
+  color: #0066cc;
+}
+
+.role-badge.member {
+  background-color: #f0f0f0;
+  color: #555;
+}
+.title h1 {
+  position: relative;
+
+  &::after {
+    content: "";
+    position: absolute;
+    bottom: -14px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 80px;
+    height: 3px;
+    background: #895bff;
+    border-radius: 3px;
+    transition: width 0.3s ease;
+  }
+
+  &:hover::after {
+    width: 120px;
+  }
+}
 /* 基础变量 */
 :root {
  --primary: #895bff;
--- a/src/views/boarddirectors/size1440/index.vue
+++ b/src/views/boarddirectors/size1440/index.vue
@ -1,22 +1,137 @@
-<script setup>
-import { NCarousel, NDivider, NMarquee, NPopselect } from "naive-ui";
-import { onUnmounted, ref, watch, onMounted, computed } from "vue";
-
-</script>
-
 <template>
-  <header className="header">
-  1440
-  </header>
-  <main ref="main">
+  <div class="home-page">
+    <div class="directors-page">
+      <h1 class="page-title">Board of Directors</h1>
+      <n-divider />

-  </main>
-  <footer>
-
-  </footer>
+      <div class="directors-list">
+        <div
+          v-for="(director, index) in otherDirectors"
+          :key="index"
+          class="director-item"
+        >
+          <n-h2 style="font-size: 18px" class="director-name">{{
+            director.name
+          }}</n-h2>
+          <n-text style="font-size: 16px" class="director-title">{{
+            director.title
+          }}</n-text>
+          <n-divider class="divider" />
+          <n-p class="director-bio">{{ director.contain }}</n-p>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>

-<style scoped lang="scss">
+<script setup>
+const otherDirectors = [
+  {
+    name: "Hu Bin",
+    title: "Chairman of the Board of Directors",
+    contain:
+      "Served as a director of DC International Service Trade GmbH since December 2024. Prior to that, Mr. Hu worked as a freelancer in the tourism industry from April 2001 to October 2024. From April 1994 to October 2000, he served as the general manager of Suzhou Wintime Advertising Co., Ltd. Before that, he served as the general manager of Suzhou Bauhaus Advertising Design Co., Ltd. from August 1992 to April 1994, where he was engaged in computer-aided design and 3D computer animation production. Mr. Hu began his career at Suzhou Advertising Company in October 1989, where he worked as a designer responsible for graphic design, platemaking, printing, and interior decoration. Mr. Hu graduated from Suzhou Academy of Arts in 1989.",
+  },
+  {
+    name: "Cao Yu",
+    title: "Chief Financial Officer, Secretary, Treasurer and Director",
+    contain:
+      "Previously served as the treasury director of Taifeng Cultural Communication Co., Ltd where she oversees its financial matters from November 2018 to November 2024. Prior to that, Ms. Cao served as a business manager of Yangfeng Art Exchange Co., Ltd from February 2016 to October 2018. From March 2011 to January 2016, she served as the treasury officer of financial department of Suzhou Industrial Park Xinfushida Plastic Profile Products Co., Ltd.",
+  },
+  {
+    name: "David E. Lazar",
+    title: "Director",
+    contain:
+      "Served as the Chief Executive Officer of OpGen, Inc., a precision medicine company listed on the Nasdaq (OPGN) since April 11, 2024, where he also servs as a director and board chairman, beginning on March 25, 2024. Mr. Lazar served as the Chief Executive Officer of Titan Pharmaceuticals Inc. listed on the Nasdaq (TTNP) from August 2022 through April 11, 2024, where he also served as a director and board chairman from August 2022 until October 2023. He has also served as the CEO of Custodian Ventures LLC, a company which specializes in assisting distressed public companies through custodianship, since February 2018, and Activist Investing LLC, an actively managed private investment fund, since March 2018. Previously, Mr. Lazar served as Managing Partner at Zenith Partners International Inc., a boutique consulting firm, from July 2012 to April 2018. In his role as Chief Executive Officer of Custodian Ventures LLC, Mr. Lazar has successfully served as a custodian to numerous public companies across a wide range of industries.",
+  },

+  {
+    name: "David Natan",
+    title: "Director",
+    contain:
+      "Currently serves as President and Chief Executive Officer of Natan & Associates, LLC, a consulting firm offering chief financial officer services to public and private companies in a variety of industries, since 2007. Mr. Natan previously served as a Director of the Company from November 2023 to February 2025. From February 2010 to May 2020, Mr. Natan served as Chief Executive Officer of ForceField Energy, Inc. (OTCMKTS: FNRG), a company focused on the solar industry and LED lighting products. From February 2002 to November 2007, Mr. Natan served as Executive Vice President of Reporting and Chief Financial Officer of PharmaNet Development Group, Inc., a drug development services company, and, from June 1995 to February 2002, as Chief Financial Officer and Vice President of Global Technovations, Inc., a manufacturer and marketer of oil analysis instruments and speakers and speaker components. Prior to that, Mr. Natan served in various roles of increasing responsibility with Deloitte & Touche LLP, a global consulting firm. Mr. Natan currently serves as a member of the Board of Directors and Chair of the Audit Committee of Sunshine Biopharma, Inc. (Nasdaq: SBFM), a pharmaceutical and nutritional supplement company, since February 2022. Previously, Mr. Natan has served as a director for the following public companies: Global Technovations, Forcefield Energy, Titan Pharmaceuticals (Nasdaq: TTNP), Vivakor Inc. (Nasdaq: VIVK), NetBrands Corp. (OTC: NBND), and OpGen Inc. (OTC: OPGN), and Cyclacel Pharmaceuticals (Nasdaq: CYCC). Mr. Natan holds a B.A. in Economics from Boston University.",
+  },
+  {
+    name: "Chan Oi Fat",
+    title: "Director",
+    contain:
+      "Served as Vice President – Finance of SML Group Corporation since March 2018 and as Company Secretary of China Leon Inspection Holding Limited (HKEX: 1586) since February 2018 and of Raily Aesthetic Medicine International Holdings Limited (HKEX: 2135) since November 2020. He is an independent non-executive director of Huajin International Holdings Limited (HKEX: 2738) (since March 2025) and UBoT Holding Limited (HKEX GEM: 8529) (since May 2024) and previously served as an independent non-executive director of China Saftower International Holding Group Limited (HKEX GEM: 8623) from June 2020 to December 2023 and Shanghai Prime Machinery Company Limited (HKEX: 2345) from June 2014 to January 2021. Mr. Chan holds a B.B.A. (Hons) in Accountancy from the City University of Hong Kong (2000) and is a member of the Association of Chartered Certified Accountants (since 2003) and the Hong Kong Institute of Certified Public Accountants (since 2004).",
+  },
+];
+</script>
+
+<style scoped>
+.home-page {
+  background-image: url("@/assets/image/bg.png");
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+.directors-page {
+  max-width: 900px;
+  margin: 0 auto;
+  padding: 60px 24px;
+}
+
+.page-title {
+  font-size: 2.5rem; /* 18px */
+  margin-bottom: 30px;
+  color: #333;
+}
+
+.directors-list {
+  display: flex;
+  flex-direction: column;
+  gap: 48px;
+  margin-top: 40px;
+}
+
+.director-item {
+  padding-bottom: 48px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.director-item:last-child {
+  border-bottom: none;
+  padding-bottom: 0;
+}
+
+.director-name {
+  margin-bottom: 8px;
+  font-size: 28px;
+  font-weight: 500;
+  color: #1a1a1a;
+}
+
+.director-title {
+  font-size: 18px;
+  color: #666;
+  display: block;
+  margin-bottom: 24px;
+}
+
+.divider {
+  margin: 16px 0;
+  background-color: #f0f0f0;
+}
+
+.director-bio {
+  line-height: 1.8;
+  color: #4a4a4a;
+  font-size: 16px;
+}
+
+@media (min-width: 768px) {
+  .directors-page {
+    padding: 80px 40px;
+  }
+
+  .director-name {
+    font-size: 32px;
+  }
+
+  .director-title {
+    font-size: 20px;
+  }
+}
 </style>
-
--- a/src/views/boarddirectors/size1920/index.vue
+++ b/src/views/boarddirectors/size1920/index.vue
@ -1,7 +1,7 @@
 <template>
  <div class="home-page">
    <div class="directors-page">
-      <n-h1 class="page-title">Board of Directors</n-h1>
+      <h1 class="page-title">Board of Directors</h1>
      <n-divider />

      <div class="directors-list">
@ -13,7 +13,7 @@
          <n-h2 class="director-name">{{ director.name }}</n-h2>
          <n-text class="director-title">{{ director.title }}</n-text>
          <n-divider class="divider" />
-          <!-- <n-p class="director-bio">{{ director.contain }}</n-p> -->
+          <n-p class="director-bio">{{ director.contain }}</n-p>
        </div>
      </div>
    </div>
@ -22,35 +22,36 @@

 <script setup>
 const otherDirectors = [
+  {
+    name: "Hu Bin",
+    title: "Chairman of the Board of Directors",
+    contain:
+      "Served as a director of DC International Service Trade GmbH since December 2024. Prior to that, Mr. Hu worked as a freelancer in the tourism industry from April 2001 to October 2024. From April 1994 to October 2000, he served as the general manager of Suzhou Wintime Advertising Co., Ltd. Before that, he served as the general manager of Suzhou Bauhaus Advertising Design Co., Ltd. from August 1992 to April 1994, where he was engaged in computer-aided design and 3D computer animation production. Mr. Hu began his career at Suzhou Advertising Company in October 1989, where he worked as a designer responsible for graphic design, platemaking, printing, and interior decoration. Mr. Hu graduated from Suzhou Academy of Arts in 1989.",
+  },
  {
    name: "Cao Yu",
    title: "Chief Financial Officer, Secretary, Treasurer and Director",
    contain:
-      "Cao Yu, age 34, previously served as the treasury director of Taifeng Cultural Communication Co., Ltd where she oversees its financial matters fromNovember 2018 to November 2024. Prior to that, Ms. Cao served as a business manager of Yangfeng Art Exchange Co., Ltd from February 2016 toOctober 2018. From March 2011 to January 2016, she served as the treasury officer of financial department of Suzhou Industrial Park Xinfushida PlasticProfile Products Co., Ltd.",
+      "Previously served as the treasury director of Taifeng Cultural Communication Co., Ltd where she oversees its financial matters from November 2018 to November 2024. Prior to that, Ms. Cao served as a business manager of Yangfeng Art Exchange Co., Ltd from February 2016 to October 2018. From March 2011 to January 2016, she served as the treasury officer of financial department of Suzhou Industrial Park Xinfushida Plastic Profile Products Co., Ltd.",
  },
  {
-    name: "David Lazar",
+    name: "David E. Lazar",
    title: "Director",
    contain:
-      "David E. Lazar, age 34, has served as the Chief Executive Officer of OpGen, Inc., a precision medicine company listed on the Nasdaq (OPGN) since April11, 2024, where he also servs as a director and board chairman, beginning on March 25, 2024. Mr. Lazar served as the Chief Executive Officer of TitanPharmaceuticals Inc. listed on the Nasdaq (TTNP) from August 2022 through April 11, 2024, where he also served as a director and board chairman fromAugust 2022 until October 2023. He has also served as the CEO of Custodian Ventures LLC, a company which specializes in assisting distressed publiccompanies through custodianship, since February 2018, and Activist Investing LLC, an actively managed private investment fund, since March 2018.Previously, Mr. Lazar served as Managing Partner at Zenith Partners International Inc., a boutique consulting firm, from July 2012 to April 2018. In his roleas Chief Eecutive Officer of Custodian Ventures LLC, Mr. Lazar has successfully served as a custodian to numerous public companies across a widerange of industries.",
-  },
-  {
-    name: "Hu Bin",
-    title: "Director",
-    contain:
-      "Hu Bin,age 55, has served as a director of DC International Service Trade GmbH since December 2024. Prior to that, Mr. Hu worked as a freelancer in thetourism industry from April 2001 to October 2024. From April 1994 to October 2000, he served as the general manager of Suzhou Wintime AdvertisingCo., Ltd. Before that, he served as the general manager of Suzhou Bauhaus Advertising Design Co., Ltd. from August 1992 to April 1994, where he wasengaged in computer-aided design and 3D computer animation production. Mr. Hu began his career at Suzhou Advertising Company in October 1989,where he worked as a designer responsible for graphic design, platemaking, printing, and interior decoration. Mr. Hu graduated from Suzhou Academy of Arts in 1989.",
+      "Served as the Chief Executive Officer of OpGen, Inc., a precision medicine company listed on the Nasdaq (OPGN) since April 11, 2024, where he also servs as a director and board chairman, beginning on March 25, 2024. Mr. Lazar served as the Chief Executive Officer of Titan Pharmaceuticals Inc. listed on the Nasdaq (TTNP) from August 2022 through April 11, 2024, where he also served as a director and board chairman from August 2022 until October 2023. He has also served as the CEO of Custodian Ventures LLC, a company which specializes in assisting distressed public companies through custodianship, since February 2018, and Activist Investing LLC, an actively managed private investment fund, since March 2018. Previously, Mr. Lazar served as Managing Partner at Zenith Partners International Inc., a boutique consulting firm, from July 2012 to April 2018. In his role as Chief Executive Officer of Custodian Ventures LLC, Mr. Lazar has successfully served as a custodian to numerous public companies across a wide range of industries.",
  },
+
  {
    name: "David Natan",
    title: "Director",
    contain:
-      "David Natan,age 72, currently serves as President and Chief Executive Officer of Natan & Associates, LLC, a consulting firm offering chief financialofficer services to public and private companies in a variety of industries, since 2007. Mr. Natan previously served as a Director of the Company fromNovember 2023 to February 2025. From February 2010 to May 2020, Mr. Natan served as Chief Executive Officer of ForceField Energy, Inc.(OTCMKTS: FNRG), a company focused on the solar industry and LED lighting products. From February 2002 to November 2007, Mr. Natan served asExecutive Vice President of Reporting and Chief Financial Officer of PharmaNet Development Group, Inc., a drug development services company, and,from June 1995 to February 2002, as Chief Financial Officer and Vice President of Global Technovations, Inc., a manufacturer and marketer of oil analysisinstruments and speakers and speaker components. Prior to that, Mr. Natan served in various roles of increasing responsibility with Deloitte & Touche LLP,a global consulting firm. Mr. Natan currently serves as a member of the Board of Directors and Chair of the Audit Committee of Sunshine Biopharma, Inc.(Nasdaq: SBFM), a pharmaceutical and nutritional supplement company, since February 2022. Previously, Mr. Natan has served as a director for thefollowing public companies: Global Technovations, Forcefield Energy, Titan Pharmaceuticals (Nasdaq: TTNP), Vivakor Inc. (Nasdaq: VIVK), NetBrandsCorp. (OTC: NBND), and OpGen Inc. (OTC: OPGN), and Cyclacel Pharmaceuticals (Nasdaq: CYCC). Mr. Natan holds a B.A. in Economics from Boston University.",
+      "Currently serves as President and Chief Executive Officer of Natan & Associates, LLC, a consulting firm offering chief financial officer services to public and private companies in a variety of industries, since 2007. Mr. Natan previously served as a Director of the Company from November 2023 to February 2025. From February 2010 to May 2020, Mr. Natan served as Chief Executive Officer of ForceField Energy, Inc. (OTCMKTS: FNRG), a company focused on the solar industry and LED lighting products. From February 2002 to November 2007, Mr. Natan served as Executive Vice President of Reporting and Chief Financial Officer of PharmaNet Development Group, Inc., a drug development services company, and, from June 1995 to February 2002, as Chief Financial Officer and Vice President of Global Technovations, Inc., a manufacturer and marketer of oil analysis instruments and speakers and speaker components. Prior to that, Mr. Natan served in various roles of increasing responsibility with Deloitte & Touche LLP, a global consulting firm. Mr. Natan currently serves as a member of the Board of Directors and Chair of the Audit Committee of Sunshine Biopharma, Inc. (Nasdaq: SBFM), a pharmaceutical and nutritional supplement company, since February 2022. Previously, Mr. Natan has served as a director for the following public companies: Global Technovations, Forcefield Energy, Titan Pharmaceuticals (Nasdaq: TTNP), Vivakor Inc. (Nasdaq: VIVK), NetBrands Corp. (OTC: NBND), and OpGen Inc. (OTC: OPGN), and Cyclacel Pharmaceuticals (Nasdaq: CYCC). Mr. Natan holds a B.A. in Economics from Boston University.",
  },
  {
    name: "Chan Oi Fat",
    title: "Director",
    contain:
-      "Chan Oi Fat, age 46, has served as Vice President – Finance of SML Group Corporation since March 2018 and as Company Secretary of China LeonInspection Holding Limited (HKEX: 1586) since February 2018 and of Raily Aesthetic Medicine International Holdings Limited (HKEX: 2135) sinceNovember 2020. He is an independent non-executive director of Huajin International Holdings Limited (HKEX: 2738) (since March 2025) and UBoTHolding Limited (HKEX GEM: 8529) (since May 2024) and previously served as an independent non-executive director of China Saftower InternationalHolding Group Limited (HKEX GEM: 8623) from June 2020 to December 2023 and Shanghai Prime Machinery Company Limited (HKEX: 2345) fromJune 2014 to January 2021. Mr. Chan holds a B.B.A. (Hons) in Accountancy from the City University of Hong Kong (2000) and is a member of theAssociation of Chartered Certified Accountants (since 2003) and the Hong Kong Institute of Certified Public Accountants (since 2004).",
+      "Served as Vice President – Finance of SML Group Corporation since March 2018 and as Company Secretary of China Leon Inspection Holding Limited (HKEX: 1586) since February 2018 and of Raily Aesthetic Medicine International Holdings Limited (HKEX: 2135) since November 2020. He is an independent non-executive director of Huajin International Holdings Limited (HKEX: 2738) (since March 2025) and UBoT Holding Limited (HKEX GEM: 8529) (since May 2024) and previously served as an independent non-executive director of China Saftower International Holding Group Limited (HKEX GEM: 8623) from June 2020 to December 2023 and Shanghai Prime Machinery Company Limited (HKEX: 2345) from June 2014 to January 2021. Mr. Chan holds a B.B.A. (Hons) in Accountancy from the City University of Hong Kong (2000) and is a member of the Association of Chartered Certified Accountants (since 2003) and the Hong Kong Institute of Certified Public Accountants (since 2004).",
  },
 ];
 </script>
--- a/src/views/boarddirectors/size375/index.vue
+++ b/src/views/boarddirectors/size375/index.vue
@ -13,7 +13,7 @@
          <n-h2 class="director-name">{{ director.name }}</n-h2>
          <n-text class="director-title">{{ director.title }}</n-text>
          <n-divider class="divider" />
-          <!-- <n-p class="director-bio">{{ director.contain }}</n-p> -->
+          <n-p class="director-bio">{{ director.contain }}</n-p>
        </div>
      </div>
    </div>
@ -22,35 +22,36 @@

 <script setup>
 const otherDirectors = [
+  {
+    name: "Hu Bin",
+    title: "Chairman of the Board of Directors",
+    contain:
+      "Served as a director of DC International Service Trade GmbH since December 2024. Prior to that, Mr. Hu worked as a freelancer in the tourism industry from April 2001 to October 2024. From April 1994 to October 2000, he served as the general manager of Suzhou Wintime Advertising Co., Ltd. Before that, he served as the general manager of Suzhou Bauhaus Advertising Design Co., Ltd. from August 1992 to April 1994, where he was engaged in computer-aided design and 3D computer animation production. Mr. Hu began his career at Suzhou Advertising Company in October 1989, where he worked as a designer responsible for graphic design, platemaking, printing, and interior decoration. Mr. Hu graduated from Suzhou Academy of Arts in 1989.",
+  },
  {
    name: "Cao Yu",
    title: "Chief Financial Officer, Secretary, Treasurer and Director",
    contain:
-      "Cao Yu, age 34, previously served as the treasury director of Taifeng Cultural Communication Co., Ltd where she oversees its financial matters fromNovember 2018 to November 2024. Prior to that, Ms. Cao served as a business manager of Yangfeng Art Exchange Co., Ltd from February 2016 toOctober 2018. From March 2011 to January 2016, she served as the treasury officer of financial department of Suzhou Industrial Park Xinfushida PlasticProfile Products Co., Ltd.",
+      "Previously served as the treasury director of Taifeng Cultural Communication Co., Ltd where she oversees its financial matters from November 2018 to November 2024. Prior to that, Ms. Cao served as a business manager of Yangfeng Art Exchange Co., Ltd from February 2016 to October 2018. From March 2011 to January 2016, she served as the treasury officer of financial department of Suzhou Industrial Park Xinfushida Plastic Profile Products Co., Ltd.",
  },
  {
-    name: "David Lazar",
+    name: "David E. Lazar",
    title: "Director",
    contain:
-      "David E. Lazar, age 34, has served as the Chief Executive Officer of OpGen, Inc., a precision medicine company listed on the Nasdaq (OPGN) since April11, 2024, where he also servs as a director and board chairman, beginning on March 25, 2024. Mr. Lazar served as the Chief Executive Officer of TitanPharmaceuticals Inc. listed on the Nasdaq (TTNP) from August 2022 through April 11, 2024, where he also served as a director and board chairman fromAugust 2022 until October 2023. He has also served as the CEO of Custodian Ventures LLC, a company which specializes in assisting distressed publiccompanies through custodianship, since February 2018, and Activist Investing LLC, an actively managed private investment fund, since March 2018.Previously, Mr. Lazar served as Managing Partner at Zenith Partners International Inc., a boutique consulting firm, from July 2012 to April 2018. In his roleas Chief Eecutive Officer of Custodian Ventures LLC, Mr. Lazar has successfully served as a custodian to numerous public companies across a widerange of industries.",
-  },
-  {
-    name: "Hu Bin",
-    title: "Director",
-    contain:
-      "Hu Bin,age 55, has served as a director of DC International Service Trade GmbH since December 2024. Prior to that, Mr. Hu worked as a freelancer in thetourism industry from April 2001 to October 2024. From April 1994 to October 2000, he served as the general manager of Suzhou Wintime AdvertisingCo., Ltd. Before that, he served as the general manager of Suzhou Bauhaus Advertising Design Co., Ltd. from August 1992 to April 1994, where he wasengaged in computer-aided design and 3D computer animation production. Mr. Hu began his career at Suzhou Advertising Company in October 1989,where he worked as a designer responsible for graphic design, platemaking, printing, and interior decoration. Mr. Hu graduated from Suzhou Academy of Arts in 1989.",
+      "Served as the Chief Executive Officer of OpGen, Inc., a precision medicine company listed on the Nasdaq (OPGN) since April 11, 2024, where he also servs as a director and board chairman, beginning on March 25, 2024. Mr. Lazar served as the Chief Executive Officer of Titan Pharmaceuticals Inc. listed on the Nasdaq (TTNP) from August 2022 through April 11, 2024, where he also served as a director and board chairman from August 2022 until October 2023. He has also served as the CEO of Custodian Ventures LLC, a company which specializes in assisting distressed public companies through custodianship, since February 2018, and Activist Investing LLC, an actively managed private investment fund, since March 2018. Previously, Mr. Lazar served as Managing Partner at Zenith Partners International Inc., a boutique consulting firm, from July 2012 to April 2018. In his role as Chief Executive Officer of Custodian Ventures LLC, Mr. Lazar has successfully served as a custodian to numerous public companies across a wide range of industries.",
  },
+
  {
    name: "David Natan",
    title: "Director",
    contain:
-      "David Natan,age 72, currently serves as President and Chief Executive Officer of Natan & Associates, LLC, a consulting firm offering chief financialofficer services to public and private companies in a variety of industries, since 2007. Mr. Natan previously served as a Director of the Company fromNovember 2023 to February 2025. From February 2010 to May 2020, Mr. Natan served as Chief Executive Officer of ForceField Energy, Inc.(OTCMKTS: FNRG), a company focused on the solar industry and LED lighting products. From February 2002 to November 2007, Mr. Natan served asExecutive Vice President of Reporting and Chief Financial Officer of PharmaNet Development Group, Inc., a drug development services company, and,from June 1995 to February 2002, as Chief Financial Officer and Vice President of Global Technovations, Inc., a manufacturer and marketer of oil analysisinstruments and speakers and speaker components. Prior to that, Mr. Natan served in various roles of increasing responsibility with Deloitte & Touche LLP,a global consulting firm. Mr. Natan currently serves as a member of the Board of Directors and Chair of the Audit Committee of Sunshine Biopharma, Inc.(Nasdaq: SBFM), a pharmaceutical and nutritional supplement company, since February 2022. Previously, Mr. Natan has served as a director for thefollowing public companies: Global Technovations, Forcefield Energy, Titan Pharmaceuticals (Nasdaq: TTNP), Vivakor Inc. (Nasdaq: VIVK), NetBrandsCorp. (OTC: NBND), and OpGen Inc. (OTC: OPGN), and Cyclacel Pharmaceuticals (Nasdaq: CYCC). Mr. Natan holds a B.A. in Economics from Boston University.",
+      "Currently serves as President and Chief Executive Officer of Natan & Associates, LLC, a consulting firm offering chief financial officer services to public and private companies in a variety of industries, since 2007. Mr. Natan previously served as a Director of the Company from November 2023 to February 2025. From February 2010 to May 2020, Mr. Natan served as Chief Executive Officer of ForceField Energy, Inc. (OTCMKTS: FNRG), a company focused on the solar industry and LED lighting products. From February 2002 to November 2007, Mr. Natan served as Executive Vice President of Reporting and Chief Financial Officer of PharmaNet Development Group, Inc., a drug development services company, and, from June 1995 to February 2002, as Chief Financial Officer and Vice President of Global Technovations, Inc., a manufacturer and marketer of oil analysis instruments and speakers and speaker components. Prior to that, Mr. Natan served in various roles of increasing responsibility with Deloitte & Touche LLP, a global consulting firm. Mr. Natan currently serves as a member of the Board of Directors and Chair of the Audit Committee of Sunshine Biopharma, Inc. (Nasdaq: SBFM), a pharmaceutical and nutritional supplement company, since February 2022. Previously, Mr. Natan has served as a director for the following public companies: Global Technovations, Forcefield Energy, Titan Pharmaceuticals (Nasdaq: TTNP), Vivakor Inc. (Nasdaq: VIVK), NetBrands Corp. (OTC: NBND), and OpGen Inc. (OTC: OPGN), and Cyclacel Pharmaceuticals (Nasdaq: CYCC). Mr. Natan holds a B.A. in Economics from Boston University.",
  },
  {
    name: "Chan Oi Fat",
    title: "Director",
    contain:
-      "Chan Oi Fat, age 46, has served as Vice President – Finance of SML Group Corporation since March 2018 and as Company Secretary of China LeonInspection Holding Limited (HKEX: 1586) since February 2018 and of Raily Aesthetic Medicine International Holdings Limited (HKEX: 2135) sinceNovember 2020. He is an independent non-executive director of Huajin International Holdings Limited (HKEX: 2738) (since March 2025) and UBoTHolding Limited (HKEX GEM: 8529) (since May 2024) and previously served as an independent non-executive director of China Saftower InternationalHolding Group Limited (HKEX GEM: 8623) from June 2020 to December 2023 and Shanghai Prime Machinery Company Limited (HKEX: 2345) fromJune 2014 to January 2021. Mr. Chan holds a B.B.A. (Hons) in Accountancy from the City University of Hong Kong (2000) and is a member of theAssociation of Chartered Certified Accountants (since 2003) and the Hong Kong Institute of Certified Public Accountants (since 2004).",
+      "Served as Vice President – Finance of SML Group Corporation since March 2018 and as Company Secretary of China Leon Inspection Holding Limited (HKEX: 1586) since February 2018 and of Raily Aesthetic Medicine International Holdings Limited (HKEX: 2135) since November 2020. He is an independent non-executive director of Huajin International Holdings Limited (HKEX: 2738) (since March 2025) and UBoT Holding Limited (HKEX GEM: 8529) (since May 2024) and previously served as an independent non-executive director of China Saftower International Holding Group Limited (HKEX GEM: 8623) from June 2020 to December 2023 and Shanghai Prime Machinery Company Limited (HKEX: 2345) from June 2014 to January 2021. Mr. Chan holds a B.B.A. (Hons) in Accountancy from the City University of Hong Kong (2000) and is a member of the Association of Chartered Certified Accountants (since 2003) and the Hong Kong Institute of Certified Public Accountants (since 2004).",
  },
 ];
 </script>
--- a/src/views/boarddirectors/size768/index.vue
+++ b/src/views/boarddirectors/size768/index.vue
@ -1,7 +1,7 @@
 <template>
  <div class="home-page">
    <div class="directors-page">
-      <n-h1 class="page-title">Board of Directors</n-h1>
+      <h1 class="page-title">Board of Directors</h1>
      <n-divider />

      <div class="directors-list">
@ -10,10 +10,14 @@
          :key="index"
          class="director-item"
        >
-          <n-h2 class="director-name">{{ director.name }}</n-h2>
-          <n-text class="director-title">{{ director.title }}</n-text>
+          <n-h2 style="font-size: 18px" class="director-name">{{
+            director.name
+          }}</n-h2>
+          <n-text style="font-size: 16px" class="director-title">{{
+            director.title
+          }}</n-text>
          <n-divider class="divider" />
-          <!-- <n-p class="director-bio">{{ director.contain }}</n-p> -->
+          <n-p class="director-bio">{{ director.contain }}</n-p>
        </div>
      </div>
    </div>
@ -22,78 +26,69 @@

 <script setup>
 const otherDirectors = [
+  {
+    name: "Hu Bin",
+    title: "Chairman of the Board of Directors",
+    contain:
+      "Served as a director of DC International Service Trade GmbH since December 2024. Prior to that, Mr. Hu worked as a freelancer in the tourism industry from April 2001 to October 2024. From April 1994 to October 2000, he served as the general manager of Suzhou Wintime Advertising Co., Ltd. Before that, he served as the general manager of Suzhou Bauhaus Advertising Design Co., Ltd. from August 1992 to April 1994, where he was engaged in computer-aided design and 3D computer animation production. Mr. Hu began his career at Suzhou Advertising Company in October 1989, where he worked as a designer responsible for graphic design, platemaking, printing, and interior decoration. Mr. Hu graduated from Suzhou Academy of Arts in 1989.",
+  },
  {
    name: "Cao Yu",
    title: "Chief Financial Officer, Secretary, Treasurer and Director",
    contain:
-      "Cao Yu, age 34, previously served as the treasury director of Taifeng Cultural Communication Co., Ltd where she oversees its financial matters fromNovember 2018 to November 2024. Prior to that, Ms. Cao served as a business manager of Yangfeng Art Exchange Co., Ltd from February 2016 toOctober 2018. From March 2011 to January 2016, she served as the treasury officer of financial department of Suzhou Industrial Park Xinfushida PlasticProfile Products Co., Ltd.",
+      "Previously served as the treasury director of Taifeng Cultural Communication Co., Ltd where she oversees its financial matters from November 2018 to November 2024. Prior to that, Ms. Cao served as a business manager of Yangfeng Art Exchange Co., Ltd from February 2016 to October 2018. From March 2011 to January 2016, she served as the treasury officer of financial department of Suzhou Industrial Park Xinfushida Plastic Profile Products Co., Ltd.",
  },
  {
-    name: "David Lazar",
+    name: "David E. Lazar",
    title: "Director",
    contain:
-      "David E. Lazar, age 34, has served as the Chief Executive Officer of OpGen, Inc., a precision medicine company listed on the Nasdaq (OPGN) since April11, 2024, where he also servs as a director and board chairman, beginning on March 25, 2024. Mr. Lazar served as the Chief Executive Officer of TitanPharmaceuticals Inc. listed on the Nasdaq (TTNP) from August 2022 through April 11, 2024, where he also served as a director and board chairman fromAugust 2022 until October 2023. He has also served as the CEO of Custodian Ventures LLC, a company which specializes in assisting distressed publiccompanies through custodianship, since February 2018, and Activist Investing LLC, an actively managed private investment fund, since March 2018.Previously, Mr. Lazar served as Managing Partner at Zenith Partners International Inc., a boutique consulting firm, from July 2012 to April 2018. In his roleas Chief Eecutive Officer of Custodian Ventures LLC, Mr. Lazar has successfully served as a custodian to numerous public companies across a widerange of industries.",
-  },
-  {
-    name: "Hu Bin",
-    title: "Director",
-    contain:
-      "Hu Bin,age 55, has served as a director of DC International Service Trade GmbH since December 2024. Prior to that, Mr. Hu worked as a freelancer in thetourism industry from April 2001 to October 2024. From April 1994 to October 2000, he served as the general manager of Suzhou Wintime AdvertisingCo., Ltd. Before that, he served as the general manager of Suzhou Bauhaus Advertising Design Co., Ltd. from August 1992 to April 1994, where he wasengaged in computer-aided design and 3D computer animation production. Mr. Hu began his career at Suzhou Advertising Company in October 1989,where he worked as a designer responsible for graphic design, platemaking, printing, and interior decoration. Mr. Hu graduated from Suzhou Academy of Arts in 1989.",
+      "Served as the Chief Executive Officer of OpGen, Inc., a precision medicine company listed on the Nasdaq (OPGN) since April 11, 2024, where he also servs as a director and board chairman, beginning on March 25, 2024. Mr. Lazar served as the Chief Executive Officer of Titan Pharmaceuticals Inc. listed on the Nasdaq (TTNP) from August 2022 through April 11, 2024, where he also served as a director and board chairman from August 2022 until October 2023. He has also served as the CEO of Custodian Ventures LLC, a company which specializes in assisting distressed public companies through custodianship, since February 2018, and Activist Investing LLC, an actively managed private investment fund, since March 2018. Previously, Mr. Lazar served as Managing Partner at Zenith Partners International Inc., a boutique consulting firm, from July 2012 to April 2018. In his role as Chief Executive Officer of Custodian Ventures LLC, Mr. Lazar has successfully served as a custodian to numerous public companies across a wide range of industries.",
  },
+
  {
    name: "David Natan",
    title: "Director",
    contain:
-      "David Natan,age 72, currently serves as President and Chief Executive Officer of Natan & Associates, LLC, a consulting firm offering chief financialofficer services to public and private companies in a variety of industries, since 2007. Mr. Natan previously served as a Director of the Company fromNovember 2023 to February 2025. From February 2010 to May 2020, Mr. Natan served as Chief Executive Officer of ForceField Energy, Inc.(OTCMKTS: FNRG), a company focused on the solar industry and LED lighting products. From February 2002 to November 2007, Mr. Natan served asExecutive Vice President of Reporting and Chief Financial Officer of PharmaNet Development Group, Inc., a drug development services company, and,from June 1995 to February 2002, as Chief Financial Officer and Vice President of Global Technovations, Inc., a manufacturer and marketer of oil analysisinstruments and speakers and speaker components. Prior to that, Mr. Natan served in various roles of increasing responsibility with Deloitte & Touche LLP,a global consulting firm. Mr. Natan currently serves as a member of the Board of Directors and Chair of the Audit Committee of Sunshine Biopharma, Inc.(Nasdaq: SBFM), a pharmaceutical and nutritional supplement company, since February 2022. Previously, Mr. Natan has served as a director for thefollowing public companies: Global Technovations, Forcefield Energy, Titan Pharmaceuticals (Nasdaq: TTNP), Vivakor Inc. (Nasdaq: VIVK), NetBrandsCorp. (OTC: NBND), and OpGen Inc. (OTC: OPGN), and Cyclacel Pharmaceuticals (Nasdaq: CYCC). Mr. Natan holds a B.A. in Economics from Boston University.",
+      "Currently serves as President and Chief Executive Officer of Natan & Associates, LLC, a consulting firm offering chief financial officer services to public and private companies in a variety of industries, since 2007. Mr. Natan previously served as a Director of the Company from November 2023 to February 2025. From February 2010 to May 2020, Mr. Natan served as Chief Executive Officer of ForceField Energy, Inc. (OTCMKTS: FNRG), a company focused on the solar industry and LED lighting products. From February 2002 to November 2007, Mr. Natan served as Executive Vice President of Reporting and Chief Financial Officer of PharmaNet Development Group, Inc., a drug development services company, and, from June 1995 to February 2002, as Chief Financial Officer and Vice President of Global Technovations, Inc., a manufacturer and marketer of oil analysis instruments and speakers and speaker components. Prior to that, Mr. Natan served in various roles of increasing responsibility with Deloitte & Touche LLP, a global consulting firm. Mr. Natan currently serves as a member of the Board of Directors and Chair of the Audit Committee of Sunshine Biopharma, Inc. (Nasdaq: SBFM), a pharmaceutical and nutritional supplement company, since February 2022. Previously, Mr. Natan has served as a director for the following public companies: Global Technovations, Forcefield Energy, Titan Pharmaceuticals (Nasdaq: TTNP), Vivakor Inc. (Nasdaq: VIVK), NetBrands Corp. (OTC: NBND), and OpGen Inc. (OTC: OPGN), and Cyclacel Pharmaceuticals (Nasdaq: CYCC). Mr. Natan holds a B.A. in Economics from Boston University.",
  },
  {
    name: "Chan Oi Fat",
    title: "Director",
    contain:
-      "Chan Oi Fat, age 46, has served as Vice President – Finance of SML Group Corporation since March 2018 and as Company Secretary of China LeonInspection Holding Limited (HKEX: 1586) since February 2018 and of Raily Aesthetic Medicine International Holdings Limited (HKEX: 2135) sinceNovember 2020. He is an independent non-executive director of Huajin International Holdings Limited (HKEX: 2738) (since March 2025) and UBoTHolding Limited (HKEX GEM: 8529) (since May 2024) and previously served as an independent non-executive director of China Saftower InternationalHolding Group Limited (HKEX GEM: 8623) from June 2020 to December 2023 and Shanghai Prime Machinery Company Limited (HKEX: 2345) fromJune 2014 to January 2021. Mr. Chan holds a B.B.A. (Hons) in Accountancy from the City University of Hong Kong (2000) and is a member of theAssociation of Chartered Certified Accountants (since 2003) and the Hong Kong Institute of Certified Public Accountants (since 2004).",
+      "Served as Vice President – Finance of SML Group Corporation since March 2018 and as Company Secretary of China Leon Inspection Holding Limited (HKEX: 1586) since February 2018 and of Raily Aesthetic Medicine International Holdings Limited (HKEX: 2135) since November 2020. He is an independent non-executive director of Huajin International Holdings Limited (HKEX: 2738) (since March 2025) and UBoT Holding Limited (HKEX GEM: 8529) (since May 2024) and previously served as an independent non-executive director of China Saftower International Holding Group Limited (HKEX GEM: 8623) from June 2020 to December 2023 and Shanghai Prime Machinery Company Limited (HKEX: 2345) from June 2014 to January 2021. Mr. Chan holds a B.B.A. (Hons) in Accountancy from the City University of Hong Kong (2000) and is a member of the Association of Chartered Certified Accountants (since 2003) and the Hong Kong Institute of Certified Public Accountants (since 2004).",
  },
 ];
 </script>

 <style scoped>
-:root {
-  --primary-color: #333;
-  --secondary-color: #666;
-  --divider-color: #f0f0f0;
-  --mobile-padding: 16px;
-  --tablet-padding: 24px;
-}
-
 .home-page {
-  background-image: url("@/assets/image/bg-mobile.png");
-  background-size: cover;
+  background-image: url("@/assets/image/bg.png");
+  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
 }
-
 .directors-page {
-  max-width: 1200px;
+  max-width: 900px;
  margin: 0 auto;
-  padding: clamp(2rem, 5vw, 4rem)
-    clamp(var(--mobile-padding), 4vw, var(--tablet-padding));
+  padding: 60px 24px;
 }

 .page-title {
-  font-size: clamp(1.75rem, 4vw, 2.5rem);
-  margin-bottom: clamp(1.5rem, 3vw, 2rem);
-  color: var(--primary-color);
+  font-size: 2.5rem; /* 18px */
+  margin-bottom: 30px;
+  color: #333;
 }

 .directors-list {
  display: flex;
  flex-direction: column;
-  gap: clamp(2rem, 4vw, 3rem);
-  margin-top: clamp(1.5rem, 3vw, 2.5rem);
+  gap: 48px;
+  margin-top: 40px;
 }

 .director-item {
-  padding-bottom: clamp(2rem, 4vw, 3rem);
-  border-bottom: 1px solid var(--divider-color);
+  padding-bottom: 48px;
+  border-bottom: 1px solid #f0f0f0;
 }

 .director-item:last-child {
@ -102,43 +97,41 @@ const otherDirectors = [
 }

 .director-name {
-  margin-bottom: clamp(0.5rem, 1vw, 0.75rem);
-  font-size: clamp(1.25rem, 3vw, 1.75rem);
+  margin-bottom: 8px;
+  font-size: 28px;
  font-weight: 500;
-  color: var(--primary-color);
+  color: #1a1a1a;
 }

 .director-title {
-  font-size: clamp(1rem, 2vw, 1.25rem);
-  color: var(--secondary-color);
+  font-size: 18px;
+  color: #666;
  display: block;
-  margin-bottom: clamp(1rem, 2vw, 1.5rem);
-  line-height: 1.5;
+  margin-bottom: 24px;
 }

 .divider {
-  margin: clamp(1rem, 2vw, 1.5rem) 0;
-  background-color: var(--divider-color);
+  margin: 16px 0;
+  background-color: #f0f0f0;
 }

 .director-bio {
  line-height: 1.8;
  color: #4a4a4a;
-  font-size: clamp(0.9rem, 1.8vw, 1rem);
+  font-size: 16px;
 }

-/* 针对超小屏幕的优化 */
-@media (max-width: 375px) {
+@media (min-width: 768px) {
  .directors-page {
-    padding: clamp(1.5rem, 5vw, 2rem) clamp(12px, 4vw, 16px);
+    padding: 80px 40px;
  }

  .director-name {
-    font-size: 1.25rem;
+    font-size: 32px;
  }

  .director-title {
-    font-size: 1rem;
+    font-size: 20px;
  }
 }
 </style>
--- a/src/views/companyoverview/size1440/index.vue
+++ b/src/views/companyoverview/size1440/index.vue
@ -1,26 +1,18 @@
 <template>
  <div class="home-page">
    <div class="company-overview">
-      <!-- 顶部大图区域 -->
-      <div class="hero-section">
-        <transition name="fade-up" appear>
-          <n-h1 class="hero-title">{{
-            $t("COMPANYOVERVIEW.TITLETWO.TITLE")
-          }}</n-h1>
-        </transition>
-      </div>
-
-      <!-- 公司简介部分 -->
      <!-- 公司概况 -->
      <section
        class="company-overview"
-        style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
+        style="max-width: 1200px; margin: 60px auto"
      >
-        <h2 class="section-title">
+        <h1 class="section-title">
          {{ $t("COMPANYOVERVIEW.TITLETWO.TITLE") }}
-        </h2>
+        </h1>
        <div class="content-block">
-          <p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENT") }}</p>
+          <div style="font-size: 18px">
+            {{ $t("COMPANYOVERVIEW.TITLETWO.CONTENT") }}
+          </div>
          <!-- <p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTWO") }}</p>
          <p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTHREE") }}</p> -->
        </div>
@ -28,21 +20,14 @@

      <!-- 使命愿景卡片 -->
      <section class="mission-section">
+        <h1 class="section-title">
+          {{ $t("COMPANYOVERVIEW.TITLETHREE.TITLE") }}
+        </h1>
        <div class="mission-cards">
          <n-card hoverable class="mission-card" v-motion-pop>
-            <n-h3 class="card-title">{{
-              $t("COMPANYOVERVIEW.TITLETHREE.TITLE")
-            }}</n-h3>
-            <n-p class="card-content">{{
-              $t("COMPANYOVERVIEW.TITLETHREE.CONTENT")
-            }}</n-p>
-          </n-card>
+            

-          <n-card hoverable class="mission-card" v-motion-pop>
-            <n-h3 class="card-title">{{
-              $t("COMPANYOVERVIEW.TITLETHREE.TITLE")
-            }}</n-h3>
-            <n-p class="card-content">{{
+            <n-p style="font-size: 18px" class="card-content">{{
              $t("COMPANYOVERVIEW.TITLETHREE.CONTENTTWO")
            }}</n-p>
          </n-card>
@ -52,9 +37,9 @@
      <!-- 里程碑时间轴 -->
      <!-- 里程碑时间轴 -->
      <section class="section timeline-section">
-        <n-h2 class="section-title">{{
-          $t("COMPANYOVERVIEW.TITLEFOUR.TITLE")
-        }}</n-h2>
+        <h1 class="section-title">
+          {{ $t("COMPANYOVERVIEW.TITLEFOUR.TITLE") }}
+        </h1>
        <div class="timeline">
          <!-- 1977-2015 -->
          <div class="timeline-item" v-motion-slide-visible-once-bottom>
@ -64,12 +49,12 @@
                $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADING")
              }}</n-h3>
              <br />
-              <n-p class="timeline-desc">{{
+              <n-p style="font-size: 18px" class="timeline-desc">{{
                $t("COMPANYOVERVIEW.TITLEFOUR.paragraph.ONE")
              }}</n-p>
              <br />

-              <n-p class="timeline-desc">{{
+              <n-p style="font-size: 18px" class="timeline-desc">{{
                $t("COMPANYOVERVIEW.TITLEFOUR.paragraph.TWO")
              }}</n-p>
            </div>
@ -84,12 +69,12 @@
              }}</n-h3>
              <br />

-              <n-p class="timeline-desc">{{
+              <n-p style="font-size: 18px" class="timeline-desc">{{
                $t("COMPANYOVERVIEW.TITLEFOUR.paragraphTwo.ONE")
              }}</n-p>
              <br />

-              <n-p class="timeline-desc">{{
+              <n-p style="font-size: 18px" class="timeline-desc">{{
                $t("COMPANYOVERVIEW.TITLEFOUR.paragraphTwo.TWO")
              }}</n-p>
            </div>
@ -104,12 +89,12 @@
              }}</n-h3>
              <br />

-              <n-p class="timeline-desc">{{
+              <n-p style="font-size: 18px" class="timeline-desc">{{
                $t("COMPANYOVERVIEW.TITLEFOUR.paragraphTHREE.ONE")
              }}</n-p>
              <br />

-              <n-p class="timeline-desc">{{
+              <n-p style="font-size: 18px" class="timeline-desc">{{
                $t("COMPANYOVERVIEW.TITLEFOUR.paragraphTHREE.TWO")
              }}</n-p>
            </div>
@ -124,12 +109,12 @@
              }}</n-h3>
              <br />

-              <n-p class="timeline-desc">{{
+              <n-p style="font-size: 18px" class="timeline-desc">{{
                $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFOUR.ONE")
              }}</n-p>
              <br />

-              <n-p class="timeline-desc">{{
+              <n-p style="font-size: 18px" class="timeline-desc">{{
                $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFOUR.TWO")
              }}</n-p>
            </div>
@ -144,27 +129,27 @@
              }}</n-h3>
              <br />

-              <n-p class="timeline-desc">{{
+              <n-p style="font-size: 18px" class="timeline-desc">{{
                $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.ONE")
              }}</n-p>
              <br />

-              <n-p class="timeline-desc">{{
+              <n-p style="font-size: 18px" class="timeline-desc">{{
                $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.TWO")
              }}</n-p>
              <br />

-              <n-p class="timeline-desc">{{
+              <n-p style="font-size: 18px" class="timeline-desc">{{
                $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.THREE")
              }}</n-p>
              <br />

-              <n-p class="timeline-desc">{{
+              <n-p style="font-size: 18px" class="timeline-desc">{{
                $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.FOUR")
              }}</n-p>
              <br />

-              <n-p class="timeline-desc">{{
+              <n-p style="font-size: 18px" class="timeline-desc">{{
                $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.FIVE")
              }}</n-p>
            </div>
@ -172,16 +157,17 @@
        </div>
      </section>

-      <!-- 成就部分 -->
-      <section class="achievement-section" v-motion-fade>
-        <n-h2 class="section-title">{{
-          $t("COMPANYOVERVIEW.TITLEFIVE.TITLE")
-        }}</n-h2>
-        <br />
-
-        <n-p class="section-content">{{
-          $t("COMPANYOVERVIEW.TITLEFIVE.CONTENT")
-        }}</n-p>
+      <section class="mission-section">
+        <h1 class="section-title">
+          {{ $t("COMPANYOVERVIEW.TITLEFIVE.TITLE") }}
+        </h1>
+        <div class="mission-cards">
+          <n-card hoverable class="mission-card" v-motion-pop>
+            <n-p style="font-size: 18px" class="card-content">{{
+              $t("COMPANYOVERVIEW.TITLEFIVE.CONTENT")
+            }}</n-p>
+          </n-card>
+        </div>
      </section>
    </div>
  </div>
@ -210,7 +196,7 @@ const stats = ref([
 .company-overview {
  max-width: 1200px;
  margin: 0 auto;
-  padding: 0 20px;
+  /* padding: 0 20px; */
 }

 /* 顶部大图区域 */
@ -242,7 +228,7 @@ const stats = ref([
 }

 .section-title {
-  font-size: 2.2rem;
+  font-size: 2.5rem;
  margin-bottom: 30px;
  position: relative;
  display: inline-block;
--- a/src/views/companyoverview/size1920/index.vue
+++ b/src/views/companyoverview/size1920/index.vue
@ -1,26 +1,18 @@
 <template>
  <div class="home-page">
    <div class="company-overview">
-      <!-- 顶部大图区域 -->
-      <div class="hero-section">
-        <transition name="fade-up" appear>
-          <n-h1 class="hero-title">{{
-            $t("COMPANYOVERVIEW.TITLETWO.TITLE")
-          }}</n-h1>
-        </transition>
-      </div>
-
-      <!-- 公司简介部分 -->
      <!-- 公司概况 -->
      <section
        class="company-overview"
-        style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
+        style="max-width: 1200px; margin: 60px auto"
      >
-        <h2 class="section-title">
+        <h1 class="section-title">
          {{ $t("COMPANYOVERVIEW.TITLETWO.TITLE") }}
-        </h2>
+        </h1>
        <div class="content-block">
-          <p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENT") }}</p>
+          <div style="font-size: 18px">
+            {{ $t("COMPANYOVERVIEW.TITLETWO.CONTENT") }}
+          </div>
          <!-- <p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTWO") }}</p>
          <p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTHREE") }}</p> -->
        </div>
@ -28,21 +20,12 @@

      <!-- 使命愿景卡片 -->
      <section class="mission-section">
+        <h1 class="section-title">
+          {{ $t("COMPANYOVERVIEW.TITLETHREE.TITLE") }}
+        </h1>
        <div class="mission-cards">
          <n-card hoverable class="mission-card" v-motion-pop>
-            <n-h3 class="card-title">{{
-              $t("COMPANYOVERVIEW.TITLETHREE.TITLE")
-            }}</n-h3>
-            <n-p class="card-content">{{
-              $t("COMPANYOVERVIEW.TITLETHREE.CONTENT")
-            }}</n-p>
-          </n-card>
-
-          <n-card hoverable class="mission-card" v-motion-pop>
-            <n-h3 class="card-title">{{
-              $t("COMPANYOVERVIEW.TITLETHREE.TITLE")
-            }}</n-h3>
-            <n-p class="card-content">{{
+            <n-p style="font-size: 18px" class="card-content">{{
              $t("COMPANYOVERVIEW.TITLETHREE.CONTENTTWO")
            }}</n-p>
          </n-card>
@ -52,9 +35,9 @@
      <!-- 里程碑时间轴 -->
      <!-- 里程碑时间轴 -->
      <section class="section timeline-section">
-        <n-h2 class="section-title">{{
-          $t("COMPANYOVERVIEW.TITLEFOUR.TITLE")
-        }}</n-h2>
+        <h1 class="section-title">
+          {{ $t("COMPANYOVERVIEW.TITLEFOUR.TITLE") }}
+        </h1>
        <div class="timeline">
          <!-- 1977-2015 -->
          <div class="timeline-item" v-motion-slide-visible-once-bottom>
@ -64,12 +47,12 @@
                $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADING")
              }}</n-h3>
              <br />
-              <n-p class="timeline-desc">{{
+              <n-p style="font-size: 18px" class="timeline-desc">{{
                $t("COMPANYOVERVIEW.TITLEFOUR.paragraph.ONE")
              }}</n-p>
              <br />

-              <n-p class="timeline-desc">{{
+              <n-p style="font-size: 18px" class="timeline-desc">{{
                $t("COMPANYOVERVIEW.TITLEFOUR.paragraph.TWO")
              }}</n-p>
            </div>
@ -84,12 +67,12 @@
              }}</n-h3>
              <br />

-              <n-p class="timeline-desc">{{
+              <n-p style="font-size: 18px" class="timeline-desc">{{
                $t("COMPANYOVERVIEW.TITLEFOUR.paragraphTwo.ONE")
              }}</n-p>
              <br />

-              <n-p class="timeline-desc">{{
+              <n-p style="font-size: 18px" class="timeline-desc">{{
                $t("COMPANYOVERVIEW.TITLEFOUR.paragraphTwo.TWO")
              }}</n-p>
            </div>
@ -104,12 +87,12 @@
              }}</n-h3>
              <br />

-              <n-p class="timeline-desc">{{
+              <n-p style="font-size: 18px" class="timeline-desc">{{
                $t("COMPANYOVERVIEW.TITLEFOUR.paragraphTHREE.ONE")
              }}</n-p>
              <br />

-              <n-p class="timeline-desc">{{
+              <n-p style="font-size: 18px" class="timeline-desc">{{
                $t("COMPANYOVERVIEW.TITLEFOUR.paragraphTHREE.TWO")
              }}</n-p>
            </div>
@ -124,12 +107,12 @@
              }}</n-h3>
              <br />

-              <n-p class="timeline-desc">{{
+              <n-p style="font-size: 18px" class="timeline-desc">{{
                $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFOUR.ONE")
              }}</n-p>
              <br />

-              <n-p class="timeline-desc">{{
+              <n-p style="font-size: 18px" class="timeline-desc">{{
                $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFOUR.TWO")
              }}</n-p>
            </div>
@ -144,27 +127,27 @@
              }}</n-h3>
              <br />

-              <n-p class="timeline-desc">{{
+              <n-p style="font-size: 18px" class="timeline-desc">{{
                $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.ONE")
              }}</n-p>
              <br />

-              <n-p class="timeline-desc">{{
+              <n-p style="font-size: 18px" class="timeline-desc">{{
                $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.TWO")
              }}</n-p>
              <br />

-              <n-p class="timeline-desc">{{
+              <n-p style="font-size: 18px" class="timeline-desc">{{
                $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.THREE")
              }}</n-p>
              <br />

-              <n-p class="timeline-desc">{{
+              <n-p style="font-size: 18px" class="timeline-desc">{{
                $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.FOUR")
              }}</n-p>
              <br />

-              <n-p class="timeline-desc">{{
+              <n-p style="font-size: 18px" class="timeline-desc">{{
                $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.FIVE")
              }}</n-p>
            </div>
@ -173,15 +156,18 @@
      </section>

      <!-- 成就部分 -->
-      <section class="achievement-section" v-motion-fade>
-        <n-h2 class="section-title">{{
-          $t("COMPANYOVERVIEW.TITLEFIVE.TITLE")
-        }}</n-h2>
-        <br />

-        <n-p class="section-content">{{
-          $t("COMPANYOVERVIEW.TITLEFIVE.CONTENT")
-        }}</n-p>
+      <section class="mission-section">
+        <h1 class="section-title">
+          {{ $t("COMPANYOVERVIEW.TITLEFIVE.TITLE") }}
+        </h1>
+        <div class="mission-cards">
+          <n-card hoverable class="mission-card" v-motion-pop>
+            <n-p style="font-size: 18px" class="card-content">{{
+              $t("COMPANYOVERVIEW.TITLEFIVE.CONTENT")
+            }}</n-p>
+          </n-card>
+        </div>
      </section>
    </div>
  </div>
@ -210,7 +196,7 @@ const stats = ref([
 .company-overview {
  max-width: 1200px;
  margin: 0 auto;
-  padding: 0 20px;
+  /* padding: 0 20px; */
 }

 /* 顶部大图区域 */
@ -242,7 +228,7 @@ const stats = ref([
 }

 .section-title {
-  font-size: 2.2rem;
+  font-size: 2.5rem;
  margin-bottom: 30px;
  position: relative;
  display: inline-block;
--- a/src/views/companyoverview/size375/index.vue
+++ b/src/views/companyoverview/size375/index.vue
@ -1,26 +1,18 @@
 <template>
  <div class="home-page">
    <div class="company-overview">
-      <!-- 顶部大图区域 -->
-      <div class="hero-section">
-        <transition name="fade-up" appear>
-          <n-h1 class="hero-title">{{
-            $t("COMPANYOVERVIEW.TITLETWO.TITLE")
-          }}</n-h1>
-        </transition>
-      </div>
-
-      <!-- 公司简介部分 -->
      <!-- 公司概况 -->
      <section
        class="company-overview"
-        style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
+        style="max-width: 1200px; margin: 60px auto"
      >
-        <h2 class="section-title">
+        <h1 class="section-title">
          {{ $t("COMPANYOVERVIEW.TITLETWO.TITLE") }}
-        </h2>
+        </h1>
        <div class="content-block">
-          <p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENT") }}</p>
+          <div style="font-size: 18px">
+            {{ $t("COMPANYOVERVIEW.TITLETWO.CONTENT") }}
+          </div>
          <!-- <p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTWO") }}</p>
          <p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTHREE") }}</p> -->
        </div>
@ -30,19 +22,12 @@
      <section class="mission-section">
        <div class="mission-cards">
          <n-card hoverable class="mission-card" v-motion-pop>
-            <n-h3 class="card-title">{{
-              $t("COMPANYOVERVIEW.TITLETHREE.TITLE")
-            }}</n-h3>
-            <n-p class="card-content">{{
-              $t("COMPANYOVERVIEW.TITLETHREE.CONTENT")
-            }}</n-p>
-          </n-card>
+            <h1 class="section-title">
+              {{ $t("COMPANYOVERVIEW.TITLETHREE.TITLE") }}
+            </h1>
+            <br />

-          <n-card hoverable class="mission-card" v-motion-pop>
-            <n-h3 class="card-title">{{
-              $t("COMPANYOVERVIEW.TITLETHREE.TITLE")
-            }}</n-h3>
-            <n-p class="card-content">{{
+            <n-p style="font-size: 18px" class="card-content">{{
              $t("COMPANYOVERVIEW.TITLETHREE.CONTENTTWO")
            }}</n-p>
          </n-card>
@ -64,12 +49,12 @@
                $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADING")
              }}</n-h3>
              <br />
-              <n-p class="timeline-desc">{{
+              <n-p style="font-size: 18px" class="timeline-desc">{{
                $t("COMPANYOVERVIEW.TITLEFOUR.paragraph.ONE")
              }}</n-p>
              <br />

-              <n-p class="timeline-desc">{{
+              <n-p style="font-size: 18px" class="timeline-desc">{{
                $t("COMPANYOVERVIEW.TITLEFOUR.paragraph.TWO")
              }}</n-p>
            </div>
@ -84,12 +69,12 @@
              }}</n-h3>
              <br />

-              <n-p class="timeline-desc">{{
+              <n-p style="font-size: 18px" class="timeline-desc">{{
                $t("COMPANYOVERVIEW.TITLEFOUR.paragraphTwo.ONE")
              }}</n-p>
              <br />

-              <n-p class="timeline-desc">{{
+              <n-p style="font-size: 18px" class="timeline-desc">{{
                $t("COMPANYOVERVIEW.TITLEFOUR.paragraphTwo.TWO")
              }}</n-p>
            </div>
@ -104,12 +89,12 @@
              }}</n-h3>
              <br />

-              <n-p class="timeline-desc">{{
+              <n-p style="font-size: 18px" class="timeline-desc">{{
                $t("COMPANYOVERVIEW.TITLEFOUR.paragraphTHREE.ONE")
              }}</n-p>
              <br />

-              <n-p class="timeline-desc">{{
+              <n-p style="font-size: 18px" class="timeline-desc">{{
                $t("COMPANYOVERVIEW.TITLEFOUR.paragraphTHREE.TWO")
              }}</n-p>
            </div>
@ -124,12 +109,12 @@
              }}</n-h3>
              <br />

-              <n-p class="timeline-desc">{{
+              <n-p style="font-size: 18px" class="timeline-desc">{{
                $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFOUR.ONE")
              }}</n-p>
              <br />

-              <n-p class="timeline-desc">{{
+              <n-p style="font-size: 18px" class="timeline-desc">{{
                $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFOUR.TWO")
              }}</n-p>
            </div>
@ -144,27 +129,27 @@
              }}</n-h3>
              <br />

-              <n-p class="timeline-desc">{{
+              <n-p style="font-size: 18px" class="timeline-desc">{{
                $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.ONE")
              }}</n-p>
              <br />

-              <n-p class="timeline-desc">{{
+              <n-p style="font-size: 18px" class="timeline-desc">{{
                $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.TWO")
              }}</n-p>
              <br />

-              <n-p class="timeline-desc">{{
+              <n-p style="font-size: 18px" class="timeline-desc">{{
                $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.THREE")
              }}</n-p>
              <br />

-              <n-p class="timeline-desc">{{
+              <n-p style="font-size: 18px" class="timeline-desc">{{
                $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.FOUR")
              }}</n-p>
              <br />

-              <n-p class="timeline-desc">{{
+              <n-p style="font-size: 18px" class="timeline-desc">{{
                $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.FIVE")
              }}</n-p>
            </div>
@ -173,15 +158,17 @@
      </section>

      <!-- 成就部分 -->
-      <section class="achievement-section" v-motion-fade>
-        <n-h2 class="section-title">{{
-          $t("COMPANYOVERVIEW.TITLEFIVE.TITLE")
-        }}</n-h2>
-        <br />
-
-        <n-p class="section-content">{{
-          $t("COMPANYOVERVIEW.TITLEFIVE.CONTENT")
-        }}</n-p>
+      <section class="mission-section">
+        <h1 class="section-title">
+          {{ $t("COMPANYOVERVIEW.TITLEFIVE.TITLE") }}
+        </h1>
+        <div class="mission-cards">
+          <n-card hoverable class="mission-card" v-motion-pop>
+            <n-p style="font-size: 18px" class="card-content">{{
+              $t("COMPANYOVERVIEW.TITLEFIVE.CONTENT")
+            }}</n-p>
+          </n-card>
+        </div>
      </section>
    </div>
  </div>
@ -209,7 +196,7 @@ const stats = ref([
 }
 .company-overview {
  margin: 0 auto;
-  padding: 20px;
+  padding: 0 20px;
 }

 /* 顶部大图区域 */
@ -241,7 +228,7 @@ const stats = ref([
 }

 .section-title {
-  font-size: 2.2rem;
+  font-size: 2.5rem;
  margin-bottom: 30px;
  position: relative;
  display: inline-block;
--- a/src/views/companyoverview/size768/index.vue
+++ b/src/views/companyoverview/size768/index.vue
@ -1,26 +1,18 @@
 <template>
  <div class="home-page">
    <div class="company-overview">
-      <!-- 顶部大图区域 -->
-      <div class="hero-section">
-        <transition name="fade-up" appear>
-          <n-h1 class="hero-title">{{
-            $t("COMPANYOVERVIEW.TITLETWO.TITLE")
-          }}</n-h1>
-        </transition>
-      </div>
-
-      <!-- 公司简介部分 -->
      <!-- 公司概况 -->
      <section
        class="company-overview"
-        style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
+        style="max-width: 1200px; margin: 60px auto"
      >
-        <h2 class="section-title">
+        <h1 class="section-title">
          {{ $t("COMPANYOVERVIEW.TITLETWO.TITLE") }}
-        </h2>
+        </h1>
        <div class="content-block">
-          <p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENT") }}</p>
+          <div style="font-size: 18px">
+            {{ $t("COMPANYOVERVIEW.TITLETWO.CONTENT") }}
+          </div>
          <!-- <p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTWO") }}</p>
          <p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTHREE") }}</p> -->
        </div>
@ -28,21 +20,12 @@

      <!-- 使命愿景卡片 -->
      <section class="mission-section">
+        <h1 class="section-title">
+          {{ $t("COMPANYOVERVIEW.TITLETHREE.TITLE") }}
+        </h1>
        <div class="mission-cards">
          <n-card hoverable class="mission-card" v-motion-pop>
-            <n-h3 class="card-title">{{
-              $t("COMPANYOVERVIEW.TITLETHREE.TITLE")
-            }}</n-h3>
-            <n-p class="card-content">{{
-              $t("COMPANYOVERVIEW.TITLETHREE.CONTENT")
-            }}</n-p>
-          </n-card>
-
-          <n-card hoverable class="mission-card" v-motion-pop>
-            <n-h3 class="card-title">{{
-              $t("COMPANYOVERVIEW.TITLETHREE.TITLE")
-            }}</n-h3>
-            <n-p class="card-content">{{
+            <n-p style="font-size: 18px" class="card-content">{{
              $t("COMPANYOVERVIEW.TITLETHREE.CONTENTTWO")
            }}</n-p>
          </n-card>
@ -52,9 +35,9 @@
      <!-- 里程碑时间轴 -->
      <!-- 里程碑时间轴 -->
      <section class="section timeline-section">
-        <n-h2 class="section-title">{{
-          $t("COMPANYOVERVIEW.TITLEFOUR.TITLE")
-        }}</n-h2>
+        <h1 class="section-title">
+          {{ $t("COMPANYOVERVIEW.TITLEFOUR.TITLE") }}
+        </h1>
        <div class="timeline">
          <!-- 1977-2015 -->
          <div class="timeline-item" v-motion-slide-visible-once-bottom>
@ -64,12 +47,12 @@
                $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADING")
              }}</n-h3>
              <br />
-              <n-p class="timeline-desc">{{
+              <n-p style="font-size: 18px" class="timeline-desc">{{
                $t("COMPANYOVERVIEW.TITLEFOUR.paragraph.ONE")
              }}</n-p>
              <br />

-              <n-p class="timeline-desc">{{
+              <n-p style="font-size: 18px" class="timeline-desc">{{
                $t("COMPANYOVERVIEW.TITLEFOUR.paragraph.TWO")
              }}</n-p>
            </div>
@ -84,12 +67,12 @@
              }}</n-h3>
              <br />

-              <n-p class="timeline-desc">{{
+              <n-p style="font-size: 18px" class="timeline-desc">{{
                $t("COMPANYOVERVIEW.TITLEFOUR.paragraphTwo.ONE")
              }}</n-p>
              <br />

-              <n-p class="timeline-desc">{{
+              <n-p style="font-size: 18px" class="timeline-desc">{{
                $t("COMPANYOVERVIEW.TITLEFOUR.paragraphTwo.TWO")
              }}</n-p>
            </div>
@ -104,12 +87,12 @@
              }}</n-h3>
              <br />

-              <n-p class="timeline-desc">{{
+              <n-p style="font-size: 18px" class="timeline-desc">{{
                $t("COMPANYOVERVIEW.TITLEFOUR.paragraphTHREE.ONE")
              }}</n-p>
              <br />

-              <n-p class="timeline-desc">{{
+              <n-p style="font-size: 18px" class="timeline-desc">{{
                $t("COMPANYOVERVIEW.TITLEFOUR.paragraphTHREE.TWO")
              }}</n-p>
            </div>
@ -124,12 +107,12 @@
              }}</n-h3>
              <br />

-              <n-p class="timeline-desc">{{
+              <n-p style="font-size: 18px" class="timeline-desc">{{
                $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFOUR.ONE")
              }}</n-p>
              <br />

-              <n-p class="timeline-desc">{{
+              <n-p style="font-size: 18px" class="timeline-desc">{{
                $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFOUR.TWO")
              }}</n-p>
            </div>
@ -144,27 +127,27 @@
              }}</n-h3>
              <br />

-              <n-p class="timeline-desc">{{
+              <n-p style="font-size: 18px" class="timeline-desc">{{
                $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.ONE")
              }}</n-p>
              <br />

-              <n-p class="timeline-desc">{{
+              <n-p style="font-size: 18px" class="timeline-desc">{{
                $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.TWO")
              }}</n-p>
              <br />

-              <n-p class="timeline-desc">{{
+              <n-p style="font-size: 18px" class="timeline-desc">{{
                $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.THREE")
              }}</n-p>
              <br />

-              <n-p class="timeline-desc">{{
+              <n-p style="font-size: 18px" class="timeline-desc">{{
                $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.FOUR")
              }}</n-p>
              <br />

-              <n-p class="timeline-desc">{{
+              <n-p style="font-size: 18px" class="timeline-desc">{{
                $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.FIVE")
              }}</n-p>
            </div>
@ -173,15 +156,17 @@
      </section>

      <!-- 成就部分 -->
-      <section class="achievement-section" v-motion-fade>
-        <n-h2 class="section-title">{{
-          $t("COMPANYOVERVIEW.TITLEFIVE.TITLE")
-        }}</n-h2>
-        <br />
-
-        <n-p class="section-content">{{
-          $t("COMPANYOVERVIEW.TITLEFIVE.CONTENT")
-        }}</n-p>
+      <section class="mission-section">
+        <h1 class="section-title">
+          {{ $t("COMPANYOVERVIEW.TITLEFIVE.TITLE") }}
+        </h1>
+        <div class="mission-cards">
+          <n-card hoverable class="mission-card" v-motion-pop>
+            <n-p style="font-size: 18px" class="card-content">{{
+              $t("COMPANYOVERVIEW.TITLEFIVE.CONTENT")
+            }}</n-p>
+          </n-card>
+        </div>
      </section>
    </div>
  </div>
@ -202,14 +187,14 @@ const stats = ref([

 <style scoped>
 .home-page {
-  background-image: url("@/assets/image/bg-mobile.png");
+  background-image: url("@/assets/image/bg.png");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
 }
 .company-overview {
  margin: 0 auto;
-  padding: 20px;
+  /* padding: 0 20px; */
 }

 /* 顶部大图区域 */
@ -241,7 +226,7 @@ const stats = ref([
 }

 .section-title {
-  font-size: 2.2rem;
+  font-size: 2.5rem;
  margin-bottom: 30px;
  position: relative;
  display: inline-block;
--- a/src/views/email-alerts/size1440/index.vue
+++ b/src/views/email-alerts/size1440/index.vue
@ -1,6 +1,6 @@
 <script setup>
 import { ref } from "vue";
-
+import axios from 'axios'
 const form = ref({
  firstName: "",
  lastName: "",
@ -11,9 +11,15 @@ const form = ref({
 });
 const submitted = ref(false);

-function handleSubmit(e) {
+async function handleSubmit(e) {
  e.preventDefault();
-  submitted.value = true;
+  const res = await axios.post('https://erpapi-out.szjixun.cn/api/stock/submit/data', form.value)
+  if(res.data.status === 0){
+    submitted.value = true;
+  }else{
+ 
+  }
+
 }
 </script>

--- a/src/views/email-alerts/size1920/index.vue
+++ b/src/views/email-alerts/size1920/index.vue
@ -1,6 +1,7 @@
 <script setup>
 import { ref } from "vue";

+import axios from 'axios'
 const form = ref({
  firstName: "",
  lastName: "",
@ -11,9 +12,15 @@ alertType: "all"
 });
 const submitted = ref(false);

-function handleSubmit(e) {
+async function handleSubmit(e) {
  e.preventDefault();
-  submitted.value = true;
+  const res = await axios.post('https://erpapi-out.szjixun.cn/api/stock/submit/data', form.value)
+  if(res.data.status === 0){
+    submitted.value = true;
+  }else{
+ 
+  }
+
 }
 </script>

--- a/src/views/email-alerts/size375/index.vue
+++ b/src/views/email-alerts/size375/index.vue
@ -1,6 +1,6 @@
 <script setup>
 import { ref } from 'vue';
-
+import axios from 'axios'
 const form = ref({
  firstName: '',
  lastName: '',
@ -11,9 +11,15 @@ const form = ref({
 });
 const submitted = ref(false);

-function handleSubmit(e) {
+async function handleSubmit(e) {
  e.preventDefault();
-  submitted.value = true;
+  const res = await axios.post('https://erpapi-out.szjixun.cn/api/stock/submit/data', form.value)
+  if(res.data.status === 0){
+    submitted.value = true;
+  }else{
+ 
+  }
+
 }
 </script>

--- a/src/views/email-alerts/size768/index.vue
+++ b/src/views/email-alerts/size768/index.vue
@ -1,7 +1,7 @@
 <script setup>
 import { NCarousel, NDivider, NMarquee, NPopselect } from "naive-ui";
 import { onUnmounted, ref, watch, onMounted, computed } from "vue";
-
+import axios from 'axios'
 const form = ref({
  firstName: '',
  lastName: '',
@ -12,9 +12,15 @@ const form = ref({
 });
 const submitted = ref(false);

-function handleSubmit(e) {
+async function handleSubmit(e) {
  e.preventDefault();
-  submitted.value = true;
+  const res = await axios.post('https://erpapi-out.szjixun.cn/api/stock/submit/data', form.value)
+  if(res.data.status === 0){
+    submitted.value = true;
+  }else{
+ 
+  }
+
 }
 </script>

--- a/src/views/events-calendar/size1920/index.vue
+++ b/src/views/events-calendar/size1920/index.vue
@ -40,7 +40,7 @@ const state = reactive({

 const handleSearch = () => {
  // 搜索处理逻辑
-  console.log('搜索:', state.selectedDateValue)
+  // console.log('搜索:', state.selectedDateValue)
 }
 </script>

--- a/src/views/events-calendar/size375/index.vue
+++ b/src/views/events-calendar/size375/index.vue
@ -40,7 +40,7 @@ const state = reactive({

 const handleSearch = () => {
  // 搜索处理逻辑
-  console.log('搜索:', state.selectedDateValue)
+  // console.log('搜索:', state.selectedDateValue)
 }
 </script>

--- a/src/views/financialinformation/annualreports/index.vue
+++ b/src/views/financialinformation/annualreports/index.vue
@ -0,0 +1,34 @@
+<script setup>
+import { computed } from "vue";
+import { useWindowSize } from "@vueuse/core";
+
+import size375 from "@/views/financialinformation/annualreports/size375/index.vue";
+import size768 from "@/views/financialinformation/annualreports/size768/index.vue";
+import size1440 from "@/views/financialinformation/annualreports/size1440/index.vue";
+import size1920 from "@/views/financialinformation/annualreports/size1920/index.vue";
+import { useRouter } from "vue-router";
+import { useI18n } from "vue-i18n";
+
+const router = useRouter();
+const { width } = useWindowSize();
+const { t } = useI18n();
+
+const viewComponent = computed(() => {
+  const viewWidth = width.value;
+  if (viewWidth <= 450) {
+    return size375;
+  } else if (viewWidth <= 1100) {
+    return size768;
+  } else if (viewWidth <= 1500) {
+    return size1440;
+  } else if (viewWidth <= 1920 || viewWidth > 1920) {
+    return size1920;
+  }
+});
+</script>
+
+<template>
+  <component :is="viewComponent" />
+</template>
+
+<style scoped lang="scss"></style>
--- a/src/views/financialinformation/annualreports/size1440/index.vue
+++ b/src/views/financialinformation/annualreports/size1440/index.vue
@ -0,0 +1,287 @@
+<template>
+  <div class="page-container">
+    <div class="financials-container">
+      <!-- 标题 -->
+      <div class="financials-title">
+        {{ t("financialinformation.secfilings.title") }}
+      </div>
+
+      <!-- 公司财务概览 -->
+      <section class="section">
+        <div class="section-title">
+          {{ t("financialinformation.secfilings.overview.title") }}
+        </div>
+        <p
+          class="overview-text"
+          v-html="t('financialinformation.secfilings.overview.desc')"
+        ></p>
+      </section>
+
+      <!-- 年度报告 -->
+      <section class="section">
+        <div class="section-title">
+          {{ t("financialinformation.secfilings.annual_reports.title") }}
+        </div>
+
+        <!-- 报告表格 -->
+        <div class="reports-table">
+          <div class="table-header">
+            <div class="column file-name">
+              {{
+                t("financialinformation.secfilings.annual_reports.file_name")
+              }}
+            </div>
+            <div class="column date">
+              {{ t("financialinformation.secfilings.annual_reports.date") }}
+            </div>
+            <div class="column download"></div>
+          </div>
+
+          <!-- 报告列表 -->
+          <div class="reports-list">
+            <div
+              class="table-row"
+              v-for="(report, index) in annualReports"
+              :key="index"
+            >
+              <div class="column file-name">{{ report.fileName }}</div>
+              <div class="column date">{{ report.date }}</div>
+              <div class="column download">
+                <a :href="report.downloadUrl" class="download-link">{{
+                  t("financialinformation.secfilings.annual_reports.view")
+                }}</a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
+// 年度报告数据
+const annualReports = ref([
+  {
+    fileName: "2024 Annual Report",
+    date: "April 10, 2025",
+    downloadUrl:
+      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912625002538/fieeinc_10k.htm",
+  },
+  {
+    fileName: "2023 Annual Report",
+    date: "April 12, 2024",
+    downloadUrl:
+      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912624002449/miniminc_10k.htm",
+  },
+  {
+    fileName: "2022 Annual Report",
+    date: "March 31, 2023",
+    downloadUrl:
+      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000149315223010335/form10-k.htm",
+  },
+  {
+    fileName: "2021 Annual Report",
+    date: "March 31, 2022",
+    downloadUrl:
+      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000149315222008365/form10-k.htm",
+  },
+  {
+    fileName: "2020 Annual Report",
+    date: "April 13, 2021",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000165495421004133/zmtp_10k.htm",
+  },
+  {
+    fileName: "2019 Annual Report",
+    date: "April 15, 2020",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000165495420004069/zmtp_10k.htm",
+  },
+  {
+    fileName: "2018 Annual Report",
+    date: "April 1, 2019",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000165495419003878/zmtp_10k.htm",
+  },
+  {
+    fileName: "2017 Annual Report",
+    date: "March 30, 2018",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000165495418003402/zmtp_10k.htm",
+  },
+  {
+    fileName: "2016 Annual Report",
+    date: "March 22, 2017",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000165495417002279/zmtp_10k.htm",
+  },
+  {
+    fileName: "2015 Annual Report",
+    date: "March 15, 2016",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000135448816006596/zmtp_10k.htm",
+  },
+  {
+    fileName: "2014 Annual Report",
+    date: "March 24, 2015",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000135448815001308/zmtp_10k.htm",
+  },
+  {
+    fileName: "2013 Annual Report",
+    date: "March 31, 2014",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000135448814001518/zmpt_10k.htm",
+  },
+  {
+    fileName: "2012 Annual Report",
+    date: "March 29, 2013",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000135448813001584/zmtp_10k.htm",
+  },
+  {
+    fileName: "2011 Annual Report",
+    date: "March 30, 2012",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000135448812001548/zoom_10k.htm",
+  },
+  {
+    fileName: "2010 Annual Report",
+    date: "March 29, 2011",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000135448811000969/zmtp_10k.htm",
+  },
+  {
+    fileName: "2009 Annual Report",
+    date: "March 31, 2010",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000135448810001043/zmtp_10k.htm",
+  },
+]);
+</script>
+
+<style scoped lang="scss">
+.page-container {
+  background-image: url("@/assets/image/bg.png");
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+.financials-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.financials-title {
+  font-size: 40px;
+  text-align: center;
+  margin-bottom: 60px;
+  color: #333;
+}
+
+.section {
+  margin-bottom: 60px;
+}
+
+.section-title {
+  font-size: 18px;
+  margin-bottom: 20px;
+  color: #333;
+}
+
+.overview-text {
+  font-size: 16px;
+  line-height: 1.6;
+  color: #333;
+  margin-bottom: 30px;
+}
+
+.tabs {
+  display: flex;
+  margin-bottom: 20px;
+}
+
+.tab {
+  padding: 10px 20px;
+  font-weight: bold;
+  cursor: pointer;
+  border-bottom: 2px solid transparent;
+
+  &.active {
+    border-bottom: 2px solid #333;
+  }
+}
+
+.reports-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.table-header {
+  display: flex;
+  padding: 10px 0;
+  border-bottom: 1px solid #ccc;
+  font-weight: bold;
+  justify-content: space-between;
+}
+
+.table-row {
+  display: flex;
+  padding: 15px 0;
+  border-bottom: 1px solid #eee;
+  align-items: center;
+  justify-content: space-between;
+}
+.reports-list {
+  // max-height: 600px;
+  // overflow-y: auto;
+}
+.column {
+  &.file-name {
+    width: 25%;
+  }
+  &.date {
+    width: 25%;
+  }
+
+  &.download {
+    width: 25%;
+    text-align: right;
+    margin-right: 50px;
+  }
+}
+
+.pdf-icon {
+  width: 36px;
+  height: 36px;
+}
+
+.download-link {
+  color: #0078d7;
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.sec-text {
+  font-size: 16px;
+  line-height: 1.6;
+}
+
+.link {
+  color: #f00;
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+</style>
--- a/src/views/financialinformation/annualreports/size1920/index.vue
+++ b/src/views/financialinformation/annualreports/size1920/index.vue
@ -0,0 +1,287 @@
+<template>
+  <div class="page-container">
+    <div class="financials-container">
+      <!-- 标题 -->
+      <div class="financials-title">
+        {{ t("financialinformation.secfilings.title") }}
+      </div>
+
+      <!-- 公司财务概览 -->
+      <section class="section">
+        <div class="section-title">
+          {{ t("financialinformation.secfilings.overview.title") }}
+        </div>
+        <p
+          class="overview-text"
+          v-html="t('financialinformation.secfilings.overview.desc')"
+        ></p>
+      </section>
+
+      <!-- 年度报告 -->
+      <section class="section">
+        <div class="section-title">
+          {{ t("financialinformation.secfilings.annual_reports.title") }}
+        </div>
+
+        <!-- 报告表格 -->
+        <div class="reports-table">
+          <div class="table-header">
+            <div class="column file-name">
+              {{
+                t("financialinformation.secfilings.annual_reports.file_name")
+              }}
+            </div>
+            <div class="column date">
+              {{ t("financialinformation.secfilings.annual_reports.date") }}
+            </div>
+            <div class="column download"></div>
+          </div>
+
+          <!-- 报告列表 -->
+          <div class="reports-list">
+            <div
+              class="table-row"
+              v-for="(report, index) in annualReports"
+              :key="index"
+            >
+              <div class="column file-name">{{ report.fileName }}</div>
+              <div class="column date">{{ report.date }}</div>
+              <div class="column download">
+                <a :href="report.downloadUrl" class="download-link">{{
+                  t("financialinformation.secfilings.annual_reports.view")
+                }}</a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
+// 年度报告数据
+const annualReports = ref([
+  {
+    fileName: "2024 Annual Report",
+    date: "April 10, 2025",
+    downloadUrl:
+      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912625002538/fieeinc_10k.htm",
+  },
+  {
+    fileName: "2023 Annual Report",
+    date: "April 12, 2024",
+    downloadUrl:
+      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912624002449/miniminc_10k.htm",
+  },
+  {
+    fileName: "2022 Annual Report",
+    date: "March 31, 2023",
+    downloadUrl:
+      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000149315223010335/form10-k.htm",
+  },
+  {
+    fileName: "2021 Annual Report",
+    date: "March 31, 2022",
+    downloadUrl:
+      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000149315222008365/form10-k.htm",
+  },
+  {
+    fileName: "2020 Annual Report",
+    date: "April 13, 2021",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000165495421004133/zmtp_10k.htm",
+  },
+  {
+    fileName: "2019 Annual Report",
+    date: "April 15, 2020",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000165495420004069/zmtp_10k.htm",
+  },
+  {
+    fileName: "2018 Annual Report",
+    date: "April 1, 2019",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000165495419003878/zmtp_10k.htm",
+  },
+  {
+    fileName: "2017 Annual Report",
+    date: "March 30, 2018",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000165495418003402/zmtp_10k.htm",
+  },
+  {
+    fileName: "2016 Annual Report",
+    date: "March 22, 2017",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000165495417002279/zmtp_10k.htm",
+  },
+  {
+    fileName: "2015 Annual Report",
+    date: "March 15, 2016",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000135448816006596/zmtp_10k.htm",
+  },
+  {
+    fileName: "2014 Annual Report",
+    date: "March 24, 2015",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000135448815001308/zmtp_10k.htm",
+  },
+  {
+    fileName: "2013 Annual Report",
+    date: "March 31, 2014",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000135448814001518/zmpt_10k.htm",
+  },
+  {
+    fileName: "2012 Annual Report",
+    date: "March 29, 2013",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000135448813001584/zmtp_10k.htm",
+  },
+  {
+    fileName: "2011 Annual Report",
+    date: "March 30, 2012",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000135448812001548/zoom_10k.htm",
+  },
+  {
+    fileName: "2010 Annual Report",
+    date: "March 29, 2011",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000135448811000969/zmtp_10k.htm",
+  },
+  {
+    fileName: "2009 Annual Report",
+    date: "March 31, 2010",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000135448810001043/zmtp_10k.htm",
+  },
+]);
+</script>
+
+<style scoped lang="scss">
+.page-container {
+  background-image: url("@/assets/image/bg.png");
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+.financials-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.financials-title {
+  font-size: 40px;
+  text-align: center;
+  margin-bottom: 60px;
+  color: #333;
+}
+
+.section {
+  margin-bottom: 60px;
+}
+
+.section-title {
+  font-size: 18px;
+  margin-bottom: 20px;
+  color: #333;
+}
+
+.overview-text {
+  font-size: 16px;
+  line-height: 1.6;
+  color: #333;
+  margin-bottom: 30px;
+}
+
+.tabs {
+  display: flex;
+  margin-bottom: 20px;
+}
+
+.tab {
+  padding: 10px 20px;
+  font-weight: bold;
+  cursor: pointer;
+  border-bottom: 2px solid transparent;
+
+  &.active {
+    border-bottom: 2px solid #333;
+  }
+}
+
+.reports-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.table-header {
+  display: flex;
+  padding: 10px 0;
+  border-bottom: 1px solid #ccc;
+  font-weight: bold;
+  justify-content: space-between;
+}
+
+.table-row {
+  display: flex;
+  padding: 15px 0;
+  border-bottom: 1px solid #eee;
+  align-items: center;
+  justify-content: space-between;
+}
+.reports-list {
+  // max-height: 600px;
+  // overflow-y: auto;
+}
+.column {
+  &.file-name {
+    width: 25%;
+  }
+  &.date {
+    width: 25%;
+  }
+
+  &.download {
+    width: 25%;
+    text-align: right;
+    margin-right: 50px;
+  }
+}
+
+.pdf-icon {
+  width: 36px;
+  height: 36px;
+}
+
+.download-link {
+  color: #0078d7;
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.sec-text {
+  font-size: 16px;
+  line-height: 1.6;
+}
+
+.link {
+  color: #f00;
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+</style>
--- a/src/views/financialinformation/annualreports/size375/index.vue
+++ b/src/views/financialinformation/annualreports/size375/index.vue
@ -0,0 +1,286 @@
+<template>
+  <div class="page-container">
+    <div class="financials-container">
+      <!-- 标题 -->
+      <div class="financials-title">
+        {{ t("financialinformation.secfilings.title") }}
+      </div>
+
+      <!-- 公司财务概览 -->
+      <section class="section">
+        <div class="section-title">
+          {{ t("financialinformation.secfilings.overview.title") }}
+        </div>
+        <p
+          class="overview-text"
+          v-html="t('financialinformation.secfilings.overview.desc')"
+        ></p>
+      </section>
+
+      <!-- 年度报告 -->
+      <section class="section">
+        <div class="section-title">
+          {{ t("financialinformation.secfilings.annual_reports.title") }}
+        </div>
+
+        <!-- 报告表格 -->
+        <div class="reports-table">
+          <div class="table-header">
+            <div class="column file-name">
+              {{
+                t("financialinformation.secfilings.annual_reports.file_name")
+              }}
+            </div>
+            <div class="column date">
+              {{ t("financialinformation.secfilings.annual_reports.date") }}
+            </div>
+            <div class="column download"></div>
+          </div>
+
+          <!-- 报告列表 -->
+          <div class="reports-list">
+            <div
+              class="table-row"
+              v-for="(report, index) in annualReports"
+              :key="index"
+            >
+              <div class="column file-name">{{ report.fileName }}</div>
+              <div class="column date">{{ report.date }}</div>
+              <div class="column download">
+                <a :href="report.downloadUrl" class="download-link">{{
+                  t("financialinformation.secfilings.annual_reports.view")
+                }}</a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
+
+// 年度报告数据
+const annualReports = ref([
+  {
+    fileName: "2024 Annual Report",
+    date: "April 10, 2025",
+    downloadUrl:
+      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912625002538/fieeinc_10k.htm",
+  },
+  {
+    fileName: "2023 Annual Report",
+    date: "April 12, 2024",
+    downloadUrl:
+      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912624002449/miniminc_10k.htm",
+  },
+  {
+    fileName: "2022 Annual Report",
+    date: "March 31, 2023",
+    downloadUrl:
+      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000149315223010335/form10-k.htm",
+  },
+  {
+    fileName: "2021 Annual Report",
+    date: "March 31, 2022",
+    downloadUrl:
+      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000149315222008365/form10-k.htm",
+  },
+  {
+    fileName: "2020 Annual Report",
+    date: "April 13, 2021",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000165495421004133/zmtp_10k.htm",
+  },
+  {
+    fileName: "2019 Annual Report",
+    date: "April 15, 2020",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000165495420004069/zmtp_10k.htm",
+  },
+  {
+    fileName: "2018 Annual Report",
+    date: "April 1, 2019",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000165495419003878/zmtp_10k.htm",
+  },
+  {
+    fileName: "2017 Annual Report",
+    date: "March 30, 2018",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000165495418003402/zmtp_10k.htm",
+  },
+  {
+    fileName: "2016 Annual Report",
+    date: "March 22, 2017",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000165495417002279/zmtp_10k.htm",
+  },
+  {
+    fileName: "2015 Annual Report",
+    date: "March 15, 2016",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000135448816006596/zmtp_10k.htm",
+  },
+  {
+    fileName: "2014 Annual Report",
+    date: "March 24, 2015",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000135448815001308/zmtp_10k.htm",
+  },
+  {
+    fileName: "2013 Annual Report",
+    date: "March 31, 2014",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000135448814001518/zmpt_10k.htm",
+  },
+  {
+    fileName: "2012 Annual Report",
+    date: "March 29, 2013",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000135448813001584/zmtp_10k.htm",
+  },
+  {
+    fileName: "2011 Annual Report",
+    date: "March 30, 2012",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000135448812001548/zoom_10k.htm",
+  },
+  {
+    fileName: "2010 Annual Report",
+    date: "March 29, 2011",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000135448811000969/zmtp_10k.htm",
+  },
+  {
+    fileName: "2009 Annual Report",
+    date: "March 31, 2010",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000135448810001043/zmtp_10k.htm",
+  },
+]);
+</script>
+
+<style scoped lang="scss">
+.page-container {
+  background-image: url("@/assets/image/bg-375.png");
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+.financials-container {
+  margin: 0 auto;
+  padding: 80px;
+}
+
+.financials-title {
+  font-size: 113px;
+  font-weight: 600;
+  text-align: center;
+  margin-bottom: 60px;
+  color: #333;
+}
+
+.section {
+  margin-bottom: 60px;
+}
+
+.section-title {
+  font-size: 92px;
+  font-weight: 600;
+  margin-bottom: 20px;
+  color: #333;
+}
+
+.overview-text {
+  font-size: 72px;
+  line-height: 1.6;
+  color: #333;
+  margin-bottom: 30px;
+}
+
+.tabs {
+  display: flex;
+  margin-bottom: 20px;
+}
+
+.tab {
+  padding: 10px 20px;
+  font-weight: bold;
+  cursor: pointer;
+  border-bottom: 2px solid transparent;
+
+  &.active {
+    border-bottom: 2px solid #333;
+  }
+}
+
+.reports-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.table-header {
+  display: flex;
+  padding: 10px 0;
+  border-bottom: 1px solid #ccc;
+  font-weight: bold;
+  justify-content: space-between;
+}
+
+.table-row {
+  display: flex;
+  padding: 45px 0;
+  border-bottom: 1px solid #eee;
+  align-items: center;
+  justify-content: space-between;
+}
+.reports-list {
+  // max-height: 600px;
+  // overflow-y: auto;
+}
+.column {
+  &.file-name {
+    width: 35%;
+  }
+  &.date {
+    width: 35%;
+  }
+  &.download {
+    margin-right: 100px;
+  }
+}
+
+.pdf-icon {
+  width: 36px;
+  height: 36px;
+}
+
+.download-link {
+  color: #0078d7;
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.sec-text {
+  font-size: 72px;
+  line-height: 1.6;
+}
+
+.link {
+  color: #f00;
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+</style>
--- a/src/views/financialinformation/annualreports/size768/index.vue
+++ b/src/views/financialinformation/annualreports/size768/index.vue
@ -0,0 +1,287 @@
+<template>
+  <div class="page-container">
+    <div class="financials-container">
+      <!-- 标题 -->
+      <div class="financials-title">
+        {{ t("financialinformation.secfilings.title") }}
+      </div>
+
+      <!-- 公司财务概览 -->
+      <section class="section">
+        <div class="section-title">
+          {{ t("financialinformation.secfilings.overview.title") }}
+        </div>
+        <p
+          class="overview-text"
+          v-html="t('financialinformation.secfilings.overview.desc')"
+        ></p>
+      </section>
+
+      <!-- 年度报告 -->
+      <section class="section">
+        <div class="section-title">
+          {{ t("financialinformation.secfilings.annual_reports.title") }}
+        </div>
+
+        <!-- 报告表格 -->
+        <div class="reports-table">
+          <div class="table-header">
+            <div class="column file-name">
+              {{
+                t("financialinformation.secfilings.annual_reports.file_name")
+              }}
+            </div>
+            <div class="column date">
+              {{ t("financialinformation.secfilings.annual_reports.date") }}
+            </div>
+            <div class="column download"></div>
+          </div>
+
+          <!-- 报告列表 -->
+          <div class="reports-list">
+            <div
+              class="table-row"
+              v-for="(report, index) in annualReports"
+              :key="index"
+            >
+              <div class="column file-name">{{ report.fileName }}</div>
+              <div class="column date">{{ report.date }}</div>
+              <div class="column download">
+                <a :href="report.downloadUrl" class="download-link">{{
+                  t("financialinformation.secfilings.annual_reports.view")
+                }}</a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
+// 年度报告数据
+const annualReports = ref([
+  {
+    fileName: "2024 Annual Report",
+    date: "April 10, 2025",
+    downloadUrl:
+      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912625002538/fieeinc_10k.htm",
+  },
+  {
+    fileName: "2023 Annual Report",
+    date: "April 12, 2024",
+    downloadUrl:
+      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912624002449/miniminc_10k.htm",
+  },
+  {
+    fileName: "2022 Annual Report",
+    date: "March 31, 2023",
+    downloadUrl:
+      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000149315223010335/form10-k.htm",
+  },
+  {
+    fileName: "2021 Annual Report",
+    date: "March 31, 2022",
+    downloadUrl:
+      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000149315222008365/form10-k.htm",
+  },
+  {
+    fileName: "2020 Annual Report",
+    date: "April 13, 2021",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000165495421004133/zmtp_10k.htm",
+  },
+  {
+    fileName: "2019 Annual Report",
+    date: "April 15, 2020",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000165495420004069/zmtp_10k.htm",
+  },
+  {
+    fileName: "2018 Annual Report",
+    date: "April 1, 2019",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000165495419003878/zmtp_10k.htm",
+  },
+  {
+    fileName: "2017 Annual Report",
+    date: "March 30, 2018",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000165495418003402/zmtp_10k.htm",
+  },
+  {
+    fileName: "2016 Annual Report",
+    date: "March 22, 2017",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000165495417002279/zmtp_10k.htm",
+  },
+  {
+    fileName: "2015 Annual Report",
+    date: "March 15, 2016",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000135448816006596/zmtp_10k.htm",
+  },
+  {
+    fileName: "2014 Annual Report",
+    date: "March 24, 2015",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000135448815001308/zmtp_10k.htm",
+  },
+  {
+    fileName: "2013 Annual Report",
+    date: "March 31, 2014",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000135448814001518/zmpt_10k.htm",
+  },
+  {
+    fileName: "2012 Annual Report",
+    date: "March 29, 2013",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000135448813001584/zmtp_10k.htm",
+  },
+  {
+    fileName: "2011 Annual Report",
+    date: "March 30, 2012",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000135448812001548/zoom_10k.htm",
+  },
+  {
+    fileName: "2010 Annual Report",
+    date: "March 29, 2011",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000135448811000969/zmtp_10k.htm",
+  },
+  {
+    fileName: "2009 Annual Report",
+    date: "March 31, 2010",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000135448810001043/zmtp_10k.htm",
+  },
+]);
+</script>
+
+<style scoped lang="scss">
+.page-container {
+  background-image: url("@/assets/image/bg.png");
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+.financials-container {
+  max-width: calc(100% - 300px);
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.financials-title {
+  font-size: 85px;
+  text-align: center;
+  margin-bottom: 60px;
+  color: #333;
+}
+
+.section {
+  margin-bottom: 60px;
+}
+
+.section-title {
+  font-size: 50px;
+  margin-bottom: 20px;
+  color: #333;
+}
+
+.overview-text {
+  font-size: 40px;
+  line-height: 1.6;
+  color: #333;
+  margin-bottom: 30px;
+}
+
+.tabs {
+  display: flex;
+  margin-bottom: 20px;
+}
+
+.tab {
+  padding: 10px 20px;
+  font-weight: bold;
+  cursor: pointer;
+  border-bottom: 2px solid transparent;
+
+  &.active {
+    border-bottom: 2px solid #333;
+  }
+}
+
+.reports-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.table-header {
+  display: flex;
+  padding: 10px 0;
+  border-bottom: 1px solid #ccc;
+  font-weight: bold;
+  justify-content: space-between;
+}
+
+.table-row {
+  display: flex;
+  padding: 15px 0;
+  border-bottom: 1px solid #eee;
+  align-items: center;
+  justify-content: space-between;
+}
+.reports-list {
+  // max-height: 600px;
+  // overflow-y: auto;
+}
+.column {
+  &.file-name {
+    width: 25%;
+  }
+  &.date {
+    width: 25%;
+  }
+
+  &.download {
+    width: 25%;
+    text-align: right;
+    margin-right: 50px;
+  }
+}
+
+.pdf-icon {
+  width: 36px;
+  height: 36px;
+}
+
+.download-link {
+  color: #0078d7;
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.sec-text {
+  font-size: 40px;
+  line-height: 1.6;
+}
+
+.link {
+  color: #f00;
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+</style>
--- a/src/views/financialinformation/quarterlyreports/index.vue
+++ b/src/views/financialinformation/quarterlyreports/index.vue
@ -2,10 +2,10 @@
 import { computed } from "vue";
 import { useWindowSize } from "@vueuse/core";

-import size375 from "@/views/financialinformation/quarterlyresults/size375/index.vue";
-import size768 from "@/views/financialinformation/quarterlyresults/size768/index.vue";
-import size1440 from "@/views/financialinformation/quarterlyresults/size1440/index.vue";
-import size1920 from "@/views/financialinformation/quarterlyresults/size1920/index.vue";
+import size375 from "@/views/financialinformation/quarterlyreports/size375/index.vue";
+import size768 from "@/views/financialinformation/quarterlyreports/size768/index.vue";
+import size1440 from "@/views/financialinformation/quarterlyreports/size1440/index.vue";
+import size1920 from "@/views/financialinformation/quarterlyreports/size1920/index.vue";
 import { useRouter } from "vue-router";
 import { useI18n } from "vue-i18n";

--- a/src/views/financialinformation/quarterlyreports/size1440/index.vue
+++ b/src/views/financialinformation/quarterlyreports/size1440/index.vue
@ -2,19 +2,19 @@
  <header></header>
  <main class="p-[35px] max-w-[1200px] mx-auto">
    <div class="title mb-[20px]">
-      {{ t("financialinformation.quarterlyresults.title") }}
+      {{ t("financialinformation.quarterlyreports.title") }}
    </div>
    <div class="search-container">
      <input
        type="text"
        :placeholder="
-          t('financialinformation.quarterlyresults.search.placeholder')
+          t('financialinformation.quarterlyreports.search.placeholder')
        "
        v-model="searchQuery"
        class="search-input"
      />
      <button class="search-button" @click="handleSearch">
-        {{ t("financialinformation.quarterlyresults.search.button") }}
+        {{ t("financialinformation.quarterlyreports.search.button") }}
      </button>
    </div>

@ -35,7 +35,7 @@
          style="color: #2979ff; cursor: pointer"
        >
          <img src="@/assets/image/pdf.png" alt="PDF" />
-          {{ t("financialinformation.quarterlyresults.download") }}
+          {{ t("financialinformation.quarterlyreports.download") }}
        </div>
      </div>
    </div>
@ -98,232 +98,232 @@ const searchQuery = ref("");
 const state = reactive({
  list: [
    {
-      title: "2024 Q3 Quarterly Results",
+      title: "2024 Q3 Quarterly Reports",
      description: "Third Quarter 2024 Financial Results",
      url: quarterlyPdf2024Q3,
    },
    {
-      title: "2024 Q2 Quarterly Results",
+      title: "2024 Q2 Quarterly Reports",
      description: "Second Quarter 2024 Financial Results",
      url: quarterlyPdf2024Q2,
    },
    {
-      title: "2024 Q1 Quarterly Results",
+      title: "2024 Q1 Quarterly Reports",
      description: "First Quarter 2024 Financial Results",
      url: quarterlyPdf2024Q1,
    },
    {
-      title: "2023 Q3 Quarterly Results",
+      title: "2023 Q3 Quarterly Reports",
      description: "Third Quarter 2023 Financial Results",
      url: quarterlyPdf2023Q3,
    },
    {
-      title: "2023 Q2 Quarterly Results",
+      title: "2023 Q2 Quarterly Reports",
      description: "Second Quarter 2023 Financial Results",
      url: quarterlyPdf2023Q2,
    },
    {
-      title: "2023 Q1 Quarterly Results",
+      title: "2023 Q1 Quarterly Reports",
      description: "First Quarter 2023 Financial Results",
      url: quarterlyPdf2023Q1,
    },
    {
-      title: "2022 Q3 Quarterly Results",
+      title: "2022 Q3 Quarterly Reports",
      description: "Third Quarter 2022 Financial Results",
      url: quarterlyPdf2022Q3,
    },
    {
-      title: "2022 Q2 Quarterly Results",
+      title: "2022 Q2 Quarterly Reports",
      description: "Second Quarter 2022 Financial Results",
      url: quarterlyPdf2022Q2,
    },
    {
-      title: "2022 Q1 Quarterly Results",
+      title: "2022 Q1 Quarterly Reports",
      description: "First Quarter 2022 Financial Results",
      url: quarterlyPdf2022Q1,
    },
    {
-      title: "2021 Q3 Quarterly Results",
+      title: "2021 Q3 Quarterly Reports",
      description: "Third Quarter 2021 Financial Results",
      url: quarterlyPdf2021Q3,
    },
    {
-      title: "2021 Q2 Quarterly Results",
+      title: "2021 Q2 Quarterly Reports",
      description: "Second Quarter 2021 Financial Results",
      url: quarterlyPdf2021Q2,
    },
    {
-      title: "2021 Q1 Quarterly Results",
+      title: "2021 Q1 Quarterly Reports",
      description: "First Quarter 2021 Financial Results",
      url: quarterlyPdf2021Q1,
    },
    {
-      title: "2020 Q3 Quarterly Results",
+      title: "2020 Q3 Quarterly Reports",
      description: "Third Quarter 2020 Financial Results",
      url: quarterlyPdf2020Q3,
    },
    {
-      title: "2020 Q2 Quarterly Results",
+      title: "2020 Q2 Quarterly Reports",
      description: "Second Quarter 2020 Financial Results",
      url: quarterlyPdf2020Q2,
    },
    {
-      title: "2020 Q1 Quarterly Results",
+      title: "2020 Q1 Quarterly Reports",
      description: "First Quarter 2020 Financial Results",
      url: quarterlyPdf2020Q1,
    },
    {
-      title: "2019 Q3 Quarterly Results",
+      title: "2019 Q3 Quarterly Reports",
      description: "Third Quarter 2019 Financial Results",
      url: quarterlyPdf2019Q3,
    },
    {
-      title: "2019 Q2 Quarterly Results",
+      title: "2019 Q2 Quarterly Reports",
      description: "Second Quarter 2019 Financial Results",
      url: quarterlyPdf2019Q2,
    },
    {
-      title: "2019 Q1 Quarterly Results",
+      title: "2019 Q1 Quarterly Reports",
      description: "First Quarter 2019 Financial Results",
      url: quarterlyPdf2019Q1,
    },
    {
-      title: "2018 Q3 Quarterly Results",
+      title: "2018 Q3 Quarterly Reports",
      description: "Third Quarter 2018 Financial Results",
      url: quarterlyPdf2018Q3,
    },
    {
-      title: "2018 Q2 Quarterly Results",
+      title: "2018 Q2 Quarterly Reports",
      description: "Second Quarter 2018 Financial Results",
      url: quarterlyPdf2018Q2,
    },
    {
-      title: "2018 Q1 Quarterly Results",
+      title: "2018 Q1 Quarterly Reports",
      description: "First Quarter 2018 Financial Results",
      url: quarterlyPdf2018Q1,
    },
    {
-      title: "2017 Q3 Quarterly Results",
+      title: "2017 Q3 Quarterly Reports",
      description: "Third Quarter 2017 Financial Results",
      url: quarterlyPdf2017Q3,
    },
    {
-      title: "2017 Q2 Quarterly Results",
+      title: "2017 Q2 Quarterly Reports",
      description: "Second Quarter 2017 Financial Results",
      url: quarterlyPdf2017Q2,
    },
    {
-      title: "2017 Q1 Quarterly Results",
+      title: "2017 Q1 Quarterly Reports",
      description: "First Quarter 2017 Financial Results",
      url: quarterlyPdf2017Q1,
    },
    {
-      title: "2016 Q3 Quarterly Results",
+      title: "2016 Q3 Quarterly Reports",
      description: "Third Quarter 2016 Financial Results",
      url: quarterlyPdf2016Q3,
    },
    {
-      title: "2016 Q2 Quarterly Results",
+      title: "2016 Q2 Quarterly Reports",
      description: "Second Quarter 2016 Financial Results",
      url: quarterlyPdf2016Q2,
    },
    {
-      title: "2016 Q1 Quarterly Results",
+      title: "2016 Q1 Quarterly Reports",
      description: "First Quarter 2016 Financial Results",
      url: quarterlyPdf2016Q1,
    },
    {
-      title: "2015 Q3 Quarterly Results",
+      title: "2015 Q3 Quarterly Reports",
      description: "Third Quarter 2015 Financial Results",
      url: quarterlyPdf2015Q3,
    },
    {
-      title: "2015 Q2 Quarterly Results",
+      title: "2015 Q2 Quarterly Reports",
      description: "Second Quarter 2015 Financial Results",
      url: quarterlyPdf2015Q2,
    },
    {
-      title: "2015 Q1 Quarterly Results",
+      title: "2015 Q1 Quarterly Reports",
      description: "First Quarter 2015 Financial Results",
      url: quarterlyPdf2015Q1,
    },
    {
-      title: "2014 Q3 Quarterly Results",
+      title: "2014 Q3 Quarterly Reports",
      description: "Third Quarter 2014 Financial Results",
      url: quarterlyPdf2014Q3,
    },
    {
-      title: "2014 Q2 Quarterly Results",
+      title: "2014 Q2 Quarterly Reports",
      description: "Second Quarter 2014 Financial Results",
      url: quarterlyPdf2014Q2,
    },
    {
-      title: "2014 Q1 Quarterly Results",
+      title: "2014 Q1 Quarterly Reports",
      description: "First Quarter 2014 Financial Results",
      url: quarterlyPdf2014Q1,
    },
    {
-      title: "2013 Q3 Quarterly Results",
+      title: "2013 Q3 Quarterly Reports",
      description: "Third Quarter 2013 Financial Results",
      url: quarterlyPdf2013Q3,
    },
    {
-      title: "2013 Q2 Quarterly Results",
+      title: "2013 Q2 Quarterly Reports",
      description: "Second Quarter 2013 Financial Results",
      url: quarterlyPdf2013Q2,
    },
    {
-      title: "2013 Q1 Quarterly Results",
+      title: "2013 Q1 Quarterly Reports",
      description: "First Quarter 2013 Financial Results",
      url: quarterlyPdf2013Q1,
    },
    {
-      title: "2012 Q3 Quarterly Results",
+      title: "2012 Q3 Quarterly Reports",
      description: "Third Quarter 2012 Financial Results",
      url: quarterlyPdf2012Q3,
    },
    {
-      title: "2012 Q2 Quarterly Results",
+      title: "2012 Q2 Quarterly Reports",
      description: "Second Quarter 2012 Financial Results",
      url: quarterlyPdf2012Q2,
    },
    {
-      title: "2012 Q1 Quarterly Results",
+      title: "2012 Q1 Quarterly Reports",
      description: "First Quarter 2012 Financial Results",
      url: quarterlyPdf2012Q1,
    },
    {
-      title: "2011 Q3 Quarterly Results",
+      title: "2011 Q3 Quarterly Reports",
      description: "Third Quarter 2011 Financial Results",
      url: quarterlyPdf2011Q3,
    },
    {
-      title: "2011 Q2 Quarterly Results",
+      title: "2011 Q2 Quarterly Reports",
      description: "Second Quarter 2011 Financial Results",
      url: quarterlyPdf2011Q2,
    },
    {
-      title: "2011 Q1 Quarterly Results",
+      title: "2011 Q1 Quarterly Reports",
      description: "First Quarter 2011 Financial Results",
      url: quarterlyPdf2011Q1,
    },
    {
-      title: "2010 Q3 Quarterly Results",
+      title: "2010 Q3 Quarterly Reports",
      description: "Third Quarter 2010 Financial Results",
      url: quarterlyPdf2010Q3,
    },
    {
-      title: "2010 Q2 Quarterly Results",
+      title: "2010 Q2 Quarterly Reports",
      description: "Second Quarter 2010 Financial Results",
      url: quarterlyPdf2010Q2,
    },
    {
-      title: "2010 Q1 Quarterly Results",
+      title: "2010 Q1 Quarterly Reports",
      description: "First Quarter 2010 Financial Results",
      url: quarterlyPdf2010Q1,
    },
    {
-      title: "2009 Q3 Quarterly Results",
+      title: "2009 Q3 Quarterly Reports",
      description: "Third Quarter 2009 Financial Results",
      url: quarterlyPdf2009Q3,
    },
@ -343,7 +343,7 @@ const filteredList = computed(() => {

 const handleSearch = () => {
  // 搜索处理逻辑
-  console.log("搜索:", searchQuery.value);
+  // console.log("搜索:", searchQuery.value);
 };
 const downloadPdf = async (pdfResource, filename = "") => {
  try {
@ -367,7 +367,7 @@ const downloadPdf = async (pdfResource, filename = "") => {
    // 释放Blob URL
    URL.revokeObjectURL(blobUrl);
  } catch (error) {
-    console.error("下载PDF文件失败:", error);
+    // console.error("下载PDF文件失败:", error);
  }
 };
 </script>
--- a/src/views/financialinformation/quarterlyreports/size1920/index.vue
+++ b/src/views/financialinformation/quarterlyreports/size1920/index.vue
@ -2,19 +2,19 @@
  <header></header>
  <main class="p-[35px] max-w-[1200px] mx-auto">
    <div class="title mb-[20px]">
-      {{ t("financialinformation.quarterlyresults.title") }}
+      {{ t("financialinformation.quarterlyreports.title") }}
    </div>
    <div class="search-container">
      <input
        type="text"
        :placeholder="
-          t('financialinformation.quarterlyresults.search.placeholder')
+          t('financialinformation.quarterlyreports.search.placeholder')
        "
        v-model="searchQuery"
        class="search-input"
      />
      <button class="search-button" @click="handleSearch">
-        {{ t("financialinformation.quarterlyresults.search.button") }}
+        {{ t("financialinformation.quarterlyreports.search.button") }}
      </button>
    </div>

@ -34,7 +34,7 @@
          style="color: #2979ff; cursor: pointer"
        >
          <img src="@/assets/image/pdf.png" alt="PDF" />
-          {{ t("financialinformation.quarterlyresults.download") }}
+          {{ t("financialinformation.quarterlyreports.download") }}
        </div>
      </div>
    </div>
@ -97,232 +97,232 @@ const searchQuery = ref("");
 const state = reactive({
  list: [
    {
-      title: "2024 Q3 Quarterly Results",
+      title: "2024 Q3 Quarterly Reports",
      description: "Third Quarter 2024 Financial Results",
      url: quarterlyPdf2024Q3,
    },
    {
-      title: "2024 Q2 Quarterly Results",
+      title: "2024 Q2 Quarterly Reports",
      description: "Second Quarter 2024 Financial Results",
      url: quarterlyPdf2024Q2,
    },
    {
-      title: "2024 Q1 Quarterly Results",
+      title: "2024 Q1 Quarterly Reports",
      description: "First Quarter 2024 Financial Results",
      url: quarterlyPdf2024Q1,
    },
    {
-      title: "2023 Q3 Quarterly Results",
+      title: "2023 Q3 Quarterly Reports",
      description: "Third Quarter 2023 Financial Results",
      url: quarterlyPdf2023Q3,
    },
    {
-      title: "2023 Q2 Quarterly Results",
+      title: "2023 Q2 Quarterly Reports",
      description: "Second Quarter 2023 Financial Results",
      url: quarterlyPdf2023Q2,
    },
    {
-      title: "2023 Q1 Quarterly Results",
+      title: "2023 Q1 Quarterly Reports",
      description: "First Quarter 2023 Financial Results",
      url: quarterlyPdf2023Q1,
    },
    {
-      title: "2022 Q3 Quarterly Results",
+      title: "2022 Q3 Quarterly Reports",
      description: "Third Quarter 2022 Financial Results",
      url: quarterlyPdf2022Q3,
    },
    {
-      title: "2022 Q2 Quarterly Results",
+      title: "2022 Q2 Quarterly Reports",
      description: "Second Quarter 2022 Financial Results",
      url: quarterlyPdf2022Q2,
    },
    {
-      title: "2022 Q1 Quarterly Results",
+      title: "2022 Q1 Quarterly Reports",
      description: "First Quarter 2022 Financial Results",
      url: quarterlyPdf2022Q1,
    },
    {
-      title: "2021 Q3 Quarterly Results",
+      title: "2021 Q3 Quarterly Reports",
      description: "Third Quarter 2021 Financial Results",
      url: quarterlyPdf2021Q3,
    },
    {
-      title: "2021 Q2 Quarterly Results",
+      title: "2021 Q2 Quarterly Reports",
      description: "Second Quarter 2021 Financial Results",
      url: quarterlyPdf2021Q2,
    },
    {
-      title: "2021 Q1 Quarterly Results",
+      title: "2021 Q1 Quarterly Reports",
      description: "First Quarter 2021 Financial Results",
      url: quarterlyPdf2021Q1,
    },
    {
-      title: "2020 Q3 Quarterly Results",
+      title: "2020 Q3 Quarterly Reports",
      description: "Third Quarter 2020 Financial Results",
      url: quarterlyPdf2020Q3,
    },
    {
-      title: "2020 Q2 Quarterly Results",
+      title: "2020 Q2 Quarterly Reports",
      description: "Second Quarter 2020 Financial Results",
      url: quarterlyPdf2020Q2,
    },
    {
-      title: "2020 Q1 Quarterly Results",
+      title: "2020 Q1 Quarterly Reports",
      description: "First Quarter 2020 Financial Results",
      url: quarterlyPdf2020Q1,
    },
    {
-      title: "2019 Q3 Quarterly Results",
+      title: "2019 Q3 Quarterly Reports",
      description: "Third Quarter 2019 Financial Results",
      url: quarterlyPdf2019Q3,
    },
    {
-      title: "2019 Q2 Quarterly Results",
+      title: "2019 Q2 Quarterly Reports",
      description: "Second Quarter 2019 Financial Results",
      url: quarterlyPdf2019Q2,
    },
    {
-      title: "2019 Q1 Quarterly Results",
+      title: "2019 Q1 Quarterly Reports",
      description: "First Quarter 2019 Financial Results",
      url: quarterlyPdf2019Q1,
    },
    {
-      title: "2018 Q3 Quarterly Results",
+      title: "2018 Q3 Quarterly Reports",
      description: "Third Quarter 2018 Financial Results",
      url: quarterlyPdf2018Q3,
    },
    {
-      title: "2018 Q2 Quarterly Results",
+      title: "2018 Q2 Quarterly Reports",
      description: "Second Quarter 2018 Financial Results",
      url: quarterlyPdf2018Q2,
    },
    {
-      title: "2018 Q1 Quarterly Results",
+      title: "2018 Q1 Quarterly Reports",
      description: "First Quarter 2018 Financial Results",
      url: quarterlyPdf2018Q1,
    },
    {
-      title: "2017 Q3 Quarterly Results",
+      title: "2017 Q3 Quarterly Reports",
      description: "Third Quarter 2017 Financial Results",
      url: quarterlyPdf2017Q3,
    },
    {
-      title: "2017 Q2 Quarterly Results",
+      title: "2017 Q2 Quarterly Reports",
      description: "Second Quarter 2017 Financial Results",
      url: quarterlyPdf2017Q2,
    },
    {
-      title: "2017 Q1 Quarterly Results",
+      title: "2017 Q1 Quarterly Reports",
      description: "First Quarter 2017 Financial Results",
      url: quarterlyPdf2017Q1,
    },
    {
-      title: "2016 Q3 Quarterly Results",
+      title: "2016 Q3 Quarterly Reports",
      description: "Third Quarter 2016 Financial Results",
      url: quarterlyPdf2016Q3,
    },
    {
-      title: "2016 Q2 Quarterly Results",
+      title: "2016 Q2 Quarterly Reports",
      description: "Second Quarter 2016 Financial Results",
      url: quarterlyPdf2016Q2,
    },
    {
-      title: "2016 Q1 Quarterly Results",
+      title: "2016 Q1 Quarterly Reports",
      description: "First Quarter 2016 Financial Results",
      url: quarterlyPdf2016Q1,
    },
    {
-      title: "2015 Q3 Quarterly Results",
+      title: "2015 Q3 Quarterly Reports",
      description: "Third Quarter 2015 Financial Results",
      url: quarterlyPdf2015Q3,
    },
    {
-      title: "2015 Q2 Quarterly Results",
+      title: "2015 Q2 Quarterly Reports",
      description: "Second Quarter 2015 Financial Results",
      url: quarterlyPdf2015Q2,
    },
    {
-      title: "2015 Q1 Quarterly Results",
+      title: "2015 Q1 Quarterly Reports",
      description: "First Quarter 2015 Financial Results",
      url: quarterlyPdf2015Q1,
    },
    {
-      title: "2014 Q3 Quarterly Results",
+      title: "2014 Q3 Quarterly Reports",
      description: "Third Quarter 2014 Financial Results",
      url: quarterlyPdf2014Q3,
    },
    {
-      title: "2014 Q2 Quarterly Results",
+      title: "2014 Q2 Quarterly Reports",
      description: "Second Quarter 2014 Financial Results",
      url: quarterlyPdf2014Q2,
    },
    {
-      title: "2014 Q1 Quarterly Results",
+      title: "2014 Q1 Quarterly Reports",
      description: "First Quarter 2014 Financial Results",
      url: quarterlyPdf2014Q1,
    },
    {
-      title: "2013 Q3 Quarterly Results",
+      title: "2013 Q3 Quarterly Reports",
      description: "Third Quarter 2013 Financial Results",
      url: quarterlyPdf2013Q3,
    },
    {
-      title: "2013 Q2 Quarterly Results",
+      title: "2013 Q2 Quarterly Reports",
      description: "Second Quarter 2013 Financial Results",
      url: quarterlyPdf2013Q2,
    },
    {
-      title: "2013 Q1 Quarterly Results",
+      title: "2013 Q1 Quarterly Reports",
      description: "First Quarter 2013 Financial Results",
      url: quarterlyPdf2013Q1,
    },
    {
-      title: "2012 Q3 Quarterly Results",
+      title: "2012 Q3 Quarterly Reports",
      description: "Third Quarter 2012 Financial Results",
      url: quarterlyPdf2012Q3,
    },
    {
-      title: "2012 Q2 Quarterly Results",
+      title: "2012 Q2 Quarterly Reports",
      description: "Second Quarter 2012 Financial Results",
      url: quarterlyPdf2012Q2,
    },
    {
-      title: "2012 Q1 Quarterly Results",
+      title: "2012 Q1 Quarterly Reports",
      description: "First Quarter 2012 Financial Results",
      url: quarterlyPdf2012Q1,
    },
    {
-      title: "2011 Q3 Quarterly Results",
+      title: "2011 Q3 Quarterly Reports",
      description: "Third Quarter 2011 Financial Results",
      url: quarterlyPdf2011Q3,
    },
    {
-      title: "2011 Q2 Quarterly Results",
+      title: "2011 Q2 Quarterly Reports",
      description: "Second Quarter 2011 Financial Results",
      url: quarterlyPdf2011Q2,
    },
    {
-      title: "2011 Q1 Quarterly Results",
+      title: "2011 Q1 Quarterly Reports",
      description: "First Quarter 2011 Financial Results",
      url: quarterlyPdf2011Q1,
    },
    {
-      title: "2010 Q3 Quarterly Results",
+      title: "2010 Q3 Quarterly Reports",
      description: "Third Quarter 2010 Financial Results",
      url: quarterlyPdf2010Q3,
    },
    {
-      title: "2010 Q2 Quarterly Results",
+      title: "2010 Q2 Quarterly Reports",
      description: "Second Quarter 2010 Financial Results",
      url: quarterlyPdf2010Q2,
    },
    {
-      title: "2010 Q1 Quarterly Results",
+      title: "2010 Q1 Quarterly Reports",
      description: "First Quarter 2010 Financial Results",
      url: quarterlyPdf2010Q1,
    },
    {
-      title: "2009 Q3 Quarterly Results",
+      title: "2009 Q3 Quarterly Reports",
      description: "Third Quarter 2009 Financial Results",
      url: quarterlyPdf2009Q3,
    },
@ -342,7 +342,7 @@ const filteredList = computed(() => {

 const handleSearch = () => {
  // 搜索处理逻辑
-  console.log("搜索:", searchQuery.value);
+  // console.log("搜索:", searchQuery.value);
 };

 const downloadPdf = async (pdfResource, filename = "") => {
@ -367,7 +367,7 @@ const downloadPdf = async (pdfResource, filename = "") => {
    // 释放Blob URL
    URL.revokeObjectURL(blobUrl);
  } catch (error) {
-    console.error("下载PDF文件失败:", error);
+    // console.error("下载PDF文件失败:", error);
  }
 };
 </script>
--- a/src/views/financialinformation/quarterlyreports/size375/index.vue
+++ b/src/views/financialinformation/quarterlyreports/size375/index.vue
@ -2,7 +2,7 @@
  <header></header>
  <main class="p-[80px] mx-auto" style="max-width: 100vw; min-width: 350px">
    <div class="page-title mb-[24px]">
-      {{ t("financialinformation.quarterlyresults.title") }}
+      {{ t("financialinformation.quarterlyreports.title") }}
    </div>
    <div class="search-container">
      <input
@ -10,11 +10,11 @@
        v-model="searchQuery"
        class="search-input"
        :placeholder="
-          t('financialinformation.quarterlyresults.search.placeholder')
+          t('financialinformation.quarterlyreports.search.placeholder')
        "
      />
      <button @click="handleSearch" class="search-button">
-        {{ t("financialinformation.quarterlyresults.search.button") }}
+        {{ t("financialinformation.quarterlyreports.search.button") }}
      </button>
    </div>

@ -99,232 +99,232 @@ const searchQuery = ref("");
 const state = reactive({
  list: [
    {
-      title: "2024 Q3 Quarterly Results",
+      title: "2024 Q3 Quarterly Reports",
      description: "Third Quarter 2024 Financial Results",
      url: quarterlyPdf2024Q3,
    },
    {
-      title: "2024 Q2 Quarterly Results",
+      title: "2024 Q2 Quarterly Reports",
      description: "Second Quarter 2024 Financial Results",
      url: quarterlyPdf2024Q2,
    },
    {
-      title: "2024 Q1 Quarterly Results",
+      title: "2024 Q1 Quarterly Reports",
      description: "First Quarter 2024 Financial Results",
      url: quarterlyPdf2024Q1,
    },
    {
-      title: "2023 Q3 Quarterly Results",
+      title: "2023 Q3 Quarterly Reports",
      description: "Third Quarter 2023 Financial Results",
      url: quarterlyPdf2023Q3,
    },
    {
-      title: "2023 Q2 Quarterly Results",
+      title: "2023 Q2 Quarterly Reports",
      description: "Second Quarter 2023 Financial Results",
      url: quarterlyPdf2023Q2,
    },
    {
-      title: "2023 Q1 Quarterly Results",
+      title: "2023 Q1 Quarterly Reports",
      description: "First Quarter 2023 Financial Results",
      url: quarterlyPdf2023Q1,
    },
    {
-      title: "2022 Q3 Quarterly Results",
+      title: "2022 Q3 Quarterly Reports",
      description: "Third Quarter 2022 Financial Results",
      url: quarterlyPdf2022Q3,
    },
    {
-      title: "2022 Q2 Quarterly Results",
+      title: "2022 Q2 Quarterly Reports",
      description: "Second Quarter 2022 Financial Results",
      url: quarterlyPdf2022Q2,
    },
    {
-      title: "2022 Q1 Quarterly Results",
+      title: "2022 Q1 Quarterly Reports",
      description: "First Quarter 2022 Financial Results",
      url: quarterlyPdf2022Q1,
    },
    {
-      title: "2021 Q3 Quarterly Results",
+      title: "2021 Q3 Quarterly Reports",
      description: "Third Quarter 2021 Financial Results",
      url: quarterlyPdf2021Q3,
    },
    {
-      title: "2021 Q2 Quarterly Results",
+      title: "2021 Q2 Quarterly Reports",
      description: "Second Quarter 2021 Financial Results",
      url: quarterlyPdf2021Q2,
    },
    {
-      title: "2021 Q1 Quarterly Results",
+      title: "2021 Q1 Quarterly Reports",
      description: "First Quarter 2021 Financial Results",
      url: quarterlyPdf2021Q1,
    },
    {
-      title: "2020 Q3 Quarterly Results",
+      title: "2020 Q3 Quarterly Reports",
      description: "Third Quarter 2020 Financial Results",
      url: quarterlyPdf2020Q3,
    },
    {
-      title: "2020 Q2 Quarterly Results",
+      title: "2020 Q2 Quarterly Reports",
      description: "Second Quarter 2020 Financial Results",
      url: quarterlyPdf2020Q2,
    },
    {
-      title: "2020 Q1 Quarterly Results",
+      title: "2020 Q1 Quarterly Reports",
      description: "First Quarter 2020 Financial Results",
      url: quarterlyPdf2020Q1,
    },
    {
-      title: "2019 Q3 Quarterly Results",
+      title: "2019 Q3 Quarterly Reports",
      description: "Third Quarter 2019 Financial Results",
      url: quarterlyPdf2019Q3,
    },
    {
-      title: "2019 Q2 Quarterly Results",
+      title: "2019 Q2 Quarterly Reports",
      description: "Second Quarter 2019 Financial Results",
      url: quarterlyPdf2019Q2,
    },
    {
-      title: "2019 Q1 Quarterly Results",
+      title: "2019 Q1 Quarterly Reports",
      description: "First Quarter 2019 Financial Results",
      url: quarterlyPdf2019Q1,
    },
    {
-      title: "2018 Q3 Quarterly Results",
+      title: "2018 Q3 Quarterly Reports",
      description: "Third Quarter 2018 Financial Results",
      url: quarterlyPdf2018Q3,
    },
    {
-      title: "2018 Q2 Quarterly Results",
+      title: "2018 Q2 Quarterly Reports",
      description: "Second Quarter 2018 Financial Results",
      url: quarterlyPdf2018Q2,
    },
    {
-      title: "2018 Q1 Quarterly Results",
+      title: "2018 Q1 Quarterly Reports",
      description: "First Quarter 2018 Financial Results",
      url: quarterlyPdf2018Q1,
    },
    {
-      title: "2017 Q3 Quarterly Results",
+      title: "2017 Q3 Quarterly Reports",
      description: "Third Quarter 2017 Financial Results",
      url: quarterlyPdf2017Q3,
    },
    {
-      title: "2017 Q2 Quarterly Results",
+      title: "2017 Q2 Quarterly Reports",
      description: "Second Quarter 2017 Financial Results",
      url: quarterlyPdf2017Q2,
    },
    {
-      title: "2017 Q1 Quarterly Results",
+      title: "2017 Q1 Quarterly Reports",
      description: "First Quarter 2017 Financial Results",
      url: quarterlyPdf2017Q1,
    },
    {
-      title: "2016 Q3 Quarterly Results",
+      title: "2016 Q3 Quarterly Reports",
      description: "Third Quarter 2016 Financial Results",
      url: quarterlyPdf2016Q3,
    },
    {
-      title: "2016 Q2 Quarterly Results",
+      title: "2016 Q2 Quarterly Reports",
      description: "Second Quarter 2016 Financial Results",
      url: quarterlyPdf2016Q2,
    },
    {
-      title: "2016 Q1 Quarterly Results",
+      title: "2016 Q1 Quarterly Reports",
      description: "First Quarter 2016 Financial Results",
      url: quarterlyPdf2016Q1,
    },
    {
-      title: "2015 Q3 Quarterly Results",
+      title: "2015 Q3 Quarterly Reports",
      description: "Third Quarter 2015 Financial Results",
      url: quarterlyPdf2015Q3,
    },
    {
-      title: "2015 Q2 Quarterly Results",
+      title: "2015 Q2 Quarterly Reports",
      description: "Second Quarter 2015 Financial Results",
      url: quarterlyPdf2015Q2,
    },
    {
-      title: "2015 Q1 Quarterly Results",
+      title: "2015 Q1 Quarterly Reports",
      description: "First Quarter 2015 Financial Results",
      url: quarterlyPdf2015Q1,
    },
    {
-      title: "2014 Q3 Quarterly Results",
+      title: "2014 Q3 Quarterly Reports",
      description: "Third Quarter 2014 Financial Results",
      url: quarterlyPdf2014Q3,
    },
    {
-      title: "2014 Q2 Quarterly Results",
+      title: "2014 Q2 Quarterly Reports",
      description: "Second Quarter 2014 Financial Results",
      url: quarterlyPdf2014Q2,
    },
    {
-      title: "2014 Q1 Quarterly Results",
+      title: "2014 Q1 Quarterly Reports",
      description: "First Quarter 2014 Financial Results",
      url: quarterlyPdf2014Q1,
    },
    {
-      title: "2013 Q3 Quarterly Results",
+      title: "2013 Q3 Quarterly Reports",
      description: "Third Quarter 2013 Financial Results",
      url: quarterlyPdf2013Q3,
    },
    {
-      title: "2013 Q2 Quarterly Results",
+      title: "2013 Q2 Quarterly Reports",
      description: "Second Quarter 2013 Financial Results",
      url: quarterlyPdf2013Q2,
    },
    {
-      title: "2013 Q1 Quarterly Results",
+      title: "2013 Q1 Quarterly Reports",
      description: "First Quarter 2013 Financial Results",
      url: quarterlyPdf2013Q1,
    },
    {
-      title: "2012 Q3 Quarterly Results",
+      title: "2012 Q3 Quarterly Reports",
      description: "Third Quarter 2012 Financial Results",
      url: quarterlyPdf2012Q3,
    },
    {
-      title: "2012 Q2 Quarterly Results",
+      title: "2012 Q2 Quarterly Reports",
      description: "Second Quarter 2012 Financial Results",
      url: quarterlyPdf2012Q2,
    },
    {
-      title: "2012 Q1 Quarterly Results",
+      title: "2012 Q1 Quarterly Reports",
      description: "First Quarter 2012 Financial Results",
      url: quarterlyPdf2012Q1,
    },
    {
-      title: "2011 Q3 Quarterly Results",
+      title: "2011 Q3 Quarterly Reports",
      description: "Third Quarter 2011 Financial Results",
      url: quarterlyPdf2011Q3,
    },
    {
-      title: "2011 Q2 Quarterly Results",
+      title: "2011 Q2 Quarterly Reports",
      description: "Second Quarter 2011 Financial Results",
      url: quarterlyPdf2011Q2,
    },
    {
-      title: "2011 Q1 Quarterly Results",
+      title: "2011 Q1 Quarterly Reports",
      description: "First Quarter 2011 Financial Results",
      url: quarterlyPdf2011Q1,
    },
    {
-      title: "2010 Q3 Quarterly Results",
+      title: "2010 Q3 Quarterly Reports",
      description: "Third Quarter 2010 Financial Results",
      url: quarterlyPdf2010Q3,
    },
    {
-      title: "2010 Q2 Quarterly Results",
+      title: "2010 Q2 Quarterly Reports",
      description: "Second Quarter 2010 Financial Results",
      url: quarterlyPdf2010Q2,
    },
    {
-      title: "2010 Q1 Quarterly Results",
+      title: "2010 Q1 Quarterly Reports",
      description: "First Quarter 2010 Financial Results",
      url: quarterlyPdf2010Q1,
    },
    {
-      title: "2009 Q3 Quarterly Results",
+      title: "2009 Q3 Quarterly Reports",
      description: "Third Quarter 2009 Financial Results",
      url: quarterlyPdf2009Q3,
    },
@ -342,32 +342,62 @@ const filteredList = computed(() => {

 const handleSearch = () => {
  // 搜索处理逻辑
-  console.log("搜索:", searchQuery.value);
+  // console.log("搜索:", searchQuery.value);
 };

-const downloadPdf = async (pdfResource, filename = "") => {
-  try {
-    // 获取PDF文件
-    const response = await fetch(pdfResource);
-    const blob = await response.blob();
+const downloadPdf = (url) => {
+  // 创建一个隐藏的a元素
+  const link = document.createElement("a");
+  link.href = url;

-    // 创建Blob URL
-    const blobUrl = URL.createObjectURL(blob);
+  // 修复文件名提取逻辑
+  let fileName = url.split("/").pop();
+  // 移除可能存在的查询参数
+  if (fileName.includes("?") || fileName.includes("_t=")) {
+    fileName = fileName.split(/[?_]/)[0];
+  }
+  link.download = fileName;

-    // 创建下载链接
-    const a = document.createElement("a");
-    a.href = blobUrl;
-    a.download = filename || pdfResource.split("/").pop() || "download.pdf";
+  // 对于移动设备，我们需要特殊处理
+  const isMobile =
+    /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+      navigator.userAgent
+    );

-    // 触发下载
-    document.body.appendChild(a);
-    a.click();
-    document.body.removeChild(a);
+  if (isMobile) {
+    // 在移动设备上，使用fetch下载文件并直接触发下载，不使用blob URL进行预览
+    fetch(url)
+      .then((response) => response.blob())
+      .then((blob) => {
+        const objectUrl = URL.createObjectURL(blob);
+        link.href = objectUrl;
+        // 确保设置download属性并且不设置target="_blank"以避免预览
+        link.download = fileName;
+        link.target = "_self"; // 避免在新窗口打开
+        document.body.appendChild(link);
+        link.click();

-    // 释放Blob URL
-    URL.revokeObjectURL(blobUrl);
-  } catch (error) {
-    console.error("下载PDF文件失败:", error);
+        // 清理
+        setTimeout(() => {
+          document.body.removeChild(link);
+          URL.revokeObjectURL(objectUrl);
+        }, 100);
+      })
+      .catch((error) => {
+        // console.error("下载文件时出错:", error);
+        // 如果fetch失败，尝试直接下载
+        link.href = url;
+        link.download = fileName;
+        link.target = "_self";
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+      });
+  } else {
+    // 桌面设备上直接点击链接下载
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
  }
 };
 </script>
--- a/src/views/financialinformation/quarterlyreports/size768/index.vue
+++ b/src/views/financialinformation/quarterlyreports/size768/index.vue
@ -2,7 +2,7 @@
  <header></header>
  <main class="p-[80px] mx-auto" style="max-width: 100vw; min-width: 350px">
    <div class="page-title mb-[24px]">
-      {{ t("financialinformation.quarterlyresults.title") }}
+      {{ t("financialinformation.quarterlyreports.title") }}
    </div>
    <div class="search-container">
      <input
@ -10,11 +10,11 @@
        v-model="searchQuery"
        class="search-input"
        :placeholder="
-          t('financialinformation.quarterlyresults.search.placeholder')
+          t('financialinformation.quarterlyreports.search.placeholder')
        "
      />
      <button @click="handleSearch" class="search-button">
-        {{ t("financialinformation.quarterlyresults.search.button") }}
+        {{ t("financialinformation.quarterlyreports.search.button") }}
      </button>
    </div>

@ -99,232 +99,232 @@ const searchQuery = ref("");
 const state = reactive({
  list: [
    {
-      title: "2024 Q3 Quarterly Results",
+      title: "2024 Q3 Quarterly Reports",
      description: "Third Quarter 2024 Financial Results",
      url: quarterlyPdf2024Q3,
    },
    {
-      title: "2024 Q2 Quarterly Results",
+      title: "2024 Q2 Quarterly Reports",
      description: "Second Quarter 2024 Financial Results",
      url: quarterlyPdf2024Q2,
    },
    {
-      title: "2024 Q1 Quarterly Results",
+      title: "2024 Q1 Quarterly Reports",
      description: "First Quarter 2024 Financial Results",
      url: quarterlyPdf2024Q1,
    },
    {
-      title: "2023 Q3 Quarterly Results",
+      title: "2023 Q3 Quarterly Reports",
      description: "Third Quarter 2023 Financial Results",
      url: quarterlyPdf2023Q3,
    },
    {
-      title: "2023 Q2 Quarterly Results",
+      title: "2023 Q2 Quarterly Reports",
      description: "Second Quarter 2023 Financial Results",
      url: quarterlyPdf2023Q2,
    },
    {
-      title: "2023 Q1 Quarterly Results",
+      title: "2023 Q1 Quarterly Reports",
      description: "First Quarter 2023 Financial Results",
      url: quarterlyPdf2023Q1,
    },
    {
-      title: "2022 Q3 Quarterly Results",
+      title: "2022 Q3 Quarterly Reports",
      description: "Third Quarter 2022 Financial Results",
      url: quarterlyPdf2022Q3,
    },
    {
-      title: "2022 Q2 Quarterly Results",
+      title: "2022 Q2 Quarterly Reports",
      description: "Second Quarter 2022 Financial Results",
      url: quarterlyPdf2022Q2,
    },
    {
-      title: "2022 Q1 Quarterly Results",
+      title: "2022 Q1 Quarterly Reports",
      description: "First Quarter 2022 Financial Results",
      url: quarterlyPdf2022Q1,
    },
    {
-      title: "2021 Q3 Quarterly Results",
+      title: "2021 Q3 Quarterly Reports",
      description: "Third Quarter 2021 Financial Results",
      url: quarterlyPdf2021Q3,
    },
    {
-      title: "2021 Q2 Quarterly Results",
+      title: "2021 Q2 Quarterly Reports",
      description: "Second Quarter 2021 Financial Results",
      url: quarterlyPdf2021Q2,
    },
    {
-      title: "2021 Q1 Quarterly Results",
+      title: "2021 Q1 Quarterly Reports",
      description: "First Quarter 2021 Financial Results",
      url: quarterlyPdf2021Q1,
    },
    {
-      title: "2020 Q3 Quarterly Results",
+      title: "2020 Q3 Quarterly Reports",
      description: "Third Quarter 2020 Financial Results",
      url: quarterlyPdf2020Q3,
    },
    {
-      title: "2020 Q2 Quarterly Results",
+      title: "2020 Q2 Quarterly Reports",
      description: "Second Quarter 2020 Financial Results",
      url: quarterlyPdf2020Q2,
    },
    {
-      title: "2020 Q1 Quarterly Results",
+      title: "2020 Q1 Quarterly Reports",
      description: "First Quarter 2020 Financial Results",
      url: quarterlyPdf2020Q1,
    },
    {
-      title: "2019 Q3 Quarterly Results",
+      title: "2019 Q3 Quarterly Reports",
      description: "Third Quarter 2019 Financial Results",
      url: quarterlyPdf2019Q3,
    },
    {
-      title: "2019 Q2 Quarterly Results",
+      title: "2019 Q2 Quarterly Reports",
      description: "Second Quarter 2019 Financial Results",
      url: quarterlyPdf2019Q2,
    },
    {
-      title: "2019 Q1 Quarterly Results",
+      title: "2019 Q1 Quarterly Reports",
      description: "First Quarter 2019 Financial Results",
      url: quarterlyPdf2019Q1,
    },
    {
-      title: "2018 Q3 Quarterly Results",
+      title: "2018 Q3 Quarterly Reports",
      description: "Third Quarter 2018 Financial Results",
      url: quarterlyPdf2018Q3,
    },
    {
-      title: "2018 Q2 Quarterly Results",
+      title: "2018 Q2 Quarterly Reports",
      description: "Second Quarter 2018 Financial Results",
      url: quarterlyPdf2018Q2,
    },
    {
-      title: "2018 Q1 Quarterly Results",
+      title: "2018 Q1 Quarterly Reports",
      description: "First Quarter 2018 Financial Results",
      url: quarterlyPdf2018Q1,
    },
    {
-      title: "2017 Q3 Quarterly Results",
+      title: "2017 Q3 Quarterly Reports",
      description: "Third Quarter 2017 Financial Results",
      url: quarterlyPdf2017Q3,
    },
    {
-      title: "2017 Q2 Quarterly Results",
+      title: "2017 Q2 Quarterly Reports",
      description: "Second Quarter 2017 Financial Results",
      url: quarterlyPdf2017Q2,
    },
    {
-      title: "2017 Q1 Quarterly Results",
+      title: "2017 Q1 Quarterly Reports",
      description: "First Quarter 2017 Financial Results",
      url: quarterlyPdf2017Q1,
    },
    {
-      title: "2016 Q3 Quarterly Results",
+      title: "2016 Q3 Quarterly Reports",
      description: "Third Quarter 2016 Financial Results",
      url: quarterlyPdf2016Q3,
    },
    {
-      title: "2016 Q2 Quarterly Results",
+      title: "2016 Q2 Quarterly Reports",
      description: "Second Quarter 2016 Financial Results",
      url: quarterlyPdf2016Q2,
    },
    {
-      title: "2016 Q1 Quarterly Results",
+      title: "2016 Q1 Quarterly Reports",
      description: "First Quarter 2016 Financial Results",
      url: quarterlyPdf2016Q1,
    },
    {
-      title: "2015 Q3 Quarterly Results",
+      title: "2015 Q3 Quarterly Reports",
      description: "Third Quarter 2015 Financial Results",
      url: quarterlyPdf2015Q3,
    },
    {
-      title: "2015 Q2 Quarterly Results",
+      title: "2015 Q2 Quarterly Reports",
      description: "Second Quarter 2015 Financial Results",
      url: quarterlyPdf2015Q2,
    },
    {
-      title: "2015 Q1 Quarterly Results",
+      title: "2015 Q1 Quarterly Reports",
      description: "First Quarter 2015 Financial Results",
      url: quarterlyPdf2015Q1,
    },
    {
-      title: "2014 Q3 Quarterly Results",
+      title: "2014 Q3 Quarterly Reports",
      description: "Third Quarter 2014 Financial Results",
      url: quarterlyPdf2014Q3,
    },
    {
-      title: "2014 Q2 Quarterly Results",
+      title: "2014 Q2 Quarterly Reports",
      description: "Second Quarter 2014 Financial Results",
      url: quarterlyPdf2014Q2,
    },
    {
-      title: "2014 Q1 Quarterly Results",
+      title: "2014 Q1 Quarterly Reports",
      description: "First Quarter 2014 Financial Results",
      url: quarterlyPdf2014Q1,
    },
    {
-      title: "2013 Q3 Quarterly Results",
+      title: "2013 Q3 Quarterly Reports",
      description: "Third Quarter 2013 Financial Results",
      url: quarterlyPdf2013Q3,
    },
    {
-      title: "2013 Q2 Quarterly Results",
+      title: "2013 Q2 Quarterly Reports",
      description: "Second Quarter 2013 Financial Results",
      url: quarterlyPdf2013Q2,
    },
    {
-      title: "2013 Q1 Quarterly Results",
+      title: "2013 Q1 Quarterly Reports",
      description: "First Quarter 2013 Financial Results",
      url: quarterlyPdf2013Q1,
    },
    {
-      title: "2012 Q3 Quarterly Results",
+      title: "2012 Q3 Quarterly Reports",
      description: "Third Quarter 2012 Financial Results",
      url: quarterlyPdf2012Q3,
    },
    {
-      title: "2012 Q2 Quarterly Results",
+      title: "2012 Q2 Quarterly Reports",
      description: "Second Quarter 2012 Financial Results",
      url: quarterlyPdf2012Q2,
    },
    {
-      title: "2012 Q1 Quarterly Results",
+      title: "2012 Q1 Quarterly Reports",
      description: "First Quarter 2012 Financial Results",
      url: quarterlyPdf2012Q1,
    },
    {
-      title: "2011 Q3 Quarterly Results",
+      title: "2011 Q3 Quarterly Reports",
      description: "Third Quarter 2011 Financial Results",
      url: quarterlyPdf2011Q3,
    },
    {
-      title: "2011 Q2 Quarterly Results",
+      title: "2011 Q2 Quarterly Reports",
      description: "Second Quarter 2011 Financial Results",
      url: quarterlyPdf2011Q2,
    },
    {
-      title: "2011 Q1 Quarterly Results",
+      title: "2011 Q1 Quarterly Reports",
      description: "First Quarter 2011 Financial Results",
      url: quarterlyPdf2011Q1,
    },
    {
-      title: "2010 Q3 Quarterly Results",
+      title: "2010 Q3 Quarterly Reports",
      description: "Third Quarter 2010 Financial Results",
      url: quarterlyPdf2010Q3,
    },
    {
-      title: "2010 Q2 Quarterly Results",
+      title: "2010 Q2 Quarterly Reports",
      description: "Second Quarter 2010 Financial Results",
      url: quarterlyPdf2010Q2,
    },
    {
-      title: "2010 Q1 Quarterly Results",
+      title: "2010 Q1 Quarterly Reports",
      description: "First Quarter 2010 Financial Results",
      url: quarterlyPdf2010Q1,
    },
    {
-      title: "2009 Q3 Quarterly Results",
+      title: "2009 Q3 Quarterly Reports",
      description: "Third Quarter 2009 Financial Results",
      url: quarterlyPdf2009Q3,
    },
@ -342,32 +342,62 @@ const filteredList = computed(() => {

 const handleSearch = () => {
  // 搜索处理逻辑
-  console.log("搜索:", searchQuery.value);
+  // console.log("搜索:", searchQuery.value);
 };

-const downloadPdf = async (pdfResource, filename = "") => {
-  try {
-    // 获取PDF文件
-    const response = await fetch(pdfResource);
-    const blob = await response.blob();
+const downloadPdf = (url) => {
+  // 创建一个隐藏的a元素
+  const link = document.createElement("a");
+  link.href = url;

-    // 创建Blob URL
-    const blobUrl = URL.createObjectURL(blob);
+  // 修复文件名提取逻辑
+  let fileName = url.split("/").pop();
+  // 移除可能存在的查询参数
+  if (fileName.includes("?") || fileName.includes("_t=")) {
+    fileName = fileName.split(/[?_]/)[0];
+  }
+  link.download = fileName;

-    // 创建下载链接
-    const a = document.createElement("a");
-    a.href = blobUrl;
-    a.download = filename || pdfResource.split("/").pop() || "download.pdf";
+  // 对于移动设备，我们需要特殊处理
+  const isMobile =
+    /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+      navigator.userAgent
+    );

-    // 触发下载
-    document.body.appendChild(a);
-    a.click();
-    document.body.removeChild(a);
+  if (isMobile) {
+    // 在移动设备上，使用fetch下载文件并直接触发下载，不使用blob URL进行预览
+    fetch(url)
+      .then((response) => response.blob())
+      .then((blob) => {
+        const objectUrl = URL.createObjectURL(blob);
+        link.href = objectUrl;
+        // 确保设置download属性并且不设置target="_blank"以避免预览
+        link.download = fileName;
+        link.target = "_self"; // 避免在新窗口打开
+        document.body.appendChild(link);
+        link.click();

-    // 释放Blob URL
-    URL.revokeObjectURL(blobUrl);
-  } catch (error) {
-    console.error("下载PDF文件失败:", error);
+        // 清理
+        setTimeout(() => {
+          document.body.removeChild(link);
+          URL.revokeObjectURL(objectUrl);
+        }, 100);
+      })
+      .catch((error) => {
+        // console.error("下载文件时出错:", error);
+        // 如果fetch失败，尝试直接下载
+        link.href = url;
+        link.download = fileName;
+        link.target = "_self";
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+      });
+  } else {
+    // 桌面设备上直接点击链接下载
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
  }
 };
 </script>
--- a/src/views/financialinformation/secfilings/size1440/index.vue
+++ b/src/views/financialinformation/secfilings/size1440/index.vue
@ -1,183 +1,317 @@
 <template>
  <div class="page-container">
-    <div class="financials-container">
+    <div class="sec-filings-container">
      <!-- 标题 -->
-      <div class="financials-title">
-        {{ t("financialinformation.secfilings.title") }}
+      <div class="page-title">SEC Filings</div>
+
+      <!-- 筛选器 -->
+      <div class="filters">
+        <div class="filter-group">
+          <label class="filter-label">Filing year</label>
+          <n-select
+            v-model:value="state.selectedYear"
+            :options="state.yearOptions"
+            placeholder="- Any -"
+            style="width: 150px"
+            clearable
+            @update:value="handleYearChange"
+          />
+        </div>
+
+        <div class="filter-group">
+          <label class="filter-label">Items per page:</label>
+          <n-select
+            v-model:value="state.pageSize"
+            :options="state.pageSizeOptions"
+            style="width: 150px"
+            @update:value="handlePageSizeChange"
+          />
+        </div>
      </div>

-      <!-- 公司财务概览 -->
-      <section class="section">
-        <div class="section-title">
-          {{ t("financialinformation.secfilings.overview.title") }}
-        </div>
-        <p
-          class="overview-text"
-          v-html="t('financialinformation.secfilings.overview.desc')"
-        ></p>
-      </section>
+      <!-- 表格 -->
+      <div class="table-container">
+        <n-data-table
+          :columns="columns"
+          :data="paginatedData"
+          :pagination="false"
+          :bordered="false"
+          :size="'medium'"
+          :row-key="(row) => row.idx"
+        />

-      <!-- 年度报告 -->
-      <section class="section">
-        <div class="section-title">
-          {{ t("financialinformation.secfilings.annual_reports.title") }}
-        </div>
+        <!-- 分页器 -->
+        <div class="pagination-container">
+          <n-pagination
+            v-model:page="state.currentPage"
+            v-model:page-size="state.pageSize"
+            show-size-picker
+            show-quick-jumper
+            :item-count="filteredData.length"
+            :page-sizes="[10, 25, 50]"
+            @update:page="handlePageChange"
+            @update:page-size="handlePageSizeChange"
+          >
+            <template #prev>
+              <span>‹ Previous</span>
+            </template>
+            <template #next>
+              <span>Next ›</span>
+            </template>
+          </n-pagination>

-        <!-- 报告表格 -->
-        <div class="reports-table">
-          <div class="table-header">
-            <div class="column file-name">
-              {{
-                t("financialinformation.secfilings.annual_reports.file_name")
-              }}
-            </div>
-            <div class="column date">
-              {{ t("financialinformation.secfilings.annual_reports.date") }}
-            </div>
-            <div class="column download"></div>
-          </div>
-
-          <!-- 报告列表 -->
-          <div class="reports-list">
-            <div
-              class="table-row"
-              v-for="(report, index) in annualReports"
-              :key="index"
-            >
-              <div class="column file-name">{{ report.fileName }}</div>
-              <div class="column date">{{ report.date }}</div>
-              <div class="column download">
-                <a :href="report.downloadUrl" class="download-link">{{
-                  t("financialinformation.secfilings.annual_reports.view")
-                }}</a>
-              </div>
-            </div>
+          <div class="pagination-info">
+            Displaying {{ startIndex }} - {{ endIndex }} of
+            {{ filteredData.length }} results
          </div>
        </div>
-      </section>
-
-      <!-- SEC文件 -->
-      <section class="section">
-        <div class="section-title">
-          {{ t("financialinformation.secfilings.sec.title") }}
-        </div>
-        <p class="sec-text">
-          {{ t("financialinformation.secfilings.sec.desc") }}
-          <a
-            href="https://www.sec.gov/cgi-bin/browse-edgar?company=FiEE&match=starts-with&filenum=&State=&Country=&SIC=&myowner=exclude&action=getcompany"
-            class="link"
-            >{{ t("financialinformation.secfilings.sec.click_here") }}</a
-          >.
-        </p>
-      </section>
+      </div>
    </div>
  </div>
 </template>

 <script setup>
-import { ref } from "vue";
+import { reactive, computed, h, onMounted } from "vue";
+import { NSelect, NDataTable, NPagination, NButton, NIcon } from "naive-ui";
 import { useI18n } from "vue-i18n";
-
+import { useRouter } from "vue-router";
+import { fileList } from "@/dict/secFiles.js";
 const { t } = useI18n();
-// 年度报告数据
-const annualReports = ref([
+const router = useRouter();
+import iconLink from "@/assets/image/icon/icon-link.png";
+// 使用 reactive 管理所有状态
+const state = reactive({
+  selectedYear: null,
+  pageSize: 10,
+  currentPage: 1,
+
+  // 年份选项
+  yearOptions: [
+    { label: "- Any -", value: null },
+    { label: "2025", value: 2025 },
+    { label: "2024", value: 2024 },
+    { label: "2023", value: 2023 },
+    { label: "2022", value: 2022 },
+    { label: "2021", value: 2021 },
+    { label: "2020", value: 2020 },
+    { label: "2019", value: 2019 },
+    { label: "2018", value: 2018 },
+    { label: "2017", value: 2017 },
+    { label: "2016", value: 2016 },
+    { label: "2015", value: 2015 },
+    { label: "2014", value: 2014 },
+    { label: "2013", value: 2013 },
+    { label: "2012", value: 2012 },
+    { label: "2011", value: 2011 },
+    { label: "2010", value: 2010 },
+    { label: "2009", value: 2009 },
+  ],
+
+  // 每页条数选项
+  pageSizeOptions: [
+    { label: "10", value: 10 },
+    { label: "25", value: 25 },
+    { label: "50", value: 50 },
+  ],
+
+  // SEC文件数据
+  secFilingsData: [],
+});
+onMounted(() => {
+  // 月份名称映射
+  const monthNames = [
+    "Jan",
+    "Feb",
+    "Mar",
+    "Apr",
+    "May",
+    "Jun",
+    "Jul",
+    "Aug",
+    "Sep",
+    "Oct",
+    "Nov",
+    "Dec",
+  ];
+
+  state.secFilingsData = fileList.map((item, index) => {
+    // 从 filingDate 中提取年份，支持两种格式：
+    // 1. "Feb 04, 2019" 格式（英文）
+    // 2. "2025-10-24" 格式（ISO格式）转换为英文格式
+    let year = null;
+    let formattedDate = item.filingDate;
+
+    if (item.filingDate) {
+      if (item.filingDate.includes(", ")) {
+        // "Feb 04, 2019" 格式，已经是英文格式，保持不变
+        year = parseInt(item.filingDate.split(", ")[1]);
+      } else if (item.filingDate.includes("-")) {
+        // "2025-10-24" 格式，转换为 "Oct 24, 2025" 英文格式
+        const dateParts = item.filingDate.split("-");
+        const yearPart = parseInt(dateParts[0]);
+        const monthPart = parseInt(dateParts[1]);
+        const dayPart = parseInt(dateParts[2]);
+
+        year = yearPart;
+        const monthName = monthNames[monthPart - 1]; // 月份从1开始，数组从0开始
+        const dayFormatted = dayPart.toString().padStart(2, "0");
+        formattedDate = `${monthName} ${dayFormatted}, ${yearPart}`;
+      }
+    }
+
+    return {
+      ...item,
+      formattedDate: formattedDate, // 更新为统一的英文格式
+      year: year,
+    };
+  });
+});
+// 表格列定义
+const columns = [
  {
-    fileName: "2024 Annual Report",
-    date: "April 10, 2025",
-    downloadUrl:
-      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912625002538/fieeinc_10k.htm",
+    title: "Filing Date",
+    key: "formattedDate",
+    sorter: "default",
+    width: 150,
  },
  {
-    fileName: "2023 Annual Report",
-    date: "April 12, 2024",
-    downloadUrl:
-      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912624002449/miniminc_10k.htm",
+    title: "Form",
+    key: "form",
+    sorter: "default",
+    width: 120,
+    render: (row) => {
+      return h(
+        "a",
+        {
+          href: "javascript:void(0)",
+          style: {
+            color: "#0078d7",
+            textDecoration: "none",
+            cursor: "pointer",
+          },
+          onClick: (e) => {
+            e.preventDefault();
+            router.push({
+              path: "/secfilingsDefail",
+              query: {
+                filingDate: row.filingDate,
+              },
+            });
+          },
+          onMouseover: (e) => {
+            e.target.style.textDecoration = "underline";
+          },
+          onMouseout: (e) => {
+            e.target.style.textDecoration = "none";
+          },
+        },
+        row.form
+      );
+    },
  },
  {
-    fileName: "2022 Annual Report",
-    date: "March 31, 2023",
-    downloadUrl:
-      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000149315223010335/form10-k.htm",
+    title: "Description",
+    key: "description",
+    sorter: "default",
+    ellipsis: {
+      tooltip: true,
+    },
  },
  {
-    fileName: "2021 Annual Report",
-    date: "March 31, 2022",
-    downloadUrl:
-      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000149315222008365/form10-k.htm",
+    title: "View",
+    key: "view",
+    width: 150,
+    render: (row) => {
+      return h(
+        "div",
+        {
+          style: {
+            display: "flex",
+            gap: "8px",
+          },
+        },
+        [
+          h(
+            "a",
+            {
+              href: row.fileLink,
+              style: {
+                color: "#0078d7",
+                textDecoration: "none",
+                fontSize: "12px",
+              },
+              onMouseover: (e) => {
+                e.target.style.textDecoration = "underline";
+              },
+              onMouseout: (e) => {
+                e.target.style.textDecoration = "none";
+              },
+            },
+            h("img", {
+              src: iconLink,
+              alt: "link",
+              style: {
+                width: "24px",
+                height: "24px",
+              },
+            })
+          ),
+        ]
+      );
+    },
  },
-  {
-    fileName: "2020 Annual Report",
-    date: "April 13, 2021",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495421004133/zmtp_10k.htm",
-  },
-  {
-    fileName: "2019 Annual Report",
-    date: "April 15, 2020",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495420004069/zmtp_10k.htm",
-  },
-  {
-    fileName: "2018 Annual Report",
-    date: "April 1, 2019",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495419003878/zmtp_10k.htm",
-  },
-  {
-    fileName: "2017 Annual Report",
-    date: "March 30, 2018",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495418003402/zmtp_10k.htm",
-  },
-  {
-    fileName: "2016 Annual Report",
-    date: "March 22, 2017",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495417002279/zmtp_10k.htm",
-  },
-  {
-    fileName: "2015 Annual Report",
-    date: "March 15, 2016",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448816006596/zmtp_10k.htm",
-  },
-  {
-    fileName: "2014 Annual Report",
-    date: "March 24, 2015",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448815001308/zmtp_10k.htm",
-  },
-  {
-    fileName: "2013 Annual Report",
-    date: "March 31, 2014",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448814001518/zmpt_10k.htm",
-  },
-  {
-    fileName: "2012 Annual Report",
-    date: "March 29, 2013",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448813001584/zmtp_10k.htm",
-  },
-  {
-    fileName: "2011 Annual Report",
-    date: "March 30, 2012",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448812001548/zoom_10k.htm",
-  },
-  {
-    fileName: "2010 Annual Report",
-    date: "March 29, 2011",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448811000969/zmtp_10k.htm",
-  },
-  {
-    fileName: "2009 Annual Report",
-    date: "March 31, 2010",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448810001043/zmtp_10k.htm",
-  },
-]);
+];
+
+// 筛选后的数据
+const filteredData = computed(() => {
+  let data = state.secFilingsData;
+
+  if (state.selectedYear) {
+    data = data.filter((item) => item.year === state.selectedYear);
+  }
+
+  return data;
+});
+
+// 分页数据
+const paginatedData = computed(() => {
+  const start = (state.currentPage - 1) * state.pageSize;
+  const end = start + state.pageSize;
+  return filteredData.value.slice(start, end);
+});
+
+// 总页数
+const totalPages = computed(() => {
+  return Math.ceil(filteredData.value.length / state.pageSize);
+});
+
+// 当前页起始索引
+const startIndex = computed(() => {
+  return (state.currentPage - 1) * state.pageSize + 1;
+});
+
+// 当前页结束索引
+const endIndex = computed(() => {
+  const end = state.currentPage * state.pageSize;
+  return Math.min(end, filteredData.value.length);
+});
+
+// 处理年份变化
+const handleYearChange = (value) => {
+  state.selectedYear = value;
+  state.currentPage = 1;
+};
+
+// 处理页码变化
+const handlePageChange = (page) => {
+  state.currentPage = page;
+};
+
+// 处理每页条数变化
+const handlePageSizeChange = (size) => {
+  state.pageSize = size;
+  state.currentPage = 1;
+};
 </script>

 <style scoped lang="scss">
@ -186,117 +320,103 @@ const annualReports = ref([
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
-}
-.financials-container {
-  max-width: 1200px;
-  margin: 0 auto;
+  min-height: 100vh;
  padding: 20px;
 }

-.financials-title {
+.sec-filings-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 40px;
+}
+
+.page-title {
  font-size: 40px;
-  text-align: center;
-  margin-bottom: 60px;
+  font-weight: bold;
  color: #333;
+  margin-bottom: 40px;
 }

-.section {
-  margin-bottom: 60px;
-}
-
-.section-title {
-  font-size: 18px;
-  margin-bottom: 20px;
-  color: #333;
-}
-
-.overview-text {
-  font-size: 16px;
-  line-height: 1.6;
-  color: #333;
+.filters {
+  display: flex;
+  gap: 40px;
  margin-bottom: 30px;
+  align-items: end;
 }

-.tabs {
+.filter-group {
  display: flex;
-  margin-bottom: 20px;
+  flex-direction: column;
+  gap: 8px;
 }

-.tab {
-  padding: 10px 20px;
-  font-weight: bold;
-  cursor: pointer;
-  border-bottom: 2px solid transparent;
+.filter-label {
+  font-size: 18px;
+  color: #333;
+  font-weight: 500;
+}

-  &.active {
-    border-bottom: 2px solid #333;
+.table-container {
+  .n-data-table {
+    --n-th-color: #f5f5f5;
+    --n-th-text-color: #333;
+    --n-td-color: #fff;
+    --n-border-color: #e0e0e0;
  }
 }

-.reports-table {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-.table-header {
+.pagination-container {
  display: flex;
-  padding: 10px 0;
-  border-bottom: 1px solid #ccc;
-  font-weight: bold;
  justify-content: space-between;
-}
-
-.table-row {
-  display: flex;
-  padding: 15px 0;
-  border-bottom: 1px solid #eee;
  align-items: center;
-  justify-content: space-between;
-}
-.reports-list {
-  // max-height: 600px;
-  // overflow-y: auto;
-}
-.column {
-  &.file-name {
-    width: 25%;
-  }
-  &.date {
-    width: 25%;
-  }
-
-  &.download {
-    width: 25%;
-    text-align: right;
-    margin-right: 50px;
-  }
+  margin-top: 20px;
+  padding: 20px 0;
 }

-.pdf-icon {
-  width: 36px;
-  height: 36px;
-}
-
-.download-link {
-  color: #0078d7;
-  text-decoration: none;
-
-  &:hover {
-    text-decoration: underline;
-  }
-}
-
-.sec-text {
+.pagination-info {
  font-size: 16px;
-  line-height: 1.6;
+  color: #666;
 }

-.link {
-  color: #f00;
-  text-decoration: none;
+:deep(.n-data-table-th) {
+  background-color: #9e9e9e !important;
+  color: white !important;
+  font-weight: bold;
+  text-align: left;
+}

-  &:hover {
-    text-decoration: underline;
+:deep(.n-data-table-td) {
+  border-bottom: 1px solid #e0e0e0;
+}
+
+:deep(.n-data-table-tr:hover .n-data-table-td) {
+  background-color: #f9f9f9;
+}
+
+:deep(.n-select) {
+  .n-base-selection {
+    border: 1px solid #ccc;
+    border-radius: 4px;
+  }
+}
+
+:deep(.n-pagination) {
+  .n-pagination-item {
+    border: 1px solid #ccc;
+
+    &.n-pagination-item--active {
+      background-color: #969696;
+      border-color: #969696;
+      color: white;
+    }
+  }
+
+  .n-pagination-quick-jumper {
+    font-size: 16px;
+  }
+
+  .n-pagination-sizes {
+    font-size: 16px;
  }
 }
 </style>
--- a/src/views/financialinformation/secfilings/size1920/index.vue
+++ b/src/views/financialinformation/secfilings/size1920/index.vue
@ -1,183 +1,318 @@
 <template>
  <div class="page-container">
-    <div class="financials-container">
+    <div class="sec-filings-container">
      <!-- 标题 -->
-      <div class="financials-title">
-        {{ t("financialinformation.secfilings.title") }}
+      <div class="page-title">SEC Filings</div>
+
+      <!-- 筛选器 -->
+      <div class="filters">
+        <div class="filter-group">
+          <label class="filter-label">Filing year</label>
+          <n-select
+            v-model:value="state.selectedYear"
+            :options="state.yearOptions"
+            placeholder="- Any -"
+            style="width: 150px"
+            clearable
+            @update:value="handleYearChange"
+          />
+        </div>
+
+        <div class="filter-group">
+          <label class="filter-label">Items per page:</label>
+          <n-select
+            v-model:value="state.pageSize"
+            :options="state.pageSizeOptions"
+            style="width: 150px"
+            @update:value="handlePageSizeChange"
+          />
+        </div>
      </div>

-      <!-- 公司财务概览 -->
-      <section class="section">
-        <div class="section-title">
-          {{ t("financialinformation.secfilings.overview.title") }}
-        </div>
-        <p
-          class="overview-text"
-          v-html="t('financialinformation.secfilings.overview.desc')"
-        ></p>
-      </section>
+      <!-- 表格 -->
+      <div class="table-container">
+        <n-data-table
+          :columns="columns"
+          :data="paginatedData"
+          :pagination="false"
+          :bordered="false"
+          :size="'medium'"
+          :row-key="(row) => row.idx"
+        />

-      <!-- 年度报告 -->
-      <section class="section">
-        <div class="section-title">
-          {{ t("financialinformation.secfilings.annual_reports.title") }}
-        </div>
+        <!-- 分页器 -->
+        <div class="pagination-container">
+          <n-pagination
+            v-model:page="state.currentPage"
+            v-model:page-size="state.pageSize"
+            show-size-picker
+            show-quick-jumper
+            :item-count="filteredData.length"
+            :page-sizes="[10, 25, 50]"
+            @update:page="handlePageChange"
+            @update:page-size="handlePageSizeChange"
+          >
+            <template #prev>
+              <span>‹ Previous</span>
+            </template>
+            <template #next>
+              <span>Next ›</span>
+            </template>
+          </n-pagination>

-        <!-- 报告表格 -->
-        <div class="reports-table">
-          <div class="table-header">
-            <div class="column file-name">
-              {{
-                t("financialinformation.secfilings.annual_reports.file_name")
-              }}
-            </div>
-            <div class="column date">
-              {{ t("financialinformation.secfilings.annual_reports.date") }}
-            </div>
-            <div class="column download"></div>
-          </div>
-
-          <!-- 报告列表 -->
-          <div class="reports-list">
-            <div
-              class="table-row"
-              v-for="(report, index) in annualReports"
-              :key="index"
-            >
-              <div class="column file-name">{{ report.fileName }}</div>
-              <div class="column date">{{ report.date }}</div>
-              <div class="column download">
-                <a :href="report.downloadUrl" class="download-link">{{
-                  t("financialinformation.secfilings.annual_reports.view")
-                }}</a>
-              </div>
-            </div>
+          <div class="pagination-info">
+            Displaying {{ startIndex }} - {{ endIndex }} of
+            {{ filteredData.length }} results
          </div>
        </div>
-      </section>
-
-      <!-- SEC文件 -->
-      <section class="section">
-        <div class="section-title">
-          {{ t("financialinformation.secfilings.sec.title") }}
-        </div>
-        <p class="sec-text">
-          {{ t("financialinformation.secfilings.sec.desc") }}
-          <a
-            href="https://www.sec.gov/cgi-bin/browse-edgar?company=FiEE&match=starts-with&filenum=&State=&Country=&SIC=&myowner=exclude&action=getcompany"
-            class="link"
-            >{{ t("financialinformation.secfilings.sec.click_here") }}</a
-          >.
-        </p>
-      </section>
+      </div>
    </div>
  </div>
 </template>

 <script setup>
-import { ref } from "vue";
+import { reactive, computed, h, onMounted } from "vue";
+import { NSelect, NDataTable, NPagination, NButton, NIcon } from "naive-ui";
 import { useI18n } from "vue-i18n";
+import { useRouter } from "vue-router";
+import { fileList } from "@/dict/secFiles.js";

 const { t } = useI18n();
-// 年度报告数据
-const annualReports = ref([
+const router = useRouter();
+import iconLink from "@/assets/image/icon/icon-link.png";
+// 使用 reactive 管理所有状态
+const state = reactive({
+  selectedYear: null,
+  pageSize: 10,
+  currentPage: 1,
+
+  // 年份选项
+  yearOptions: [
+    { label: "- Any -", value: null },
+    { label: "2025", value: 2025 },
+    { label: "2024", value: 2024 },
+    { label: "2023", value: 2023 },
+    { label: "2022", value: 2022 },
+    { label: "2021", value: 2021 },
+    { label: "2020", value: 2020 },
+    { label: "2019", value: 2019 },
+    { label: "2018", value: 2018 },
+    { label: "2017", value: 2017 },
+    { label: "2016", value: 2016 },
+    { label: "2015", value: 2015 },
+    { label: "2014", value: 2014 },
+    { label: "2013", value: 2013 },
+    { label: "2012", value: 2012 },
+    { label: "2011", value: 2011 },
+    { label: "2010", value: 2010 },
+    { label: "2009", value: 2009 },
+  ],
+
+  // 每页条数选项
+  pageSizeOptions: [
+    { label: "10", value: 10 },
+    { label: "25", value: 25 },
+    { label: "50", value: 50 },
+  ],
+
+  // SEC文件数据
+  secFilingsData: [],
+});
+onMounted(() => {
+  // 月份名称映射
+  const monthNames = [
+    "Jan",
+    "Feb",
+    "Mar",
+    "Apr",
+    "May",
+    "Jun",
+    "Jul",
+    "Aug",
+    "Sep",
+    "Oct",
+    "Nov",
+    "Dec",
+  ];
+
+  state.secFilingsData = fileList.map((item, index) => {
+    // 从 filingDate 中提取年份，支持两种格式：
+    // 1. "Feb 04, 2019" 格式（英文）
+    // 2. "2025-10-24" 格式（ISO格式）转换为英文格式
+    let year = null;
+    let formattedDate = item.filingDate;
+
+    if (item.filingDate) {
+      if (item.filingDate.includes(", ")) {
+        // "Feb 04, 2019" 格式，已经是英文格式，保持不变
+        year = parseInt(item.filingDate.split(", ")[1]);
+      } else if (item.filingDate.includes("-")) {
+        // "2025-10-24" 格式，转换为 "Oct 24, 2025" 英文格式
+        const dateParts = item.filingDate.split("-");
+        const yearPart = parseInt(dateParts[0]);
+        const monthPart = parseInt(dateParts[1]);
+        const dayPart = parseInt(dateParts[2]);
+
+        year = yearPart;
+        const monthName = monthNames[monthPart - 1]; // 月份从1开始，数组从0开始
+        const dayFormatted = dayPart.toString().padStart(2, "0");
+        formattedDate = `${monthName} ${dayFormatted}, ${yearPart}`;
+      }
+    }
+
+    return {
+      ...item,
+      formattedDate: formattedDate, // 更新为统一的英文格式
+      year: year,
+    };
+  });
+});
+// 表格列定义
+const columns = [
  {
-    fileName: "2024 Annual Report",
-    date: "April 10, 2025",
-    downloadUrl:
-      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912625002538/fieeinc_10k.htm",
+    title: "Filing Date",
+    key: "formattedDate",
+    sorter: "default",
+    width: 150,
  },
  {
-    fileName: "2023 Annual Report",
-    date: "April 12, 2024",
-    downloadUrl:
-      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912624002449/miniminc_10k.htm",
+    title: "Form",
+    key: "form",
+    sorter: "default",
+    width: 120,
+    render: (row) => {
+      return h(
+        "a",
+        {
+          href: "javascript:void(0)",
+          style: {
+            color: "#0078d7",
+            textDecoration: "none",
+            cursor: "pointer",
+          },
+          onClick: (e) => {
+            e.preventDefault();
+            router.push({
+              path: "/secfilingsDefail",
+              query: {
+                idx: row.idx,
+              },
+            });
+          },
+          onMouseover: (e) => {
+            e.target.style.textDecoration = "underline";
+          },
+          onMouseout: (e) => {
+            e.target.style.textDecoration = "none";
+          },
+        },
+        row.form
+      );
+    },
  },
  {
-    fileName: "2022 Annual Report",
-    date: "March 31, 2023",
-    downloadUrl:
-      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000149315223010335/form10-k.htm",
+    title: "Description",
+    key: "description",
+    sorter: "default",
+    ellipsis: {
+      tooltip: true,
+    },
  },
  {
-    fileName: "2021 Annual Report",
-    date: "March 31, 2022",
-    downloadUrl:
-      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000149315222008365/form10-k.htm",
+    title: "View",
+    key: "view",
+    width: 150,
+    render: (row) => {
+      return h(
+        "div",
+        {
+          style: {
+            display: "flex",
+            gap: "8px",
+          },
+        },
+        [
+          h(
+            "a",
+            {
+              href: row.fileLink,
+              style: {
+                color: "#0078d7",
+                textDecoration: "none",
+                fontSize: "12px",
+              },
+              onMouseover: (e) => {
+                e.target.style.textDecoration = "underline";
+              },
+              onMouseout: (e) => {
+                e.target.style.textDecoration = "none";
+              },
+            },
+            h("img", {
+              src: iconLink,
+              alt: "link",
+              style: {
+                width: "24px",
+                height: "24px",
+              },
+            })
+          ),
+        ]
+      );
+    },
  },
-  {
-    fileName: "2020 Annual Report",
-    date: "April 13, 2021",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495421004133/zmtp_10k.htm",
-  },
-  {
-    fileName: "2019 Annual Report",
-    date: "April 15, 2020",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495420004069/zmtp_10k.htm",
-  },
-  {
-    fileName: "2018 Annual Report",
-    date: "April 1, 2019",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495419003878/zmtp_10k.htm",
-  },
-  {
-    fileName: "2017 Annual Report",
-    date: "March 30, 2018",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495418003402/zmtp_10k.htm",
-  },
-  {
-    fileName: "2016 Annual Report",
-    date: "March 22, 2017",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495417002279/zmtp_10k.htm",
-  },
-  {
-    fileName: "2015 Annual Report",
-    date: "March 15, 2016",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448816006596/zmtp_10k.htm",
-  },
-  {
-    fileName: "2014 Annual Report",
-    date: "March 24, 2015",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448815001308/zmtp_10k.htm",
-  },
-  {
-    fileName: "2013 Annual Report",
-    date: "March 31, 2014",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448814001518/zmpt_10k.htm",
-  },
-  {
-    fileName: "2012 Annual Report",
-    date: "March 29, 2013",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448813001584/zmtp_10k.htm",
-  },
-  {
-    fileName: "2011 Annual Report",
-    date: "March 30, 2012",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448812001548/zoom_10k.htm",
-  },
-  {
-    fileName: "2010 Annual Report",
-    date: "March 29, 2011",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448811000969/zmtp_10k.htm",
-  },
-  {
-    fileName: "2009 Annual Report",
-    date: "March 31, 2010",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448810001043/zmtp_10k.htm",
-  },
-]);
+];
+
+// 筛选后的数据
+const filteredData = computed(() => {
+  let data = state.secFilingsData;
+
+  if (state.selectedYear) {
+    data = data.filter((item) => item.year === state.selectedYear);
+  }
+
+  return data;
+});
+
+// 分页数据
+const paginatedData = computed(() => {
+  const start = (state.currentPage - 1) * state.pageSize;
+  const end = start + state.pageSize;
+  return filteredData.value.slice(start, end);
+});
+
+// 总页数
+const totalPages = computed(() => {
+  return Math.ceil(filteredData.value.length / state.pageSize);
+});
+
+// 当前页起始索引
+const startIndex = computed(() => {
+  return (state.currentPage - 1) * state.pageSize + 1;
+});
+
+// 当前页结束索引
+const endIndex = computed(() => {
+  const end = state.currentPage * state.pageSize;
+  return Math.min(end, filteredData.value.length);
+});
+
+// 处理年份变化
+const handleYearChange = (value) => {
+  state.selectedYear = value;
+  state.currentPage = 1;
+};
+
+// 处理页码变化
+const handlePageChange = (page) => {
+  state.currentPage = page;
+};
+
+// 处理每页条数变化
+const handlePageSizeChange = (size) => {
+  state.pageSize = size;
+  state.currentPage = 1;
+};
 </script>

 <style scoped lang="scss">
@ -186,117 +321,103 @@ const annualReports = ref([
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
-}
-.financials-container {
-  max-width: 1200px;
-  margin: 0 auto;
+  min-height: 100vh;
  padding: 20px;
 }

-.financials-title {
-  font-size: 40px;
-  text-align: center;
-  margin-bottom: 60px;
-  color: #333;
+.sec-filings-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 40px;
 }

-.section {
-  margin-bottom: 60px;
+.page-title {
+  font-size: 32px;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 40px;
 }

-.section-title {
-  font-size: 18px;
-  margin-bottom: 20px;
-  color: #333;
-}
-
-.overview-text {
-  font-size: 16px;
-  line-height: 1.6;
-  color: #333;
+.filters {
+  display: flex;
+  gap: 40px;
  margin-bottom: 30px;
+  align-items: end;
 }

-.tabs {
+.filter-group {
  display: flex;
-  margin-bottom: 20px;
+  flex-direction: column;
+  gap: 8px;
 }

-.tab {
-  padding: 10px 20px;
-  font-weight: bold;
-  cursor: pointer;
-  border-bottom: 2px solid transparent;
+.filter-label {
+  font-size: 14px;
+  color: #333;
+  font-weight: 500;
+}

-  &.active {
-    border-bottom: 2px solid #333;
+.table-container {
+  .n-data-table {
+    --n-th-color: #f5f5f5;
+    --n-th-text-color: #333;
+    --n-td-color: #fff;
+    --n-border-color: #e0e0e0;
  }
 }

-.reports-table {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-.table-header {
+.pagination-container {
  display: flex;
-  padding: 10px 0;
-  border-bottom: 1px solid #ccc;
-  font-weight: bold;
  justify-content: space-between;
-}
-
-.table-row {
-  display: flex;
-  padding: 15px 0;
-  border-bottom: 1px solid #eee;
  align-items: center;
-  justify-content: space-between;
+  margin-top: 20px;
+  padding: 20px 0;
 }
-.reports-list {
-  // max-height: 600px;
-  // overflow-y: auto;
-}
-.column {
-  &.file-name {
-    width: 25%;
-  }
-  &.date {
-    width: 25%;
-  }

-  &.download {
-    width: 25%;
-    text-align: right;
-    margin-right: 50px;
+.pagination-info {
+  font-size: 14px;
+  color: #666;
+}
+
+:deep(.n-data-table-th) {
+  background-color: #9e9e9e !important;
+  color: white !important;
+  font-weight: bold;
+  text-align: left;
+}
+
+:deep(.n-data-table-td) {
+  border-bottom: 1px solid #e0e0e0;
+}
+
+:deep(.n-data-table-tr:hover .n-data-table-td) {
+  background-color: #f9f9f9;
+}
+
+:deep(.n-select) {
+  .n-base-selection {
+    border: 1px solid #ccc;
+    border-radius: 4px;
  }
 }

-.pdf-icon {
-  width: 36px;
-  height: 36px;
-}
+:deep(.n-pagination) {
+  .n-pagination-item {
+    border: 1px solid #ccc;

-.download-link {
-  color: #0078d7;
-  text-decoration: none;
-
-  &:hover {
-    text-decoration: underline;
+    &.n-pagination-item--active {
+      background-color: #969696;
+      border-color: #969696;
+      color: white;
+    }
  }
-}

-.sec-text {
-  font-size: 16px;
-  line-height: 1.6;
-}
+  .n-pagination-quick-jumper {
+    font-size: 14px;
+  }

-.link {
-  color: #f00;
-  text-decoration: none;
-
-  &:hover {
-    text-decoration: underline;
+  .n-pagination-sizes {
+    font-size: 14px;
  }
 }
 </style>
--- a/src/views/financialinformation/secfilings/size375/index.vue
+++ b/src/views/financialinformation/secfilings/size375/index.vue
@ -1,301 +1,422 @@
 <template>
  <div class="page-container">
-    <div class="financials-container">
+    <div class="sec-filings-container">
      <!-- 标题 -->
-      <div class="financials-title">
-        {{ t("financialinformation.secfilings.title") }}
+      <div class="page-title">SEC Filings</div>
+
+      <!-- 筛选器 -->
+      <div class="filters">
+        <div class="filter-group">
+          <label class="filter-label">Filing year</label>
+          <n-select
+            v-model:value="state.selectedYear"
+            :options="state.yearOptions"
+            placeholder="- Any -"
+            style="width: 150px"
+            clearable
+            @update:value="handleYearChange"
+          />
+        </div>
+
+        <div class="filter-group">
+          <label class="filter-label">Items per page:</label>
+          <n-select
+            v-model:value="state.pageSize"
+            :options="state.pageSizeOptions"
+            style="width: 150px"
+            @update:value="handlePageSizeChange"
+          />
+        </div>
      </div>

-      <!-- 公司财务概览 -->
-      <section class="section">
-        <div class="section-title">
-          {{ t("financialinformation.secfilings.overview.title") }}
-        </div>
-        <p
-          class="overview-text"
-          v-html="t('financialinformation.secfilings.overview.desc')"
-        ></p>
-      </section>
+      <!-- 表格 -->
+      <div class="table-container">
+        <n-data-table
+          :columns="columns"
+          :data="paginatedData"
+          :pagination="false"
+          :row-key="(row) => row.idx"
+          :bordered="false"
+          :single-line="false"
+          :scroll-x="600"
+        />

-      <!-- 年度报告 -->
-      <section class="section">
-        <div class="section-title">
-          {{ t("financialinformation.secfilings.annual_reports.title") }}
-        </div>
+        <!-- 分页器 -->
+        <div class="pagination-container mt-[40px]">
+          <n-pagination
+            v-model:page="state.currentPage"
+            v-model:page-size="state.pageSize"
+            show-size-picker
+            :item-count="filteredData.length"
+            :page-sizes="[10, 25, 50]"
+            @update:page="handlePageChange"
+            @update:page-size="handlePageSizeChange"
+          >
+            <template #prev>
+              <span>‹</span>
+            </template>
+            <template #next>
+              <span> ›</span>
+            </template>
+          </n-pagination>

-        <!-- 报告表格 -->
-        <div class="reports-table">
-          <div class="table-header">
-            <div class="column file-name">
-              {{
-                t("financialinformation.secfilings.annual_reports.file_name")
-              }}
-            </div>
-            <div class="column date">
-              {{ t("financialinformation.secfilings.annual_reports.date") }}
-            </div>
-            <div class="column download"></div>
-          </div>
-
-          <!-- 报告列表 -->
-          <div class="reports-list">
-            <div
-              class="table-row"
-              v-for="(report, index) in annualReports"
-              :key="index"
-            >
-              <div class="column file-name">{{ report.fileName }}</div>
-              <div class="column date">{{ report.date }}</div>
-              <div class="column download">
-                <a :href="report.downloadUrl" class="download-link">{{
-                  t("financialinformation.secfilings.annual_reports.view")
-                }}</a>
-              </div>
-            </div>
+          <div class="pagination-info mt-[40px]">
+            Displaying {{ startIndex }} - {{ endIndex }} of
+            {{ filteredData.length }} results
          </div>
        </div>
-      </section>
-
-      <!-- SEC文件 -->
-      <section class="section">
-        <div class="section-title">
-          {{ t("financialinformation.secfilings.sec.title") }}
-        </div>
-        <p class="sec-text">
-          {{ t("financialinformation.secfilings.sec.desc") }}
-          <a
-            href="https://www.sec.gov/cgi-bin/browse-edgar?company=FiEE&match=starts-with&filenum=&State=&Country=&SIC=&myowner=exclude&action=getcompany"
-            class="link"
-            >{{ t("financialinformation.secfilings.sec.click_here") }}</a
-          >.
-        </p>
-      </section>
+      </div>
    </div>
  </div>
 </template>

 <script setup>
-import { ref } from "vue";
+import { reactive, computed, h, onMounted } from "vue";
+import { NSelect, NDataTable, NPagination, NButton, NIcon } from "naive-ui";
 import { useI18n } from "vue-i18n";
-
+import { useRouter } from "vue-router";
+import { fileList } from "@/dict/secFiles.js";
 const { t } = useI18n();
+const router = useRouter();
+import iconLink from "@/assets/image/icon/icon-link.png";
+// 使用 reactive 管理所有状态
+const state = reactive({
+  selectedYear: null,
+  pageSize: 10,
+  currentPage: 1,

-// 年度报告数据
-const annualReports = ref([
+  // 年份选项
+  yearOptions: [
+    { label: "- Any -", value: null },
+    { label: "2025", value: 2025 },
+    { label: "2024", value: 2024 },
+    { label: "2023", value: 2023 },
+    { label: "2022", value: 2022 },
+    { label: "2021", value: 2021 },
+    { label: "2020", value: 2020 },
+    { label: "2019", value: 2019 },
+    { label: "2018", value: 2018 },
+    { label: "2017", value: 2017 },
+    { label: "2016", value: 2016 },
+    { label: "2015", value: 2015 },
+    { label: "2014", value: 2014 },
+    { label: "2013", value: 2013 },
+    { label: "2012", value: 2012 },
+    { label: "2011", value: 2011 },
+    { label: "2010", value: 2010 },
+    { label: "2009", value: 2009 },
+  ],
+
+  // 每页条数选项
+  pageSizeOptions: [
+    { label: "10", value: 10 },
+    { label: "25", value: 25 },
+    { label: "50", value: 50 },
+  ],
+
+  // SEC文件数据
+  secFilingsData: [],
+});
+onMounted(() => {
+  // 月份名称映射
+  const monthNames = [
+    "Jan",
+    "Feb",
+    "Mar",
+    "Apr",
+    "May",
+    "Jun",
+    "Jul",
+    "Aug",
+    "Sep",
+    "Oct",
+    "Nov",
+    "Dec",
+  ];
+
+  state.secFilingsData = fileList.map((item, index) => {
+    // 从 filingDate 中提取年份，支持两种格式：
+    // 1. "Feb 04, 2019" 格式（英文）
+    // 2. "2025-10-24" 格式（ISO格式）转换为英文格式
+    let year = null;
+    let formattedDate = item.filingDate;
+
+    if (item.filingDate) {
+      if (item.filingDate.includes(", ")) {
+        // "Feb 04, 2019" 格式，已经是英文格式，保持不变
+        year = parseInt(item.filingDate.split(", ")[1]);
+      } else if (item.filingDate.includes("-")) {
+        // "2025-10-24" 格式，转换为 "Oct 24, 2025" 英文格式
+        const dateParts = item.filingDate.split("-");
+        const yearPart = parseInt(dateParts[0]);
+        const monthPart = parseInt(dateParts[1]);
+        const dayPart = parseInt(dateParts[2]);
+
+        year = yearPart;
+        const monthName = monthNames[monthPart - 1]; // 月份从1开始，数组从0开始
+        const dayFormatted = dayPart.toString().padStart(2, "0");
+        formattedDate = `${monthName} ${dayFormatted}, ${yearPart}`;
+      }
+    }
+
+    return {
+      ...item,
+      formattedDate: formattedDate, // 更新为统一的英文格式
+      year: year,
+    };
+  });
+});
+// 表格列定义
+const columns = [
  {
-    fileName: "2024 Annual Report",
-    date: "April 10, 2025",
-    downloadUrl:
-      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912625002538/fieeinc_10k.htm",
+    title: "Filing Date",
+    key: "formattedDate",
+    sorter: "default",
+    width: 150,
  },
  {
-    fileName: "2023 Annual Report",
-    date: "April 12, 2024",
-    downloadUrl:
-      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912624002449/miniminc_10k.htm",
+    title: "Form",
+    key: "form",
+    sorter: "default",
+    width: 120,
+    render: (row) => {
+      return h(
+        "a",
+        {
+          href: "javascript:void(0)",
+          style: {
+            color: "#0078d7",
+            textDecoration: "none",
+            cursor: "pointer",
+          },
+          onClick: (e) => {
+            e.preventDefault();
+            router.push({
+              path: "/secfilingsDefail",
+              query: {
+                filingDate: row.filingDate,
+              },
+            });
+          },
+          onMouseover: (e) => {
+            e.target.style.textDecoration = "underline";
+          },
+          onMouseout: (e) => {
+            e.target.style.textDecoration = "none";
+          },
+        },
+        row.form
+      );
+    },
  },
  {
-    fileName: "2022 Annual Report",
-    date: "March 31, 2023",
-    downloadUrl:
-      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000149315223010335/form10-k.htm",
+    title: "Description",
+    key: "description",
+    sorter: "default",
+    ellipsis: {
+      tooltip: true,
+    },
  },
  {
-    fileName: "2021 Annual Report",
-    date: "March 31, 2022",
-    downloadUrl:
-      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000149315222008365/form10-k.htm",
+    title: "View",
+    key: "view",
+    width: 80,
+    render: (row) => {
+      return h(
+        "div",
+        {
+          style: {
+            display: "flex",
+            gap: "8px",
+          },
+        },
+        [
+          h(
+            "a",
+            {
+              href: row.fileLink,
+              style: {
+                color: "#0078d7",
+                textDecoration: "none",
+                fontSize: "12px",
+              },
+              onMouseover: (e) => {
+                e.target.style.textDecoration = "underline";
+              },
+              onMouseout: (e) => {
+                e.target.style.textDecoration = "none";
+              },
+            },
+            h("img", {
+              src: iconLink,
+              alt: "link",
+              style: {
+                width: "24px",
+                height: "24px",
+              },
+            })
+          ),
+        ]
+      );
+    },
  },
-  {
-    fileName: "2020 Annual Report",
-    date: "April 13, 2021",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495421004133/zmtp_10k.htm",
-  },
-  {
-    fileName: "2019 Annual Report",
-    date: "April 15, 2020",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495420004069/zmtp_10k.htm",
-  },
-  {
-    fileName: "2018 Annual Report",
-    date: "April 1, 2019",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495419003878/zmtp_10k.htm",
-  },
-  {
-    fileName: "2017 Annual Report",
-    date: "March 30, 2018",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495418003402/zmtp_10k.htm",
-  },
-  {
-    fileName: "2016 Annual Report",
-    date: "March 22, 2017",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495417002279/zmtp_10k.htm",
-  },
-  {
-    fileName: "2015 Annual Report",
-    date: "March 15, 2016",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448816006596/zmtp_10k.htm",
-  },
-  {
-    fileName: "2014 Annual Report",
-    date: "March 24, 2015",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448815001308/zmtp_10k.htm",
-  },
-  {
-    fileName: "2013 Annual Report",
-    date: "March 31, 2014",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448814001518/zmpt_10k.htm",
-  },
-  {
-    fileName: "2012 Annual Report",
-    date: "March 29, 2013",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448813001584/zmtp_10k.htm",
-  },
-  {
-    fileName: "2011 Annual Report",
-    date: "March 30, 2012",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448812001548/zoom_10k.htm",
-  },
-  {
-    fileName: "2010 Annual Report",
-    date: "March 29, 2011",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448811000969/zmtp_10k.htm",
-  },
-  {
-    fileName: "2009 Annual Report",
-    date: "March 31, 2010",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448810001043/zmtp_10k.htm",
-  },
-]);
+];
+
+// 筛选后的数据
+const filteredData = computed(() => {
+  let data = state.secFilingsData;
+
+  if (state.selectedYear) {
+    data = data.filter((item) => item.year === state.selectedYear);
+  }
+
+  return data;
+});
+
+// 分页数据
+const paginatedData = computed(() => {
+  const start = (state.currentPage - 1) * state.pageSize;
+  const end = start + state.pageSize;
+  return filteredData.value.slice(start, end);
+});
+
+// 总页数
+const totalPages = computed(() => {
+  return Math.ceil(filteredData.value.length / state.pageSize);
+});
+
+// 当前页起始索引
+const startIndex = computed(() => {
+  return (state.currentPage - 1) * state.pageSize + 1;
+});
+
+// 当前页结束索引
+const endIndex = computed(() => {
+  const end = state.currentPage * state.pageSize;
+  return Math.min(end, filteredData.value.length);
+});
+
+// 处理年份变化
+const handleYearChange = (value) => {
+  state.selectedYear = value;
+  state.currentPage = 1;
+};
+
+// 处理页码变化
+const handlePageChange = (page) => {
+  state.currentPage = page;
+};
+
+// 处理每页条数变化
+const handlePageSizeChange = (size) => {
+  state.pageSize = size;
+  state.currentPage = 1;
+};
 </script>

 <style scoped lang="scss">
 .page-container {
-  background-image: url("@/assets/image/bg-375.png");
+  background-image: url("@/assets/image/bg.png");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
+  min-height: 100vh;
+  padding: 20px;
 }
-.financials-container {
+
+.sec-filings-container {
  margin: 0 auto;
  padding: 80px;
 }

-.financials-title {
+.page-title {
  font-size: 113px;
-  font-weight: 600;
-  text-align: center;
-  margin-bottom: 60px;
+  font-weight: bold;
  color: #333;
+  margin-bottom: 40px;
 }

-.section {
-  margin-bottom: 60px;
-}
-
-.section-title {
-  font-size: 92px;
-  font-weight: 600;
-  margin-bottom: 20px;
-  color: #333;
-}
-
-.overview-text {
-  font-size: 72px;
-  line-height: 1.6;
-  color: #333;
+.filters {
+  display: flex;
+  gap: 40px;
  margin-bottom: 30px;
+  align-items: end;
 }

-.tabs {
+.filter-group {
  display: flex;
-  margin-bottom: 20px;
+  flex-direction: column;
+  gap: 26px;
 }

-.tab {
-  padding: 10px 20px;
-  font-weight: bold;
-  cursor: pointer;
-  border-bottom: 2px solid transparent;
+.filter-label {
+  font-size: 92px;
+  color: #333;
+  font-weight: 500;
+}

-  &.active {
-    border-bottom: 2px solid #333;
+.table-container {
+  .n-data-table {
+    --n-th-color: #f5f5f5;
+    --n-th-text-color: #333;
+    --n-td-color: #fff;
+    --n-border-color: #e0e0e0;
  }
 }

-.reports-table {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-.table-header {
+.pagination-container {
  display: flex;
-  padding: 10px 0;
-  border-bottom: 1px solid #ccc;
-  font-weight: bold;
+  flex-wrap: wrap; // 添加这行
  justify-content: space-between;
-}
-
-.table-row {
-  display: flex;
-  padding: 45px 0;
-  border-bottom: 1px solid #eee;
  align-items: center;
-  justify-content: space-between;
-}
-.reports-list {
-  // max-height: 600px;
-  // overflow-y: auto;
-}
-.column {
-  &.file-name {
-    width: 35%;
-  }
-  &.date {
-    width: 35%;
-  }
-  &.download {
-    margin-right: 100px;
-  }
+  margin-top: 60px;
+  padding: 20px 0;
 }

-.pdf-icon {
-  width: 36px;
-  height: 36px;
-}
-
-.download-link {
-  color: #0078d7;
-  text-decoration: none;
-
-  &:hover {
-    text-decoration: underline;
-  }
-}
-
-.sec-text {
+.pagination-info {
  font-size: 72px;
-  line-height: 1.6;
+  color: #666;
 }

-.link {
-  color: #f00;
-  text-decoration: none;
+:deep(.n-data-table-th) {
+  background-color: #9e9e9e !important;
+  color: white !important;
+  font-weight: bold;
+  text-align: left;
+}

-  &:hover {
-    text-decoration: underline;
+:deep(.n-data-table-td) {
+  border-bottom: 1px solid #e0e0e0;
+}
+
+:deep(.n-data-table-tr:hover .n-data-table-td) {
+  background-color: #f9f9f9;
+}
+
+:deep(.n-select) {
+  .n-base-selection {
+    border: 1px solid #ccc;
+    border-radius: 4px;
+  }
+}
+
+:deep(.n-pagination) {
+  .n-pagination-item {
+    border: 1px solid #ccc;
+
+    &.n-pagination-item--active {
+      background-color: #969696;
+      border-color: #969696;
+      color: white;
+    }
+  }
+
+  .n-pagination-quick-jumper {
+    font-size: 72px;
+  }
+
+  .n-pagination-sizes {
+    font-size: 72px;
  }
 }
 </style>
--- a/src/views/financialinformation/secfilings/size768/index.vue
+++ b/src/views/financialinformation/secfilings/size768/index.vue
@ -1,183 +1,317 @@
 <template>
  <div class="page-container">
-    <div class="financials-container">
+    <div class="sec-filings-container">
      <!-- 标题 -->
-      <div class="financials-title">
-        {{ t("financialinformation.secfilings.title") }}
+      <div class="page-title">SEC Filings</div>
+
+      <!-- 筛选器 -->
+      <div class="filters">
+        <div class="filter-group">
+          <label class="filter-label">Filing year</label>
+          <n-select
+            v-model:value="state.selectedYear"
+            :options="state.yearOptions"
+            placeholder="- Any -"
+            style="width: 150px"
+            clearable
+            @update:value="handleYearChange"
+          />
+        </div>
+
+        <div class="filter-group">
+          <label class="filter-label">Items per page:</label>
+          <n-select
+            v-model:value="state.pageSize"
+            :options="state.pageSizeOptions"
+            style="width: 150px"
+            @update:value="handlePageSizeChange"
+          />
+        </div>
      </div>

-      <!-- 公司财务概览 -->
-      <section class="section">
-        <div class="section-title">
-          {{ t("financialinformation.secfilings.overview.title") }}
-        </div>
-        <p
-          class="overview-text"
-          v-html="t('financialinformation.secfilings.overview.desc')"
-        ></p>
-      </section>
+      <!-- 表格 -->
+      <div class="table-container">
+        <n-data-table
+          :columns="columns"
+          :data="paginatedData"
+          :pagination="false"
+          :bordered="false"
+          :size="'medium'"
+          :row-key="(row) => row.idx"
+        />

-      <!-- 年度报告 -->
-      <section class="section">
-        <div class="section-title">
-          {{ t("financialinformation.secfilings.annual_reports.title") }}
-        </div>
+        <!-- 分页器 -->
+        <div class="pagination-container">
+          <n-pagination
+            class="w-full"
+            v-model:page="state.currentPage"
+            v-model:page-size="state.pageSize"
+            show-size-picker
+            show-quick-jumper
+            :item-count="filteredData.length"
+            :page-sizes="[10, 25, 50]"
+            @update:page="handlePageChange"
+            @update:page-size="handlePageSizeChange"
+          >
+            <template #prev>
+              <span>‹ Previous</span>
+            </template>
+            <template #next>
+              <span>Next ›</span>
+            </template>
+          </n-pagination>

-        <!-- 报告表格 -->
-        <div class="reports-table">
-          <div class="table-header">
-            <div class="column file-name">
-              {{
-                t("financialinformation.secfilings.annual_reports.file_name")
-              }}
-            </div>
-            <div class="column date">
-              {{ t("financialinformation.secfilings.annual_reports.date") }}
-            </div>
-            <div class="column download"></div>
-          </div>
-
-          <!-- 报告列表 -->
-          <div class="reports-list">
-            <div
-              class="table-row"
-              v-for="(report, index) in annualReports"
-              :key="index"
-            >
-              <div class="column file-name">{{ report.fileName }}</div>
-              <div class="column date">{{ report.date }}</div>
-              <div class="column download">
-                <a :href="report.downloadUrl" class="download-link">{{
-                  t("financialinformation.secfilings.annual_reports.view")
-                }}</a>
-              </div>
-            </div>
+          <div class="pagination-info w-full mt-[20px]">
+            Displaying {{ startIndex }} - {{ endIndex }} of
+            {{ filteredData.length }} results
          </div>
        </div>
-      </section>
-
-      <!-- SEC文件 -->
-      <section class="section">
-        <div class="section-title">
-          {{ t("financialinformation.secfilings.sec.title") }}
-        </div>
-        <p class="sec-text">
-          {{ t("financialinformation.secfilings.sec.desc") }}
-          <a
-            href="https://www.sec.gov/cgi-bin/browse-edgar?company=FiEE&match=starts-with&filenum=&State=&Country=&SIC=&myowner=exclude&action=getcompany"
-            class="link"
-            >{{ t("financialinformation.secfilings.sec.click_here") }}</a
-          >.
-        </p>
-      </section>
+      </div>
    </div>
  </div>
 </template>

 <script setup>
-import { ref } from "vue";
+import { reactive, computed, h, onMounted } from "vue";
+import { NSelect, NDataTable, NPagination, NButton, NIcon } from "naive-ui";
 import { useI18n } from "vue-i18n";
-
+import { useRouter } from "vue-router";
+import { fileList } from "@/dict/secFiles.js";
 const { t } = useI18n();
-// 年度报告数据
-const annualReports = ref([
+const router = useRouter();
+import iconLink from "@/assets/image/icon/icon-link.png";
+// 使用 reactive 管理所有状态
+const state = reactive({
+  selectedYear: null,
+  pageSize: 10,
+  currentPage: 1,
+
+  // 年份选项
+  yearOptions: [
+    { label: "- Any -", value: null },
+    { label: "2025", value: 2025 },
+    { label: "2024", value: 2024 },
+    { label: "2023", value: 2023 },
+    { label: "2022", value: 2022 },
+    { label: "2021", value: 2021 },
+    { label: "2020", value: 2020 },
+    { label: "2019", value: 2019 },
+    { label: "2018", value: 2018 },
+    { label: "2017", value: 2017 },
+    { label: "2016", value: 2016 },
+    { label: "2015", value: 2015 },
+    { label: "2014", value: 2014 },
+    { label: "2013", value: 2013 },
+    { label: "2012", value: 2012 },
+    { label: "2011", value: 2011 },
+    { label: "2010", value: 2010 },
+    { label: "2009", value: 2009 },
+  ],
+
+  // 每页条数选项
+  pageSizeOptions: [
+    { label: "10", value: 10 },
+    { label: "25", value: 25 },
+    { label: "50", value: 50 },
+  ],
+
+  // SEC文件数据
+  secFilingsData: [],
+});
+onMounted(() => {
+  // 月份名称映射
+  const monthNames = [
+    "Jan",
+    "Feb",
+    "Mar",
+    "Apr",
+    "May",
+    "Jun",
+    "Jul",
+    "Aug",
+    "Sep",
+    "Oct",
+    "Nov",
+    "Dec",
+  ];
+
+  state.secFilingsData = fileList.map((item, index) => {
+    // 从 filingDate 中提取年份，支持两种格式：
+    // 1. "Feb 04, 2019" 格式（英文）
+    // 2. "2025-10-24" 格式（ISO格式）转换为英文格式
+    let year = null;
+    let formattedDate = item.filingDate;
+
+    if (item.filingDate) {
+      if (item.filingDate.includes(", ")) {
+        // "Feb 04, 2019" 格式，已经是英文格式，保持不变
+        year = parseInt(item.filingDate.split(", ")[1]);
+      } else if (item.filingDate.includes("-")) {
+        // "2025-10-24" 格式，转换为 "Oct 24, 2025" 英文格式
+        const dateParts = item.filingDate.split("-");
+        const yearPart = parseInt(dateParts[0]);
+        const monthPart = parseInt(dateParts[1]);
+        const dayPart = parseInt(dateParts[2]);
+
+        year = yearPart;
+        const monthName = monthNames[monthPart - 1]; // 月份从1开始，数组从0开始
+        const dayFormatted = dayPart.toString().padStart(2, "0");
+        formattedDate = `${monthName} ${dayFormatted}, ${yearPart}`;
+      }
+    }
+
+    return {
+      ...item,
+      formattedDate: formattedDate, // 更新为统一的英文格式
+      year: year,
+    };
+  });
+});
+// 表格列定义
+const columns = [
  {
-    fileName: "2024 Annual Report",
-    date: "April 10, 2025",
-    downloadUrl:
-      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912625002538/fieeinc_10k.htm",
+    title: "Filing Date",
+    key: "formattedDate",
+    sorter: "default",
+    width: 150,
  },
  {
-    fileName: "2023 Annual Report",
-    date: "April 12, 2024",
-    downloadUrl:
-      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912624002449/miniminc_10k.htm",
+    title: "Form",
+    key: "form",
+    sorter: "default",
+    width: 120,
+    render: (row) => {
+      return h(
+        "a",
+        {
+          href: "javascript:void(0)",
+          style: {
+            color: "#0078d7",
+            textDecoration: "none",
+            cursor: "pointer",
+          },
+          onClick: (e) => {
+            e.preventDefault();
+            router.push({
+              path: "/secfilingsDefail",
+              query: {
+                filingDate: row.filingDate,
+              },
+            });
+          },
+          onMouseover: (e) => {
+            e.target.style.textDecoration = "underline";
+          },
+          onMouseout: (e) => {
+            e.target.style.textDecoration = "none";
+          },
+        },
+        row.form
+      );
+    },
  },
  {
-    fileName: "2022 Annual Report",
-    date: "March 31, 2023",
-    downloadUrl:
-      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000149315223010335/form10-k.htm",
+    title: "Description",
+    key: "description",
+    sorter: "default",
+    ellipsis: {
+      tooltip: true,
+    },
  },
  {
-    fileName: "2021 Annual Report",
-    date: "March 31, 2022",
-    downloadUrl:
-      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000149315222008365/form10-k.htm",
+    title: "View",
+    key: "view",
+    render: (row) => {
+      return h(
+        "div",
+        {
+          style: {
+            display: "flex",
+            gap: "8px",
+          },
+        },
+        [
+          h(
+            "a",
+            {
+              href: row.fileLink,
+              style: {
+                color: "#0078d7",
+                textDecoration: "none",
+                fontSize: "12px",
+              },
+              onMouseover: (e) => {
+                e.target.style.textDecoration = "underline";
+              },
+              onMouseout: (e) => {
+                e.target.style.textDecoration = "none";
+              },
+            },
+            h("img", {
+              src: iconLink,
+              alt: "link",
+              style: {
+                width: "24px",
+                height: "24px",
+              },
+            })
+          ),
+        ]
+      );
+    },
  },
-  {
-    fileName: "2020 Annual Report",
-    date: "April 13, 2021",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495421004133/zmtp_10k.htm",
-  },
-  {
-    fileName: "2019 Annual Report",
-    date: "April 15, 2020",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495420004069/zmtp_10k.htm",
-  },
-  {
-    fileName: "2018 Annual Report",
-    date: "April 1, 2019",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495419003878/zmtp_10k.htm",
-  },
-  {
-    fileName: "2017 Annual Report",
-    date: "March 30, 2018",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495418003402/zmtp_10k.htm",
-  },
-  {
-    fileName: "2016 Annual Report",
-    date: "March 22, 2017",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495417002279/zmtp_10k.htm",
-  },
-  {
-    fileName: "2015 Annual Report",
-    date: "March 15, 2016",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448816006596/zmtp_10k.htm",
-  },
-  {
-    fileName: "2014 Annual Report",
-    date: "March 24, 2015",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448815001308/zmtp_10k.htm",
-  },
-  {
-    fileName: "2013 Annual Report",
-    date: "March 31, 2014",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448814001518/zmpt_10k.htm",
-  },
-  {
-    fileName: "2012 Annual Report",
-    date: "March 29, 2013",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448813001584/zmtp_10k.htm",
-  },
-  {
-    fileName: "2011 Annual Report",
-    date: "March 30, 2012",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448812001548/zoom_10k.htm",
-  },
-  {
-    fileName: "2010 Annual Report",
-    date: "March 29, 2011",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448811000969/zmtp_10k.htm",
-  },
-  {
-    fileName: "2009 Annual Report",
-    date: "March 31, 2010",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448810001043/zmtp_10k.htm",
-  },
-]);
+];
+
+// 筛选后的数据
+const filteredData = computed(() => {
+  let data = state.secFilingsData;
+
+  if (state.selectedYear) {
+    data = data.filter((item) => item.year === state.selectedYear);
+  }
+
+  return data;
+});
+
+// 分页数据
+const paginatedData = computed(() => {
+  const start = (state.currentPage - 1) * state.pageSize;
+  const end = start + state.pageSize;
+  return filteredData.value.slice(start, end);
+});
+
+// 总页数
+const totalPages = computed(() => {
+  return Math.ceil(filteredData.value.length / state.pageSize);
+});
+
+// 当前页起始索引
+const startIndex = computed(() => {
+  return (state.currentPage - 1) * state.pageSize + 1;
+});
+
+// 当前页结束索引
+const endIndex = computed(() => {
+  const end = state.currentPage * state.pageSize;
+  return Math.min(end, filteredData.value.length);
+});
+
+// 处理年份变化
+const handleYearChange = (value) => {
+  state.selectedYear = value;
+  state.currentPage = 1;
+};
+
+// 处理页码变化
+const handlePageChange = (page) => {
+  state.currentPage = page;
+};
+
+// 处理每页条数变化
+const handlePageSizeChange = (size) => {
+  state.pageSize = size;
+  state.currentPage = 1;
+};
 </script>

 <style scoped lang="scss">
@ -186,117 +320,104 @@ const annualReports = ref([
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
+  min-height: 100vh;
+  padding: 20px;
 }
-.financials-container {
+
+.sec-filings-container {
  max-width: calc(100% - 300px);
  margin: 0 auto;
  padding: 20px;
 }

-.financials-title {
+.page-title {
  font-size: 85px;
-  text-align: center;
-  margin-bottom: 60px;
+  font-weight: bold;
  color: #333;
+  margin-bottom: 40px;
 }

-.section {
-  margin-bottom: 60px;
-}
-
-.section-title {
-  font-size: 50px;
-  margin-bottom: 20px;
-  color: #333;
-}
-
-.overview-text {
-  font-size: 40px;
-  line-height: 1.6;
-  color: #333;
+.filters {
+  display: flex;
+  gap: 40px;
  margin-bottom: 30px;
+  align-items: end;
 }

-.tabs {
+.filter-group {
  display: flex;
-  margin-bottom: 20px;
+  flex-direction: column;
+  gap: 8px;
 }

-.tab {
-  padding: 10px 20px;
-  font-weight: bold;
-  cursor: pointer;
-  border-bottom: 2px solid transparent;
+.filter-label {
+  font-size: 50px;
+  color: #333;
+  font-weight: 500;
+}

-  &.active {
-    border-bottom: 2px solid #333;
+.table-container {
+  .n-data-table {
+    --n-th-color: #f5f5f5;
+    --n-th-text-color: #333;
+    --n-td-color: #fff;
+    --n-border-color: #e0e0e0;
  }
 }

-.reports-table {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-.table-header {
+.pagination-container {
  display: flex;
-  padding: 10px 0;
-  border-bottom: 1px solid #ccc;
-  font-weight: bold;
+  flex-wrap: wrap; // 添加这行
  justify-content: space-between;
-}
-
-.table-row {
-  display: flex;
-  padding: 15px 0;
-  border-bottom: 1px solid #eee;
  align-items: center;
-  justify-content: space-between;
-}
-.reports-list {
-  // max-height: 600px;
-  // overflow-y: auto;
-}
-.column {
-  &.file-name {
-    width: 25%;
-  }
-  &.date {
-    width: 25%;
-  }
-
-  &.download {
-    width: 25%;
-    text-align: right;
-    margin-right: 50px;
-  }
+  margin-top: 20px;
+  padding: 20px 0;
 }

-.pdf-icon {
-  width: 36px;
-  height: 36px;
-}
-
-.download-link {
-  color: #0078d7;
-  text-decoration: none;
-
-  &:hover {
-    text-decoration: underline;
-  }
-}
-
-.sec-text {
+.pagination-info {
  font-size: 40px;
-  line-height: 1.6;
+  color: #666;
 }

-.link {
-  color: #f00;
-  text-decoration: none;
+:deep(.n-data-table-th) {
+  background-color: #9e9e9e !important;
+  color: white !important;
+  font-weight: bold;
+  text-align: left;
+}

-  &:hover {
-    text-decoration: underline;
+:deep(.n-data-table-td) {
+  border-bottom: 1px solid #e0e0e0;
+}
+
+:deep(.n-data-table-tr:hover .n-data-table-td) {
+  background-color: #f9f9f9;
+}
+
+:deep(.n-select) {
+  .n-base-selection {
+    border: 1px solid #ccc;
+    border-radius: 4px;
+  }
+}
+
+:deep(.n-pagination) {
+  .n-pagination-item {
+    border: 1px solid #ccc;
+
+    &.n-pagination-item--active {
+      background-color: #969696;
+      border-color: #969696;
+      color: white;
+    }
+  }
+
+  .n-pagination-quick-jumper {
+    font-size: 40px;
+  }
+
+  .n-pagination-sizes {
+    font-size: 40px;
  }
 }
 </style>
--- a/src/views/financialinformation/secfilingsdetail/index.vue
+++ b/src/views/financialinformation/secfilingsdetail/index.vue
@ -0,0 +1,34 @@
+<script setup>
+import { computed } from "vue";
+import { useWindowSize } from "@vueuse/core";
+
+import size375 from "@/views/financialinformation/secfilingsdetail/size375/index.vue";
+import size768 from "@/views/financialinformation/secfilingsdetail/size768/index.vue";
+import size1440 from "@/views/financialinformation/secfilingsdetail/size1440/index.vue";
+import size1920 from "@/views/financialinformation/secfilingsdetail/size1920/index.vue";
+import { useRouter } from "vue-router";
+import { useI18n } from "vue-i18n";
+
+const router = useRouter();
+const { width } = useWindowSize();
+const { t } = useI18n();
+
+const viewComponent = computed(() => {
+  const viewWidth = width.value;
+  if (viewWidth <= 450) {
+    return size375;
+  } else if (viewWidth <= 1100) {
+    return size768;
+  } else if (viewWidth <= 1500) {
+    return size1440;
+  } else if (viewWidth <= 1920 || viewWidth > 1920) {
+    return size1920;
+  }
+});
+</script>
+
+<template>
+  <component :is="viewComponent" />
+</template>
+
+<style scoped lang="scss"></style>
--- a/src/views/financialinformation/secfilingsdetail/size1440/index.vue
+++ b/src/views/financialinformation/secfilingsdetail/size1440/index.vue
@ -0,0 +1,201 @@
+<template>
+  <div class="page-container">
+    <div class="sec-filing-detail-container">
+      <!-- 标题 -->
+      <div class="page-title">SEC Filing Details</div>
+
+      <!-- Document Details 部分 -->
+      <div class="section">
+        <h2 class="section-title">Document Details</h2>
+        <div class="details-grid">
+          <div class="detail-item">
+            <span class="detail-label">Form:</span>
+            <a :href="filingData.htmlLink" class="detail-value link">{{
+              filingData.form
+            }}</a>
+          </div>
+          <div class="detail-item">
+            <span class="detail-label">Filing Date:</span>
+            <span class="detail-value">{{ filingData.filingDate }}</span>
+          </div>
+          <div class="detail-item">
+            <span class="detail-label">Form Description:</span>
+            <span class="detail-value">{{ filingData.formDescription }}</span>
+          </div>
+          <div class="detail-item">
+            <span class="detail-label">Company:</span>
+            <span class="detail-value">{{ filingData.company }}</span>
+          </div>
+          <div class="detail-item">
+            <span class="detail-label">Issuer:</span>
+            <span class="detail-value">{{ filingData.issuer }}</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Filing Formats 部分 -->
+      <div class="section">
+        <h2 class="section-title">Filing Formats</h2>
+        <div class="formats-list">
+          <div class="format-item">
+            <img :src="iconLink" alt="link" class="format-icon" />
+            <a :href="filingData.htmlLink" class="format-link" target="_blank"
+              >View HTML</a
+            >
+          </div>
+        </div>
+      </div>
+
+      <!-- XBRL 部分 -->
+      <div
+        v-if="
+          Array.isArray(filingData.dataFiles) && filingData.dataFiles.length > 0
+        "
+        class="section"
+      >
+        <h2 class="section-title">XBRL</h2>
+        <div class="formats-list">
+          <div
+            class="format-item"
+            v-for="(item, idx) in filingData.dataFiles"
+            :key="idx"
+          >
+            <img :src="iconLink" alt="link" class="format-icon" />
+            <a :href="item.fileUrl" class="format-link" target="_blank">{{
+              item.description
+            }}</a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import iconLink from "@/assets/image/icon/icon-link.png";
+import { fileList } from "@/dict/secFiles.js";
+import { useRoute } from "vue-router";
+
+// 这里可以根据路由参数或props获取具体的文件详情
+const filingData = ref({
+  form: "",
+  filingDate: "",
+  formDescription: "",
+  company: "",
+  issuer: "",
+  htmlLink: "#",
+});
+
+const route = useRoute();
+
+onMounted(() => {
+  const { idx } = route.query;
+  const file = fileList.find((item) => item.idx == idx);
+  if (file) {
+    filingData.value = {
+      form: file.form,
+      filingDate: file.filingDate,
+      formDescription: file.formDescription,
+      htmlLink: file.fileLink || "#",
+      dataFiles: file.dataFiles || [],
+      company: "FiEE, Inc. ",
+      issuer: "FiEE, Inc. ",
+    };
+  }
+  // console.log(filingData.value);
+});
+</script>
+
+<style scoped lang="scss">
+.page-container {
+  background-image: url("@/assets/image/bg.png");
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+  min-height: 100vh;
+  padding: 20px;
+}
+
+.sec-filing-detail-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 40px;
+}
+
+.page-title {
+  font-size: 40px;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 40px;
+}
+
+.section {
+  margin-bottom: 40px;
+}
+
+.section-title {
+  font-size: 18px;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 20px;
+}
+
+.details-grid {
+  display: grid;
+  gap: 15px;
+}
+
+.detail-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+}
+
+.detail-label {
+  font-weight: bold;
+  color: #333;
+  min-width: 150px;
+  flex-shrink: 0;
+}
+
+.detail-value {
+  color: #333;
+  line-height: 1.5;
+}
+
+.link {
+  color: #0078d7;
+  text-decoration: underline;
+  cursor: pointer;
+  &:hover {
+    text-decoration: none;
+  }
+}
+.formats-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.format-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.format-icon {
+  width: 24px;
+  height: 24px;
+}
+
+.format-link {
+  color: #0078d7;
+  text-decoration: underline;
+  font-size: 14px;
+
+  &:hover {
+    text-decoration: none;
+  }
+}
+</style>
--- a/src/views/financialinformation/secfilingsdetail/size1920/index.vue
+++ b/src/views/financialinformation/secfilingsdetail/size1920/index.vue
@ -0,0 +1,200 @@
+<template>
+  <div class="page-container">
+    <div class="sec-filing-detail-container">
+      <!-- 标题 -->
+      <div class="page-title">SEC Filing Details</div>
+
+      <!-- Document Details 部分 -->
+      <div class="section">
+        <h2 class="section-title">Document Details</h2>
+        <div class="details-grid">
+          <div class="detail-item">
+            <span class="detail-label">Form:</span>
+            <a :href="filingData.htmlLink" class="detail-value link">{{
+              filingData.form
+            }}</a>
+          </div>
+          <div class="detail-item">
+            <span class="detail-label">Filing Date:</span>
+            <span class="detail-value">{{ filingData.filingDate }}</span>
+          </div>
+          <div class="detail-item">
+            <span class="detail-label">Form Description:</span>
+            <span class="detail-value">{{ filingData.formDescription }}</span>
+          </div>
+          <div class="detail-item">
+            <span class="detail-label">Company:</span>
+            <span class="detail-value">{{ filingData.company }}</span>
+          </div>
+          <div class="detail-item">
+            <span class="detail-label">Issuer:</span>
+            <span class="detail-value">{{ filingData.issuer }}</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Filing Formats 部分 -->
+      <div class="section">
+        <h2 class="section-title">Filing Formats</h2>
+        <div class="formats-list">
+          <div class="format-item">
+            <img :src="iconLink" alt="link" class="format-icon" />
+            <a :href="filingData.htmlLink" class="format-link" target="_blank"
+              >View HTML</a
+            >
+          </div>
+        </div>
+      </div>
+
+      <!-- XBRL 部分 -->
+      <div
+        v-if="
+          Array.isArray(filingData.dataFiles) && filingData.dataFiles.length > 0
+        "
+        class="section"
+      >
+        <h2 class="section-title">XBRL</h2>
+        <div class="formats-list">
+          <div
+            class="format-item"
+            v-for="(item, idx) in filingData.dataFiles"
+            :key="idx"
+          >
+            <img :src="iconLink" alt="link" class="format-icon" />
+            <a :href="item.fileUrl" class="format-link" target="_blank">{{
+              item.description
+            }}</a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import iconLink from "@/assets/image/icon/icon-link.png";
+import { fileList } from "@/dict/secFiles.js";
+import { useRoute } from "vue-router";
+
+// 这里可以根据路由参数或props获取具体的文件详情
+const filingData = ref({
+  form: "",
+  filingDate: "",
+  formDescription: "",
+  company: "",
+  issuer: "",
+  htmlLink: "#",
+});
+
+const route = useRoute();
+
+onMounted(() => {
+  const { idx } = route.query;
+  const file = fileList.find((item) => item.idx == idx);
+  if (file) {
+    filingData.value = {
+      form: file.form,
+      filingDate: file.filingDate,
+      formDescription: file.formDescription,
+      htmlLink: file.fileLink || "#",
+      dataFiles: file.dataFiles || [],
+      company: "FiEE, Inc. ",
+      issuer: "FiEE, Inc. ",
+    };
+  }
+});
+</script>
+
+<style scoped lang="scss">
+.page-container {
+  background-image: url("@/assets/image/bg.png");
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+  min-height: 100vh;
+  padding: 20px;
+}
+
+.sec-filing-detail-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 40px;
+}
+
+.page-title {
+  font-size: 32px;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 40px;
+}
+
+.section {
+  margin-bottom: 40px;
+}
+
+.section-title {
+  font-size: 24px;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 20px;
+}
+
+.details-grid {
+  display: grid;
+  gap: 15px;
+}
+
+.detail-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+}
+
+.detail-label {
+  font-weight: bold;
+  color: #333;
+  min-width: 150px;
+  flex-shrink: 0;
+}
+
+.detail-value {
+  color: #333;
+  line-height: 1.5;
+}
+
+.link {
+  color: #0078d7;
+  text-decoration: underline;
+  cursor: pointer;
+  &:hover {
+    text-decoration: none;
+  }
+}
+.formats-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.format-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.format-icon {
+  width: 24px;
+  height: 24px;
+}
+
+.format-link {
+  color: #0078d7;
+  text-decoration: underline;
+  font-size: 14px;
+
+  &:hover {
+    text-decoration: none;
+  }
+}
+</style>
--- a/src/views/financialinformation/secfilingsdetail/size375/index.vue
+++ b/src/views/financialinformation/secfilingsdetail/size375/index.vue
@ -0,0 +1,200 @@
+<template>
+  <div class="page-container">
+    <div class="sec-filing-detail-container">
+      <!-- 标题 -->
+      <div class="page-title">SEC Filing Details</div>
+
+      <!-- Document Details 部分 -->
+      <div class="section">
+        <h2 class="section-title">Document Details</h2>
+        <div class="details-grid">
+          <div class="detail-item">
+            <span class="detail-label">Form:</span>
+            <a :href="filingData.htmlLink" class="detail-value link">{{
+              filingData.form
+            }}</a>
+          </div>
+          <div class="detail-item">
+            <span class="detail-label">Filing Date:</span>
+            <span class="detail-value">{{ filingData.filingDate }}</span>
+          </div>
+          <div class="detail-item">
+            <span class="detail-label">Form Description:</span>
+            <span class="detail-value">{{ filingData.formDescription }}</span>
+          </div>
+          <div class="detail-item">
+            <span class="detail-label">Company:</span>
+            <span class="detail-value">{{ filingData.company }}</span>
+          </div>
+          <div class="detail-item">
+            <span class="detail-label">Issuer:</span>
+            <span class="detail-value">{{ filingData.issuer }}</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Filing Formats 部分 -->
+      <div class="section">
+        <h2 class="section-title">Filing Formats</h2>
+        <div class="formats-list">
+          <div class="format-item">
+            <img :src="iconLink" alt="link" class="format-icon" />
+            <a :href="filingData.htmlLink" class="format-link" target="_blank"
+              >View HTML</a
+            >
+          </div>
+        </div>
+      </div>
+
+      <!-- XBRL 部分 -->
+      <div
+        v-if="
+          Array.isArray(filingData.dataFiles) && filingData.dataFiles.length > 0
+        "
+        class="section"
+      >
+        <h2 class="section-title">XBRL</h2>
+        <div class="formats-list">
+          <div
+            class="format-item"
+            v-for="(item, idx) in filingData.dataFiles"
+            :key="idx"
+          >
+            <img :src="iconLink" alt="link" class="format-icon" />
+            <a :href="item.fileUrl" class="format-link" target="_blank">{{
+              item.description
+            }}</a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import iconLink from "@/assets/image/icon/icon-link.png";
+import { fileList } from "@/dict/secFiles.js";
+import { useRoute } from "vue-router";
+
+// 这里可以根据路由参数或props获取具体的文件详情
+const filingData = ref({
+  form: "",
+  filingDate: "",
+  formDescription: "",
+  company: "",
+  issuer: "",
+  htmlLink: "#",
+});
+
+const route = useRoute();
+
+onMounted(() => {
+  const { idx } = route.query;
+  const file = fileList.find((item) => item.idx == idx);
+  if (file) {
+    filingData.value = {
+      form: file.form,
+      filingDate: file.filingDate,
+      formDescription: file.formDescription,
+      htmlLink: file.fileLink || "#",
+      dataFiles: file.dataFiles || [],
+      company: "FiEE, Inc. ",
+      issuer: "FiEE, Inc. ",
+    };
+  }
+  // console.log(filingData.value);
+});
+</script>
+
+<style scoped lang="scss">
+.page-container {
+  background-image: url("@/assets/image/bg.png");
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+  min-height: 100vh;
+  padding: 20px;
+}
+
+.sec-filing-detail-container {
+  margin: 0 auto;
+  padding: 80px;
+}
+
+.page-title {
+  font-size: 113px;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 40px;
+}
+
+.section {
+  margin-bottom: 40px;
+}
+
+.section-title {
+  font-size: 92px;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 20px;
+}
+
+.details-grid {
+  display: grid;
+  gap: 30px;
+}
+
+.detail-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 40px;
+}
+
+.detail-label {
+  font-weight: bold;
+  color: #333;
+  min-width: 150px;
+  flex-shrink: 0;
+}
+
+.detail-value {
+  color: #333;
+  line-height: 1.5;
+}
+
+.link {
+  color: #0078d7;
+  text-decoration: underline;
+  cursor: pointer;
+  &:hover {
+    text-decoration: none;
+  }
+}
+.formats-list {
+  display: flex;
+  flex-direction: column;
+  gap: 40px;
+}
+
+.format-item {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.format-icon {
+  width: 96px;
+  height: 96px;
+}
+
+.format-link {
+  color: #0078d7;
+  text-decoration: underline;
+  font-size: 72px;
+
+  &:hover {
+    text-decoration: none;
+  }
+}
+</style>
--- a/src/views/financialinformation/secfilingsdetail/size768/index.vue
+++ b/src/views/financialinformation/secfilingsdetail/size768/index.vue
@ -0,0 +1,201 @@
+<template>
+  <div class="page-container">
+    <div class="sec-filing-detail-container">
+      <!-- 标题 -->
+      <div class="page-title">SEC Filing Details</div>
+
+      <!-- Document Details 部分 -->
+      <div class="section">
+        <h2 class="section-title">Document Details</h2>
+        <div class="details-grid">
+          <div class="detail-item">
+            <span class="detail-label">Form:</span>
+            <a :href="filingData.htmlLink" class="detail-value link">{{
+              filingData.form
+            }}</a>
+          </div>
+          <div class="detail-item">
+            <span class="detail-label">Filing Date:</span>
+            <span class="detail-value">{{ filingData.filingDate }}</span>
+          </div>
+          <div class="detail-item">
+            <span class="detail-label">Form Description:</span>
+            <span class="detail-value">{{ filingData.formDescription }}</span>
+          </div>
+          <div class="detail-item">
+            <span class="detail-label">Company:</span>
+            <span class="detail-value">{{ filingData.company }}</span>
+          </div>
+          <div class="detail-item">
+            <span class="detail-label">Issuer:</span>
+            <span class="detail-value">{{ filingData.issuer }}</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Filing Formats 部分 -->
+      <div class="section">
+        <h2 class="section-title">Filing Formats</h2>
+        <div class="formats-list">
+          <div class="format-item">
+            <img :src="iconLink" alt="link" class="format-icon" />
+            <a :href="filingData.htmlLink" class="format-link" target="_blank"
+              >View HTML</a
+            >
+          </div>
+        </div>
+      </div>
+
+      <!-- XBRL 部分 -->
+      <div
+        v-if="
+          Array.isArray(filingData.dataFiles) && filingData.dataFiles.length > 0
+        "
+        class="section"
+      >
+        <h2 class="section-title">XBRL</h2>
+        <div class="formats-list">
+          <div
+            class="format-item"
+            v-for="(item, idx) in filingData.dataFiles"
+            :key="idx"
+          >
+            <img :src="iconLink" alt="link" class="format-icon" />
+            <a :href="item.fileUrl" class="format-link" target="_blank">{{
+              item.description
+            }}</a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import iconLink from "@/assets/image/icon/icon-link.png";
+import { fileList } from "@/dict/secFiles.js";
+import { useRoute } from "vue-router";
+
+// 这里可以根据路由参数或props获取具体的文件详情
+const filingData = ref({
+  form: "",
+  filingDate: "",
+  formDescription: "",
+  company: "",
+  issuer: "",
+  htmlLink: "#",
+});
+
+const route = useRoute();
+
+onMounted(() => {
+  const { idx } = route.query;
+  const file = fileList.find((item) => item.idx == idx);
+  if (file) {
+    filingData.value = {
+      form: file.form,
+      filingDate: file.filingDate,
+      formDescription: file.formDescription,
+      htmlLink: file.fileLink || "#",
+      dataFiles: file.dataFiles || [],
+      company: "FiEE, Inc. ",
+      issuer: "FiEE, Inc. ",
+    };
+  }
+  // console.log(filingData.value);
+});
+</script>
+
+<style scoped lang="scss">
+.page-container {
+  background-image: url("@/assets/image/bg.png");
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+  min-height: 100vh;
+  padding: 20px;
+}
+
+.sec-filing-detail-container {
+  max-width: calc(100% - 300px);
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.page-title {
+  font-size: 85px;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 40px;
+}
+
+.section {
+  margin-bottom: 40px;
+}
+
+.section-title {
+  font-size: 50px;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 20px;
+}
+
+.details-grid {
+  display: grid;
+  gap: 25px;
+}
+
+.detail-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 20px;
+}
+
+.detail-label {
+  font-weight: bold;
+  color: #333;
+  min-width: 150px;
+  flex-shrink: 0;
+}
+
+.detail-value {
+  color: #333;
+  line-height: 1.5;
+}
+
+.link {
+  color: #0078d7;
+  text-decoration: underline;
+  cursor: pointer;
+  &:hover {
+    text-decoration: none;
+  }
+}
+.formats-list {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.format-item {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.format-icon {
+  width: 68px;
+  height: 68px;
+}
+
+.format-link {
+  color: #0078d7;
+  text-decoration: underline;
+  font-size: 40px;
+
+  &:hover {
+    text-decoration: none;
+  }
+}
+</style>
--- a/src/views/footerLinks/cookiesSettings/index.vue
+++ b/src/views/footerLinks/cookiesSettings/index.vue
@ -0,0 +1,34 @@
+<script setup>
+import { computed } from 'vue'
+import { useWindowSize } from '@vueuse/core'
+
+import size375 from '@/views/footerLinks/cookiesSettings/size375/index.vue'
+import size768 from '@/views/footerLinks/cookiesSettings/size375/index.vue'
+import size1440 from '@/views/footerLinks/cookiesSettings/size1920/index.vue'
+import size1920 from '@/views/footerLinks/cookiesSettings/size1920/index.vue'
+import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+
+const router = useRouter()
+const { width } = useWindowSize()
+const { t } = useI18n()
+
+const viewComponent = computed(() => {
+  const viewWidth = width.value
+  if (viewWidth <= 450) {
+    return size375
+  } else if (viewWidth <= 1100) {
+    return size768
+  } else if (viewWidth <= 1500) {
+    return size1440
+  } else if (viewWidth <= 1920 || viewWidth > 1920) {
+    return size1920
+  }
+})
+</script>
+
+<template>
+  <component :is="viewComponent" />
+</template>
+
+<style scoped lang="scss"></style>
--- a/src/views/footerLinks/cookiesSettings/size1920/index.vue
+++ b/src/views/footerLinks/cookiesSettings/size1920/index.vue
@ -0,0 +1,14 @@
+<script setup>
+import { NCarousel, NDivider, NMarquee, NPopselect } from 'naive-ui'
+import { onUnmounted, ref, watch, onMounted, computed } from 'vue'
+</script>
+
+<template>
+  <header className="header">
+    1920 cookiesSettings
+  </header>
+  <main ref="main"></main>
+</template>
+
+<style scoped lang="scss">
+</style>
--- a/src/views/footerLinks/cookiesSettings/size375/index.vue
+++ b/src/views/footerLinks/cookiesSettings/size375/index.vue
@ -0,0 +1,14 @@
+<script setup>
+import { NCarousel, NDivider, NMarquee, NPopselect } from 'naive-ui'
+import { onUnmounted, ref, watch, onMounted, computed } from 'vue'
+</script>
+
+<template>
+  <header className="header">
+    375 cookiesSettings
+  </header>
+  <main ref="main"></main>
+</template>
+
+<style scoped lang="scss">
+</style>
--- a/src/views/footerLinks/privacyPolicy/index.vue
+++ b/src/views/footerLinks/privacyPolicy/index.vue
@ -0,0 +1,34 @@
+<script setup>
+import { computed } from 'vue'
+import { useWindowSize } from '@vueuse/core'
+
+import size375 from '@/views/footerLinks/privacyPolicy/size375/index.vue'
+import size768 from '@/views/footerLinks/privacyPolicy/size768/index.vue'
+import size1440 from '@/views/footerLinks/privacyPolicy/size1440/index.vue'
+import size1920 from '@/views/footerLinks/privacyPolicy/size1920/index.vue'
+import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+
+const router = useRouter()
+const { width } = useWindowSize()
+const { t } = useI18n()
+
+const viewComponent = computed(() => {
+  const viewWidth = width.value
+  if (viewWidth <= 450) {
+    return size375
+  } else if (viewWidth <= 1100) {
+    return size768
+  } else if (viewWidth <= 1500) {
+    return size1440
+  } else if (viewWidth <= 1920 || viewWidth > 1920) {
+    return size1920
+  }
+})
+</script>
+
+<template>
+  <component :is="viewComponent" />
+</template>
+
+<style scoped lang="scss"></style>
--- a/src/views/footerLinks/privacyPolicy/size1440/index.vue
+++ b/src/views/footerLinks/privacyPolicy/size1440/index.vue
@ -0,0 +1,252 @@
+<script setup>
+import { NCarousel, NDivider, NMarquee, NPopselect } from 'naive-ui'
+import { onUnmounted, ref, watch, onMounted, computed } from 'vue'
+</script>
+
+<template>
+  <div class="privacy-policy">
+    <section class="privacy-intro" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+      <h1 class="section-titles">Privacy Policy</h1>
+      <div class="content-block">
+        <p>
+          <strong>
+            We at FiEE, Inc. and its subsidiaries ("FiEE") are committed to
+            maintaining the privacy and security of visitors to our website. Through
+            this privacy policy, FiEE wants to assure you of our commitment to
+            privacy and security.
+          </strong>
+        </p>
+        <p>
+          Our privacy philosophy is based on the concept of fair information
+          practices. This means we provide visitors to our website with notice of
+          how we manage information so that they can have a more informed
+          understanding of how we operate.
+        </p>
+      </div>
+    </section>
+
+    <section class="privacy-notice" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+      <h3 class="section-title">Notice</h3>
+      <div class="content-block">
+        <p>
+          If we collect information about you, we will tell you what information is
+          being collected, how, by whom and for what purposes.
+        </p>
+        <p>
+          Through this statement and our web pages, we let you know what types of
+          information we collect from and about you, the types and intended uses of
+          such information, and the types of third parties to whom the information
+          may be disclosed. If we collect information from you, we clearly identify
+          the information that is necessary to fulfill your request and the optional
+          information that is used to deliver tailored information to you.
+        </p>
+        <p>
+          When you visit our site, we may collect information about your use of our
+          site through "cookies". Cookies are small bits of information transferred
+          to your computer's hard drive that allow us to know how often someone
+          visits our site and the activities they conduct while on the site. The
+          information collected by cookies allows us to monitor how our customers
+          are using our web site. If you simply want to browse, you do not have to
+          accept cookies from us. However, if you wish to take advantage of specific
+          services offered online, we may require you to accept cookies placed by a
+          third party supporting this activity on our behalf. We also capture the
+          paths taken as you move from page to page (i.e., your "click stream"
+          activity).
+        </p>
+        <p>
+          Information we collect on fiee.com may be used to enhance your use of this
+          web site in ways like these:
+        </p>
+        <ul>
+          <li>Arrange the web site in the most user-friendly way</li>
+          <li>Customize your browsing experience of this web site</li>
+          <li>Respond to your questions or suggestions</li>
+          <li>
+            Disclosure of personal information for legal purposes and protection of
+            fiee.com and others:
+          </li>
+        </ul>
+        <p>
+          We reserve the right to share your personal information with third parties
+          if required to do so by law or if we believe such action is necessary in
+          order to: (a) conform with the requirements of the law or to comply with
+          legal process served upon us; (b) protect or defend our legal rights or
+          property, fiee.com, or our users; or (c) investigate, prevent, or take
+          action regarding illegal activities, suspected fraud, situations involving
+          potential threats to the physical safety of any person, or violations of
+          the terms and conditions of using fiee.com.
+        </p>
+      </div>
+    </section>
+
+    <section class="privacy-linking" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+      <h3 class="section-title">Linking to Other Sites</h3>
+      <div class="content-block">
+        <p>
+          Please remember that when you use a link to go from fiee.com to another
+          web site, the fiee.com Terms &amp; Conditions and this Privacy Policy are
+          no longer in effect. Your browsing and interaction on any other web site,
+          including any site that has a link on fiee.com, is subject to the rules
+          and policies of that site. We encourage you to read the rules and policies
+          of the sites you visit to further understand their procedures for
+          collecting, using, and disclosing personal information.
+        </p>
+      </div>
+    </section>
+
+    <section class="privacy-choice" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+      <h3 class="section-title">Choice</h3>
+      <div class="content-block">
+        <p>
+          We will give you options about how the personal information that you
+          provide us may be used.
+        </p>
+        <p>
+          Before we use your personal information for any purpose, we will give you
+          choices about whether or not to allow us to engage in that use. We will
+          give you the opportunity to keep us from using or sharing the personal
+          information that you have provided to us for purposes other than to
+          fulfill your request. To exercise this choice, we will allow you to notify
+          us of your preferences during the information collection process.
+        </p>
+        <p>
+          If there are third parties that process FiEE data, we will require them to
+          hold all personally-identifiable information confidential, and to use our
+          customer information only for the purpose of fulfilling their business
+          obligation. We do not sell personally identifiable information to third
+          party marketers.
+        </p>
+      </div>
+    </section>
+
+    <section class="privacy-security" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+      <h3 class="section-title">Security</h3>
+      <div class="content-block">
+        <p>
+          We use recognized industry safeguards to protect personally identifiable
+          information from unauthorized access or use.
+        </p>
+        <p>
+          We will employ industry recognized security safeguards to protect the
+          personally identifiable information that you have provided to us from
+          loss, misuse and unauthorized alteration. If you are required to transmit
+          sensitive information (such as social security and/or credit information)
+          to us through our Web site, we will provide you access to our secure
+          server that allows encryption of your data as it is transmitted to us.
+        </p>
+        <p>
+          We will protect personally identifiable information stored on the site's
+          servers from unauthorized access using commercially available computer
+          security products (e.g., firewalls), as well as carefully developed
+          security procedures and practices.
+        </p>
+      </div>
+    </section>
+
+    <section class="privacy-access" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+      <h3 class="section-title">Access</h3>
+      <div class="content-block">
+        <p>
+          We will let you update your personal information that you have provided to
+          us. We will also take steps to make sure that any updates that you provide
+          are processed in a timely and complete manner.
+        </p>
+        <p>
+          If we collect personal information through our sites, we will maintain the
+          information and allow you to update it at any time. We will continue to
+          work on better methods of accessing your information to increase your
+          access to it for update purposes. Note that our site may contain links to
+          other sites that are beyond our control, and that you may want to read
+          that sites' privacy policy before entering information.
+        </p>
+      </div>
+    </section>
+
+    <section class="privacy-contact" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+      <h3 class="section-title">Customer Service &amp; Recourse</h3>
+      <div class="content-block">
+        <p>
+          We will tell you how you can contact us regarding our privacy statement
+          and practices.
+        </p>
+        <p>
+          If you have any questions about this privacy statement, our information
+          handling practices, or any other aspects of your privacy and the security
+          of information, please send an e-mail to fiee@dlkadvisory.com.
+        </p>
+      </div>
+    </section>
+
+    <section class="privacy-updates" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+      <h3 class="section-title">Updates</h3>
+      <div class="content-block">
+        <p>
+          FiEE may periodically update this policy to describe how new Web features
+          may affect our use of your information and to let you know of new controls
+          and features that we may provide you. FiEE will NOT apply changes to this
+          policy retroactively to information FiEE has previously collected.
+        </p>
+      </div>
+    </section>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.privacy-policy {
+  background-image: url("@/assets/image/bg-mobile.png");
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.section-titles {
+  font-size: 2.5rem;
+  margin-bottom: 30px;
+  color: black;
+}
+
+.section-title {
+  font-size: 1.5rem;
+  margin-bottom: 30px;
+  color: #895bff;
+}
+
+.content-block {
+  font-size: 1.1rem;
+  line-height: 1.8;
+}
+
+.content-block p {
+  margin-bottom: 16px;
+}
+
+.content-block ul {
+  list-style: disc;
+  padding-left: 20px;
+  font-size: 1.1rem;
+  margin-bottom: 16px;
+}
+
+.content-block li {
+  margin-bottom: 10px;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .grid-container {
+    grid-template-columns: 1fr;
+  }
+
+  .section-titles {
+    font-size: 2rem;
+  }
+
+  .section-title {
+    font-size: 1.3rem;
+  }
+
+  .content-block {
+    font-size: 1rem;
+  }
+}
+</style>
--- a/src/views/footerLinks/privacyPolicy/size1920/index.vue
+++ b/src/views/footerLinks/privacyPolicy/size1920/index.vue
@ -0,0 +1,252 @@
+<script setup>
+import { NCarousel, NDivider, NMarquee, NPopselect } from 'naive-ui'
+import { onUnmounted, ref, watch, onMounted, computed } from 'vue'
+</script>
+
+<template>
+  <div class="privacy-policy">
+    <section class="privacy-intro" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+      <h1 class="section-titles">Privacy Policy</h1>
+      <div class="content-block">
+        <p>
+          <strong>
+            We at FiEE, Inc. and its subsidiaries ("FiEE") are committed to
+            maintaining the privacy and security of visitors to our website. Through
+            this privacy policy, FiEE wants to assure you of our commitment to
+            privacy and security.
+          </strong>
+        </p>
+        <p>
+          Our privacy philosophy is based on the concept of fair information
+          practices. This means we provide visitors to our website with notice of
+          how we manage information so that they can have a more informed
+          understanding of how we operate.
+        </p>
+      </div>
+    </section>
+
+    <section class="privacy-notice" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+      <h3 class="section-title">Notice</h3>
+      <div class="content-block">
+        <p>
+          If we collect information about you, we will tell you what information is
+          being collected, how, by whom and for what purposes.
+        </p>
+        <p>
+          Through this statement and our web pages, we let you know what types of
+          information we collect from and about you, the types and intended uses of
+          such information, and the types of third parties to whom the information
+          may be disclosed. If we collect information from you, we clearly identify
+          the information that is necessary to fulfill your request and the optional
+          information that is used to deliver tailored information to you.
+        </p>
+        <p>
+          When you visit our site, we may collect information about your use of our
+          site through "cookies". Cookies are small bits of information transferred
+          to your computer's hard drive that allow us to know how often someone
+          visits our site and the activities they conduct while on the site. The
+          information collected by cookies allows us to monitor how our customers
+          are using our web site. If you simply want to browse, you do not have to
+          accept cookies from us. However, if you wish to take advantage of specific
+          services offered online, we may require you to accept cookies placed by a
+          third party supporting this activity on our behalf. We also capture the
+          paths taken as you move from page to page (i.e., your "click stream"
+          activity).
+        </p>
+        <p>
+          Information we collect on fiee.com may be used to enhance your use of this
+          web site in ways like these:
+        </p>
+        <ul>
+          <li>Arrange the web site in the most user-friendly way</li>
+          <li>Customize your browsing experience of this web site</li>
+          <li>Respond to your questions or suggestions</li>
+          <li>
+            Disclosure of personal information for legal purposes and protection of
+            fiee.com and others:
+          </li>
+        </ul>
+        <p>
+          We reserve the right to share your personal information with third parties
+          if required to do so by law or if we believe such action is necessary in
+          order to: (a) conform with the requirements of the law or to comply with
+          legal process served upon us; (b) protect or defend our legal rights or
+          property, fiee.com, or our users; or (c) investigate, prevent, or take
+          action regarding illegal activities, suspected fraud, situations involving
+          potential threats to the physical safety of any person, or violations of
+          the terms and conditions of using fiee.com.
+        </p>
+      </div>
+    </section>
+
+    <section class="privacy-linking" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+      <h3 class="section-title">Linking to Other Sites</h3>
+      <div class="content-block">
+        <p>
+          Please remember that when you use a link to go from fiee.com to another
+          web site, the fiee.com Terms &amp; Conditions and this Privacy Policy are
+          no longer in effect. Your browsing and interaction on any other web site,
+          including any site that has a link on fiee.com, is subject to the rules
+          and policies of that site. We encourage you to read the rules and policies
+          of the sites you visit to further understand their procedures for
+          collecting, using, and disclosing personal information.
+        </p>
+      </div>
+    </section>
+
+    <section class="privacy-choice" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+      <h3 class="section-title">Choice</h3>
+      <div class="content-block">
+        <p>
+          We will give you options about how the personal information that you
+          provide us may be used.
+        </p>
+        <p>
+          Before we use your personal information for any purpose, we will give you
+          choices about whether or not to allow us to engage in that use. We will
+          give you the opportunity to keep us from using or sharing the personal
+          information that you have provided to us for purposes other than to
+          fulfill your request. To exercise this choice, we will allow you to notify
+          us of your preferences during the information collection process.
+        </p>
+        <p>
+          If there are third parties that process FiEE data, we will require them to
+          hold all personally-identifiable information confidential, and to use our
+          customer information only for the purpose of fulfilling their business
+          obligation. We do not sell personally identifiable information to third
+          party marketers.
+        </p>
+      </div>
+    </section>
+
+    <section class="privacy-security" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+      <h3 class="section-title">Security</h3>
+      <div class="content-block">
+        <p>
+          We use recognized industry safeguards to protect personally identifiable
+          information from unauthorized access or use.
+        </p>
+        <p>
+          We will employ industry recognized security safeguards to protect the
+          personally identifiable information that you have provided to us from
+          loss, misuse and unauthorized alteration. If you are required to transmit
+          sensitive information (such as social security and/or credit information)
+          to us through our Web site, we will provide you access to our secure
+          server that allows encryption of your data as it is transmitted to us.
+        </p>
+        <p>
+          We will protect personally identifiable information stored on the site's
+          servers from unauthorized access using commercially available computer
+          security products (e.g., firewalls), as well as carefully developed
+          security procedures and practices.
+        </p>
+      </div>
+    </section>
+
+    <section class="privacy-access" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+      <h3 class="section-title">Access</h3>
+      <div class="content-block">
+        <p>
+          We will let you update your personal information that you have provided to
+          us. We will also take steps to make sure that any updates that you provide
+          are processed in a timely and complete manner.
+        </p>
+        <p>
+          If we collect personal information through our sites, we will maintain the
+          information and allow you to update it at any time. We will continue to
+          work on better methods of accessing your information to increase your
+          access to it for update purposes. Note that our site may contain links to
+          other sites that are beyond our control, and that you may want to read
+          that sites' privacy policy before entering information.
+        </p>
+      </div>
+    </section>
+
+    <section class="privacy-contact" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+      <h3 class="section-title">Customer Service &amp; Recourse</h3>
+      <div class="content-block">
+        <p>
+          We will tell you how you can contact us regarding our privacy statement
+          and practices.
+        </p>
+        <p>
+          If you have any questions about this privacy statement, our information
+          handling practices, or any other aspects of your privacy and the security
+          of information, please send an e-mail to fiee@dlkadvisory.com.
+        </p>
+      </div>
+    </section>
+
+    <section class="privacy-updates" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+      <h3 class="section-title">Updates</h3>
+      <div class="content-block">
+        <p>
+          FiEE may periodically update this policy to describe how new Web features
+          may affect our use of your information and to let you know of new controls
+          and features that we may provide you. FiEE will NOT apply changes to this
+          policy retroactively to information FiEE has previously collected.
+        </p>
+      </div>
+    </section>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.privacy-policy {
+  background-image: url("@/assets/image/bg.png");
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.section-titles {
+  font-size: 2.5rem;
+  margin-bottom: 30px;
+  color: black;
+}
+
+.section-title {
+  font-size: 1.5rem;
+  margin-bottom: 30px;
+  color: #895bff;
+}
+
+.content-block {
+  font-size: 1.1rem;
+  line-height: 1.8;
+}
+
+.content-block p {
+  margin-bottom: 16px;
+}
+
+.content-block ul {
+  list-style: disc;
+  padding-left: 20px;
+  font-size: 1.1rem;
+  margin-bottom: 16px;
+}
+
+.content-block li {
+  margin-bottom: 10px;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .grid-container {
+    grid-template-columns: 1fr;
+  }
+
+  .section-titles {
+    font-size: 2rem;
+  }
+
+  .section-title {
+    font-size: 1.3rem;
+  }
+
+  .content-block {
+    font-size: 1rem;
+  }
+}
+</style>
--- a/src/views/footerLinks/privacyPolicy/size375/index.vue
+++ b/src/views/footerLinks/privacyPolicy/size375/index.vue
@ -0,0 +1,252 @@
+<script setup>
+import { NCarousel, NDivider, NMarquee, NPopselect } from 'naive-ui'
+import { onUnmounted, ref, watch, onMounted, computed } from 'vue'
+</script>
+
+<template>
+  <div class="privacy-policy">
+    <section class="privacy-intro" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+      <h1 class="section-titles">Privacy Policy</h1>
+      <div class="content-block">
+        <p>
+          <strong>
+            We at FiEE, Inc. and its subsidiaries ("FiEE") are committed to
+            maintaining the privacy and security of visitors to our website. Through
+            this privacy policy, FiEE wants to assure you of our commitment to
+            privacy and security.
+          </strong>
+        </p>
+        <p>
+          Our privacy philosophy is based on the concept of fair information
+          practices. This means we provide visitors to our website with notice of
+          how we manage information so that they can have a more informed
+          understanding of how we operate.
+        </p>
+      </div>
+    </section>
+
+    <section class="privacy-notice" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+      <h3 class="section-title">Notice</h3>
+      <div class="content-block">
+        <p>
+          If we collect information about you, we will tell you what information is
+          being collected, how, by whom and for what purposes.
+        </p>
+        <p>
+          Through this statement and our web pages, we let you know what types of
+          information we collect from and about you, the types and intended uses of
+          such information, and the types of third parties to whom the information
+          may be disclosed. If we collect information from you, we clearly identify
+          the information that is necessary to fulfill your request and the optional
+          information that is used to deliver tailored information to you.
+        </p>
+        <p>
+          When you visit our site, we may collect information about your use of our
+          site through "cookies". Cookies are small bits of information transferred
+          to your computer's hard drive that allow us to know how often someone
+          visits our site and the activities they conduct while on the site. The
+          information collected by cookies allows us to monitor how our customers
+          are using our web site. If you simply want to browse, you do not have to
+          accept cookies from us. However, if you wish to take advantage of specific
+          services offered online, we may require you to accept cookies placed by a
+          third party supporting this activity on our behalf. We also capture the
+          paths taken as you move from page to page (i.e., your "click stream"
+          activity).
+        </p>
+        <p>
+          Information we collect on fiee.com may be used to enhance your use of this
+          web site in ways like these:
+        </p>
+        <ul>
+          <li>Arrange the web site in the most user-friendly way</li>
+          <li>Customize your browsing experience of this web site</li>
+          <li>Respond to your questions or suggestions</li>
+          <li>
+            Disclosure of personal information for legal purposes and protection of
+            fiee.com and others:
+          </li>
+        </ul>
+        <p>
+          We reserve the right to share your personal information with third parties
+          if required to do so by law or if we believe such action is necessary in
+          order to: (a) conform with the requirements of the law or to comply with
+          legal process served upon us; (b) protect or defend our legal rights or
+          property, fiee.com, or our users; or (c) investigate, prevent, or take
+          action regarding illegal activities, suspected fraud, situations involving
+          potential threats to the physical safety of any person, or violations of
+          the terms and conditions of using fiee.com.
+        </p>
+      </div>
+    </section>
+
+    <section class="privacy-linking" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+      <h3 class="section-title">Linking to Other Sites</h3>
+      <div class="content-block">
+        <p>
+          Please remember that when you use a link to go from fiee.com to another
+          web site, the fiee.com Terms &amp; Conditions and this Privacy Policy are
+          no longer in effect. Your browsing and interaction on any other web site,
+          including any site that has a link on fiee.com, is subject to the rules
+          and policies of that site. We encourage you to read the rules and policies
+          of the sites you visit to further understand their procedures for
+          collecting, using, and disclosing personal information.
+        </p>
+      </div>
+    </section>
+
+    <section class="privacy-choice" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+      <h3 class="section-title">Choice</h3>
+      <div class="content-block">
+        <p>
+          We will give you options about how the personal information that you
+          provide us may be used.
+        </p>
+        <p>
+          Before we use your personal information for any purpose, we will give you
+          choices about whether or not to allow us to engage in that use. We will
+          give you the opportunity to keep us from using or sharing the personal
+          information that you have provided to us for purposes other than to
+          fulfill your request. To exercise this choice, we will allow you to notify
+          us of your preferences during the information collection process.
+        </p>
+        <p>
+          If there are third parties that process FiEE data, we will require them to
+          hold all personally-identifiable information confidential, and to use our
+          customer information only for the purpose of fulfilling their business
+          obligation. We do not sell personally identifiable information to third
+          party marketers.
+        </p>
+      </div>
+    </section>
+
+    <section class="privacy-security" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+      <h3 class="section-title">Security</h3>
+      <div class="content-block">
+        <p>
+          We use recognized industry safeguards to protect personally identifiable
+          information from unauthorized access or use.
+        </p>
+        <p>
+          We will employ industry recognized security safeguards to protect the
+          personally identifiable information that you have provided to us from
+          loss, misuse and unauthorized alteration. If you are required to transmit
+          sensitive information (such as social security and/or credit information)
+          to us through our Web site, we will provide you access to our secure
+          server that allows encryption of your data as it is transmitted to us.
+        </p>
+        <p>
+          We will protect personally identifiable information stored on the site's
+          servers from unauthorized access using commercially available computer
+          security products (e.g., firewalls), as well as carefully developed
+          security procedures and practices.
+        </p>
+      </div>
+    </section>
+
+    <section class="privacy-access" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+      <h3 class="section-title">Access</h3>
+      <div class="content-block">
+        <p>
+          We will let you update your personal information that you have provided to
+          us. We will also take steps to make sure that any updates that you provide
+          are processed in a timely and complete manner.
+        </p>
+        <p>
+          If we collect personal information through our sites, we will maintain the
+          information and allow you to update it at any time. We will continue to
+          work on better methods of accessing your information to increase your
+          access to it for update purposes. Note that our site may contain links to
+          other sites that are beyond our control, and that you may want to read
+          that sites' privacy policy before entering information.
+        </p>
+      </div>
+    </section>
+
+    <section class="privacy-contact" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+      <h3 class="section-title">Customer Service &amp; Recourse</h3>
+      <div class="content-block">
+        <p>
+          We will tell you how you can contact us regarding our privacy statement
+          and practices.
+        </p>
+        <p>
+          If you have any questions about this privacy statement, our information
+          handling practices, or any other aspects of your privacy and the security
+          of information, please send an e-mail to fiee@dlkadvisory.com.
+        </p>
+      </div>
+    </section>
+
+    <section class="privacy-updates" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+      <h3 class="section-title">Updates</h3>
+      <div class="content-block">
+        <p>
+          FiEE may periodically update this policy to describe how new Web features
+          may affect our use of your information and to let you know of new controls
+          and features that we may provide you. FiEE will NOT apply changes to this
+          policy retroactively to information FiEE has previously collected.
+        </p>
+      </div>
+    </section>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.privacy-policy {
+  background-image: url("@/assets/image/bg-mobile.png");
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.section-titles {
+  font-size: 2.5rem;
+  margin-bottom: 30px;
+  color: black;
+}
+
+.section-title {
+  font-size: 1.5rem;
+  margin-bottom: 30px;
+  color: #895bff;
+}
+
+.content-block {
+  font-size: 1.1rem;
+  line-height: 1.8;
+}
+
+.content-block p {
+  margin-bottom: 16px;
+}
+
+.content-block ul {
+  list-style: disc;
+  padding-left: 20px;
+  font-size: 1.1rem;
+  margin-bottom: 16px;
+}
+
+.content-block li {
+  margin-bottom: 10px;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .grid-container {
+    grid-template-columns: 1fr;
+  }
+
+  .section-titles {
+    font-size: 2rem;
+  }
+
+  .section-title {
+    font-size: 1.3rem;
+  }
+
+  .content-block {
+    font-size: 1rem;
+  }
+}
+</style>
--- a/src/views/footerLinks/privacyPolicy/size768/index.vue
+++ b/src/views/footerLinks/privacyPolicy/size768/index.vue
@ -0,0 +1,252 @@
+<script setup>
+import { NCarousel, NDivider, NMarquee, NPopselect } from 'naive-ui'
+import { onUnmounted, ref, watch, onMounted, computed } from 'vue'
+</script>
+
+<template>
+  <div class="privacy-policy">
+    <section class="privacy-intro" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+      <h1 class="section-titles">Privacy Policy</h1>
+      <div class="content-block">
+        <p>
+          <strong>
+            We at FiEE, Inc. and its subsidiaries ("FiEE") are committed to
+            maintaining the privacy and security of visitors to our website. Through
+            this privacy policy, FiEE wants to assure you of our commitment to
+            privacy and security.
+          </strong>
+        </p>
+        <p>
+          Our privacy philosophy is based on the concept of fair information
+          practices. This means we provide visitors to our website with notice of
+          how we manage information so that they can have a more informed
+          understanding of how we operate.
+        </p>
+      </div>
+    </section>
+
+    <section class="privacy-notice" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+      <h3 class="section-title">Notice</h3>
+      <div class="content-block">
+        <p>
+          If we collect information about you, we will tell you what information is
+          being collected, how, by whom and for what purposes.
+        </p>
+        <p>
+          Through this statement and our web pages, we let you know what types of
+          information we collect from and about you, the types and intended uses of
+          such information, and the types of third parties to whom the information
+          may be disclosed. If we collect information from you, we clearly identify
+          the information that is necessary to fulfill your request and the optional
+          information that is used to deliver tailored information to you.
+        </p>
+        <p>
+          When you visit our site, we may collect information about your use of our
+          site through "cookies". Cookies are small bits of information transferred
+          to your computer's hard drive that allow us to know how often someone
+          visits our site and the activities they conduct while on the site. The
+          information collected by cookies allows us to monitor how our customers
+          are using our web site. If you simply want to browse, you do not have to
+          accept cookies from us. However, if you wish to take advantage of specific
+          services offered online, we may require you to accept cookies placed by a
+          third party supporting this activity on our behalf. We also capture the
+          paths taken as you move from page to page (i.e., your "click stream"
+          activity).
+        </p>
+        <p>
+          Information we collect on fiee.com may be used to enhance your use of this
+          web site in ways like these:
+        </p>
+        <ul>
+          <li>Arrange the web site in the most user-friendly way</li>
+          <li>Customize your browsing experience of this web site</li>
+          <li>Respond to your questions or suggestions</li>
+          <li>
+            Disclosure of personal information for legal purposes and protection of
+            fiee.com and others:
+          </li>
+        </ul>
+        <p>
+          We reserve the right to share your personal information with third parties
+          if required to do so by law or if we believe such action is necessary in
+          order to: (a) conform with the requirements of the law or to comply with
+          legal process served upon us; (b) protect or defend our legal rights or
+          property, fiee.com, or our users; or (c) investigate, prevent, or take
+          action regarding illegal activities, suspected fraud, situations involving
+          potential threats to the physical safety of any person, or violations of
+          the terms and conditions of using fiee.com.
+        </p>
+      </div>
+    </section>
+
+    <section class="privacy-linking" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+      <h3 class="section-title">Linking to Other Sites</h3>
+      <div class="content-block">
+        <p>
+          Please remember that when you use a link to go from fiee.com to another
+          web site, the fiee.com Terms &amp; Conditions and this Privacy Policy are
+          no longer in effect. Your browsing and interaction on any other web site,
+          including any site that has a link on fiee.com, is subject to the rules
+          and policies of that site. We encourage you to read the rules and policies
+          of the sites you visit to further understand their procedures for
+          collecting, using, and disclosing personal information.
+        </p>
+      </div>
+    </section>
+
+    <section class="privacy-choice" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+      <h3 class="section-title">Choice</h3>
+      <div class="content-block">
+        <p>
+          We will give you options about how the personal information that you
+          provide us may be used.
+        </p>
+        <p>
+          Before we use your personal information for any purpose, we will give you
+          choices about whether or not to allow us to engage in that use. We will
+          give you the opportunity to keep us from using or sharing the personal
+          information that you have provided to us for purposes other than to
+          fulfill your request. To exercise this choice, we will allow you to notify
+          us of your preferences during the information collection process.
+        </p>
+        <p>
+          If there are third parties that process FiEE data, we will require them to
+          hold all personally-identifiable information confidential, and to use our
+          customer information only for the purpose of fulfilling their business
+          obligation. We do not sell personally identifiable information to third
+          party marketers.
+        </p>
+      </div>
+    </section>
+
+    <section class="privacy-security" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+      <h3 class="section-title">Security</h3>
+      <div class="content-block">
+        <p>
+          We use recognized industry safeguards to protect personally identifiable
+          information from unauthorized access or use.
+        </p>
+        <p>
+          We will employ industry recognized security safeguards to protect the
+          personally identifiable information that you have provided to us from
+          loss, misuse and unauthorized alteration. If you are required to transmit
+          sensitive information (such as social security and/or credit information)
+          to us through our Web site, we will provide you access to our secure
+          server that allows encryption of your data as it is transmitted to us.
+        </p>
+        <p>
+          We will protect personally identifiable information stored on the site's
+          servers from unauthorized access using commercially available computer
+          security products (e.g., firewalls), as well as carefully developed
+          security procedures and practices.
+        </p>
+      </div>
+    </section>
+
+    <section class="privacy-access" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+      <h3 class="section-title">Access</h3>
+      <div class="content-block">
+        <p>
+          We will let you update your personal information that you have provided to
+          us. We will also take steps to make sure that any updates that you provide
+          are processed in a timely and complete manner.
+        </p>
+        <p>
+          If we collect personal information through our sites, we will maintain the
+          information and allow you to update it at any time. We will continue to
+          work on better methods of accessing your information to increase your
+          access to it for update purposes. Note that our site may contain links to
+          other sites that are beyond our control, and that you may want to read
+          that sites' privacy policy before entering information.
+        </p>
+      </div>
+    </section>
+
+    <section class="privacy-contact" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+      <h3 class="section-title">Customer Service &amp; Recourse</h3>
+      <div class="content-block">
+        <p>
+          We will tell you how you can contact us regarding our privacy statement
+          and practices.
+        </p>
+        <p>
+          If you have any questions about this privacy statement, our information
+          handling practices, or any other aspects of your privacy and the security
+          of information, please send an e-mail to fiee@dlkadvisory.com.
+        </p>
+      </div>
+    </section>
+
+    <section class="privacy-updates" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+      <h3 class="section-title">Updates</h3>
+      <div class="content-block">
+        <p>
+          FiEE may periodically update this policy to describe how new Web features
+          may affect our use of your information and to let you know of new controls
+          and features that we may provide you. FiEE will NOT apply changes to this
+          policy retroactively to information FiEE has previously collected.
+        </p>
+      </div>
+    </section>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.privacy-policy {
+  background-image: url("@/assets/image/bg-mobile.png");
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.section-titles {
+  font-size: 2.5rem;
+  margin-bottom: 30px;
+  color: black;
+}
+
+.section-title {
+  font-size: 1.5rem;
+  margin-bottom: 30px;
+  color: #895bff;
+}
+
+.content-block {
+  font-size: 1.1rem;
+  line-height: 1.8;
+}
+
+.content-block p {
+  margin-bottom: 16px;
+}
+
+.content-block ul {
+  list-style: disc;
+  padding-left: 20px;
+  font-size: 1.1rem;
+  margin-bottom: 16px;
+}
+
+.content-block li {
+  margin-bottom: 10px;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .grid-container {
+    grid-template-columns: 1fr;
+  }
+
+  .section-titles {
+    font-size: 2rem;
+  }
+
+  .section-title {
+    font-size: 1.3rem;
+  }
+
+  .content-block {
+    font-size: 1rem;
+  }
+}
+</style>
--- a/src/views/footerLinks/siteMap/index.vue
+++ b/src/views/footerLinks/siteMap/index.vue
@ -0,0 +1,34 @@
+<script setup>
+import { computed } from 'vue'
+import { useWindowSize } from '@vueuse/core'
+
+import size375 from '@/views/footerLinks/siteMap/size375/index.vue'
+import size768 from '@/views/footerLinks/siteMap/size768/index.vue'
+import size1440 from '@/views/footerLinks/siteMap/size1440/index.vue'
+import size1920 from '@/views/footerLinks/siteMap/size1920/index.vue'
+import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+
+const router = useRouter()
+const { width } = useWindowSize()
+const { t } = useI18n()
+
+const viewComponent = computed(() => {
+  const viewWidth = width.value
+  if (viewWidth <= 450) {
+    return size375
+  } else if (viewWidth <= 1100) {
+    return size768
+  } else if (viewWidth <= 1500) {
+    return size1440
+  } else if (viewWidth <= 1920 || viewWidth > 1920) {
+    return size1920
+  }
+})
+</script>
+
+<template>
+  <component :is="viewComponent" />
+</template>
+
+<style scoped lang="scss"></style>
--- a/src/views/footerLinks/siteMap/size1440/index.vue
+++ b/src/views/footerLinks/siteMap/size1440/index.vue
@ -0,0 +1,147 @@
+<template>
+    <div class="site-map">
+      <section class="site-map-intro" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+        <h1 class="section-titles">FiEE, Inc. Sitemap</h1>
+        <div class="content-block">
+          <p class="intro-text">
+            Browse the links below for pages that make up the FiEE, Inc. website.
+          </p>
+        </div>
+      </section>
+  
+      <section class="site-map-corporate" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+        <h3 class="section-title">Corporate Information</h3>
+        <div class="content-block">
+          <ul class="link-list">
+            <li @click="router.push('/companyoverview')">Company Overview</li>
+            <li @click="router.push('/businessservices')">Business Introduction</li>
+            <li @click="router.push('/manage')">Management</li>
+            <li @click="router.push('/boarddirectors')">Board of Directors</li>
+            <li @click="router.push('/committeeappointment')">Committee Appointments</li>
+            <li @click="router.push('/govern')">Governance</li>
+          </ul>
+        </div>
+      </section>
+  
+      <section class="site-map-financial" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+        <h3 class="section-title">Financial Information</h3>
+        <div class="content-block">
+          <ul class="link-list">
+            <li @click="router.push('/secfilings')">SEC Filings</li>
+            <li @click="router.push('/annualreports')">Annual Reports</li>
+            <li @click="router.push('/quarterlyreports')">Quarterly Reports</li>
+          </ul>
+        </div>
+      </section>
+  
+      <section class="site-map-stock" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+        <h3 class="section-title">Stock Information</h3>
+        <div class="content-block">
+          <ul class="link-list">
+            <li @click="router.push('/stock-quote')">Stock Quote</li>
+            <li @click="router.push('/historic-stock')">Historic Stock Price</li>
+          </ul>
+        </div>
+      </section>
+  
+      <section class="site-map-news" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+        <h3 class="section-title">News Releases</h3>
+        <div class="content-block">
+          <ul class="link-list">
+            <li @click="router.push('/press-releases')">Press Releases</li>
+            <li @click="router.push('/events-calendar')">Events Calendar</li>
+          </ul>
+        </div>
+      </section>
+  
+      <section class="site-map-investor" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+        <h3 class="section-title">Investor Resources</h3>
+        <div class="content-block">
+          <ul class="link-list">
+            <li @click="router.push('/contacts')">IR Contacts</li>
+            <li @click="router.push('/email-alerts')">Email Alerts</li>
+          </ul>
+        </div>
+      </section>
+    </div>
+  </template>
+  
+  <script setup>
+  import { onMounted, ref, onUnmounted } from "vue";
+  import { useRouter } from "vue-router";
+  const router = useRouter();
+  </script>
+  
+  <style scoped>
+  .site-map {
+    background-image: url("@/assets/image/bg-mobile.png");
+    background-size: 100% 100%;
+    background-position: center;
+    background-repeat: no-repeat;
+  }
+  
+  .section-titles {
+    font-size: 2.5rem;
+    margin-bottom: 30px;
+    color: black;
+  }
+  
+  .section-title {
+    font-size: 1.5rem;
+    margin-bottom: 30px;
+    color: #895bff;
+  }
+  
+  .content-block {
+    font-size: 1.1rem;
+    line-height: 1.8;
+  }
+  
+  .intro-text {
+    font-size: 1.2rem;
+    margin-bottom: 20px;
+  }
+  
+  .link-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+  
+  .link-list li {
+    margin-bottom: 12px;
+    cursor: pointer;
+    transition: color 0.3s ease;
+    text-decoration: underline;
+    text-decoration-color: rgba(137, 91, 255, 0.5);
+    text-underline-offset: 4px;
+  }
+  
+  .link-list li:hover {
+    color: #895bff;
+    text-decoration-color: #895bff;
+  }
+  
+  /* 响应式设计 */
+  @media (max-width: 768px) {
+    .grid-container {
+      grid-template-columns: 1fr;
+    }
+  
+    .section-titles {
+      font-size: 2rem;
+    }
+  
+    .section-title {
+      font-size: 1.3rem;
+    }
+  
+    .content-block {
+      font-size: 1rem;
+    }
+  
+    .intro-text {
+      font-size: 1.1rem;
+    }
+  }
+  </style>
--- a/src/views/footerLinks/siteMap/size1920/index.vue
+++ b/src/views/footerLinks/siteMap/size1920/index.vue
@ -0,0 +1,148 @@
+<script setup>
+import { NCarousel, NDivider, NMarquee, NPopselect } from 'naive-ui'
+import { onUnmounted, ref, watch, onMounted, computed } from 'vue'
+import { useRouter } from "vue-router";
+const router = useRouter();
+</script>
+
+<template>
+  <div class="site-map">
+    <section class="site-map-intro" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+      <h1 class="section-titles">FiEE, Inc. Sitemap</h1>
+      <div class="content-block">
+        <p class="intro-text">
+          Browse the links below for pages that make up the FiEE, Inc. website.
+        </p>
+      </div>
+    </section>
+
+    <section class="site-map-corporate" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+      <h3 class="section-title">Corporate Information</h3>
+      <div class="content-block">
+        <ul class="link-list">
+          <li @click="router.push('/companyoverview')">Company Overview</li>
+          <li @click="router.push('/businessservices')">Business Introduction</li>
+          <li @click="router.push('/manage')">Management</li>
+          <li @click="router.push('/boarddirectors')">Board of Directors</li>
+          <li @click="router.push('/committeeappointment')">Committee Appointments</li>
+          <li @click="router.push('/govern')">Governance</li>
+        </ul>
+      </div>
+    </section>
+
+    <section class="site-map-financial" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+      <h3 class="section-title">Financial Information</h3>
+      <div class="content-block">
+        <ul class="link-list">
+          <li @click="router.push('/secfilings')">SEC Filings</li>
+          <li @click="router.push('/annualreports')">Annual Reports</li>
+          <li @click="router.push('/quarterlyreports')">Quarterly Reports</li>
+        </ul>
+      </div>
+    </section>
+
+    <section class="site-map-stock" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+      <h3 class="section-title">Stock Information</h3>
+      <div class="content-block">
+        <ul class="link-list">
+          <li @click="router.push('/stock-quote')">Stock Quote</li>
+          <li @click="router.push('/historic-stock')">Historic Stock Price</li>
+        </ul>
+      </div>
+    </section>
+
+    <section class="site-map-news" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+      <h3 class="section-title">News Releases</h3>
+      <div class="content-block">
+        <ul class="link-list">
+          <li @click="router.push('/press-releases')">Press Releases</li>
+          <li @click="router.push('/events-calendar')">Events Calendar</li>
+        </ul>
+      </div>
+    </section>
+
+    <section class="site-map-investor" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+      <h3 class="section-title">Investor Resources</h3>
+      <div class="content-block">
+        <ul class="link-list">
+          <li @click="router.push('/contacts')">IR Contacts</li>
+          <li @click="router.push('/email-alerts')">Email Alerts</li>
+        </ul>
+      </div>
+    </section>
+  </div>
+</template>
+
+<style scoped>
+.site-map {
+  background-image: url("@/assets/image/bg.png");
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.section-titles {
+  font-size: 2.5rem;
+  margin-bottom: 30px;
+  color: black;
+}
+
+.section-title {
+  font-size: 1.5rem;
+  margin-bottom: 30px;
+  color: #895bff;
+}
+
+.content-block {
+  font-size: 1.1rem;
+  line-height: 1.8;
+}
+
+.intro-text {
+  font-size: 1.2rem;
+  margin-bottom: 20px;
+}
+
+.link-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.link-list li {
+  margin-bottom: 12px;
+  cursor: pointer;
+  transition: color 0.3s ease;
+  text-decoration: underline;
+  text-decoration-color: rgba(137, 91, 255, 0.5);
+  text-underline-offset: 4px;
+}
+
+.link-list li:hover {
+  color: #895bff;
+  text-decoration-color: #895bff;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .grid-container {
+    grid-template-columns: 1fr;
+  }
+
+  .section-titles {
+    font-size: 2rem;
+  }
+
+  .section-title {
+    font-size: 1.3rem;
+  }
+
+  .content-block {
+    font-size: 1rem;
+  }
+
+  .intro-text {
+    font-size: 1.1rem;
+  }
+}
+</style>
--- a/src/views/footerLinks/siteMap/size375/index.vue
+++ b/src/views/footerLinks/siteMap/size375/index.vue
@ -0,0 +1,148 @@
+<script setup>
+import { NCarousel, NDivider, NMarquee, NPopselect } from 'naive-ui'
+import { onUnmounted, ref, watch, onMounted, computed } from 'vue'
+import { useRouter } from "vue-router";
+const router = useRouter();
+</script>
+
+<template>
+  <div class="site-map">
+    <section class="site-map-intro" style="max-width: 1200px; margin: 30px auto; padding: 0 15px">
+      <h1 class="section-titles">FiEE, Inc. Sitemap</h1>
+      <div class="content-block">
+        <p class="intro-text">
+          Browse the links below for pages that make up the FiEE, Inc. website.
+        </p>
+      </div>
+    </section>
+
+    <section class="site-map-corporate" style="max-width: 1200px; margin: 30px auto; padding: 0 15px">
+      <h3 class="section-title">Corporate Information</h3>
+      <div class="content-block">
+        <ul class="link-list">
+          <li @click="router.push('/companyoverview')">Company Overview</li>
+          <li @click="router.push('/businessservices')">Business Introduction</li>
+          <li @click="router.push('/manage')">Management</li>
+          <li @click="router.push('/boarddirectors')">Board of Directors</li>
+          <li @click="router.push('/committeeappointment')">Committee Appointments</li>
+          <li @click="router.push('/govern')">Governance</li>
+        </ul>
+      </div>
+    </section>
+
+    <section class="site-map-financial" style="max-width: 1200px; margin: 30px auto; padding: 0 15px">
+      <h3 class="section-title">Financial Information</h3>
+      <div class="content-block">
+        <ul class="link-list">
+          <li @click="router.push('/secfilings')">SEC Filings</li>
+          <li @click="router.push('/annualreports')">Annual Reports</li>
+          <li @click="router.push('/quarterlyreports')">Quarterly Reports</li>
+        </ul>
+      </div>
+    </section>
+
+    <section class="site-map-stock" style="max-width: 1200px; margin: 30px auto; padding: 0 15px">
+      <h3 class="section-title">Stock Information</h3>
+      <div class="content-block">
+        <ul class="link-list">
+          <li @click="router.push('/stock-quote')">Stock Quote</li>
+          <li @click="router.push('/historic-stock')">Historic Stock Price</li>
+        </ul>
+      </div>
+    </section>
+
+    <section class="site-map-news" style="max-width: 1200px; margin: 30px auto; padding: 0 15px">
+      <h3 class="section-title">News Releases</h3>
+      <div class="content-block">
+        <ul class="link-list">
+          <li @click="router.push('/press-releases')">Press Releases</li>
+          <li @click="router.push('/events-calendar')">Events Calendar</li>
+        </ul>
+      </div>
+    </section>
+
+    <section class="site-map-investor" style="max-width: 1200px; margin: 30px auto; padding: 0 15px">
+      <h3 class="section-title">Investor Resources</h3>
+      <div class="content-block">
+        <ul class="link-list">
+          <li @click="router.push('/contacts')">IR Contacts</li>
+          <li @click="router.push('/email-alerts')">Email Alerts</li>
+        </ul>
+      </div>
+    </section>
+  </div>
+</template>
+
+<style scoped>
+.site-map {
+  background-image: url("@/assets/image/bg-mobile.png");
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.section-titles {
+  font-size: 1.8rem;
+  margin-bottom: 15px;
+  color: black;
+}
+
+.section-title {
+  font-size: 1.2rem;
+  margin-bottom: 15px;
+  color: #895bff;
+}
+
+.content-block {
+  font-size: 0.9rem;
+  line-height: 1.5;
+}
+
+.intro-text {
+  font-size: 1rem;
+  margin-bottom: 12px;
+}
+
+.link-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.link-list li {
+  margin-bottom: 8px;
+  cursor: pointer;
+  transition: color 0.3s ease;
+  text-decoration: underline;
+  text-decoration-color: rgba(137, 91, 255, 0.5);
+  text-underline-offset: 4px;
+}
+
+.link-list li:hover {
+  color: #895bff;
+  text-decoration-color: #895bff;
+}
+
+/* 响应式设计 */
+@media (max-width: 375px) {
+  .grid-container {
+    grid-template-columns: 1fr;
+  }
+
+  .section-titles {
+    font-size: 1.6rem;
+  }
+
+  .section-title {
+    font-size: 1.1rem;
+  }
+
+  .content-block {
+    font-size: 0.85rem;
+  }
+
+  .intro-text {
+    font-size: 0.9rem;
+  }
+}
+</style>
--- a/src/views/footerLinks/siteMap/size768/index.vue
+++ b/src/views/footerLinks/siteMap/size768/index.vue
@ -0,0 +1,147 @@
+<template>
+  <div class="site-map">
+    <section class="site-map-intro" style="max-width: 1200px; margin: 40px auto; padding: 0 20px">
+      <h1 class="section-titles">FiEE, Inc. Sitemap</h1>
+      <div class="content-block">
+        <p class="intro-text">
+          Browse the links below for pages that make up the FiEE, Inc. website.
+        </p>
+      </div>
+    </section>
+
+    <section class="site-map-corporate" style="max-width: 1200px; margin: 40px auto; padding: 0 20px">
+      <h3 class="section-title">Corporate Information</h3>
+      <div class="content-block">
+        <ul class="link-list">
+          <li @click="router.push('/companyoverview')">Company Overview</li>
+          <li @click="router.push('/businessservices')">Business Introduction</li>
+          <li @click="router.push('/manage')">Management</li>
+          <li @click="router.push('/boarddirectors')">Board of Directors</li>
+          <li @click="router.push('/committeeappointment')">Committee Appointments</li>
+          <li @click="router.push('/govern')">Governance</li>
+        </ul>
+      </div>
+    </section>
+
+    <section class="site-map-financial" style="max-width: 1200px; margin: 40px auto; padding: 0 20px">
+      <h3 class="section-title">Financial Information</h3>
+      <div class="content-block">
+        <ul class="link-list">
+          <li @click="router.push('/secfilings')">SEC Filings</li>
+          <li @click="router.push('/annualreports')">Annual Reports</li>
+          <li @click="router.push('/quarterlyreports')">Quarterly Reports</li>
+        </ul>
+      </div>
+    </section>
+
+    <section class="site-map-stock" style="max-width: 1200px; margin: 40px auto; padding: 0 20px">
+      <h3 class="section-title">Stock Information</h3>
+      <div class="content-block">
+        <ul class="link-list">
+          <li @click="router.push('/stock-quote')">Stock Quote</li>
+          <li @click="router.push('/historic-stock')">Historic Stock Price</li>
+        </ul>
+      </div>
+    </section>
+
+    <section class="site-map-news" style="max-width: 1200px; margin: 40px auto; padding: 0 20px">
+      <h3 class="section-title">News Releases</h3>
+      <div class="content-block">
+        <ul class="link-list">
+          <li @click="router.push('/press-releases')">Press Releases</li>
+          <li @click="router.push('/events-calendar')">Events Calendar</li>
+        </ul>
+      </div>
+    </section>
+
+    <section class="site-map-investor" style="max-width: 1200px; margin: 40px auto; padding: 0 20px">
+      <h3 class="section-title">Investor Resources</h3>
+      <div class="content-block">
+        <ul class="link-list">
+          <li @click="router.push('/contacts')">IR Contacts</li>
+          <li @click="router.push('/email-alerts')">Email Alerts</li>
+        </ul>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, ref, onUnmounted } from "vue";
+import { useRouter } from "vue-router";
+const router = useRouter();
+</script>
+
+<style scoped>
+.site-map {
+  background-image: url("@/assets/image/bg-mobile.png");
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.section-titles {
+  font-size: 2rem;
+  margin-bottom: 20px;
+  color: black;
+}
+
+.section-title {
+  font-size: 1.3rem;
+  margin-bottom: 20px;
+  color: #895bff;
+}
+
+.content-block {
+  font-size: 1rem;
+  line-height: 1.6;
+}
+
+.intro-text {
+  font-size: 1.1rem;
+  margin-bottom: 15px;
+}
+
+.link-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.link-list li {
+  margin-bottom: 10px;
+  cursor: pointer;
+  transition: color 0.3s ease;
+  text-decoration: underline;
+  text-decoration-color: rgba(137, 91, 255, 0.5);
+  text-underline-offset: 4px;
+}
+
+.link-list li:hover {
+  color: #895bff;
+  text-decoration-color: #895bff;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .grid-container {
+    grid-template-columns: 1fr;
+  }
+
+  .section-titles {
+    font-size: 1.8rem;
+  }
+
+  .section-title {
+    font-size: 1.2rem;
+  }
+
+  .content-block {
+    font-size: 0.9rem;
+  }
+
+  .intro-text {
+    font-size: 1rem;
+  }
+}
+</style> 
--- a/src/views/footerLinks/termsOfUse/index.vue
+++ b/src/views/footerLinks/termsOfUse/index.vue
@ -0,0 +1,34 @@
+<script setup>
+import { computed } from 'vue'
+import { useWindowSize } from '@vueuse/core'
+
+import size375 from '@/views/footerLinks/termsOfUse/size375/index.vue'
+import size768 from '@/views/footerLinks/termsOfUse/size768/index.vue'
+import size1440 from '@/views/footerLinks/termsOfUse/size1440/index.vue'
+import size1920 from '@/views/footerLinks/termsOfUse/size1920/index.vue'
+import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+
+const router = useRouter()
+const { width } = useWindowSize()
+const { t } = useI18n()
+
+const viewComponent = computed(() => {
+  const viewWidth = width.value
+  if (viewWidth <= 450) {
+    return size375
+  } else if (viewWidth <= 1100) {
+    return size768
+  } else if (viewWidth <= 1500) {
+    return size1440
+  } else if (viewWidth <= 1920 || viewWidth > 1920) {
+    return size1920
+  }
+})
+</script>
+
+<template>
+  <component :is="viewComponent" />
+</template>
+
+<style scoped lang="scss"></style>
--- a/src/views/footerLinks/termsOfUse/size1440/index.vue
+++ b/src/views/footerLinks/termsOfUse/size1440/index.vue
@ -0,0 +1,193 @@
+<template>
+  <div class="terms-of-use">
+    <section class="terms-intro" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+      <h1 class="section-titles">Terms &amp; Conditions</h1>
+      <div class="content-block">
+        <p>
+          FiEE, Inc. and its subsidiaries (collectively and individually referred to
+          herein as "FiEE") maintain the fiee.com web site (the "Site") as a service
+          to the Internet community. All site references to "FiEE", "our", "we",
+          "company" and other words of like connotation are intended to refer to
+          FiEE, Inc. and its subsidiaries, collectively and/or individually. This
+          document outlines the Terms and Conditions relating to your use of the
+          Site. These Terms and Conditions are applicable to your use of this site
+          regardless of how you accessed it. If you do not wish to be bound by these
+          Terms and Conditions, please discontinue using and accessing this site
+          immediately.
+        </p>
+      </div>
+    </section>
+
+    <section class="terms-usage" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+      <h3 class="section-title">Your Use of This Site</h3>
+      <div class="content-block">
+        <p>
+          You may not use this site to engage in any illegal activity. You may not
+          use this site to engage in conduct which is defamatory, libelous,
+          threatening or harassing or that infringes on a third party's intellectual
+          property or other proprietary rights. You agree that any information you
+          provide through this site will be truthful and accurate.
+        </p>
+      </div>
+    </section>
+
+    <section class="terms-ip" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+      <h3 class="section-title">Intellectual Property</h3>
+      <div class="content-block">
+        <p>
+          The information on this site, including without limitation all design,
+          text, images, press releases, and other information, is protected under
+          United States and other copyright laws and is owned by FiEE or used under
+          license from the copyright owner. The information may not, except under
+          written license, be copied, reproduced, transmitted, displayed, performed,
+          distributed, rented, sublicensed, altered, stored for subsequent use or
+          otherwise used in whole or in part in any manner without FiEE's prior
+          written consent, except to the extent that such use is authorized under
+          the United States copyright laws. FiEE's trademarks, logos, images, and
+          service marks used on this site are the property of FiEE and may not be
+          used without permission from FiEE and then only with proper
+          acknowledgment. In addition, the information on this Web site is provided
+          "as is" and "as available" by FiEE and/or its subsidiaries without
+          warranty of any kind, either implied or expressed, to its accuracy and
+          completeness.
+        </p>
+      </div>
+    </section>
+
+    <section class="terms-forward" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+      <h3 class="section-title">Forward-looking Statements</h3>
+      <div class="content-block">
+        <p>
+          FiEE is including the following cautionary statement to make applicable
+          and take advantage of the safe harbor provisions of the Private Securities
+          Litigation Reform Act of 1995 for any forward-looking statements made by,
+          or on behalf of FiEE. With the exception of historical matters, any
+          matters discussed are forward-looking statements (as defined in Section
+          21E of the Securities Exchange Act of 1934) that involve risks and
+          uncertainties that could cause actual results to differ materially from
+          projected results. These risks, uncertainties and contingencies include,
+          but are not limited to, the following: the success or failure of FiEE's
+          efforts to implement its business strategy; the effects of market demand
+          and price on performance; our liquidity, results of operations and
+          financial condition; changes in laws and regulations; results of
+          litigation; the effects of government regulation; the risk of work
+          stoppages; and management's ability to correctly estimate and accrue for
+          contingent liabilities. FiEE assumes no obligation to update information
+          contained in this site.
+        </p>
+      </div>
+    </section>
+
+    <section class="terms-linking" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+      <h3 class="section-title">Linking</h3>
+      <div class="content-block">
+        <p>
+          As a convenience, this site may contain links to other sites that are not
+          controlled by, or affiliated or associated with, FiEE. Accordingly, FiEE
+          does not make any representations concerning the privacy practices or
+          terms of use of such sites, nor does FiEE control or guarantee the
+          accuracy, integrity, or quality of the information, data, text, software,
+          music, sound, photographs, graphics, video, messages or other materials
+          available on such sites. The inclusion or exclusion does not imply any
+          endorsement by FiEE of the site, the site's provider, or the information
+          on the site. FiEE is not responsible for the content of any linked site or
+          any link contained in a linked site. FiEE reserves the right to terminate
+          any link or linking program at any time. FiEE does not endorse companies
+          or products to which it links and reserves the right to note as such on
+          its web pages. If you decide to access any of the third party sites linked
+          to this site, you do this entirely at your own risk.
+        </p>
+      </div>
+    </section>
+
+    <section class="terms-violations" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+      <h3 class="section-title">Violations of Terms &amp; Conditions</h3>
+      <div class="content-block">
+        <p>
+          FiEE reserves the right to seek all remedies available at law and in
+          equity for violations of these Terms and Conditions, including the right
+          to block access from a particular Internet address to the Site. YOU AGREE
+          TO INDEMNIFY, DEFEND AND HOLD HARMLESS FIEE FROM ANY LIABILITY, LOSS,
+          CLAIM AND EXPENSE, INCLUDING ATTORNEY'S FEES, RELATED TO YOUR VIOLATION OF
+          THESE TERMS AND CONDITIONS OR YOUR USE OF THE SERVICES AND INFORMATION
+          PROVIDED AT THE SITE.
+        </p>
+      </div>
+    </section>
+
+    <section class="terms-liability" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+      <h3 class="section-title">Limitation of Liability</h3>
+      <div class="content-block">
+        <p>
+          NEITHER FIEE NOR ITS DIRECTORS, MANAGERS, OFFICERS, EMPLOYEES,
+          REPRESENTATIVES OR AFFILIATES WILL BE LIABLE FOR DAMAGES ARISING OUT OF OR
+          IN CONNECTION WITH THE USE OF THIS SITE OR ANY SITE LINKED HERETO,
+          INCLUDING, WITHOUT LIMITATION, INDIRECT, PUNITIVE, INCIDENTAL OR
+          CONSEQUENTIAL DAMAGES, LOSS OF DATA, INCOME OR PROFIT, LOSS OF OR DAMAGE
+          TO PROPERTY AND CLAIMS OF THIRD PARTIES, WHETHER BASED ON CONTRACT, TORT,
+          STRICT LIABILITY OR OTHERWISE. BECAUSE SOME STATES/JURISDICTIONS DO NOT
+          ALLOW THE EXCLUSION OR LIMITATION OF LIABILITY FOR INCIDENTAL OR
+          CONSEQUENTIAL DAMAGES, SUCH LIMITATION MAY NOT APPLY.
+        </p>
+        <p>
+          FiEE may revise these Terms and Conditions at any time. Revisions will be
+          posted on this "Terms and Conditions" page and users are responsible for
+          reviewing the page from time to time to ensure compliance.
+        </p>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, ref, onUnmounted } from "vue";
+</script>
+
+<style scoped>
+.terms-of-use {
+  background-image: url("@/assets/image/bg-mobile.png");
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.section-titles {
+  font-size: 2.5rem;
+  margin-bottom: 30px;
+  color: black;
+}
+
+.section-title {
+  font-size: 1.5rem;
+  margin-bottom: 30px;
+  color: #895bff;
+}
+
+.content-block {
+  font-size: 1.1rem;
+  line-height: 1.8;
+}
+
+.content-block p {
+  margin-bottom: 16px;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .grid-container {
+    grid-template-columns: 1fr;
+  }
+
+  .section-titles {
+    font-size: 2rem;
+  }
+
+  .section-title {
+    font-size: 1.3rem;
+  }
+
+  .content-block {
+    font-size: 1rem;
+  }
+}
+</style> 
--- a/src/views/footerLinks/termsOfUse/size1920/index.vue
+++ b/src/views/footerLinks/termsOfUse/size1920/index.vue
@ -0,0 +1,194 @@
+<script setup>
+import { NCarousel, NDivider, NMarquee, NPopselect } from 'naive-ui'
+import { onUnmounted, ref, watch, onMounted, computed } from 'vue'
+</script>
+
+<template>
+  <div class="terms-of-use">
+    <section class="terms-intro" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+      <h1 class="section-titles">Terms &amp; Conditions</h1>
+      <div class="content-block">
+        <p>
+          FiEE, Inc. and its subsidiaries (collectively and individually referred to
+          herein as "FiEE") maintain the fiee.com web site (the "Site") as a service
+          to the Internet community. All site references to "FiEE", "our", "we",
+          "company" and other words of like connotation are intended to refer to
+          FiEE, Inc. and its subsidiaries, collectively and/or individually. This
+          document outlines the Terms and Conditions relating to your use of the
+          Site. These Terms and Conditions are applicable to your use of this site
+          regardless of how you accessed it. If you do not wish to be bound by these
+          Terms and Conditions, please discontinue using and accessing this site
+          immediately.
+        </p>
+      </div>
+    </section>
+
+    <section class="terms-usage" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+      <h3 class="section-title">Your Use of This Site</h3>
+      <div class="content-block">
+        <p>
+          You may not use this site to engage in any illegal activity. You may not
+          use this site to engage in conduct which is defamatory, libelous,
+          threatening or harassing or that infringes on a third party's intellectual
+          property or other proprietary rights. You agree that any information you
+          provide through this site will be truthful and accurate.
+        </p>
+      </div>
+    </section>
+
+    <section class="terms-ip" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+      <h3 class="section-title">Intellectual Property</h3>
+      <div class="content-block">
+        <p>
+          The information on this site, including without limitation all design,
+          text, images, press releases, and other information, is protected under
+          United States and other copyright laws and is owned by FiEE or used under
+          license from the copyright owner. The information may not, except under
+          written license, be copied, reproduced, transmitted, displayed, performed,
+          distributed, rented, sublicensed, altered, stored for subsequent use or
+          otherwise used in whole or in part in any manner without FiEE's prior
+          written consent, except to the extent that such use is authorized under
+          the United States copyright laws. FiEE's trademarks, logos, images, and
+          service marks used on this site are the property of FiEE and may not be
+          used without permission from FiEE and then only with proper
+          acknowledgment. In addition, the information on this Web site is provided
+          "as is" and "as available" by FiEE and/or its subsidiaries without
+          warranty of any kind, either implied or expressed, to its accuracy and
+          completeness.
+        </p>
+      </div>
+    </section>
+
+    <section class="terms-forward" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+      <h3 class="section-title">Forward-looking Statements</h3>
+      <div class="content-block">
+        <p>
+          FiEE is including the following cautionary statement to make applicable
+          and take advantage of the safe harbor provisions of the Private Securities
+          Litigation Reform Act of 1995 for any forward-looking statements made by,
+          or on behalf of FiEE. With the exception of historical matters, any
+          matters discussed are forward-looking statements (as defined in Section
+          21E of the Securities Exchange Act of 1934) that involve risks and
+          uncertainties that could cause actual results to differ materially from
+          projected results. These risks, uncertainties and contingencies include,
+          but are not limited to, the following: the success or failure of FiEE's
+          efforts to implement its business strategy; the effects of market demand
+          and price on performance; our liquidity, results of operations and
+          financial condition; changes in laws and regulations; results of
+          litigation; the effects of government regulation; the risk of work
+          stoppages; and management's ability to correctly estimate and accrue for
+          contingent liabilities. FiEE assumes no obligation to update information
+          contained in this site.
+        </p>
+      </div>
+    </section>
+
+    <section class="terms-linking" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+      <h3 class="section-title">Linking</h3>
+      <div class="content-block">
+        <p>
+          As a convenience, this site may contain links to other sites that are not
+          controlled by, or affiliated or associated with, FiEE. Accordingly, FiEE
+          does not make any representations concerning the privacy practices or
+          terms of use of such sites, nor does FiEE control or guarantee the
+          accuracy, integrity, or quality of the information, data, text, software,
+          music, sound, photographs, graphics, video, messages or other materials
+          available on such sites. The inclusion or exclusion does not imply any
+          endorsement by FiEE of the site, the site's provider, or the information
+          on the site. FiEE is not responsible for the content of any linked site or
+          any link contained in a linked site. FiEE reserves the right to terminate
+          any link or linking program at any time. FiEE does not endorse companies
+          or products to which it links and reserves the right to note as such on
+          its web pages. If you decide to access any of the third party sites linked
+          to this site, you do this entirely at your own risk.
+        </p>
+      </div>
+    </section>
+
+    <section class="terms-violations" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+      <h3 class="section-title">Violations of Terms &amp; Conditions</h3>
+      <div class="content-block">
+        <p>
+          FiEE reserves the right to seek all remedies available at law and in
+          equity for violations of these Terms and Conditions, including the right
+          to block access from a particular Internet address to the Site. YOU AGREE
+          TO INDEMNIFY, DEFEND AND HOLD HARMLESS FIEE FROM ANY LIABILITY, LOSS,
+          CLAIM AND EXPENSE, INCLUDING ATTORNEY'S FEES, RELATED TO YOUR VIOLATION OF
+          THESE TERMS AND CONDITIONS OR YOUR USE OF THE SERVICES AND INFORMATION
+          PROVIDED AT THE SITE.
+        </p>
+      </div>
+    </section>
+
+    <section class="terms-liability" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+      <h3 class="section-title">Limitation of Liability</h3>
+      <div class="content-block">
+        <p>
+          NEITHER FIEE NOR ITS DIRECTORS, MANAGERS, OFFICERS, EMPLOYEES,
+          REPRESENTATIVES OR AFFILIATES WILL BE LIABLE FOR DAMAGES ARISING OUT OF OR
+          IN CONNECTION WITH THE USE OF THIS SITE OR ANY SITE LINKED HERETO,
+          INCLUDING, WITHOUT LIMITATION, INDIRECT, PUNITIVE, INCIDENTAL OR
+          CONSEQUENTIAL DAMAGES, LOSS OF DATA, INCOME OR PROFIT, LOSS OF OR DAMAGE
+          TO PROPERTY AND CLAIMS OF THIRD PARTIES, WHETHER BASED ON CONTRACT, TORT,
+          STRICT LIABILITY OR OTHERWISE. BECAUSE SOME STATES/JURISDICTIONS DO NOT
+          ALLOW THE EXCLUSION OR LIMITATION OF LIABILITY FOR INCIDENTAL OR
+          CONSEQUENTIAL DAMAGES, SUCH LIMITATION MAY NOT APPLY.
+        </p>
+        <p>
+          FiEE may revise these Terms and Conditions at any time. Revisions will be
+          posted on this "Terms and Conditions" page and users are responsible for
+          reviewing the page from time to time to ensure compliance.
+        </p>
+      </div>
+    </section>
+  </div>
+</template>
+
+<style scoped>
+.terms-of-use {
+  background-image: url("@/assets/image/bg.png");
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.section-titles {
+  font-size: 2.5rem;
+  margin-bottom: 30px;
+  color: black;
+}
+
+.section-title {
+  font-size: 1.5rem;
+  margin-bottom: 30px;
+  color: #895bff;
+}
+
+.content-block {
+  font-size: 1.1rem;
+  line-height: 1.8;
+}
+
+.content-block p {
+  margin-bottom: 16px;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .grid-container {
+    grid-template-columns: 1fr;
+  }
+
+  .section-titles {
+    font-size: 2rem;
+  }
+
+  .section-title {
+    font-size: 1.3rem;
+  }
+
+  .content-block {
+    font-size: 1rem;
+  }
+}
+</style>
--- a/src/views/footerLinks/termsOfUse/size375/index.vue
+++ b/src/views/footerLinks/termsOfUse/size375/index.vue
@ -0,0 +1,194 @@
+<script setup>
+import { NCarousel, NDivider, NMarquee, NPopselect } from 'naive-ui'
+import { onUnmounted, ref, watch, onMounted, computed } from 'vue'
+</script>
+
+<template>
+  <div class="terms-of-use">
+    <section class="terms-intro" style="max-width: 1200px; margin: 30px auto; padding: 0 15px">
+      <h1 class="section-titles">Terms &amp; Conditions</h1>
+      <div class="content-block">
+        <p>
+          FiEE, Inc. and its subsidiaries (collectively and individually referred to
+          herein as "FiEE") maintain the fiee.com web site (the "Site") as a service
+          to the Internet community. All site references to "FiEE", "our", "we",
+          "company" and other words of like connotation are intended to refer to
+          FiEE, Inc. and its subsidiaries, collectively and/or individually. This
+          document outlines the Terms and Conditions relating to your use of the
+          Site. These Terms and Conditions are applicable to your use of this site
+          regardless of how you accessed it. If you do not wish to be bound by these
+          Terms and Conditions, please discontinue using and accessing this site
+          immediately.
+        </p>
+      </div>
+    </section>
+
+    <section class="terms-usage" style="max-width: 1200px; margin: 30px auto; padding: 0 15px">
+      <h3 class="section-title">Your Use of This Site</h3>
+      <div class="content-block">
+        <p>
+          You may not use this site to engage in any illegal activity. You may not
+          use this site to engage in conduct which is defamatory, libelous,
+          threatening or harassing or that infringes on a third party's intellectual
+          property or other proprietary rights. You agree that any information you
+          provide through this site will be truthful and accurate.
+        </p>
+      </div>
+    </section>
+
+    <section class="terms-ip" style="max-width: 1200px; margin: 30px auto; padding: 0 15px">
+      <h3 class="section-title">Intellectual Property</h3>
+      <div class="content-block">
+        <p>
+          The information on this site, including without limitation all design,
+          text, images, press releases, and other information, is protected under
+          United States and other copyright laws and is owned by FiEE or used under
+          license from the copyright owner. The information may not, except under
+          written license, be copied, reproduced, transmitted, displayed, performed,
+          distributed, rented, sublicensed, altered, stored for subsequent use or
+          otherwise used in whole or in part in any manner without FiEE's prior
+          written consent, except to the extent that such use is authorized under
+          the United States copyright laws. FiEE's trademarks, logos, images, and
+          service marks used on this site are the property of FiEE and may not be
+          used without permission from FiEE and then only with proper
+          acknowledgment. In addition, the information on this Web site is provided
+          "as is" and "as available" by FiEE and/or its subsidiaries without
+          warranty of any kind, either implied or expressed, to its accuracy and
+          completeness.
+        </p>
+      </div>
+    </section>
+
+    <section class="terms-forward" style="max-width: 1200px; margin: 30px auto; padding: 0 15px">
+      <h3 class="section-title">Forward-looking Statements</h3>
+      <div class="content-block">
+        <p>
+          FiEE is including the following cautionary statement to make applicable
+          and take advantage of the safe harbor provisions of the Private Securities
+          Litigation Reform Act of 1995 for any forward-looking statements made by,
+          or on behalf of FiEE. With the exception of historical matters, any
+          matters discussed are forward-looking statements (as defined in Section
+          21E of the Securities Exchange Act of 1934) that involve risks and
+          uncertainties that could cause actual results to differ materially from
+          projected results. These risks, uncertainties and contingencies include,
+          but are not limited to, the following: the success or failure of FiEE's
+          efforts to implement its business strategy; the effects of market demand
+          and price on performance; our liquidity, results of operations and
+          financial condition; changes in laws and regulations; results of
+          litigation; the effects of government regulation; the risk of work
+          stoppages; and management's ability to correctly estimate and accrue for
+          contingent liabilities. FiEE assumes no obligation to update information
+          contained in this site.
+        </p>
+      </div>
+    </section>
+
+    <section class="terms-linking" style="max-width: 1200px; margin: 30px auto; padding: 0 15px">
+      <h3 class="section-title">Linking</h3>
+      <div class="content-block">
+        <p>
+          As a convenience, this site may contain links to other sites that are not
+          controlled by, or affiliated or associated with, FiEE. Accordingly, FiEE
+          does not make any representations concerning the privacy practices or
+          terms of use of such sites, nor does FiEE control or guarantee the
+          accuracy, integrity, or quality of the information, data, text, software,
+          music, sound, photographs, graphics, video, messages or other materials
+          available on such sites. The inclusion or exclusion does not imply any
+          endorsement by FiEE of the site, the site's provider, or the information
+          on the site. FiEE is not responsible for the content of any linked site or
+          any link contained in a linked site. FiEE reserves the right to terminate
+          any link or linking program at any time. FiEE does not endorse companies
+          or products to which it links and reserves the right to note as such on
+          its web pages. If you decide to access any of the third party sites linked
+          to this site, you do this entirely at your own risk.
+        </p>
+      </div>
+    </section>
+
+    <section class="terms-violations" style="max-width: 1200px; margin: 30px auto; padding: 0 15px">
+      <h3 class="section-title">Violations of Terms &amp; Conditions</h3>
+      <div class="content-block">
+        <p>
+          FiEE reserves the right to seek all remedies available at law and in
+          equity for violations of these Terms and Conditions, including the right
+          to block access from a particular Internet address to the Site. YOU AGREE
+          TO INDEMNIFY, DEFEND AND HOLD HARMLESS FIEE FROM ANY LIABILITY, LOSS,
+          CLAIM AND EXPENSE, INCLUDING ATTORNEY'S FEES, RELATED TO YOUR VIOLATION OF
+          THESE TERMS AND CONDITIONS OR YOUR USE OF THE SERVICES AND INFORMATION
+          PROVIDED AT THE SITE.
+        </p>
+      </div>
+    </section>
+
+    <section class="terms-liability" style="max-width: 1200px; margin: 30px auto; padding: 0 15px">
+      <h3 class="section-title">Limitation of Liability</h3>
+      <div class="content-block">
+        <p>
+          NEITHER FIEE NOR ITS DIRECTORS, MANAGERS, OFFICERS, EMPLOYEES,
+          REPRESENTATIVES OR AFFILIATES WILL BE LIABLE FOR DAMAGES ARISING OUT OF OR
+          IN CONNECTION WITH THE USE OF THIS SITE OR ANY SITE LINKED HERETO,
+          INCLUDING, WITHOUT LIMITATION, INDIRECT, PUNITIVE, INCIDENTAL OR
+          CONSEQUENTIAL DAMAGES, LOSS OF DATA, INCOME OR PROFIT, LOSS OF OR DAMAGE
+          TO PROPERTY AND CLAIMS OF THIRD PARTIES, WHETHER BASED ON CONTRACT, TORT,
+          STRICT LIABILITY OR OTHERWISE. BECAUSE SOME STATES/JURISDICTIONS DO NOT
+          ALLOW THE EXCLUSION OR LIMITATION OF LIABILITY FOR INCIDENTAL OR
+          CONSEQUENTIAL DAMAGES, SUCH LIMITATION MAY NOT APPLY.
+        </p>
+        <p>
+          FiEE may revise these Terms and Conditions at any time. Revisions will be
+          posted on this "Terms and Conditions" page and users are responsible for
+          reviewing the page from time to time to ensure compliance.
+        </p>
+      </div>
+    </section>
+  </div>
+</template>
+
+<style scoped>
+.terms-of-use {
+  background-image: url("@/assets/image/bg-mobile.png");
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.section-titles {
+  font-size: 1.8rem;
+  margin-bottom: 15px;
+  color: black;
+}
+
+.section-title {
+  font-size: 1.2rem;
+  margin-bottom: 15px;
+  color: #895bff;
+}
+
+.content-block {
+  font-size: 0.9rem;
+  line-height: 1.5;
+}
+
+.content-block p {
+  margin-bottom: 10px;
+}
+
+/* 响应式设计 */
+@media (max-width: 375px) {
+  .grid-container {
+    grid-template-columns: 1fr;
+  }
+
+  .section-titles {
+    font-size: 1.6rem;
+  }
+
+  .section-title {
+    font-size: 1.1rem;
+  }
+
+  .content-block {
+    font-size: 0.85rem;
+  }
+}
+</style>
--- a/src/views/footerLinks/termsOfUse/size768/index.vue
+++ b/src/views/footerLinks/termsOfUse/size768/index.vue
@ -0,0 +1,193 @@
+<template>
+  <div class="terms-of-use">
+    <section class="terms-intro" style="max-width: 1200px; margin: 40px auto; padding: 0 20px">
+      <h1 class="section-titles">Terms &amp; Conditions</h1>
+      <div class="content-block">
+        <p>
+          FiEE, Inc. and its subsidiaries (collectively and individually referred to
+          herein as "FiEE") maintain the fiee.com web site (the "Site") as a service
+          to the Internet community. All site references to "FiEE", "our", "we",
+          "company" and other words of like connotation are intended to refer to
+          FiEE, Inc. and its subsidiaries, collectively and/or individually. This
+          document outlines the Terms and Conditions relating to your use of the
+          Site. These Terms and Conditions are applicable to your use of this site
+          regardless of how you accessed it. If you do not wish to be bound by these
+          Terms and Conditions, please discontinue using and accessing this site
+          immediately.
+        </p>
+      </div>
+    </section>
+
+    <section class="terms-usage" style="max-width: 1200px; margin: 40px auto; padding: 0 20px">
+      <h3 class="section-title">Your Use of This Site</h3>
+      <div class="content-block">
+        <p>
+          You may not use this site to engage in any illegal activity. You may not
+          use this site to engage in conduct which is defamatory, libelous,
+          threatening or harassing or that infringes on a third party's intellectual
+          property or other proprietary rights. You agree that any information you
+          provide through this site will be truthful and accurate.
+        </p>
+      </div>
+    </section>
+
+    <section class="terms-ip" style="max-width: 1200px; margin: 40px auto; padding: 0 20px">
+      <h3 class="section-title">Intellectual Property</h3>
+      <div class="content-block">
+        <p>
+          The information on this site, including without limitation all design,
+          text, images, press releases, and other information, is protected under
+          United States and other copyright laws and is owned by FiEE or used under
+          license from the copyright owner. The information may not, except under
+          written license, be copied, reproduced, transmitted, displayed, performed,
+          distributed, rented, sublicensed, altered, stored for subsequent use or
+          otherwise used in whole or in part in any manner without FiEE's prior
+          written consent, except to the extent that such use is authorized under
+          the United States copyright laws. FiEE's trademarks, logos, images, and
+          service marks used on this site are the property of FiEE and may not be
+          used without permission from FiEE and then only with proper
+          acknowledgment. In addition, the information on this Web site is provided
+          "as is" and "as available" by FiEE and/or its subsidiaries without
+          warranty of any kind, either implied or expressed, to its accuracy and
+          completeness.
+        </p>
+      </div>
+    </section>
+
+    <section class="terms-forward" style="max-width: 1200px; margin: 40px auto; padding: 0 20px">
+      <h3 class="section-title">Forward-looking Statements</h3>
+      <div class="content-block">
+        <p>
+          FiEE is including the following cautionary statement to make applicable
+          and take advantage of the safe harbor provisions of the Private Securities
+          Litigation Reform Act of 1995 for any forward-looking statements made by,
+          or on behalf of FiEE. With the exception of historical matters, any
+          matters discussed are forward-looking statements (as defined in Section
+          21E of the Securities Exchange Act of 1934) that involve risks and
+          uncertainties that could cause actual results to differ materially from
+          projected results. These risks, uncertainties and contingencies include,
+          but are not limited to, the following: the success or failure of FiEE's
+          efforts to implement its business strategy; the effects of market demand
+          and price on performance; our liquidity, results of operations and
+          financial condition; changes in laws and regulations; results of
+          litigation; the effects of government regulation; the risk of work
+          stoppages; and management's ability to correctly estimate and accrue for
+          contingent liabilities. FiEE assumes no obligation to update information
+          contained in this site.
+        </p>
+      </div>
+    </section>
+
+    <section class="terms-linking" style="max-width: 1200px; margin: 40px auto; padding: 0 20px">
+      <h3 class="section-title">Linking</h3>
+      <div class="content-block">
+        <p>
+          As a convenience, this site may contain links to other sites that are not
+          controlled by, or affiliated or associated with, FiEE. Accordingly, FiEE
+          does not make any representations concerning the privacy practices or
+          terms of use of such sites, nor does FiEE control or guarantee the
+          accuracy, integrity, or quality of the information, data, text, software,
+          music, sound, photographs, graphics, video, messages or other materials
+          available on such sites. The inclusion or exclusion does not imply any
+          endorsement by FiEE of the site, the site's provider, or the information
+          on the site. FiEE is not responsible for the content of any linked site or
+          any link contained in a linked site. FiEE reserves the right to terminate
+          any link or linking program at any time. FiEE does not endorse companies
+          or products to which it links and reserves the right to note as such on
+          its web pages. If you decide to access any of the third party sites linked
+          to this site, you do this entirely at your own risk.
+        </p>
+      </div>
+    </section>
+
+    <section class="terms-violations" style="max-width: 1200px; margin: 40px auto; padding: 0 20px">
+      <h3 class="section-title">Violations of Terms &amp; Conditions</h3>
+      <div class="content-block">
+        <p>
+          FiEE reserves the right to seek all remedies available at law and in
+          equity for violations of these Terms and Conditions, including the right
+          to block access from a particular Internet address to the Site. YOU AGREE
+          TO INDEMNIFY, DEFEND AND HOLD HARMLESS FIEE FROM ANY LIABILITY, LOSS,
+          CLAIM AND EXPENSE, INCLUDING ATTORNEY'S FEES, RELATED TO YOUR VIOLATION OF
+          THESE TERMS AND CONDITIONS OR YOUR USE OF THE SERVICES AND INFORMATION
+          PROVIDED AT THE SITE.
+        </p>
+      </div>
+    </section>
+
+    <section class="terms-liability" style="max-width: 1200px; margin: 40px auto; padding: 0 20px">
+      <h3 class="section-title">Limitation of Liability</h3>
+      <div class="content-block">
+        <p>
+          NEITHER FIEE NOR ITS DIRECTORS, MANAGERS, OFFICERS, EMPLOYEES,
+          REPRESENTATIVES OR AFFILIATES WILL BE LIABLE FOR DAMAGES ARISING OUT OF OR
+          IN CONNECTION WITH THE USE OF THIS SITE OR ANY SITE LINKED HERETO,
+          INCLUDING, WITHOUT LIMITATION, INDIRECT, PUNITIVE, INCIDENTAL OR
+          CONSEQUENTIAL DAMAGES, LOSS OF DATA, INCOME OR PROFIT, LOSS OF OR DAMAGE
+          TO PROPERTY AND CLAIMS OF THIRD PARTIES, WHETHER BASED ON CONTRACT, TORT,
+          STRICT LIABILITY OR OTHERWISE. BECAUSE SOME STATES/JURISDICTIONS DO NOT
+          ALLOW THE EXCLUSION OR LIMITATION OF LIABILITY FOR INCIDENTAL OR
+          CONSEQUENTIAL DAMAGES, SUCH LIMITATION MAY NOT APPLY.
+        </p>
+        <p>
+          FiEE may revise these Terms and Conditions at any time. Revisions will be
+          posted on this "Terms and Conditions" page and users are responsible for
+          reviewing the page from time to time to ensure compliance.
+        </p>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, ref, onUnmounted } from "vue";
+</script>
+
+<style scoped>
+.terms-of-use {
+  background-image: url("@/assets/image/bg-mobile.png");
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.section-titles {
+  font-size: 2rem;
+  margin-bottom: 20px;
+  color: black;
+}
+
+.section-title {
+  font-size: 1.3rem;
+  margin-bottom: 20px;
+  color: #895bff;
+}
+
+.content-block {
+  font-size: 1rem;
+  line-height: 1.6;
+}
+
+.content-block p {
+  margin-bottom: 12px;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .grid-container {
+    grid-template-columns: 1fr;
+  }
+
+  .section-titles {
+    font-size: 1.8rem;
+  }
+
+  .section-title {
+    font-size: 1.2rem;
+  }
+
+  .content-block {
+    font-size: 0.9rem;
+  }
+}
+</style> 
--- a/src/views/govern/size1440/index.vue
+++ b/src/views/govern/size1440/index.vue
@ -1,7 +1,6 @@
 <template>
  <div class="title mb-[50px] text-center">
-    <div style="font-size: 40px; margin-top: 60px">Corporate Governance</div>
-    <div class="w-24 h-1 bg-[#895bff] mx-auto"></div>
+    <h1 style="font-size: 40px; margin-top: 60px">Governance</h1>
  </div>

  <div
@ -40,6 +39,7 @@
            <h1 style="font-size: 18px" class="">
              {{ item.title }}
            </h1>
+            <!-- <text> {{ item.date }}</text> -->
          </div>
        </div>
        <div class="mt-auto">
@ -73,12 +73,12 @@

 <script setup>
 import { reactive } from "vue";
-import quarterlyPdfone from "@/assets/file/AUDIT COMMITTEE CHARTER.pdf";
-import quarterlyPdftwo from "@/assets/file/CODE OF BUSINESS CONDUCT AND ETHICS.pdf";
+import quarterlyPdfone from "@/assets/file/FiEE, Inc._Audit Committee Charter.pdf";
+import quarterlyPdftwo from "@/assets/file/FiEE, Inc. _Code of Business Conduct and Ethics.pdf";

-import quarterlyPdfthree from "@/assets/file/COMPENSATION COMMITTEE CHARTER.pdf";
+import quarterlyPdfthree from "@/assets/file/FiEE, Inc._Compensation Committee Charter.pdf";

-import quarterlyPdffour from "@/assets/file/NOMINATING AND CORPORATE GOVERNANCE COMMITTEE CHARTER.pdf";
+import quarterlyPdffour from "@/assets/file/FiEE, Inc. _Nominating and Corporate Governance Committee Charter.pdf";

 const state = reactive({
  list: [
@ -87,28 +87,28 @@ const state = reactive({
      description:
        "Defines the purpose, composition, and responsibilities of the Audit Committee in overseeing financial reporting and disclosure.",
      url: quarterlyPdfone,
-      date: "Last updated: March 2025",
+      date: "May 30, 2025",
    },
    {
      title: "CODE OF BUSINESS CONDUCT AND ETHICS",
      description:
        "Establishes the ethical standards and legal compliance expectations for all directors, officers and employees.",
      url: quarterlyPdftwo,
-      date: "Last updated: January 2025",
+      date: "May 30, 2025",
    },
    {
      title: "COMPENSATION COMMITTEE CHARTER",
      description:
        "Outlines the duties and responsibilities for overseeing executive compensation and benefit plans.",
      url: quarterlyPdfthree,
-      date: "Last updated: February 2025",
+      date: "May 30, 2025",
    },
    {
      title: "NOMINATING AND CORPORATE GOVERNANCE COMMITTEE CHARTER",
      description:
        "Provides the framework for director nominations and corporate governance matters.",
      url: quarterlyPdffour,
-      date: "Last updated: April 2025",
+      date: "May 30, 2025",
    },
  ],
 });
@ -117,7 +117,6 @@ const state = reactive({
 <style scoped lang="scss">
 /* 标题样式 */
 .title h1 {
-  font-family: "Georgia", serif;
  position: relative;

  &::after {
--- a/src/views/govern/size1920/index.vue
+++ b/src/views/govern/size1920/index.vue
@ -1,7 +1,6 @@
 <template>
  <div class="title mb-[50px] text-center">
-    <div style="font-size: 40px; margin-top: 60px">Corporate Governance</div>
-    <div class="w-24 h-1 bg-[#895bff] mx-auto"></div>
+    <h1 style="font-size: 40px; margin-top: 60px">Governance</h1>
  </div>

  <div
@ -40,6 +39,7 @@
            <h1 style="font-size: 18px" class="">
              {{ item.title }}
            </h1>
+            <!-- <text> {{ item.date }}</text> -->
          </div>
        </div>
        <div class="mt-auto">
@ -73,12 +73,12 @@

 <script setup>
 import { reactive } from "vue";
-import quarterlyPdfone from "@/assets/file/AUDIT COMMITTEE CHARTER.pdf";
-import quarterlyPdftwo from "@/assets/file/CODE OF BUSINESS CONDUCT AND ETHICS.pdf";
+import quarterlyPdfone from "@/assets/file/FiEE, Inc._Audit Committee Charter.pdf";
+import quarterlyPdftwo from "@/assets/file/FiEE, Inc. _Code of Business Conduct and Ethics.pdf";

-import quarterlyPdfthree from "@/assets/file/COMPENSATION COMMITTEE CHARTER.pdf";
+import quarterlyPdfthree from "@/assets/file/FiEE, Inc._Compensation Committee Charter.pdf";

-import quarterlyPdffour from "@/assets/file/NOMINATING AND CORPORATE GOVERNANCE COMMITTEE CHARTER.pdf";
+import quarterlyPdffour from "@/assets/file/FiEE, Inc. _Nominating and Corporate Governance Committee Charter.pdf";

 const state = reactive({
  list: [
@ -87,28 +87,28 @@ const state = reactive({
      description:
        "Defines the purpose, composition, and responsibilities of the Audit Committee in overseeing financial reporting and disclosure.",
      url: quarterlyPdfone,
-      date: "Last updated: March 2025",
+      date: "May 30, 2025",
    },
    {
      title: "CODE OF BUSINESS CONDUCT AND ETHICS",
      description:
        "Establishes the ethical standards and legal compliance expectations for all directors, officers and employees.",
      url: quarterlyPdftwo,
-      date: "Last updated: January 2025",
+      date: "May 30, 2025",
    },
    {
      title: "COMPENSATION COMMITTEE CHARTER",
      description:
        "Outlines the duties and responsibilities for overseeing executive compensation and benefit plans.",
      url: quarterlyPdfthree,
-      date: "Last updated: February 2025",
+      date: "May 30, 2025",
    },
    {
      title: "NOMINATING AND CORPORATE GOVERNANCE COMMITTEE CHARTER",
      description:
        "Provides the framework for director nominations and corporate governance matters.",
      url: quarterlyPdffour,
-      date: "Last updated: April 2025",
+      date: "May 30, 2025",
    },
  ],
 });
@ -117,7 +117,6 @@ const state = reactive({
 <style scoped lang="scss">
 /* 标题样式 */
 .title h1 {
-  font-family: "Georgia", serif;
  position: relative;

  &::after {
--- a/src/views/govern/size375/index.vue
+++ b/src/views/govern/size375/index.vue
@ -1,9 +1,6 @@
 <template>
  <div class="title mb-[50px] text-center">
-    <h1 class="text-5xl font-light text-gray-800 mb-4 tracking-tight">
-      Corporate Governance
-    </h1>
-    <div class="w-24 h-1 bg-[#895bff] mx-auto"></div>
+    <h1 style="font-size: 40px; margin-top: 60px">Governance</h1>
  </div>

  <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
@ -39,6 +36,7 @@
            <h1 class="text-2xl font-medium text-gray-800 mb-2">
              {{ item.title }}
            </h1>
+            <!-- <text> {{ item.date }}</text> -->
          </div>
        </div>
        <div class="mt-auto">
@ -71,12 +69,12 @@

 <script setup>
 import { reactive } from "vue";
-import quarterlyPdfone from "@/assets/file/AUDIT COMMITTEE CHARTER.pdf";
-import quarterlyPdftwo from "@/assets/file/CODE OF BUSINESS CONDUCT AND ETHICS.pdf";
+import quarterlyPdfone from "@/assets/file/FiEE, Inc._Audit Committee Charter.pdf";
+import quarterlyPdftwo from "@/assets/file/FiEE, Inc. _Code of Business Conduct and Ethics.pdf";

-import quarterlyPdfthree from "@/assets/file/COMPENSATION COMMITTEE CHARTER.pdf";
+import quarterlyPdfthree from "@/assets/file/FiEE, Inc._Compensation Committee Charter.pdf";

-import quarterlyPdffour from "@/assets/file/NOMINATING AND CORPORATE GOVERNANCE COMMITTEE CHARTER.pdf";
+import quarterlyPdffour from "@/assets/file/FiEE, Inc. _Nominating and Corporate Governance Committee Charter.pdf";

 const state = reactive({
  list: [
@ -85,28 +83,28 @@ const state = reactive({
      description:
        "Defines the purpose, composition, and responsibilities of the Audit Committee in overseeing financial reporting and disclosure.",
      url: quarterlyPdfone,
-      date: "Last updated: March 2025",
+      date: "May 30, 2025",
    },
    {
      title: "CODE OF BUSINESS CONDUCT AND ETHICS",
      description:
        "Establishes the ethical standards and legal compliance expectations for all directors, officers and employees.",
      url: quarterlyPdftwo,
-      date: "Last updated: January 2025",
+      date: "May 30, 2025",
    },
    {
      title: "COMPENSATION COMMITTEE CHARTER",
      description:
        "Outlines the duties and responsibilities for overseeing executive compensation and benefit plans.",
      url: quarterlyPdfthree,
-      date: "Last updated: February 2025",
+      date: "May 30, 2025",
    },
    {
      title: "NOMINATING AND CORPORATE GOVERNANCE COMMITTEE CHARTER",
      description:
        "Provides the framework for director nominations and corporate governance matters.",
      url: quarterlyPdffour,
-      date: "Last updated: April 2025",
+      date: "May 30, 2025",
    },
  ],
 });
@ -115,7 +113,6 @@ const state = reactive({
 <style scoped lang="scss">
 /* 标题样式 */
 .title h1 {
-  font-family: "Georgia", serif;
  position: relative;

  &::after {
--- a/src/views/govern/size768/index.vue
+++ b/src/views/govern/size768/index.vue
@ -1,9 +1,6 @@
 <template>
  <div class="title mb-[50px] text-center">
-    <h1 class="text-5xl font-light text-gray-800 mb-4 tracking-tight">
-      Corporate Governance
-    </h1>
-    <div class="w-24 h-1 bg-[#895bff] mx-auto"></div>
+    <h1 style="font-size: 40px; margin-top: 60px">Governance</h1>
  </div>

  <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
@ -39,6 +36,7 @@
            <h1 class="text-2xl font-medium text-gray-800 mb-2">
              {{ item.title }}
            </h1>
+            <!-- <text> {{ item.date }}</text> -->
          </div>
        </div>
        <div class="mt-auto">
@ -71,12 +69,12 @@

 <script setup>
 import { reactive } from "vue";
-import quarterlyPdfone from "@/assets/file/AUDIT COMMITTEE CHARTER.pdf";
-import quarterlyPdftwo from "@/assets/file/CODE OF BUSINESS CONDUCT AND ETHICS.pdf";
+import quarterlyPdfone from "@/assets/file/FiEE, Inc._Audit Committee Charter.pdf";
+import quarterlyPdftwo from "@/assets/file/FiEE, Inc. _Code of Business Conduct and Ethics.pdf";

-import quarterlyPdfthree from "@/assets/file/COMPENSATION COMMITTEE CHARTER.pdf";
+import quarterlyPdfthree from "@/assets/file/FiEE, Inc._Compensation Committee Charter.pdf";

-import quarterlyPdffour from "@/assets/file/NOMINATING AND CORPORATE GOVERNANCE COMMITTEE CHARTER.pdf";
+import quarterlyPdffour from "@/assets/file/FiEE, Inc. _Nominating and Corporate Governance Committee Charter.pdf";

 const state = reactive({
  list: [
@ -85,28 +83,28 @@ const state = reactive({
      description:
        "Defines the purpose, composition, and responsibilities of the Audit Committee in overseeing financial reporting and disclosure.",
      url: quarterlyPdfone,
-      date: "Last updated: March 2025",
+      date: "May 30, 2025",
    },
    {
      title: "CODE OF BUSINESS CONDUCT AND ETHICS",
      description:
        "Establishes the ethical standards and legal compliance expectations for all directors, officers and employees.",
      url: quarterlyPdftwo,
-      date: "Last updated: January 2025",
+      date: "May 30, 2025",
    },
    {
      title: "COMPENSATION COMMITTEE CHARTER",
      description:
        "Outlines the duties and responsibilities for overseeing executive compensation and benefit plans.",
      url: quarterlyPdfthree,
-      date: "Last updated: February 2025",
+      date: "May 30, 2025",
    },
    {
      title: "NOMINATING AND CORPORATE GOVERNANCE COMMITTEE CHARTER",
      description:
        "Provides the framework for director nominations and corporate governance matters.",
      url: quarterlyPdffour,
-      date: "Last updated: April 2025",
+      date: "May 30, 2025",
    },
  ],
 });
@ -115,7 +113,6 @@ const state = reactive({
 <style scoped lang="scss">
 /* 标题样式 */
 .title h1 {
-  font-family: "Georgia", serif;
  position: relative;

  &::after {
--- a/src/views/historic-stock/size1440/index.vue
+++ b/src/views/historic-stock/size1440/index.vue
@ -1,15 +1,18 @@
 <template>
  <div class="historic-data-container" style="margin-bottom: 40px">
-    <img
+    <!-- <img
      src="@/assets/image/historic-stock.png"
      alt="1"
      style="max-width: 100%; margin: 0 auto"
-    />
+    /> -->
+    <div class="echarts-container">
+      <customEcharts></customEcharts>
+    </div>

    <div class="header mt-[20px]">
      <div class="title">Historical Data</div>
      <div class="filter-container">
-        <n-dropdown
+        <!-- <n-dropdown
          trigger="click"
          :options="periodOptions"
          @select="handlePeriodChange"
@ -19,7 +22,7 @@
            {{ state.selectedPeriod }}
            <n-icon><chevron-down-outline /></n-icon>
          </n-button>
-        </n-dropdown>
+        </n-dropdown> -->

        <n-dropdown
          trigger="click"
@ -82,200 +85,202 @@
 </template>

 <script setup>
-import { NDataTable, NButton, NDropdown, NIcon } from "naive-ui";
-import { reactive, onMounted, h, computed } from "vue";
-import axios from "axios";
+import { NDataTable, NButton, NDropdown, NIcon } from 'naive-ui'
+import { reactive, onMounted, h, computed } from 'vue'
+import axios from 'axios'
 import {
  ChevronDownOutline,
  ChevronBackOutline,
  ChevronForwardOutline,
  ArrowUpOutline,
-} from "@vicons/ionicons5";
-import defaultTableData from "../data";
-console.log("defaultTableData", defaultTableData);
+} from '@vicons/ionicons5'
+import defaultTableData from '../data'
+// console.log('defaultTableData', defaultTableData)
+import customEcharts from '@/components/customEcharts/index.vue'

 // 数据筛选选项
 const periodOptions = [
-  { label: "Daily", key: "Daily" },
-  { label: "Weekly", key: "Weekly" },
-  { label: "Monthly", key: "Monthly" },
-  { label: "Quarterly", key: "Quarterly" },
-  { label: "Annual", key: "Annual" },
-];
+  { 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" },
-  { label: "Full History", key: "Full History", disabled: true },
-];
+  { 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' },
+  // { label: 'Full History', key: 'Full History', disabled: true },
+]

 // 分页大小选项
 const pageSizeOptions = [
-  { label: "50", key: 50 },
-  { label: "100", key: 100 },
-  { label: "500", key: 500 },
-  { label: "1000", key: 1000 },
-];
+  { label: '50', key: 50 },
+  { label: '100', key: 100 },
+  { label: '500', key: 500 },
+  { label: '1000', key: 1000 },
+]

 const state = reactive({
-  selectedPeriod: "Daily",
-  selectedDuration: "3 Months",
+  selectedPeriod: 'Daily',
+  selectedDuration: '6 Months',
  tableData: [],
  currentPage: 1,
  pageSize: 50,
-});
+})

 // 计算总页数
 const totalPages = computed(() => {
-  return Math.ceil(state.tableData.length / state.pageSize);
-});
+  return Math.ceil(state.tableData.length / state.pageSize)
+})

 // 计算当前页的数据
 const paginatedData = computed(() => {
-  const start = (state.currentPage - 1) * state.pageSize;
-  const end = start + state.pageSize;
-  return state.tableData.slice(start, end);
-});
+  const start = (state.currentPage - 1) * state.pageSize
+  const end = start + state.pageSize
+  return state.tableData.slice(start, end)
+})

 // 表格列定义
 const columns = [
  {
-    title: "Date",
-    key: "date",
-    align: "left",
-    fixed: "left",
+    title: 'Date',
+    key: 'date',
+    align: 'left',
+    fixed: 'left',
    width: 150,
  },
  {
-    title: "Open",
-    key: "open",
-    align: "center",
+    title: 'Open',
+    key: 'open',
+    align: 'center',
  },
  {
-    title: "High",
-    key: "high",
-    align: "center",
+    title: 'High',
+    key: 'high',
+    align: 'center',
  },
  {
-    title: "Low",
-    key: "low",
-    align: "center",
+    title: 'Low',
+    key: 'low',
+    align: 'center',
  },
  {
-    title: "Close",
-    key: "close",
-    align: "center",
+    title: 'Close',
+    key: 'close',
+    align: 'center',
  },
  {
-    title: "Adj. Close",
-    key: "adjClose",
-    align: "center",
+    title: 'Adj. Close',
+    key: 'adjClose',
+    align: 'center',
  },
  {
-    title: "Change",
-    key: "change",
-    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);
+      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",
+    title: 'Volume',
+    key: 'volume',
+    align: 'center',
  },
-];
+]

 // 处理下拉选项变更
 const handlePeriodChange = (key) => {
-  state.selectedPeriod = key;
-  if (key === "Annual") {
-    handleDurationChange("Full History");
-    return;
+  state.selectedPeriod = key
+  if (key === 'Annual') {
+    handleDurationChange('Full History')
+    return
  }
-  if (key === "Monthly") {
-    handleDurationChange("10 Years");
-    return;
+  if (key === 'Monthly') {
+    handleDurationChange('10 Years')
+    return
  }
-  if (key === "Quarterly") {
-    handleDurationChange("10 Years");
-    return;
+  if (key === 'Quarterly') {
+    handleDurationChange('10 Years')
+    return
  }
-  getPageData();
-};
+  getPageData()
+}

 const handleDurationChange = (key) => {
-  state.selectedDuration = key;
-  getPageData();
-};
+  state.selectedDuration = key
+  state.currentPage = 1
+  getPageData()
+}

 // 处理分页
 const handlePrevPage = () => {
  if (state.currentPage === 1) {
-    return;
+    return
  }
-  state.currentPage--;
-};
+  state.currentPage--
+}

 const handleNextPage = () => {
  if (state.currentPage >= totalPages.value) {
-    return;
+    return
  }
-  state.currentPage++;
-};
+  state.currentPage++
+}

 const handlePageSizeChange = (size) => {
-  state.pageSize = size;
-  state.currentPage = 1; // 重置到第一页
-};
+  state.pageSize = size
+  state.currentPage = 1 // 重置到第一页
+}

 // 回到顶部
 const scrollToTop = () => {
  // 尝试多种方法
  // 1. 使用document.body
-  document.body.scrollTop = 0;
+  document.body.scrollTop = 0
  // 2. 使用document.documentElement (HTML元素)
-  document.documentElement.scrollTop = 0;
+  document.documentElement.scrollTop = 0
  // 3. 使用scrollIntoView
-  document.querySelector(".historic-data-container").scrollIntoView({
-    behavior: "smooth",
-    block: "start",
-  });
-};
+  document.querySelector('.historic-data-container').scrollIntoView({
+    behavior: 'smooth',
+    block: 'start',
+  })
+}
 onMounted(() => {
-  getPageDefaultData();
-});
+  getPageData()
+})

 const getPageDefaultData = async () => {
  try {
    let url =
-      "https://stockanalysis.com/api/symbol/a/OTC-MINM/history?type=chart";
-    const res = await axios.get(url);
-    let originalData = res.data.data;
+      'https://stockanalysis.com/api/symbol/a/OTC-MINM/history?period=Daily&range=3M'
+    const res = await axios.get(url)
+    let originalData = res.data.data

    // 转换为日期格式："Nov 26, 2024"
    let calcApiData = originalData.map((item) => [
-      new Date(item[0]).toLocaleDateString("en-US", {
-        month: "short",
-        day: "numeric",
-        year: "numeric",
+      new Date(item[0]).toLocaleDateString('en-US', {
+        month: 'short',
+        day: 'numeric',
+        year: 'numeric',
      }),
      item[1],
-    ]);
-    console.log("接口数据", calcApiData);
+    ])
+    // console.log('接口数据', calcApiData)

    // 使用API数据更新defaultTableData中的close和adjClose值
    const updatedTableData = defaultTableData.map((tableItem) => {
      // 查找对应日期的API数据
      const matchedApiData = calcApiData.find(
-        (apiItem) => apiItem[0] === tableItem.date
-      );
+        (apiItem) => apiItem[0] === tableItem.date,
+      )

      if (matchedApiData) {
        // 更新close和adjClose值
@ -283,56 +288,100 @@ const getPageDefaultData = async () => {
          ...tableItem,
          close: matchedApiData[1].toFixed(2),
          adjClose: matchedApiData[1].toFixed(2),
-        };
+        }
      }
-      return tableItem;
-    });
+      return tableItem
+    })

-    state.tableData = updatedTableData;
+    state.tableData = updatedTableData
  } catch (error) {
-    console.error("获取数据失败", error);
+    // console.error('获取数据失败', error)
  }
-};
+}
 const getPageData = async () => {
-  let range = "";
-  if (state.selectedDuration === "3 Months") {
-    range = "3M";
-  } else if (state.selectedDuration === "6 Months") {
-    range = "6M";
-  } else if (state.selectedDuration === "Year to Date") {
-    range = "YTD";
-  } else if (state.selectedDuration === "1 Year") {
-    range = "1Y";
-  } else if (state.selectedDuration === "5 Years") {
-    range = "5Y";
-  } else if (state.selectedDuration === "10 Years") {
-    range = "10Y";
-  } else if (state.selectedDuration === "Full History") {
-    range = "Max";
+  let range = ''
+  let now = new Date()
+  const last = new Date(now)
+  last.setMonth(now.getMonth() - 6)
+  let fromDate = last
+  let toDate =
+    now.getFullYear() +
+    '-' +
+    String(now.getMonth() + 1).padStart(2, '0') +
+    '-' +
+    String(now.getDate()).padStart(2, '0')
+  if (state.selectedDuration === '3 Months') {
+    range = '3M'
+    const last = new Date(now)
+    last.setMonth(now.getMonth() - 3)
+    fromDate = last
+  } else if (state.selectedDuration === '6 Months') {
+    range = '6M'
+    const last = new Date(now)
+    last.setMonth(now.getMonth() - 6)
+    fromDate = last
+  } else if (state.selectedDuration === 'Year to Date') {
+    range = 'YTD'
+    fromDate = new Date(now.getFullYear(), 0, 1)
+  } else if (state.selectedDuration === '1 Year') {
+    range = '1Y'
+    const last = new Date(now)
+    last.setFullYear(now.getFullYear() - 1)
+    fromDate = last
+  } else if (state.selectedDuration === '5 Years') {
+    range = '5Y'
+    const last = new Date(now)
+    last.setFullYear(now.getFullYear() - 5)
+    fromDate = last
+  } else if (state.selectedDuration === '10 Years') {
+    range = '10Y'
+    const last = new Date(now)
+    last.setFullYear(now.getFullYear() - 10)
+    fromDate = last
+  } else if (state.selectedDuration === 'Full History') {
+    range = 'Max'
+    fromDate = new Date('2009-10-07')
  }
-  let url = `https://stockanalysis.com/api/symbol/a/OTC-MINM/history?period=${state.selectedPeriod}&range=${range}`;
-  const res = await axios.get(url);
-  if (res.data.status === 200) {
-    // 转换为日期格式："Nov 26, 2024"
-    let resultData = res.data.data.map((item) => {
-      return {
-        date: new Date(item.t).toLocaleDateString("en-US", {
-          month: "short",
-          day: "numeric",
-          year: "numeric",
-        }),
-        open: item.o != null ? Number(item.o).toFixed(2) : "",
-        high: item.h != null ? Number(item.h).toFixed(2) : "",
-        low: item.l != null ? Number(item.l).toFixed(2) : "",
-        close: item.c != null ? Number(item.c).toFixed(2) : "",
-        adjClose: item.a != null ? Number(item.a).toFixed(2) : "",
-        change: item.ch != null ? Number(item.ch).toFixed(2) + "%" : "",
-        volume: item.v,
-      };
-    });
-    state.tableData = resultData;
+  let finalFromDate =
+    fromDate.getFullYear() +
+    '-' +
+    String(fromDate.getMonth() + 1).padStart(2, '0') +
+    '-' +
+    String(fromDate.getDate()).padStart(2, '0')
+  // let url = `https://stockanalysis.com/api/symbol/a/OTC-MINM/history?period=${state.selectedPeriod}&range=${range}`
+  let url =
+    'https://common.szjixun.cn/api/stock/history/list?from=' +
+    finalFromDate +
+    '&to=' +
+    toDate
+  const res = await axios.get(url)
+  // console.error(res)
+  if (res.status === 200) {
+    if (res.data.status === 0) {
+      // 转换为日期格式："Nov 26, 2024"
+      let resultData = res.data.data.map((item) => {
+        return {
+          date: new Date(item.date).toLocaleDateString('en-US', {
+            month: 'short',
+            day: 'numeric',
+            year: 'numeric',
+          }),
+          open: item.open != null ? Number(item.open).toFixed(2) : '',
+          high: item.high != null ? Number(item.high).toFixed(2) : '',
+          low: item.low != null ? Number(item.low).toFixed(2) : '',
+          close: item.close != null ? Number(item.close).toFixed(2) : '',
+          adjClose: item.close != null ? Number(item.close).toFixed(2) : '',
+          change:
+            item.changePercent != null
+              ? Number(item.changePercent).toFixed(2) + '%'
+              : '',
+          volume: item.volume,
+        }
+      })
+      state.tableData = resultData
+    }
  }
-};
+}
 </script>

 <style scoped lang="scss">
--- a/src/views/historic-stock/size1920/index.vue
+++ b/src/views/historic-stock/size1920/index.vue
@ -1,15 +1,18 @@
 <template>
-  <div class="historic-data-container" style="margin-bottom: 40px">
-    <img
+  <div class="historic-data-container" style="margin-bottom: 40px;">
+    <!-- <img
      src="@/assets/image/historic-stock.png"
      alt="1"
-      style="max-width: 100%; margin: 0 auto"
-    />
+      style="max-width: 100%; margin: 0 auto;"
+    /> -->
+    <div class="echarts-container">
+      <customEcharts></customEcharts>
+    </div>

    <div class="header mt-[20px]">
      <div class="title">Historical Data</div>
      <div class="filter-container">
-        <n-dropdown
+        <!-- <n-dropdown
          trigger="click"
          :options="periodOptions"
          @select="handlePeriodChange"
@ -19,7 +22,7 @@
            {{ state.selectedPeriod }}
            <n-icon><chevron-down-outline /></n-icon>
          </n-button>
-        </n-dropdown>
+        </n-dropdown> -->

        <n-dropdown
          trigger="click"
@ -82,200 +85,202 @@
 </template>

 <script setup>
-import { NDataTable, NButton, NDropdown, NIcon } from "naive-ui";
-import { reactive, onMounted, h, computed } from "vue";
-import axios from "axios";
+import { NDataTable, NButton, NDropdown, NIcon } from 'naive-ui'
+import { reactive, onMounted, h, computed } from 'vue'
+import axios from 'axios'
 import {
  ChevronDownOutline,
  ChevronBackOutline,
  ChevronForwardOutline,
  ArrowUpOutline,
-} from "@vicons/ionicons5";
-import defaultTableData from "../data";
-console.log("defaultTableData", defaultTableData);
+} from '@vicons/ionicons5'
+import defaultTableData from '../data'
+// console.log('defaultTableData', defaultTableData)
+import customEcharts from '@/components/customEcharts/index.vue'

 // 数据筛选选项
 const periodOptions = [
-  { label: "Daily", key: "Daily" },
-  { label: "Weekly", key: "Weekly" },
-  { label: "Monthly", key: "Monthly" },
-  { label: "Quarterly", key: "Quarterly" },
-  { label: "Annual", key: "Annual" },
-];
+  { 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" },
-  { label: "Full History", key: "Full History", disabled: true },
-];
+  { 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' },
+  // { label: 'Full History', key: 'Full History', disabled: true },
+]

 // 分页大小选项
 const pageSizeOptions = [
-  { label: "50", key: 50 },
-  { label: "100", key: 100 },
-  { label: "500", key: 500 },
-  { label: "1000", key: 1000 },
-];
+  { label: '50', key: 50 },
+  { label: '100', key: 100 },
+  { label: '500', key: 500 },
+  { label: '1000', key: 1000 },
+]

 const state = reactive({
-  selectedPeriod: "Daily",
-  selectedDuration: "3 Months",
+  selectedPeriod: 'Daily',
+  selectedDuration: '6 Months',
  tableData: [],
  currentPage: 1,
  pageSize: 50,
-});
+})

 // 计算总页数
 const totalPages = computed(() => {
-  return Math.ceil(state.tableData.length / state.pageSize);
-});
+  return Math.ceil(state.tableData.length / state.pageSize)
+})

 // 计算当前页的数据
 const paginatedData = computed(() => {
-  const start = (state.currentPage - 1) * state.pageSize;
-  const end = start + state.pageSize;
-  return state.tableData.slice(start, end);
-});
+  const start = (state.currentPage - 1) * state.pageSize
+  const end = start + state.pageSize
+  return state.tableData.slice(start, end)
+})

 // 表格列定义
 const columns = [
  {
-    title: "Date",
-    key: "date",
-    align: "left",
-    fixed: "left",
+    title: 'Date',
+    key: 'date',
+    align: 'left',
+    fixed: 'left',
    width: 150,
  },
  {
-    title: "Open",
-    key: "open",
-    align: "center",
+    title: 'Open',
+    key: 'open',
+    align: 'center',
  },
  {
-    title: "High",
-    key: "high",
-    align: "center",
+    title: 'High',
+    key: 'high',
+    align: 'center',
  },
  {
-    title: "Low",
-    key: "low",
-    align: "center",
+    title: 'Low',
+    key: 'low',
+    align: 'center',
  },
  {
-    title: "Close",
-    key: "close",
-    align: "center",
+    title: 'Close',
+    key: 'close',
+    align: 'center',
  },
  {
-    title: "Adj. Close",
-    key: "adjClose",
-    align: "center",
+    title: 'Adj. Close',
+    key: 'adjClose',
+    align: 'center',
  },
  {
-    title: "Change",
-    key: "change",
-    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);
+      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",
+    title: 'Volume',
+    key: 'volume',
+    align: 'center',
  },
-];
+]

 // 处理下拉选项变更
 const handlePeriodChange = (key) => {
-  state.selectedPeriod = key;
-  if (key === "Annual") {
-    handleDurationChange("Full History");
-    return;
+  state.selectedPeriod = key
+  if (key === 'Annual') {
+    handleDurationChange('Full History')
+    return
  }
-  if (key === "Monthly") {
-    handleDurationChange("10 Years");
-    return;
+  if (key === 'Monthly') {
+    handleDurationChange('10 Years')
+    return
  }
-  if (key === "Quarterly") {
-    handleDurationChange("10 Years");
-    return;
+  if (key === 'Quarterly') {
+    handleDurationChange('10 Years')
+    return
  }
-  getPageData();
-};
+  getPageData()
+}

 const handleDurationChange = (key) => {
-  state.selectedDuration = key;
-  getPageData();
-};
+  state.selectedDuration = key
+  state.currentPage = 1
+  getPageData()
+}

 // 处理分页
 const handlePrevPage = () => {
  if (state.currentPage === 1) {
-    return;
+    return
  }
-  state.currentPage--;
-};
+  state.currentPage--
+}

 const handleNextPage = () => {
  if (state.currentPage >= totalPages.value) {
-    return;
+    return
  }
-  state.currentPage++;
-};
+  state.currentPage++
+}

 const handlePageSizeChange = (size) => {
-  state.pageSize = size;
-  state.currentPage = 1; // 重置到第一页
-};
+  state.pageSize = size
+  state.currentPage = 1 // 重置到第一页
+}

 // 回到顶部
 const scrollToTop = () => {
  // 尝试多种方法
  // 1. 使用document.body
-  document.body.scrollTop = 0;
+  document.body.scrollTop = 0
  // 2. 使用document.documentElement (HTML元素)
-  document.documentElement.scrollTop = 0;
+  document.documentElement.scrollTop = 0
  // 3. 使用scrollIntoView
-  document.querySelector(".historic-data-container").scrollIntoView({
-    behavior: "smooth",
-    block: "start",
-  });
-};
+  document.querySelector('.historic-data-container').scrollIntoView({
+    behavior: 'smooth',
+    block: 'start',
+  })
+}
 onMounted(() => {
-  getPageDefaultData();
-});
+  getPageData()
+})

 const getPageDefaultData = async () => {
  try {
    let url =
-      "https://stockanalysis.com/api/symbol/a/OTC-MINM/history?type=chart";
-    const res = await axios.get(url);
-    let originalData = res.data.data;
+      'https://stockanalysis.com/api/symbol/a/OTC-MINM/history?period=Daily&range=3M'
+    const res = await axios.get(url)
+    let originalData = res.data.data

    // 转换为日期格式："Nov 26, 2024"
    let calcApiData = originalData.map((item) => [
-      new Date(item[0]).toLocaleDateString("en-US", {
-        month: "short",
-        day: "numeric",
-        year: "numeric",
+      new Date(item[0]).toLocaleDateString('en-US', {
+        month: 'short',
+        day: 'numeric',
+        year: 'numeric',
      }),
      item[1],
-    ]);
-    console.log("接口数据", calcApiData);
+    ])
+    // console.log('接口数据', calcApiData)

    // 使用API数据更新defaultTableData中的close和adjClose值
    const updatedTableData = defaultTableData.map((tableItem) => {
      // 查找对应日期的API数据
      const matchedApiData = calcApiData.find(
-        (apiItem) => apiItem[0] === tableItem.date
-      );
+        (apiItem) => apiItem[0] === tableItem.date,
+      )

      if (matchedApiData) {
        // 更新close和adjClose值
@ -283,56 +288,100 @@ const getPageDefaultData = async () => {
          ...tableItem,
          close: matchedApiData[1].toFixed(2),
          adjClose: matchedApiData[1].toFixed(2),
-        };
+        }
      }
-      return tableItem;
-    });
+      return tableItem
+    })

-    state.tableData = updatedTableData;
+    state.tableData = updatedTableData
  } catch (error) {
-    console.error("获取数据失败", error);
+    // console.error('获取数据失败', error)
  }
-};
+}
 const getPageData = async () => {
-  let range = "";
-  if (state.selectedDuration === "3 Months") {
-    range = "3M";
-  } else if (state.selectedDuration === "6 Months") {
-    range = "6M";
-  } else if (state.selectedDuration === "Year to Date") {
-    range = "YTD";
-  } else if (state.selectedDuration === "1 Year") {
-    range = "1Y";
-  } else if (state.selectedDuration === "5 Years") {
-    range = "5Y";
-  } else if (state.selectedDuration === "10 Years") {
-    range = "10Y";
-  } else if (state.selectedDuration === "Full History") {
-    range = "Max";
+  let range = ''
+  let now = new Date()
+  const last = new Date(now)
+  last.setMonth(now.getMonth() - 6)
+  let fromDate = last
+  let toDate =
+    now.getFullYear() +
+    '-' +
+    String(now.getMonth() + 1).padStart(2, '0') +
+    '-' +
+    String(now.getDate()).padStart(2, '0')
+  if (state.selectedDuration === '3 Months') {
+    range = '3M'
+    const last = new Date(now)
+    last.setMonth(now.getMonth() - 3)
+    fromDate = last
+  } else if (state.selectedDuration === '6 Months') {
+    range = '6M'
+    const last = new Date(now)
+    last.setMonth(now.getMonth() - 6)
+    fromDate = last
+  } else if (state.selectedDuration === 'Year to Date') {
+    range = 'YTD'
+    fromDate = new Date(now.getFullYear(), 0, 1)
+  } else if (state.selectedDuration === '1 Year') {
+    range = '1Y'
+    const last = new Date(now)
+    last.setFullYear(now.getFullYear() - 1)
+    fromDate = last
+  } else if (state.selectedDuration === '5 Years') {
+    range = '5Y'
+    const last = new Date(now)
+    last.setFullYear(now.getFullYear() - 5)
+    fromDate = last
+  } else if (state.selectedDuration === '10 Years') {
+    range = '10Y'
+    const last = new Date(now)
+    last.setFullYear(now.getFullYear() - 10)
+    fromDate = last
+  } else if (state.selectedDuration === 'Full History') {
+    range = 'Max'
+    fromDate = new Date('2009-10-07')
  }
-  let url = `https://stockanalysis.com/api/symbol/a/OTC-MINM/history?period=${state.selectedPeriod}&range=${range}`;
-  const res = await axios.get(url);
-  if (res.data.status === 200) {
-    // 转换为日期格式："Nov 26, 2024"
-    let resultData = res.data.data.map((item) => {
-      return {
-        date: new Date(item.t).toLocaleDateString("en-US", {
-          month: "short",
-          day: "numeric",
-          year: "numeric",
-        }),
-        open: item.o != null ? Number(item.o).toFixed(2) : "",
-        high: item.h != null ? Number(item.h).toFixed(2) : "",
-        low: item.l != null ? Number(item.l).toFixed(2) : "",
-        close: item.c != null ? Number(item.c).toFixed(2) : "",
-        adjClose: item.a != null ? Number(item.a).toFixed(2) : "",
-        change: item.ch != null ? Number(item.ch).toFixed(2) + "%" : "",
-        volume: item.v,
-      };
-    });
-    state.tableData = resultData;
+  let finalFromDate =
+    fromDate.getFullYear() +
+    '-' +
+    String(fromDate.getMonth() + 1).padStart(2, '0') +
+    '-' +
+    String(fromDate.getDate()).padStart(2, '0')
+  // let url = `https://stockanalysis.com/api/symbol/a/OTC-MINM/history?period=${state.selectedPeriod}&range=${range}`
+  let url =
+    'https://common.szjixun.cn/api/stock/history/list?from=' +
+    finalFromDate +
+    '&to=' +
+    toDate
+  const res = await axios.get(url)
+  // console.error(res)
+  if (res.status === 200) {
+    if (res.data.status === 0) {
+      // 转换为日期格式："Nov 26, 2024"
+      let resultData = res.data.data.map((item) => {
+        return {
+          date: new Date(item.date).toLocaleDateString('en-US', {
+            month: 'short',
+            day: 'numeric',
+            year: 'numeric',
+          }),
+          open: item.open != null ? Number(item.open).toFixed(2) : '',
+          high: item.high != null ? Number(item.high).toFixed(2) : '',
+          low: item.low != null ? Number(item.low).toFixed(2) : '',
+          close: item.close != null ? Number(item.close).toFixed(2) : '',
+          adjClose: item.close != null ? Number(item.close).toFixed(2) : '',
+          change:
+            item.changePercent != null
+              ? Number(item.changePercent).toFixed(2) + '%'
+              : '',
+          volume: item.volume,
+        }
+      })
+      state.tableData = resultData
+    }
  }
-};
+}
 </script>

 <style scoped lang="scss">
--- a/src/views/historic-stock/size375/index.vue
+++ b/src/views/historic-stock/size375/index.vue
@ -1,15 +1,18 @@
 <template>
  <div class="historic-data-container" style="margin-bottom: 40px">
-    <img
+    <!-- <img
      src="@/assets/image/historic-stock-375.png"
      alt="1"
      style="max-width: 100%; margin: 0 auto"
-    />
+    /> -->
+    <div class="echarts-container">
+      <customEcharts></customEcharts>
+    </div>

    <div class="header mt-[80px]">
      <div class="title">Historical Data</div>
      <div class="filter-container">
-        <n-dropdown
+        <!-- <n-dropdown
          trigger="click"
          :options="periodOptions"
          @select="handlePeriodChange"
@ -19,7 +22,7 @@
            {{ state.selectedPeriod }}
            <n-icon><chevron-down-outline /></n-icon>
          </n-button>
-        </n-dropdown>
+        </n-dropdown> -->

        <n-dropdown
          trigger="click"
@ -80,201 +83,202 @@
 </template>

 <script setup>
-import { NDataTable, NButton, NDropdown, NIcon } from "naive-ui";
-import { reactive, onMounted, h, computed } from "vue";
-import axios from "axios";
+import { NDataTable, NButton, NDropdown, NIcon } from 'naive-ui'
+import { reactive, onMounted, h, computed } from 'vue'
+import axios from 'axios'
 import {
  ChevronDownOutline,
  ChevronBackOutline,
  ChevronForwardOutline,
  ArrowUpOutline,
-} from "@vicons/ionicons5";
-import defaultTableData from "../data";
-console.log("defaultTableData", defaultTableData);
+} from '@vicons/ionicons5'
+import defaultTableData from '../data'
+// console.log('defaultTableData', defaultTableData)
+import customEcharts from '@/components/customEcharts/index.vue'

 // 数据筛选选项
 const periodOptions = [
-  { label: "Daily", key: "Daily" },
-  { label: "Weekly", key: "Weekly" },
-  { label: "Monthly", key: "Monthly" },
-  { label: "Quarterly", key: "Quarterly" },
-  { label: "Annual", key: "Annual" },
-];
+  { 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" },
-  { label: "Full History", key: "Full History", disabled: true },
-];
+  { 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' },
+  // { label: 'Full History', key: 'Full History', disabled: true },
+]

 // 分页大小选项
 const pageSizeOptions = [
-  { label: "50", key: 50 },
-  { label: "100", key: 100 },
-  { label: "500", key: 500 },
-  { label: "1000", key: 1000 },
-];
+  { label: '50', key: 50 },
+  { label: '100', key: 100 },
+  { label: '500', key: 500 },
+  { label: '1000', key: 1000 },
+]

 const state = reactive({
-  selectedPeriod: "Daily",
-  selectedDuration: "3 Months",
+  selectedPeriod: 'Daily',
+  selectedDuration: '6 Months',
  tableData: [],
  currentPage: 1,
  pageSize: 50,
-});
+})

 // 计算总页数
 const totalPages = computed(() => {
-  return Math.ceil(state.tableData.length / state.pageSize);
-});
+  return Math.ceil(state.tableData.length / state.pageSize)
+})

 // 计算当前页的数据
 const paginatedData = computed(() => {
-  const start = (state.currentPage - 1) * state.pageSize;
-  const end = start + state.pageSize;
-  return state.tableData.slice(start, end);
-});
+  const start = (state.currentPage - 1) * state.pageSize
+  const end = start + state.pageSize
+  return state.tableData.slice(start, end)
+})

 // 表格列定义
 const columns = [
  {
-    width: 100,
-    title: "Date",
-    key: "date",
-    align: "left",
-    fixed: "left",
+    title: 'Date',
+    key: 'date',
+    align: 'left',
+    fixed: 'left',
+    width: 150,
  },
  {
-    title: "Open",
-    key: "open",
-    align: "center",
-    fixed: "left",
+    title: 'Open',
+    key: 'open',
+    align: 'center',
  },
  {
-    title: "High",
-    key: "high",
-    align: "center",
+    title: 'High',
+    key: 'high',
+    align: 'center',
  },
  {
-    title: "Low",
-    key: "low",
-    align: "center",
+    title: 'Low',
+    key: 'low',
+    align: 'center',
  },
  {
-    title: "Close",
-    key: "close",
-    align: "center",
+    title: 'Close',
+    key: 'close',
+    align: 'center',
  },
  {
-    title: "Adj. Close",
-    key: "adjClose",
-    align: "center",
+    title: 'Adj. Close',
+    key: 'adjClose',
+    align: 'center',
  },
  {
-    title: "Change",
-    key: "change",
-    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);
+      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",
+    title: 'Volume',
+    key: 'volume',
+    align: 'center',
  },
-];
+]

 // 处理下拉选项变更
 const handlePeriodChange = (key) => {
-  state.selectedPeriod = key;
-  if (key === "Annual") {
-    handleDurationChange("Full History");
-    return;
+  state.selectedPeriod = key
+  if (key === 'Annual') {
+    handleDurationChange('Full History')
+    return
  }
-  if (key === "Monthly") {
-    handleDurationChange("10 Years");
-    return;
+  if (key === 'Monthly') {
+    handleDurationChange('10 Years')
+    return
  }
-  if (key === "Quarterly") {
-    handleDurationChange("10 Years");
-    return;
+  if (key === 'Quarterly') {
+    handleDurationChange('10 Years')
+    return
  }
-  getPageData();
-};
+  getPageData()
+}

 const handleDurationChange = (key) => {
-  state.selectedDuration = key;
-  getPageData();
-};
+  state.selectedDuration = key
+  state.currentPage = 1
+  getPageData()
+}

 // 处理分页
 const handlePrevPage = () => {
  if (state.currentPage === 1) {
-    return;
+    return
  }
-  state.currentPage--;
-};
+  state.currentPage--
+}

 const handleNextPage = () => {
  if (state.currentPage >= totalPages.value) {
-    return;
+    return
  }
-  state.currentPage++;
-};
+  state.currentPage++
+}

 const handlePageSizeChange = (size) => {
-  state.pageSize = size;
-  state.currentPage = 1; // 重置到第一页
-};
+  state.pageSize = size
+  state.currentPage = 1 // 重置到第一页
+}

 // 回到顶部
 const scrollToTop = () => {
  // 尝试多种方法
  // 1. 使用document.body
-  document.body.scrollTop = 0;
+  document.body.scrollTop = 0
  // 2. 使用document.documentElement (HTML元素)
-  document.documentElement.scrollTop = 0;
+  document.documentElement.scrollTop = 0
  // 3. 使用scrollIntoView
-  document.querySelector(".historic-data-container").scrollIntoView({
-    behavior: "smooth",
-    block: "start",
-  });
-};
+  document.querySelector('.historic-data-container').scrollIntoView({
+    behavior: 'smooth',
+    block: 'start',
+  })
+}
 onMounted(() => {
-  getPageDefaultData();
-});
+  getPageData()
+})

 const getPageDefaultData = async () => {
  try {
    let url =
-      "https://stockanalysis.com/api/symbol/a/OTC-MINM/history?type=chart";
-    const res = await axios.get(url);
-    let originalData = res.data.data;
+      'https://stockanalysis.com/api/symbol/a/OTC-MINM/history?period=Daily&range=3M'
+    const res = await axios.get(url)
+    let originalData = res.data.data

    // 转换为日期格式："Nov 26, 2024"
    let calcApiData = originalData.map((item) => [
-      new Date(item[0]).toLocaleDateString("en-US", {
-        month: "short",
-        day: "numeric",
-        year: "numeric",
+      new Date(item[0]).toLocaleDateString('en-US', {
+        month: 'short',
+        day: 'numeric',
+        year: 'numeric',
      }),
      item[1],
-    ]);
-    console.log("接口数据", calcApiData);
+    ])
+    // console.log('接口数据', calcApiData)

    // 使用API数据更新defaultTableData中的close和adjClose值
    const updatedTableData = defaultTableData.map((tableItem) => {
      // 查找对应日期的API数据
      const matchedApiData = calcApiData.find(
-        (apiItem) => apiItem[0] === tableItem.date
-      );
+        (apiItem) => apiItem[0] === tableItem.date,
+      )

      if (matchedApiData) {
        // 更新close和adjClose值
@ -282,56 +286,100 @@ const getPageDefaultData = async () => {
          ...tableItem,
          close: matchedApiData[1].toFixed(2),
          adjClose: matchedApiData[1].toFixed(2),
-        };
+        }
      }
-      return tableItem;
-    });
+      return tableItem
+    })

-    state.tableData = updatedTableData;
+    state.tableData = updatedTableData
  } catch (error) {
-    console.error("获取数据失败", error);
+    // console.error('获取数据失败', error)
  }
-};
+}
 const getPageData = async () => {
-  let range = "";
-  if (state.selectedDuration === "3 Months") {
-    range = "3M";
-  } else if (state.selectedDuration === "6 Months") {
-    range = "6M";
-  } else if (state.selectedDuration === "Year to Date") {
-    range = "YTD";
-  } else if (state.selectedDuration === "1 Year") {
-    range = "1Y";
-  } else if (state.selectedDuration === "5 Years") {
-    range = "5Y";
-  } else if (state.selectedDuration === "10 Years") {
-    range = "10Y";
-  } else if (state.selectedDuration === "Full History") {
-    range = "Max";
+  let range = ''
+  let now = new Date()
+  const last = new Date(now)
+  last.setMonth(now.getMonth() - 6)
+  let fromDate = last
+  let toDate =
+    now.getFullYear() +
+    '-' +
+    String(now.getMonth() + 1).padStart(2, '0') +
+    '-' +
+    String(now.getDate()).padStart(2, '0')
+  if (state.selectedDuration === '3 Months') {
+    range = '3M'
+    const last = new Date(now)
+    last.setMonth(now.getMonth() - 3)
+    fromDate = last
+  } else if (state.selectedDuration === '6 Months') {
+    range = '6M'
+    const last = new Date(now)
+    last.setMonth(now.getMonth() - 6)
+    fromDate = last
+  } else if (state.selectedDuration === 'Year to Date') {
+    range = 'YTD'
+    fromDate = new Date(now.getFullYear(), 0, 1)
+  } else if (state.selectedDuration === '1 Year') {
+    range = '1Y'
+    const last = new Date(now)
+    last.setFullYear(now.getFullYear() - 1)
+    fromDate = last
+  } else if (state.selectedDuration === '5 Years') {
+    range = '5Y'
+    const last = new Date(now)
+    last.setFullYear(now.getFullYear() - 5)
+    fromDate = last
+  } else if (state.selectedDuration === '10 Years') {
+    range = '10Y'
+    const last = new Date(now)
+    last.setFullYear(now.getFullYear() - 10)
+    fromDate = last
+  } else if (state.selectedDuration === 'Full History') {
+    range = 'Max'
+    fromDate = new Date('2009-10-07')
  }
-  let url = `https://stockanalysis.com/api/symbol/a/OTC-MINM/history?period=${state.selectedPeriod}&range=${range}`;
-  const res = await axios.get(url);
-  if (res.data.status === 200) {
-    // 转换为日期格式："Nov 26, 2024"
-    let resultData = res.data.data.map((item) => {
-      return {
-        date: new Date(item.t).toLocaleDateString("en-US", {
-          month: "short",
-          day: "numeric",
-          year: "numeric",
-        }),
-        open: item.o != null ? Number(item.o).toFixed(2) : "",
-        high: item.h != null ? Number(item.h).toFixed(2) : "",
-        low: item.l != null ? Number(item.l).toFixed(2) : "",
-        close: item.c != null ? Number(item.c).toFixed(2) : "",
-        adjClose: item.a != null ? Number(item.a).toFixed(2) : "",
-        change: item.ch != null ? Number(item.ch).toFixed(2) + "%" : "",
-        volume: item.v,
-      };
-    });
-    state.tableData = resultData;
+  let finalFromDate =
+    fromDate.getFullYear() +
+    '-' +
+    String(fromDate.getMonth() + 1).padStart(2, '0') +
+    '-' +
+    String(fromDate.getDate()).padStart(2, '0')
+  // let url = `https://stockanalysis.com/api/symbol/a/OTC-MINM/history?period=${state.selectedPeriod}&range=${range}`
+  let url =
+    'https://common.szjixun.cn/api/stock/history/list?from=' +
+    finalFromDate +
+    '&to=' +
+    toDate
+  const res = await axios.get(url)
+  // console.error(res)
+  if (res.status === 200) {
+    if (res.data.status === 0) {
+      // 转换为日期格式："Nov 26, 2024"
+      let resultData = res.data.data.map((item) => {
+        return {
+          date: new Date(item.date).toLocaleDateString('en-US', {
+            month: 'short',
+            day: 'numeric',
+            year: 'numeric',
+          }),
+          open: item.open != null ? Number(item.open).toFixed(2) : '',
+          high: item.high != null ? Number(item.high).toFixed(2) : '',
+          low: item.low != null ? Number(item.low).toFixed(2) : '',
+          close: item.close != null ? Number(item.close).toFixed(2) : '',
+          adjClose: item.close != null ? Number(item.close).toFixed(2) : '',
+          change:
+            item.changePercent != null
+              ? Number(item.changePercent).toFixed(2) + '%'
+              : '',
+          volume: item.volume,
+        }
+      })
+      state.tableData = resultData
+    }
  }
-};
+}
 </script>

 <style scoped lang="scss">
--- a/src/views/historic-stock/size768/index.vue
+++ b/src/views/historic-stock/size768/index.vue
@ -1,15 +1,18 @@
 <template>
  <div class="historic-data-container" style="margin-bottom: 40px">
-    <img
+    <!-- <img
      src="@/assets/image/historic-stock.png"
      alt="1"
      style="max-width: 100%; margin: 0 auto"
-    />
+    /> -->
+    <div class="echarts-container">
+      <customEcharts></customEcharts>
+    </div>

    <div class="header mt-[20px]">
      <div class="title">Historical Data</div>
      <div class="filter-container">
-        <n-dropdown
+        <!-- <n-dropdown
          trigger="click"
          :options="periodOptions"
          @select="handlePeriodChange"
@ -19,7 +22,7 @@
            {{ state.selectedPeriod }}
            <n-icon><chevron-down-outline /></n-icon>
          </n-button>
-        </n-dropdown>
+        </n-dropdown> -->

        <n-dropdown
          trigger="click"
@ -82,200 +85,202 @@
 </template>

 <script setup>
-import { NDataTable, NButton, NDropdown, NIcon } from "naive-ui";
-import { reactive, onMounted, h, computed } from "vue";
-import axios from "axios";
+import { NDataTable, NButton, NDropdown, NIcon } from 'naive-ui'
+import { reactive, onMounted, h, computed } from 'vue'
+import axios from 'axios'
 import {
  ChevronDownOutline,
  ChevronBackOutline,
  ChevronForwardOutline,
  ArrowUpOutline,
-} from "@vicons/ionicons5";
-import defaultTableData from "../data";
-console.log("defaultTableData", defaultTableData);
+} from '@vicons/ionicons5'
+import defaultTableData from '../data'
+// console.log('defaultTableData', defaultTableData)
+import customEcharts from '@/components/customEcharts/index.vue'

 // 数据筛选选项
 const periodOptions = [
-  { label: "Daily", key: "Daily" },
-  { label: "Weekly", key: "Weekly" },
-  { label: "Monthly", key: "Monthly" },
-  { label: "Quarterly", key: "Quarterly" },
-  { label: "Annual", key: "Annual" },
-];
+  { 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" },
-  { label: "Full History", key: "Full History", disabled: true },
-];
+  { 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' },
+  // { label: 'Full History', key: 'Full History', disabled: true },
+]

 // 分页大小选项
 const pageSizeOptions = [
-  { label: "50", key: 50 },
-  { label: "100", key: 100 },
-  { label: "500", key: 500 },
-  { label: "1000", key: 1000 },
-];
+  { label: '50', key: 50 },
+  { label: '100', key: 100 },
+  { label: '500', key: 500 },
+  { label: '1000', key: 1000 },
+]

 const state = reactive({
-  selectedPeriod: "Daily",
-  selectedDuration: "3 Months",
+  selectedPeriod: 'Daily',
+  selectedDuration: '6 Months',
  tableData: [],
  currentPage: 1,
  pageSize: 50,
-});
+})

 // 计算总页数
 const totalPages = computed(() => {
-  return Math.ceil(state.tableData.length / state.pageSize);
-});
+  return Math.ceil(state.tableData.length / state.pageSize)
+})

 // 计算当前页的数据
 const paginatedData = computed(() => {
-  const start = (state.currentPage - 1) * state.pageSize;
-  const end = start + state.pageSize;
-  return state.tableData.slice(start, end);
-});
+  const start = (state.currentPage - 1) * state.pageSize
+  const end = start + state.pageSize
+  return state.tableData.slice(start, end)
+})

 // 表格列定义
 const columns = [
  {
-    title: "Date",
-    key: "date",
-    align: "left",
-    fixed: "left",
+    title: 'Date',
+    key: 'date',
+    align: 'left',
+    fixed: 'left',
    width: 150,
  },
  {
-    title: "Open",
-    key: "open",
-    align: "center",
+    title: 'Open',
+    key: 'open',
+    align: 'center',
  },
  {
-    title: "High",
-    key: "high",
-    align: "center",
+    title: 'High',
+    key: 'high',
+    align: 'center',
  },
  {
-    title: "Low",
-    key: "low",
-    align: "center",
+    title: 'Low',
+    key: 'low',
+    align: 'center',
  },
  {
-    title: "Close",
-    key: "close",
-    align: "center",
+    title: 'Close',
+    key: 'close',
+    align: 'center',
  },
  {
-    title: "Adj. Close",
-    key: "adjClose",
-    align: "center",
+    title: 'Adj. Close',
+    key: 'adjClose',
+    align: 'center',
  },
  {
-    title: "Change",
-    key: "change",
-    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);
+      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",
+    title: 'Volume',
+    key: 'volume',
+    align: 'center',
  },
-];
+]

 // 处理下拉选项变更
 const handlePeriodChange = (key) => {
-  state.selectedPeriod = key;
-  if (key === "Annual") {
-    handleDurationChange("Full History");
-    return;
+  state.selectedPeriod = key
+  if (key === 'Annual') {
+    handleDurationChange('Full History')
+    return
  }
-  if (key === "Monthly") {
-    handleDurationChange("10 Years");
-    return;
+  if (key === 'Monthly') {
+    handleDurationChange('10 Years')
+    return
  }
-  if (key === "Quarterly") {
-    handleDurationChange("10 Years");
-    return;
+  if (key === 'Quarterly') {
+    handleDurationChange('10 Years')
+    return
  }
-  getPageData();
-};
+  getPageData()
+}

 const handleDurationChange = (key) => {
-  state.selectedDuration = key;
-  getPageData();
-};
+  state.selectedDuration = key
+  state.currentPage = 1
+  getPageData()
+}

 // 处理分页
 const handlePrevPage = () => {
  if (state.currentPage === 1) {
-    return;
+    return
  }
-  state.currentPage--;
-};
+  state.currentPage--
+}

 const handleNextPage = () => {
  if (state.currentPage >= totalPages.value) {
-    return;
+    return
  }
-  state.currentPage++;
-};
+  state.currentPage++
+}

 const handlePageSizeChange = (size) => {
-  state.pageSize = size;
-  state.currentPage = 1; // 重置到第一页
-};
+  state.pageSize = size
+  state.currentPage = 1 // 重置到第一页
+}

 // 回到顶部
 const scrollToTop = () => {
  // 尝试多种方法
  // 1. 使用document.body
-  document.body.scrollTop = 0;
+  document.body.scrollTop = 0
  // 2. 使用document.documentElement (HTML元素)
-  document.documentElement.scrollTop = 0;
+  document.documentElement.scrollTop = 0
  // 3. 使用scrollIntoView
-  document.querySelector(".historic-data-container").scrollIntoView({
-    behavior: "smooth",
-    block: "start",
-  });
-};
+  document.querySelector('.historic-data-container').scrollIntoView({
+    behavior: 'smooth',
+    block: 'start',
+  })
+}
 onMounted(() => {
-  getPageDefaultData();
-});
+  getPageData()
+})

 const getPageDefaultData = async () => {
  try {
    let url =
-      "https://stockanalysis.com/api/symbol/a/OTC-MINM/history?type=chart";
-    const res = await axios.get(url);
-    let originalData = res.data.data;
+      'https://stockanalysis.com/api/symbol/a/OTC-MINM/history?period=Daily&range=3M'
+    const res = await axios.get(url)
+    let originalData = res.data.data

    // 转换为日期格式："Nov 26, 2024"
    let calcApiData = originalData.map((item) => [
-      new Date(item[0]).toLocaleDateString("en-US", {
-        month: "short",
-        day: "numeric",
-        year: "numeric",
+      new Date(item[0]).toLocaleDateString('en-US', {
+        month: 'short',
+        day: 'numeric',
+        year: 'numeric',
      }),
      item[1],
-    ]);
-    console.log("接口数据", calcApiData);
+    ])
+    // console.log('接口数据', calcApiData)

    // 使用API数据更新defaultTableData中的close和adjClose值
    const updatedTableData = defaultTableData.map((tableItem) => {
      // 查找对应日期的API数据
      const matchedApiData = calcApiData.find(
-        (apiItem) => apiItem[0] === tableItem.date
-      );
+        (apiItem) => apiItem[0] === tableItem.date,
+      )

      if (matchedApiData) {
        // 更新close和adjClose值
@ -283,56 +288,100 @@ const getPageDefaultData = async () => {
          ...tableItem,
          close: matchedApiData[1].toFixed(2),
          adjClose: matchedApiData[1].toFixed(2),
-        };
+        }
      }
-      return tableItem;
-    });
+      return tableItem
+    })

-    state.tableData = updatedTableData;
+    state.tableData = updatedTableData
  } catch (error) {
-    console.error("获取数据失败", error);
+    // console.error('获取数据失败', error)
  }
-};
+}
 const getPageData = async () => {
-  let range = "";
-  if (state.selectedDuration === "3 Months") {
-    range = "3M";
-  } else if (state.selectedDuration === "6 Months") {
-    range = "6M";
-  } else if (state.selectedDuration === "Year to Date") {
-    range = "YTD";
-  } else if (state.selectedDuration === "1 Year") {
-    range = "1Y";
-  } else if (state.selectedDuration === "5 Years") {
-    range = "5Y";
-  } else if (state.selectedDuration === "10 Years") {
-    range = "10Y";
-  } else if (state.selectedDuration === "Full History") {
-    range = "Max";
+  let range = ''
+  let now = new Date()
+  const last = new Date(now)
+  last.setMonth(now.getMonth() - 6)
+  let fromDate = last
+  let toDate =
+    now.getFullYear() +
+    '-' +
+    String(now.getMonth() + 1).padStart(2, '0') +
+    '-' +
+    String(now.getDate()).padStart(2, '0')
+  if (state.selectedDuration === '3 Months') {
+    range = '3M'
+    const last = new Date(now)
+    last.setMonth(now.getMonth() - 3)
+    fromDate = last
+  } else if (state.selectedDuration === '6 Months') {
+    range = '6M'
+    const last = new Date(now)
+    last.setMonth(now.getMonth() - 6)
+    fromDate = last
+  } else if (state.selectedDuration === 'Year to Date') {
+    range = 'YTD'
+    fromDate = new Date(now.getFullYear(), 0, 1)
+  } else if (state.selectedDuration === '1 Year') {
+    range = '1Y'
+    const last = new Date(now)
+    last.setFullYear(now.getFullYear() - 1)
+    fromDate = last
+  } else if (state.selectedDuration === '5 Years') {
+    range = '5Y'
+    const last = new Date(now)
+    last.setFullYear(now.getFullYear() - 5)
+    fromDate = last
+  } else if (state.selectedDuration === '10 Years') {
+    range = '10Y'
+    const last = new Date(now)
+    last.setFullYear(now.getFullYear() - 10)
+    fromDate = last
+  } else if (state.selectedDuration === 'Full History') {
+    range = 'Max'
+    fromDate = new Date('2009-10-07')
  }
-  let url = `https://stockanalysis.com/api/symbol/a/OTC-MINM/history?period=${state.selectedPeriod}&range=${range}`;
-  const res = await axios.get(url);
-  if (res.data.status === 200) {
-    // 转换为日期格式："Nov 26, 2024"
-    let resultData = res.data.data.map((item) => {
-      return {
-        date: new Date(item.t).toLocaleDateString("en-US", {
-          month: "short",
-          day: "numeric",
-          year: "numeric",
-        }),
-        open: item.o != null ? Number(item.o).toFixed(2) : "",
-        high: item.h != null ? Number(item.h).toFixed(2) : "",
-        low: item.l != null ? Number(item.l).toFixed(2) : "",
-        close: item.c != null ? Number(item.c).toFixed(2) : "",
-        adjClose: item.a != null ? Number(item.a).toFixed(2) : "",
-        change: item.ch != null ? Number(item.ch).toFixed(2) + "%" : "",
-        volume: item.v,
-      };
-    });
-    state.tableData = resultData;
+  let finalFromDate =
+    fromDate.getFullYear() +
+    '-' +
+    String(fromDate.getMonth() + 1).padStart(2, '0') +
+    '-' +
+    String(fromDate.getDate()).padStart(2, '0')
+  // let url = `https://stockanalysis.com/api/symbol/a/OTC-MINM/history?period=${state.selectedPeriod}&range=${range}`
+  let url =
+    'https://common.szjixun.cn/api/stock/history/list?from=' +
+    finalFromDate +
+    '&to=' +
+    toDate
+  const res = await axios.get(url)
+  // console.error(res)
+  if (res.status === 200) {
+    if (res.data.status === 0) {
+      // 转换为日期格式："Nov 26, 2024"
+      let resultData = res.data.data.map((item) => {
+        return {
+          date: new Date(item.date).toLocaleDateString('en-US', {
+            month: 'short',
+            day: 'numeric',
+            year: 'numeric',
+          }),
+          open: item.open != null ? Number(item.open).toFixed(2) : '',
+          high: item.high != null ? Number(item.high).toFixed(2) : '',
+          low: item.low != null ? Number(item.low).toFixed(2) : '',
+          close: item.close != null ? Number(item.close).toFixed(2) : '',
+          adjClose: item.close != null ? Number(item.close).toFixed(2) : '',
+          change:
+            item.changePercent != null
+              ? Number(item.changePercent).toFixed(2) + '%'
+              : '',
+          volume: item.volume,
+        }
+      })
+      state.tableData = resultData
+    }
  }
-};
+}
 </script>

 <style scoped lang="scss">
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
齐斌	0b000f2eb0	修正股票变动颜色逻辑：将负值显示为绿色，正值显示为红色，确保在不同屏幕尺寸下的一致性。	2025-06-09 12:12:56 +08:00
齐斌	1bdea06916	去掉括号	2025-06-06 18:41:48 +08:00
张元山	1aad765dc1	fix news	2025-06-06 17:59:21 +08:00
liwenhao	b298d07854	修改时间	2025-06-03 11:11:20 +08:00
liwenhao	710bca3486	新闻事件倒序	2025-06-03 11:01:06 +08:00
张元山	3029de7916	Merge branch 'main' of https://gitea-inner.fontree.cn/scout666/fiee-official-website	2025-06-03 10:59:20 +08:00
张元山	a39c4cf620	新闻倒序	2025-06-03 10:59:19 +08:00
liwenhao	1195b8f8e4	新闻新增	2025-06-03 10:50:55 +08:00
liwenhao	fc4f4ab3f2	Merge branch 'main' of https://gitea-inner.fontree.cn/scout666/fiee-official-website into LiWenHao	2025-06-03 10:46:18 +08:00
liwenhao	35faed56cb	首页新增新闻	2025-06-03 10:45:56 +08:00
张元山	460060c087	add news	2025-06-03 10:37:55 +08:00
qibin	a38ea6964f	修改时间为4PM	2025-06-01 22:19:52 +08:00
qibin	ab43f5f8b9	fixbugdate	2025-06-01 22:13:56 +08:00
qibin	ae1a562bcb	fixbug	2025-05-31 21:21:33 +08:00
齐斌	e0c28b5522	Merge branch 'main' of https://gitea-inner.fontree.cn/scout666/fiee-official-website	2025-05-31 04:00:50 +08:00
齐斌	461705f337	修正了英文本地化文件中的标题格式，确保每个标题前有空格，并优化了Cao Yu的介绍内容，使其更流畅。	2025-05-31 04:00:49 +08:00
wangyifeng	b841a6d911	Merge branch 'wyfMain-dev-0530'	2025-05-31 02:22:30 +08:00
wangyifeng	d2dd262b9e	处理遗漏的图表列表数据页的多分辨率数据获取	2025-05-31 02:21:48 +08:00
张元山	1949046344	fix 375 768	2025-05-31 02:17:58 +08:00
张元山	a92f9ca971	fix news	2025-05-31 02:13:12 +08:00
张元山	697dd232f6	fix myhome	2025-05-31 02:04:46 +08:00
张元山	61b5a9eaea	Merge branch 'main' of https://gitea-inner.fontree.cn/scout666/fiee-official-website	2025-05-31 02:03:51 +08:00
张元山	36d961fcb6	fix news	2025-05-31 02:03:49 +08:00
wangyifeng	dbe739ed50	修改首页卡片last price为price，并取对应值	2025-05-31 01:56:26 +08:00
wangyifeng	2dc262fbd8	Merge branch 'main' of https://gitea-inner.fontree.cn/scout666/fiee-official-website	2025-05-31 01:50:43 +08:00
张元山	01723e2a2f	Merge branch 'main' of https://gitea-inner.fontree.cn/scout666/fiee-official-website	2025-05-31 01:50:07 +08:00
张元山	0b5494b55b	add sec idx	2025-05-31 01:50:05 +08:00
wangyifeng	4cd3e2ae6e	Merge branch 'main' of https://gitea-inner.fontree.cn/scout666/fiee-official-website	2025-05-31 01:50:04 +08:00
齐斌	49eb1646c2	去掉日期	2025-05-31 01:49:51 +08:00
wangyifeng	efd50bc82e	Merge branch 'wyfMain-dev-0530'	2025-05-31 01:49:50 +08:00
wangyifeng	396015f628	移除暂时不可点击的Full History筛选条件	2025-05-31 01:49:03 +08:00
齐斌	029b3a978a	fixbug	2025-05-31 01:48:15 +08:00
wangyifeng	651443a95c	全局注释console.log	2025-05-31 01:39:45 +08:00
wangyifeng	096fea2b65	Merge branch 'wyfMain-dev-0530'	2025-05-31 01:31:27 +08:00
wangyifeng	a13a49f666	调整价格显示	2025-05-31 01:31:03 +08:00
张元山	9d10a578e5	fix companyoverview	2025-05-31 01:26:46 +08:00
张元山	5c90cd9486	Merge branch 'main' of https://gitea-inner.fontree.cn/scout666/fiee-official-website	2025-05-31 01:21:04 +08:00
张元山	9d6d85490c	fix press-releases	2025-05-31 01:21:02 +08:00
齐斌	f5c213eac8	fixbug	2025-05-31 01:12:18 +08:00
wangyifeng	c987f08490	Merge branch 'wyfMain-dev-0530'	2025-05-31 00:58:57 +08:00
wangyifeng	e7af9a09de	新增3个隐私政策页面；调整change文字显示	2025-05-31 00:58:09 +08:00
齐斌	07ff81ef66	fixfile	2025-05-31 00:50:40 +08:00
齐斌	1fbda73a3f	更新 secFiles.js 文件，添加多个 FORM 4 的文件信息，并在 en.js 文件中更正管理层成员的名称为“Li Wai Chung”。	2025-05-31 00:40:22 +08:00
齐斌	7e0ef75a5e	Merge branch 'main' of https://gitea-inner.fontree.cn/scout666/fiee-official-website	2025-05-31 00:23:07 +08:00
齐斌	ed85bc2771	更新委员会角色的治理职务，将“Chair”更改为“Member”，并在其他角色中进行相应调整，以确保角色的一致性和准确性。	2025-05-31 00:23:06 +08:00
wangyifeng	afe010ae1d	Merge branch 'wyfMain-dev-0530'	2025-05-31 00:12:52 +08:00
wangyifeng	afec6b8ef1	解决图表y轴移动到右侧，会在移动端被遮挡一部分的问题；解决计算最大日期最近前一天有数据的日期时，如果当天正好没数据又是最后一天，临界值会报错的问题	2025-05-31 00:09:19 +08:00
齐斌	1abd94cdce	修改简介，PC图表	2025-05-31 00:00:04 +08:00
wangyifeng	1a031d0be2	Merge branch 'main' of https://gitea-inner.fontree.cn/scout666/fiee-official-website	2025-05-30 23:22:08 +08:00
张元山	1179c99782	Merge branch 'main' of https://gitea-inner.fontree.cn/scout666/fiee-official-website	2025-05-30 23:22:02 +08:00
张元山	3d96acdc4e	fix pdf	2025-05-30 23:21:27 +08:00
wangyifeng	664b66b414	实现图表完整功能；接入2个新的数据接口	2025-05-30 23:21:20 +08:00
齐斌	51a52f9696	更新 FiEE, Inc. 的商业行为和道德规范、提名与公司治理委员会章程以及审计委员会章程的格式和内容，确保文件的一致性和可读性。	2025-05-30 23:18:51 +08:00
张元山	2471bcd0a7	Merge branch 'main' of https://gitea-inner.fontree.cn/scout666/fiee-official-website	2025-05-30 22:46:10 +08:00
张元山	917f76dac3	fix press-releases	2025-05-30 22:46:08 +08:00
齐斌	4930853816	Merge branch 'main' of https://gitea-inner.fontree.cn/scout666/fiee-official-website	2025-05-30 22:45:46 +08:00
齐斌	ad5d6f7b1a	将所有相关 Vue 组件中的 API 提交地址从 'https://common.szjixun.cn/api/stock/submit/data ' 更新为 'https://erpapi-out.szjixun.cn/api/stock/submit/data'，以确保正确的 API 调用。	2025-05-30 22:45:45 +08:00
张元山	fa19e8bc87	fix news	2025-05-30 22:39:30 +08:00
张元山	dbc8ecb84e	fix annualreports	2025-05-30 22:25:23 +08:00
张元山	afb01fab8e	fix home	2025-05-30 22:19:35 +08:00
齐斌	363d1e1f9e	Merge branch 'main' of https://gitea-inner.fontree.cn/scout666/fiee-official-website	2025-05-30 21:24:53 +08:00
齐斌	98cd9fbbe0	在所有相关的 Vue 组件中添加了 axios 导入，并将 handleSubmit 函数修改为异步函数，以便在提交表单时处理 API 请求并根据响应状态更新提交状态。	2025-05-30 21:24:52 +08:00
张元山	af39cb7bb3	fix footer	2025-05-30 20:33:37 +08:00
张元山	624824e956	Merge branch 'main' of https://gitea-inner.fontree.cn/scout666/fiee-official-website	2025-05-30 20:31:02 +08:00
张元山	047a1ebc88	fix footer	2025-05-30 20:31:01 +08:00
齐斌	4933765a4c	删掉部分成员	2025-05-30 20:17:21 +08:00
齐斌	9bd9c0b95a	Merge branch 'main' of https://gitea-inner.fontree.cn/scout666/fiee-official-website	2025-05-30 20:11:43 +08:00
齐斌	5614ddf4ef	删掉计算器	2025-05-30 20:11:42 +08:00
张元山	59202a8471	Merge branch 'main' of https://gitea-inner.fontree.cn/scout666/fiee-official-website	2025-05-30 20:10:48 +08:00
张元山	ad11498a31	fix myhome	2025-05-30 20:10:47 +08:00
齐斌	f1a90c8b6a	Merge branch 'main' of https://gitea-inner.fontree.cn/scout666/fiee-official-website	2025-05-30 20:10:03 +08:00
齐斌	283f73d2c3	更改简介	2025-05-30 20:10:02 +08:00
张元山	37d9be4c38	fix myhome	2025-05-30 19:46:08 +08:00
张元山	0971e78597	fix myhome	2025-05-30 19:38:01 +08:00
张元山	7eb791d38e	Merge branch 'main' of https://gitea-inner.fontree.cn/scout666/fiee-official-website	2025-05-30 19:19:14 +08:00
张元山	a0ada9e66a	fix style	2025-05-30 19:19:12 +08:00
齐斌	d0f3fbc1dd	修改文件	2025-05-30 19:00:37 +08:00
张元山	ae0d82ae16	fix secfilingsDefail	2025-05-30 17:19:04 +08:00
张元山	7b78b04f38	fix secfilings	2025-05-30 17:17:02 +08:00
齐斌	be833783f2	Merge branch 'main' of https://gitea-inner.fontree.cn/scout666/fiee-official-website	2025-05-30 17:04:49 +08:00
齐斌	de9fb51ec3	addData	2025-05-30 17:04:48 +08:00
张元山	16241a203d	fix secfilingsdetail	2025-05-30 16:51:52 +08:00
张元山	78d8364816	fix year select	2025-05-30 16:46:30 +08:00
liwenhao	8fff836596	Merge branch 'LiWenHao'	2025-05-30 16:32:32 +08:00
liwenhao	3022ec9756	修改颜色	2025-05-30 16:32:19 +08:00
张元山	abb1c220cf	Merge branch 'main' of https://gitea-inner.fontree.cn/scout666/fiee-official-website	2025-05-30 16:18:55 +08:00
张元山	81de59b9eb	fix secfilings	2025-05-30 16:18:53 +08:00
liwenhao	126bf56327	修改	2025-05-30 16:13:25 +08:00
wangyifeng	208a426324	Merge branch 'wyfMain-dev'	2025-05-30 15:44:59 +08:00
wangyifeng	75824076ef	接入echarts图表，实现部分样式	2025-05-30 15:44:26 +08:00
liwenhao	f55a24ea63	Merge branch 'main' of https://gitea-inner.fontree.cn/scout666/fiee-official-website into LiWenHao	2025-05-30 15:39:05 +08:00
liwenhao	2f94959e19	修改文字添加时间删除文字	2025-05-30 15:38:49 +08:00
张元山	d71e435ee1	Merge branch 'main' of https://gitea-inner.fontree.cn/scout666/fiee-official-website	2025-05-30 15:33:37 +08:00
张元山	42b2313857	add secfilings	2025-05-30 15:33:35 +08:00
齐斌	0a5088449a	Merge branch 'main' of https://gitea-inner.fontree.cn/scout666/fiee-official-website	2025-05-30 15:27:06 +08:00
齐斌	ba62f71796	addData	2025-05-30 15:27:05 +08:00
liwenhao	969a16577e	删除首页标题	2025-05-30 14:24:15 +08:00
wangyifeng	bad5b37b05	修改底部文字，增加4个超链接	2025-05-30 14:07:52 +08:00
齐斌	8a9002a9e3	changestock	2025-05-30 13:53:22 +08:00
liwenhao	60590596b7	修改文字	2025-05-29 16:43:05 +08:00
liwenhao	5d0f85ba9b	Merge branch 'main' of https://gitea-inner.fontree.cn/scout666/fiee-official-website into LiWenHao	2025-05-28 15:51:02 +08:00
liwenhao	7c6a61b99f	尺寸修改	2025-05-28 15:50:41 +08:00
齐斌	de8617321d	Merge branch 'main' of https://gitea-inner.fontree.cn/scout666/fiee-official-website	2025-05-28 15:43:06 +08:00
齐斌	786740cdfa	更新股票变动显示逻辑，优化不同屏幕尺寸下的样式适配，确保变动信息根据涨跌状态动态改变颜色。	2025-05-28 15:43:05 +08:00
liwenhao	caf62145a0	change 适配	2025-05-28 15:23:47 +08:00
liwenhao	f33003eb04	股票时间修改	2025-05-28 15:22:14 +08:00
齐斌	c4b11ec76a	更新股票交易日计算逻辑，修复获取股票数据的API地址，并统一修改页面数据获取函数名称。	2025-05-28 15:07:00 +08:00
liwenhao	39deb7bd70	修改文字自适应尺寸	2025-05-26 19:20:09 +08:00
liwenhao	946652acae	优化修改	2025-05-26 19:12:57 +08:00
张元山	99ec5382bf	Merge branch 'main' of https://gitea-inner.fontree.cn/scout666/fiee-official-website	2025-05-26 16:48:46 +08:00
张元山	d4df67bd76	fix icon	2025-05-26 16:48:44 +08:00
liwenhao	75c377eafe	Governance 修改文字	2025-05-26 16:43:58 +08:00
liwenhao	614ae9fce4	修改股票数据	2025-05-26 16:38:51 +08:00
liwenhao	af91764f94	修改字体样式	2025-05-26 16:23:21 +08:00
张元山	b06317e581	Merge branch 'main' of https://gitea-inner.fontree.cn/scout666/fiee-official-website	2025-05-26 16:03:52 +08:00
张元山	44d3555e06	fix file down	2025-05-26 16:03:51 +08:00
liwenhao	97fc7d966b	corporate informain模块修改标题字体加粗	2025-05-26 16:02:46 +08:00
liwenhao	7c741962d4	Merge branch 'main' of https://gitea-inner.fontree.cn/scout666/fiee-official-website into LiWenHao	2025-05-26 15:41:53 +08:00
liwenhao	9cba09c2fb	间距调整	2025-05-26 15:41:25 +08:00
liwenhao	91485a72b4	修改字体大小以及文字	2025-05-26 15:38:24 +08:00
张元山	22e9b74173	fix quarterlyresults	2025-05-26 15:30:58 +08:00
liwenhao	b184eba64d	Merge branch 'main' of https://gitea-inner.fontree.cn/scout666/fiee-official-website into LiWenHao	2025-05-26 15:14:50 +08:00
liwenhao	28f6123e93	调整样式修改文字添加时间	2025-05-26 15:14:44 +08:00
Phoenix	c4a8271816	美国时间显示	2025-05-26 15:13:40 +08:00
liwenhao	1164d4ef7b	111	2025-05-26 13:40:09 +08:00