去掉括号

fix news
修改时间
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 · 2025-06-03 10:59:19 +08:00
214 changed files with 64321 additions and 401 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
@ -13,8 +13,13 @@
  "dependencies": {
    "@fingerprintjs/fingerprintjs": "^4.4.3",
    "@unocss/reset": "^0.61.9",
    "@vicons/ionicons5": "^0.13.0",
    "@vicons/utils": "^0.1.4",
    "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",
    "lodash": "^4.17.21",
@ -46,6 +51,7 @@
    "unplugin-auto-import": "^0.18.2",
    "unplugin-vue-components": "^0.27.3",
    "vite": "^5.3.4",
-    "vite-plugin-imagemin": "^0.6.1"
+    "vite-plugin-imagemin": "^0.6.1",
    "vite-plugin-vue-devtools": "^7.7.6"
  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/icon.png
+++ b/public/icon.png
--- a/src/App.vue
+++ b/src/App.vue
@ -1,10 +1,10 @@
 <script setup>
-import { ref } from "vue";
+import { ref } from 'vue'
-import { useI18n } from "vue-i18n";
+import { useI18n } from 'vue-i18n'
-import { NConfigProvider, NDropdown } from "naive-ui";
+import { NConfigProvider, NDropdown } from 'naive-ui'
-const { locale } = useI18n();
+const { locale } = useI18n()
-const primaryColor = ref("#2B69A1");
+const primaryColor = ref('#8B59F7')
 const themeOverrides = ref({
  common: {
    primaryColorPressed: primaryColor,
@ -15,10 +15,7 @@ const themeOverrides = ref({
    primaryColor: primaryColor,
    primaryColorHover: primaryColor,
  },
-});
+})
 </script>
 <template>
--- 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/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/file/quarterly/10Q
+++ b/src/assets/file/quarterly/10Q
--- a/src/assets/file/quarterly/10Q
+++ b/src/assets/file/quarterly/10Q
--- a/src/assets/file/quarterly/10Q
+++ b/src/assets/file/quarterly/10Q
--- a/src/assets/file/quarterly/10Q
+++ b/src/assets/file/quarterly/10Q
--- a/src/assets/file/quarterly/10Q
+++ b/src/assets/file/quarterly/10Q
--- a/src/assets/file/quarterly/10Q
+++ b/src/assets/file/quarterly/10Q
--- a/src/assets/file/quarterly/10Q
+++ b/src/assets/file/quarterly/10Q
--- a/src/assets/file/quarterly/10Q
+++ b/src/assets/file/quarterly/10Q
--- a/src/assets/file/quarterly/10Q
+++ b/src/assets/file/quarterly/10Q
--- a/src/assets/file/quarterly/10Q
+++ b/src/assets/file/quarterly/10Q
--- a/src/assets/file/quarterly/10Q
+++ b/src/assets/file/quarterly/10Q
--- a/src/assets/file/quarterly/10Q
+++ b/src/assets/file/quarterly/10Q
--- a/src/assets/file/quarterly/10Q
+++ b/src/assets/file/quarterly/10Q
--- a/src/assets/file/quarterly/10Q
+++ b/src/assets/file/quarterly/10Q
--- a/src/assets/file/quarterly/10Q
+++ b/src/assets/file/quarterly/10Q
--- a/src/assets/file/quarterly/10Q
+++ b/src/assets/file/quarterly/10Q
--- a/src/assets/file/quarterly/10Q
+++ b/src/assets/file/quarterly/10Q
--- a/src/assets/file/quarterly/10Q
+++ b/src/assets/file/quarterly/10Q
--- a/src/assets/file/quarterly/10Q
+++ b/src/assets/file/quarterly/10Q
--- a/src/assets/file/quarterly/10Q
+++ b/src/assets/file/quarterly/10Q
--- a/src/assets/file/quarterly/10Q
+++ b/src/assets/file/quarterly/10Q
--- a/src/assets/file/quarterly/10Q
+++ b/src/assets/file/quarterly/10Q
--- a/src/assets/file/quarterly/10Q
+++ b/src/assets/file/quarterly/10Q
--- a/src/assets/file/quarterly/10Q
+++ b/src/assets/file/quarterly/10Q
--- a/src/assets/file/quarterly/10Q
+++ b/src/assets/file/quarterly/10Q
--- a/src/assets/file/quarterly/10Q
+++ b/src/assets/file/quarterly/10Q
--- a/src/assets/file/quarterly/10Q
+++ b/src/assets/file/quarterly/10Q
--- a/src/assets/file/quarterly/10Q
+++ b/src/assets/file/quarterly/10Q
--- a/src/assets/file/quarterly/10Q
+++ b/src/assets/file/quarterly/10Q
--- a/src/assets/file/quarterly/10Q
+++ b/src/assets/file/quarterly/10Q
--- a/src/assets/file/quarterly/10Q
+++ b/src/assets/file/quarterly/10Q
--- a/src/assets/file/quarterly/10Q
+++ b/src/assets/file/quarterly/10Q
--- a/src/assets/file/quarterly/10Q
+++ b/src/assets/file/quarterly/10Q
--- a/src/assets/file/quarterly/10Q
+++ b/src/assets/file/quarterly/10Q
--- a/src/assets/file/quarterly/10Q
+++ b/src/assets/file/quarterly/10Q
--- a/src/assets/file/quarterly/10Q
+++ b/src/assets/file/quarterly/10Q
--- a/src/assets/file/quarterly/10Q
+++ b/src/assets/file/quarterly/10Q
--- a/src/assets/file/quarterly/10Q
+++ b/src/assets/file/quarterly/10Q
--- a/src/assets/file/quarterly/10Q
+++ b/src/assets/file/quarterly/10Q
--- a/src/assets/file/quarterly/10Q
+++ b/src/assets/file/quarterly/10Q
--- a/src/assets/file/quarterly/10Q
+++ b/src/assets/file/quarterly/10Q
--- a/src/assets/file/quarterly/10Q
+++ b/src/assets/file/quarterly/10Q
--- a/src/assets/file/quarterly/10Q
+++ b/src/assets/file/quarterly/10Q
--- a/src/assets/file/quarterly/10Q
+++ b/src/assets/file/quarterly/10Q
--- a/src/assets/file/quarterly/10Q
+++ b/src/assets/file/quarterly/10Q
--- a/src/assets/file/quarterly/10Q
+++ b/src/assets/file/quarterly/10Q
--- a/src/assets/image/bg-375.png
+++ b/src/assets/image/bg-375.png
--- a/src/assets/image/bg-mobile.png
+++ b/src/assets/image/bg-mobile.png
--- a/src/assets/image/bg-pc.png
+++ b/src/assets/image/bg-pc.png
--- a/src/assets/image/bg.png
+++ b/src/assets/image/bg.png
--- a/src/assets/image/download.svg
+++ b/src/assets/image/download.svg
@ -0,0 +1 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="19" height="19" viewBox="0 0 19 19"><defs><style>.a{fill:#fff;stroke:#707070;}.b{clip-path:url(#a);}.c{fill:#2c2c2c;}</style><clipPath id="a"><rect class="a" width="19" height="19" transform="translate(333.601 660.601)"/></clipPath></defs><g class="b" transform="translate(-333.601 -660.601)"><g transform="translate(333.591 664.087)"><path class="c" d="M19.237,22.964H2.325a.922.922,0,0,1-.922-.922V15.408a.922.922,0,1,1,1.844,0V21.12H18.315V15.408a.922.922,0,1,1,1.844,0v6.634A.922.922,0,0,1,19.237,22.964Z" transform="translate(-1.403 -7.061)"/><path class="c" d="M12.451,13.284c-.509,0-.922-.311-.922-.694V1.332c0-.384.413-.694.922-.694s.922.311.922.694V12.589C13.373,12.973,12.96,13.284,12.451,13.284Z" transform="translate(-3.073 -0.638)"/><path class="c" d="M11.833,20.248a.922.922,0,0,1-.748-.384L7.956,15.51a.922.922,0,1,1,1.5-1.076l2.381,3.313,2.38-3.313a.922.922,0,1,1,1.5,1.076l-3.129,4.355A.921.921,0,0,1,11.833,20.248Z" transform="translate(-2.455 -6.989)"/></g></g></svg>
--- a/src/assets/image/header/logo.png
+++ b/src/assets/image/header/logo.png
--- a/src/assets/image/historic-stock-375.png
+++ b/src/assets/image/historic-stock-375.png
--- a/src/assets/image/historic-stock.png
+++ b/src/assets/image/historic-stock.png
--- a/src/assets/image/icon/default-empty.png
+++ b/src/assets/image/icon/default-empty.png
--- 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/pdf.png
+++ b/src/assets/image/pdf.png
--- a/src/components/NumberScroll.vue
+++ b/src/components/NumberScroll.vue
@ -0,0 +1,55 @@
 <script setup>
 import { ref, watch, onMounted } from 'vue'
 import { CountUp } from 'countup.js'
 const props = defineProps({
  endVal: {
    type: [Number, String],
    required: true
  },
  duration: {
    type: Number,
    default: 1.2
  },
  decimals: {
    type: Number,
    default: 2
  },
  prefix: {
    type: String,
    default: ''
  },
  suffix: {
    type: String,
    default: ''
  }
 })
 const el = ref(null)
 let countUpInstance = null
 const start = (val) => {
  if (countUpInstance) countUpInstance.update(val)
  else {
    countUpInstance = new CountUp(el.value, val, {
      duration: props.duration,
      decimalPlaces: props.decimals,
      prefix: props.prefix,
      suffix: props.suffix
    })
    countUpInstance.start()
  }
 }
 onMounted(() => {
  start(props.endVal)
 })
 watch(() => props.endVal, (val) => {
  start(val)
 })
 </script>
 <template>
  <span ref="el"></span>
 </template> 
--- a/src/components/customDefaultPage/index.vue
+++ b/src/components/customDefaultPage/index.vue
@ -0,0 +1,38 @@
 <script setup>
 import { computed } from 'vue'
 import { useWindowSize } from '@vueuse/core'
 import size375 from '@/components/customDefaultPage/size375/index.vue'
 import size768 from '@/components/customDefaultPage/size1920/index.vue'
 import size1440 from '@/components/customDefaultPage/size1920/index.vue'
 import size1920 from '@/components/customDefaultPage/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" v-bind="$attrs">
    <template v-for="(_, slot) in $slots" #[slot]="scope">
      <slot :name="slot" v-bind="scope" />
    </template>
  </component>
 </template>
 <style scoped lang="scss"></style>
--- a/src/components/customDefaultPage/size1920/index.vue
+++ b/src/components/customDefaultPage/size1920/index.vue
@ -0,0 +1,27 @@
 <template>
  <!-- 通用缺省页 -->
  <div class="custom-default-page">
    <slot name="content"></slot>
    <template v-if="$slots.empty">
      <slot name="empty"></slot>
    </template>
    <template v-else>
      <div class="default-empty-icon">
        <img
          src="@/assets/image/icon/default-empty.png"
          alt="empty"
          style="width: 476px; height: 262px;"
        />
      </div>
    </template>
  </div>
 </template>
 <script setup></script>
 <style scoped lang="scss">
 .default-empty-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 40px 0 24px 0;
 }
 </style>
--- a/src/components/customDefaultPage/size375/index.vue
+++ b/src/components/customDefaultPage/size375/index.vue
@ -0,0 +1,27 @@
 <template>
  <!-- 通用缺省页 -->
  <div class="custom-default-page">
    <slot name="content"></slot>
    <template v-if="$slots.empty">
      <slot name="empty"></slot>
    </template>
    <template v-else>
      <div class="default-empty-icon">
        <img
          src="@/assets/image/icon/default-empty.png"
          alt="empty"
          style="width: 350px; height: 198px; margin: 40px 0 0;"
        />
      </div>
    </template>
  </div>
 </template>
 <script setup></script>
 <style scoped lang="scss">
 .default-empty-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 40px 0 24px 0;
 }
 </style>
