From 54b1d1551d3c3a901cf089cde08c7c7e76fe1c27 Mon Sep 17 00:00:00 2001
From: yuanshan <42023847+piercezzs@users.noreply.github.com>
Date: Fri, 10 Oct 2025 16:44:21 +0800
Subject: [PATCH] fix historic-stock 768

---
 src/components/customEcharts/index.vue        |   2 +-
 .../customEcharts/size768/index.vue           | 624 +++++++++++++++
 src/views/events-calendar/size1440/index.vue  |   2 +-
 src/views/historic-stock/size768/index.vue    | 753 ++++++++++++++----
 src/views/stock-quote/size1440/index.vue      |   1 -
 src/views/stock-quote/size768/index.vue       | 250 ++++--
 6 files changed, 1420 insertions(+), 212 deletions(-)
 create mode 100644 src/components/customEcharts/size768/index.vue

diff --git a/src/components/customEcharts/index.vue b/src/components/customEcharts/index.vue
index ca648bc..6cacf04 100644
--- a/src/components/customEcharts/index.vue
+++ b/src/components/customEcharts/index.vue
@@ -3,7 +3,7 @@ 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 size768 from "@/components/customEcharts/size768/index.vue";
 import size1440 from "@/components/customEcharts/size1440/index.vue";
 import size1920 from "@/components/customEcharts/size1920/index.vue";
 import { useRouter } from "vue-router";
