fix 1440

src/components/customEcharts/index.vue

@@ -1,30 +1,30 @@
 <script setup>
-import { computed } from 'vue'
+import { computed } from "vue";
-import { useWindowSize } from '@vueuse/core'
+import { useWindowSize } from "@vueuse/core";
 
-import size375 from '@/components/customEcharts/size375/index.vue'
+import size375 from "@/components/customEcharts/size375/index.vue";
-import size768 from '@/components/customEcharts/size375/index.vue'
+import size768 from "@/components/customEcharts/size375/index.vue";
-import size1440 from '@/components/customEcharts/size1920/index.vue'
+import size1440 from "@/components/customEcharts/size1440/index.vue";
-import size1920 from '@/components/customEcharts/size1920/index.vue'
+import size1920 from "@/components/customEcharts/size1920/index.vue";
-import { useRouter } from 'vue-router'
+import { useRouter } from "vue-router";
-import { useI18n } from 'vue-i18n'
+import { useI18n } from "vue-i18n";
 
-const router = useRouter()
+const router = useRouter();
-const { width } = useWindowSize()
+const { width } = useWindowSize();
-const { t } = useI18n()
+const { t } = useI18n();
 
 const viewComponent = computed(() => {
-  const viewWidth = width.value
+  const viewWidth = width.value;
   if (viewWidth <= 500) {
-    return size375
+    return size375;
   } else if (viewWidth <= 960) {
-    return size768
+    return size768;
   } else if (viewWidth <= 1500) {
-    return size1440
+    return size1440;
   } else if (viewWidth <= 1920 || viewWidth > 1920) {
-    return size1920
+    return size1920;
   }
-})
+});
 </script>
 
 <template>

src/components/customEcharts/size1440/index.vue

@@ -0,0 +1,619 @@
+<template>
+  <div class="custom-echarts">
+    <div>
+      <div class="echarts-header">
+        <!-- 标题区域 -->
+        <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">
+              Range
+            </text>
+            <div class="search-range-list">
+              <div
+                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>
+              </div>
+            </div>
+          </div>
+          <div class="echarts-search-byDate">
+            <n-date-picker
+              v-model:value="state.dateRange"
+              type="daterange"
+              :is-date-disabled="isDateDisabled"
+              @update:value="handleDateRangeChange"
+              input-readonly
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div id="myEcharts" class="myChart"></div>
+  </div>
+</template>
+<script setup>
+import { onMounted, watch, reactive } from "vue";
+import * as echarts from "echarts";
+import { 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"],
+  dateRange: [new Date("2009-10-07").getTime(), new Date().getTime()],
+  activeRange: "",
+});
+
+let myCharts = null;
+let historicData = [];
+let xAxisData = [];
+
+//初始化eCharts
+const initEcharts = (data) => {
+  historicData = data;
+  xAxisData = data.map((item) => {
+    return new Date(item.date).toLocaleDateString("en-US", {
+      month: "short",
+      day: "numeric",
+      year: "numeric",
+    });
+  });
+  const yAxisData = data.map((item) => item.price);
+  // console.error(xAxisData, yAxisData)
+  // 基于准备好的dom，初始化echarts实例
+  myCharts = echarts.init(document.getElementById("myEcharts"), null, {
+    renderer: "canvas",
+    useDirtyRect: true,
+  });
+  // 绘制图表
+  myCharts.setOption({
+    animation: false,
+    progressive: 500,
+    progressiveThreshold: 3000,
+    // title: {
+    //   text: 'FiEE, Inc. Stock Price History',
+    // },
+    grid: {
+      left: "8%", // 或 '2%'，根据实际情况调整
+      right: "12%", // 给右侧y轴留空间，数值可根据y轴label宽度调整
+    },
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        type: "line",
+        label: {
+          backgroundColor: "#6a7985",
+        },
+      },
+      formatter: function (params) {
+        const p = params[0];
+        return `<span style="font-size: 1.1rem; font-weight: 600;">${p.axisValue}</span><br/><span style="font-size: 0.9rem; font-weight: 400;">Price: ${p.data}</span>`;
+      },
+      triggerOn: "mousemove",
+      confine: true,
+      hideDelay: 1500,
+    },
+    xAxis: {
+      data: xAxisData,
+      type: "category",
+      boundaryGap: false,
+      inverse: true,
+      axisLine: {
+        lineStyle: {
+          color: "#CCD6EB",
+        },
+      },
+      axisLabel: {
+        color: "#323232",
+        fontWeight: "bold",
+        interval: "auto",
+        hideOverlap: true,
+      },
+    },
+    yAxis: {
+      type: "value",
+      position: "right",
+      interval: 25,
+      //   max: 75.0,
+      show: true,
+      axisLabel: {
+        color: "#323232",
+        fontWeight: "bold",
+        formatter: function (value) {
+          return value > 0 ? value.toFixed(2) : value;
+        },
+      },
+    },
+    series: [
+      {
+        data: yAxisData,
+        type: "line",
+        sampling: "lttb",
+        symbol: "none",
+        lineStyle: {
+          color: "#CC346C",
+        },
+        areaStyle: {
+          color: {
+            type: "linear",
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 0,
+                color: "#CC346C",
+              },
+              {
+                offset: 1,
+                color: "#F4F6F8",
+              },
+            ],
+          },
+        },
+        markPoint: {
+          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,
+      },
+    ],
+
+    dataZoom: [
+      {
+        type: "inside",
+      },
+      {
+        type: "slider",
+        show: true,
+        dataBackground: {
+          lineStyle: {
+            color: "#CC346C",
+          },
+          areaStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [
+                { offset: 1, color: "#CC346C" },
+                { offset: 0, color: "#F4F6F8" },
+              ],
+            },
+          },
+        },
+        selectedDataBackground: {
+          lineStyle: {
+            color: "#CC346C",
+          },
+          areaStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [
+                { offset: 1, color: "#CC346C" },
+                { offset: 0, color: "#F4F6F8" },
+              ],
+            },
+          },
+        },
+        fillerColor: "rgba(44, 98, 136, 0.3)",
+        realtime: false,
+      },
+    ],
+  });
+
+  // 监听 showTip 事件，动态显示 markPoint
+  myCharts.on("showTip", function (params) {
+    if (params) {
+      const dataIndex = params.dataIndex;
+      const x = myCharts.getOption().xAxis[0].data[dataIndex];
+      const y = myCharts.getOption().series[0].data[dataIndex];
+      myCharts.setOption({
+        series: [
+          {
+            markPoint: {
+              data: [{ coord: [x, y] }],
+            },
+          },
+        ],
+      });
+    }
+  });
+  // 鼠标移出时，清除 markPoint
+  myCharts.on("globalout", function () {
+    myCharts.setOption({
+      series: [
+        {
+          markPoint: {
+            data: [],
+          },
+        },
+      ],
+    });
+  });
+  myCharts.on("dataZoom", function (params) {
+    // 获取当前 dataZoom 范围
+    const option = myCharts.getOption();
+    const xAxisData = option.xAxis[0].data;
+    const dataZoom = option.dataZoom[1] || option.dataZoom[0];
+
+    // 获取 dataZoom 的 startValue 和 endValue
+    let startValue = dataZoom.endValue;
+    let endValue = dataZoom.startValue;
+
+    // 如果是索引，转为日期
+    if (typeof startValue === "number") {
+      startValue = xAxisData[startValue];
+    }
+    if (typeof endValue === "number") {
+      endValue = xAxisData[endValue];
+    }
+
+    // 更新日期选择器
+    state.dateRange = [
+      new Date(startValue).getTime(),
+      new Date(endValue).getTime(),
+    ];
+  });
+};
+
+onMounted(() => {
+  getHistoricalData();
+});
+
+//获取历史数据
+const getHistoricalData = async () => {
+  let now = new Date();
+  let toDate =
+    now.getFullYear() +
+    "-" +
+    String(now.getMonth() + 1).padStart(2, "0") +
+    "-" +
+    String(now.getDate()).padStart(2, "0");
+  let url =
+    "https://common.szjixun.cn/api/stock/history/base/list?from=2009-10-07&to=" +
+    toDate;
+  const res = await axios.get(url);
+  if (res.status === 200) {
+    if (res.data.status === 0) {
+      initEcharts(res.data.data);
+    }
+  }
+};
+
+// 适配倒序数据，返回大于等于目标日期的最近一天索引
+function findClosestDateIndex(data, targetDateStr) {
+  let left = 0,
+    right = data.length - 1;
+  const target = new Date(targetDateStr).getTime();
+  let res = data.length - 1; // 默认返回最后一个
+  while (left <= right) {
+    const mid = Math.floor((left + right) / 2);
+    const midTime = new Date(data[mid].date).getTime();
+    if (midTime > target) {
+      left = mid + 1;
+    } else {
+      res = mid;
+      right = mid - 1;
+    }
+  }
+  return res;
+}
+
+// 适配倒序数据，返回小于等于目标日期的最近一天索引
+function findClosestDateIndexDescLeft(data, targetDateStr) {
+  let left = 0,
+    right = data.length - 1;
+  const target = new Date(targetDateStr).getTime();
+  let res = -1;
+  while (left <= right) {
+    const mid = Math.floor((left + right) / 2);
+    const midTime = new Date(data[mid].date).getTime();
+    if (midTime > target) {
+      left = mid + 1; // mid 比目标新，往更旧的方向找
+    } else {
+      res = mid; // mid <= target，记录下来，继续往更新的方向找
+      right = mid - 1;
+    }
+  }
+  return res;
+}
+
+//点击切换搜索区间
+const changeSearchRange = (range, dateTime) => {
+  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"
+    ) {
+      const zoomOptions = {};
+      let newStartTs = state.dateRange[0];
+      let newEndTs = state.dateRange[1];
+
+      if (startDate) {
+        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) {
+        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: "",
+      },
+    });
+
+    state.dateRange = [new Date("2009-10-07").getTime(), new Date().getTime()];
+  }
+};
+
+// 禁用日期
+const isDateDisabled = (ts, type, range) => {
+  const minDate = new Date("2009-10-06").getTime();
+  const maxDate = new Date().getTime();
+
+  if (ts < minDate || ts > maxDate) {
+    return true;
+  }
+
+  if (type === "end" && range && range[0]) {
+    return ts < range[0];
+  }
+
+  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 {
+  .myChart {
+    width: 100%;
+    height: 25rem;
+  }
+
+  .echarts-header {
+    .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: 0 16px 0 16px;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+      gap: 10px;
+
+      .echarts-search-byRange {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: flex-start;
+        gap: 10px;
+        .search-range-list {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          justify-content: flex-start;
+          gap: 10px;
+          .search-range-list-each {
+            padding: 5px 10px;
+            border-radius: 5px;
+            background-color: #f3f4f6;
+            cursor: pointer;
+            span {
+              font-size: 0.9rem;
+            }
+          }
+          .activeRange {
+            color: #fff;
+            background: #ff7bac;
+          }
+        }
+      }
+
+      .echarts-search-byDate {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: flex-start;
+        gap: 0.4rem;
+      }
+    }
+  }
+}
+</style>