--- 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
@ -0,0 +1,34 @@
 <script setup>
 import { computed } from 'vue'
 import { useWindowSize } from '@vueuse/core'
 import size375 from '@/components/customFooter/size375/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'
 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 <= 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/components/customFooter/size1920/index.vue
+++ b/src/components/customFooter/size1920/index.vue
@ -0,0 +1,69 @@
 <template>
  <!-- 通用页脚 -->
  <div class="custom-footer">
    <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>
 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%;
  background: #f7f8fa;
  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
@ -0,0 +1,70 @@
 <template>
  <!-- 通用页脚 -->
  <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>
  </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>
--- 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/components/customHeader/index.vue
+++ b/src/components/customHeader/index.vue
@ -0,0 +1,34 @@
 <script setup>
 import { computed } from 'vue'
 import { useWindowSize } from '@vueuse/core'
 import size375 from '@/components/customHeader/size375/index.vue'
 import size768 from '@/components/customHeader/size375/index.vue'
 import size1440 from '@/components/customHeader/size1440/index.vue'
 import size1920 from '@/components/customHeader/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 <= 835) {
    return size768
  } else if (viewWidth <= 1640) {
    return size1440
  } else if (viewWidth <= 1920 || viewWidth > 1920) {
    return size1920
  }
 })
 </script>
 <template>
  <component :is="viewComponent" />
 </template>
 <style scoped lang="scss"></style>