diff --git a/src/components/customEcharts/size768/index.vue b/src/components/customEcharts/size768/index.vue
new file mode 100644
index 0000000..422c7d2
--- /dev/null
+++ b/src/components/customEcharts/size768/index.vue
@@ -0,0 +1,624 @@
+<template>
+  <div class="custom-echarts">
+    <div>
+      <div class="echarts-header">
+        <!-- 标题区域 -->
+        <div class="title-section">
+          <div class="title-decoration"></div>
+          <div class="title-text">
+            <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: 16 * 2.5px;
+      margin-bottom: 32 * 2.5px;
+      margin-top: 43 * 2.5px;
+      padding: 0 16 * 2.5px;
+    }
+
+    .title-decoration {
+      width: 58 * 2.5px;
+      height: 7 * 2.5px;
+      background: #ff7bac;
+      margin: auto 0;
+      margin-top: 0;
+    }
+
+    .title-text {
+      font-family: "PingFang SC", sans-serif;
+      font-weight: 500;
+      font-size: 32 * 2.5px;
+      line-height: 1;
+      letter-spacing: 0.03em;
+      color: #000000;
+    }
+
+    .echarts-search-area {
+      padding: 0 16 * 2.5px 0 16 * 2.5px;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      gap: 10 * 2.5px;
+
+      .echarts-search-byRange {
+        width: 100%;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: flex-start;
+        gap: 10 * 2.5px;
+        .search-range-list {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          justify-content: flex-start;
+          gap: 16 * 2.5px;
+          .search-range-list-each {
+            padding: 7 * 2.5px 22 * 2.5px;
+            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;
+        .n-date-picker {
+          width: 100%;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/events-calendar/size1440/index.vue b/src/views/events-calendar/size1440/index.vue
index 592f14c..7ff80fe 100644
--- a/src/views/events-calendar/size1440/index.vue
+++ b/src/views/events-calendar/size1440/index.vue
@@ -200,7 +200,7 @@ const handleSearch = () => {
 .background-image-container {
   background: #fff;
   width: 100%;
-  height: 800px;
+  height: 518 * 1.33px;
   box-shadow: 0px 3px 14px 0px rgba(0, 0, 0, 0.16);
   border-radius: 16px;
   display: flex;
diff --git a/src/views/historic-stock/size768/index.vue b/src/views/historic-stock/size768/index.vue
index 963bd68..5637c5b 100644
--- a/src/views/historic-stock/size768/index.vue
+++ b/src/views/historic-stock/size768/index.vue
@@ -1,96 +1,193 @@
 <template>
-  <div class="historic-data-container" style="margin-bottom: 40px">
+  <div class="historic-data-container">
     <div class="echarts-container">
       <customEcharts></customEcharts>
     </div>
-
-    <div class="header mt-[20px]">
-      <div class="title">Historical Data</div>
-      <div class="filter-container">
-        <!-- <n-dropdown
-          trigger="click"
-          :options="periodOptions"
-          @select="handlePeriodChange"
-          :value="state.selectedPeriod"
-        >
-          <n-button>
-            {{ state.selectedPeriod }}
-            <n-icon><chevron-down-outline /></n-icon>
-          </n-button>
-        </n-dropdown> -->
-
-        <n-dropdown
-          trigger="click"
-          :options="durationOptions"
-          @select="handleDurationChange"
-          :value="state.selectedDuration"
-        >
-          <n-button>
-            {{ state.selectedDuration }}
-            <n-icon><chevron-down-outline /></n-icon>
-          </n-button>
-        </n-dropdown>
+    <div class="header">
+      <!-- 标题区域 -->
+      <div class="title-section">
+        <div class="title-decoration"></div>
+        <div class="title-text">Historical Data</div>
       </div>
     </div>
 
-    <n-data-table
-      :columns="columns"
-      :data="paginatedData"
-      :bordered="false"
-      :single-line="false"
-      :scroll-x="1200"
-    />
+    <div class="filter-container">
+      <span class="range-label">Range</span>
+      <div
+        v-for="option in durationOptions"
+        :key="option.key"
+        class="filter-option"
+        :class="{ active: state.selectedDuration === option.key }"
+        @click="handleDurationChange(option.key)"
+      >
+        {{
+          option.label
+            .replace(" Months", "m")
+            .replace(" Years", "Y")
+            .replace(" Year", "Y")
+            .replace(" to Date", "TD")
+        }}
+      </div>
+    </div>
+    <!-- reports-table from annualreports -->
+    <div class="reports-table">
+      <div class="table-container">
+        <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 0 120px',
+              'text-align': col.align,
+            }"
+          >
+            {{ col.title }}
+          </div>
+        </div>
+        <div class="reports-list">
+          <div
+            class="table-row"
+            v-for="(row, index) in paginatedData"
+            :key="index"
+          >
+            <div
+              class="column"
+              v-for="col in columns"
+              :key="col.key"
+              :style="{
+                width: col.width ? col.width + 'px' : 'auto',
+                flex: col.width ? 'none' : '1 0 120px',
+                '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>
+    </div>
 
+    <!-- pagination-container from annualreports -->
     <div class="pagination-container">
-      <n-button class="page-btn prev-btn" @click="handlePrevPage">
-        <n-icon><chevron-back-outline /></n-icon>
-        Previous
-      </n-button>
+      <div class="pagination-controls">
+        <div class="pagination-buttons">
+          <button
+            class="page-btn prev-btn"
+            :disabled="state.currentPage === 1"
+            @click="goToPrevPage"
+          >
+            <svg width="5" height="9" viewBox="0 0 5 9" fill="none">
+              <path
+                d="M4 1L1 4.5L4 8"
+                stroke="#455363"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </button>
 
-      <div class="page-info">
-        Page {{ state.currentPage }} of {{ totalPages }}
-      </div>
+          <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>
 
-      <div class="right-controls">
-        <n-dropdown
-          trigger="click"
-          :options="pageSizeOptions"
-          @select="handlePageSizeChange"
-        >
-          <n-button class="rows-dropdown">
-            {{ state.pageSize }} Rows
-            <n-icon><chevron-down-outline /></n-icon>
-          </n-button>
-        </n-dropdown>
-
-        <n-button class="page-btn next-btn" @click="handleNextPage">
-          Next
-          <n-icon><chevron-forward-outline /></n-icon>
-        </n-button>
+          <button
+            class="page-btn next-btn"
+            :disabled="state.currentPage === totalPages"
+            @click="goToNextPage"
+          >
+            <svg width="5" height="9" viewBox="0 0 5 9" fill="none">
+              <path
+                d="M1 1L4 4.5L1 8"
+                stroke="#455363"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </button>
+        </div>
+        <div class="page-size-selector" @click="togglePageSizeMenu">
+          <span>{{ state.pageSize }}/page</span>
+          <svg width="10" height="5" viewBox="0 0 10 5" fill="none">
+            <path
+              d="M1 1L5 4L9 1"
+              stroke="#455363"
+              stroke-width="1.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+          <div v-if="showPageSizeMenu" class="page-size-menu">
+            <div
+              v-for="size in [10, 50, 100, 500, 1000]"
+              :key="size"
+              class="page-size-option"
+              :class="{ active: state.pageSize === size }"
+              @click="handlePageSizeChange(size)"
+            >
+              {{ size }}/page
+            </div>
+          </div>
+        </div>
+        <div class="goto-section">
+          <span>Goto</span>
+          <input
+            type="number"
+            v-model="state.gotoPage"
+            class="goto-input"
+            :min="1"
+            :max="totalPages"
+            @keyup.enter="handleGoto"
+          />
+        </div>
       </div>
     </div>
+    <div class="pagination-info">
+      Displaying {{ displayRange.start }} - {{ displayRange.end }} of
+      {{ state.tableData.length }} results
+    </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 +202,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 +222,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 +273,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 +311,91 @@ const handleDurationChange = (key) => {
   getPageData();
 };
 
+const displayRange = computed(() => {
+  const start = (state.currentPage - 1) * state.pageSize + 1;
+  const end = Math.min(
+    state.currentPage * state.pageSize,
+    state.tableData.length
+  );
+  return { start, end };
+});
+
+const goToPage = (page) => {
+  if (page >= 1 && page <= totalPages.value) {
+    state.currentPage = page;
+  }
+};
+
+const goToPrevPage = () => {
+  if (state.currentPage > 1) {
+    state.currentPage--;
+  }
+};
+
+const goToNextPage = () => {
+  if (state.currentPage < totalPages.value) {
+    state.currentPage++;
+  }
+};
+
 // 处理分页
-const handlePrevPage = () => {
-  if (state.currentPage === 1) {
-    return;
-  }
-  state.currentPage--;
-};
-
-const handleNextPage = () => {
-  if (state.currentPage >= totalPages.value) {
-    return;
-  }
-  state.currentPage++;
-};
-
 const handlePageSizeChange = (size) => {
   state.pageSize = size;
   state.currentPage = 1; // 重置到第一页
 };
 
+const handleGoto = () => {
+  const page = parseInt(state.gotoPage);
+  if (page >= 1 && page <= totalPages.value) {
+    state.currentPage = page;
+  }
+};
+
+const togglePageSizeMenu = () => {
+  showPageSizeMenu.value = !showPageSizeMenu.value;
+};
+
+const getVisiblePages = () => {
+  const current = state.currentPage;
+  const total = totalPages.value;
+  const pages = [];
+
+  if (total <= 7) {
+    // 如果总页数小于等于7，显示所有页码
+    for (let i = 1; i <= total; i++) {
+      pages.push(i);
+    }
+  } else {
+    // 显示第一页
+    pages.push(1);
+
+    if (current <= 4) {
+      // 当前页在前4页
+      for (let i = 2; i <= 5; i++) {
+        pages.push(i);
+      }
+      pages.push("...");
+      pages.push(total);
+    } else if (current >= total - 3) {
+      // 当前页在后4页
+      pages.push("...");
+      for (let i = total - 4; i <= total; i++) {
+        pages.push(i);
+      }
+    } else {
+      // 当前页在中间
+      pages.push("...");
+      for (let i = current - 1; i <= current + 1; i++) {
+        pages.push(i);
+      }
+      pages.push("...");
+      pages.push(total);
+    }
+  }
+
+  return pages;
+};
+
 // 回到顶部
 const scrollToTop = () => {
   // 尝试多种方法
@@ -250,8 +411,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 +528,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,83 +564,71 @@ const getPageData = async () => {
 
 <style scoped lang="scss">
 .historic-data-container {
-  max-width: calc(100% - 300px);
+  width: 650 * 2.5px;
   margin: 0 auto;
+
   .header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 20px;
 
     .title {
-      font-size: 85px;
+      font-size: 40 * 2.5px;
       font-weight: bold;
       margin: 0;
     }
-
-    .filter-container {
-      display: flex;
-      gap: 10px;
-    }
   }
 
-  .pagination-container {
+  .filter-container {
     display: flex;
-    justify-content: space-between;
     align-items: center;
-    margin-top: 20px;
-    padding: 10px 16px;
-    border-radius: 4px;
-    background-color: #ffffff;
+    gap: 16 * 2.5px;
+    padding: 0 16 * 2.5px;
+    margin-bottom: 32 * 2.5px;
+    margin-top: 32 * 2.5px;
 
-    .page-btn {
-      display: flex;
-      align-items: center;
-      gap: 5px;
-      padding: 6px 12px;
-      font-size: 50px;
-
-      &.prev-btn {
-        margin-right: auto;
-      }
-
-      &.next-btn {
-        margin-left: 10px;
-      }
-
-      &:disabled {
-        opacity: 0.5;
-        cursor: not-allowed;
-      }
+    .range-label {
+      font-family: "PingFang SC", sans-serif;
+      font-weight: 400;
+      font-size: 16 * 2.5px;
+      line-height: 1.375em;
+      letter-spacing: 3%;
+      color: #455363;
     }
 
-    .page-info {
-      font-size: 40px;
-      color: #374151;
-      margin: 0 10px;
-    }
+    .filter-option {
+      padding: 7 * 2.5px 28 * 2.5px;
+      border-radius: 3 * 2.5px;
+      background-color: #efefef;
+      cursor: pointer;
+      font-family: "PingFang SC", sans-serif;
+      font-weight: 400;
+      font-size: 16 * 2.5px;
+      line-height: 1.375em;
+      color: #000000;
+      transition: all 0.2s ease;
 
-    .right-controls {
-      display: flex;
-      align-items: center;
+      &:hover {
+        background-color: #e0e0e0;
+      }
 
-      .rows-dropdown {
-        font-size: 40px;
+      &.active {
+        background-color: #ff7bac;
+        color: #ffffff;
       }
     }
   }
-
   .back-to-top-link {
     display: flex;
     justify-content: center;
-    margin-top: 16px;
+    margin-top: 16 * 2.5px;
 
     a {
       display: flex;
       align-items: center;
-      gap: 5px;
+      gap: 5 * 2.5px;
       color: #2563eb;
-      font-size: 50px;
+      font-size: 20 * 2.5px;
       font-weight: bold;
       text-decoration: none;
 
@@ -466,11 +637,305 @@ const getPageData = async () => {
       }
     }
   }
+}
 
-  :deep(.n-data-table) {
-    .n-data-table-td {
-      padding: 12px 8px;
-    }
+.reports-table {
+  width: 100%;
+  background: #ffffff;
+  border-radius: 16 * 2.5px;
+  box-shadow: 0px 3px 14px 0px rgba(0, 0, 0, 0.16);
+  padding: 16 * 2.5px;
+}
+
+.table-container {
+  width: 100%;
+  overflow-x: auto;
+}
+
+.table-container::-webkit-scrollbar {
+  height: 8px;
+}
+
+.table-container::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 4px;
+}
+
+.table-container::-webkit-scrollbar-thumb {
+  background: #ccc;
+  border-radius: 4px;
+}
+
+.table-container::-webkit-scrollbar-thumb:hover {
+  background: #fff0f5;
+  cursor: pointer;
+}
+.column {
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 400;
+  font-size: 16 * 2.5px;
+  line-height: 1.375em;
+  letter-spacing: 3%;
+  color: #455363;
+  padding: 16 * 2.5px 16 * 2.5px;
+  position: relative;
+}
+.table-header {
+  display: flex;
+  border-radius: 8 * 2.5px;
+  margin-bottom: 4 * 2.5px;
+  align-items: center;
+  position: sticky;
+  top: 0;
+  z-index: 2;
+
+  .column {
+    background: #fff0f5;
+    font-family: "PingFang SC", sans-serif;
+    font-weight: 500;
+    font-size: 16 * 2.5px;
+    line-height: 1.375em;
+    letter-spacing: 3%;
+    color: #000000;
   }
 }
+
+.table-row {
+  display: flex;
+  align-items: center;
+  position: relative;
+  border-radius: 8 * 2.5px;
+  &:hover .column {
+    background: #fff8fb;
+  }
+
+  // &:last-child {
+  //   border-bottom: none;
+  // }
+
+  &:nth-child(even) {
+    margin: 4px 0;
+  }
+}
+
+.reports-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4 * 2.5px;
+}
+
+.table-row .column:not(:last-child)::after {
+  content: "";
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  height: 24 * 2.5px;
+  border-right: 1px dashed #e0e0e6;
+}
+
+.table-header .column:first-child,
+.table-row .column:first-child {
+  position: sticky;
+  left: 0;
+  z-index: 1;
+}
+
+.table-header .column:first-child {
+  border-radius: 8 * 2.5px 0 0 8 * 2.5px;
+}
+.table-header .column:last-child,
+.table-row .column:last-child {
+  border-radius: 0 8 * 2.5px 8 * 2.5px 0;
+}
+
+.table-row .column:first-child {
+  background: #ffffff;
+}
+
+.table-row:hover .column:first-child {
+  background: #fff8fb;
+}
+
+// 分页器样式
+.pagination-container {
+  display: flex;
+  align-items: center;
+  margin-top: 20 * 2.5px;
+  justify-content: flex-end;
+}
+
+.pagination-info {
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 400;
+  font-size: 16 * 2.5px;
+  line-height: 1.4375em;
+  color: #455363;
+  text-align: right;
+  padding: 0 16 * 2.5px;
+  margin-top: 16 * 2.5px;
+  margin-bottom: 16 * 2.5px;
+}
+
+.pagination-controls {
+  display: flex;
+  align-items: center;
+  gap: 8 * 2.5px;
+}
+
+.pagination-buttons {
+  display: flex;
+  align-items: center;
+  gap: 8 * 2.5px;
+}
+.page-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28 * 2.5px;
+  height: 28 * 2.5px;
+  border: 1px solid #e0e0e6;
+  border-radius: 3 * 2.5px;
+  background: #ffffff;
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 400;
+  font-size: 14 * 2.5px;
+  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: 18 * 2.5px;
+  padding: 4px 12 * 2.5px;
+  height: 28 * 2.5px;
+  border: 1px solid #e0e0e6;
+  border-radius: 3 * 2.5px;
+  background: #ffffff;
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 400;
+  font-size: 14 * 2.5px;
+  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: 3 * 2.5px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  z-index: 1000;
+  margin-bottom: 2 * 2.5px;
+}
+
+.page-size-option {
+  padding: 8px 12 * 2.5px;
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 400;
+  font-size: 14 * 2.5px;
+  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: 8 * 2.5px;
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 400;
+  font-size: 14 * 2.5px;
+  line-height: 1.428em;
+  color: #455363;
+  margin-right: 16 * 2.5px;
+}
+
+.goto-input {
+  width: 60 * 2.5px;
+  height: 28 * 2.5px;
+  padding: 4px 12 * 2.5px;
+  border: 1px solid #e0e0e6;
+  border-radius: 3 * 2.5px;
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 400;
+  font-size: 14 * 2.5px;
+  line-height: 1.428em;
+  color: #455363;
+  text-align: center;
+
+  &:focus {
+    outline: none;
+    border-color: #ff7bac;
+  }
+}
+
+.title-section {
+  display: flex;
+  flex-direction: column;
+  gap: 16 * 2.5px;
+  margin-bottom: 32 * 2.5px;
+  margin-top: 43 * 2.5px;
+  padding: 0 16 * 2.5px;
+}
+
+.title-decoration {
+  width: 58 * 2.5px;
+  height: 7 * 2.5px;
+  background: #ff7bac;
+  margin: auto 0;
+  margin-top: 0;
+}
+
+.title-text {
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 500;
+  font-size: 32 * 2.5px;
+  line-height: 1;
+  letter-spacing: 0.03em;
+  color: #000000;
+}
 </style>
diff --git a/src/views/stock-quote/size1440/index.vue b/src/views/stock-quote/size1440/index.vue
index d5776b8..0956163 100644
--- a/src/views/stock-quote/size1440/index.vue
+++ b/src/views/stock-quote/size1440/index.vue
@@ -1,7 +1,6 @@
 <script setup>
 import { useStockQuote } from "@/store/stock-quote/index.js";
 const { getStockQuate, stockQuote, formatted } = useStockQuote();
-console.log(stockQuote);
 getStockQuate();
 </script>
 
diff --git a/src/views/stock-quote/size768/index.vue b/src/views/stock-quote/size768/index.vue
index 2be6177..d441640 100644
--- a/src/views/stock-quote/size768/index.vue
+++ b/src/views/stock-quote/size768/index.vue
@@ -7,81 +7,201 @@ getStockQuate();
 </script>
 
 <template>
-  <main ref="main">
-    <main
-      class="min-h-60vh flex flex-col items-center justify-start px-4 py-6 pt-500px"
-    >
-      <!-- 价格卡片 -->
-      <section
-        class="w-full max-w-80vw flex flex-col items-center justify-center glass-card p-6 rounded-2xl shadow mb-6"
-      >
-        <div
-          class="text-5xl font-extrabold text-#ff7bac animate-bg-move select-none drop-shadow-lg"
-        >
-          ${{ stockQuote.price }}
+  <main class="stock-quote-container-768">
+    <div class="content-wrapper">
+      <div class="title-section">
+        <div class="title-decoration"></div>
+        <div class="title-text">Stock Quote</div>
+      </div>
+
+      <div class="data-section">
+        <div class="price-card">
+          <div class="price-value">${{ stockQuote.price }}</div>
+          <div class="price-nasdaq">NASDAQ: FIEE</div>
+          <div class="price-date">{{ formatted }}</div>
         </div>
-        <div
-          class="mt-3 text-base text-gray-500 font-semibold tracking-widest mb-0px"
-        >
-          NASDAQ: <span class="text-black">FIEE</span>
-        </div>
-        <div class="text-gray-500 text-70px">{{ formatted }}</div>
-      </section>
-      <!-- 信息卡片列表 -->
-      <section class="w-full max-w-80vw grid grid-cols-3 gap-4">
-        <div class="info-card">
-          <div class="text-sm text-gray-400">Open</div>
-          <div class="text-xl font-bold">{{ stockQuote.open }}</div>
-        </div>
-        <div class="info-card">
-          <div class="text-sm text-gray-400">% Change</div>
-          <div
-            class="text-xl font-bold"
-            :class="
-              stockQuote.change?.includes('-')
-                ? 'text-green-500'
-                : 'text-red-500'
-            "
-          >
-            {{ stockQuote.change }}
+        <div class="details-grid">
+          <div class="details-column">
+            <div class="detail-item">
+              <span class="detail-label">Open</span>
+              <span class="detail-value">{{ stockQuote.open }}</span>
+            </div>
+            <div class="detail-item">
+              <span class="detail-label">Day's Range</span>
+              <span class="detail-value">{{ stockQuote.daysRange }}</span>
+            </div>
+            <div class="detail-item">
+              <span class="detail-label">Volume</span>
+              <span class="detail-value">{{ stockQuote.volume }}</span>
+            </div>
+          </div>
+          <div class="details-column">
+            <div class="detail-item">
+              <span class="detail-label">% Change</span>
+              <span
+                class="detail-value"
+                :class="{
+                  'text-red': String(stockQuote.change).includes('-'),
+                  'text-green': String(stockQuote.change).includes('+'),
+                }"
+              >
+                {{ stockQuote.change }}
+              </span>
+            </div>
+            <div class="detail-item">
+              <span class="detail-label">52-Week Range</span>
+              <span class="detail-value">{{ stockQuote.week52Range }}</span>
+            </div>
+            <div class="detail-item">
+              <span class="detail-label">Market Cap</span>
+              <span class="detail-value">{{ stockQuote.marketCap }}</span>
+            </div>
           </div>
         </div>
-        <div class="info-card">
-          <div class="text-sm text-gray-400">Day's Range</div>
-          <div class="text-xl font-bold">{{ stockQuote.daysRange }}</div>
-        </div>
-        <div class="info-card">
-          <div class="text-sm text-gray-400">52-Week Range</div>
-          <div class="text-xl font-bold">{{ stockQuote.week52Range }}</div>
-        </div>
-        <div class="info-card">
-          <div class="text-sm text-gray-400">Volume</div>
-          <div class="text-xl font-bold">{{ stockQuote.volume }}</div>
-        </div>
-        <div class="info-card">
-          <div class="text-sm text-gray-400">Market Cap</div>
-          <div class="text-xl font-bold">{{ stockQuote.marketCap }}</div>
-        </div>
-      </section>
-    </main>
+      </div>
+    </div>
   </main>
 </template>
 
 <style scoped lang="scss">
-.glass-card {
-  backdrop-filter: blur(10px);
-  background: rgba(255, 255, 255, 0.92);
-  border: 1px solid rgba(200, 200, 255, 0.18);
-  box-shadow: 0 3px 12px 0 rgba(255, 123, 172, 0.08);
+.stock-quote-container-768 {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-family: "PingFang SC", sans-serif;
+  background-image: url("@/assets/image/768/bg-stock-quote.png");
+  background-size: cover;
+  background-position: center;
 }
-.info-card {
-  background: rgba(255, 255, 255, 0.95);
-  border-radius: 16px;
-  box-shadow: 0 2px 6px 0 rgba(255, 123, 172, 0.06);
-  padding: 16px 14px;
+
+.content-wrapper {
+  width: 650 * 2.5px;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  gap: 4px;
+  color: #fff;
+}
+
+.title-section {
+  display: flex;
+  flex-direction: column;
+  gap: 16 * 2.5px;
+  margin-bottom: 32 * 2.5px;
+  margin-top: 43 * 2.5px;
+  padding: 0 16 * 2.5px;
+}
+
+.title-decoration {
+  width: 58 * 2.5px;
+  height: 7 * 2.5px;
+  background: #ff7bac;
+  margin: auto 0;
+  margin-top: 0;
+}
+
+.title-text {
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 500;
+  font-size: 32 * 2.5px;
+  line-height: 1;
+  letter-spacing: 0.03em;
+  color: #000000;
+}
+
+.data-section {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.price-card {
+  width: 100%;
+  height: 355 * 2.5px;
+  background-color: white;
+  border-radius: 16 * 2.5px;
+  box-shadow: 0 * 2.5px 3 * 2.5px 14 * 2.5px 0 * 2.5px rgba(0, 0, 0, 0.16);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 16 * 2.5px;
+  gap: 30 * 2.5px;
+  text-align: center;
+}
+
+.price-value {
+  width: 100%;
+  font-size: 110 * 2.5px;
+  font-weight: 600;
+  line-height: 1;
+  letter-spacing: 0.48 * 2.5px;
+  background: linear-gradient(to right, #ff7bac, #00ffff);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+
+.price-nasdaq {
+  width: 100%;
+  font-size: 24 * 2.5px;
+  color: black;
+  font-weight: 600;
+  letter-spacing: 1.2 * 2.5px;
+  line-height: 1;
+}
+
+.price-date {
+  width: 100%;
+  font-size: 18 * 2.5px;
+  color: #455363;
+  font-weight: 500;
+}
+
+.details-grid {
+  width: 100%;
+  display: flex;
+  align-items: center;
+}
+
+.details-column {
+  width: 325 * 2.5px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.detail-item {
+  width: 100%;
+  height: 155 * 2.5px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 16 * 2.5px 32 * 2.5px;
+  text-align: center;
+}
+
+.detail-label {
+  width: 100%;
+  font-size: 18 * 2.5px;
+  color: #455363;
+  font-weight: 500;
+}
+
+.detail-value {
+  width: 100%;
+  font-size: 24 * 2.5px;
+  color: black;
+  font-weight: 600;
+  letter-spacing: 1.2 * 2.5px;
+}
+
+.text-red {
+  color: #cf3050;
+}
+
+.text-green {
+  color: #00c48c;
 }
 </style>