Merge branch 'zhangyuanshan-20250925' into newmain-20250926

postcss.config.js

@@ -37,7 +37,7 @@ export default {
         customPxToViewportPlugin({
             defaultViewportWidth:1920,
             unitPrecision: 5, // 保留的小数位数
-            selectorBlackList: [/^\.van/], // 以 .van 开头的类名不转换
+            selectorBlackList: [/^\.van/, '.px-fixed'], // 以 .van 开头的类名不转换
             minPixelValue: 1, // 小于或等于 1px 不转换
             viewportUnit: "vw", // 转换后的单位
             fontViewportUnit: "vw", // 字体单位

src/components/customEcharts/index.vue

@@ -1,30 +1,30 @@
 <script setup>
-import { computed } from 'vue'
-import { useWindowSize } from '@vueuse/core'
+import { computed } from "vue";
+import { useWindowSize } from "@vueuse/core";
 
-import size375 from '@/components/customEcharts/size375/index.vue'
-import size768 from '@/components/customEcharts/size375/index.vue'
-import size1440 from '@/components/customEcharts/size1920/index.vue'
-import size1920 from '@/components/customEcharts/size1920/index.vue'
-import { useRouter } from 'vue-router'
-import { useI18n } from 'vue-i18n'
+import size375 from "@/components/customEcharts/size375/index.vue";
+import size768 from "@/components/customEcharts/size375/index.vue";
+import size1440 from "@/components/customEcharts/size1440/index.vue";
+import size1920 from "@/components/customEcharts/size1920/index.vue";
+import { useRouter } from "vue-router";
+import { useI18n } from "vue-i18n";
 
-const router = useRouter()
-const { width } = useWindowSize()
-const { t } = useI18n()
+const router = useRouter();
+const { width } = useWindowSize();
+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 { useWindowSize } from '@vueuse/core'
+import { computed } from "vue";
+import { useWindowSize } from "@vueuse/core";
 
-import size375 from '@/components/customFooter/size375/index.vue'
-import size768 from '@/components/customFooter/size768/index.vue'
-import size1440 from '@/components/customFooter/size1920/index.vue'
-import size1920 from '@/components/customFooter/size1920/index.vue'
-import { useRouter } from 'vue-router'
-import { useI18n } from 'vue-i18n'
+import size375 from "@/components/customFooter/size375/index.vue";
+import size768 from "@/components/customFooter/size768/index.vue";
+import size1440 from "@/components/customFooter/size1440/index.vue";
+import size1920 from "@/components/customFooter/size1920/index.vue";
+import { useRouter } from "vue-router";
+import { useI18n } from "vue-i18n";
 
-const router = useRouter()
-const { width } = useWindowSize()
-const { t } = useI18n()
+const router = useRouter();
+const { width } = useWindowSize();
+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/customFooter/size768/index.vue

@@ -1,12 +1,12 @@
 <template>
   <!-- 通用页脚 -->
   <div class="custom-footer">
-    <span>&copy; 2025 FiEE, Inc. All Rights Reserved.</span>
     <div class="footer-links">
       <span @click="handleLink('privacyPolicy')">Privacy Policy</span>
       <span @click="handleLink('termsOfUse')">Terms of use</span>
       <span @click="handleLink('siteMap')">Site Map</span>
     </div>
+    <div>&copy; 2025 FiEE, Inc. All Rights Reserved.</div>
   </div>
 </template>
 
@@ -26,29 +26,28 @@ const handleLink = (link) => {
   // } else if (link === "siteMap") {
   //   window.open(siteMap, "_blank");
   // }
-  router.push(link)
+  router.push(link);
 };
 </script>
 
 <style scoped lang="scss">
 .custom-footer {
   width: 100%;
-  text-align: center;
-  padding: 24px 0;
+  padding: 24 * 2.5px 32 * 2.5px;
   color: #888;
-  // font-size: 15px;
-  font-size: 1.05rem;
+  font-size: 14 * 2.5px;
   background: #f7f8fa;
   letter-spacing: 1px;
   border-top: 1px solid #ececec;
   z-index: 100;
-  padding: 1rem 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 
   .footer-links {
-    margin: 0.4rem 0 0;
     span {
       border-right: 1px solid #d2d2d7;
-      padding: 0 10px;
+      padding: 0 16 * 2.5px;
       cursor: pointer;
     }
     span:nth-last-child(1) {

src/components/customHeader/index.vue

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

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: 16px;
-    font-size: 0.875rem;
+    font-size: 12px;
     min-width: 120px;
     text-align: center;
-
+    font-family: "PingFang SC";
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
     &::after {
       content: "";
       position: absolute;

src/components/customHeader/size768/index.vue

@@ -0,0 +1,220 @@
+<template>
+  <!-- 通用页头 -->
+  <NLayoutHeader
+    class="custom-header"
+    :class="{ 'header-scrolled': isScrolled }"
+  >
+    <div class="header-container">
+      <div class="logo" @click="handleToHome">
+        <NImage class="logo-image" :src="FiEELogo" preview-disabled />
+      </div>
+      <div
+        class="menu-btn"
+        :class="{ 'menu-open': showMenu }"
+        @click="toggleMenu"
+      >
+        <n-icon size="28" class="menu-icon menu-icon-menu">
+          <menu-sharp />
+        </n-icon>
+        <n-icon size="28" class="menu-icon menu-icon-close">
+          <close-sharp />
+        </n-icon>
+      </div>
+    </div>
+  </NLayoutHeader>
+  <transition name="fade-slide">
+    <div v-if="showMenu" class="mobile-menu-wrapper" @click.self="closeMenu">
+      <NConfigProvider :theme-overrides="themeOverrides">
+        <NMenu
+          mode="vertical"
+          :options="menuOptions"
+          :inverted="isScrolled"
+          class="mobile-menu"
+          accordion
+          v-model:value="selectedKey"
+          @update:value="handleMenuSelect"
+        />
+      </NConfigProvider>
+    </div>
+  </transition>
+</template>
+
+<script setup>
+import FiEELogo from "@/assets/image/header/logo.png";
+import { ref, onMounted, onUnmounted } from "vue";
+import { NMenu, NLayoutHeader, NImage, NIcon, NConfigProvider } from "naive-ui";
+import { MenuSharp, CloseSharp } from "@vicons/ionicons5";
+import { useI18n } from "vue-i18n";
+import { useRouter } from "vue-router";
+import { useHeaderMenuConfig } from "@/config/headerMenuConfig";
+const themeOverrides = {
+  Menu: {
+    itemTextColorHover: "#000",
+    itemTextColorActive: "#FF7BAC",
+    itemTextColorActiveHover: "#fff8fb",
+    itemColorHover: "#FDDFE9",
+    itemColorActive: "#fff",
+    itemColorActiveHover: "#fff8fb",
+  },
+};
+const { t } = useI18n();
+const router = useRouter();
+
+const isScrolled = ref(false);
+const showMenu = ref(false);
+const selectedKey = ref(null);
+
+const toggleMenu = () => {
+  showMenu.value = !showMenu.value;
+};
+const closeMenu = () => {
+  showMenu.value = false;
+};
+
+// 递归查找菜单项
+function findMenuOptionByKey(options, key) {
+  for (const option of options) {
+    if (option.key === key) return option;
+    if (option.children) {
+      const found = findMenuOptionByKey(option.children, key);
+      if (found) return found;
+    }
+  }
+  return null;
+}
+
+// 菜单点击跳转
+const handleMenuSelect = (key) => {
+  const option = findMenuOptionByKey(menuOptions, key);
+  if (option && option.href) {
+    router.push(option.href);
+    showMenu.value = false; // 跳转后收起菜单
+  }
+};
+
+// 使用统一的菜单配置
+const menuOptions = useHeaderMenuConfig();
+
+// 监听滚动事件
+const handleScroll = () => {
+  //滚动距离大于100*2.5px时，处理对应的header样式
+  isScrolled.value = window.scrollY >= 100;
+};
+
+onMounted(() => {
+  window.addEventListener("scroll", handleScroll);
+});
+
+onUnmounted(() => {
+  window.removeEventListener("scroll", handleScroll);
+});
+
+//点击回到首页
+const handleToHome = () => {
+  router.push("/");
+  selectedKey.value = null; // 重置菜单选中状态
+  showMenu.value = false; // 在移动端同时关闭菜单
+};
+</script>
+
+<style scoped lang="scss">
+.custom-header {
+  transition: all 0.3s ease;
+  background: transparent;
+  height: 60 * 2.5px;
+
+  &.header-scrolled {
+    background: rgba(255, 255, 255, 0.95);
+    box-shadow: 0 2 * 2.5px 8 * 2.5px rgba(0, 0, 0, 0.1);
+  }
+}
+
+.header-container {
+  width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
+  padding: 0 59 * 2.5px;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.logo {
+  flex-shrink: 0;
+  margin-left: 11 * 2.5px;
+  display: flex;
+  align-items: center;
+}
+
+.logo-image {
+  width: 120 * 2.5px;
+  height: 27 * 2.5px;
+}
+
+.menu-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  font-size: 75 * 2.5px;
+  padding: 20 * 2.5px;
+  border-radius: 30 * 2.5px;
+  background: transparent;
+  user-select: none;
+  transition: background 0.2s;
+  position: relative;
+
+  .menu-icon {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%) rotate(0deg);
+    opacity: 1;
+    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+      transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    pointer-events: none;
+  }
+  .menu-icon-close {
+    opacity: 0;
+    transform: translate(-50%, -50%) rotate(-90deg) scale(0.8);
+  }
+
+  &.menu-open {
+    .menu-icon-menu {
+      opacity: 0;
+      transform: translate(-50%, -50%) rotate(90deg) scale(0.8);
+    }
+    .menu-icon-close {
+      opacity: 1;
+      transform: translate(-50%, -50%) rotate(0deg) scale(1);
+    }
+  }
+}
+
+.mobile-menu-wrapper {
+  position: fixed;
+  top: 60 * 2.5px;
+  left: 0;
+  width: 100vw;
+  background: #fff;
+  z-index: 1100;
+  box-shadow: 0 30 * 2.5px 40 * 2.5px rgba(0, 0, 0, 0.08);
+  padding: 40 * 2.5px;
+  max-height: 1500 * 2.5px;
+  overflow-y: auto;
+  :deep(.n-menu-item) {
+    font-weight: 600;
+  }
+}
+
+.fade-slide-enter-active,
+.fade-slide-leave-active {
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.fade-slide-enter-from,
+.fade-slide-leave-to {
+  opacity: 0;
+  transform: translateY(-50 * 2.5px);
+}
+</style>

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
-    ref="main"
-    class="flex-center min-h-80vh rounded-3xl to-accent w-100vw animate-fade-in"
-  >
-    <div class="w-full flex flex-col items-center gap-5 py-12 px-6">
-      <h1
-        class="text-4xl font-bold text-primary animate-fade-in-down animate-delay-0"
-      >
-        Investor Contacts
-      </h1>
-      <div
-        class="text-2xl font-semibold text-gray-800 animate-fade-in-down animate-delay-200"
-      >
-        FiEE Inc.
+  <div class="contact-container">
+    <!-- Title Section -->
+    <div class="title-section">
+      <div class="title-decoration"></div>
+      <div class="contact-title">Investor Contacts</div>
     </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"
-      >
+
+    <!-- Card Section -->
+    <div class="contact-card">
+      <div class="logo-text">FiEE Inc.</div>
+      <div class="relation-text">Investor Relations</div>
+      <div class="email-section">
         <span>Email:</span>
-        <span
-          class="transition-colors duration-300 cursor-pointer text-#00baff hover:text-primary active:text-secondary select-all"
-          @click="copyEmail"
+        <span class="email-address" @click="copyEmail"
           >fiee@dlkadvisory.com</span
         >
       </div>
     </div>
-  </main>
+  </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: 100%;
+  height: 771px;
+  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/size1440/index.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { ref } from "vue";
+
 import axios from "axios";
 const form = ref({
   firstName: "",
@@ -7,7 +8,6 @@ const form = ref({
   email: "",
   company: "",
   phone: "",
-  alertType: "all",
 });
 const submitted = ref(false);
 
@@ -25,124 +25,269 @@ async function handleSubmit(e) {
 </script>
 
 <template>
-  <main ref="main" class="relative min-h-[80vh] flex-center overflow-hidden">
-    <!-- 粒子背景 -->
-    <div class="absolute inset-0 z-0 pointer-events-none animate-bg-move"></div>
-    <!-- 表单卡片/提交成功卡片 -->
+  <div class="alerts-container">
+    <!-- Title Section -->
+    <!-- 未提交 -->
+    <div v-if="!submitted" class="title-section">
+      <div class="title-decoration"></div>
+      <div class="title">E-Mail Alerts</div>
+      <div class="subtitle">* Required Fields</div>
+    </div>
+    <!-- 已提交 -->
+    <div v-else class="title-section mt-[60px]">
+      <div class="title-decoration"></div>
+      <div class="title">Submitted successfully!</div>
+      <div class="subtitle">The information you submitted is as follows:</div>
+    </div>
+    <!-- Form Card -->
     <div
-      class="relative z-10 w-[600px] max-w-[90vw] p-8 bg-white/80 rounded-2xl shadow-xl backdrop-blur-md animate-bounce-in"
+      class="form-card relative"
+      :style="{
+        width: submitted ? '678px' : '100%',
+        height: submitted ? '428px' : 'auto',
+      }"
     >
       <template v-if="!submitted">
-        <h2 class="text-2xl font-bold text-#ff7bac mb-2 tracking-wide">
-          E-Mail Alerts
-        </h2>
-        <p class="text-sm text-gray-500 mb-5">* Required Fields</p>
-        <form class="space-y-3" @submit="handleSubmit">
-          <div>
-            <label class="block text-gray-700 font-semibold mb-1"
-              >* First Name</label
-            >
+        <form class="form-content" @submit="handleSubmit">
+          <div class="form-group">
+            <label for="firstName">* First Name</label>
             <input
+              id="firstName"
               v-model="form.firstName"
               type="text"
-              class="w-full px-3 py-2 rounded-lg ring-2 ring-#ff7bac/20) transition-all duration-300 outline-none bg-white/90 border-none"
+              required
             />
           </div>
-          <div>
-            <label class="block text-gray-700 font-semibold mb-1"
-              >* Last Name</label
-            >
-            <input
-              v-model="form.lastName"
-              type="text"
-              class="w-full px-3 py-2 rounded-lg ring-2 ring-#ff7bac/20) transition-all duration-300 outline-none bg-white/90 border-none"
-            />
+          <div class="form-group">
+            <label for="lastName">* Last Name</label>
+            <input id="lastName" v-model="form.lastName" type="text" required />
           </div>
-          <div>
-            <label class="block text-gray-700 font-semibold mb-1"
-              >* Email</label
-            >
-            <input
-              v-model="form.email"
-              type="email"
-              class="w-full px-3 py-2 rounded-lg ring-2 ring-#ff7bac/20) transition-all duration-300 outline-none bg-white/90 border-none"
-            />
+          <div class="form-group">
+            <label for="email">* Email</label>
+            <input id="email" v-model="form.email" type="email" required />
           </div>
-          <div>
-            <label class="block text-gray-700 font-semibold mb-1"
-              >* Company</label
-            >
-            <input
-              v-model="form.company"
-              type="text"
-              class="w-full px-3 py-2 rounded-lg ring-2 ring-#ff7bac/20) transition-all duration-300 outline-none bg-white/90 border-none"
-            />
+          <div class="form-group">
+            <label for="company">* Company</label>
+            <input id="company" v-model="form.company" type="text" required />
           </div>
-          <div>
-            <label class="block text-gray-700 font-semibold mb-1">Phone</label>
-            <input
-              v-model="form.phone"
-              type="tel"
-              class="w-full px-3 py-2 rounded-lg ring-2 ring-#ff7bac/20) transition-all duration-300 outline-none bg-white/90 border-none"
-            />
+          <div class="form-group">
+            <label for="phone">* Phone</label>
+            <input id="phone" v-model="form.phone" type="tel" required />
           </div>
-          <button
-            type="submit"
-            class="w-full py-2.5 rounded-xl text-white font-bold text-base active:scale-95 transition-all duration-200 animate-bounce-in animate-delay-200 submit-btn"
-          >
-            Submit
-          </button>
+          <button type="submit" class="submit-btn">Submit</button>
         </form>
       </template>
       <template v-else>
-        <div
-          class="flex flex-col items-center justify-center min-h-[280px] animate-bounce-in"
-        >
-          <span
-            class="i-mdi:check-circle-outline text-green-500 text-4xl mb-3"
-          ></span>
-          <h2 class="text-xl font-bold text-#ff7bac mb-2">
-            Submitted successfully!
-          </h2>
-          <div class="text-gray-700 text-sm mb-3">
-            The information you submitted is as follows:
+        <div class="submitted-data">
+          <div class="submitted-data-content">
+            <div class="submitted-row">
+              <span class="label">First Name：</span>
+              <span class="value">{{ form.firstName || "Not filled in" }}</span>
             </div>
-          <div
-            class="w-full bg-white/80 rounded-xl shadow p-3 space-y-2 text-gray-800 text-sm"
-          >
-            <div>
-              <span class="font-semibold">First Name：</span
-              >{{ form.firstName }}
+            <div class="submitted-row">
+              <span class="label">Last Name：</span>
+              <span class="value">{{ form.lastName || "Not filled in" }}</span>
             </div>
-            <div>
-              <span class="font-semibold">Last Name：</span>{{ form.lastName }}
+            <div class="submitted-row">
+              <span class="label">Email：</span>
+              <span class="value">{{ form.email || "Not filled in" }}</span>
             </div>
-            <div>
-              <span class="font-semibold">Email：</span>{{ form.email }}
+            <div class="submitted-row">
+              <span class="label">Company：</span>
+              <span class="value">{{ form.company || "Not filled in" }}</span>
             </div>
-            <div>
-              <span class="font-semibold">Company：</span>{{ form.company }}
-            </div>
-            <div>
-              <span class="font-semibold">Phone：</span
-              >{{ form.phone || "Not filled in" }}
-            </div>
-            <div>
-              <span class="font-semibold">Alert Type：</span
-              >{{
-                form.alertType === "all" ? "All Alerts" : "Customize Alerts"
-              }}
+            <div class="submitted-row">
+              <span class="label">Phone：</span>
+              <span class="value">{{ form.phone || "Not filled in" }}</span>
             </div>
           </div>
         </div>
+        <div class="submitted-bg"></div>
       </template>
     </div>
-  </main>
+  </div>
 </template>
 
 <style scoped lang="scss">
-/* 可选：自定义粒子或渐变动画背景 */
+.alerts-container {
+  width: 1240px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.title-section {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 0 16px;
+  margin-bottom: 40px;
+  align-self: center;
+}
+
+.title-decoration {
+  width: 58px;
+  height: 7px;
+  background: #ff7bac;
+  margin: auto 0;
+  margin-top: 43px;
+  align-self: center;
+}
+
+.title {
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 500;
+  font-size: 40px;
+  line-height: 56px;
+  color: #000000;
+  letter-spacing: 1.2px;
+}
+
+.subtitle {
+  font-family: "PingFang SC", sans-serif;
+  font-size: 16px;
+  line-height: 22px;
+  color: #455363;
+  letter-spacing: 0.48px;
+  align-self: center;
+}
+
+.form-card {
+  background-color: white;
+  border-radius: 16px;
+  padding: 24px;
+  box-shadow: 0px 3px 14px 0px rgba(0, 0, 0, 0.16);
+  animation: fade-in 0.8s cubic-bezier(0.23, 1, 0.32, 1) both;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.form-content {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+
+  label {
+    font-family: "PingFang SC", sans-serif;
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 22px;
+    color: #000000;
+    letter-spacing: 0.48px;
+  }
+
+  input {
+    height: 56px;
+    border: 1px solid #e0e0e6;
+    border-radius: 8px;
+    padding: 0 12px;
+    font-size: 16px;
+    outline: none;
+    transition: border-color 0.3s;
+
+    &:focus {
+      border-color: #ff7bac;
+    }
+  }
+}
 .submit-btn {
-  background: linear-gradient(to right, #ff7bac, #00ffff);
+  height: 60px;
+  background: #ff7bac;
+  border-radius: 8px;
+  border: none;
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 500;
+  font-size: 24px;
+  line-height: 32px;
+  color: white;
+  letter-spacing: 1.2px;
+  cursor: pointer;
+  transition: opacity 0.3s;
+  margin-top: 8px; // 16px (from figma form-group gap) + 8px = 24px
+
+  &:hover {
+    opacity: 0.9;
+  }
+}
+
+.success-title {
+  font-size: 24px;
+  font-weight: bold;
+  color: #ff7bac;
+  margin-bottom: 16px;
+}
+
+.success-info {
+  margin-bottom: 24px;
+  color: #455363;
+}
+
+.submitted-data {
+  padding: 36px 24px 24px;
+  border-radius: 16px;
+  width: 678px;
+  height: 428px;
+  flex-shrink: 0;
+}
+.submitted-bg {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-image: url("@/assets/image/1920/email-alerts-submit.png");
+  background-repeat: no-repeat;
+  background-position: bottom;
+  background-size: 100%;
+}
+
+.submitted-data-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  padding: 16px 0;
+}
+
+.submitted-row {
+  display: flex;
+  font-family: "PingFang SC", sans-serif;
+  font-size: 16px;
+  line-height: 22px;
+  letter-spacing: 0.48px;
+  width: 280px;
+}
+
+.label {
+  font-weight: 500;
+  color: #000000;
+  width: 110px;
+  flex-shrink: 0;
+}
+
+.value {
+  font-weight: 400;
+  color: #455363;
+}
+
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 </style>

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

@@ -40,7 +40,13 @@ async function handleSubmit(e) {
       <div class="subtitle">The information you submitted is as follows:</div>
     </div>
     <!-- Form Card -->
-    <div class="form-card relative">
+    <div
+      class="form-card relative"
+      :style="{
+        width: submitted ? '70%' : '100%',
+        height: submitted ? '448px' : 'auto',
+      }"
+    >
       <template v-if="!submitted">
         <form class="form-content" @submit="handleSubmit">
           <div class="form-group">
@@ -65,7 +71,7 @@ async function handleSubmit(e) {
             <input id="company" v-model="form.company" type="text" required />
           </div>
           <div class="form-group">
-            <label for="phone">Phone</label>
+            <label for="phone">* Phone</label>
             <input id="phone" v-model="form.phone" type="tel" />
           </div>
           <button type="submit" class="submit-btn">Submit</button>
@@ -104,7 +110,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 size768 from '@/views/events-calendar/size375/index.vue'
-import size1440 from '@/views/events-calendar/size1920/index.vue'
-import size1920 from '@/views/events-calendar/size1920/index.vue'
-import { computed } from 'vue'
-import { useWindowSize } from '@vueuse/core'
+import size375 from "@/views/events-calendar/size375/index.vue";
+import size768 from "@/views/events-calendar/size375/index.vue";
+import size1440 from "@/views/events-calendar/size1440/index.vue";
+import size1920 from "@/views/events-calendar/size1920/index.vue";
+import { computed } from "vue";
+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,8 +340,9 @@ const handleClickOutside = (event) => {
 </script>
 <style scoped lang="scss">
 .page-container {
-  max-width: 932px;
+  width: 932px;
   margin: 0 auto;
+  background: #fff;
 }
 
 .title-section {
@@ -429,11 +430,11 @@ const handleClickOutside = (event) => {
   position: relative;
   border-radius: 8px;
 
-  &:last-child {
-    .separator-line {
-      display: none;
-    }
-  }
+  // &:last-child {
+  //   .separator-line {
+  //     display: none;
+  //   }
+  // }
 
   &:nth-child(even) {
     margin: 4px 0;

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

@@ -542,9 +542,9 @@ const downloadPdf = (url) => {
     background-color: #f9fafc;
   }
 
-  &:last-child {
-    border-bottom: none;
-  }
+  // &:last-child {
+  //   border-bottom: none;
+  // }
 }
 
 .result-title {

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="title-section">
+        <div class="title-decoration"></div>
+        <div class="historic-title">Historical Data</div>
+      </div>
+    </div>
 
-    <div class="header mt-[20px]">
-      <div class="title">Historical Data</div>
     <div class="filter-container">
-        <!-- <n-dropdown
-          trigger="click"
-          :options="periodOptions"
-          @select="handlePeriodChange"
-          :value="state.selectedPeriod"
+      <span class="range-label">Range</span>
+      <div
+        v-for="option in durationOptions"
+        :key="option.key"
+        class="filter-option"
+        :class="{ active: state.selectedDuration === option.key }"
+        @click="handleDurationChange(option.key)"
       >
-          <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"
+        {{
+          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,
+          }"
         >
-          <n-button>
-            {{ state.selectedDuration }}
-            <n-icon><chevron-down-outline /></n-icon>
-          </n-button>
-        </n-dropdown>
+          {{ 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>
 
-    <n-data-table
-      :columns="columns"
-      :data="paginatedData"
-      :bordered="false"
-      :single-line="false"
-      :scroll-x="1200"
-    />
-
+    <!-- pagination-container from annualreports -->
     <div class="pagination-container">
-      <n-button class="page-btn prev-btn" @click="handlePrevPage">
-        <n-icon><chevron-back-outline /></n-icon>
-        Previous
-      </n-button>
-
-      <div class="page-info">
-        Page {{ state.currentPage }} of {{ totalPages }}
+      <div class="pagination-info">
+        Displaying {{ displayRange.start }} - {{ displayRange.end }} of
+        {{ state.tableData.length }} results
       </div>
-
-      <div class="right-controls">
-        <n-dropdown
-          trigger="click"
-          :options="pageSizeOptions"
-          @select="handlePageSizeChange"
+      <div class="pagination-controls">
+        <div class="pagination-buttons">
+          <button
+            class="page-btn prev-btn"
+            :disabled="state.currentPage === 1"
+            @click="goToPrevPage"
           >
-          <n-button class="rows-dropdown">
-            {{ state.pageSize }} Rows
-            <n-icon><chevron-down-outline /></n-icon>
-          </n-button>
-        </n-dropdown>
+            <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>
 
-        <n-button class="page-btn next-btn" @click="handleNextPage">
-          Next
-          <n-icon><chevron-forward-outline /></n-icon>
-        </n-button>
+          <template v-for="page in getVisiblePages()" :key="page">
+            <button
+              v-if="page !== '...'"
+              class="page-btn"
+              :class="{ active: page === state.currentPage }"
+              @click="goToPage(page)"
+            >
+              {{ page }}
+            </button>
+            <button v-else class="page-btn disabled" disabled>...</button>
+          </template>
+
+          <button
+            class="page-btn next-btn"
+            :disabled="state.currentPage === totalPages"
+            @click="goToNextPage"
+          >
+            <svg width="5" height="9" viewBox="0 0 5 9" fill="none">
+              <path
+                d="M1 1L4 4.5L1 8"
+                stroke="#455363"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </button>
+        </div>
+        <div class="page-size-selector" @click="togglePageSizeMenu">
+          <span>{{ state.pageSize }}/page</span>
+          <svg width="10" height="5" viewBox="0 0 10 5" fill="none">
+            <path
+              d="M1 1L5 4L9 1"
+              stroke="#455363"
+              stroke-width="1.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+          <div v-if="showPageSizeMenu" class="page-size-menu">
+            <div
+              v-for="size in [10, 50, 100, 500, 1000]"
+              :key="size"
+              class="page-size-option"
+              :class="{ active: state.pageSize === size }"
+              @click="handlePageSizeChange(size)"
+            >
+              {{ size }}/page
+            </div>
+          </div>
+        </div>
+        <div class="goto-section">
+          <span>Goto</span>
+          <input
+            type="number"
+            v-model="state.gotoPage"
+            class="goto-input"
+            :min="1"
+            :max="totalPages"
+            @keyup.enter="handleGoto"
+          />
+        </div>
       </div>
     </div>
 
-    <div class="back-to-top-link">
+    <!-- <div class="back-to-top-link">
       <a href="#" @click.prevent="scrollToTop">
         Back to Top
         <n-icon><arrow-up-outline /></n-icon>
       </a>
-    </div>
+    </div> -->
   </div>
 </template>
 
 <script setup>
-import { NDataTable, NButton, NDropdown, NIcon } from "naive-ui";
-import { reactive, onMounted, h, computed } from "vue";
+import { NDropdown, NIcon } from "naive-ui";
+import { reactive, onMounted, h, computed, ref, watch, onUnmounted } from "vue";
 import axios from "axios";
-import {
-  ChevronDownOutline,
-  ChevronBackOutline,
-  ChevronForwardOutline,
-  ArrowUpOutline,
-} from "@vicons/ionicons5";
+import { ChevronDownOutline, 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 handlePrevPage = () => {
-  if (state.currentPage === 1) {
-    return;
+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 handleNextPage = () => {
-  if (state.currentPage >= totalPages.value) {
-    return;
   }
-  state.currentPage++;
 };
 
+const goToNextPage = () => {
+  if (state.currentPage < totalPages.value) {
+    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;
-  max-width: 1200px;
+  // width: 932px;
   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 {
-    display: flex;
-    justify-content: space-between;
     align-items: center;
-    margin-top: 20px;
-    padding: 10px 16px;
-    border-radius: 4px;
-    background-color: #ffffff;
+    gap: 16px;
+    padding: 0 16px;
+    margin-bottom: 32px;
+    margin-top: 32px;
 
-    .page-btn {
-      display: flex;
-      align-items: center;
-      gap: 5px;
-      padding: 6px 12px;
-      font-size: 20px;
-
-      &.prev-btn {
-        margin-right: auto;
-      }
-
-      &.next-btn {
-        margin-left: 10px;
-      }
-
-      &:disabled {
-        opacity: 0.5;
-        cursor: not-allowed;
-      }
-    }
-
-    .page-info {
+    .range-label {
+      font-family: "PingFang SC", sans-serif;
+      font-weight: 400;
       font-size: 16px;
-      color: #374151;
-      margin: 0 10px;
+      line-height: 1.375em;
+      letter-spacing: 3%;
+      color: #455363;
     }
 
-    .right-controls {
-      display: flex;
-      align-items: center;
-
-      .rows-dropdown {
+    .filter-option {
+      padding: 7px 12px;
+      border-radius: 3px;
+      background-color: #efefef;
+      cursor: pointer;
+      font-family: "PingFang SC", sans-serif;
+      font-weight: 400;
       font-size: 16px;
-      }
-    }
+      line-height: 1.375em;
+      color: #000000;
+      transition: all 0.2s ease;
+
+      &:hover {
+        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) {
-    .n-data-table-td {
-      padding: 12px 8px;
+.reports-table {
+  width: 100%;
+  background: #ffffff;
+  border-radius: 16px;
+  box-shadow: 0px 3px 14px 0px rgba(0, 0, 0, 0.16);
+  padding: 16px;
+}
+
+.table-header {
+  display: flex;
+  background: #fff0f5;
+  border-radius: 8px;
+  padding: 16px 0;
+  margin-bottom: 4px;
+  justify-content: space-between;
+  align-items: center;
+
+  .column {
+    font-family: "PingFang SC", sans-serif;
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 1.375em;
+    letter-spacing: 3%;
+    color: #000000;
+    padding: 0 16px;
   }
 }
+
+.table-row {
+  display: flex;
+  padding: 16px 0;
+  align-items: center;
+  justify-content: space-between;
+  position: relative;
+  border-radius: 8px;
+  &:hover {
+    background: #fff8fb;
+  }
+
+  // &:last-child {
+  //   border-bottom: none;
+  // }
+
+  &:nth-child(even) {
+    margin: 4px 0;
+  }
+}
+
+.reports-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.column {
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 1.375em;
+  letter-spacing: 3%;
+  color: #455363;
+  padding: 0 16px;
+  position: relative;
+}
+
+.table-row .column:not(:last-child)::after {
+  content: "";
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  height: 24px;
+  border-right: 1px dashed #e0e0e6;
+}
+
+// 分页器样式
+.pagination-container {
+  display: flex;
+  align-items: center;
+  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 {
@@ -676,9 +676,9 @@ const getPageData = async () => {
     background: #fff8fb;
   }
 
-  &:last-child {
-    border-bottom: none;
-  }
+  // &:last-child {
+  //   border-bottom: none;
+  // }
 
   &:nth-child(even) {
     margin: 4px 0;

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

@@ -1,35 +1,45 @@
 <template>
   <div class="press-releases-page">
-    <n-infinite-scroll :distance="0" @load="doLoadMore">
     <main class="mx-auto">
-        <div class="title mb-[20px]">
+      <div class="title-section">
+        <div class="title-decoration"></div>
+        <div class="title">
           {{ t("press_releases.title") }}
         </div>
+      </div>
       <div class="search-container">
         <n-select
           :options="state.selectOptions"
           v-model:value="state.selectedValue"
           class="search-select"
         />
-          <n-input
-            v-model:value="state.inputValue"
+        <input
+          v-model="state.inputValue"
           type="text"
           :placeholder="t('press_releases.search.placeholder')"
           class="search-input"
         />
-          <n-button @click="handleSearch" class="search-button w-[80px]">
+        <button @click="handleSearch" class="search-button">
           {{ t("press_releases.search.button") }}
-          </n-button>
+        </button>
       </div>
-        <div v-for="(item, idx) in state.filterNewsData" :key="idx">
-          <div class="news-item mt-[10px]">
-            <div class="news-item-date">{{ item.date }}</div>
+      <div class="reports-list">
         <div
-              class="news-item-title text-[#0078d7] cursor-pointer"
+          v-for="(item, idx) in state.filterNewsData"
+          :key="idx"
+          class="news-item table-row"
+        >
+          <div class="content">
+            <div class="file-content">
+              <div class="file-info">
+                <div class="vertical-line"></div>
+                <div
+                  class="news-item-title text-[#000] cursor-pointer"
                   style="
-                word-break: break-word;
+                    word-break: break-all;
                     display: -webkit-box;
-                -webkit-line-clamp: 2;
+                    -webkit-line-clamp: 1;
+                    line-clamp: 1;
                     -webkit-box-orient: vertical;
                     overflow: hidden;
                     text-overflow: ellipsis;
@@ -38,19 +48,34 @@
                 >
                   {{ item.title }}
                 </div>
-            <n-tooltip
-              trigger="hover"
-              :disabled="!item.showTooltip"
-              width="trigger"
+                <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"
+                    class="news-item-content file-description"
                     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;
@@ -63,17 +88,119 @@
                   {{ item.summary }}
                 </div>
               </n-tooltip>
+              <div class="download-section">
+                <div class="news-item-date">{{ item.date }}</div>
+              </div>
+            </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>
       </div>
     </main>
-    </n-infinite-scroll>
   </div>
 </template>
 
 <script setup>
 import customDefaultPage from "@/components/customDefaultPage/index.vue";
-import { reactive, onMounted, watch, nextTick, ref } from "vue";
-import { NSelect, NInput, NButton, NInfiniteScroll, NTooltip } from "naive-ui";
+import {
+  reactive,
+  onMounted,
+  watch,
+  nextTick,
+  ref,
+  computed,
+  onUnmounted,
+} from "vue";
+import { NSelect, NInput, NButton, NTooltip } from "naive-ui";
 import { useI18n } from "vue-i18n";
 import axios from "axios";
 
@@ -94,32 +221,16 @@ const state = reactive({
     }),
   ], //下拉选项
   inputValue: "", //输入值
-  newsData: [
-    {
-      date: "June 3, 2025",
-      title: "FiEE, Inc. seized market opportunities through 2025 Osaka Expo",
-      content:
-        "Hong Kong, 3 June 2025 — FiEE, Inc. (NASDAQ:FIEE) (“FiEE, Inc.” or the “Company”), a technology company integrating IoT, connectivity and AI to redefine brand management solutions in the digital era, is pleased to announce significant business updates....",
-    },
-    {
-      date: "June 2, 2025",
-      title: "FiEE, Inc. Closes Its First Day of Trading on NASDAQ",
-      content:
-        "Hong Kong, 2 June 2025 — FiEE, Inc. (NASDAQ:FIEE) (“FiEE, Inc.” or the “Company”), a technology company integrating IoT, connectivity and AI to redefine brand management solutions in the digital era, commenced...",
-    },
-    {
-      date: "May 30, 2025",
-      title: "FiEE, Inc. Announces Reinitiation of Trading on Nasdaq",
-      content:
-        "Hong Kong, May 30, 2025 — FiEE, Inc. (“FiEE, Inc.” or the “Company”), a technology company integrating IoT, connectivity and AI to redefine brand management solutions...",
-    },
-  ],
   filterNewsData: [],
   loading: false, //是否正在加载数据
-  hasMore: true, //是否还有更多数据
   currentPage: 1, //当前页码
+  pageSize: 10,
+  total: 0,
+  gotoPage: 1,
 });
 
+const showPageSizeMenu = ref(false);
+
 const titleRefs = ref([]);
 
 const setTitleRef = (el, idx) => {
@@ -139,14 +250,18 @@ const checkAllTitleOverflow = () => {
 };
 
 onMounted(() => {
-  // state.filterNewsData = state.newsData;
   getPressReleasesDisplay();
+  document.addEventListener("click", handleClickOutside);
 
   nextTick(() => {
     checkAllTitleOverflow();
   });
 });
 
+onUnmounted(() => {
+  document.removeEventListener("click", handleClickOutside);
+});
+
 watch(
   () => state.filterNewsData,
   () => {
@@ -159,20 +274,21 @@ watch(
 
 // 获取新闻列表
 const getPressReleasesDisplay = () => {
+  state.loading = true;
   let url = "https://erpapi.fiee.com/api/fiee/pressreleases/display";
   let params = {
     query: state.inputValue,
     page: state.currentPage,
-    pageSize: 10,
+    pageSize: state.pageSize,
     timeStart: state.selectedValue
       ? state.selectedValue === "all_years"
         ? null
         : new Date(state.selectedValue).getTime()
       : null,
   };
-  // console.log(params)
-  axios.post(url, params).then((res) => {
-    // console.log(res)
+  axios
+    .post(url, params)
+    .then((res) => {
       if (res.status === 200) {
         if (res.data.status === 0) {
           res.data.data?.data?.forEach((item) => {
@@ -182,70 +298,44 @@ const getPressReleasesDisplay = () => {
               year: "numeric",
             });
           });
-        if (state.currentPage === 1) {
           state.filterNewsData = res.data.data?.data || [];
-        } else {
-          state.filterNewsData = [
-            ...state.filterNewsData,
-            ...(res.data.data?.data || []),
-          ];
-        }
-        if (state.filterNewsData.length < (res.data.data?.total || 0)) {
-          state.hasMore = true;
-        } else {
-          state.hasMore = false;
-        }
+          state.total = res.data.data?.total || 0;
         }
       }
+    })
+    .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();
   }
 );
 
-const handleSearch = () => {
-  // 手动触发筛选（保留这个函数以保持兼容性）
-  // handleFilter();
+watch(
+  () => state.pageSize,
+  () => {
+    state.currentPage = 1;
+    getPressReleasesDisplay();
+  }
+);
+
+watch(
+  () => state.currentPage,
+  (newPage) => {
+    state.gotoPage = newPage;
+    getPressReleasesDisplay();
+  }
+);
+
+const handleSearch = () => {
   state.currentPage = 1;
   getPressReleasesDisplay();
-  // console.log("筛选结果:", state.filterNewsData);
 };
 
 const handleNewClick = (item) => {
@@ -257,24 +347,120 @@ const handleNewClick = (item) => {
   });
 };
 
-//加载更多数据
-const doLoadMore = () => {
-  if (!state.hasMore || state.loading) {
-    return;
-  }
-  // console.log('触底了')
-  state.loading = true;
-  state.currentPage++;
-  getPressReleasesDisplay().finally(() => {
-    state.loading = false;
+const totalPages = computed(() => {
+  return Math.ceil(state.total / state.pageSize) || 1;
 });
+
+const displayRange = computed(() => {
+  if (state.total === 0) return { start: 0, end: 0 };
+  const start = (state.currentPage - 1) * state.pageSize + 1;
+  const end = Math.min(state.currentPage * state.pageSize, state.total);
+  return { start, end };
+});
+
+const goToPage = (page) => {
+  if (page >= 1 && page <= totalPages.value) {
+    state.currentPage = page;
+  }
+};
+
+const goToPrevPage = () => {
+  if (state.currentPage > 1) {
+    state.currentPage--;
+  }
+};
+
+const goToNextPage = () => {
+  if (state.currentPage < totalPages.value) {
+    state.currentPage++;
+  }
+};
+
+const changePageSize = (size) => {
+  state.pageSize = size;
+};
+
+const handleGoto = () => {
+  const page = parseInt(state.gotoPage);
+  if (page >= 1 && page <= totalPages.value) {
+    state.currentPage = page;
+  }
+};
+
+const togglePageSizeMenu = () => {
+  showPageSizeMenu.value = !showPageSizeMenu.value;
+};
+
+const getVisiblePages = () => {
+  const current = state.currentPage;
+  const total = totalPages.value;
+  const pages = [];
+
+  if (total <= 7) {
+    for (let i = 1; i <= total; i++) {
+      pages.push(i);
+    }
+  } else {
+    pages.push(1);
+
+    if (current <= 4) {
+      for (let i = 2; i <= 5; i++) {
+        pages.push(i);
+      }
+      pages.push("...");
+      pages.push(total);
+    } else if (current >= total - 3) {
+      pages.push("...");
+      for (let i = total - 4; i <= total; i++) {
+        pages.push(i);
+      }
+    } else {
+      pages.push("...");
+      for (let i = current - 1; i <= current + 1; i++) {
+        pages.push(i);
+      }
+      pages.push("...");
+      pages.push(total);
+    }
+  }
+
+  return pages;
+};
+
+// 点击外部关闭页面大小选择菜单
+const handleClickOutside = (event) => {
+  if (!event.target.closest || !event.target.closest(".page-size-selector")) {
+    showPageSizeMenu.value = false;
+  }
 };
 </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;
-  color: #333;
+  font-family: "PingFang SC";
+  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;
-  :deep(.n-base-selection) {
-    padding: 4px 0;
-  }
+  width: 200px;
 }
 
 .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,294 @@ 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;
+  background: #fff;
+}
+
+.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;
+  justify-content: flex-end;
+  margin-top: 20px;
+  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 {
@@ -535,6 +535,7 @@ const handleClickOutside = (event) => {
   display: flex;
   flex-direction: column;
   gap: 4px;
+  background: #fff;
 }
 
 .table-row {
@@ -543,11 +544,11 @@ const handleClickOutside = (event) => {
   position: relative;
   border-radius: 8px;
 
-  &:last-child {
-    .separator-line {
-      display: none;
-    }
-  }
+  // &:last-child {
+  //   .separator-line {
+  //     display: none;
+  //   }
+  // }
 }
 
 .content {

src/views/product-introduction/index.vue

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

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

@@ -0,0 +1,619 @@
+<script setup></script>
+
+<template>
+  <div class="page-container">
+    <div class="grid-lines px-fixed">
+      <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 px-fixed 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 px-fixed">
+        <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/1440/product-introduction-img2.png"
+        alt="background"
+        class="hero-bg-img"
+      />
+    </section>
+
+    <section class="features-section px-fixed">
+      <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 px-fixed"></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 px-fixed"></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 px-fixed"></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 px-fixed"></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 px-fixed"></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 px-fixed">
+      <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/1440/product-introduction-icon1.png"
+              alt="KOL Brand Promotion"
+              class="solution-icon"
+            />
+            <div class="solution-title">
+              <div class="vertical-line px-fixed"></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/1440/product-introduction-icon2.png"
+              alt="Content Creation Support"
+              class="solution-icon"
+            />
+            <div class="solution-title">
+              <div class="vertical-line px-fixed"></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/1440/product-introduction-icon3.png"
+              alt="Account Operation"
+              class="solution-icon"
+            />
+            <div class="solution-title">
+              <div class="vertical-line px-fixed"></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/1440/product-introduction-img1.png"
+            alt="Value Added Solutions"
+            class="solution-image"
+            style="width: 434px"
+          />
+        </div>
+      </div>
+    </section>
+
+    <section class="advantages-section px-fixed">
+      <div class="advantages-content px-fixed">
+        <div class="advantages-header">
+          <div class="decorator-bar"></div>
+          <div class="section-title text-white">Our Advantages</div>
+        </div>
+
+        <div style="width: 50%">
+          <div class="advantages-list">
+            <div class="advantage-item">
+              <div class="advantage-title">
+                <div class="vertical-line px-fixed"></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 px-fixed"></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 px-fixed"></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 px-fixed"></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 px-fixed"></div>
+                Easy to Use
+              </div>
+              <div class="advantage-description">
+                Intuitive interface design, no need for professional technical
+                background.
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="cta-section px-fixed">
+      <img
+        src="@/assets/image/1440/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/1440/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;
+  margin: 0 auto;
+  position: relative;
+}
+
+.hero-section.px-fixed {
+  text-align: center;
+  position: relative;
+  background-image: url("@/assets/image/1440/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: -204px;
+  left: 0;
+  width: 100%;
+  z-index: 1;
+}
+.core-value-card.px-fixed {
+  width: 932px;
+  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: 32px;
+}
+
+.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.px-fixed {
+  padding-top: 200px;
+  width: 932px;
+  margin: 0 auto;
+}
+.features-list {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+}
+
+.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;
+  text-align: justify;
+  font-feature-settings: "liga" off, "clig" off;
+}
+
+.solutions-section.px-fixed {
+  padding-top: 80px;
+  width: 932px;
+  margin: 0 auto;
+}
+.solutions-content {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+}
+.solutions-list {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  width: 466px;
+}
+.solution-item {
+  text-align: left;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+.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;
+}
+.solution-description {
+  align-self: stretch;
+  color: #455363;
+  padding: 0 16px;
+
+  text-align: justify;
+  font-feature-settings: "liga" off, "clig" off;
+  /* 正文 */
+  font-family: "PingFang SC";
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 22px; /* 137.5% */
+  letter-spacing: 0.48px;
+}
+.solution-image-container {
+  width: 434px;
+  border-radius: 16px;
+  margin: 0 auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.solution-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 16px;
+}
+
+.advantages-section.px-fixed {
+  margin-top: 80px;
+  padding: 80px 0;
+  background-image: url("@/assets/image/1440/product-introduction-img4.png");
+  background-size: cover;
+  background-position: center;
+  color: #fff;
+  position: relative;
+}
+
+.advantages-content.px-fixed {
+  width: 932px;
+  margin: 0 auto;
+  display: flex;
+  justify-content: space-between;
+  position: relative;
+  z-index: 1;
+}
+
+.advantages-header {
+  width: 466px;
+  padding: 0 16px;
+}
+.advantages-list {
+  width: 466px;
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+}
+.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;
+  padding: 0 16px;
+}
+.text-white {
+  color: #fff;
+}
+
+.cta-section.px-fixed {
+  padding: 60px 0;
+  position: relative;
+  width: 932px;
+  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: 355px;
+  width: 530px;
+  height: 268px;
+  opacity: 0.8;
+  z-index: 0;
+}
+.vertical-line.px-fixed {
+  width: 1px;
+  height: 16px;
+  background: #ff7bac;
+  flex-shrink: 0;
+  margin-top: 6px;
+}
+
+.grid-lines.px-fixed {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 932px;
+  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: 310px;
+}
+.grid-lines .line-3 {
+  left: 620px;
+}
+.grid-lines .line-4 {
+  left: 930px;
+}
+.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/product-introduction/size768/index.vue

@@ -0,0 +1,619 @@
+<script setup></script>
+
+<template>
+  <div class="page-container">
+    <div class="grid-lines px-fixed">
+      <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 px-fixed 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 px-fixed">
+        <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/1440/product-introduction-img2.png"
+        alt="background"
+        class="hero-bg-img"
+      />
+    </section>
+
+    <section class="features-section px-fixed">
+      <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 px-fixed"></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 px-fixed"></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 px-fixed"></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 px-fixed"></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 px-fixed"></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 px-fixed">
+      <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/1440/product-introduction-icon1.png"
+              alt="KOL Brand Promotion"
+              class="solution-icon"
+            />
+            <div class="solution-title">
+              <div class="vertical-line px-fixed"></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/1440/product-introduction-icon2.png"
+              alt="Content Creation Support"
+              class="solution-icon"
+            />
+            <div class="solution-title">
+              <div class="vertical-line px-fixed"></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/1440/product-introduction-icon3.png"
+              alt="Account Operation"
+              class="solution-icon"
+            />
+            <div class="solution-title">
+              <div class="vertical-line px-fixed"></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/1440/product-introduction-img1.png"
+            alt="Value Added Solutions"
+            class="solution-image"
+            style="width: 434px"
+          />
+        </div>
+      </div>
+    </section>
+
+    <section class="advantages-section px-fixed">
+      <div class="advantages-content px-fixed">
+        <div class="advantages-header">
+          <div class="decorator-bar"></div>
+          <div class="section-title text-white">Our Advantages</div>
+        </div>
+
+        <div style="width: 50%">
+          <div class="advantages-list">
+            <div class="advantage-item">
+              <div class="advantage-title">
+                <div class="vertical-line px-fixed"></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 px-fixed"></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 px-fixed"></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 px-fixed"></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 px-fixed"></div>
+                Easy to Use
+              </div>
+              <div class="advantage-description">
+                Intuitive interface design, no need for professional technical
+                background.
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="cta-section px-fixed">
+      <img
+        src="@/assets/image/1440/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/1440/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;
+  margin: 0 auto;
+  position: relative;
+}
+
+.hero-section.px-fixed {
+  text-align: center;
+  position: relative;
+  background-image: url("@/assets/image/1440/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: -204px;
+  left: 0;
+  width: 100%;
+  z-index: 1;
+}
+.core-value-card.px-fixed {
+  width: 932px;
+  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: 32px;
+}
+
+.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.px-fixed {
+  padding-top: 200px;
+  width: 932px;
+  margin: 0 auto;
+}
+.features-list {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+}
+
+.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;
+  text-align: justify;
+  font-feature-settings: "liga" off, "clig" off;
+}
+
+.solutions-section.px-fixed {
+  padding-top: 80px;
+  width: 932px;
+  margin: 0 auto;
+}
+.solutions-content {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+}
+.solutions-list {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  width: 466px;
+}
+.solution-item {
+  text-align: left;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+.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;
+}
+.solution-description {
+  align-self: stretch;
+  color: #455363;
+  padding: 0 16px;
+
+  text-align: justify;
+  font-feature-settings: "liga" off, "clig" off;
+  /* 正文 */
+  font-family: "PingFang SC";
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 22px; /* 137.5% */
+  letter-spacing: 0.48px;
+}
+.solution-image-container {
+  width: 434px;
+  border-radius: 16px;
+  margin: 0 auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.solution-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 16px;
+}
+
+.advantages-section.px-fixed {
+  margin-top: 80px;
+  padding: 80px 0;
+  background-image: url("@/assets/image/1440/product-introduction-img4.png");
+  background-size: cover;
+  background-position: center;
+  color: #fff;
+  position: relative;
+}
+
+.advantages-content.px-fixed {
+  width: 932px;
+  margin: 0 auto;
+  display: flex;
+  justify-content: space-between;
+  position: relative;
+  z-index: 1;
+}
+
+.advantages-header {
+  width: 466px;
+  padding: 0 16px;
+}
+.advantages-list {
+  width: 466px;
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+}
+.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;
+  padding: 0 16px;
+}
+.text-white {
+  color: #fff;
+}
+
+.cta-section.px-fixed {
+  padding: 60px 0;
+  position: relative;
+  width: 932px;
+  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: 355px;
+  width: 530px;
+  height: 268px;
+  opacity: 0.8;
+  z-index: 0;
+}
+.vertical-line.px-fixed {
+  width: 1px;
+  height: 16px;
+  background: #ff7bac;
+  flex-shrink: 0;
+  margin-top: 6px;
+}
+
+.grid-lines.px-fixed {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 932px;
+  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: 310px;
+}
+.grid-lines .line-3 {
+  left: 620px;
+}
+.grid-lines .line-4 {
+  left: 930px;
+}
+.grid-lines .line-5 {
+  right: 0;
+}
+</style>

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
-    ref="main"
-    class="flex pt-80px flex-col md:flex-row justify-center items-center gap-24 rounded-3xl"
-  >
-    <!-- 左侧大号价格 -->
-    <section
-      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 }}
+  <main ref="main" class="stock-quote-hero">
+    <div class="hero-content">
+      <!-- 标题区域 -->
+      <div class="title-section">
+        <div class="title-decoration"></div>
+        <div class="stock-title">Stock Quote</div>
       </div>
-      <div
-        class="mt-8 text-2xl text-gray-500 font-semibold tracking-widest mb-8px"
-      >
-        NASDAQ: <span class="text-black">FIEE</span>
+      <section class="quote-layout">
+        <div class="price-card">
+          <div class="price-value">${{ stockQuote.price }}</div>
+          <div class="price-market">NASDAQ: FIEE</div>
+          <div class="price-time">{{ formatted }}</div>
         </div>
-      <div 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 class="stats-table">
+          <div class="stats-cell">
+            <span class="stat-title">Open</span>
+            <span class="stat-value">{{ stockQuote.open }}</span>
           </div>
-      <div class="info-card">
-        <div class="text-base text-gray-400">% Change</div>
-        <div
-          class="text-3xl font-bold"
+          <div class="stats-cell">
+            <span class="stat-title">% Change</span>
+            <span
+              class="stat-value"
               :class="
-            stockQuote.change?.includes('-') ? 'text-green-500' : 'text-red-500'
+                stockQuote.change
+                  ? String(stockQuote.change).includes('-')
+                    ? 'negative-change'
+                    : String(stockQuote.change).includes('+')
+                    ? 'positive-change'
+                    : 'neutral-change'
+                  : 'neutral-change'
               "
             >
               {{ stockQuote.change }}
+            </span>
           </div>
+          <div class="stats-cell">
+            <span class="stat-title">Day's Range</span>
+            <span class="stat-value">{{ stockQuote.daysRange }}</span>
           </div>
-      <div class="info-card">
-        <div class="text-base text-gray-400">Day's Range</div>
-        <div class="text-2xl font-bold">{{ stockQuote.daysRange }}</div>
+          <div class="stats-cell">
+            <span class="stat-title">52-Week Range</span>
+            <span class="stat-value">{{ stockQuote.week52Range }}</span>
           </div>
-      <div class="info-card">
-        <div class="text-base text-gray-400">52-Week Range</div>
-        <div class="text-2xl font-bold">{{ stockQuote.week52Range }}</div>
+          <div class="stats-cell">
+            <span class="stat-title">Volume</span>
+            <span class="stat-value">{{ stockQuote.volume }}</span>
           </div>
-      <div class="info-card">
-        <div class="text-base text-gray-400">Volume</div>
-        <div class="text-2xl font-bold">{{ stockQuote.volume }}</div>
+          <div class="stats-cell">
+            <span class="stat-title">Market Cap</span>
+            <span class="stat-value">{{ stockQuote.marketCap }}</span>
           </div>
-      <div class="info-card">
-        <div class="text-base text-gray-400">Market Cap</div>
-        <div class="text-2xl font-bold">{{ stockQuote.marketCap }}</div>
         </div>
       </section>
+    </div>
   </main>
 </template>
 
-<style scoped lang="scss">
-/* 玻璃拟态和卡片动画可用 UnoCSS 快捷方式实现，若未配置可加如下样式 */
-.glass-card {
-  backdrop-filter: blur(16px);
-  background: rgba(255, 255, 255, 0.6);
-  border: 1px solid rgba(255, 255, 255, 0.3);
-  box-shadow: 0 8px 32px 0 rgba(255, 123, 172, 0.18);
+<style scoped>
+.stock-quote-hero {
+  position: relative;
 }
-.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: 60px;
+}
+
+.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: 600px;
+  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>