--- a/src/components/customHeader/size1440/index.vue
+++ b/src/components/customHeader/size1440/index.vue
@ -0,0 +1,230 @@
 <template>
  <!-- 通用页头 -->
  <NLayoutHeader
    class="custom-header"
    :class="{ 'header-scrolled': isScrolled }"
  >
    <div class="header-container">
      <div class="logo" @click="handleToHome">
        <NImage width="160" height="50" :src="FiEELogo" preview-disabled />
      </div>
      <div class="header-menu">
        <NMenu
          mode="horizontal"
          :options="menuOptions"
          :inverted="isScrolled"
          v-model:value="selectedKey"
          @update:value="handleMenuSelect"
        />
      </div>
    </div>
  </NLayoutHeader>
 </template>
 <script setup>
 import FiEELogo from '@/assets/image/header/logo.png'
 import { ref, onMounted, onUnmounted } from 'vue'
 import { NMenu, NLayoutHeader, NImage } from 'naive-ui'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 import { useHeaderMenuConfig } from '@/config/headerMenuConfig'
 const { t } = useI18n()
 const router = useRouter()
 // 使用统一的菜单配置
 const menuOptions = useHeaderMenuConfig()
 const selectedKey = ref(null)
 const isScrolled = ref(false)
 // 递归查找菜单项
 function findMenuOptionByKey(options, key) {
  for (const option of options) {
    if (option.key === key) return option
    if (option.children) {
      const found = findMenuOptionByKey(option.children, key)
      if (found) return found
    }
  }
  return null
 }
 // 菜单点击跳转
 const handleMenuSelect = (key) => {
  const option = findMenuOptionByKey(menuOptions, key)
  if (option && option.href) {
    router.push(option.href)
  }
 }
 // 监听滚动事件
 const handleScroll = () => {
  //滚动距离大于100px时，处理对应的header样式
  isScrolled.value = window.scrollY >= 100
 }
 onMounted(() => {
  window.addEventListener('scroll', handleScroll)
 })
 onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
 })
 //点击回到首页
 const handleToHome = () => {
  router.push('/myhome')
  selectedKey.value = null // 重置菜单选中状态
 }
 </script>
 <style scoped lang="scss">
 .custom-header {
  --header-height: 5rem;
  --primary-color: #8b59f7;
  transition: all 0.3s ease;
  background: transparent;
  height: var(--header-height);
  &.header-scrolled {
    background: rgba(220, 207, 248, 0.95);
    backdrop-filter: blur(8px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
 }
 .header-container {
  max-width: 1700px;
  margin: 0 auto;
  padding: 0 40px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
 }
 .logo {
  flex-shrink: 0;
  cursor: pointer;
  transition: transform 0.3s ease;
  margin-right: 100px;
  &:hover {
    transform: scale(1.05);
  }
  &:active {
    transform: scale(0.98);
  }
 }
 .header-menu {
  display: block;
  flex: 1;
  :deep(.n-menu) {
    background: transparent;
    justify-content: flex-end;
  }
  :deep(.n-menu-item) {
    position: relative;
    margin: 0 10px;
    transition: all 0.3s ease;
    font-weight: 700;
    // font-size: 16px;
    font-size: 0.875rem;
    min-width: 120px;
    text-align: center;
    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      width: 0;
      height: 2px;
      background: var(--primary-color);
      transition: all 0.3s ease;
      transform: translateX(-50%);
      opacity: 0;
      border-radius: 2px;
    }
    &:hover {
      &::after {
        width: 80px;
        height: 3px;
        opacity: 1;
      }
    }
    // 选中状态的样式
    &.n-menu-item--selected {
      &::after {
        width: 40px;
        opacity: 1;
      }
    }
  }
  // 子菜单样式
  :deep(.n-submenu) {
    .n-submenu-children {
      backdrop-filter: blur(16px);
      background: rgba(255, 255, 255, 0.9);
      border-radius: 12px;
      padding: 8px 0;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
      transform-origin: top;
      animation: dropDown 0.3s ease;
      .n-menu-item {
        position: relative;
        overflow: hidden;
        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: var(--primary-color);
          transform: translateX(-100%);
          transition: transform 0.3s ease;
          opacity: 0.1;
          z-index: -1;
        }
        &:hover {
          &::before {
            transform: translateX(0);
          }
        }
      }
    }
  }
 }
@keyframes dropDown {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
 }
 </style>
 <style>
 .header-menu .n-menu .n-menu-item-content .n-menu-item-content-header {
  word-break: break-word;
  white-space: unset !important;
 }
 .header-menu .n-menu .n-submenu .n-menu-item-content{
  padding: 0 8px!important;
 }
 </style>
--- a/src/components/customHeader/size1920/index.vue
+++ b/src/components/customHeader/size1920/index.vue
@ -0,0 +1,221 @@
 <template>
  <!-- 通用页头 -->
  <NLayoutHeader
    class="custom-header"
    :class="{ 'header-scrolled': isScrolled }"
  >
    <div class="header-container">
      <div class="logo" @click="handleToHome">
        <NImage width="160" height="50" :src="FiEELogo" preview-disabled />
      </div>
      <div class="header-menu">
        <NMenu
          mode="horizontal"
          :options="menuOptions"
          :inverted="isScrolled"
          v-model:value="selectedKey"
          @update:value="handleMenuSelect"
        />
      </div>
    </div>
  </NLayoutHeader>
 </template>
 <script setup>
 import FiEELogo from '@/assets/image/header/logo.png'
 import { ref, onMounted, onUnmounted } from 'vue'
 import { NMenu, NLayoutHeader, NImage } from 'naive-ui'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 import { useHeaderMenuConfig } from '@/config/headerMenuConfig'
 const { t } = useI18n()
 const router = useRouter()
 // 使用统一的菜单配置
 const menuOptions = useHeaderMenuConfig()
 const selectedKey = ref(null)
 const isScrolled = ref(false)
 // 递归查找菜单项
 function findMenuOptionByKey(options, key) {
  for (const option of options) {
    if (option.key === key) return option
    if (option.children) {
      const found = findMenuOptionByKey(option.children, key)
      if (found) return found
    }
  }
  return null
 }
 // 菜单点击跳转
 const handleMenuSelect = (key) => {
  const option = findMenuOptionByKey(menuOptions, key)
  if (option && option.href) {
    router.push(option.href)
  }
 }
 // 监听滚动事件
 const handleScroll = () => {
  //滚动距离大于100px时，处理对应的header样式
  isScrolled.value = window.scrollY >= 100
 }
 onMounted(() => {
  window.addEventListener('scroll', handleScroll)
 })
 onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
 })
 //点击回到首页
 const handleToHome = () => {
  router.push('/myhome')
  selectedKey.value = null // 重置菜单选中状态
 }
 </script>
 <style scoped lang="scss">
 .custom-header {
  --header-height: 5rem;
  --primary-color: #8b59f7;
  transition: all 0.3s ease;
  background: transparent;
  height: var(--header-height);
  &.header-scrolled {
    background: rgba(220, 207, 248, 0.95);
    backdrop-filter: blur(8px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
 }
 .header-container {
  max-width: 1700px;
  margin: 0 auto;
  padding: 0 40px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
 }
 .logo {
  flex-shrink: 0;
  cursor: pointer;
  transition: transform 0.3s ease;
  margin-right: 100px;
  &:hover {
    transform: scale(1.05);
  }
  &:active {
    transform: scale(0.98);
  }
 }
 .header-menu {
  display: block;
  flex: 1;
  :deep(.n-menu) {
    background: transparent;
    justify-content: flex-end;
  }
  :deep(.n-menu-item) {
    position: relative;
    margin: 0 20px;
    transition: all 0.3s ease;
    font-weight: 700;
    // font-size: 16px;
    font-size: 1.05rem;
    min-width: 120px;
    text-align: center;
    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      width: 0;
      height: 2px;
      background: var(--primary-color);
      transition: all 0.3s ease;
      transform: translateX(-50%);
      opacity: 0;
      border-radius: 2px;
    }
    &:hover {
      &::after {
        width: 80px;
        height: 3px;
        opacity: 1;
      }
    }
    // 选中状态的样式
    &.n-menu-item--selected {
      &::after {
        width: 40px;
        opacity: 1;
      }
    }
  }
  // 子菜单样式
  :deep(.n-submenu) {
    .n-submenu-children {
      backdrop-filter: blur(16px);
      background: rgba(255, 255, 255, 0.9);
      border-radius: 12px;
      padding: 8px 0;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
      transform-origin: top;
      animation: dropDown 0.3s ease;
      .n-menu-item {
        position: relative;
        overflow: hidden;
        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: var(--primary-color);
          transform: translateX(-100%);
          transition: transform 0.3s ease;
          opacity: 0.1;
          z-index: -1;
        }
        &:hover {
          &::before {
            transform: translateX(0);
          }
        }
      }
    }
  }
 }
