diff --git a/src/assets/image/bg-contacts.png b/src/assets/image/bg-contacts.png
new file mode 100644
index 0000000..e54805a
Binary files /dev/null and b/src/assets/image/bg-contacts.png differ
diff --git a/src/assets/image/bg-events-calendar.png b/src/assets/image/bg-events-calendar.png
new file mode 100644
index 0000000..a30fd49
Binary files /dev/null and b/src/assets/image/bg-events-calendar.png differ
diff --git a/src/assets/image/bg-news.png b/src/assets/image/bg-news.png
new file mode 100644
index 0000000..34f3f38
Binary files /dev/null and b/src/assets/image/bg-news.png differ
diff --git a/src/assets/image/bg-pc-2.png b/src/assets/image/bg-pc-2.png
new file mode 100644
index 0000000..0fa8f63
Binary files /dev/null and b/src/assets/image/bg-pc-2.png differ
diff --git a/src/assets/image/bg-pc.png b/src/assets/image/bg-pc.png
index fe7f117..e27c182 100644
Binary files a/src/assets/image/bg-pc.png and b/src/assets/image/bg-pc.png differ
diff --git a/src/assets/image/bg-stock-quote.png b/src/assets/image/bg-stock-quote.png
new file mode 100644
index 0000000..8205c6b
Binary files /dev/null and b/src/assets/image/bg-stock-quote.png differ
diff --git a/src/assets/image/contacts-bg.png b/src/assets/image/contacts-bg.png
new file mode 100644
index 0000000..7d56912
Binary files /dev/null and b/src/assets/image/contacts-bg.png differ
diff --git a/src/assets/image/events-calendar-bg.png b/src/assets/image/events-calendar-bg.png
new file mode 100644
index 0000000..d12b3d3
Binary files /dev/null and b/src/assets/image/events-calendar-bg.png differ
diff --git a/src/assets/image/icon-link-svg.svg b/src/assets/image/icon-link-svg.svg
new file mode 100644
index 0000000..df06f36
--- /dev/null
+++ b/src/assets/image/icon-link-svg.svg
@@ -0,0 +1,4 @@
+<svg width="23" height="22" viewBox="0 0 23 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.6548 8.9774C13.516 8.84467 13.3681 8.72503 13.2156 8.61409L13.2153 8.61433C13.0584 8.46998 12.8453 8.38107 12.6104 8.38107C12.1283 8.38107 11.7375 8.75491 11.7375 9.21604C11.7375 9.42009 11.8142 9.60698 11.9413 9.75202C11.9413 9.75204 11.9413 9.75208 11.9414 9.75211C12.0024 9.82178 12.0751 9.88184 12.1567 9.92939C12.239 9.99432 12.3198 10.0582 12.3953 10.1305L12.4673 10.1994C13.372 11.0637 13.1019 12.5528 12.1972 13.4182L8.33659 17.1098C7.4319 17.9741 5.96108 17.9741 5.05634 17.1098L4.9838 17.0404C4.07904 16.175 4.07904 14.7671 4.9838 13.9039L6.68938 12.273C6.90822 12.1068 7.0487 11.8504 7.0487 11.5624C7.0487 11.0616 6.62422 10.6556 6.10059 10.6556C5.903 10.6556 5.71958 10.7134 5.5677 10.8123C5.56722 10.8114 5.56671 10.8104 5.56621 10.8095L5.54802 10.8257C5.48089 10.8719 5.42019 10.926 5.36776 10.9871L3.59529 12.5735C1.92917 14.1683 1.92917 16.7766 3.59529 18.3691L3.66726 18.4379C5.33337 20.0305 8.05903 20.0305 9.72514 18.4379L13.5846 14.7452C15.2484 13.1516 15.3895 10.6377 13.7257 9.04513L13.6548 8.9774Z" fill="#FF7BAC"/>
+<path d="M19.2173 3.56219L19.1454 3.49335C17.4793 1.89968 14.7536 1.89968 13.0875 3.49335L9.22805 7.18608C7.56193 8.77976 7.47018 11.0811 9.1363 12.6758L9.20711 12.7425C9.28278 12.8149 9.36132 12.8831 9.44149 12.9485C9.49952 13.0105 9.56769 13.0636 9.64347 13.1056C9.64405 13.106 9.64465 13.1065 9.64522 13.1069L9.64547 13.1067C9.76626 13.1731 9.90621 13.2113 10.0556 13.2113C10.5107 13.2113 10.8796 12.8584 10.8796 12.4231C10.8796 12.3002 10.8502 12.1839 10.7978 12.0802C10.6888 11.8462 10.4849 11.7038 10.3438 11.5689L10.273 11.5022C9.3683 10.6368 9.71185 9.37962 10.6165 8.51426L14.4783 4.82259C15.3807 3.9572 16.8521 3.9572 17.7568 4.82259L17.8288 4.89033C18.7335 5.75575 18.7335 7.1642 17.8288 8.0285L16.1288 9.65569C15.8975 9.81959 15.7476 10.0825 15.7476 10.3789C15.7476 10.8757 16.1686 11.2785 16.688 11.2785C16.8688 11.2785 17.0376 11.2296 17.1809 11.145C17.182 11.1468 17.183 11.1484 17.1841 11.1502L17.2104 11.1269C17.2917 11.0749 17.3638 11.011 17.4245 10.938L19.2161 9.35669C20.8834 7.76303 20.8835 5.15584 19.2173 3.56219Z" fill="#FF7BAC"/>
+</svg>
diff --git a/src/components/customEcharts/size1920/index.vue b/src/components/customEcharts/size1920/index.vue
index 8f11abc..0ed76a0 100644
--- a/src/components/customEcharts/size1920/index.vue
+++ b/src/components/customEcharts/size1920/index.vue
@@ -2,12 +2,16 @@
   <div class="custom-echarts">
     <div>
       <div class="echarts-header">
-        <div class="echarts-header-title">
-          <span>FiEE, Inc. Stock Price History</span>
+        <!-- 标题区域 -->
+        <div class="title-section">
+          <div class="title-decoration"></div>
+          <div class="stock-title">
+            <span>FiEE, Inc. Stock Price History</span>
+          </div>
         </div>
         <div class="echarts-search-area">
           <div class="echarts-search-byRange">
-            <text style="font-size: 0.9rem; font-weight: 400; color: #666666;">
+            <text style="font-size: 0.9rem; font-weight: 400; color: #666666">
               Range
             </text>
             <div class="search-range-list">
@@ -15,6 +19,7 @@
                 class="search-range-list-each"
                 v-for="(item, index) in state.searchRange"
                 :key="index"
+                :class="{ activeRange: state.activeRange === item }"
                 @click="changeSearchRange(item)"
               >
                 <span>{{ item }}</span>
@@ -23,21 +28,10 @@
           </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"
+              v-model:value="state.dateRange"
+              type="daterange"
+              :is-date-disabled="isDateDisabled"
+              @update:value="handleDateRangeChange"
               input-readonly
             />
           </div>
@@ -48,40 +42,38 @@
   </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'
-
+import { onMounted, watch, reactive } from "vue";
+import * as echarts from "echarts";
+import { NDatePicker, NIcon } from "naive-ui";
+import { ArrowForwardOutline } from "@vicons/ionicons5";
+import axios from "axios";
 const state = reactive({
-  searchRange: ['1m', '3m', 'YTD', '1Y', '5Y', '10Y', 'Max'],
-  selectHistoricStartDate: '2009-10-07',
-  selectHistoricEndDate: new Date(),
-})
+  searchRange: ["1m", "3m", "YTD", "1Y", "5Y", "10Y", "Max"],
+  dateRange: [new Date("2009-10-07").getTime(), new Date().getTime()],
+  activeRange: "",
+});
 