src/components/customEcharts/size1920/index.vue

@@ -571,7 +571,7 @@ const handleDateRangeChange = (range) => {
     }
 
     .echarts-search-area {
-      padding: 0 16px 32px 16px;
+      padding: 0 16px 0 16px;
       display: flex;
       flex-direction: row;
       align-items: center;

src/components/customFooter/index.vue

@@ -1,30 +1,30 @@
 <script setup>
-import { computed } from 'vue'
+import { computed } from "vue";
-import { useWindowSize } from '@vueuse/core'
+import { useWindowSize } from "@vueuse/core";
 
-import size375 from '@/components/customFooter/size375/index.vue'
+import size375 from "@/components/customFooter/size375/index.vue";
-import size768 from '@/components/customFooter/size768/index.vue'
+import size768 from "@/components/customFooter/size768/index.vue";
-import size1440 from '@/components/customFooter/size1920/index.vue'
+import size1440 from "@/components/customFooter/size1440/index.vue";
-import size1920 from '@/components/customFooter/size1920/index.vue'
+import size1920 from "@/components/customFooter/size1920/index.vue";
-import { useRouter } from 'vue-router'
+import { useRouter } from "vue-router";
-import { useI18n } from 'vue-i18n'
+import { useI18n } from "vue-i18n";
 
-const router = useRouter()
+const router = useRouter();
-const { width } = useWindowSize()
+const { width } = useWindowSize();
-const { t } = useI18n()
+const { t } = useI18n();
 
 const viewComponent = computed(() => {
-  const viewWidth = width.value
+  const viewWidth = width.value;
   if (viewWidth <= 500) {
-    return size375
+    return size375;
   } else if (viewWidth <= 1100) {
-    return size768
+    return size768;
   } else if (viewWidth <= 1500) {
-    return size1440
+    return size1440;
   } else if (viewWidth <= 1920 || viewWidth > 1920) {
-    return size1920
+    return size1920;
   }
-})
+});
 </script>
 
 <template>

src/components/customFooter/size1440/index.vue

@@ -0,0 +1,68 @@
+<template>
+  <!-- 通用页脚 -->
+  <div class="custom-footer">
+    <div class="custom-footer-box">
+      <div class="footer-links">
+        <span @click="handleLink('privacyPolicy')">Privacy Policy</span>
+        <span @click="handleLink('termsOfUse')">Terms of use</span>
+        <span @click="handleLink('siteMap')">Site Map</span>
+      </div>
+      <span>&copy; 2025 FiEE, Inc. All Rights Reserved.</span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useRouter } from "vue-router";
+const router = useRouter();
+import privacyPolicy from "@/assets/file/footer/FiEE, Inc. _ Privacy policy.pdf";
+import termsOfUse from "@/assets/file/footer/FiEE, Inc. _ Terms of Use.pdf";
+import siteMap from "@/assets/file/footer/FiEE, Inc. _ Site Map.pdf";
+
+//点击跳转到对应的链接页面
+const handleLink = (link) => {
+  // if (link === "privacyPolicy") {
+  //   window.open(privacyPolicy, "_blank");
+  // } else if (link === "termsOfUse") {
+  //   window.open(termsOfUse, "_blank");
+  // } else if (link === "siteMap") {
+  //   window.open(siteMap, "_blank");
+  // }
+  router.push(link);
+};
+</script>
+
+<style scoped lang="scss">
+.custom-footer {
+  width: 100%;
+  background: #f5f5f5;
+  border-top: 2px solid #dbdbdb;
+  z-index: 100;
+  height: 80px;
+
+  .custom-footer-box {
+    width: 932px;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    letter-spacing: 1px;
+    color: #888;
+    font-size: 16px;
+    text-align: center;
+    height: 100%;
+  }
+
+  .footer-links {
+    span {
+      border-right: 1px solid #d2d2d7;
+      padding: 0 10px;
+      cursor: pointer;
+    }
+    span:nth-last-child(1) {
+      border: 0;
+    }
+  }
+}
+</style>

src/components/customFooter/size1920/index.vue