@keyframes dropDown {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
 }
 </style>
--- a/src/components/customHeader/size375/index.vue
+++ b/src/components/customHeader/size375/index.vue
@ -0,0 +1,210 @@
 <template>
  <!-- 通用页头 -->
  <NLayoutHeader
    class="custom-header"
    :class="{ 'header-scrolled': isScrolled }"
  >
    <div class="header-container">
      <div class="logo" @click="handleToHome">
        <NImage
          style="width: 108px; height: 33px; max-width: 100%"
          :src="FiEELogo"
          preview-disabled
        />
      </div>
      <div class="menu-btn" :class="{ 'menu-open': showMenu }" @click="toggleMenu">
        <n-icon size="28" class="menu-icon menu-icon-menu">
          <menu-sharp />
        </n-icon>
        <n-icon size="28" class="menu-icon menu-icon-close">
          <close-sharp />
        </n-icon>
      </div>
    </div>
  </NLayoutHeader>
  <transition name="fade-slide">
    <div v-if="showMenu" class="mobile-menu-wrapper" @click.self="closeMenu">
      <NMenu
        mode="vertical"
        :options="menuOptions"
        :inverted="isScrolled"
        class="mobile-menu"
        accordion
        v-model:value="selectedKey"
        @update:value="handleMenuSelect"
      />
    </div>
  </transition>
 </template>
 <script setup>
 import FiEELogo from '@/assets/image/header/logo.png'
 import { ref, onMounted, onUnmounted } from 'vue'
 import { NMenu, NLayoutHeader, NImage, NIcon } from 'naive-ui'
 import { MenuSharp, CloseSharp } from '@vicons/ionicons5'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 import { useHeaderMenuConfig } from '@/config/headerMenuConfig'
 const { t } = useI18n()
 const router = useRouter()
 const isScrolled = ref(false)
 const showMenu = ref(false)
 const selectedKey = ref(null)
 const toggleMenu = () => {
  showMenu.value = !showMenu.value;
 };
 const closeMenu = () => {
  showMenu.value = false;
 };
 // 递归查找菜单项
 function findMenuOptionByKey(options, key) {
  for (const option of options) {
    if (option.key === key) return option;
    if (option.children) {
      const found = findMenuOptionByKey(option.children, key);
      if (found) return found;
    }
  }
  return null;
 }
 // 菜单点击跳转
 const handleMenuSelect = (key) => {
  const option = findMenuOptionByKey(menuOptions, key);
  if (option && option.href) {
    router.push(option.href);
    showMenu.value = false; // 跳转后收起菜单
  }
 };
 // 使用统一的菜单配置
 const menuOptions = useHeaderMenuConfig()
 // 监听滚动事件
 const handleScroll = () => {
  //滚动距离大于100px时，处理对应的header样式
  isScrolled.value = window.scrollY >= 100;
 };
 onMounted(() => {
  window.addEventListener("scroll", handleScroll);
 });
 onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
 })
 //点击回到首页
 const handleToHome = () => {
  router.push('/')
  selectedKey.value = null // 重置菜单选中状态
  showMenu.value = false // 在移动端同时关闭菜单
 }
 </script>
 <style scoped lang="scss">
 .custom-header {
  transition: all 0.3s ease;
  background: transparent;
  height: 320px;
  &.header-scrolled {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
 }
 .header-container {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 0 80px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
 }
 .logo {
  flex-shrink: 0;
  margin-right: 12px;
  display: flex;
  align-items: center;
 }
 .logo :deep(.n-image) {
  max-width: 100px;
  height: auto;
 }
 .menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 75px;
  padding: 40px 70px;
  border-radius: 30px;
  background: transparent;
  user-select: none;
  transition: background 0.2s;
  position: relative;
  .menu-icon {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(0deg);
    opacity: 1;
    transition:
      opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
      transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
  }
  .menu-icon-close {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(-90deg) scale(0.8);
  }
  &.menu-open {
    .menu-icon-menu {
      opacity: 0;
      transform: translate(-50%, -50%) rotate(90deg) scale(0.8);
    }
    .menu-icon-close {
      opacity: 1;
      transform: translate(-50%, -50%) rotate(0deg) scale(1);
    }
  }
 }
 .mobile-menu-wrapper {
  position: fixed;
  top: 320px;
  left: 0;
  width: 100vw;
  background: rgba(220, 207, 248, 0.95);
  z-index: 1100;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
  padding: 40px 0 80px 0;
  max-height: 1500px;
  overflow-y: auto;
  :deep(.n-menu-item) {
    font-weight: 600;
  }
 }
 .fade-slide-enter-active,
 .fade-slide-leave-active {
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
 }
 .fade-slide-enter-from,
 .fade-slide-leave-to {
  opacity: 0;
  transform: translateY(-50px);
 }
 </style>