-let myCharts = null
-let historicData = []
-let xAxisData = []
+let myCharts = null;
+let historicData = [];
+let xAxisData = [];
 
 //初始化eCharts
 const initEcharts = (data) => {
-  historicData = 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)
+    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 = echarts.init(document.getElementById("myEcharts"), null, {
+    renderer: "canvas",
+    useDirtyRect: true,
+  });
   // 绘制图表
   myCharts.setOption({
     animation: false,
@@ -91,68 +83,68 @@ const initEcharts = (data) => {
     //   text: 'FiEE, Inc. Stock Price History',
     // },
     grid: {
-      left: '8%', // 或 '2%'，根据实际情况调整
-      right: '12%', // 给右侧y轴留空间，数值可根据y轴label宽度调整
+      left: "8%", // 或 '2%'，根据实际情况调整
+      right: "12%", // 给右侧y轴留空间，数值可根据y轴label宽度调整
     },
     tooltip: {
-      trigger: 'axis',
+      trigger: "axis",
       axisPointer: {
-        type: 'line',
+        type: "line",
         label: {
-          backgroundColor: '#6a7985',
+          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>`
+        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',
+      triggerOn: "mousemove",
       confine: true,
-      hideDelay: 1500
+      hideDelay: 1500,
     },
     xAxis: {
       data: xAxisData,
-      type: 'category',
+      type: "category",
       boundaryGap: false,
       inverse: true,
       axisLine: {
         lineStyle: {
-          color: '#CCD6EB',
+          color: "#CCD6EB",
         },
       },
       axisLabel: {
-        color: '#323232',
-        fontWeight: 'bold',
-        interval: 'auto',
-        hideOverlap: true
+        color: "#323232",
+        fontWeight: "bold",
+        interval: "auto",
+        hideOverlap: true,
       },
     },
     yAxis: {
-      type: 'value',
-      position: 'right',
+      type: "value",
+      position: "right",
       interval: 25,
       //   max: 75.0,
       show: true,
       axisLabel: {
-        color: '#323232',
-        fontWeight: 'bold',
+        color: "#323232",
+        fontWeight: "bold",
         formatter: function (value) {
-          return value > 0 ? value.toFixed(2) : value
+          return value > 0 ? value.toFixed(2) : value;
         },
       },
     },
     series: [
       {
         data: yAxisData,
-        type: 'line',
-        sampling: 'lttb',
-        symbol: 'none',
+        type: "line",
+        sampling: "lttb",
+        symbol: "none",
         lineStyle: {
-          color: '#2c6288',
+          color: "#2c6288",
         },
         areaStyle: {
           color: {
-            type: 'linear',
+            type: "linear",
             x: 0,
             y: 0,
             x2: 0,
@@ -160,387 +152,391 @@ const initEcharts = (data) => {
             colorStops: [
               {
                 offset: 0,
-                color: '#2c6288',
+                color: "#2c6288",
               },
               {
                 offset: 1,
-                color: '#F4F6F8',
+                color: "#F4F6F8",
               },
             ],
           },
         },
         markPoint: {
-          symbol: 'image://' + markPointerIcon,
-          symbolSize: 24,
+          symbol: "circle",
+          symbolSize: 20,
+          itemStyle: {
+            color: {
+              type: "radial",
+              x: 0.5,
+              y: 0.5,
+              r: 0.5,
+              colorStops: [
+                { offset: 0, color: "#CC346C" },
+                { offset: 0.4, color: "white" },
+                { offset: 0.4, color: "white" },
+                { offset: 0.6, color: "rgba(204, 52, 108, 0.30)" },
+                { offset: 0.8, color: "rgba(204, 52, 108, 0.30)" },
+                { offset: 1, color: "rgba(255, 123, 172, 0)" },
+              ],
+            },
+          },
           data: [],
         },
         progressive: 500,
         progressiveThreshold: 3000,
         large: true,
-        largeThreshold: 2000
+        largeThreshold: 2000,
       },
     ],
 
     dataZoom: [
       {
-        type: 'inside',
+        type: "inside",
       },
       {
-        type: 'slider',
+        type: "slider",
         show: true,
         dataBackground: {
           lineStyle: {
-            color: '#2C6288',
+            color: "#2C6288",
           },
           areaStyle: {
             color: {
-              type: 'linear',
+              type: "linear",
               x: 0,
               y: 0,
               x2: 0,
               y2: 1,
               colorStops: [
-                { offset: 1, color: '#2c6288' },
-                { offset: 0, color: '#F4F6F8' },
+                { offset: 1, color: "#2c6288" },
+                { offset: 0, color: "#F4F6F8" },
               ],
             },
           },
         },
         selectedDataBackground: {
           lineStyle: {
-            color: '#2C6288',
+            color: "#2C6288",
           },
           areaStyle: {
             color: {
-              type: 'linear',
+              type: "linear",
               x: 0,
               y: 0,
               x2: 0,
               y2: 1,
               colorStops: [
-                { offset: 1, color: '#2c6288' },
-                { offset: 0, color: '#F4F6F8' },
+                { offset: 1, color: "#2c6288" },
+                { offset: 0, color: "#F4F6F8" },
               ],
             },
           },
         },
-        fillerColor: 'rgba(44, 98, 136, 0.3)',
+        fillerColor: "rgba(44, 98, 136, 0.3)",
         realtime: false,
       },
     ],
-  })
+  });
 
   // 监听 showTip 事件，动态显示 markPoint
-  myCharts.on('showTip', function (params) {
+  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]
+      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.on("globalout", function () {
     myCharts.setOption({
       series: [
         {
           markPoint: {
-            symbol: 'image://' + markPointerIcon,
-            symbolSize: 24,
             data: [],
           },
         },
       ],
-    })
-  })
-  myCharts.on('dataZoom', function (params) {
+    });
+  });
+  myCharts.on("dataZoom", function (params) {
     // 获取当前 dataZoom 范围
-    const option = myCharts.getOption()
-    const xAxisData = option.xAxis[0].data
-    const dataZoom = option.dataZoom[1] || option.dataZoom[0]
+    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
+    let startValue = dataZoom.endValue;
+    let endValue = dataZoom.startValue;
 
     // 如果是索引，转为日期
-    if (typeof startValue === 'number') {
-      startValue = xAxisData[startValue]
+    if (typeof startValue === "number") {
+      startValue = xAxisData[startValue];
     }
-    if (typeof endValue === 'number') {
-      endValue = xAxisData[endValue]
+    if (typeof endValue === "number") {
+      endValue = xAxisData[endValue];
     }
 
     // 更新日期选择器
-    state.selectHistoricStartDate = new Date(startValue)
-    state.selectHistoricEndDate = new Date(endValue)
-  })
-}
+    state.dateRange = [
+      new Date(startValue).getTime(),
+      new Date(endValue).getTime(),
+    ];
+  });
+};
 
 onMounted(() => {
-  getHistoricalData()
-})
+  getHistoricalData();
+});
 
 //获取历史数据
 const getHistoricalData = async () => {
-  let now = new Date()
+  let now = new Date();
   let toDate =
     now.getFullYear() +
-    '-' +
-    String(now.getMonth() + 1).padStart(2, '0') +
-    '-' +
-    String(now.getDate()).padStart(2, '0')
+    "-" +
+    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)
+    "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)
+      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 // 默认返回最后一个
+    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()
+    const mid = Math.floor((left + right) / 2);
+    const midTime = new Date(data[mid].date).getTime();
     if (midTime > target) {
-      left = mid + 1
+      left = mid + 1;
     } else {
-      res = mid
-      right = mid - 1
+      res = mid;
+      right = mid - 1;
     }
   }
-  return res
+  return res;
 }
 
 // 适配倒序数据，返回小于等于目标日期的最近一天索引
 function findClosestDateIndexDescLeft(data, targetDateStr) {
   let left = 0,
-    right = data.length - 1
-  const target = new Date(targetDateStr).getTime()
-  let res = -1
+    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()
+    const mid = Math.floor((left + right) / 2);
+    const midTime = new Date(data[mid].date).getTime();
     if (midTime > target) {
-      left = mid + 1 // mid 比目标新，往更旧的方向找
+      left = mid + 1; // mid 比目标新，往更旧的方向找
     } else {
-      res = mid     // mid <= target，记录下来，继续往更新的方向找
-      right = mid - 1
+      res = mid; // mid <= target，记录下来，继续往更新的方向找
+      right = mid - 1;
     }
   }
-  return res
+  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
+  state.activeRange = range;
+  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'
+      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)
-      }
+      const zoomOptions = {};
+      let newStartTs = state.dateRange[0];
+      let newEndTs = state.dateRange[1];
 
       if (startDate) {
-        myCharts.setOption({
-          dataZoom: {
-            endValue: startValue,
-          },
-        })
-        state.selectHistoricStartDate = new Date(startValue)
+        const idx = findClosestDateIndex(historicData, startDate);
+        const startValue = new Date(historicData[idx].date).toLocaleDateString(
+          "en-US",
+          {
+            month: "short",
+            day: "numeric",
+            year: "numeric",
+          }
+        );
+        zoomOptions.endValue = startValue;
+        newStartTs = new Date(startValue).getTime();
       }
+
       if (endDate) {
-        myCharts.setOption({
-          dataZoom: {
-            startValue: endValue,
-          },
-        })
-        state.selectHistoricEndDate = new Date(endValue)
+        const idx = findClosestDateIndexDescLeft(historicData, endDate);
+        const endValue = new Date(historicData[idx].date).toLocaleDateString(
+          "en-US",
+          {
+            month: "short",
+            day: "numeric",
+            year: "numeric",
+          }
+        );
+        zoomOptions.startValue = endValue;
+        newEndTs = new Date(endValue).getTime();
       }
+
+      if (Object.keys(zoomOptions).length > 0) {
+        myCharts.setOption({ dataZoom: [zoomOptions, zoomOptions] });
+      }
+
+      state.dateRange = [newStartTs, newEndTs];
     }
   } else {
     myCharts.setOption({
       dataZoom: {
-        startValue: '',
-        endValue: '',
+        startValue: "",
+        endValue: "",
       },
-    })
+    });
 
-    state.selectHistoricStartDate = new Date('2009-10-07')
-    state.selectHistoricEndDate = new Date()
+    state.dateRange = [new Date("2009-10-07").getTime(), new Date().getTime()];
   }
-}
+};
 
-// 禁用2009-10-07之后的日期
-const disableAfterDate = (date) => {
-  return date < new Date('2009-10-06') || date > new Date()
-}
+// 禁用日期
+const isDateDisabled = (ts, type, range) => {
+  const minDate = new Date("2009-10-06").getTime();
+  const maxDate = new Date().getTime();
 
-// 禁用过去的日期
-const disablePreviousDate = (date) => {
-  return date < new Date(state.selectHistoricStartDate) || date > new Date()
-}
+  if (ts < minDate || ts > maxDate) {
+    return true;
+  }
 
-// 切换搜索区间开始日期
-const changeSearchRangeStartDate = (date) => {
-  // console.error(date)
-  changeSearchRange(
-    'startDateTime',
-    new Date(date).toLocaleDateString('en-US', {
-      month: 'short',
-      day: 'numeric',
-      year: 'numeric',
-    }),
-  )
-}
+  if (type === "end" && range && range[0]) {
+    return ts < range[0];
+  }
 
-// 切换搜索区间结束日期
-const changeSearchRangeEndDate = (date) => {
-  // console.error(date)
-  changeSearchRange(
-    'endDateTime',
-    new Date(date).toLocaleDateString('en-US', {
-      month: 'short',
-      day: 'numeric',
-      year: 'numeric',
-    }),
-  )
-}
+  return false;
+};
+
+// 切换搜索区间
+const handleDateRangeChange = (range) => {
+  if (range && range[0] && range[1]) {
+    const startDate = new Date(range[0]).toLocaleDateString("en-US", {
+      month: "short",
+      day: "numeric",
+      year: "numeric",
+    });
+    const endDate = new Date(range[1]).toLocaleDateString("en-US", {
+      month: "short",
+      day: "numeric",
+      year: "numeric",
+    });
+
+    changeSearchRange("startDateTime", startDate);
+    changeSearchRange("endDateTime", endDate);
+  }
+};
 </script>
 <style lang="scss" scoped>
 .custom-echarts {
@@ -550,13 +546,30 @@ const changeSearchRangeEndDate = (date) => {
   }
 
   .echarts-header {
-    .echarts-header-title {
-      span {
-        font-size: 2rem;
-        font-weight: 600;
-        color: #323232;
-      }
+    .title-section {
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+      margin-bottom: 32px;
+      padding: 0 16px;
     }
+    .title-decoration {
+      width: 58px;
+      height: 7px;
+      background: #ff7bac;
+      margin: auto 0;
+      margin-top: 43px;
+    }
+
+    .stock-title {
+      font-family: "PingFang SC", sans-serif;
+      font-weight: 500;
+      font-size: 40px;
+      line-height: 1.4em;
+      letter-spacing: 3%;
+      color: #000000;
+    }
+
     .echarts-search-area {
       padding: 2rem 0 0;
       display: flex;
@@ -586,6 +599,10 @@ const changeSearchRangeEndDate = (date) => {
               font-size: 0.9rem;
             }
           }
+          .activeRange {
+            color: #fff;
+            background: #ff7bac;
+          }
         }
       }
 
diff --git a/src/components/customFooter/size1920/index.vue b/src/components/customFooter/size1920/index.vue
index 918f002..05424df 100644
--- a/src/components/customFooter/size1920/index.vue
+++ b/src/components/customFooter/size1920/index.vue
@@ -2,12 +2,12 @@
   <!-- 通用页脚 -->
   <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>
+      <span>&copy; 2025 FiEE, Inc. All Rights Reserved.</span>
     </div>
   </div>
 </template>
@@ -28,19 +28,20 @@ const handleLink = (link) => {
   // } else if (link === "siteMap") {
   //   window.open(siteMap, "_blank");
   // }
-  router.push(link)
+  router.push(link);
 };
 </script>
 
 <style scoped lang="scss">
 .custom-footer {
   width: 100%;
-  background: #f7f8fa;
-  border-top: 1px solid #ececec;
+  background: #f5f5f5;
+  border-top: 2px solid #dbdbdb;
   z-index: 100;
+  height: 80px;
 
   .custom-footer-box {
-    max-width: 1700px;
+    max-width: 932px;
     margin: 0 auto;
     display: flex;
     flex-direction: row;
@@ -50,12 +51,11 @@ const handleLink = (link) => {
     color: #888;
     // font-size: 15px;
     font-size: 1.05rem;
-    padding: 1rem 40px;
     text-align: center;
+    height: 100%;
   }
 
   .footer-links {
-    margin: 0.4rem 0 0;
     span {
       border-right: 1px solid #d2d2d7;
       padding: 0 10px;
diff --git a/src/config/headerMenuConfig.js b/src/config/headerMenuConfig.js
index 5b24d53..ee208ba 100644
--- a/src/config/headerMenuConfig.js
+++ b/src/config/headerMenuConfig.js
@@ -48,11 +48,11 @@ export const useHeaderMenuConfig = () => {
       label: t("header_menu.financial_information.title"),
       key: "financial_information",
       children: [
-          {
-            label: t("header_menu.financial_information.sec_filings"),
-            key: "sec_filings",
-            href: "/secfilings",
-          },
+        {
+          label: t("header_menu.financial_information.sec_filings"),
+          key: "sec_filings",
+          href: "/secfilings",
+        },
         {
           label: t("header_menu.financial_information.annual_reports"),
           key: "annual_reports",
@@ -72,12 +72,12 @@ export const useHeaderMenuConfig = () => {
         {
           label: t("header_menu.stock_information.stock_quote"),
           key: "stock_quote",
-          href:'/stock-quote'
+          href: '/stock-quote'
         },
         {
           label: t("header_menu.stock_information.historic_stock_price"),
           key: "historic_stock_price",
-          href:'/historic-stock'
+          href: '/historic-stock'
         },
         // {
         //   label: t("header_menu.stock_information.investment_calculator"),
@@ -109,14 +109,19 @@ export const useHeaderMenuConfig = () => {
         {
           label: t("header_menu.investor_resources.ir_contacts"),
           key: "ir_contacts",
-          href:'/contacts'
+          href: '/contacts'
         },
         {
           label: t("header_menu.investor_resources.email_alerts"),
           key: "email_alerts",
-            href:'/email-alerts'
+          href: '/email-alerts'
         },
       ],
     },
+    {
+      label: "Product Introduction",
+      key: "product-introduction",
+      href: '/product-introduction',
+    },
   ];
 };
diff --git a/src/router/index.js b/src/router/index.js
index 7a4b470..7db7973 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -30,6 +30,7 @@ const routes = [
       {
         path: "/stock-quote",
         name: "stock-quote",
+        meta: { bg:'url("@/assets/image/bg-stock-quote.png")' },
         component: () => import("@/views/stock-quote/index.vue"),
       },
       {
@@ -40,11 +41,13 @@ const routes = [
       {
         path: "/contacts",
         name: "contacts",
+        meta: { bg: 'url("@/assets/image/bg-contacts.png")' },
         component: () => import("@/views/contacts/index.vue"),
       },
       {
         path: "/email-alerts",
         name: "email-alerts",
+        meta: { bg: 'url("@/assets/image/bg-contacts.png")' },
         component: () => import("@/views/email-alerts/index.vue"),
       },
       {
@@ -79,11 +82,13 @@ const routes = [
       {
         path: "/news",
         name: "news",
+        meta: { bg: 'url("@/assets/image/bg-news.png")' },
         component: () => import("@/views/news/index.vue"),
       },
       {
         path: "/events-calendar",
         name: "events-calendar",
+        // meta: { bg: 'url("@/assets/image/bg-events-calendar.png")' },
         component: () => import("@/views/events-calendar/index.vue"),
       },
       {
@@ -141,6 +146,11 @@ const routes = [
         name: "siteMap",
         component: () => import("@/views/footerLinks/siteMap/index.vue"),
       },
+      {
+        path: "/product-introduction",
+        name: "product-introduction",
+        component: () => import("@/views/product-introduction/index.vue"),
+      },
     ],
   },
   {
diff --git a/src/views/contacts/size1920/index.vue b/src/views/contacts/size1920/index.vue
index e89172d..b16d727 100644
--- a/src/views/contacts/size1920/index.vue
+++ b/src/views/contacts/size1920/index.vue
@@ -8,42 +8,123 @@ function copyEmail() {
 </script>
 
 <template>
-  <header className="header"></header>
-  <main
-    ref="main"
-    class="flex-center min-h-80vh rounded-3xl to-accent w-100vw animate-fade-in"
-  >
-    <div class="w-full flex flex-col items-center gap-6 py-16 px-8">
-      <h1
-        class="text-5xl font-bold text-primary animate-fade-in-down animate-delay-0"
-      >
-        Investor Contacts
-      </h1>
-      <div
-        class="text-3xl font-semibold text-gray-800 animate-fade-in-down animate-delay-200"
-      >
-        FiEE Inc.
-      </div>
-      <div class="text-2xl text-#ff7bac animate-fade-in-down animate-delay-400">
-        Investor Relations
-      </div>
-      <div
-        class="text-xl text-gray-600 flex items-center gap-2 animate-fade-in-down animate-delay-600"
-      >
+  <div class="contact-container">
+    <!-- Title Section -->
+    <div class="title-section">
+      <div class="title-decoration"></div>
+      <div class="contact-title">Investor Contacts</div>
+    </div>
+
+    <!-- Card Section -->
+    <div class="contact-card">
+      <div class="logo-text">FiEE Inc.</div>
+      <div class="relation-text">Investor Relations</div>
+      <div class="email-section">
         <span>Email:</span>
-        <span
-          class="transition-colors duration-300 cursor-pointer text-#00baff hover:text-primary active:text-secondary select-all"
-          @click="copyEmail"
+        <span class="email-address" @click="copyEmail"
           >fiee@dlkadvisory.com</span
         >
       </div>
     </div>
-  </main>
-  <footer></footer>
+  </div>
 </template>
 
 <style scoped lang="scss">
-/**** UnoCSS 动画补充（如未全局引入可在 uno.config.js 添加）****/
+.contact-container {
+  max-width: 932px;
+  margin: 0 auto;
+}
+
+.title-section {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  margin-bottom: 32px;
+  padding: 0 16px;
+}
+
+.title-decoration {
+  width: 58px;
+  height: 7px;
+  background: #ff7bac;
+}
+
+.contact-title {
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 500;
+  font-size: 40px;
+  line-height: 1.4em;
+  color: #000000;
+}
+
+.contact-card {
+  display: flex;
+  width: 932px;
+  height: 580px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+  background-color: white;
+  border-radius: 1rem;
+  background-image: url("@/assets/image/contacts-bg.png");
+  background-size: 64% auto;
+  background-position: center;
+  background-repeat: no-repeat;
+  box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.1);
+  animation: fade-in 0.8s cubic-bezier(0.23, 1, 0.32, 1) both;
+}
+
+.logo-text {
+  width: 100%;
+  text-align: center;
+  font-feature-settings: "liga" off, "clig" off;
+  font-family: "PingFang SC";
+  font-size: 128px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+  letter-spacing: 0.48px;
+  background: linear-gradient(90deg, #ff7bac 0%, #0ff 100%);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  color: transparent;
+  animation: fade-in-down 0.8s cubic-bezier(0.23, 1, 0.32, 1) both;
+  animation-delay: 0.2s;
+}
+
+.relation-text {
+  font-size: 1.5rem;
+  color: black;
+  font-weight: bold;
+  animation: fade-in-down 0.8s cubic-bezier(0.23, 1, 0.32, 1) both;
+  animation-delay: 0.4s;
+}
+
+.email-section {
+  font-size: 1.25rem;
+  color: #4a5568;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  animation: fade-in-down 0.8s cubic-bezier(0.23, 1, 0.32, 1) both;
+  animation-delay: 0.6s;
+}
+
+.email-address {
+  color: #ff7bac;
+}
+
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
 @keyframes fade-in-down {
   0% {
     opacity: 0;
@@ -54,19 +135,4 @@ function copyEmail() {
     transform: translateY(0);
   }
 }
-.animate-fade-in-down {
-  animation: fade-in-down 0.8s cubic-bezier(0.23, 1, 0.32, 1) both;
-}
-.animate-delay-0 {
-  animation-delay: 0s;
-}
-.animate-delay-200 {
-  animation-delay: 0.2s;
-}
-.animate-delay-400 {
-  animation-delay: 0.4s;
-}
-.animate-delay-600 {
-  animation-delay: 0.6s;
-}
 </style>
diff --git a/src/views/email-alerts/size1920/index.vue b/src/views/email-alerts/size1920/index.vue
index 6390c64..c7c30fb 100644
--- a/src/views/email-alerts/size1920/index.vue
+++ b/src/views/email-alerts/size1920/index.vue
@@ -8,7 +8,6 @@ const form = ref({
   email: "",
   company: "",
   phone: "",
-  alertType: "all",
 });
 const submitted = ref(false);
 
@@ -26,92 +25,53 @@ async function handleSubmit(e) {
 </script>
 
 <template>
-  <header class="header"></header>
-  <main ref="main" class="relative min-h-[80vh] flex-center overflow-hidden">
-    <!-- 粒子背景 -->
-    <div class="absolute inset-0 z-0 pointer-events-none animate-bg-move"></div>
-    <!-- 表单卡片/提交成功卡片 -->
-    <div
-      class="relative z-10 w-[480px] max-w-[90vw] p-10 bg-white/80 rounded-3xl shadow-2xl backdrop-blur-md animate-bounce-in"
-    >
+  <div class="alerts-container">
+    <!-- Title Section -->
+    <div class="title-section">
+      <div class="title-decoration"></div>
+      <div class="title">E-Mail Alerts</div>
+      <p class="subtitle">* Required Fields</p>
+    </div>
+
+    <!-- Form Card -->
+    <div class="form-card">
       <template v-if="!submitted">
-        <h2 class="text-3xl font-bold text-#ff7bac mb-2 tracking-wide">
-          E-Mail Alerts
-        </h2>
-        <p class="text-sm text-gray-500 mb-6">* Required Fields</p>
-        <form class="space-y-4" @submit="handleSubmit">
-          <div>
-            <label class="block text-gray-700 font-semibold mb-1"
-              >* First Name</label
-            >
+        <form class="form-content" @submit="handleSubmit">
+          <div class="form-group">
+            <label for="firstName">* First Name</label>
             <input
+              id="firstName"
               v-model="form.firstName"
               type="text"
-              class="w-full px-4 py-2 rounded-lg ring-2 ring-#ff7bac/20) transition-all duration-300 outline-none bg-white/90 border-none"
+              required
             />
           </div>
-          <div>
-            <label class="block text-gray-700 font-semibold mb-1"
-              >* Last Name</label
-            >
-            <input
-              v-model="form.lastName"
-              type="text"
-              class="w-full px-4 py-2 rounded-lg ring-2 ring-#ff7bac/20) transition-all duration-300 outline-none bg-white/90 border-none"
-            />
+          <div class="form-group">
+            <label for="lastName">* Last Name</label>
+            <input id="lastName" v-model="form.lastName" type="text" required />
           </div>
-          <div>
-            <label class="block text-gray-700 font-semibold mb-1"
-              >* Email</label
-            >
-            <input
-              v-model="form.email"
-              type="email"
-              class="w-full px-4 py-2 rounded-lg ring-2 ring-#ff7bac/20) transition-all duration-300 outline-none bg-white/90 border-none"
-            />
+          <div class="form-group">
+            <label for="email">* Email</label>
+            <input id="email" v-model="form.email" type="email" required />
           </div>
-          <div>
-            <label class="block text-gray-700 font-semibold mb-1"
-              >* Company</label
-            >
-            <input
-              v-model="form.company"
-              type="text"
-              class="w-full px-4 py-2 rounded-lg ring-2 ring-#ff7bac/20) transition-all duration-300 outline-none bg-white/90 border-none"
-            />
+          <div class="form-group">
+            <label for="company">* Company</label>
+            <input id="company" v-model="form.company" type="text" required />
           </div>
-          <div>
-            <label class="block text-gray-700 font-semibold mb-1">Phone</label>
-            <input
-              v-model="form.phone"
-              type="tel"
-              class="w-full px-4 py-2 rounded-lg ring-2 ring-#ff7bac/20) transition-all duration-300 outline-none bg-white/90 border-none"
-            />
+          <div class="form-group">
+            <label for="phone">Phone</label>
+            <input id="phone" v-model="form.phone" type="tel" />
           </div>
-          <button
-            type="submit"
-            class="w-full py-3 rounded-xl text-white font-bold text-lg active:scale-95 transition-all duration-200 animate-bounce-in animate-delay-200 submit-btn"
-          >
-            Submit
-          </button>
+          <button type="submit" class="submit-btn">Submit</button>
         </form>
       </template>
       <template v-else>
-        <div
-          class="flex flex-col items-center justify-center min-h-[300px] animate-bounce-in"
-        >
-          <span
-            class="i-mdi:check-circle-outline text-green-500 text-5xl mb-4"
-          ></span>
-          <h2 class="text-2xl font-bold text-#ff7bac mb-2">
-            Submitted successfully!
-          </h2>
-          <div class="text-gray-700 text-base mb-4">
+        <div class="success-message">
+          <h2 class="success-title">Submitted successfully!</h2>
+          <div class="success-info">
             The information you submitted is as follows:
           </div>
-          <div
-            class="w-full bg-white/80 rounded-xl shadow p-4 space-y-2 text-gray-800"
-          >
+          <div class="submitted-data">
             <div>
               <span class="font-semibold">First Name：</span
               >{{ form.firstName }}
@@ -129,23 +89,156 @@ async function handleSubmit(e) {
               <span class="font-semibold">Phone：</span
               >{{ form.phone || "Not filled in" }}
             </div>
-            <div>
-              <span class="font-semibold">Alert Type：</span
-              >{{
-                form.alertType === "all" ? "All Alerts" : "Customize Alerts"
-              }}
-            </div>
           </div>
         </div>
       </template>
     </div>
-  </main>
-  <footer></footer>
+  </div>
 </template>
 
 <style scoped lang="scss">
-/* 可选：自定义粒子或渐变动画背景 */
+.alerts-container {
+  max-width: 932px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.title-section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  text-align: center;
+}
+
+.title-decoration {
+  width: 58px;
+  height: 7px;
+  background: #ff7bac;
+}
+
+.title {
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 500;
+  font-size: 40px;
+  line-height: 56px;
+  color: #000000;
+  letter-spacing: 1.2px;
+}
+
+.subtitle {
+  font-family: "PingFang SC", sans-serif;
+  font-size: 16px;
+  line-height: 22px;
+  color: #455363;
+  letter-spacing: 0.48px;
+}
+
+.form-card {
+  width: 100%;
+  max-width: 932px;
+  background-color: white;
+  border-radius: 16px;
+  padding: 24px;
+  box-shadow: 0px 3px 14px 0px rgba(0, 0, 0, 0.16);
+  animation: fade-in 0.8s cubic-bezier(0.23, 1, 0.32, 1) both;
+}
+
+.form-content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  label {
+    font-family: "PingFang SC", sans-serif;
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 22px;
+    color: #000000;
+    letter-spacing: 0.48px;
+  }
+
+  input {
+    height: 38px;
+    border: 1px solid #e0e0e6;
+    border-radius: 8px;
+    padding: 0 12px;
+    font-size: 16px;
+    outline: none;
+    transition: border-color 0.3s;
+
+    &:focus {
+      border-color: #ff7bac;
+    }
+  }
+}
 .submit-btn {
-  background: linear-gradient(to right, #ff7bac, #00ffff);
+  height: 60px;
+  background: #ff7bac;
+  border-radius: 8px;
+  border: none;
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 500;
+  font-size: 24px;
+  line-height: 32px;
+  color: white;
+  letter-spacing: 1.2px;
+  cursor: pointer;
+  transition: opacity 0.3s;
+  margin-top: 8px; // 16px (from figma form-group gap) + 8px = 24px
+
+  &:hover {
+    opacity: 0.9;
+  }
+}
+
+.success-message {
+  text-align: center;
+  padding: 40px;
+}
+
+.success-title {
+  font-size: 24px;
+  font-weight: bold;
+  color: #ff7bac;
+  margin-bottom: 16px;
+}
+
+.success-info {
+  margin-bottom: 24px;
+  color: #455363;
+}
+
+.submitted-data {
+  display: inline-block;
+  text-align: left;
+  background: #f9f9f9;
+  padding: 20px;
+  border-radius: 8px;
+  div {
+    margin-bottom: 8px;
+  }
+  .font-semibold {
+    font-weight: 600;
+  }
+}
+
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 </style>
diff --git a/src/views/events-calendar/size1920/index.vue b/src/views/events-calendar/size1920/index.vue
index 70efa8c..fb52c16 100644
--- a/src/views/events-calendar/size1920/index.vue
+++ b/src/views/events-calendar/size1920/index.vue
@@ -1,29 +1,95 @@
 <template>
   <div class="events-calendar-page">
-    <customDefaultPage>
-      <template #content>
-        <main class="p-[35px] max-w-[1200px] mx-auto">
-          <div class="title mb-[20px]">
+    <main class="page-container">
+      <div class="events-container">
+        <!-- 标题区域 -->
+        <div class="title-section">
+          <div class="title-decoration"></div>
+          <div class="events-title">
             {{ t("events_calendar.title") }}
           </div>
-          <div class="search-container">
+        </div>
+
+        <!-- 搜索区域 -->
+        <div class="search-container">
+          <div class="date-picker-wrapper">
             <n-date-picker
               v-model:value="state.selectedDateValue"
               type="date"
               class="search-date-picker"
-            ></n-date-picker>
-            <n-button @click="handleSearch" class="search-button">
-              {{ t("events_calendar.search.button") }}
-            </n-button>
+              placeholder="Select Date"
+            >
+              <template #prefix>
+                <svg
+                  class="calendar-icon"
+                  width="20"
+                  height="20"
+                  viewBox="0 0 20 20"
+                  fill="none"
+                >
+                  <g clip-path="url(#clip0_134_3094)">
+                    <path
+                      d="M17.5 3.33398H2.5C2.08333 3.33398 1.66667 3.66732 1.66667 4.08398V17.5007C1.66667 17.9173 2.08333 18.2507 2.5 18.2507H17.5C17.9167 18.2507 18.3333 17.9173 18.3333 17.5007V4.08398C18.3333 3.66732 17.9167 3.33398 17.5 3.33398Z"
+                      stroke="#78777B"
+                      stroke-width="1.25"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    ></path>
+                    <path
+                      d="M13.3333 1.66602V5.00018"
+                      stroke="#78777B"
+                      stroke-width="1.25"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    ></path>
+                    <path
+                      d="M6.66669 1.66602V5.00018"
+                      stroke="#78777B"
+                      stroke-width="1.25"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    ></path>
+                    <path
+                      d="M1.66669 8.33398H18.3334"
+                      stroke="#78777B"
+                      stroke-width="1.25"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    ></path>
+                  </g>
+                  <defs>
+                    <clipPath id="clip0_134_3094">
+                      <rect
+                        width="20"
+                        height="20"
+                        fill="white"
+                        transform="translate(0 0.000976562)"
+                      ></rect>
+                    </clipPath>
+                  </defs>
+                </svg>
+              </template>
+            </n-date-picker>
           </div>
-        </main>
-      </template>
-    </customDefaultPage>
+          <n-button @click="handleSearch" class="search-button">
+            {{ t("events_calendar.search.button") }}
+          </n-button>
+        </div>
+
+        <!-- 背景图片区域 -->
+        <div class="background-image-container">
+          <img
+            src="@/assets/image/events-calendar-bg.png"
+            alt="Events Calendar Background"
+            class="background-image"
+          />
+        </div>
+      </div>
+    </main>
   </div>
 </template>
 
 <script setup>
-import customDefaultPage from "@/components/customDefaultPage/index.vue";
 import { reactive } from "vue";
 import { NDatePicker, NButton } from "naive-ui";
 import { useI18n } from "vue-i18n";
@@ -41,42 +107,112 @@ const handleSearch = () => {
 </script>
 
 <style scoped lang="scss">
-.title {
+.page-container {
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.events-container {
+  max-width: 932px;
+  margin: 0 auto;
+}
+
+.title-section {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  margin-bottom: 32px;
+  padding: 0 16px;
+}
+
+.title-decoration {
+  width: 58px;
+  height: 7px;
+  background: #ff7bac;
+  margin: auto 0;
+  margin-top: 43px;
+}
+
+.events-title {
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 500;
   font-size: 40px;
-  color: #333;
+  line-height: 1.4em;
+  letter-spacing: 3%;
+  color: #000000;
 }
 
 .search-container {
   margin-bottom: 20px;
   display: flex;
-  flex-direction: row;
   align-items: center;
-  justify-content: flex-start;
-  gap: 10px;
+  gap: 32px;
+  padding: 0 16px;
+}
+
+.date-picker-wrapper {
+  flex: 1;
+  position: relative;
 }
 
 .search-date-picker {
-  width: 14rem;
+  width: 100%;
 }
 
-:deep(.n-date-picker) {
-  width: 14rem;
-  .n-input__input {
-    padding: 4px 0;
-    border-radius: 4px;
-  }
-}
-
-:deep(.n-button) {
-  padding: 20px 16px;
-  border-radius: 4px;
-}
-.search-button {
-  background: #ff7bac;
-  color: #fff;
+:deep(.n-input) {
+  height: 34px;
+  border-radius: 3px;
+  border: 1px solid #e0e0e6;
   &:hover {
-    background: #ff7bac;
-    color: #fff;
+    border-color: #ff7bac;
   }
 }
+:deep(.n-input--focus) {
+  border-color: #ff7bac;
+  box-shadow: 0 0 0 2px rgba(255, 123, 172, 0.2);
+}
+
+.calendar-icon {
+  margin-left: 12px;
+}
+
+.search-button {
+  height: 34px;
+  padding: 7px 12px;
+  color: #fff;
+  background-color: #ff7bac;
+  border: none;
+  border-radius: 3px;
+  cursor: pointer;
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 1.375em;
+  letter-spacing: 3%;
+  min-width: 201px;
+
+  &:hover {
+    background-color: #e66f9a;
+  }
+}
+
+.background-image-container {
+  background: #fff;
+  width: 100%;
+  margin-top: 20px;
+  box-shadow: 0px 3px 14px 0px rgba(0, 0, 0, 0.16);
+  border-radius: 16px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 120px 0;
+}
+
+.background-image {
+  width: 415px;
+  height: 235px;
+  flex-shrink: 0;
+  aspect-ratio: 83/47;
+}
 </style>
diff --git a/src/views/financialinformation/annualreports/size1920/index.vue b/src/views/financialinformation/annualreports/size1920/index.vue
index 711288e..aa2535a 100644
--- a/src/views/financialinformation/annualreports/size1920/index.vue
+++ b/src/views/financialinformation/annualreports/size1920/index.vue
@@ -1,9 +1,12 @@
 <template>
   <div class="page-container">
     <div class="financials-container">
-      <!-- 标题 -->
-      <div class="financials-title">
-        {{ t("financialinformation.secfilings.title") }}
+      <!-- 标题区域 -->
+      <div class="title-section">
+        <div class="title-decoration"></div>
+        <div class="financials-title">
+          {{ t("financialinformation.secfilings.title") }}
+        </div>
       </div>
 
       <!-- 公司财务概览 -->
@@ -34,7 +37,7 @@
             <div class="column date">
               {{ t("financialinformation.secfilings.annual_reports.date") }}
             </div>
-            <div class="column download"></div>
+            <div class="column download">view</div>
           </div>
 
           <!-- 报告列表 -->
@@ -47,25 +50,128 @@
               <div class="column file-name">{{ report.fileName }}</div>
               <div class="column date">{{ report.date }}</div>
               <div class="column download">
-                <a :href="report.downloadUrl" class="download-link">{{
-                  t("financialinformation.secfilings.annual_reports.view")
-                }}</a>
+                <a :href="report.downloadUrl" class="download-link">
+                  <img src="/src/assets/image/icon-link-svg.svg" alt="View" />
+                </a>
               </div>
             </div>
           </div>
         </div>
       </section>
+
+      <!-- 分页器 -->
+      <div class="pagination-container">
+        <div class="pagination-info">
+          Displaying {{ displayRange.start }} - {{ displayRange.end }} of
+          {{ state.total }} results
+        </div>
+        <div class="pagination-controls">
+          <div class="pagination-buttons">
+            <button
+              class="page-btn prev-btn"
+              :disabled="state.currentPage === 1"
+              @click="goToPrevPage"
+            >
+              <svg width="5" height="9" viewBox="0 0 5 9" fill="none">
+                <path
+                  d="M4 1L1 4.5L4 8"
+                  stroke="#455363"
+                  stroke-width="1.5"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+              </svg>
+            </button>
+
+            <!-- 动态生成页码按钮 -->
+            <template v-for="page in getVisiblePages()" :key="page">
+              <button
+                v-if="page !== '...'"
+                class="page-btn"
+                :class="{ active: page === state.currentPage }"
+                @click="goToPage(page)"
+              >
+                {{ page }}
+              </button>
+              <button v-else class="page-btn disabled" disabled>...</button>
+            </template>
+
+            <button
+              class="page-btn next-btn"
+              :disabled="state.currentPage === totalPages"
+              @click="goToNextPage"
+            >
+              <svg width="5" height="9" viewBox="0 0 5 9" fill="none">
+                <path
+                  d="M1 1L4 4.5L1 8"
+                  stroke="#455363"
+                  stroke-width="1.5"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+              </svg>
+            </button>
+          </div>
+          <div class="page-size-selector" @click="togglePageSizeMenu">
+            <span>{{ state.pageSize }}/page</span>
+            <svg width="10" height="5" viewBox="0 0 10 5" fill="none">
+              <path
+                d="M1 1L5 4L9 1"
+                stroke="#455363"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+            <!-- 页面大小选择菜单 -->
+            <div v-if="showPageSizeMenu" class="page-size-menu">
+              <div
+                v-for="size in [10, 20, 50]"
+                :key="size"
+                class="page-size-option"
+                :class="{ active: state.pageSize === size }"
+                @click="changePageSize(size)"
+              >
+                {{ size }}/page
+              </div>
+            </div>
+          </div>
+          <div class="goto-section">
+            <span>Goto</span>
+            <input
+              type="number"
+              v-model="state.gotoPage"
+              class="goto-input"
+              :min="1"
+              :max="totalPages"
+              @keyup.enter="handleGoto"
+            />
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { ref, reactive, computed, watch, onMounted, onUnmounted } from "vue";
 import { useI18n } from "vue-i18n";
 
 const { t } = useI18n();
+
+// 分页状态
+const state = reactive({
+  currentPage: 1,
+  pageSize: 10,
+  total: 0,
+  gotoPage: 1,
+});
+
+// 页面大小选择菜单显示状态
+const showPageSizeMenu = ref(false);
+
 // 年度报告数据
-const annualReports = ref([
+const allAnnualReports = ref([
   {
     fileName: "2024 Annual Report Amendment No.2",
     date: "August 20, 2025",
@@ -211,6 +317,138 @@ const annualReports = ref([
       "https://www.sec.gov/Archives/edgar/data/1467761/000135448810001043/zmtp_10k.htm",
   },
 ]);
+
+// 初始化总数
+state.total = allAnnualReports.value.length;
+
+// 计算当前页显示的数据
+const annualReports = computed(() => {
+  const start = (state.currentPage - 1) * state.pageSize;
+  const end = start + state.pageSize;
+  return allAnnualReports.value.slice(start, end);
+});
+
+// 计算总页数
+const totalPages = computed(() => {
+  return Math.ceil(state.total / state.pageSize);
+});
+
+// 计算显示范围
+const displayRange = computed(() => {
+  const start = (state.currentPage - 1) * state.pageSize + 1;
+  const end = Math.min(state.currentPage * state.pageSize, state.total);
+  return { start, end };
+});
+
+// 分页方法
+const goToPage = (page) => {
+  if (page >= 1 && page <= totalPages.value) {
+    state.currentPage = page;
+  }
+};
+
+const goToPrevPage = () => {
+  if (state.currentPage > 1) {
+    state.currentPage--;
+  }
+};
+
+const goToNextPage = () => {
+  if (state.currentPage < totalPages.value) {
+    state.currentPage++;
+  }
+};
+
+const changePageSize = (size) => {
+  state.pageSize = size;
+  state.currentPage = 1; // 重置到第一页
+};
+
+const handleGoto = () => {
+  const page = parseInt(state.gotoPage);
+  if (page >= 1 && page <= totalPages.value) {
+    state.currentPage = page;
+  }
+};
+
+// 切换页面大小选择菜单
+const togglePageSizeMenu = () => {
+  showPageSizeMenu.value = !showPageSizeMenu.value;
+};
+
+// 获取可见的页码数组
+const getVisiblePages = () => {
+  const current = state.currentPage;
+  const total = totalPages.value;
+  const pages = [];
+
+  if (total <= 7) {
+    // 如果总页数小于等于7，显示所有页码
+    for (let i = 1; i <= total; i++) {
+      pages.push(i);
+    }
+  } else {
+    // 显示第一页
+    pages.push(1);
+
+    if (current <= 4) {
+      // 当前页在前4页
+      for (let i = 2; i <= 5; i++) {
+        pages.push(i);
+      }
+      pages.push("...");
+      pages.push(total);
+    } else if (current >= total - 3) {
+      // 当前页在后4页
+      pages.push("...");
+      for (let i = total - 4; i <= total; i++) {
+        pages.push(i);
+      }
+    } else {
+      // 当前页在中间
+      pages.push("...");
+      for (let i = current - 1; i <= current + 1; i++) {
+        pages.push(i);
+      }
+      pages.push("...");
+      pages.push(total);
+    }
+  }
+
+  return pages;
+};
+
+// 监听页面大小变化
+watch(
+  () => state.pageSize,
+  () => {
+    state.currentPage = 1;
+  }
+);
+
+// 监听当前页变化，更新goto输入框
+watch(
+  () => state.currentPage,
+  (newPage) => {
+    state.gotoPage = newPage;
+  }
+);
+
+// 点击外部关闭页面大小选择菜单
+const handleClickOutside = (event) => {
+  if (!event.target.closest(".page-size-selector")) {
+    showPageSizeMenu.value = false;
+  }
+};
+
+// 添加和移除事件监听器
+onMounted(() => {
+  document.addEventListener("click", handleClickOutside);
+});
+
+onUnmounted(() => {
+  document.removeEventListener("click", handleClickOutside);
+});
 </script>
 
 <style scoped lang="scss">
@@ -219,34 +457,59 @@ const annualReports = ref([
   background-position: center;
   background-repeat: no-repeat;
 }
+
 .financials-container {
-  max-width: 1200px;
+  max-width: 932px;
   margin: 0 auto;
-  padding: 20px;
+}
+
+.title-section {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 0 16px;
+  margin-bottom: 32px;
+}
+
+.title-decoration {
+  width: 58px;
+  height: 7px;
+  background: #ff7bac;
+  margin: auto 0;
+  margin-top: 43px;
 }
 
 .financials-title {
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 500;
   font-size: 40px;
-  text-align: center;
-  margin-bottom: 60px;
-  color: #333;
+  line-height: 1.4em;
+  letter-spacing: 3%;
+  color: #000000;
 }
 
 .section {
-  margin-bottom: 60px;
+  margin-bottom: 16px;
 }
 
 .section-title {
-  font-size: 18px;
-  margin-bottom: 20px;
-  color: #333;
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 500;
+  font-size: 24px;
+  line-height: 1.333em;
+  letter-spacing: 5%;
+  color: #000000;
+  margin-bottom: 12px;
 }
 
 .overview-text {
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 400;
   font-size: 16px;
-  line-height: 1.6;
-  color: #333;
-  margin-bottom: 30px;
+  line-height: 1.375em;
+  letter-spacing: 3%;
+  color: #455363;
+  margin-bottom: 12px;
 }
 
 .tabs {
@@ -267,40 +530,88 @@ const annualReports = ref([
 
 .reports-table {
   width: 100%;
-  border-collapse: collapse;
+  background: #ffffff;
+  border-radius: 16px;
+  box-shadow: 0px 3px 14px 0px rgba(0, 0, 0, 0.16);
+  padding: 16px;
 }
 
 .table-header {
   display: flex;
-  padding: 10px 0;
-  border-bottom: 1px solid #ccc;
-  font-weight: bold;
+  background: #fff0f5;
+  border-radius: 8px;
+  padding: 16px 0;
+  margin-bottom: 4px;
   justify-content: space-between;
+  align-items: center;
+
+  .column {
+    font-family: "PingFang SC", sans-serif;
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 1.375em;
+    letter-spacing: 3%;
+    color: #000000;
+    text-align: center;
+  }
 }
 
 .table-row {
   display: flex;
-  padding: 15px 0;
-  border-bottom: 1px solid #eee;
+  padding: 16px 0;
   align-items: center;
   justify-content: space-between;
-}
-.reports-list {
-  // max-height: 600px;
-  // overflow-y: auto;
-}
-.column {
-  &.file-name {
-    width: 25%;
-  }
-  &.date {
-    width: 25%;
+  position: relative;
+  border-radius: 8px;
+  &:hover {
+    background: #fff8fb;
   }
 
+  &:last-child {
+    border-bottom: none;
+  }
+
+  &:nth-child(even) {
+    margin: 4px 0;
+  }
+}
+
+.reports-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.column {
+  &.file-name {
+    width: 420px;
+    padding: 4px 16px;
+    font-family: "PingFang SC", sans-serif;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 1.375em;
+    letter-spacing: 3%;
+    color: #455363;
+    text-align: left;
+  }
+  &.date {
+    flex: 1;
+    padding: 4px 16px;
+    font-family: "PingFang SC", sans-serif;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 1.375em;
+    letter-spacing: 3%;
+    color: #455363;
+    text-align: left;
+  }
   &.download {
-    width: 25%;
-    text-align: right;
-    margin-right: 50px;
+    width: 152px;
+    padding: 4px 16px;
+    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
 }
 
@@ -310,11 +621,22 @@ const annualReports = ref([
 }
 
 .download-link {
-  color: #0078d7;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 23px;
+  height: 22px;
+  border-radius: 4px;
   text-decoration: none;
 
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+
   &:hover {
-    text-decoration: underline;
+    background: #fff8fb;
   }
 }
 
@@ -331,4 +653,158 @@ const annualReports = ref([
     text-decoration: underline;
   }
 }
+
+// 分页器样式
+.pagination-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 30px;
+  gap: 21px;
+}
+
+.pagination-info {
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 1.4375em;
+  color: #455363;
+  text-align: right;
+}
+
+.pagination-controls {
+  display: flex;
+  align-items: center;
+  gap: 21px;
+}
+
+.pagination-buttons {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.page-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: 1px solid #e0e0e6;
+  border-radius: 3px;
+  background: #ffffff;
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 1.428em;
+  color: #455363;
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  &:hover:not(:disabled) {
+    border-color: #ff7bac;
+    color: #ff7bac;
+  }
+
+  &.active {
+    border-color: #ff7bac;
+    color: #ff7bac;
+    background: #fff0f5;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+}
+
+.page-size-selector {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 18px;
+  padding: 4px 12px;
+  height: 28px;
+  border: 1px solid #e0e0e6;
+  border-radius: 3px;
+  background: #ffffff;
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 1.428em;
+  color: #455363;
+  cursor: pointer;
+
+  &:hover {
+    border-color: #ff7bac;
+  }
+}
+
+.page-size-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  background: #ffffff;
+  border: 1px solid #e0e0e6;
+  border-radius: 3px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  z-index: 1000;
+  margin-top: 2px;
+}
+
+.page-size-option {
+  padding: 8px 12px;
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 1.428em;
+  color: #455363;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+
+  &:hover {
+    background: #fff0f5;
+  }
+
+  &.active {
+    background: #fff0f5;
+    color: #ff7bac;
+  }
+}
+
+.goto-section {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 1.428em;
+  color: #455363;
+}
+
+.goto-input {
+  width: 60px;
+  height: 28px;
+  padding: 4px 12px;
+  border: 1px solid #e0e0e6;
+  border-radius: 3px;
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 1.428em;
+  color: #455363;
+  text-align: center;
+
+  &:focus {
+    outline: none;
+    border-color: #ff7bac;
+  }
+}
 </style>
diff --git a/src/views/financialinformation/quarterlyreports/size1440/index.vue b/src/views/financialinformation/quarterlyreports/size1440/index.vue
index baaf40f..3f3b57f 100644
--- a/src/views/financialinformation/quarterlyreports/size1440/index.vue
+++ b/src/views/financialinformation/quarterlyreports/size1440/index.vue
@@ -1,6 +1,6 @@
 <template>
   <header></header>
-  <main class="p-[35px] max-w-[1200px] mx-auto">
+  <main class="mx-auto">
     <div class="title mb-[20px]">
       {{ t("financialinformation.quarterlyreports.title") }}
     </div>
diff --git a/src/views/financialinformation/quarterlyreports/size1920/index.vue b/src/views/financialinformation/quarterlyreports/size1920/index.vue
index df42f33..e0a7e11 100644
--- a/src/views/financialinformation/quarterlyreports/size1920/index.vue
+++ b/src/views/financialinformation/quarterlyreports/size1920/index.vue
@@ -1,40 +1,145 @@
 <template>
   <header></header>
-  <main class="p-[35px] max-w-[1200px] mx-auto">
-    <div class="title mb-[20px]">
-      {{ t("financialinformation.quarterlyreports.title") }}
-    </div>
-    <div class="search-container">
-      <input
-        type="text"
-        :placeholder="
-          t('financialinformation.quarterlyreports.search.placeholder')
-        "
-        v-model="searchQuery"
-        class="search-input"
-      />
-      <button class="search-button" @click="handleSearch">
-        {{ t("financialinformation.quarterlyreports.search.button") }}
-      </button>
-    </div>
-
-    <div class="results-list">
-      <div
-        v-for="(item, index) in filteredList"
-        :key="index"
-        class="result-item"
-      >
-        <div class="content">
-          <p class="result-title subtitle">{{ item.title }}</p>
-          <p class="result-description content-text">{{ item.description }}</p>
+  <main class="page-container">
+    <div class="financials-container">
+      <!-- 标题区域 -->
+      <div class="title-section">
+        <div class="title-decoration"></div>
+        <div class="financials-title">
+          {{ t("financialinformation.quarterlyreports.title") }}
         </div>
-        <div
-          class="pdf-icon"
-          @click="downloadPdf(item.url)"
-          style="color: #2979ff; cursor: pointer"
-        >
-          <img src="@/assets/image/pdf.png" alt="PDF" />
-          {{ t("financialinformation.quarterlyreports.download") }}
+      </div>
+
+      <!-- 搜索区域 -->
+      <div class="search-container">
+        <input
+          type="text"
+          :placeholder="
+            t('financialinformation.quarterlyreports.search.placeholder')
+          "
+          v-model="searchQuery"
+          class="search-input"
+        />
+        <button class="search-button" @click="handleSearch">
+          {{ t("financialinformation.quarterlyreports.search.button") }}
+        </button>
+      </div>
+
+      <!-- 报告列表 -->
+      <div class="reports-table">
+        <div class="reports-list">
+          <div
+            v-for="(item, index) in pagedList"
+            :key="index"
+            class="table-row"
+          >
+            <div class="content">
+              <div class="file-content">
+                <div class="file-info">
+                  <div class="vertical-line"></div>
+                  <p class="file-title">{{ item.title }}</p>
+                </div>
+                <p class="file-description">{{ item.description }}</p>
+              </div>
+              <div class="download-section">
+                <p class="download-text" @click="downloadPdf(item.url)">
+                  PDF Download
+                </p>
+              </div>
+            </div>
+            <div class="separator-line"></div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 分页器 -->
+      <div class="pagination-container">
+        <div class="pagination-info">
+          Displaying {{ displayRange.start }} - {{ displayRange.end }} of
+          {{ state.total }} results
+        </div>
+        <div class="pagination-controls">
+          <div class="pagination-buttons">
+            <button
+              class="page-btn prev-btn"
+              :disabled="state.currentPage === 1"
+              @click="goToPrevPage"
+            >
+              <svg width="5" height="9" viewBox="0 0 5 9" fill="none">
+                <path
+                  d="M4 1L1 4.5L4 8"
+                  stroke="#455363"
+                  stroke-width="1.5"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+              </svg>
+            </button>
+
+            <!-- 动态生成页码按钮 -->
+            <template v-for="page in getVisiblePages()" :key="page">
+              <button
+                v-if="page !== '...'"
+                class="page-btn"
+                :class="{ active: page === state.currentPage }"
+                @click="goToPage(page)"
+              >
+                {{ page }}
+              </button>
+              <button v-else class="page-btn disabled" disabled>...</button>
+            </template>
+
+            <button
+              class="page-btn next-btn"
+              :disabled="state.currentPage === totalPages"
+              @click="goToNextPage"
+            >
+              <svg width="5" height="9" viewBox="0 0 5 9" fill="none">
+                <path
+                  d="M1 1L4 4.5L1 8"
+                  stroke="#455363"
+                  stroke-width="1.5"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+              </svg>
+            </button>
+          </div>
+          <div class="page-size-selector" @click="togglePageSizeMenu">
+            <span>{{ state.pageSize }}/page</span>
+            <svg width="10" height="5" viewBox="0 0 10 5" fill="none">
+              <path
+                d="M1 1L5 4L9 1"
+                stroke="#455363"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+            <!-- 页面大小选择菜单 -->
+            <div v-if="showPageSizeMenu" class="page-size-menu">
+              <div
+                v-for="size in [10, 20, 50]"
+                :key="size"
+                class="page-size-option"
+                :class="{ active: state.pageSize === size }"
+                @click="changePageSize(size)"
+              >
+                {{ size }}/page
+              </div>
+            </div>
+          </div>
+          <div class="goto-section">
+            <span>Goto</span>
+            <input
+              type="number"
+              v-model="state.gotoPage"
+              class="goto-input"
+              :min="1"
+              :max="totalPages"
+              @keyup.enter="handleGoto"
+            />
+          </div>
         </div>
       </div>
     </div>
@@ -42,71 +147,19 @@
   <footer></footer>
 </template>
 <script setup>
-import { ref, watch, onMounted, computed, reactive } from "vue";
+import { ref, watch, onMounted, onUnmounted, computed, reactive } from "vue";
 import { useI18n } from "vue-i18n";
 import quarterlyPdf2025Q2 from "@/assets/file/quarterly/10Q 2025-Q2.pdf";
-import quarterlyPdf2025Q1 from "@/assets/file/quarterly/10Q 2025-Q1.pdf";
-import quarterlyPdf2024Q3 from "@/assets/file/quarterly/10Q 2024-Q3.pdf";
-import quarterlyPdf2024Q2 from "@/assets/file/quarterly/10Q 2024-Q2.pdf";
-import quarterlyPdf2024Q1 from "@/assets/file/quarterly/10Q 2024-Q1.pdf";
-import quarterlyPdf2023Q3 from "@/assets/file/quarterly/10Q 2023-Q3.pdf";
-import quarterlyPdf2023Q2 from "@/assets/file/quarterly/10Q 2023-Q2.pdf";
-import quarterlyPdf2023Q1 from "@/assets/file/quarterly/10Q 2023-Q1.pdf";
-import quarterlyPdf2022Q3 from "@/assets/file/quarterly/10Q 2022-Q3.pdf";
-import quarterlyPdf2022Q2 from "@/assets/file/quarterly/10Q 2022-Q2.pdf";
-import quarterlyPdf2022Q1 from "@/assets/file/quarterly/10Q 2022-Q1.pdf";
-import quarterlyPdf2021Q3 from "@/assets/file/quarterly/10Q 2021-Q3.pdf";
-import quarterlyPdf2021Q2 from "@/assets/file/quarterly/10Q 2021-Q2.pdf";
-import quarterlyPdf2021Q1 from "@/assets/file/quarterly/10Q 2021-Q1.pdf";
-import quarterlyPdf2020Q3 from "@/assets/file/quarterly/10Q 2020-Q3.pdf";
-import quarterlyPdf2020Q2 from "@/assets/file/quarterly/10Q 2020-Q2.pdf";
-import quarterlyPdf2020Q1 from "@/assets/file/quarterly/10Q 2020-Q1.pdf";
-import quarterlyPdf2019Q3 from "@/assets/file/quarterly/10Q 2019-Q3.pdf";
-import quarterlyPdf2019Q2 from "@/assets/file/quarterly/10Q 2019-Q2.pdf";
-import quarterlyPdf2019Q1 from "@/assets/file/quarterly/10Q 2019-Q1.pdf";
-import quarterlyPdf2018Q3 from "@/assets/file/quarterly/10Q 2018-Q3.pdf";
-import quarterlyPdf2018Q2 from "@/assets/file/quarterly/10Q 2018-Q2.pdf";
-import quarterlyPdf2018Q1 from "@/assets/file/quarterly/10Q 2018-Q1.pdf";
-import quarterlyPdf2017Q3 from "@/assets/file/quarterly/10Q 2017-Q3.pdf";
-import quarterlyPdf2017Q2 from "@/assets/file/quarterly/10Q 2017-Q2.pdf";
-import quarterlyPdf2017Q1 from "@/assets/file/quarterly/10Q 2017-Q1.pdf";
-import quarterlyPdf2016Q3 from "@/assets/file/quarterly/10Q 2016-Q3.pdf";
-import quarterlyPdf2016Q2 from "@/assets/file/quarterly/10Q 2016-Q2.pdf";
-import quarterlyPdf2016Q1 from "@/assets/file/quarterly/10Q 2016-Q1.pdf";
-import quarterlyPdf2015Q3 from "@/assets/file/quarterly/10Q 2015-Q3.pdf";
-import quarterlyPdf2015Q2 from "@/assets/file/quarterly/10Q 2015-Q2.pdf";
-import quarterlyPdf2015Q1 from "@/assets/file/quarterly/10Q 2015-Q1.pdf";
-import quarterlyPdf2014Q3 from "@/assets/file/quarterly/10Q 2014-Q3.pdf";
-import quarterlyPdf2014Q2 from "@/assets/file/quarterly/10Q 2014-Q2.pdf";
-import quarterlyPdf2014Q1 from "@/assets/file/quarterly/10Q 2014-Q1.pdf";
-import quarterlyPdf2013Q3 from "@/assets/file/quarterly/10Q 2013-Q3.pdf";
-import quarterlyPdf2013Q2 from "@/assets/file/quarterly/10Q 2013-Q2.pdf";
-import quarterlyPdf2013Q1 from "@/assets/file/quarterly/10Q 2013-Q1.pdf";
-import quarterlyPdf2012Q3 from "@/assets/file/quarterly/10Q 2012-Q3.pdf";
-import quarterlyPdf2012Q2 from "@/assets/file/quarterly/10Q 2012-Q2.pdf";
-import quarterlyPdf2012Q1 from "@/assets/file/quarterly/10Q 2012-Q1.pdf";
-import quarterlyPdf2011Q3 from "@/assets/file/quarterly/10Q 2011-Q3.pdf";
-import quarterlyPdf2011Q2 from "@/assets/file/quarterly/10Q 2011-Q2.pdf";
-import quarterlyPdf2011Q1 from "@/assets/file/quarterly/10Q 2011-Q1.pdf";
-import quarterlyPdf2010Q3 from "@/assets/file/quarterly/10Q 2010-Q3.pdf";
-import quarterlyPdf2010Q2 from "@/assets/file/quarterly/10Q 2010-Q2.pdf";
-import quarterlyPdf2010Q1 from "@/assets/file/quarterly/10Q 2010-Q1.pdf";
-import quarterlyPdf2009Q3 from "@/assets/file/quarterly/10Q 2009-Q3.pdf";
-import quarterlyPdf2016Q3A from "@/assets/file/quarterly/10Q 2016-Q3s.pdf";
-import quarterlyPdf2020Q2A from "@/assets/file/quarterly/10Q 2020-Q2s.pdf";
-import quarterlyPdf2020Q3A from "@/assets/file/quarterly/10Q 2020-Q3s.pdf";
-import quarterlyPdf2022Q1A from "@/assets/file/quarterly/10Q 2022-Q1s.pdf";
-import quarterlyPdf2022Q2A from "@/assets/file/quarterly/10Q 2022-Q2s.pdf";
-import quarterlyPdf2022Q3A from "@/assets/file/quarterly/10Q 2022-Q3s.pdf";
-import quarterlyPdf2024Q1A from "@/assets/file/quarterly/10Q 2024-Q1s.pdf";
-import quarterlyPdf2024Q2A from "@/assets/file/quarterly/10Q 2024-Q2s.pdf";
-import quarterlyPdf2024Q3A from "@/assets/file/quarterly/10Q 2024-Q3s.pdf";
 import quarterlyPdf2025Q3N from "@/assets/file/quarterly/10Q 2025-Q1-No1.pdf";
 
 const { t } = useI18n();
 const searchQuery = ref("");
 
 const state = reactive({
+  currentPage: 1,
+  pageSize: 10,
+  total: 0,
+  gotoPage: 1,
   list: [
     {
       title: "2025 Q2 Quarterly Report",
@@ -118,292 +171,18 @@ const state = reactive({
       description: "First Quarter 2025 Financial Results",
       url: quarterlyPdf2025Q3N,
     },
-    {
-      title: "2025 Q1 Quarterly Report",
-      description: "First Quarter 2025 Financial Results",
-      url: quarterlyPdf2025Q1,
-    },
-    {
-      title: "2024 Q3 Quarterly Report Amendment",
-      description: "Third Quarter 2024 Financial Results",
-      url: quarterlyPdf2024Q3A,
-    },
-    {
-      title: "2024 Q3 Quarterly Report",
-      description: "Third Quarter 2024 Financial Results",
-      url: quarterlyPdf2024Q3,
-    },
-    {
-      title: "2024 Q2 Quarterly Report Amendment",
-      description: "Second Quarter 2024 Financial Results",
-      url: quarterlyPdf2024Q2A,
-    },
-    {
-      title: "2024 Q2 Quarterly Report",
-      description: "Second Quarter 2024 Financial Results",
-      url: quarterlyPdf2024Q2,
-    },
-    {
-      title: "2024 Q1 Quarterly Report Amendment",
-      description: "First Quarter 2024 Financial Results",
-      url: quarterlyPdf2024Q1A,
-    },
-    {
-      title: "2024 Q1 Quarterly Report",
-      description: "First Quarter 2024 Financial Results",
-      url: quarterlyPdf2024Q1,
-    },
-    {
-      title: "2023 Q3 Quarterly Report",
-      description: "Third Quarter 2023 Financial Results",
-      url: quarterlyPdf2023Q3,
-    },
-    {
-      title: "2023 Q2 Quarterly Report",
-      description: "Second Quarter 2023 Financial Results",
-      url: quarterlyPdf2023Q2,
-    },
-    {
-      title: "2023 Q1 Quarterly Report",
-      description: "First Quarter 2023 Financial Results",
-      url: quarterlyPdf2023Q1,
-    },
-    {
-      title: "2022 Q3 Quarterly Report Amendment",
-      description: "Third Quarter 2022 Financial Results",
-      url: quarterlyPdf2022Q3A,
-    },
-    {
-      title: "2022 Q3 Quarterly Report",
-      description: "Third Quarter 2022 Financial Results",
-      url: quarterlyPdf2022Q3,
-    },
-    {
-      title: "2022 Q2 Quarterly Report Amendment",
-      description: "Second Quarter 2022 Financial Results",
-      url: quarterlyPdf2022Q2A,
-    },
-    {
-      title: "2022 Q2 Quarterly Report",
-      description: "Second Quarter 2022 Financial Results",
-      url: quarterlyPdf2022Q2,
-    },
-    {
-      title: "2022 Q1 Quarterly Report Amendment No.1",
-      description: "First Quarter 2022 Financial Results",
-      url: quarterlyPdf2022Q1A,
-    },
-
-    {
-      title: "2022 Q1 Quarterly Report",
-      description: "First Quarter 2022 Financial Results",
-      url: quarterlyPdf2022Q1,
-    },
-    {
-      title: "2021 Q3 Quarterly Report",
-      description: "Third Quarter 2021 Financial Results",
-      url: quarterlyPdf2021Q3,
-    },
-    {
-      title: "2021 Q2 Quarterly Report",
-      description: "Second Quarter 2021 Financial Results",
-      url: quarterlyPdf2021Q2,
-    },
-    {
-      title: "2021 Q1 Quarterly Report",
-      description: "First Quarter 2021 Financial Results",
-      url: quarterlyPdf2021Q1,
-    },
-    {
-      title: "2020 Q3 Quarterly Report Amendment No.1",
-      description: "Third Quarter 2020 Financial Results",
-      url: quarterlyPdf2020Q3A,
-    },
-    {
-      title: "2020 Q3 Quarterly Report",
-      description: "Third Quarter 2020 Financial Results",
-      url: quarterlyPdf2020Q3,
-    },
-    {
-      title: "2020 Q2 Quarterly Report Amendment No.1",
-      description: "Second Quarter 2020 Financial Results",
-      url: quarterlyPdf2020Q2A,
-    },
-    {
-      title: "2020 Q2 Quarterly Report",
-      description: "Second Quarter 2020 Financial Results",
-      url: quarterlyPdf2020Q2,
-    },
-
-    {
-      title: "2020 Q1 Quarterly Report",
-      description: "First Quarter 2020 Financial Results",
-      url: quarterlyPdf2020Q1,
-    },
-    {
-      title: "2019 Q3 Quarterly Report",
-      description: "Third Quarter 2019 Financial Results",
-      url: quarterlyPdf2019Q3,
-    },
-    {
-      title: "2019 Q2 Quarterly Report",
-      description: "Second Quarter 2019 Financial Results",
-      url: quarterlyPdf2019Q2,
-    },
-    {
-      title: "2019 Q1 Quarterly Report",
-      description: "First Quarter 2019 Financial Results",
-      url: quarterlyPdf2019Q1,
-    },
-    {
-      title: "2018 Q3 Quarterly Report",
-      description: "Third Quarter 2018 Financial Results",
-      url: quarterlyPdf2018Q3,
-    },
-    {
-      title: "2018 Q2 Quarterly Report",
-      description: "Second Quarter 2018 Financial Results",
-      url: quarterlyPdf2018Q2,
-    },
-    {
-      title: "2018 Q1 Quarterly Report",
-      description: "First Quarter 2018 Financial Results",
-      url: quarterlyPdf2018Q1,
-    },
-    {
-      title: "2017 Q3 Quarterly Report",
-      description: "Third Quarter 2017 Financial Results",
-      url: quarterlyPdf2017Q3,
-    },
-    {
-      title: "2017 Q2 Quarterly Report",
-      description: "Second Quarter 2017 Financial Results",
-      url: quarterlyPdf2017Q2,
-    },
-    {
-      title: "2017 Q1 Quarterly Report",
-      description: "First Quarter 2017 Financial Results",
-      url: quarterlyPdf2017Q1,
-    },
-    {
-      title: "2016 Q3 Quarterly Report Amendment No.1",
-      description: "Third Quarter 2016 Financial Results",
-      url: quarterlyPdf2016Q3A,
-    },
-    {
-      title: "2016 Q3 Quarterly Report",
-      description: "Third Quarter 2016 Financial Results",
-      url: quarterlyPdf2016Q3,
-    },
-    {
-      title: "2016 Q2 Quarterly Report",
-      description: "Second Quarter 2016 Financial Results",
-      url: quarterlyPdf2016Q2,
-    },
-    {
-      title: "2016 Q1 Quarterly Report",
-      description: "First Quarter 2016 Financial Results",
-      url: quarterlyPdf2016Q1,
-    },
-    {
-      title: "2015 Q3 Quarterly Report",
-      description: "Third Quarter 2015 Financial Results",
-      url: quarterlyPdf2015Q3,
-    },
-    {
-      title: "2015 Q2 Quarterly Report",
-      description: "Second Quarter 2015 Financial Results",
-      url: quarterlyPdf2015Q2,
-    },
-    {
-      title: "2015 Q1 Quarterly Report",
-      description: "First Quarter 2015 Financial Results",
-      url: quarterlyPdf2015Q1,
-    },
-    {
-      title: "2014 Q3 Quarterly Report",
-      description: "Third Quarter 2014 Financial Results",
-      url: quarterlyPdf2014Q3,
-    },
-    {
-      title: "2014 Q2 Quarterly Report",
-      description: "Second Quarter 2014 Financial Results",
-      url: quarterlyPdf2014Q2,
-    },
-    {
-      title: "2014 Q1 Quarterly Report",
-      description: "First Quarter 2014 Financial Results",
-      url: quarterlyPdf2014Q1,
-    },
-    {
-      title: "2013 Q3 Quarterly Report",
-      description: "Third Quarter 2013 Financial Results",
-      url: quarterlyPdf2013Q3,
-    },
-    {
-      title: "2013 Q2 Quarterly Report",
-      description: "Second Quarter 2013 Financial Results",
-      url: quarterlyPdf2013Q2,
-    },
-    {
-      title: "2013 Q1 Quarterly Report",
-      description: "First Quarter 2013 Financial Results",
-      url: quarterlyPdf2013Q1,
-    },
-    {
-      title: "2012 Q3 Quarterly Report",
-      description: "Third Quarter 2012 Financial Results",
-      url: quarterlyPdf2012Q3,
-    },
-    {
-      title: "2012 Q2 Quarterly Report",
-      description: "Second Quarter 2012 Financial Results",
-      url: quarterlyPdf2012Q2,
-    },
-    {
-      title: "2012 Q1 Quarterly Report",
-      description: "First Quarter 2012 Financial Results",
-      url: quarterlyPdf2012Q1,
-    },
-    {
-      title: "2011 Q3 Quarterly Report",
-      description: "Third Quarter 2011 Financial Results",
-      url: quarterlyPdf2011Q3,
-    },
-    {
-      title: "2011 Q2 Quarterly Report",
-      description: "Second Quarter 2011 Financial Results",
-      url: quarterlyPdf2011Q2,
-    },
-    {
-      title: "2011 Q1 Quarterly Report",
-      description: "First Quarter 2011 Financial Results",
-      url: quarterlyPdf2011Q1,
-    },
-    {
-      title: "2010 Q3 Quarterly Report",
-      description: "Third Quarter 2010 Financial Results",
-      url: quarterlyPdf2010Q3,
-    },
-    {
-      title: "2010 Q2 Quarterly Report",
-      description: "Second Quarter 2010 Financial Results",
-      url: quarterlyPdf2010Q2,
-    },
-    {
-      title: "2010 Q1 Quarterly Report",
-      description: "First Quarter 2010 Financial Results",
-      url: quarterlyPdf2010Q1,
-    },
-    {
-      title: "2009 Q3 Quarterly Report",
-      description: "Third Quarter 2009 Financial Results",
-      url: quarterlyPdf2009Q3,
-    },
   ],
 });
 
-onMounted(async () => {});
+const showPageSizeMenu = ref(false);
+
+onMounted(() => {
+  document.addEventListener("click", handleClickOutside);
+});
+
+onUnmounted(() => {
+  document.removeEventListener("click", handleClickOutside);
+});
 const filteredList = computed(() => {
   if (!searchQuery.value) return state.list;
   const query = searchQuery.value.toLowerCase();
@@ -414,6 +193,26 @@ const filteredList = computed(() => {
   );
 });
 
+// 分页后的列表
+const pagedList = computed(() => {
+  const start = (state.currentPage - 1) * state.pageSize;
+  const end = start + state.pageSize;
+  return filteredList.value.slice(start, end);
+});
+
+// 总页数
+const totalPages = computed(() => {
+  return Math.ceil(state.total / state.pageSize) || 1;
+});
+
+// 显示范围
+const displayRange = computed(() => {
+  if (state.total === 0) return { start: 0, end: 0 };
+  const start = (state.currentPage - 1) * state.pageSize + 1;
+  const end = Math.min(state.currentPage * state.pageSize, state.total);
+  return { start, end };
+});
+
 const handleSearch = () => {
   // 搜索处理逻辑
   // console.log("搜索:", searchQuery.value);
@@ -444,80 +243,463 @@ const downloadPdf = async (pdfResource, filename = "") => {
     // console.error("下载PDF文件失败:", error);
   }
 };
+
+// 分页方法
+const goToPage = (page) => {
+  if (page >= 1 && page <= totalPages.value) {
+    state.currentPage = page;
+  }
+};
+
+const goToPrevPage = () => {
+  if (state.currentPage > 1) {
+    state.currentPage--;
+  }
+};
+
+const goToNextPage = () => {
+  if (state.currentPage < totalPages.value) {
+    state.currentPage++;
+  }
+};
+
+const changePageSize = (size) => {
+  state.pageSize = size;
+  state.currentPage = 1;
+};
+
+const handleGoto = () => {
+  const page = parseInt(state.gotoPage);
+  if (page >= 1 && page <= totalPages.value) {
+    state.currentPage = page;
+  }
+};
+
+const togglePageSizeMenu = () => {
+  showPageSizeMenu.value = !showPageSizeMenu.value;
+};
+
+const getVisiblePages = () => {
+  const current = state.currentPage;
+  const total = totalPages.value;
+  const pages = [];
+
+  if (total <= 7) {
+    for (let i = 1; i <= total; i++) {
+      pages.push(i);
+    }
+  } else {
+    pages.push(1);
+
+    if (current <= 4) {
+      for (let i = 2; i <= 5; i++) {
+        pages.push(i);
+      }
+      pages.push("...");
+      pages.push(total);
+    } else if (current >= total - 3) {
+      pages.push("...");
+      for (let i = total - 4; i <= total; i++) {
+        pages.push(i);
+      }
+    } else {
+      pages.push("...");
+      for (let i = current - 1; i <= current + 1; i++) {
+        pages.push(i);
+      }
+      pages.push("...");
+      pages.push(total);
+    }
+  }
+
+  return pages;
+};
+
+// 监听同步
+watch(
+  () => state.pageSize,
+  () => {
+    state.currentPage = 1;
+  }
+);
+
+watch(
+  () => state.currentPage,
+  (newPage) => {
+    state.gotoPage = newPage;
+  }
+);
+
+watch(
+  () => filteredList.value,
+  (newList) => {
+    state.total = newList.length;
+    state.currentPage = 1;
+  },
+  { immediate: true }
+);
+
+// 点击外部关闭页面大小选择菜单
+const handleClickOutside = (event) => {
+  if (!event.target.closest || !event.target.closest(".page-size-selector")) {
+    showPageSizeMenu.value = false;
+  }
+};
 </script>
 <style scoped lang="scss">
-.title {
+.page-container {
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.financials-container {
+  max-width: 932px;
+  margin: 0 auto;
+}
+
+.title-section {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  margin-bottom: 32px;
+  padding: 0 16px;
+}
+
+.title-decoration {
+  width: 58px;
+  height: 7px;
+  background: #ff7bac;
+  margin: auto 0;
+  margin-top: 43px;
+}
+
+.financials-title {
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 500;
   font-size: 40px;
-  color: #333;
-}
-.subtitle {
-  font-size: 18px;
-  font-weight: 600;
-  color: #333;
-}
-.content-text {
-  font-size: 16px;
+  line-height: 1.4em;
+  letter-spacing: 3%;
+  color: #000000;
 }
+
 .search-container {
   margin-bottom: 20px;
   display: flex;
   align-items: center;
+  gap: 32px;
+  padding: 0 16px;
 }
 
 .search-input {
-  padding: 8px 12px;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  width: 240px;
-  margin-right: 10px;
+  flex: 1;
+  height: 34px;
+  padding: 7px 12px;
+  border: 1px solid #e0e0e6;
+  border-radius: 3px;
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 1.375em;
+  letter-spacing: 3%;
+  color: #455363;
+
+  &::placeholder {
+    color: #b6b6b6;
+  }
 }
 
 .search-button {
-  padding: 8px 16px;
+  height: 34px;
+  padding: 7px 12px;
   color: #fff;
   background-color: #ff7bac;
-  border: 1px solid #ccc;
-  border-radius: 4px;
+  border: none;
+  border-radius: 3px;
   cursor: pointer;
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 1.375em;
+  letter-spacing: 3%;
+  min-width: 201px;
 }
 
-.results-list {
-  padding-right: 20px;
-  margin-top: 20px;
-  max-height: 1200px;
-  overflow-y: auto;
+.reports-table {
+  width: 100%;
+  background: #ffffff;
+  margin-bottom: 20px;
 }
 
-.result-item {
+.reports-list {
   display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 15px 0;
-  border-bottom: 1px solid #eee;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.table-row {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  border-radius: 8px;
+
+  &:last-child {
+    .separator-line {
+      display: none;
+    }
+  }
+
+  &:nth-child(even) {
+    margin: 4px 0;
+  }
 }
 
 .content {
   flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
 }
 
-.result-title {
-  color: #0078d7;
-  text-decoration: none;
-  display: block;
-  margin-bottom: 5px;
+.table-row .content {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0;
+  &:hover {
+    background: #fff8fb;
+  }
 }
 
-.result-description {
-  color: #666;
+.file-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.file-info {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.vertical-line {
+  width: 1px;
+  height: 20px;
+  background: #ff7bac;
+  flex-shrink: 0;
+}
+
+.file-title {
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 1.375em;
+  letter-spacing: 3%;
+  color: #000000;
   margin: 0;
 }
 
-.pdf-icon {
-  margin-left: 15px;
+.file-description {
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 1.375em;
+  letter-spacing: 3%;
+  color: #455363;
+  margin: 0;
+  padding-left: 16px;
+  margin-top: 8px;
+}
 
-  img {
-    width: 24px;
-    height: 24px;
+.download-section {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 152px;
+  padding: 4px 16px;
+}
+
+.download-text {
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 1.375em;
+  letter-spacing: 3%;
+  color: #ff7bac;
+  cursor: pointer;
+  margin: 0;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.separator-line {
+  width: 100%;
+  height: 1px;
+  background: repeating-linear-gradient(
+    to right,
+    #e0e0e6 0px,
+    #e0e0e6 4px,
+    transparent 4px,
+    transparent 8px
+  );
+  margin-top: 16px;
+}
+
+// 分页器样式
+.pagination-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 30px;
+  gap: 21px;
+}
+
+.pagination-info {
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 1.4375em;
+  color: #455363;
+  text-align: right;
+}
+
+.pagination-controls {
+  display: flex;
+  align-items: center;
+  gap: 21px;
+}
+
+.pagination-buttons {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.page-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: 1px solid #e0e0e6;
+  border-radius: 3px;
+  background: #ffffff;
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 1.428em;
+  color: #455363;
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  &:hover:not(:disabled) {
+    border-color: #ff7bac;
+    color: #ff7bac;
+  }
+
+  &.active {
+    border-color: #ff7bac;
+    color: #ff7bac;
+    background: #fff0f5;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+}
+
+.page-size-selector {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 18px;
+  padding: 4px 12px;
+  height: 28px;
+  border: 1px solid #e0e0e6;
+  border-radius: 3px;
+  background: #ffffff;
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 1.428em;
+  color: #455363;
+  cursor: pointer;
+
+  &:hover {
+    border-color: #ff7bac;
+  }
+}
+
+.page-size-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  background: #ffffff;
+  border: 1px solid #e0e0e6;
+  border-radius: 3px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  z-index: 1000;
+  margin-top: 2px;
+}
+
+.page-size-option {
+  padding: 8px 12px;
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 1.428em;
+  color: #455363;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+
+  &:hover {
+    background: #fff0f5;
+  }
+
+  &.active {
+    background: #fff0f5;
+    color: #ff7bac;
+  }
+}
+
+.goto-section {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 1.428em;
+  color: #455363;
+}
+
+.goto-input {
+  width: 60px;
+  height: 28px;
+  padding: 4px 12px;
+  border: 1px solid #e0e0e6;
+  border-radius: 3px;
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 1.428em;
+  color: #455363;
+  text-align: center;
+
+  &:focus {
+    outline: none;
+    border-color: #ff7bac;
   }
 }
 </style>
diff --git a/src/views/historic-stock/size1920/index.vue b/src/views/historic-stock/size1920/index.vue
index 6bd75a3..02150cb 100644
--- a/src/views/historic-stock/size1920/index.vue
+++ b/src/views/historic-stock/size1920/index.vue
@@ -1,286 +1,464 @@
 <template>
-  <div class="historic-data-container" style="margin-bottom: 40px;">
-    <!-- <img
-      src="@/assets/image/historic-stock.png"
-      alt="1"
-      style="max-width: 100%; margin: 0 auto;"
-    /> -->
+  <div class="historic-data-container" style="margin-bottom: 40px">
     <div class="echarts-container">
       <customEcharts></customEcharts>
     </div>
-
-    <div class="header mt-[20px]">
-      <div class="title">Historical Data</div>
-      <div class="filter-container">
-        <!-- <n-dropdown
-          trigger="click"
-          :options="periodOptions"
-          @select="handlePeriodChange"
-          :value="state.selectedPeriod"
-        >
-          <n-button>
-            {{ state.selectedPeriod }}
-            <n-icon><chevron-down-outline /></n-icon>
-          </n-button>
-        </n-dropdown> -->
-
-        <n-dropdown
-          trigger="click"
-          :options="durationOptions"
-          @select="handleDurationChange"
-          :value="state.selectedDuration"
-        >
-          <n-button>
-            {{ state.selectedDuration }}
-            <n-icon><chevron-down-outline /></n-icon>
-          </n-button>
-        </n-dropdown>
+    <div class="header">
+      <!-- 标题区域 -->
+      <div class="title-section">
+        <div class="title-decoration"></div>
+        <div class="historic-title">Historical Data</div>
       </div>
     </div>
 
-    <n-data-table
-      :columns="columns"
-      :data="paginatedData"
-      :bordered="false"
-      :single-line="false"
-      :scroll-x="1200"
-    />
+    <div class="filter-container">
+      <span class="range-label">Range</span>
+      <div
+        v-for="option in durationOptions"
+        :key="option.key"
+        class="filter-option"
+        :class="{ active: state.selectedDuration === option.key }"
+        @click="handleDurationChange(option.key)"
+      >
+        {{
+          option.label
+            .replace(" Months", "m")
+            .replace(" Years", "Y")
+            .replace(" Year", "Y")
+            .replace(" to Date", "TD")
+        }}
+      </div>
+    </div>
+    <!-- reports-table from annualreports -->
+    <div class="reports-table">
+      <div class="table-header">
+        <div
+          class="column"
+          v-for="col in columns"
+          :key="col.key"
+          :style="{
+            width: col.width ? col.width + 'px' : 'auto',
+            flex: col.width ? 'none' : 1,
+            'text-align': col.align,
+          }"
+        >
+          {{ col.title }}
+        </div>
+      </div>
+      <div class="reports-list">
+        <div
+          class="table-row"
+          v-for="(row, index) in paginatedData"
+          :key="index"
+        >
+          <div
+            class="column"
+            v-for="col in columns"
+            :key="col.key"
+            :style="{
+              width: col.width ? col.width + 'px' : 'auto',
+              flex: col.width ? 'none' : 1,
+              'text-align': col.align,
+            }"
+          >
+            <span
+              v-if="col.key === 'change'"
+              :style="{
+                color:
+                  parseFloat(row.change) < 0
+                    ? '#cf3050'
+                    : parseFloat(row.change) > 0
+                    ? '#18a058'
+                    : '',
+              }"
+            >
+              {{ row[col.key] }}
+            </span>
+            <span v-else>
+              {{ row[col.key] }}
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
 
+    <!-- pagination-container from annualreports -->
     <div class="pagination-container">
-      <n-button class="page-btn prev-btn" @click="handlePrevPage">
-        <n-icon><chevron-back-outline /></n-icon>
-        Previous
-      </n-button>
-
-      <div class="page-info">
-        Page {{ state.currentPage }} of {{ totalPages }}
+      <div class="pagination-info">
+        Displaying {{ displayRange.start }} - {{ displayRange.end }} of
+        {{ state.tableData.length }} results
       </div>
+      <div class="pagination-controls">
+        <div class="pagination-buttons">
+          <button
+            class="page-btn prev-btn"
+            :disabled="state.currentPage === 1"
+            @click="goToPrevPage"
+          >
+            <svg width="5" height="9" viewBox="0 0 5 9" fill="none">
+              <path
+                d="M4 1L1 4.5L4 8"
+                stroke="#455363"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </button>
 
-      <div class="right-controls">
-        <n-dropdown
-          trigger="click"
-          :options="pageSizeOptions"
-          @select="handlePageSizeChange"
-        >
-          <n-button class="rows-dropdown">
-            {{ state.pageSize }} Rows
-            <n-icon><chevron-down-outline /></n-icon>
-          </n-button>
-        </n-dropdown>
+          <template v-for="page in getVisiblePages()" :key="page">
+            <button
+              v-if="page !== '...'"
+              class="page-btn"
+              :class="{ active: page === state.currentPage }"
+              @click="goToPage(page)"
+            >
+              {{ page }}
+            </button>
+            <button v-else class="page-btn disabled" disabled>...</button>
+          </template>
 
-        <n-button class="page-btn next-btn" @click="handleNextPage">
-          Next
-          <n-icon><chevron-forward-outline /></n-icon>
-        </n-button>
+          <button
+            class="page-btn next-btn"
+            :disabled="state.currentPage === totalPages"
+            @click="goToNextPage"
+          >
+            <svg width="5" height="9" viewBox="0 0 5 9" fill="none">
+              <path
+                d="M1 1L4 4.5L1 8"
+                stroke="#455363"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </button>
+        </div>
+        <div class="page-size-selector" @click="togglePageSizeMenu">
+          <span>{{ state.pageSize }}/page</span>
+          <svg width="10" height="5" viewBox="0 0 10 5" fill="none">
+            <path
+              d="M1 1L5 4L9 1"
+              stroke="#455363"
+              stroke-width="1.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+          <div v-if="showPageSizeMenu" class="page-size-menu">
+            <div
+              v-for="size in [10, 50, 100, 500, 1000]"
+              :key="size"
+              class="page-size-option"
+              :class="{ active: state.pageSize === size }"
+              @click="handlePageSizeChange(size)"
+            >
+              {{ size }}/page
+            </div>
+          </div>
+        </div>
+        <div class="goto-section">
+          <span>Goto</span>
+          <input
+            type="number"
+            v-model="state.gotoPage"
+            class="goto-input"
+            :min="1"
+            :max="totalPages"
+            @keyup.enter="handleGoto"
+          />
+        </div>
       </div>
     </div>
 
-    <div class="back-to-top-link">
+    <!-- <div class="back-to-top-link">
       <a href="#" @click.prevent="scrollToTop">
         Back to Top
         <n-icon><arrow-up-outline /></n-icon>
       </a>
-    </div>
+    </div> -->
   </div>
 </template>
 
 <script setup>
-import { NDataTable, NButton, NDropdown, NIcon } from 'naive-ui'
-import { reactive, onMounted, h, computed } from 'vue'
-import axios from 'axios'
-import {
-  ChevronDownOutline,
-  ChevronBackOutline,
-  ChevronForwardOutline,
-  ArrowUpOutline,
-} from '@vicons/ionicons5'
-import defaultTableData from '../data'
-// console.log('defaultTableData', defaultTableData)
-import customEcharts from '@/components/customEcharts/index.vue'
+import { NDropdown, NIcon } from "naive-ui";
+import { reactive, onMounted, h, computed, ref, watch, onUnmounted } from "vue";
+import axios from "axios";
+import { ChevronDownOutline, ArrowUpOutline } from "@vicons/ionicons5";
+import defaultTableData from "../data";
+import customEcharts from "@/components/customEcharts/index.vue";
 
 // 数据筛选选项
 const periodOptions = [
-  { label: 'Daily', key: 'Daily' },
-  { label: 'Weekly', key: 'Weekly' },
-  { label: 'Monthly', key: 'Monthly' },
-  { label: 'Quarterly', key: 'Quarterly' },
-  { label: 'Annual', key: 'Annual' },
-]
+  { label: "Daily", key: "Daily" },
+  { label: "Weekly", key: "Weekly" },
+  { label: "Monthly", key: "Monthly" },
+  { label: "Quarterly", key: "Quarterly" },
+  { label: "Annual", key: "Annual" },
+];
 
 const durationOptions = [
-  { label: '3 Months', key: '3 Months' },
-  { label: '6 Months', key: '6 Months' },
-  { label: 'Year to Date', key: 'Year to Date' },
-  { label: '1 Year', key: '1 Year' },
-  { label: '5 Years', key: '5 Years' },
-  { label: '10 Years', key: '10 Years' },
-  // { label: 'Full History', key: 'Full History', disabled: true },
-]
+  { label: "3 Months", key: "3 Months" },
+  { label: "6 Months", key: "6 Months" },
+  { label: "YTD", key: "Year to Date" },
+  { label: "1 Year", key: "1 Year" },
+  { label: "5 Years", key: "5 Years" },
+  { label: "10 Years", key: "10 Years" },
+];
 
 // 分页大小选项
 const pageSizeOptions = [
-  { label: '50', key: 50 },
-  { label: '100', key: 100 },
-  { label: '500', key: 500 },
-  { label: '1000', key: 1000 },
-]
+  { label: "10", key: 10 },
+  { label: "50", key: 50 },
+  { label: "100", key: 100 },
+  { label: "500", key: 500 },
+  { label: "1000", key: 1000 },
+];
 
 const state = reactive({
-  selectedPeriod: 'Daily',
-  selectedDuration: '6 Months',
+  selectedPeriod: "Daily",
+  selectedDuration: "6 Months",
   tableData: [],
   currentPage: 1,
-  pageSize: 50,
-})
+  pageSize: 10,
+  gotoPage: 1,
+});
+
+const showPageSizeMenu = ref(false);
 
 // 计算总页数
 const totalPages = computed(() => {
-  return Math.ceil(state.tableData.length / state.pageSize)
-})
+  return Math.ceil(state.tableData.length / state.pageSize);
+});
 
 // 计算当前页的数据
 const paginatedData = computed(() => {
-  const start = (state.currentPage - 1) * state.pageSize
-  const end = start + state.pageSize
-  return state.tableData.slice(start, end)
-})
+  const start = (state.currentPage - 1) * state.pageSize;
+  const end = start + state.pageSize;
+  return state.tableData.slice(start, end);
+});
 
 // 表格列定义
 const columns = [
   {
-    title: 'Date',
-    key: 'date',
-    align: 'left',
-    fixed: 'left',
+    title: "Date",
+    key: "date",
+    align: "left",
+    fixed: "left",
     width: 150,
   },
   {
-    title: 'Open',
-    key: 'open',
-    align: 'center',
+    title: "Open",
+    key: "open",
+    align: "center",
   },
   {
-    title: 'High',
-    key: 'high',
-    align: 'center',
+    title: "High",
+    key: "high",
+    align: "center",
   },
   {
-    title: 'Low',
-    key: 'low',
-    align: 'center',
+    title: "Low",
+    key: "low",
+    align: "center",
   },
   {
-    title: 'Close',
-    key: 'close',
-    align: 'center',
+    title: "Close",
+    key: "close",
+    align: "center",
   },
   {
-    title: 'Adj. Close',
-    key: 'adjClose',
-    align: 'center',
+    title: "Adj. Close",
+    key: "adjClose",
+    align: "center",
+    width: 115,
   },
   {
-    title: 'Change',
-    key: 'change',
-    align: 'center',
-    render(row) {
-      const value = parseFloat(row.change)
-      const color = value < 0 ? '#ff4d4f' : value > 0 ? '#52c41a' : ''
-      return h('span', { style: { color } }, row.change)
-    },
+    title: "Change",
+    key: "change",
+    align: "center",
   },
   {
-    title: 'Volume',
-    key: 'volume',
-    align: 'center',
+    title: "Volume",
+    key: "volume",
+    align: "center",
   },
-]
+];
 
 // 处理下拉选项变更
 const handlePeriodChange = (key) => {
-  state.selectedPeriod = key
-  if (key === 'Annual') {
-    handleDurationChange('Full History')
-    return
+  state.selectedPeriod = key;
+  if (key === "Annual") {
+    handleDurationChange("Full History");
+    return;
   }
-  if (key === 'Monthly') {
-    handleDurationChange('10 Years')
-    return
+  if (key === "Monthly") {
+    handleDurationChange("10 Years");
+    return;
   }
-  if (key === 'Quarterly') {
-    handleDurationChange('10 Years')
-    return
+  if (key === "Quarterly") {
+    handleDurationChange("10 Years");
+    return;
   }
-  getPageData()
-}
+  getPageData();
+};
 
 const handleDurationChange = (key) => {
-  state.selectedDuration = key
-  state.currentPage = 1
-  getPageData()
-}
+  state.selectedDuration = key;
+  state.currentPage = 1;
+  getPageData();
+};
+
+const displayRange = computed(() => {
+  const start = (state.currentPage - 1) * state.pageSize + 1;
+  const end = Math.min(
+    state.currentPage * state.pageSize,
+    state.tableData.length
+  );
+  return { start, end };
+});
+
+const goToPage = (page) => {
+  if (page >= 1 && page <= totalPages.value) {
+    state.currentPage = page;
+  }
+};
+
+const goToPrevPage = () => {
+  if (state.currentPage > 1) {
+    state.currentPage--;
+  }
+};
+
+const goToNextPage = () => {
+  if (state.currentPage < totalPages.value) {
+    state.currentPage++;
+  }
+};
 
 // 处理分页
-const handlePrevPage = () => {
-  if (state.currentPage === 1) {
-    return
-  }
-  state.currentPage--
-}
-
-const handleNextPage = () => {
-  if (state.currentPage >= totalPages.value) {
-    return
-  }
-  state.currentPage++
-}
-
 const handlePageSizeChange = (size) => {
-  state.pageSize = size
-  state.currentPage = 1 // 重置到第一页
-}
+  state.pageSize = size;
+  state.currentPage = 1; // 重置到第一页
+};
+
+const handleGoto = () => {
+  const page = parseInt(state.gotoPage);
+  if (page >= 1 && page <= totalPages.value) {
+    state.currentPage = page;
+  }
+};
+
+const togglePageSizeMenu = () => {
+  showPageSizeMenu.value = !showPageSizeMenu.value;
+};
+
+const getVisiblePages = () => {
+  const current = state.currentPage;
+  const total = totalPages.value;
+  const pages = [];
+
+  if (total <= 7) {
+    // 如果总页数小于等于7，显示所有页码
+    for (let i = 1; i <= total; i++) {
+      pages.push(i);
+    }
+  } else {
+    // 显示第一页
+    pages.push(1);
+
+    if (current <= 4) {
+      // 当前页在前4页
+      for (let i = 2; i <= 5; i++) {
+        pages.push(i);
+      }
+      pages.push("...");
+      pages.push(total);
+    } else if (current >= total - 3) {
+      // 当前页在后4页
+      pages.push("...");
+      for (let i = total - 4; i <= total; i++) {
+        pages.push(i);
+      }
+    } else {
+      // 当前页在中间
+      pages.push("...");
+      for (let i = current - 1; i <= current + 1; i++) {
+        pages.push(i);
+      }
+      pages.push("...");
+      pages.push(total);
+    }
+  }
+
+  return pages;
+};
 
 // 回到顶部
 const scrollToTop = () => {
   // 尝试多种方法
   // 1. 使用document.body
-  document.body.scrollTop = 0
+  document.body.scrollTop = 0;
   // 2. 使用document.documentElement (HTML元素)
-  document.documentElement.scrollTop = 0
+  document.documentElement.scrollTop = 0;
   // 3. 使用scrollIntoView
-  document.querySelector('.historic-data-container').scrollIntoView({
-    behavior: 'smooth',
-    block: 'start',
-  })
-}
+  document.querySelector(".historic-data-container").scrollIntoView({
+    behavior: "smooth",
+    block: "start",
+  });
+};
 onMounted(() => {
-  getPageData()
-})
+  getPageData();
+  document.addEventListener("click", handleClickOutside);
+});
+
+onUnmounted(() => {
+  document.removeEventListener("click", handleClickOutside);
+});
+
+const handleClickOutside = (event) => {
+  if (!event.target.closest(".page-size-selector")) {
+    showPageSizeMenu.value = false;
+  }
+};
+
+watch(
+  () => state.pageSize,
+  () => {
+    state.currentPage = 1;
+  }
+);
+watch(
+  () => state.currentPage,
+  (newPage) => {
+    state.gotoPage = newPage;
+  }
+);
 
 const getPageDefaultData = async () => {
   try {
     let url =
-      'https://stockanalysis.com/api/symbol/a/OTC-MINM/history?period=Daily&range=3M'
-    const res = await axios.get(url)
-    let originalData = res.data.data
+      "https://stockanalysis.com/api/symbol/a/OTC-MINM/history?period=Daily&range=3M";
+    const res = await axios.get(url);
+    let originalData = res.data.data;
 
     // 转换为日期格式："Nov 26, 2024"
     let calcApiData = originalData.map((item) => [
-      new Date(item[0]).toLocaleDateString('en-US', {
-        month: 'short',
-        day: 'numeric',
-        year: 'numeric',
+      new Date(item[0]).toLocaleDateString("en-US", {
+        month: "short",
+        day: "numeric",
+        year: "numeric",
       }),
       item[1],
-    ])
+    ]);
     // console.log('接口数据', calcApiData)
 
     // 使用API数据更新defaultTableData中的close和adjClose值
     const updatedTableData = defaultTableData.map((tableItem) => {
       // 查找对应日期的API数据
       const matchedApiData = calcApiData.find(
-        (apiItem) => apiItem[0] === tableItem.date,
-      )
+        (apiItem) => apiItem[0] === tableItem.date
+      );
 
       if (matchedApiData) {
         // 更新close和adjClose值
@@ -288,172 +466,156 @@ const getPageDefaultData = async () => {
           ...tableItem,
           close: matchedApiData[1].toFixed(2),
           adjClose: matchedApiData[1].toFixed(2),
-        }
+        };
       }
-      return tableItem
-    })
+      return tableItem;
+    });
 
-    state.tableData = updatedTableData
+    state.tableData = updatedTableData;
   } catch (error) {
     // console.error('获取数据失败', error)
   }
-}
+};
 const getPageData = async () => {
-  let range = ''
-  let now = new Date()
-  const last = new Date(now)
-  last.setMonth(now.getMonth() - 6)
-  let fromDate = last
+  let range = "";
+  let now = new Date();
+  const last = new Date(now);
+  last.setMonth(now.getMonth() - 6);
+  let fromDate = last;
   let toDate =
     now.getFullYear() +
-    '-' +
-    String(now.getMonth() + 1).padStart(2, '0') +
-    '-' +
-    String(now.getDate()).padStart(2, '0')
-  if (state.selectedDuration === '3 Months') {
-    range = '3M'
-    const last = new Date(now)
-    last.setMonth(now.getMonth() - 3)
-    fromDate = last
-  } else if (state.selectedDuration === '6 Months') {
-    range = '6M'
-    const last = new Date(now)
-    last.setMonth(now.getMonth() - 6)
-    fromDate = last
-  } else if (state.selectedDuration === 'Year to Date') {
-    range = 'YTD'
-    fromDate = new Date(now.getFullYear(), 0, 1)
-  } else if (state.selectedDuration === '1 Year') {
-    range = '1Y'
-    const last = new Date(now)
-    last.setFullYear(now.getFullYear() - 1)
-    fromDate = last
-  } else if (state.selectedDuration === '5 Years') {
-    range = '5Y'
-    const last = new Date(now)
-    last.setFullYear(now.getFullYear() - 5)
-    fromDate = last
-  } else if (state.selectedDuration === '10 Years') {
-    range = '10Y'
-    const last = new Date(now)
-    last.setFullYear(now.getFullYear() - 10)
-    fromDate = last
-  } else if (state.selectedDuration === 'Full History') {
-    range = 'Max'
-    fromDate = new Date('2009-10-07')
+    "-" +
+    String(now.getMonth() + 1).padStart(2, "0") +
+    "-" +
+    String(now.getDate()).padStart(2, "0");
+  if (state.selectedDuration === "3 Months") {
+    range = "3M";
+    const last = new Date(now);
+    last.setMonth(now.getMonth() - 3);
+    fromDate = last;
+  } else if (state.selectedDuration === "6 Months") {
+    range = "6M";
+    const last = new Date(now);
+    last.setMonth(now.getMonth() - 6);
+    fromDate = last;
+  } else if (state.selectedDuration === "Year to Date") {
+    range = "YTD";
+    fromDate = new Date(now.getFullYear(), 0, 1);
+  } else if (state.selectedDuration === "1 Year") {
+    range = "1Y";
+    const last = new Date(now);
+    last.setFullYear(now.getFullYear() - 1);
+    fromDate = last;
+  } else if (state.selectedDuration === "5 Years") {
+    range = "5Y";
+    const last = new Date(now);
+    last.setFullYear(now.getFullYear() - 5);
+    fromDate = last;
+  } else if (state.selectedDuration === "10 Years") {
+    range = "10Y";
+    const last = new Date(now);
+    last.setFullYear(now.getFullYear() - 10);
+    fromDate = last;
+  } else if (state.selectedDuration === "Full History") {
+    range = "Max";
+    fromDate = new Date("2009-10-07");
   }
   let finalFromDate =
     fromDate.getFullYear() +
-    '-' +
-    String(fromDate.getMonth() + 1).padStart(2, '0') +
-    '-' +
-    String(fromDate.getDate()).padStart(2, '0')
-  // let url = `https://stockanalysis.com/api/symbol/a/OTC-MINM/history?period=${state.selectedPeriod}&range=${range}`
+    "-" +
+    String(fromDate.getMonth() + 1).padStart(2, "0") +
+    "-" +
+    String(fromDate.getDate()).padStart(2, "0");
   let url =
-    'https://common.szjixun.cn/api/stock/history/list?from=' +
+    "https://common.szjixun.cn/api/stock/history/list?from=" +
     finalFromDate +
-    '&to=' +
-    toDate
-  const res = await axios.get(url)
-  // console.error(res)
+    "&to=" +
+    toDate;
+  const res = await axios.get(url);
   if (res.status === 200) {
     if (res.data.status === 0) {
       // 转换为日期格式："Nov 26, 2024"
       let resultData = res.data.data.map((item) => {
         return {
-          date: new Date(item.date).toLocaleDateString('en-US', {
-            month: 'short',
-            day: 'numeric',
-            year: 'numeric',
+          date: new Date(item.date).toLocaleDateString("en-US", {
+            month: "short",
+            day: "numeric",
+            year: "numeric",
           }),
-          open: item.open != null ? Number(item.open).toFixed(2) : '',
-          high: item.high != null ? Number(item.high).toFixed(2) : '',
-          low: item.low != null ? Number(item.low).toFixed(2) : '',
-          close: item.close != null ? Number(item.close).toFixed(2) : '',
-          adjClose: item.close != null ? Number(item.close).toFixed(2) : '',
+          open: item.open != null ? Number(item.open).toFixed(2) : "",
+          high: item.high != null ? Number(item.high).toFixed(2) : "",
+          low: item.low != null ? Number(item.low).toFixed(2) : "",
+          close: item.close != null ? Number(item.close).toFixed(2) : "",
+          adjClose: item.close != null ? Number(item.close).toFixed(2) : "",
           change:
             item.changePercent != null
-              ? Number(item.changePercent).toFixed(2) + '%'
-              : '',
+              ? Number(item.changePercent).toFixed(2) + "%"
+              : "",
           volume: item.volume,
-        }
-      })
-      state.tableData = resultData
+        };
+      });
+      state.tableData = resultData;
     }
   }
-}
+};
 </script>
 
 <style scoped lang="scss">
 .historic-data-container {
-  padding: 20px;
-  max-width: 1200px;
+  max-width: 932px;
   margin: 0 auto;
 
   .header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 20px;
 
     .title {
       font-size: 40px;
       font-weight: bold;
       margin: 0;
     }
-
-    .filter-container {
-      display: flex;
-      gap: 10px;
-    }
   }
 
-  .pagination-container {
+  .filter-container {
     display: flex;
-    justify-content: space-between;
     align-items: center;
-    margin-top: 20px;
-    padding: 10px 16px;
-    border-radius: 4px;
-    background-color: #ffffff;
+    gap: 16px;
+    padding: 0 16px;
+    margin-bottom: 32px;
+    margin-top: 32px;
 
-    .page-btn {
-      display: flex;
-      align-items: center;
-      gap: 5px;
-      padding: 6px 12px;
-      font-size: 20px;
-
-      &.prev-btn {
-        margin-right: auto;
-      }
-
-      &.next-btn {
-        margin-left: 10px;
-      }
-
-      &:disabled {
-        opacity: 0.5;
-        cursor: not-allowed;
-      }
-    }
-
-    .page-info {
+    .range-label {
+      font-family: "PingFang SC", sans-serif;
+      font-weight: 400;
       font-size: 16px;
-      color: #374151;
-      margin: 0 10px;
+      line-height: 1.375em;
+      letter-spacing: 3%;
+      color: #455363;
     }
 
-    .right-controls {
-      display: flex;
-      align-items: center;
+    .filter-option {
+      padding: 7px 12px;
+      border-radius: 3px;
+      background-color: #efefef;
+      cursor: pointer;
+      font-family: "PingFang SC", sans-serif;
+      font-weight: 400;
+      font-size: 16px;
+      line-height: 1.375em;
+      color: #000000;
+      transition: all 0.2s ease;
 
-      .rows-dropdown {
-        font-size: 16px;
+      &:hover {
+        background-color: #e0e0e0;
+      }
+
+      &.active {
+        background-color: #ff7bac;
+        color: #ffffff;
       }
     }
   }
-
   .back-to-top-link {
     display: flex;
     justify-content: center;
@@ -473,11 +635,257 @@ const getPageData = async () => {
       }
     }
   }
+}
 
-  :deep(.n-data-table) {
-    .n-data-table-td {
-      padding: 12px 8px;
-    }
+.reports-table {
+  width: 100%;
+  background: #ffffff;
+  border-radius: 16px;
+  box-shadow: 0px 3px 14px 0px rgba(0, 0, 0, 0.16);
+  padding: 16px;
+}
+
+.table-header {
+  display: flex;
+  background: #fff0f5;
+  border-radius: 8px;
+  padding: 16px 0;
+  margin-bottom: 4px;
+  justify-content: space-between;
+  align-items: center;
+
+  .column {
+    font-family: "PingFang SC", sans-serif;
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 1.375em;
+    letter-spacing: 3%;
+    color: #000000;
+    padding: 0 16px;
   }
 }
+
+.table-row {
+  display: flex;
+  padding: 16px 0;
+  align-items: center;
+  justify-content: space-between;
+  position: relative;
+  border-radius: 8px;
+  &:hover {
+    background: #fff8fb;
+  }
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  &:nth-child(even) {
+    margin: 4px 0;
+  }
+}
+
+.reports-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.column {
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 1.375em;
+  letter-spacing: 3%;
+  color: #455363;
+  padding: 0 16px;
+  position: relative;
+}
+
+.table-row .column:not(:last-child)::after {
+  content: "";
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  height: 24px;
+  border-right: 1px dashed #e0e0e6;
+}
+
+// 分页器样式
+.pagination-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 20px;
+  gap: 21px;
+}
+
+.pagination-info {
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 1.4375em;
+  color: #455363;
+  text-align: right;
+}
+
+.pagination-controls {
+  display: flex;
+  align-items: center;
+  gap: 21px;
+}
+
+.pagination-buttons {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.page-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: 1px solid #e0e0e6;
+  border-radius: 3px;
+  background: #ffffff;
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 1.428em;
+  color: #455363;
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  &:hover:not(:disabled) {
+    border-color: #ff7bac;
+    color: #ff7bac;
+  }
+
+  &.active {
+    border-color: #ff7bac;
+    color: #ff7bac;
+    background: #fff0f5;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+}
+
+.page-size-selector {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 18px;
+  padding: 4px 12px;
+  height: 28px;
+  border: 1px solid #e0e0e6;
+  border-radius: 3px;
+  background: #ffffff;
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 1.428em;
+  color: #455363;
+  cursor: pointer;
+
+  &:hover {
+    border-color: #ff7bac;
+  }
+}
+
+.page-size-menu {
+  position: absolute;
+  bottom: 100%;
+  left: 0;
+  right: 0;
+  background: #ffffff;
+  border: 1px solid #e0e0e6;
+  border-radius: 3px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  z-index: 1000;
+  margin-bottom: 2px;
+}
+
+.page-size-option {
+  padding: 8px 12px;
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 1.428em;
+  color: #455363;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+
+  &:hover {
+    background: #fff0f5;
+  }
+
+  &.active {
+    background: #fff0f5;
+    color: #ff7bac;
+  }
+}
+
+.goto-section {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 1.428em;
+  color: #455363;
+}
+
+.goto-input {
+  width: 60px;
+  height: 28px;
+  padding: 4px 12px;
+  border: 1px solid #e0e0e6;
+  border-radius: 3px;
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 1.428em;
+  color: #455363;
+  text-align: center;
+
+  &:focus {
+    outline: none;
+    border-color: #ff7bac;
+  }
+}
+
+.title-section {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 0 16px;
+}
+
+.title-decoration {
+  width: 58px;
+  height: 7px;
+  background: #ff7bac;
+  margin: auto 0;
+  margin-top: 43px;
+}
+
+.historic-title {
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 500;
+  font-size: 40px;
+  line-height: 1.4em;
+  letter-spacing: 3%;
+  color: #000000;
+}
 </style>
diff --git a/src/views/index/size1920/index.vue b/src/views/index/size1920/index.vue
index f4f94d9..3b00408 100644
--- a/src/views/index/size1920/index.vue
+++ b/src/views/index/size1920/index.vue
@@ -2,13 +2,68 @@
 import customHeader from "@/components/customHeader/index.vue";
 import customFooter from "@/components/customFooter/index.vue";
 import { NScrollbar } from "naive-ui";
+import { computed } from "vue";
+import { useRoute } from "vue-router";
+
+const route = useRoute();
+function resolveAssetUrl(possiblePath) {
+  try {
+    if (possiblePath.startsWith("@/")) {
+      return new URL(possiblePath.replace("@/", "/src/"), import.meta.url).href;
+    }
+    if (possiblePath.startsWith("/src/")) {
+      return new URL(possiblePath, import.meta.url).href;
+    }
+    return possiblePath;
+  } catch (e) {
+    return possiblePath;
+  }
+}
+
+const defaultBgUrl = resolveAssetUrl("@/assets/image/bg-pc.png");
+
+const currentBg = computed(() => {
+  // 支持三种：
+  // 1) 'url("@/xxx.png") ...' → 解析成真实 URL 并仅设置 backgroundImage，由类控制 cover/center/no-repeat
+  // 2) '@/xxx.png' 或 '/src/xxx.png' → 按图片处理
+  // 3) 纯色 '#xxxxxx' 或 'rgb(...)' → 作为背景色
+  const metaBg = route.meta?.bg;
+  if (!metaBg) return { backgroundImage: `url(${defaultBgUrl})` };
+  const value = String(metaBg).trim();
+  if (value.startsWith("#") || value.startsWith("rgb")) {
+    return { backgroundColor: value };
+  }
+  // 匹配 url("...") 或 url('...') 或 url(...)
+  const urlMatch = value.match(/url\(([^)]+)\)/i);
+  if (urlMatch) {
+    const rawPath = urlMatch[1].replace(/^['\"]|['\"]$/g, "");
+    const resolved = resolveAssetUrl(rawPath);
+    return { backgroundImage: `url(${resolved})` };
+  }
+  // 直接给出资源路径的情况
+  if (
+    value.endsWith(".png") ||
+    value.endsWith(".jpg") ||
+    value.endsWith(".jpeg") ||
+    value.endsWith(".webp") ||
+    value.endsWith(".gif") ||
+    value.endsWith(".svg")
+  ) {
+    const resolved = resolveAssetUrl(value);
+    return { backgroundImage: `url(${resolved})` };
+  }
+  // 兜底：当作颜色或直接背景
+  return { background: value };
+});
 </script>
 
 <template>
   <div class="flex flex-col h-screen">
     <customHeader></customHeader>
     <n-scrollbar
-      class="bg-[url('@/assets/image/bg-pc.png')] bg-cover bg-center flex-1"
+      class="bg-cover bg-center bg-no-repeat flex-1"
+      style="background-size: 100% 100%; background-attachment: fixed"
+      :style="currentBg"
     >
       <div>
         <router-view />
diff --git a/src/views/press-releases/size1440/index.vue b/src/views/press-releases/size1440/index.vue
index 5e87be8..4792d44 100644
--- a/src/views/press-releases/size1440/index.vue
+++ b/src/views/press-releases/size1440/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="press-releases-page">
     <n-infinite-scroll :distance="0" @load="doLoadMore">
-      <main class="p-[35px] max-w-[1200px] mx-auto">
+      <main class="mx-auto">
         <div class="title mb-[20px]">
           {{ t("press_releases.title") }}
         </div>
diff --git a/src/views/press-releases/size1920/index.vue b/src/views/press-releases/size1920/index.vue
index 913b297..c4434f9 100644
--- a/src/views/press-releases/size1920/index.vue
+++ b/src/views/press-releases/size1920/index.vue
@@ -1,79 +1,206 @@
 <template>
   <div class="press-releases-page">
-    <n-infinite-scroll :distance="0" @load="doLoadMore">
-      <main class="p-[35px] max-w-[1200px] mx-auto">
+    <main class="mx-auto">
+      <div class="title-section">
+        <div class="title-decoration"></div>
         <div class="title mb-[20px]">
           {{ t("press_releases.title") }}
         </div>
-        <div class="search-container">
-          <n-select
-            :options="state.selectOptions"
-            v-model:value="state.selectedValue"
-            class="search-select"
-          />
-          <n-input
-            v-model:value="state.inputValue"
-            type="text"
-            :placeholder="t('press_releases.search.placeholder')"
-            class="search-input"
-          />
-          <n-button @click="handleSearch" class="search-button w-[60px]">
-            {{ t("press_releases.search.button") }}
-          </n-button>
-        </div>
-        <div v-for="(item, idx) in state.filterNewsData" :key="idx">
-          <div class="news-item mt-[10px]">
-            <div class="news-item-date">{{ item.date }}</div>
-            <div
-              class="news-item-title text-[#0078d7] cursor-pointer"
-              style="
-                word-break: break-word;
-                display: -webkit-box;
-                -webkit-line-clamp: 2;
-                -webkit-box-orient: vertical;
-                overflow: hidden;
-                text-overflow: ellipsis;
-              "
-              @click="handleNewClick(item)"
-            >
-              {{ item.title }}
-            </div>
-            <n-tooltip
-              trigger="hover"
-              :disabled="!item.showTooltip"
-              width="trigger"
-            >
-              <template #trigger>
+      </div>
+      <div class="search-container">
+        <n-select
+          :options="state.selectOptions"
+          v-model:value="state.selectedValue"
+          class="search-select"
+        />
+        <input
+          v-model="state.inputValue"
+          type="text"
+          :placeholder="t('press_releases.search.placeholder')"
+          class="search-input"
+        />
+        <button @click="handleSearch" class="search-button">
+          {{ t("press_releases.search.button") }}
+        </button>
+      </div>
+      <div class="reports-list">
+        <div
+          v-for="(item, idx) in state.filterNewsData"
+          :key="idx"
+          class="news-item table-row"
+        >
+          <div class="content">
+            <div class="file-content">
+              <div class="file-info">
+                <div class="vertical-line"></div>
                 <div
-                  :ref="(el) => setTitleRef(el, idx)"
-                  class="news-item-content"
+                  class="news-item-title text-[#000] cursor-pointer"
                   style="
-                    word-break: break-word;
+                    word-break: break-all;
                     display: -webkit-box;
-                    -webkit-line-clamp: 2;
+                    -webkit-line-clamp: 1;
+                    line-clamp: 1;
                     -webkit-box-orient: vertical;
                     overflow: hidden;
                     text-overflow: ellipsis;
                   "
+                  @click="handleNewClick(item)"
                 >
+                  {{ item.title }}
+                </div>
+                <svg
+                  class="arrow-icon"
+                  width="7"
+                  height="14"
+                  viewBox="0 0 7 14"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                  @click="handleNewClick(item)"
+                >
+                  <path
+                    d="M1 1L6 7L1 13"
+                    stroke="#FF7BAC"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                </svg>
+              </div>
+              <n-tooltip trigger="hover" :disabled="true" width="trigger">
+                <template #trigger>
+                  <div
+                    :ref="(el) => setTitleRef(el, idx)"
+                    class="news-item-content file-description"
+                    style="
+                      word-break: break-all;
+                      display: -webkit-box;
+                      -webkit-line-clamp: 1;
+                      line-clamp: 1;
+                      -webkit-box-orient: vertical;
+                      overflow: hidden;
+                      text-overflow: ellipsis;
+                    "
+                  >
+                    {{ item.summary }}
+                  </div>
+                </template>
+                <div slot="content">
                   {{ item.summary }}
                 </div>
-              </template>
-              <div slot="content">
-                {{ item.summary }}
+              </n-tooltip>
+              <div class="download-section">
+                <div class="news-item-date">{{ item.date }}</div>
               </div>
-            </n-tooltip>
+            </div>
+          </div>
+          <div class="separator-line"></div>
+        </div>
+      </div>
+
+      <!-- 分页器 -->
+      <div class="pagination-container" v-if="state.total > 0">
+        <div class="pagination-info">
+          Displaying {{ displayRange.start }} - {{ displayRange.end }} of
+          {{ state.total }} results
+        </div>
+        <div class="pagination-controls">
+          <div class="pagination-buttons">
+            <button
+              class="page-btn prev-btn"
+              :disabled="state.currentPage === 1"
+              @click="goToPrevPage"
+            >
+              <svg width="5" height="9" viewBox="0 0 5 9" fill="none">
+                <path
+                  d="M4 1L1 4.5L4 8"
+                  stroke="#455363"
+                  stroke-width="1.5"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+              </svg>
+            </button>
+
+            <template v-for="page in getVisiblePages()" :key="page">
+              <button
+                v-if="page !== '...'"
+                class="page-btn"
+                :class="{ active: page === state.currentPage }"
+                @click="goToPage(page)"
+              >
+                {{ page }}
+              </button>
+              <button v-else class="page-btn disabled" disabled>...</button>
+            </template>
+
+            <button
+              class="page-btn next-btn"
+              :disabled="state.currentPage === totalPages"
+              @click="goToNextPage"
+            >
+              <svg width="5" height="9" viewBox="0 0 5 9" fill="none">
+                <path
+                  d="M1 1L4 5L1 8"
+                  stroke="#455363"
+                  stroke-width="1.5"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+              </svg>
+            </button>
+          </div>
+          <div class="page-size-selector" @click="togglePageSizeMenu">
+            <span>{{ state.pageSize }}/page</span>
+            <svg width="10" height="5" viewBox="0 0 10 5" fill="none">
+              <path
+                d="M1 1L5 4L9 1"
+                stroke="#455363"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+            <div v-if="showPageSizeMenu" class="page-size-menu">
+              <div
+                v-for="size in [10, 20, 50]"
+                :key="size"
+                class="page-size-option"
+                :class="{ active: state.pageSize === size }"
+                @click="changePageSize(size)"
+              >
+                {{ size }}/page
+              </div>
+            </div>
+          </div>
+          <div class="goto-section">
+            <span>Goto</span>
+            <input
+              type="number"
+              v-model="state.gotoPage"
+              class="goto-input"
+              :min="1"
+              :max="totalPages"
+              @keyup.enter="handleGoto"
+            />
           </div>
         </div>
-      </main>
-    </n-infinite-scroll>
+      </div>
+    </main>
   </div>
 </template>
 
 <script setup>
 import customDefaultPage from "@/components/customDefaultPage/index.vue";
-import { reactive, onMounted, watch, nextTick, ref } from "vue";
-import { NSelect, NInput, NButton, NInfiniteScroll, NTooltip } from "naive-ui";
+import {
+  reactive,
+  onMounted,
+  watch,
+  nextTick,
+  ref,
+  computed,
+  onUnmounted,
+} from "vue";
+import { NSelect, NInput, NButton, NTooltip } from "naive-ui";
 import { useI18n } from "vue-i18n";
 import axios from "axios";
 
@@ -94,32 +221,16 @@ const state = reactive({
     }),
   ], //下拉选项
   inputValue: "", //输入值
-  newsData: [
-    {
-      date: "June 3, 2025",
-      title: "FiEE, Inc. seized market opportunities through 2025 Osaka Expo",
-      content:
-        "Hong Kong, 3 June 2025 — FiEE, Inc. (NASDAQ:FIEE) (“FiEE, Inc.” or the “Company”), a technology company integrating IoT, connectivity and AI to redefine brand management solutions in the digital era, is pleased to announce significant business updates....",
-    },
-    {
-      date: "June 2, 2025",
-      title: "FiEE, Inc. Closes Its First Day of Trading on NASDAQ",
-      content:
-        "Hong Kong, 2 June 2025 — FiEE, Inc. (NASDAQ:FIEE) (“FiEE, Inc.” or the “Company”), a technology company integrating IoT, connectivity and AI to redefine brand management solutions in the digital era, commenced...",
-    },
-    {
-      date: "May 30, 2025",
-      title: "FiEE, Inc. Announces Reinitiation of Trading on Nasdaq",
-      content:
-        "Hong Kong, May 30, 2025 — FiEE, Inc. (“FiEE, Inc.” or the “Company”), a technology company integrating IoT, connectivity and AI to redefine brand management solutions...",
-    },
-  ],
   filterNewsData: [],
   loading: false, //是否正在加载数据
-  hasMore: true, //是否还有更多数据
   currentPage: 1, //当前页码
+  pageSize: 10,
+  total: 0,
+  gotoPage: 1,
 });
 
+const showPageSizeMenu = ref(false);
+
 const titleRefs = ref([]);
 
 const setTitleRef = (el, idx) => {
@@ -139,14 +250,18 @@ const checkAllTitleOverflow = () => {
 };
 
 onMounted(() => {
-  // state.filterNewsData = state.newsData;
   getPressReleasesDisplay();
+  document.addEventListener("click", handleClickOutside);
 
   nextTick(() => {
     checkAllTitleOverflow();
   });
 });
 
+onUnmounted(() => {
+  document.removeEventListener("click", handleClickOutside);
+});
+
 watch(
   () => state.filterNewsData,
   () => {
@@ -159,93 +274,68 @@ watch(
 
 // 获取新闻列表
 const getPressReleasesDisplay = () => {
+  state.loading = true;
   let url = "https://erpapi.fiee.com/api/fiee/pressreleases/display";
   let params = {
     query: state.inputValue,
     page: state.currentPage,
-    pageSize: 10,
+    pageSize: state.pageSize,
     timeStart: state.selectedValue
       ? state.selectedValue === "all_years"
         ? null
         : new Date(state.selectedValue).getTime()
       : null,
   };
-  // console.log(params)
-  axios.post(url, params).then((res) => {
-    // console.log(res)
-    if (res.status === 200) {
-      if (res.data.status === 0) {
-        res.data.data?.data?.forEach((item) => {
-          item.date = new Date(item.createdAt).toLocaleDateString("en-US", {
-            month: "short",
-            day: "numeric",
-            year: "numeric",
+  axios
+    .post(url, params)
+    .then((res) => {
+      if (res.status === 200) {
+        if (res.data.status === 0) {
+          res.data.data?.data?.forEach((item) => {
+            item.date = new Date(item.createdAt).toLocaleDateString("en-US", {
+              month: "short",
+              day: "numeric",
+              year: "numeric",
+            });
           });
-        });
-        if (state.currentPage === 1) {
           state.filterNewsData = res.data.data?.data || [];
-        } else {
-          state.filterNewsData = [
-            ...state.filterNewsData,
-            ...(res.data.data?.data || []),
-          ];
-        }
-        if (state.filterNewsData.length < (res.data.data?.total || 0)) {
-          state.hasMore = true;
-        } else {
-          state.hasMore = false;
+          state.total = res.data.data?.total || 0;
         }
       }
-    }
-  });
-};
-
-const handleFilter = () => {
-  // 筛选逻辑
-  let filteredData = [...state.newsData];
-
-  // 按年份筛选
-  if (state.selectedValue !== "all_years") {
-    filteredData = filteredData.filter((item) => {
-      // 从日期字符串中提取年份，假设日期格式为 "May 30, 2025"
-      const dateMatch = item.date.match(/\b\d{4}\b/);
-      if (dateMatch) {
-        const year = dateMatch[0];
-        return year === state.selectedValue;
-      }
-      return false;
+    })
+    .finally(() => {
+      state.loading = false;
     });
-  }
-
-  // 按输入内容进行模糊查询（title 和 content）
-  if (state.inputValue && state.inputValue.trim() !== "") {
-    const searchText = state.inputValue.toLowerCase().trim();
-    filteredData = filteredData.filter((item) => {
-      const titleMatch = item.title.toLowerCase().includes(searchText);
-      const contentMatch = item.content.toLowerCase().includes(searchText);
-      return titleMatch || contentMatch;
-    });
-  }
-
-  state.filterNewsData = filteredData;
 };
 
 // 添加 watcher 来实现自动筛选
 watch(
   () => [state.selectedValue, state.inputValue],
   () => {
-    // handleFilter();
     state.currentPage = 1;
     getPressReleasesDisplay();
   }
 );
 
+watch(
+  () => state.pageSize,
+  () => {
+    state.currentPage = 1;
+    getPressReleasesDisplay();
+  }
+);
+
+watch(
+  () => state.currentPage,
+  (newPage) => {
+    state.gotoPage = newPage;
+    getPressReleasesDisplay();
+  }
+);
+
 const handleSearch = () => {
-  // 手动触发筛选（保留这个函数以保持兼容性）
-  // handleFilter();
   state.currentPage = 1;
   getPressReleasesDisplay();
-  // console.log("筛选结果:", state.filterNewsData);
 };
 
 const handleNewClick = (item) => {
@@ -257,21 +347,112 @@ const handleNewClick = (item) => {
   });
 };
 
-//加载更多数据
-const doLoadMore = () => {
-  if (!state.hasMore || state.loading) {
-    return;
+const totalPages = computed(() => {
+  return Math.ceil(state.total / state.pageSize) || 1;
+});
+
+const displayRange = computed(() => {
+  if (state.total === 0) return { start: 0, end: 0 };
+  const start = (state.currentPage - 1) * state.pageSize + 1;
+  const end = Math.min(state.currentPage * state.pageSize, state.total);
+  return { start, end };
+});
+
+const goToPage = (page) => {
+  if (page >= 1 && page <= totalPages.value) {
+    state.currentPage = page;
+  }
+};
+
+const goToPrevPage = () => {
+  if (state.currentPage > 1) {
+    state.currentPage--;
+  }
+};
+
+const goToNextPage = () => {
+  if (state.currentPage < totalPages.value) {
+    state.currentPage++;
+  }
+};
+
+const changePageSize = (size) => {
+  state.pageSize = size;
+};
+
+const handleGoto = () => {
+  const page = parseInt(state.gotoPage);
+  if (page >= 1 && page <= totalPages.value) {
+    state.currentPage = page;
+  }
+};
+
+const togglePageSizeMenu = () => {
+  showPageSizeMenu.value = !showPageSizeMenu.value;
+};
+
+const getVisiblePages = () => {
+  const current = state.currentPage;
+  const total = totalPages.value;
+  const pages = [];
+
+  if (total <= 7) {
+    for (let i = 1; i <= total; i++) {
+      pages.push(i);
+    }
+  } else {
+    pages.push(1);
+
+    if (current <= 4) {
+      for (let i = 2; i <= 5; i++) {
+        pages.push(i);
+      }
+      pages.push("...");
+      pages.push(total);
+    } else if (current >= total - 3) {
+      pages.push("...");
+      for (let i = total - 4; i <= total; i++) {
+        pages.push(i);
+      }
+    } else {
+      pages.push("...");
+      for (let i = current - 1; i <= current + 1; i++) {
+        pages.push(i);
+      }
+      pages.push("...");
+      pages.push(total);
+    }
+  }
+
+  return pages;
+};
+
+// 点击外部关闭页面大小选择菜单
+const handleClickOutside = (event) => {
+  if (!event.target.closest || !event.target.closest(".page-size-selector")) {
+    showPageSizeMenu.value = false;
   }
-  // console.log('触底了')
-  state.loading = true;
-  state.currentPage++;
-  getPressReleasesDisplay().finally(() => {
-    state.loading = false;
-  });
 };
 </script>
 
 <style scoped lang="scss">
+.press-releases-page {
+  max-width: 932px;
+  margin: 0 auto;
+}
+.title-section {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 0 16px;
+}
+.title-decoration {
+  width: 58px;
+  height: 7px;
+  background: #ff7bac;
+  margin: auto 0;
+  margin-top: 43px;
+}
 .title {
   font-size: 40px;
   color: #333;
@@ -283,18 +464,31 @@ const doLoadMore = () => {
   flex-direction: row;
   align-items: center;
   justify-content: flex-start;
-  gap: 10px;
+  gap: 32px;
+  padding: 0 16px;
 }
 
 .search-select {
-  width: 7rem;
-  :deep(.n-base-selection) {
-    padding: 4px 0;
-  }
+  width: 201px;
+  height: 34px;
 }
 
 .search-input {
-  width: 240px;
+  flex: 1;
+  height: 34px;
+  padding: 7px 12px;
+  border: 1px solid #e0e0e6;
+  border-radius: 3px;
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 1.375em;
+  letter-spacing: 3%;
+  color: #455363;
+
+  &::placeholder {
+    color: #b6b6b6;
+  }
 }
 
 :deep(.n-input) {
@@ -318,11 +512,294 @@ const doLoadMore = () => {
   border-radius: 4px;
 }
 .search-button {
+  height: 34px;
+  padding: 7px 12px;
+  min-width: 201px;
   background: #ff7bac;
   color: #fff;
+  border: none;
+  border-radius: 3px;
+  cursor: pointer;
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 1.375em;
+  letter-spacing: 3%;
   &:hover {
     background: #ff7bac;
     color: #fff;
   }
 }
+
+.reports-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.table-row {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  border-radius: 8px;
+
+  &:last-child {
+    .separator-line {
+      display: none;
+    }
+  }
+}
+
+.content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.table-row .content {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0;
+  &:hover {
+    background: #fff8fb;
+  }
+}
+
+.file-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  padding-right: 16px;
+}
+
+.file-info {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  flex: 1;
+}
+
+.news-item-title {
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 1.375em;
+  letter-spacing: 3%;
+  color: #000000;
+}
+
+.arrow-icon {
+  margin-left: auto;
+  flex-shrink: 0;
+  cursor: pointer;
+}
+
+.vertical-line {
+  width: 1px;
+  height: 20px;
+  background: #ff7bac;
+  flex-shrink: 0;
+}
+
+.file-description {
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 1.375em;
+  letter-spacing: 3%;
+  color: #455363;
+  margin: 0;
+  padding-left: 17px;
+  margin-top: 8px;
+}
+
+.news-item-date {
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 1.375em;
+  letter-spacing: 3%;
+  color: #455363;
+}
+
+.download-section {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  width: 100%;
+  padding: 4px 16px;
+}
+
+.separator-line {
+  width: 100%;
+  height: 1px;
+  background: repeating-linear-gradient(
+    to right,
+    #e6eaee 0px,
+    #e6eaee 2px,
+    transparent 2px,
+    transparent 4px
+  );
+  margin-top: 16px;
+}
+
+// 分页器样式
+.pagination-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 30px;
+  margin-bottom: 30px;
+  gap: 21px;
+}
+
+.pagination-info {
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 1.4375em;
+  color: #455363;
+  text-align: right;
+}
+
+.pagination-controls {
+  display: flex;
+  align-items: center;
+  gap: 21px;
+}
+
+.pagination-buttons {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.page-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: 1px solid #e0e0e6;
+  border-radius: 3px;
+  background: #ffffff;
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 1.428em;
+  color: #455363;
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  &:hover:not(:disabled) {
+    border-color: #ff7bac;
+    color: #ff7bac;
+  }
+
+  &.active {
+    border-color: #ff7bac;
+    color: #ff7bac;
+    background: #fff0f5;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+}
+
+.page-size-selector {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 18px;
+  padding: 4px 12px;
+  height: 28px;
+  border: 1px solid #e0e0e6;
+  border-radius: 3px;
+  background: #ffffff;
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 1.428em;
+  color: #455363;
+  cursor: pointer;
+
+  &:hover {
+    border-color: #ff7bac;
+  }
+}
+
+.page-size-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  background: #ffffff;
+  border: 1px solid #e0e0e6;
+  border-radius: 3px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  z-index: 1000;
+  margin-top: 2px;
+}
+
+.page-size-option {
+  padding: 8px 12px;
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 1.428em;
+  color: #455363;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+
+  &:hover {
+    background: #fff0f5;
+  }
+
+  &.active {
+    background: #fff0f5;
+    color: #ff7bac;
+  }
+}
+
+.goto-section {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 1.428em;
+  color: #455363;
+}
+
+.goto-input {
+  width: 60px;
+  height: 28px;
+  padding: 4px 12px;
+  border: 1px solid #e0e0e6;
+  border-radius: 3px;
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 1.428em;
+  color: #455363;
+  text-align: center;
+
+  &:focus {
+    outline: none;
+    border-color: #ff7bac;
+  }
+}
 </style>
diff --git a/src/views/product-introduction/index.vue b/src/views/product-introduction/index.vue
new file mode 100644
index 0000000..c7a8c5d
--- /dev/null
+++ b/src/views/product-introduction/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>
diff --git a/src/views/product-introduction/size1440/index.vue b/src/views/product-introduction/size1440/index.vue
new file mode 100644
index 0000000..e69de29
diff --git a/src/views/product-introduction/size1920/index.vue b/src/views/product-introduction/size1920/index.vue
new file mode 100644
index 0000000..a07cb54
--- /dev/null
+++ b/src/views/product-introduction/size1920/index.vue
@@ -0,0 +1,233 @@
+<script setup>
+import { useStockQuote } from "@/store/stock-quote/index.js";
+const { getStockQuate, stockQuote, formatted } = useStockQuote();
+console.log(stockQuote);
+getStockQuate();
+</script>
+
+<template>
+  <main ref="main" class="stock-quote-hero">
+    <div class="hero-content">
+      <!-- 标题区域 -->
+      <div class="title-section">
+        <div class="title-decoration"></div>
+        <div class="stock-title">Stock Quote</div>
+      </div>
+      <section class="quote-layout">
+        <article class="price-card">
+          <div class="price-value">${{ stockQuote.price }}</div>
+          <div class="price-market">NASDAQ: FIEE</div>
+          <div class="price-time">{{ formatted }}</div>
+        </article>
+        <div class="stats-table">
+          <div class="stats-cell">
+            <span class="stat-title">Open</span>
+            <span class="stat-value">{{ stockQuote.open }}</span>
+          </div>
+          <div class="stats-cell">
+            <span class="stat-title">% Change</span>
+            <span
+              class="stat-value"
+              :class="
+                stockQuote.change
+                  ? String(stockQuote.change).includes('-')
+                    ? 'negative-change'
+                    : String(stockQuote.change).includes('+')
+                    ? 'positive-change'
+                    : 'neutral-change'
+                  : 'neutral-change'
+              "
+            >
+              {{ stockQuote.change }}
+            </span>
+          </div>
+          <div class="stats-cell">
+            <span class="stat-title">Day's Range</span>
+            <span class="stat-value">{{ stockQuote.daysRange }}</span>
+          </div>
+          <div class="stats-cell">
+            <span class="stat-title">52-Week Range</span>
+            <span class="stat-value">{{ stockQuote.week52Range }}</span>
+          </div>
+          <div class="stats-cell">
+            <span class="stat-title">Volume</span>
+            <span class="stat-value">{{ stockQuote.volume }}</span>
+          </div>
+          <div class="stats-cell">
+            <span class="stat-title">Market Cap</span>
+            <span class="stat-value">{{ stockQuote.marketCap }}</span>
+          </div>
+        </div>
+      </section>
+    </div>
+  </main>
+</template>
+
+<style scoped>
+.stock-quote-hero {
+  position: relative;
+}
+
+.hero-content {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 16px;
+}
+
+.hero-header {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 12px;
+}
+.title-section {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  margin-bottom: 32px;
+  padding: 0 16px;
+}
+.title-decoration {
+  width: 58px;
+  height: 7px;
+  background: #ff7bac;
+  margin: auto 0;
+  margin-top: 43px;
+}
+
+.stock-title {
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 500;
+  font-size: 40px;
+  line-height: 1.4em;
+  letter-spacing: 3%;
+  color: #000000;
+}
+
+.gradient-badge {
+  width: 48px;
+  height: 4px;
+  border-radius: 4px;
+  background: #e62968;
+}
+
+.hero-title {
+  font-size: 32px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  color: #0d1b2a;
+}
+
+.quote-layout {
+  display: grid;
+  grid-template-columns: 420px 1fr;
+  align-items: start;
+  margin-top: 56px;
+}
+
+.price-card {
+  width: 420px;
+  min-height: 420px;
+  border-radius: 32px;
+  background: #ffffff;
+  border: 1px solid #f0f3f8;
+  box-shadow: 0 12px 32px rgba(16, 46, 86, 0.08);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 16px;
+  text-align: center;
+}
+
+.price-value {
+  font-size: 110px;
+  font-weight: 700;
+  letter-spacing: -0.03em;
+  background: linear-gradient(90deg, #ff7bac 0%, #0ff 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  text-transform: uppercase;
+}
+
+.price-market {
+  font-size: 22px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  color: #0d1b2a;
+  margin-bottom: 12px;
+}
+
+.price-time {
+  font-size: 18px;
+  letter-spacing: 0.02em;
+  color: #5a6775;
+}
+
+.stats-table {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  grid-auto-rows: minmax(0, 1fr);
+  border-radius: 24px;
+  overflow: hidden;
+}
+
+.stats-cell {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 8px;
+  padding: 24px 32px;
+  border-bottom: 1px solid rgba(232, 237, 245, 0.85);
+  border-right: 1px solid rgba(232, 237, 245, 0.85);
+}
+
+.stats-cell:nth-child(2n) {
+  border-right: none;
+}
+
+.stats-cell:nth-last-child(-n + 2) {
+  border-bottom: none;
+}
+
+.stat-title {
+  font-size: 14px;
+  font-weight: 500;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: #73849a;
+}
+
+.stat-value {
+  font-size: 22px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  color: #10243b;
+}
+
+.stat-title {
+  font-size: 18px;
+  font-weight: 500;
+  letter-spacing: 0.03em;
+  color: #455363;
+}
+
+.stat-value {
+  font-size: 30px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  color: #0d1b2a;
+}
+
+.positive-change {
+  color: #00c48c;
+}
+
+.negative-change {
+  color: #cf3050;
+}
+
+.neutral-change {
+  color: #0d1b2a;
+}
+</style>
diff --git a/src/views/product-introduction/size375/index.vue b/src/views/product-introduction/size375/index.vue
new file mode 100644
index 0000000..e69de29
diff --git a/src/views/product-introduction/size768/index.vue b/src/views/product-introduction/size768/index.vue
new file mode 100644
index 0000000..e69de29
diff --git a/src/views/stock-quote/size1920/index.vue b/src/views/stock-quote/size1920/index.vue
index 11b3f42..0aba020 100644
--- a/src/views/stock-quote/size1920/index.vue
+++ b/src/views/stock-quote/size1920/index.vue
@@ -1,80 +1,215 @@
 <script setup>
 import { useStockQuote } from "@/store/stock-quote/index.js";
 const { getStockQuate, stockQuote, formatted } = useStockQuote();
-
+console.log(stockQuote);
 getStockQuate();
 </script>
 
 <template>
-  <main
-    ref="main"
-    class="flex pt-100px flex-col md:flex-row justify-center items-center gap-32 rounded-3xl"
-  >
-    <!-- 左侧大号价格 -->
-    <section
-      class="flex flex-col items-center justify-center glass-card p-32 rounded-2xl shadow-xl"
-    >
-      <div
-        class="text-9xl font-extrabold text-#ff7bac animate-bg-move select-none drop-shadow-lg"
-      >
-        ${{ stockQuote.price }}
+  <main ref="main" class="stock-quote-hero">
+    <div class="hero-content">
+      <!-- 标题区域 -->
+      <div class="title-section">
+        <div class="title-decoration"></div>
+        <div class="stock-title">Stock Quote</div>
       </div>
-      <div
-        class="mt-10 text-3xl text-gray-500 font-semibold tracking-widest mb-10px"
-      >
-        NASDAQ: <span class="text-black">FIEE</span>
-      </div>
-      <div class="text-gray-500">{{ formatted }}</div>
-    </section>
-    <!-- 右侧信息卡片 -->
-    <section class="grid grid-cols-2 gap-16">
-      <div class="info-card">
-        <div class="text-lg text-gray-400">Open</div>
-        <div class="text-3xl font-bold">{{ stockQuote.open }}</div>
-      </div>
-      <div class="info-card">
-        <div class="text-lg text-gray-400">% Change</div>
-        <!-- <div class="text-3xl font-bold" 
-        :class="stockQuote.change?.[1]?.startsWith('-') ? 'text-red-500' : (stockQuote.change?.[1]?.startsWith('+') ? 'text-green-500' : '')">
-          {{ stockQuote.change?.join('') }}</div> -->
-        <div
-          class="text-3xl font-bold"
-          :class="
-            stockQuote.change?.includes('-') ? 'text-green-500' : 'text-red-500'
-          "
-        >
-          {{ stockQuote.change }}
+      <section class="quote-layout">
+        <div class="price-card">
+          <div class="price-value">${{ stockQuote.price }}</div>
+          <div class="price-market">NASDAQ: FIEE</div>
+          <div class="price-time">{{ formatted }}</div>
         </div>
-      </div>
-      <div class="info-card">
-        <div class="text-lg text-gray-400">Day's Range</div>
-        <div class="text-3xl font-bold">{{ stockQuote.daysRange }}</div>
-      </div>
-      <div class="info-card">
-        <div class="text-lg text-gray-400">52-Week Range</div>
-        <div class="text-3xl font-bold">{{ stockQuote.week52Range }}</div>
-      </div>
-      <div class="info-card">
-        <div class="text-lg text-gray-400">Volume</div>
-        <div class="text-3xl font-bold">{{ stockQuote.volume }}</div>
-      </div>
-      <div class="info-card">
-        <div class="text-lg text-gray-400">Market Cap</div>
-        <div class="text-3xl font-bold">{{ stockQuote.marketCap }}</div>
-      </div>
-    </section>
+        <div class="stats-table">
+          <div class="stats-cell">
+            <span class="stat-title">Open</span>
+            <span class="stat-value">{{ stockQuote.open }}</span>
+          </div>
+          <div class="stats-cell">
+            <span class="stat-title">% Change</span>
+            <span
+              class="stat-value"
+              :class="
+                stockQuote.change
+                  ? String(stockQuote.change).includes('-')
+                    ? 'negative-change'
+                    : String(stockQuote.change).includes('+')
+                    ? 'positive-change'
+                    : 'neutral-change'
+                  : 'neutral-change'
+              "
+            >
+              {{ stockQuote.change }}
+            </span>
+          </div>
+          <div class="stats-cell">
+            <span class="stat-title">Volume</span>
+            <span class="stat-value">{{ stockQuote.volume }}</span>
+          </div>
+          <div class="stats-cell">
+            <span class="stat-title">52-Week Range</span>
+            <span class="stat-value">{{ stockQuote.week52Range }}</span>
+          </div>
+          <div class="stats-cell">
+            <span class="stat-title">Day's Range</span>
+            <span class="stat-value">{{ stockQuote.daysRange }}</span>
+          </div>
+          <div class="stats-cell">
+            <span class="stat-title">Market Cap</span>
+            <span class="stat-value">{{ stockQuote.marketCap }}</span>
+          </div>
+        </div>
+      </section>
+    </div>
   </main>
 </template>
 
 <style scoped>
-/* 玻璃拟态和卡片动画可用 UnoCSS 快捷方式实现，若未配置可加如下样式 */
-.glass-card {
-  backdrop-filter: blur(16px);
-  background: rgba(255, 255, 255, 0.6);
-  border: 1px solid rgba(255, 255, 255, 0.3);
-  box-shadow: 0 8px 32px 0 rgba(255, 123, 172, 0.18);
+.stock-quote-hero {
+  position: relative;
 }
-.info-card {
-  @apply glass-card p-6 rounded-xl flex flex-col items-start gap-1  hover:scale-105 transition-transform duration-300;
+
+.hero-content {
+  max-width: 930px;
+  margin: 0 auto;
+}
+
+.hero-header {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 12px;
+}
+.title-section {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 0 16px;
+}
+.title-decoration {
+  width: 58px;
+  height: 7px;
+  background: #ff7bac;
+  margin: auto 0;
+  margin-top: 33px;
+}
+
+.stock-title {
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 500;
+  font-size: 40px;
+  line-height: 1.4em;
+  letter-spacing: 3%;
+  color: #000000;
+}
+
+.gradient-badge {
+  width: 48px;
+  height: 4px;
+  border-radius: 4px;
+  background: #e62968;
+}
+
+.hero-title {
+  font-size: 32px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  color: #0d1b2a;
+}
+
+.quote-layout {
+  display: flex;
+  flex-direction: row;
+  margin-top: 20px;
+}
+
+.price-card {
+  width: 466px;
+  min-height: 466px;
+  border-radius: 32px;
+  background: #ffffff;
+  border: 1px solid #f0f3f8;
+  box-shadow: 0 12px 32px rgba(16, 46, 86, 0.08);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 16px;
+  text-align: center;
+}
+
+.price-value {
+  font-size: 110px;
+  font-weight: 700;
+  letter-spacing: -0.03em;
+  background: linear-gradient(90deg, #ff7bac 0%, #0ff 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  text-transform: uppercase;
+}
+
+.price-market {
+  font-size: 22px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  color: #0d1b2a;
+  margin-bottom: 12px;
+}
+
+.price-time {
+  font-size: 18px;
+  letter-spacing: 0.02em;
+  color: #5a6775;
+}
+
+.stats-table {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  grid-auto-rows: minmax(0, 1fr);
+}
+
+.stats-cell {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 8px;
+  padding: 16px 32px;
+}
+
+.stat-title {
+  font-size: 14px;
+  font-weight: 500;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: #73849a;
+}
+
+.stat-title {
+  font-size: 18px;
+  font-weight: 500;
+  letter-spacing: 0.03em;
+  color: #455363;
+}
+
+.stat-value {
+  color: #000;
+  font-feature-settings: "liga" off, "clig" off;
+  font-family: "PingFang SC";
+  font-size: 26px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 56px; /* 215.385% */
+  letter-spacing: 1.2px;
+}
+
+.positive-change {
+  color: #00c48c;
+}
+
+.negative-change {
+  color: #cf3050;
+}
+
+.neutral-change {
+  color: #0d1b2a;
 }
 </style>