@@ -41,7 +41,7 @@ const handleLink = (link) => {
   height: 80px;
 
   .custom-footer-box {
-    max-width: 932px;
+    width: 932px;
     margin: 0 auto;
     display: flex;
     flex-direction: row;

src/components/customHeader/size1440/index.vue

@@ -160,12 +160,13 @@ const handleToHome = () => {
     position: relative;
     margin: 0 10px;
     transition: all 0.3s ease;
-    font-weight: 700;
+    font-size: 12px;
-    // font-size: 16px;
-    font-size: 0.875rem;
     min-width: 120px;
     text-align: center;
-
+    font-family: "PingFang SC";
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
     &::after {
       content: "";
       position: absolute;

src/router/index.js

@@ -1,7 +1,21 @@
 // router/index.js
 import { createRouter, createWebHistory } from "vue-router";
 import { setupRouterGuards } from "./router-guards";
-
+import { computed } from "vue";
+import { useWindowSize } from "@vueuse/core";
+const { width } = useWindowSize();
+const calculateWidth = computed(() => {
+  const viewWidth = width.value;
+  if (viewWidth <= 450) {
+    return 375;
+  } else if (viewWidth <= 1100) {
+    return 768;
+  } else if (viewWidth <= 1500) {
+    return 1440;
+  } else if (viewWidth <= 1920 || viewWidth > 1920) {
+    return 1920;
+  }
+});
 const routes = [
   {
     path: "/",
@@ -30,31 +44,31 @@ const routes = [
       {
         path: "/stock-quote",
         name: "stock-quote",
-        meta: { bg:'url("@/assets/image/1920/bg-stock-quote.png")' },
+        meta: { bg:'url("@/assets/image/'+calculateWidth.value+'/bg-stock-quote.png")' },
         component: () => import("@/views/stock-quote/index.vue"),
       },
       {
         path: "/historic-stock",
         name: "historic-stock",
-        meta: { bg: 'url("@/assets/image/1920/bg-events-calendar.png")' },
+        meta: { bg: 'url("@/assets/image/'+calculateWidth.value+'/bg-events-calendar.png")' },
         component: () => import("@/views/historic-stock/index.vue"),
       },
       {
         path: "/contacts",
         name: "contacts",
-        meta: { bg: 'url("@/assets/image/1920/bg-contacts.png")' },
+        meta: { bg: 'url("@/assets/image/'+calculateWidth.value+'/bg-contacts.png")' },
         component: () => import("@/views/contacts/index.vue"),
       },
       {
         path: "/email-alerts",
         name: "email-alerts",
-        meta: { bg: 'url("@/assets/image/1920/bg-contacts.png")' },
+        meta: { bg: 'url("@/assets/image/'+calculateWidth.value+'/bg-contacts.png")' },
         component: () => import("@/views/email-alerts/index.vue"),
       },
       {
         path: "/quarterlyreports",
         name: "quarterlyreports",
-        meta: { bg: 'url("@/assets/image/1920/bg-events-calendar.png")' },
+        meta: { bg: 'url("@/assets/image/'+calculateWidth.value+'/bg-events-calendar.png")' },
         component: () =>
           import("@/views/financialinformation/quarterlyreports/index.vue"),
       },
@@ -73,26 +87,26 @@ const routes = [
       {
         path: "/annualreports",
         name: "AnnualReports",
-        meta: { bg: 'url("@/assets/image/1920/bg-events-calendar.png")' },
+        meta: { bg: 'url("@/assets/image/'+calculateWidth.value+'/bg-events-calendar.png")' },
         component: () =>
           import("@/views/financialinformation/annualreports/index.vue"),
       },
       {
         path: "/press-releases",
         name: "press-releases",
-        meta: { bg: 'url("@/assets/image/1920/bg-events-calendar.png")' },
+        meta: { bg: 'url("@/assets/image/'+calculateWidth.value+'/bg-events-calendar.png")' },
         component: () => import("@/views/press-releases/index.vue"),
       },
       {
         path: "/news",
         name: "news",
-        meta: { bg: 'url("@/assets/image/1920/bg-news.png")' },
+        meta: { bg: 'url("@/assets/image/'+calculateWidth.value+'/bg-news.png")' },
         component: () => import("@/views/news/index.vue"),
       },
       {
         path: "/events-calendar",
         name: "events-calendar",
-        meta: { bg: 'url("@/assets/image/1920/bg-events-calendar.png")' },
+        meta: { bg: 'url("@/assets/image/'+calculateWidth.value+'/bg-events-calendar.png")' },
         component: () => import("@/views/events-calendar/index.vue"),
       },
       {

src/views/contacts/size1440/index.vue

@@ -8,40 +8,130 @@ function copyEmail() {
 </script>
 
 <template>
-  <main
+  <div class="contact-container">
-    ref="main"
+    <!-- Title Section -->
-    class="flex-center min-h-80vh rounded-3xl to-accent w-100vw animate-fade-in"
+    <div class="title-section">
-  >
+      <div class="title-decoration"></div>
-    <div class="w-full flex flex-col items-center gap-5 py-12 px-6">
+      <div class="contact-title">Investor Contacts</div>
-      <h1
+    </div>
-        class="text-4xl font-bold text-primary animate-fade-in-down animate-delay-0"
+
-      >
+    <!-- Card Section -->
-        Investor Contacts
+    <div class="contact-card">
-      </h1>
+      <div class="logo-text">FiEE Inc.</div>
-      <div
+      <div class="relation-text">Investor Relations</div>
-        class="text-2xl font-semibold text-gray-800 animate-fade-in-down animate-delay-200"
+      <div class="email-section">
-      >
-        FiEE Inc.
-      </div>
-      <div class="text-xl text-#ff7bac animate-fade-in-down animate-delay-400">
-        Investor Relations
-      </div>
-      <div
-        class="text-lg text-gray-600 flex items-center gap-2 animate-fade-in-down animate-delay-600"
-      >
         <span>Email:</span>
-        <span
+        <span class="email-address" @click="copyEmail"
-          class="transition-colors duration-300 cursor-pointer text-#00baff hover:text-primary active:text-secondary select-all"
-          @click="copyEmail"
           >fiee@dlkadvisory.com</span
         >
       </div>
     </div>
-  </main>
+  </div>
 </template>
 
 <style scoped lang="scss">
-/**** UnoCSS 动画补充（如未全局引入可在 uno.config.js 添加）****/
+.contact-container {
+  width: 1240px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.title-section {
+  width: 100%;
+  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;
+}
+
+.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: 1240px;
+  height: 860px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+  background-color: white;
+  border-radius: 1rem;
+  background-image: url("@/assets/image/1920/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;
@@ -52,19 +142,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>

src/views/contacts/size1920/index.vue

@@ -31,7 +31,7 @@ function copyEmail() {
 
 <style scoped lang="scss">
 .contact-container {
-  max-width: 932px;
+  width: 932px;
   margin: 0 auto;
 }
 

src/views/email-alerts/size1920/index.vue

@@ -104,7 +104,7 @@ async function handleSubmit(e) {
 
 <style scoped lang="scss">
 .alerts-container {
-  max-width: 932px;
+  width: 932px;
   margin: 0 auto;
   display: flex;
   flex-direction: column;

src/views/events-calendar/index.vue

@@ -4,26 +4,26 @@
   </div>
 </template>
 <script setup>
-import size375 from '@/views/events-calendar/size375/index.vue'
+import size375 from "@/views/events-calendar/size375/index.vue";
-import size768 from '@/views/events-calendar/size375/index.vue'
+import size768 from "@/views/events-calendar/size375/index.vue";
-import size1440 from '@/views/events-calendar/size1920/index.vue'
+import size1440 from "@/views/events-calendar/size1440/index.vue";
-import size1920 from '@/views/events-calendar/size1920/index.vue'
+import size1920 from "@/views/events-calendar/size1920/index.vue";
-import { computed } from 'vue'
+import { computed } from "vue";
-import { useWindowSize } from '@vueuse/core'
+import { useWindowSize } from "@vueuse/core";
 
-const { width } = useWindowSize()
+const { width } = useWindowSize();
 const viewComponent = computed(() => {
-  const viewWidth = width.value
+  const viewWidth = width.value;
   if (viewWidth <= 450) {
-    return size375
+    return size375;
   } else if (viewWidth <= 768) {
-    return size768
+    return size768;
   } else if (viewWidth <= 1500) {
-    return size1440
+    return size1440;
   } else if (viewWidth <= 1920 || viewWidth > 1920) {
-    return size1920
+    return size1920;
   }
-})
+});
 </script>
 
 <style scoped lang="scss"></style>

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

@@ -0,0 +1,217 @@
+<template>
+  <div class="events-calendar-page">
+    <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>
+
+        <!-- 搜索区域 -->
+        <div class="search-container">
+          <div class="date-picker-wrapper">
+            <n-date-picker
+              v-model:value="state.selectedDateValue"
+              type="date"
+              class="search-date-picker"
+              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>
+          <button @click="handleSearch" class="search-button">
+            {{ t("press_releases.search.button") }}
+          </button>
+        </div>
+
+        <!-- 背景图片区域 -->
+        <div class="background-image-container">
+          <img
+            src="@/assets/image/1920/events-calendar-bg.png"
+            alt="Events Calendar Background"
+            class="background-image"
+          />
+        </div>
+      </div>
+    </main>
+  </div>
+</template>
+
+<script setup>
+import { reactive } from "vue";
+import { NDatePicker, NButton } from "naive-ui";
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
+
+const state = reactive({
+  selectedDateValue: null, //选中值
+});
+
+const handleSearch = () => {
+  // 搜索处理逻辑
+  // console.log('搜索:', state.selectedDateValue)
+};
+</script>
+
+<style scoped lang="scss">
+.page-container {
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.events-container {
+  width: 1240px;
+  margin: 0 auto;
+}
+
+.title-section {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  margin-bottom: 32px;
+  padding: 0 16px;
+  margin-top: 43px;
+}
+
+.title-decoration {
+  width: 58px;
+  height: 7px;
+  background: #ff7bac;
+  margin: auto 0;
+  margin-top: 0;
+}
+
+.events-title {
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 500;
+  font-size: 40px;
+  line-height: 1.4em;
+  letter-spacing: 1.2px;
+  color: #000000;
+}
+
+.search-container {
+  margin-bottom: 20px;
+  display: flex;
+  align-items: center;
+  gap: 32px;
+  padding: 0 16px;
+}
+
+.date-picker-wrapper {
+  flex: 1;
+  position: relative;
+}
+
+.search-date-picker {
+  width: 100%;
+}
+
+:deep(.n-input) {
+  border-radius: 3px;
+  border: 1px solid #e0e0e6;
+  &:hover {
+    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: 46px;
+  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: 0.03em;
+  &:hover {
+    background: #ff7bac;
+    color: #fff;
+  }
+}
+
+.background-image-container {
+  background: #fff;
+  width: 100%;
+  height: 800px;
+  box-shadow: 0px 3px 14px 0px rgba(0, 0, 0, 0.16);
+  border-radius: 16px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.background-image {
+  width: 415px;
+  height: 235px;
+  flex-shrink: 0;
+}
+</style>

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

@@ -114,7 +114,7 @@ const handleSearch = () => {
 }
 
 .events-container {
-  max-width: 932px;
+  width: 932px;
   margin: 0 auto;
 }
 

src/views/financialinformation/quarterlyreports/size1920/index.vue

@@ -340,7 +340,7 @@ const handleClickOutside = (event) => {
 </script>
 <style scoped lang="scss">
 .page-container {
-  max-width: 932px;
+  width: 932px;
   margin: 0 auto;
 }
 

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

@@ -1,96 +1,191 @@
 <template>
-  <div class="historic-data-container" style="margin-bottom: 40px">
+  <div class="historic-data-container w-[1240px]">
     <div class="echarts-container">
       <customEcharts></customEcharts>
     </div>
-
+    <div class="header">
-    <div class="header mt-[20px]">
+      <!-- 标题区域 -->
-      <div class="title">Historical Data</div>
+      <div class="title-section">
-      <div class="filter-container">
+        <div class="title-decoration"></div>
-        <!-- <n-dropdown
+        <div class="historic-title">Historical Data</div>
-          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>
     </div>
 
-    <n-data-table
+    <div class="filter-container">
-      :columns="columns"
+      <span class="range-label">Range</span>
-      :data="paginatedData"
+      <div
-      :bordered="false"
+        v-for="option in durationOptions"
-      :single-line="false"
+        :key="option.key"
-      :scroll-x="1200"
+        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">
+      <div class="pagination-info">
-        <n-icon><chevron-back-outline /></n-icon>
+        Displaying {{ displayRange.start }} - {{ displayRange.end }} of
-        Previous
+        {{ state.tableData.length }} results
-      </n-button>
-
-      <div class="page-info">
-        Page {{ state.currentPage }} of {{ totalPages }}
       </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">
+          <template v-for="page in getVisiblePages()" :key="page">
-        <n-dropdown
+            <button
-          trigger="click"
+              v-if="page !== '...'"
-          :options="pageSizeOptions"
+              class="page-btn"
-          @select="handlePageSizeChange"
+              :class="{ active: page === state.currentPage }"
-        >
+              @click="goToPage(page)"
-          <n-button class="rows-dropdown">
+            >
-            {{ state.pageSize }} Rows
+              {{ page }}
-            <n-icon><chevron-down-outline /></n-icon>
+            </button>
-          </n-button>
+            <button v-else class="page-btn disabled" disabled>...</button>
-        </n-dropdown>
+          </template>
 
-        <n-button class="page-btn next-btn" @click="handleNextPage">
+          <button
-          Next
+            class="page-btn next-btn"
-          <n-icon><chevron-forward-outline /></n-icon>
+            :disabled="state.currentPage === totalPages"
-        </n-button>
+            @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 { NDropdown, NIcon } from "naive-ui";
-import { reactive, onMounted, h, computed } from "vue";
+import { reactive, onMounted, h, computed, ref, watch, onUnmounted } from "vue";
 import axios from "axios";
-import {
+import { ChevronDownOutline, ArrowUpOutline } from "@vicons/ionicons5";
-  ChevronDownOutline,
-  ChevronBackOutline,
-  ChevronForwardOutline,
-  ArrowUpOutline,
-} from "@vicons/ionicons5";
 import defaultTableData from "../data";
-// console.log('defaultTableData', defaultTableData)
 import customEcharts from "@/components/customEcharts/index.vue";
 
 // 数据筛选选项
@@ -105,15 +200,15 @@ const periodOptions = [
 const durationOptions = [
   { label: "3 Months", key: "3 Months" },
   { label: "6 Months", key: "6 Months" },
-  { label: "Year to Date", key: "Year to Date" },
+  { label: "YTD", key: "Year to Date" },
   { label: "1 Year", key: "1 Year" },
   { label: "5 Years", key: "5 Years" },
   { label: "10 Years", key: "10 Years" },
-  // { label: 'Full History', key: 'Full History', disabled: true },
 ];
 
 // 分页大小选项
 const pageSizeOptions = [
+  { label: "10", key: 10 },
   { label: "50", key: 50 },
   { label: "100", key: 100 },
   { label: "500", key: 500 },
@@ -125,9 +220,12 @@ const state = reactive({
   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);
@@ -173,16 +271,12 @@ const columns = [
     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: "Volume",
@@ -215,26 +309,91 @@ const handleDurationChange = (key) => {
   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; // 重置到第一页
 };
 
+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 = () => {
   // 尝试多种方法
@@ -250,8 +409,32 @@ const scrollToTop = () => {
 };
 onMounted(() => {
   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 =
@@ -343,14 +526,12 @@ const getPageData = async () => {
     String(fromDate.getMonth() + 1).padStart(2, "0") +
     "-" +
     String(fromDate.getDate()).padStart(2, "0");
-  // let url = `https://stockanalysis.com/api/symbol/a/OTC-MINM/history?period=${state.selectedPeriod}&range=${range}`
   let url =
     "https://common.szjixun.cn/api/stock/history/list?from=" +
     finalFromDate +
     "&to=" +
     toDate;
   const res = await axios.get(url);
-  // console.error(res)
   if (res.status === 200) {
     if (res.data.status === 0) {
       // 转换为日期格式："Nov 26, 2024"
@@ -381,74 +562,61 @@ const getPageData = async () => {
 
 <style scoped lang="scss">
 .historic-data-container {
-  padding: 20px;
+  // width: 932px;
-  max-width: 1200px;
   margin: 0 auto;
 
   .header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 20px;
+    margin-bottom: 40px;
 
     .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;
+    gap: 16px;
-    padding: 10px 16px;
+    padding: 0 16px;
-    border-radius: 4px;
+    margin-bottom: 32px;
-    background-color: #ffffff;
+    margin-top: 32px;
 
-    .page-btn {
+    .range-label {
-      display: flex;
+      font-family: "PingFang SC", sans-serif;
-      align-items: center;
+      font-weight: 400;
-      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 {
       font-size: 16px;
-      color: #374151;
+      line-height: 1.375em;
-      margin: 0 10px;
+      letter-spacing: 3%;
+      color: #455363;
     }
 
-    .right-controls {
+    .filter-option {
-      display: flex;
+      padding: 7px 12px;
-      align-items: center;
+      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 {
+      &:hover {
-        font-size: 16px;
+        background-color: #e0e0e0;
+      }
+
+      &.active {
+        background-color: #ff7bac;
+        color: #ffffff;
       }
     }
   }
-
   .back-to-top-link {
     display: flex;
     justify-content: center;
@@ -468,11 +636,258 @@ const getPageData = async () => {
       }
     }
   }
+}
 
-  :deep(.n-data-table) {
+.reports-table {
-    .n-data-table-td {
+  width: 100%;
-      padding: 12px 8px;
+  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;
+  margin-top: 20px;
+  justify-content: flex-end;
+  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: 8px;
+}
+
+.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;
+  margin-right: 16px;
+}
+
+.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>

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

@@ -562,7 +562,7 @@ const getPageData = async () => {
 
 <style scoped lang="scss">
 .historic-data-container {
-  max-width: 932px;
+  width: 932px;
   margin: 0 auto;
 
   .header {

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

@@ -1,79 +1,206 @@
 <template>
   <div class="press-releases-page">
-    <n-infinite-scroll :distance="0" @load="doLoadMore">
+    <main class="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">
+      </div>
-          <n-select
+      <div class="search-container">
-            :options="state.selectOptions"
+        <n-select
-            v-model:value="state.selectedValue"
+          :options="state.selectOptions"
-            class="search-select"
+          v-model:value="state.selectedValue"
-          />
+          class="search-select"
-          <n-input
+        />
-            v-model:value="state.inputValue"
+        <input
-            type="text"
+          v-model="state.inputValue"
-            :placeholder="t('press_releases.search.placeholder')"
+          type="text"
-            class="search-input"
+          :placeholder="t('press_releases.search.placeholder')"
-          />
+          class="search-input"
-          <n-button @click="handleSearch" class="search-button w-[80px]">
+        />
-            {{ t("press_releases.search.button") }}
+        <button @click="handleSearch" class="search-button">
-          </n-button>
+          {{ t("press_releases.search.button") }}
-        </div>
+        </button>
-        <div v-for="(item, idx) in state.filterNewsData" :key="idx">
+      </div>
-          <div class="news-item mt-[10px]">
+      <div class="reports-list">
-            <div class="news-item-date">{{ item.date }}</div>
+        <div
-            <div
+          v-for="(item, idx) in state.filterNewsData"
-              class="news-item-title text-[#0078d7] cursor-pointer"
+          :key="idx"
-              style="
+          class="news-item table-row"
-                word-break: break-word;
+        >
-                display: -webkit-box;
+          <div class="content">
-                -webkit-line-clamp: 2;
+            <div class="file-content">
-                -webkit-box-orient: vertical;
+              <div class="file-info">
-                overflow: hidden;
+                <div class="vertical-line"></div>
-                text-overflow: ellipsis;
-              "
-              @click="handleNewClick(item)"
-            >
-              {{ item.title }}
-            </div>
-            <n-tooltip
-              trigger="hover"
-              :disabled="!item.showTooltip"
-              width="trigger"
-            >
-              <template #trigger>
                 <div
-                  :ref="(el) => setTitleRef(el, idx)"
+                  class="news-item-title text-[#000] cursor-pointer"
-                  class="news-item-content"
                   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>
+              </n-tooltip>
-              <div slot="content">
+              <div class="download-section">
-                {{ item.summary }}
+                <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>
+      </div>
-    </n-infinite-scroll>
+    </main>
   </div>
 </template>
 
 <script setup>
 import customDefaultPage from "@/components/customDefaultPage/index.vue";
-import { reactive, onMounted, watch, nextTick, ref } from "vue";
+import {
-import { NSelect, NInput, NButton, NInfiniteScroll, NTooltip } from "naive-ui";
+  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
-  axios.post(url, params).then((res) => {
+    .post(url, params)
-    // console.log(res)
+    .then((res) => {
-    if (res.status === 200) {
+      if (res.status === 200) {
-      if (res.data.status === 0) {
+        if (res.data.status === 0) {
-        res.data.data?.data?.forEach((item) => {
+          res.data.data?.data?.forEach((item) => {
-          item.date = new Date(item.createdAt).toLocaleDateString("en-US", {
+            item.date = new Date(item.createdAt).toLocaleDateString("en-US", {
-            month: "short",
+              month: "short",
-            day: "numeric",
+              day: "numeric",
-            year: "numeric",
+              year: "numeric",
+            });
           });
-        });
-        if (state.currentPage === 1) {
           state.filterNewsData = res.data.data?.data || [];
-        } else {
+          state.total = res.data.data?.total || 0;
-          state.filterNewsData = [
-            ...state.filterNewsData,
-            ...(res.data.data?.data || []),
-          ];
-        }
-        if (state.filterNewsData.length < (res.data.data?.total || 0)) {
-          state.hasMore = true;
-        } else {
-          state.hasMore = false;
         }
       }
-    }
+    })
-  });
+    .finally(() => {
-};
+      state.loading = false;
-
-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;
     });
-  }
-
-  // 按输入内容进行模糊查询（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,24 +347,120 @@ const handleNewClick = (item) => {
   });
 };
 
-//加载更多数据
+const totalPages = computed(() => {
-const doLoadMore = () => {
+  return Math.ceil(state.total / state.pageSize) || 1;
-  if (!state.hasMore || state.loading) {
+});
-    return;
+
+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 {
+  width: 1240px;
+  margin: 0 auto;
+}
+.title-section {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 0 16px;
+  margin-bottom: 40px;
+}
+.title-decoration {
+  width: 58px;
+  height: 7px;
+  background: #ff7bac;
+  margin: auto 0;
+  margin-top: 43px;
+}
 .title {
-  font-size: 40px;
+  font-family: "PingFang SC";
-  color: #333;
+  font-size: 48px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 58px;
+  color: #000;
 }
 
 .search-container {
@@ -283,18 +469,30 @@ const doLoadMore = () => {
   flex-direction: row;
   align-items: center;
   justify-content: flex-start;
-  gap: 10px;
+  gap: 16px;
+  padding: 0 16px;
 }
 
 .search-select {
-  width: 7rem;
+  width: 200px;
-  :deep(.n-base-selection) {
-    padding: 4px 0;
-  }
 }
 
 .search-input {
-  width: 240px;
+  flex: 1;
+  height: 46px;
+  padding: 7px;
+  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: 0.03em;
+  color: #455363;
+
+  &::placeholder {
+    color: #b6b6b6;
+  }
 }
 
 :deep(.n-input) {
@@ -318,11 +516,293 @@ const doLoadMore = () => {
   border-radius: 4px;
 }
 .search-button {
+  height: 46px;
+  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: 0.03em;
   &: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;
+  padding: 24px 0;
+}
+
+.file-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  padding-right: 16px;
+  &:hover {
+    background: #fff8fb;
+  }
+}
+
+.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: 20px;
+  line-height: 24px;
+  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: 0.03em;
+  color: #455363;
+  margin: 0;
+  padding-left: 21px;
+  margin-top: 4px;
+}
+
+.news-item-date {
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 400;
+  font-size: 20px;
+  line-height: 24px;
+  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,
+    #e0e0e6 0px,
+    #e0e0e6 4px,
+    transparent 4px,
+    transparent 8px
+  );
+  margin-top: 0;
+}
+
+// 分页器样式
+.pagination-container {
+  display: flex;
+  align-items: center;
+  margin-top: 20px;
+  justify-content: flex-end;
+  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: 8px;
+}
+
+.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;
+  margin-right: 16px;
+}
+
+.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>

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

@@ -437,7 +437,7 @@ const handleClickOutside = (event) => {
 
 <style scoped lang="scss">
 .press-releases-page {
-  max-width: 932px;
+  width: 932px;
   margin: 0 auto;
 }
 .title-section {

src/views/product-introduction/index.vue

@@ -4,7 +4,7 @@ import { useWindowSize } from "@vueuse/core";
 
 // import size375 from "./size375/index.vue";
 // import size768 from "./size768/index.vue";
-// import size1440 from "./size1440/index.vue";
+import size1440 from "./size1440/index.vue";
 import size1920 from "./size1920/index.vue";
 import { useRouter } from "vue-router";
 import { useI18n } from "vue-i18n";
@@ -15,15 +15,15 @@ const { t } = useI18n();
 
 const viewComponent = computed(() => {
   const viewWidth = width.value;
-  // if (viewWidth <= 450) {
+  if (viewWidth <= 450) {
-  //   return size375;
+    return size375;
-  // } else if (viewWidth <= 1100) {
+  } else if (viewWidth <= 1100) {
-  //   return size768;
+    return size768;
-  // } else if (viewWidth <= 1500) {
+  } else if (viewWidth <= 1500) {
-  //   return size1440;
+    return size1440;
-  // } else if (viewWidth <= 1920 || viewWidth > 1920) {
+  } else if (viewWidth <= 1920 || viewWidth > 1920) {
-  return size1920;
+    return size1920;
-  // }
+  }
 });
 </script>
 

src/views/product-introduction/size1440/index.vue

@@ -0,0 +1,600 @@
+<script setup></script>
+
+<template>
+  <div class="page-container">
+    <div class="grid-lines">
+      <div class="line solid line-1"></div>
+      <div class="line dashed line-2"></div>
+      <div class="line dashed line-3"></div>
+      <div class="line dashed line-4"></div>
+      <div class="line solid line-5"></div>
+    </div>
+    <section class="hero-section relative">
+      <div class="hero-content">
+        <div class="hero-title">
+          More than just a tool——<br />
+          Comprehensive growth solutions, <br />
+          providing a one-stop solution for content creation,<br />
+          publishing, analysis, and monetization
+        </div>
+      </div>
+      <div class="core-value-card">
+        <div class="card-content">
+          <div class="card-title">Core Value</div>
+          <div class="card-text">
+            The FIEE-SAAS platform is a one-stop content operation solution
+            tailored for creators in the digital era. The platform utilizes
+            intelligent distribution technology, A1 empowerment tools, and
+            full-chain services,Assist you in efficiently reaching audiences on
+            global mainstream platforms such as TikTok, YouTube, and Instagram,
+            creating a KOL brand effect, unlocking content value, and achieving
+            sustainable growth.
+          </div>
+        </div>
+      </div>
+      <img
+        src="@/assets/image/1920/product-introduction-img2.png"
+        alt="background"
+        class="hero-bg-img"
+      />
+    </section>
+
+    <section class="features-section">
+      <div class="section-header">
+        <div class="decorator-bar"></div>
+        <div class="section-title">Product Features</div>
+      </div>
+      <div class="features-list">
+        <div class="feature-item">
+          <div class="feature-title">
+            <div class="vertical-line"></div>
+            One-click Synchronous Publishing
+          </div>
+          <div class="feature-description">
+            Synchronize graphic and video content to TikTok, YouTube, and
+            Instagram platforms at once, saving time on repetitive operations.
+          </div>
+        </div>
+        <div class="feature-item">
+          <div class="feature-title">
+            <div class="vertical-line"></div>
+            Intelligent Scheduled Publishing
+          </div>
+          <div class="feature-description">
+            Plan the content release time in advance, support batch scheduling,
+            and accurately grasp the optimal release time of each platform.
+          </div>
+        </div>
+        <div class="feature-item">
+          <div class="feature-title">
+            <div class="vertical-line"></div>
+            Unified Management of Multiple Accounts
+          </div>
+          <div class="feature-description">
+            Easily manage multiple accounts on one platform without the need for
+            repeated login and switching, improving team collaboration
+            efficiency.
+          </div>
+        </div>
+        <div class="feature-item">
+          <div class="feature-title">
+            <div class="vertical-line"></div>
+            Cloud Content Library
+          </div>
+          <div class="feature-description">
+            Safely store and manage all creative materials, access and use them
+            anytime, anywhere, and support quick retrieval and reuse.
+          </div>
+        </div>
+        <div class="feature-item">
+          <div class="feature-title">
+            <div class="vertical-line"></div>
+            Basic Data Tracking
+          </div>
+          <div class="feature-description">
+            Visually view the content performance of various platforms,
+            understand core data indicators, and provide a basis for optimizing
+            strategies.
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="solutions-section">
+      <div class="section-header">
+        <div class="decorator-bar"></div>
+        <div class="section-title">Value Added Solutions</div>
+      </div>
+      <div class="solutions-content">
+        <div class="solutions-list">
+          <div class="solution-item">
+            <img
+              src="@/assets/image/1920/product-introduction-icon1.png"
+              alt="KOL Brand Promotion"
+              class="solution-icon"
+            />
+            <div class="solution-title">
+              <div class="vertical-line"></div>
+              KOL Brand Promotion Services
+            </div>
+            <div class="solution-description">
+              Efficiently connect high-quality business cooperation
+              opportunities and complete the entire process management from
+              order acceptance to publication within the platform.
+            </div>
+          </div>
+          <div class="solution-item">
+            <img
+              src="@/assets/image/1920/product-introduction-icon2.png"
+              alt="Content Creation Support"
+              class="solution-icon"
+            />
+            <div class="solution-title">
+              <div class="vertical-line"></div>
+              Professional Content Creation Support
+            </div>
+            <div class="solution-description">
+              Connect professional shooting and post production teams for you,
+              create high-quality "art+story" content, and strengthen IP
+              influence.
+            </div>
+          </div>
+          <div class="solution-item">
+            <img
+              src="@/assets/image/1920/product-introduction-icon3.png"
+              alt="Account Operation"
+              class="solution-icon"
+            />
+            <div class="solution-title">
+              <div class="vertical-line"></div>
+              Account Operation and Hosting Services
+            </div>
+            <div class="solution-description">
+              From 0 to 1 account positioning, follower growth strategy to
+              monetization cycle, operation experts provide full cycle running
+              and hosting services.
+            </div>
+          </div>
+        </div>
+        <div class="solution-image-container">
+          <img
+            src="@/assets/image/1920/product-introduction-img1.png"
+            alt="Value Added Solutions"
+            class="solution-image"
+          />
+        </div>
+      </div>
+    </section>
+
+    <section class="advantages-section">
+      <div class="advantages-content">
+        <div class="advantages-header">
+          <div class="decorator-bar"></div>
+          <div class="section-title text-white">Our Advantages</div>
+        </div>
+        <div class="advantages-list">
+          <div class="advantage-item">
+            <div class="advantage-title">
+              <div class="vertical-line"></div>
+              Time Saving
+            </div>
+            <div class="advantage-description">
+              Multi platform publishing efficiency improvement, allowing you to
+              focus on content creation.
+            </div>
+          </div>
+          <div class="advantage-item">
+            <div class="advantage-title">
+              <div class="vertical-line"></div>
+              Safe and Reliable
+            </div>
+            <div class="advantage-description">
+              Enterprise level data encryption and permission control ensure
+              account and content security.
+            </div>
+          </div>
+          <div class="advantage-item">
+            <div class="advantage-title">
+              <div class="vertical-line"></div>
+              Maintain Consistency
+            </div>
+            <div class="advantage-description">
+              Ensure that brand information is presented uniformly on all
+              platforms.
+            </div>
+          </div>
+          <div class="advantage-item">
+            <div class="advantage-title">
+              <div class="vertical-line"></div>
+              Data Driven
+            </div>
+            <div class="advantage-description">
+              Optimizing Content Strategies Based on Actual Performance.
+            </div>
+          </div>
+          <div class="advantage-item">
+            <div class="advantage-title">
+              <div class="vertical-line"></div>
+              Easy to Use
+            </div>
+            <div class="advantage-description">
+              Intuitive interface design, no need for professional technical
+              background.
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="cta-section">
+      <img
+        src="@/assets/image/1920/product-introduction-img5.png"
+        alt="background"
+        class="cta-bg-img"
+      />
+      <div class="cta-content">
+        <div class="cta-text">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="60"
+            height="32"
+            viewBox="0 0 60 32"
+            fill="none"
+          >
+            <path
+              d="M42.4968 0.636391C43.3437 -0.21213 44.7165 -0.21213 45.5635 0.636391L59.3648 14.4638C60.2117 15.3123 60.2117 16.6877 59.3648 17.5362L45.5635 31.3636C44.7165 32.2121 43.3437 32.2121 42.4968 31.3636C41.6499 30.5151 41.6499 29.1397 42.4968 28.2912L52.5962 18.1728H2.16868C0.970951 18.1728 0 17.2 0 16C0 14.8 0.970951 13.8272 2.16868 13.8272H52.5962L42.4968 3.70883C41.6499 2.86031 41.6499 1.48491 42.4968 0.636391Z"
+              fill="#FF7BAC"
+            />
+          </svg>
+          <div class="cta-title">
+            Get customized <br />
+            solutions for free
+          </div>
+        </div>
+        <div class="cta-qr-code">
+          <img
+            src="@/assets/image/1920/product-introduction-img6.png"
+            alt="QR Code"
+          />
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<style scoped>
+.page-container {
+  background-color: #fff;
+  font-family: "PingFang SC", sans-serif;
+  /* width:1240px */
+  margin: 0 auto;
+  position: relative;
+}
+
+.hero-section {
+  text-align: center;
+  position: relative;
+  background-image: url("@/assets/image/1920/product-introduction-img3.png");
+  background-repeat: no-repeat;
+  background-size: 100% auto;
+  background-position: top;
+}
+
+.hero-content {
+  position: relative;
+  z-index: 2;
+}
+
+.hero-title {
+  font-size: 40px;
+  font-weight: 500;
+  line-height: 56px;
+  letter-spacing: 1.2px;
+  padding: 153px 0;
+  color: #000;
+  z-index: 2;
+}
+.hero-bg-img {
+  position: absolute;
+  bottom: -84px;
+  left: 0;
+  width: 100%;
+  /* height: 100%; */
+  z-index: 1;
+}
+.core-value-card {
+  width: 1240px;
+  padding: 40px 32px;
+  margin: 0 auto;
+  background-color: #fff;
+  border-radius: 16px;
+  box-shadow: 0px 3px 14px 0px rgba(0, 0, 0, 0.16);
+  text-align: left;
+  z-index: 2;
+  position: relative;
+}
+
+.card-content {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.card-title {
+  font-size: 40px;
+  font-weight: 500;
+  line-height: 56px;
+  letter-spacing: 1.2px;
+}
+
+.card-text {
+  font-size: 16px;
+  line-height: 22px;
+  color: #455363;
+  letter-spacing: 0.48px;
+}
+
+.section-header {
+  margin-bottom: 32px;
+  padding: 0 16px;
+}
+
+.decorator-bar {
+  width: 58px;
+  height: 7px;
+  background-color: #ff7bac;
+  margin-bottom: 16px;
+}
+
+.section-title {
+  font-size: 40px;
+  font-weight: 500;
+  line-height: 56px;
+  letter-spacing: 1.2px;
+  color: #000;
+}
+.features-section {
+  padding-top: 200px;
+  width: 1240px;
+  margin: 0 auto;
+}
+.features-list {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.feature-item {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.feature-title {
+  font-size: 24px;
+  font-weight: 500;
+  line-height: 32px;
+  letter-spacing: 1.2px;
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+}
+.feature-description {
+  font-size: 16px;
+  line-height: 22px;
+  color: #455363;
+  letter-spacing: 0.48px;
+  padding: 0 16px;
+}
+
+.solutions-section {
+  padding-top: 80px;
+  width: 1240px;
+  margin: 0 auto;
+}
+.solutions-content {
+  display: flex;
+  gap: 24px;
+}
+.solutions-list {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  width: 466px;
+}
+.solution-item {
+  text-align: left;
+  display: flex;
+  flex-direction: column;
+}
+.solution-icon {
+  width: 92px;
+  height: 76px;
+  padding-left: 16px;
+}
+.solution-title {
+  font-family: "PingFang SC";
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 32px; /* 133.333% */
+  letter-spacing: 1.2px;
+  display: flex;
+  gap: 16px;
+  align-items: flex-start;
+  margin-bottom: 16px;
+}
+.solution-description {
+  font-size: 16px;
+  line-height: 22px;
+  color: #455363;
+  letter-spacing: 0.48px;
+  padding: 0 16px;
+}
+.solution-image-container {
+  width: 434px;
+  border-radius: 16px;
+}
+.solution-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 16px;
+}
+
+.advantages-section {
+  margin-top: 80px;
+  padding: 80px 0;
+  background-image: url("@/assets/image/1920/product-introduction-img4.png");
+  background-size: cover;
+  background-position: center;
+  color: #fff;
+  position: relative;
+}
+
+.advantages-content {
+  width: 1240px;
+  margin: 0 auto;
+  display: flex;
+  gap: 16px;
+  position: relative;
+  z-index: 1;
+}
+
+.advantages-header {
+  width: 466px;
+  padding: 0 16px;
+}
+.advantages-list {
+  width: 466px;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+.advantage-item {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.advantage-title {
+  font-size: 24px;
+  font-weight: 500;
+  line-height: 32px;
+  letter-spacing: 1.2px;
+  display: flex;
+  gap: 16px;
+  align-items: flex-start;
+}
+.advantage-description {
+  font-size: 16px;
+  line-height: 22px;
+  letter-spacing: 0.48px;
+  opacity: 0.7;
+}
+.text-white {
+  color: #fff;
+}
+
+.cta-section {
+  padding: 80px 0;
+  position: relative;
+  width: 1240px;
+  margin: 0 auto;
+  overflow: hidden;
+}
+.cta-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 16px;
+  position: relative;
+  z-index: 1;
+}
+.cta-text {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 188px;
+}
+.cta-arrow {
+  width: 60px;
+  height: 32px;
+}
+.cta-title {
+  font-size: 40px;
+  font-weight: 500;
+  line-height: 56px;
+  letter-spacing: 1.2px;
+}
+.cta-qr-code {
+  width: 188px;
+  height: 188px;
+  background-color: #90ffff;
+  border-radius: 16px;
+  padding: 14px;
+}
+.cta-qr-code img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+.cta-bg-img {
+  position: absolute;
+  top: 80px;
+  left: 201px;
+  width: 530px;
+  height: 268px;
+  opacity: 0.8;
+  z-index: 0;
+}
+.vertical-line {
+  width: 1px;
+  height: 20px;
+  background: #ff7bac;
+  flex-shrink: 0;
+  margin-top: 6px;
+}
+
+.grid-lines {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 1240px;
+  height: 100%;
+  pointer-events: none;
+  z-index: 0;
+}
+
+.grid-lines .line {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+}
+
+.grid-lines .line.solid {
+  width: 1px;
+  background-color: rgba(0, 0, 0, 0.08);
+}
+
+.grid-lines .line.dashed {
+  width: 0;
+  border-left: 1px dotted rgba(0, 0, 0, 0.12);
+}
+
+.grid-lines .line-1 {
+  left: 0;
+}
+.grid-lines .line-2 {
+  left: 233px;
+}
+.grid-lines .line-3 {
+  left: 466px;
+}
+.grid-lines .line-4 {
+  left: 699px;
+}
+.grid-lines .line-5 {
+  right: 0;
+}
+</style>

src/views/product-introduction/size1920/index.vue

@@ -266,7 +266,7 @@
 .page-container {
   background-color: #fff;
   font-family: "PingFang SC", sans-serif;
-  /* max-width: 932px; */
+  /* width:932px */
   margin: 0 auto;
   position: relative;
 }
@@ -355,7 +355,7 @@
 }
 .features-section {
   padding-top: 200px;
-  max-width: 932px;
+  width: 932px;
   margin: 0 auto;
 }
 .features-list {
@@ -389,7 +389,7 @@
 
 .solutions-section {
   padding-top: 80px;
-  max-width: 932px;
+  width: 932px;
   margin: 0 auto;
 }
 .solutions-content {
@@ -453,7 +453,7 @@
 }
 
 .advantages-content {
-  max-width: 932px;
+  width: 932px;
   margin: 0 auto;
   display: flex;
   gap: 16px;
@@ -498,7 +498,7 @@
 .cta-section {
   padding: 80px 0;
   position: relative;
-  max-width: 932px;
+  width: 932px;
   margin: 0 auto;
   overflow: hidden;
 }

src/views/stock-quote/size1440/index.vue

@@ -1,79 +1,209 @@
 <script setup>
-import { NCarousel, NDivider, NMarquee, NPopselect } from "naive-ui";
-import { onUnmounted, ref, watch, onMounted, computed } from "vue";
 import { useStockQuote } from "@/store/stock-quote/index.js";
 const { getStockQuate, stockQuote, formatted } = useStockQuote();
-
+console.log(stockQuote);
 getStockQuate();
 </script>
 
 <template>
-  <main
+  <main ref="main" class="stock-quote-hero">
-    ref="main"
+    <div class="hero-content">
-    class="flex pt-80px flex-col md:flex-row justify-center items-center gap-24 rounded-3xl"
+      <!-- 标题区域 -->
-  >
+      <div class="title-section">
-    <!-- 左侧大号价格 -->
+        <div class="title-decoration"></div>
-    <section
+        <div class="stock-title">Stock Quote</div>
-      class="flex flex-col items-center justify-center glass-card p-24 rounded-2xl shadow-xl"
-    >
-      <div
-        class="text-8xl font-extrabold text-#ff7bac animate-bg-move select-none drop-shadow-lg"
-      >
-        ${{ stockQuote.price }}
       </div>
-      <div
+      <section class="quote-layout">
-        class="mt-8 text-2xl text-gray-500 font-semibold tracking-widest mb-8px"
+        <div class="price-card">
-      >
+          <div class="price-value">${{ stockQuote.price }}</div>
-        NASDAQ: <span class="text-black">FIEE</span>
+          <div class="price-market">NASDAQ: FIEE</div>
-      </div>
+          <div class="price-time">{{ formatted }}</div>
-      <div class="text-gray-500">{{ formatted }}</div>
-    </section>
-    <!-- 右侧信息卡片 -->
-    <section class="grid grid-cols-2 gap-12">
-      <div class="info-card">
-        <div class="text-base text-gray-400">Open</div>
-        <div class="text-2xl font-bold">{{ stockQuote.open }}</div>
-      </div>
-      <div class="info-card">
-        <div class="text-base text-gray-400">% Change</div>
-        <div
-          class="text-3xl font-bold"
-          :class="
-            stockQuote.change?.includes('-') ? 'text-green-500' : 'text-red-500'
-          "
-        >
-          {{ stockQuote.change }}
         </div>
-      </div>
+        <div class="stats-table">
-      <div class="info-card">
+          <div class="stats-cell">
-        <div class="text-base text-gray-400">Day's Range</div>
+            <span class="stat-title">Open</span>
-        <div class="text-2xl font-bold">{{ stockQuote.daysRange }}</div>
+            <span class="stat-value">{{ stockQuote.open }}</span>
-      </div>
+          </div>
-      <div class="info-card">
+          <div class="stats-cell">
-        <div class="text-base text-gray-400">52-Week Range</div>
+            <span class="stat-title">% Change</span>
-        <div class="text-2xl font-bold">{{ stockQuote.week52Range }}</div>
+            <span
-      </div>
+              class="stat-value"
-      <div class="info-card">
+              :class="
-        <div class="text-base text-gray-400">Volume</div>
+                stockQuote.change
-        <div class="text-2xl font-bold">{{ stockQuote.volume }}</div>
+                  ? String(stockQuote.change).includes('-')
-      </div>
+                    ? 'negative-change'
-      <div class="info-card">
+                    : String(stockQuote.change).includes('+')
-        <div class="text-base text-gray-400">Market Cap</div>
+                    ? 'positive-change'
-        <div class="text-2xl font-bold">{{ stockQuote.marketCap }}</div>
+                    : 'neutral-change'
-      </div>
+                  : 'neutral-change'
-    </section>
+              "
+            >
+              {{ 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 lang="scss">
+<style scoped>
-/* 玻璃拟态和卡片动画可用 UnoCSS 快捷方式实现，若未配置可加如下样式 */
+.stock-quote-hero {
-.glass-card {
+  position: relative;
-  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);
 }
-.info-card {
+
-  @apply glass-card p-5 rounded-xl flex flex-col items-start gap-1 hover:scale-105 transition-transform duration-300;
+.hero-content {
+  width: 1240px;
+  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;
+  margin-top: 40px;
+}
+
+.title-decoration {
+  width: 58px;
+  height: 7px;
+  background: #ff7bac;
+  margin: auto 0;
+}
+
+.stock-title {
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 500;
+  font-size: 40px;
+  line-height: 56px;
+  color: #000000;
+  letter-spacing: 1.2px;
+}
+
+.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: 32px;
+  gap: 24px;
+}
+
+.price-card {
+  width: 616px;
+  height: 555px;
+  border-radius: 16px;
+  background: #ffffff;
+  box-shadow: 0px 3px 14px 0px rgba(0, 0, 0, 0.16);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 16px;
+  text-align: center;
+}
+
+.price-value {
+  font-size: 128px;
+  font-weight: 600;
+  background: linear-gradient(90deg, #ff7bac 0%, #0ff 100%);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.price-market {
+  font-size: 32px;
+  font-weight: 600;
+  color: #0d1b2a;
+  margin-top: 4px;
+  letter-spacing: 1.2px;
+}
+
+.price-time {
+  font-size: 20px;
+  letter-spacing: 0.6px;
+  color: #455363;
+  margin-top: 4px;
+}
+
+.stats-table {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  grid-auto-rows: minmax(0, 1fr);
+  flex: 1;
+}
+
+.stats-cell {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 4px;
+  padding: 16px 32px;
+}
+
+.stat-title {
+  font-size: 20px;
+  font-weight: 500;
+  letter-spacing: 0.6px;
+  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;
+  letter-spacing: 1.2px;
+}
+
+.positive-change {
+  color: #00c48c;
+}
+
+.negative-change {
+  color: #cf3050;
+}
+
+.neutral-change {
+  color: #0d1b2a;
 }
 </style>