--- a/src/config/headerMenuConfig.js
+++ b/src/config/headerMenuConfig.js
@ -0,0 +1,122 @@
 import { useI18n } from "vue-i18n";
 export const useHeaderMenuConfig = () => {
  const { t } = useI18n();
  return [
    {
      label: t("header_menu.corporate_information.title"),
      key: "corporate_information",
      children: [
        {
          label: t("header_menu.corporate_information.company_overview"),
          key: "company_overview",
          href: "/companyoverview",
        },
        {
          label: t("header_menu.corporate_information.business_introduction"),
          key: "business_introduction",
          href: "/businessservices",
        },
        {
          label: t("header_menu.corporate_information.management"),
          key: "management",
          href: "/manage",
        },
        {
          label: t("header_menu.corporate_information.board_of_directors"),
          key: "board_of_directors",
          href: "/boarddirectors",
        },
        {
          label: t("header_menu.corporate_information.committee_appointments"),
          key: "committee_appointments",
          href: "/committeeappointment",
        },
        {
          label: t("header_menu.corporate_information.governance"),
          key: "governance",
          href: "/govern",
        },
        // {
        //   label: t("header_menu.corporate_information.corporate_video"),
        //   key: "corporate_video",
        // },//暂时隐藏本菜单
      ],
    },
    {
      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.annual_reports"),
          key: "annual_reports",
          href: "/annualreports",
        },
        {
          label: t("header_menu.financial_information.quarterly_reports"),
          key: "quarterly_reports",
          href: "/quarterlyreports",
        },
      ],
    },
    {
      label: t("header_menu.stock_information.title"),
      key: "stock_information",
      children: [
        {
          label: t("header_menu.stock_information.stock_quote"),
          key: "stock_quote",
          href:'/stock-quote'
        },
        {
          label: t("header_menu.stock_information.historic_stock_price"),
          key: "historic_stock_price",
          href:'/historic-stock'
        },
        // {
        //   label: t("header_menu.stock_information.investment_calculator"),
        //   key: "investment_calculator",
        //   href:'/calculator'
        // },
      ],
    },
    {
      label: t("header_menu.news_releases.title"),
      key: "news_releases",
      children: [
        {
          label: t("header_menu.news_releases.press_releases"),
          key: "press_releases",
          href: "/press-releases",
        },
        {
          label: t("header_menu.news_releases.events_calendar"),
          key: "events_calendar",
          href: "/events-calendar",
        },
      ],
    },
    {
      label: t("header_menu.investor_resources.title"),
      key: "investor_resources",
      children: [
        {
          label: t("header_menu.investor_resources.ir_contacts"),
          key: "ir_contacts",
          href:'/contacts'
        },
        {
          label: t("header_menu.investor_resources.email_alerts"),
          key: "email_alerts",
            href:'/email-alerts'
        },
      ],
    },
  ];
 };
--- a/src/dict/secFiles.js
+++ b/src/dict/secFiles.js
--- a/src/locales/en.js
+++ b/src/locales/en.js
--- a/src/router/index.js
+++ b/src/router/index.js
@ -1,58 +1,189 @@
 // router/index.js
-import { createRouter, createWebHistory } from 'vue-router';
+import { createRouter, createWebHistory } from "vue-router";
-import { setupRouterGuards } from './router-guards';
+import { setupRouterGuards } from "./router-guards";
 const routes = [
  {
-        path: '/',
+    path: "/",
-        redirect: 'home'
+    redirect: '/myhome'
  },
  {
-        path: '/home',
+    path: "/",
-        name: 'home',
+    name: "index",
-        component: () => import('@/views/home/index.vue'),
+    component: () => import("@/views/index/index.vue"),
    // beforeEnter: (to, from, next) => {
    //     localStorage.clear()
    //     next()
    // }
    children: [
      {
        path: "/contacts",
        name: "contacts",
        component: () => import("@/views/contacts/index.vue"),
      },
      {
-        path: '/companyprofil',
+        path: "/calculator",
-        name: 'Companyprofil',
+        name: "calculator",
-        component: () => import('@/views/companyprofil/index.vue'),
+        component: () => import("@/views/calculator/index.vue"),
      },
      {
-        path: '/companyprofildetail',
+        path: "/stock-quote",
-        name: 'Companyprofildetail',
+        name: "stock-quote",
-        component: () => import('@/views/companyprofildetail/index.vue'),
+        component: () => import("@/views/stock-quote/index.vue"),
      },
      {
-        path: '/businessintroduction',
+        path: "/historic-stock",
-        name: 'Businessintroduction',
+        name: "historic-stock",
-        component: () => import('@/views/businessintroduction/index.vue'),
+        component: () => import("@/views/historic-stock/index.vue"),
      },
      {
-        path: '/investor',
+        path: "/contacts",
-        name: 'Investor',
+        name: "contacts",
-        component: () => import('@/views/investor/index.vue'),
+        component: () => import("@/views/contacts/index.vue"),
      },
      {
-        path: '/investorhandbook',
+        path: "/email-alerts",
-        name: 'Investorhandbook',
+        name: "email-alerts",
-        component: () => import('@/views/investorhandbook/index.vue'),
+        component: () => import("@/views/email-alerts/index.vue"),
      },
      {
        path: "/quarterlyreports",
        name: "quarterlyreports",
        component: () =>
          import("@/views/financialinformation/quarterlyreports/index.vue"),
      },
      {
        path: "/secfilings",
        name: "SecFilings",
        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",
        component: () => import("@/views/events-calendar/index.vue"),
      },
      {
        path: "/companyoverview",
        name: "companyoverview",
        component: () => import("@/views/companyoverview/index.vue"),
      },
      {
        path: "myhome",
        name: "myHome",
        component: () => import("@/views/myHome/index.vue"),
      },
      {
        path: "/businessservices",
        name: "BusinessServices",
        component: () => import("@/views/BusinessServices/index.vue"),
      },
      {
        path: "/manage",
        name: "manage",
        component: () => import("@/views/manage/index.vue"),
      },
      {
        path: "/boarddirectors",
        name: "boarddirectors",
        component: () => import("@/views/boarddirectors/index.vue"),
      },
      {
        path: "/committeeappointment",
        name: "CommitteeAppointment",
        component: () => import("@/views/CommitteeAppointment/index.vue"),
      },
      {
        path: "/govern",
        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"),
      },
    ],
  },
  // {
  //     path: '/companyprofil',
  //     name: 'Companyprofil',
  //     component: () => import('@/views/companyprofil/index.vue'),
  // },
  // {
  //     path: '/companyprofildetail',
  //     name: 'Companyprofildetail',
  //     component: () => import('@/views/companyprofildetail/index.vue'),
  // },
  // {
  //     path: '/businessintroduction',
  //     name: 'Businessintroduction',
  //     component: () => import('@/views/businessintroduction/index.vue'),
  // },
  // {
  //     path: '/investor',
  //     name: 'Investor',
  //     component: () => import('@/views/investor/index.vue'),
  // },
  // {
  //     path: '/investorhandbook',
  //     name: 'Investorhandbook',
  //     component: () => import('@/views/investorhandbook/index.vue'),
  // },
  {
    path: '/:pathMatch(.*)*',
    redirect: '/myhome'
  }
 ];
 const router = createRouter({
  history: createWebHistory(),
-    routes
+  routes,
 });
 router.beforeEach((to, from, next) => {
  if (to.meta?.title) {
    document.title = to.meta.title;
  }
-    next()
+  next();
 });
 setupRouterGuards(router);
 export default router;
--- 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
@ -0,0 +1,82 @@
 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', {
    "Open": "",
    "Volume": "",
    "DayRange": "",
    "WeekRange": "",
    "MarketCap": "",
    "change": [
      "",
      ""
    ]
  })
  const date = new Date();
  const options = {
    year: 'numeric',
    month: 'short',
    day: 'numeric',
    hour: 'numeric',
    minute: '2-digit',
    hour12: true,
    timeZone: 'America/New_York',
    timeZoneName: 'short'
  };
  let lastTradingDay
  dayjs.extend(utc)
  dayjs.extend(timezone)
  /*
  美股的常规发行日（交易日）为周一至周五，遇到法定假日则顺延。
  如果你只需要“上一个交易日”（不考虑法定假日）的情况下
  获取当前美东时间。
  如果今天是周一，则上一个交易日为上周五。
  如果今天是周日，则上一个交易日为上周五。
  如果今天是周六，则上一个交易日为周五。
  其他情况，上一个交易日为昨天。
  */
  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 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,
    getStockQuate,
    stockQuote
  }
 })
--- a/src/utils/changeLanguage.js
+++ b/src/utils/changeLanguage.js
@ -70,7 +70,7 @@ export function useLanguage() {
  // 初始化语言
  const initLanguage = () => {
-    const savedLanguage = localStorage.getItem('language') || getBrowserLanguage();
+    const savedLanguage = 'en'||localStorage.getItem('language') || getBrowserLanguage();
    locale.value = savedLanguage;
    currentLanguage.value = savedLanguage;
    localStorage.setItem('language', savedLanguage);
--- a/src/views/BusinessServices/index.vue
+++ b/src/views/BusinessServices/index.vue
@ -0,0 +1,34 @@
 <script setup>
 import { computed } from "vue";
 import { useWindowSize } from "@vueuse/core";
 import size375 from "./size375/index.vue";
 import size768 from "./size768/index.vue";
 import size1440 from "./size1440/index.vue";
 import size1920 from "./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/BusinessServices/size1440/index.vue
+++ b/src/views/BusinessServices/size1440/index.vue
@ -0,0 +1,265 @@
 <template>
  <div class="home-page">
    <div class="business-page">
      <!-- 渐变背景标题区 - 增加层次感 -->
      <section class="hero-section">
        <div class="container">
          <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 style="margin-top: 40px" class="container">
        <section>
          <h1 class="hero-title" style="font-size: 22px">
            {{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENTTWO") }}
          </h1>
        </section>
        <div class="solution-grid">
          <!-- 统一使用弹性列布局，通过媒体查询控制排列方式 -->
          <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>
      </main>
    </div>
  </div>
 </template>
 <script setup>
 import { useI18n } from "vue-i18n";
 import { computed } from "vue";
 const { t } = useI18n();
 const solutions = computed(() => [
  {
    title: t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.ONE.TITLE"),
    points: [
      t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.ONE.CONTENT"),
      t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.ONE.CONTENTTWO"),
    ],
  },
  {
    title: t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.TWO.TITLE"),
    points: [
      t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.TWO.CONTENT"),
      t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.TWO.CONTENTTWO"),
    ],
  },
  {
    title: t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.THREE.TITLE"),
    points: [
      t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.THREE.CONTENT"),
      t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.THREE.CONTENTTWO"),
      t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.THREE.CONTENTTHREE"),
    ],
  },
  {
    title: t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.FOUR.TITLE"),
    points: [
      t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.FOUR.CONTENT"),
      t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.FOUR.CONTENTTWO"),
      t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.FOUR.CONTENTTHREE"),
    ],
  },
 ]);
 </script>
 <style scoped>
 /* 基础样式 */
 .hero-title {
  font-size: 40px;
  color: black;
  margin-bottom: 2rem;
  animation: slideIn 1s ease;
 }
 .hero-description {
  margin: 0 auto;
  font-size: 1.1rem;
  line-height: 1.8;
  color: black;
 }
 :root {
  --primary-color: #895bff;
  --primary-light: #a07cff;
  --primary-dark: #6a11cb;
  --primary-gradient: linear-gradient(
    135deg,
    var(--primary-light) 0%,
    var(--primary-color) 100%
  );
 }
 .home-page {
  background-image: url("@/assets/image/bg.png");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
 }
 .container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 2rem;
 }
 /* 标题区 - 紫色渐变 */
 .hero-section {
  background: var(--primary-gradient);
  padding: 5rem 0 0rem;
  position: relative;
  overflow: hidden;
  color: white;
 }
 .title-decoration {
  position: absolute;
  bottom: -15px;
  left: 0;
  width: 80%;
  height: 4px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 2px;
 }
 .solution-group {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  margin-bottom: 4rem;
 }
 /* 桌面端布局（>=768px） */
@media (min-width: 768px) {
  .solution-group {
    flex-direction: row;
    gap: 4rem;
  }
  .featured-solution {
    flex: 1;
    margin-top: 20px;
  }
 }
 /* 移动端布局（<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;
  }
 }
 /* 卡片公共样式 */
 .solution-card {
  border-radius: 16px;
  padding: 2.5rem;
  transform: translateY(20px);
  opacity: 0;
  animation: cardEnter 0.6s ease forwards;
  border: 1px solid rgba(137, 91, 255, 0.2);
  background: linear-gradient(135deg, #f9f6ff 0%, #f0e9ff 100%);
 }
 .card-header {
  margin-bottom: 2rem;
 }
 .decorative-line {
  width: 50px;
  height: 3px;
  background: var(--primary-gradient);
  margin-bottom: 1rem;
  border-radius: 3px;
 }
 .solution-card:hover .decorative-line {
  width: 80px;
 }
 .card-title {
  font-size: 1.3rem;
  color: #2c0850;
  font-weight: 600;
 }
 .content-point {
  display: flex;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(137, 91, 255, 0.1);
 }
 .point-icon {
  color: #4a3a6b;
  font-size: 1.2rem;
  flex-shrink: 0;
 }
 .point-text {
  color: #4a3a6b;
  line-height: 1.6;
  font-size: 18px;
 }
@keyframes cardEnter {
  to {
    opacity: 1;
    transform: translateY(0);
  }
 }
 </style>
--- a/src/views/BusinessServices/size1920/index.vue
+++ b/src/views/BusinessServices/size1920/index.vue
@ -0,0 +1,265 @@
 <template>
  <div class="home-page">
    <div class="business-page">
      <!-- 渐变背景标题区 - 增加层次感 -->
      <section class="hero-section">
        <div class="container">
          <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 style="margin-top: 40px" class="container">
        <section>
          <h1 style="font-size: 30px" class="hero-title">
            {{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENTTWO") }}
          </h1>
        </section>
        <div class="solution-grid">
          <!-- 统一使用弹性列布局，通过媒体查询控制排列方式 -->
          <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>
      </main>
    </div>
  </div>
 </template>
 <script setup>
 import { useI18n } from "vue-i18n";
 import { computed } from "vue";
 const { t } = useI18n();
 const solutions = computed(() => [
  {
    title: t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.ONE.TITLE"),
    points: [
      t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.ONE.CONTENT"),
      t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.ONE.CONTENTTWO"),
    ],
  },
  {
    title: t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.TWO.TITLE"),
    points: [
      t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.TWO.CONTENT"),
      t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.TWO.CONTENTTWO"),
    ],
  },
  {
    title: t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.THREE.TITLE"),
    points: [
      t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.THREE.CONTENT"),
      t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.THREE.CONTENTTWO"),
      t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.THREE.CONTENTTHREE"),
    ],
  },
  {
    title: t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.FOUR.TITLE"),
    points: [
      t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.FOUR.CONTENT"),
      t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.FOUR.CONTENTTWO"),
      t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.FOUR.CONTENTTHREE"),
    ],
  },
 ]);
 </script>
 <style scoped>
 /* 基础样式 */
 .hero-title {
  font-size: 40px;
  color: black;
  margin-bottom: 2rem;
  animation: slideIn 1s ease;
 }
 .hero-description {
  margin: 0 auto;
  font-size: 1.1rem;
  line-height: 1.8;
  color: black;
 }
 :root {
  --primary-color: #895bff;
  --primary-light: #a07cff;
  --primary-dark: #6a11cb;
  --primary-gradient: linear-gradient(
    135deg,
    var(--primary-light) 0%,
    var(--primary-color) 100%
  );
 }
 .home-page {
  background-image: url("@/assets/image/bg.png");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
 }
 .container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 2rem;
 }
 /* 标题区 - 紫色渐变 */
 .hero-section {
  background: var(--primary-gradient);
  padding: 5rem 0 0rem;
  position: relative;
  overflow: hidden;
  color: white;
 }
 .title-decoration {
  position: absolute;
  bottom: -15px;
  left: 0;
  width: 80%;
  height: 4px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 2px;
 }
 .solution-group {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  margin-bottom: 4rem;
 }
 /* 桌面端布局（>=768px） */
@media (min-width: 768px) {
  .solution-group {
    flex-direction: row;
    gap: 4rem;
  }
  .featured-solution {
    flex: 1;
    margin-top: 20px;
  }
 }
 /* 移动端布局（<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;
  }
 }
 /* 卡片公共样式 */
 .solution-card {
  border-radius: 16px;
  padding: 2.5rem;
  transform: translateY(20px);
  opacity: 0;
  animation: cardEnter 0.6s ease forwards;
  border: 1px solid rgba(137, 91, 255, 0.2);
  background: linear-gradient(135deg, #f9f6ff 0%, #f0e9ff 100%);
 }
 .card-header {
  margin-bottom: 2rem;
 }
 .decorative-line {
  width: 50px;
  height: 3px;
  background: var(--primary-gradient);
  margin-bottom: 1rem;
  border-radius: 3px;
 }
 .solution-card:hover .decorative-line {
  width: 80px;
 }
 .card-title {
  font-size: 1.3rem;
  color: #2c0850;
  font-weight: 600;
 }
 .content-point {
  display: flex;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(137, 91, 255, 0.1);
 }
 .point-icon {
  color: #4a3a6b;
  font-size: 1.2rem;
  flex-shrink: 0;
 }
 .point-text {
  color: #4a3a6b;
  line-height: 1.6;
  font-size: 18px;
 }
@keyframes cardEnter {
  to {
    opacity: 1;
    transform: translateY(0);
  }
 }
 </style>
--- a/src/views/BusinessServices/size375/index.vue
+++ b/src/views/BusinessServices/size375/index.vue
@ -0,0 +1,250 @@
 <template>
  <div class="home-page">
    <div class="business-page">
      <!-- 渐变背景标题区 -->
      <section class="hero-section">
        <div class="container">
          <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 style="margin-top: 40px" class="container">
        <section>
          <h1 style="font-size: 40px" class="hero-title">
            {{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENTTWO") }}
          </h1>
        </section>
        <!-- 解决方案网格 - 响应式弹性布局 -->
        <div class="solution-grid">
          <!-- 统一使用弹性列布局，通过媒体查询控制排列方式 -->
          <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>
      </main>
    </div>
  </div>
 </template>
 <script setup>
 import { useI18n } from "vue-i18n";
 import { computed } from "vue";
 const { t } = useI18n();
 const solutions = computed(() => [
  {
    title: t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.ONE.TITLE"),
    points: [
      t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.ONE.CONTENT"),
      t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.ONE.CONTENTTWO"),
    ],
  },
  {
    title: t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.TWO.TITLE"),
    points: [
      t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.TWO.CONTENT"),
      t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.TWO.CONTENTTWO"),
    ],
  },
  {
    title: t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.THREE.TITLE"),
    points: [
      t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.THREE.CONTENT"),
      t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.THREE.CONTENTTWO"),
      t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.THREE.CONTENTTHREE"),
    ],
  },
  {
    title: t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.FOUR.TITLE"),
    points: [
      t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.FOUR.CONTENT"),
      t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.FOUR.CONTENTTWO"),
      t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.FOUR.CONTENTTHREE"),
    ],
  },
 ]);
 </script>
 <style scoped>
 .container {
  margin: 0 auto;
  padding: 0 2rem;
 }
 /* 标题区 - 紫色渐变 */
 .hero-section {
  background: var(--primary-gradient);
  padding: 5rem 0 0rem;
  position: relative;
  overflow: hidden;
  color: white;
 }
 .hero-title {
  font-size: 40px;
  color: black;
  margin-bottom: 2rem;
  animation: slideIn 1s ease;
 }
 .hero-description {
  margin: 0 auto;
  font-size: 1.1rem;
  line-height: 1.8;
  color: black;
 }
 :root {
  --primary-color: #895bff;
  --primary-light: #a07cff;
  --primary-dark: #6a11cb;
  --primary-gradient: linear-gradient(
    135deg,
    var(--primary-light) 0%,
    var(--primary-color) 100%
  );
 }
 .home-page {
  background-image: url("@/assets/image/bg-mobile.png");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
 }
 /* 解决方案网格 - 响应式布局 */
 .solution-grid {
  padding: 0rem 0 4rem;
  display: grid;
  grid-template-columns: 1fr; /* 默认单列（移动端） */
  gap: 3rem;
 }
 /* 中等屏幕（768px-1439px） - 单列布局 */
@media (min-width: 768px) and (max-width: 1439px) {
  .solution-grid {
    grid-template-columns: 1fr;
  }
 }
 /* 大屏幕（≥1440px） - 双列布局 */
@media (min-width: 1440px) {
  .solution-grid {
    grid-template-columns: 1fr 1fr;
  }
 }
 /* 卡片样式 */
 .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);
  transition: all 0.3s ease;
 }
 .solution-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--primary-gradient);
 }
 .solution-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 50px rgba(137, 91, 255, 0.2);
 }
 .card-header {
  margin-bottom: 2rem;
 }
 .decorative-line {
  width: 50px;
  height: 3px;
  background: var(--primary-gradient);
  margin-bottom: 1rem;
  border-radius: 3px;
  transition: width 0.3s ease;
 }
 .solution-card:hover .decorative-line {
  width: 80px;
 }
 .card-title {
  font-size: 1.3rem;
  color: #2c0850;
  font-weight: 600;
 }
 .content-point {
  display: flex;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(137, 91, 255, 0.1);
 }
 .content-point:last-child {
  border-bottom: none;
 }
 .point-icon {
  color: #4a3a6b;
  font-size: 1.2rem;
  flex-shrink: 0;
 }
 .point-text {
  color: #4a3a6b;
  line-height: 1.6;
  font-size: 1rem;
 }
@keyframes cardEnter {
  to {
    opacity: 1;
    transform: translateY(0);
  }
 }
 </style>
--- a/src/views/BusinessServices/size768/index.vue
+++ b/src/views/BusinessServices/size768/index.vue
@ -0,0 +1,251 @@
 <template>
  <div class="home-page">
    <div class="business-page">
      <!-- 渐变背景标题区 -->
      <section class="hero-section">
        <div class="container">
          <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 style="margin-top: 40px" class="container">
        <section>
          <h1 style="font-size: 40px" class="hero-title">
            {{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENTTWO") }}
          </h1>
        </section>
        <!-- 解决方案网格 - 响应式弹性布局 -->
        <div class="solution-grid">
          <!-- 统一使用弹性列布局，通过媒体查询控制排列方式 -->
          <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>
      </main>
    </div>
  </div>
 </template>
 <script setup>
 import { useI18n } from "vue-i18n";
 import { computed } from "vue";
 const { t } = useI18n();
 const solutions = computed(() => [
  {
    title: t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.ONE.TITLE"),
    points: [
      t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.ONE.CONTENT"),
      t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.ONE.CONTENTTWO"),
    ],
  },
  {
    title: t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.TWO.TITLE"),
    points: [
      t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.TWO.CONTENT"),
      t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.TWO.CONTENTTWO"),
    ],
  },
  {
    title: t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.THREE.TITLE"),
    points: [
      t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.THREE.CONTENT"),
      t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.THREE.CONTENTTWO"),
      t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.THREE.CONTENTTHREE"),
    ],
  },
  {
    title: t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.FOUR.TITLE"),
    points: [
      t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.FOUR.CONTENT"),
      t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.FOUR.CONTENTTWO"),
      t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.FOUR.CONTENTTHREE"),
    ],
  },
 ]);
 </script>
 <style scoped>
 .container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 2rem;
 }
 /* 标题区 - 紫色渐变 */
 .hero-section {
  background: var(--primary-gradient);
  padding: 5rem 0 0rem;
  position: relative;
  overflow: hidden;
  color: white;
 }
 .hero-title {
  font-size: 40px;
  color: black;
  margin-bottom: 2rem;
  animation: slideIn 1s ease;
 }
 .hero-description {
  margin: 0 auto;
  font-size: 1.1rem;
  line-height: 1.8;
  color: black;
 }
 :root {
  --primary-color: #895bff;
  --primary-light: #a07cff;
  --primary-dark: #6a11cb;
  --primary-gradient: linear-gradient(
    135deg,
    var(--primary-light) 0%,
    var(--primary-color) 100%
  );
 }
 .home-page {
  background-image: url("@/assets/image/bg-mobile.png");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
 }
 /* 解决方案网格 - 响应式布局 */
 .solution-grid {
  padding: 0rem 0 4rem;
  display: grid;
  grid-template-columns: 1fr; /* 默认单列（移动端） */
  gap: 3rem;
 }
 /* 中等屏幕（768px-1439px） - 单列布局 */
@media (min-width: 768px) and (max-width: 1439px) {
  .solution-grid {
    grid-template-columns: 1fr;
  }
 }
 /* 大屏幕（≥1440px） - 双列布局 */
@media (min-width: 1440px) {
  .solution-grid {
    grid-template-columns: 1fr 1fr;
  }
 }
 /* 卡片样式 */
 .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);
  transition: all 0.3s ease;
 }
 .solution-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--primary-gradient);
 }
 .solution-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 50px rgba(137, 91, 255, 0.2);
 }
 .card-header {
  margin-bottom: 2rem;
 }
 .decorative-line {
  width: 50px;
  height: 3px;
  background: var(--primary-gradient);
  margin-bottom: 1rem;
  border-radius: 3px;
  transition: width 0.3s ease;
 }
 .solution-card:hover .decorative-line {
  width: 80px;
 }
 .card-title {
  font-size: 1.3rem;
  color: #2c0850;
  font-weight: 600;
 }
 .content-point {
  display: flex;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(137, 91, 255, 0.1);
 }
 .content-point:last-child {
  border-bottom: none;
 }
 .point-icon {
  color: #4a3a6b;
  font-size: 1.2rem;
  flex-shrink: 0;
 }
 .point-text {
  color: #4a3a6b;
  line-height: 1.6;
  font-size: 1rem;
 }
@keyframes cardEnter {
  to {
    opacity: 1;
    transform: translateY(0);
  }
 }
 </style>
--- a/src/views/CommitteeAppointment/index.vue
+++ b/src/views/CommitteeAppointment/index.vue
@ -0,0 +1,34 @@
 <script setup>
 import { computed } from "vue";
 import { useWindowSize } from "@vueuse/core";
 import size375 from "./size375/index.vue";
 import size768 from "./size768/index.vue";
 import size1440 from "./size1440/index.vue";
 import size1920 from "./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/Show More
+++ b/Show More
		`@ -0,0 +1 @@`
							<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="19" height="19" viewBox="0 0 19 19"><defs><style>.a{fill:#fff;stroke:#707070;}.b{clip-path:url(#a);}.c{fill:#2c2c2c;}</style><clipPath id="a"><rect class="a" width="19" height="19" transform="translate(333.601 660.601)"/></clipPath></defs><g class="b" transform="translate(-333.601 -660.601)"><g transform="translate(333.591 664.087)"><path class="c" d="M19.237,22.964H2.325a.922.922,0,0,1-.922-.922V15.408a.922.922,0,1,1,1.844,0V21.12H18.315V15.408a.922.922,0,1,1,1.844,0v6.634A.922.922,0,0,1,19.237,22.964Z" transform="translate(-1.403 -7.061)"/><path class="c" d="M12.451,13.284c-.509,0-.922-.311-.922-.694V1.332c0-.384.413-.694.922-.694s.922.311.922.694V12.589C13.373,12.973,12.96,13.284,12.451,13.284Z" transform="translate(-3.073 -0.638)"/><path class="c" d="M11.833,20.248a.922.922,0,0,1-.748-.384L7.956,15.51a.922.922,0,1,1,1.5-1.076l2.381,3.313,2.38-3.313a.922.922,0,1,1,1.5,1.076l-3.129,4.355A.921.921,0,0,1,11.833,20.248Z" transform="translate(-2.455 -6.989)"/></g></g></svg>