src/router/index.js

@@ -18,11 +18,6 @@ const routes = [
         name: 'contacts',
         component: () => import('@/views/contacts/index.vue'),
       },
-      {
-        path: '/calculator',
-        name: 'calculator',
-        component: () => import('@/views/calculator/index.vue'),
-      },
       {
         path: '/home',
         name: 'home',

src/store/stock-quote/index.js

@@ -15,7 +15,7 @@ export const useStockQuote = createGlobalState(() => {
     ]
   })
 const getStockQuate= async()=>{
-    const res = await axios.get('http://saas-test.szjixun.cn/api/chart/forward/test')
+    const res = await axios.get('http://localhost:3213/api/minm/open')
     stockQuote.value=res.data
 }
   return {

src/views/calculator/index.vue

@@ -1,34 +0,0 @@
-<script setup>
-import { computed } from "vue";
-import { useWindowSize } from "@vueuse/core";
-
-import size375 from "./size375/index.vue";
-import size768 from "./size768/index.vue";
-import size1440 from "./size1440/index.vue";
-import size1920 from "./size1920/index.vue";
-import { useRouter } from "vue-router";
-import { useI18n } from "vue-i18n";
-
-const router = useRouter();
-const { width } = useWindowSize();
-const { t } = useI18n();
-
-const viewComponent = computed(() => {
-  const viewWidth = width.value;
-  if (viewWidth <= 450) {
-    return size375;
-  } else if (viewWidth <= 1100) {
-    return size768;
-  } else if (viewWidth <= 1500) {
-    return size1440;
-  } else if (viewWidth <= 1920 || viewWidth > 1920) {
-    return size1920;
-  }
-});
-</script>
-
-<template>
-  <component :is="viewComponent" />
-</template>
-
-<style scoped lang="scss"></style>

src/views/calculator/size1440/index.vue

@@ -1,22 +0,0 @@
-<script setup>
-import { NCarousel, NDivider, NMarquee, NPopselect } from "naive-ui";
-import { onUnmounted, ref, watch, onMounted, computed } from "vue";
-
-</script>
-
-<template>
-  <header className="header">
-  1440
-  </header>
-  <main ref="main">
-
-  </main>
-  <footer>
-
-  </footer>
-</template>
-
-<style scoped lang="scss">
-
-</style>
-

src/views/calculator/size1920/index.vue

@@ -1,64 +0,0 @@
-<script setup>
-import { ref } from 'vue'
-import { NCard, NRadioGroup, NRadio, NInput, NDatePicker, NButton } from 'naive-ui'
-
-const investmentType = ref('amount')
-const amount = ref(10000)
-const dividendType = ref('notReinvested')
-const investmentDate = ref(null)
-
-
-const handleSubmit = () => {
-  message.success('已提交！')
-}
-</script>
-
-<template>
-  <div class="flex-center min-h-[80vh]  animate-bg-move">
-    <n-card
-      class="w-[900px] glass-card animate-bounce-in shadow-2xl border-none"
-      :content-style="{padding: '48px 56px'}"
-      :header-style="{background: 'transparent'}"
-    >
-      <div class="flex justify-between gap-10">
-        <!-- 投资类型 -->
-        <div class="flex-1">
-          <div class="text-xl font-bold mb-4">Investment Type</div>
-          <n-radio-group v-model:value="investmentType" name="investmentType">
-            <n-radio value="amount">Amount invested (in dollars)</n-radio>
-            <n-radio value="shares">Number of shares purchased</n-radio>
-          </n-radio-group>
-        </div>
-        <!-- 金额与分红 -->
-        <div class="flex-1">
-          <div class="text-xl font-bold mb-4">Amount to Calculate</div>
-          <n-input v-model:value="amount" type="number" class="mb-3" size="large" placeholder="Enter amount" />
-          <n-radio-group v-model:value="dividendType" name="dividendType">
-            <n-radio value="reinvested">Dividends reinvested</n-radio>
-            <n-radio value="notReinvested">Dividends not reinvested</n-radio>
-          </n-radio-group>
-        </div>
-        <!-- 投资日期 -->
-        <div class="flex-1">
-          <div class="text-xl font-bold mb-4">Investment Date</div>
-          <n-date-picker v-model:value="investmentDate" type="date" class="w-full" size="large" placeholder="Select date" />
-        </div>
-      </div>
-      <div class="flex justify-end mt-10">
-        <n-button type="primary" size="large" class="px-10 py-2 rounded-full animate-bounce-in hover:scale-105 transition-transform duration-300 shadow-lg" @click="handleSubmit">
-          Submit
-        </n-button>
-      </div>
-    </n-card>
-  </div>
-</template>
-
-<style scoped>
-.glass-card {
-  background: rgba(255,255,255,0.18);
-  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
-  backdrop-filter: blur(12px);
-  border-radius: 32px;
-  border: 1px solid rgba(255,255,255,0.18);
-}
-</style>

src/views/calculator/size375/index.vue

@@ -1,22 +0,0 @@
-<script setup>
-import { NCarousel, NDivider, NMarquee, NPopselect } from "naive-ui";
-import { onUnmounted, ref, watch, onMounted, computed } from "vue";
-
-</script>
-
-<template>
-  <header className="header">
-  375
-  </header>
-  <main ref="main">
-
-  </main>
-  <footer>
-
-  </footer>
-</template>
-
-<style scoped lang="scss">
-
-</style>
-

src/views/calculator/size768/index.vue

@@ -1,22 +0,0 @@
-<script setup>
-import { NCarousel, NDivider, NMarquee, NPopselect } from "naive-ui";
-import { onUnmounted, ref, watch, onMounted, computed } from "vue";
-
-</script>
-
-<template>
-  <header className="header">
-  768
-  </header>
-  <main ref="main">
-
-  </main>
-  <footer>
-
-  </footer>
-</template>
-
-<style scoped lang="scss">
-
-</style>
-

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

@@ -1,9 +1,9 @@
 <template>
-  <div class="historic-data-container" style="margin-bottom: 100px">
+  <div class="historic-data-container" style="margin-bottom: 100px;">
     <img
       src="@/assets/image/historic-stock.png"
       alt="1"
-      style="max-width: 100%; margin: 0 auto"
+      style="max-width: 100%; margin: 0 auto;"
     />
 
     <div class="header mt-[20px]">
@@ -40,7 +40,6 @@
       :data="paginatedData"
       :bordered="false"
       :single-line="false"
-      :scroll-x="1200"
     />
 
     <div class="pagination-container">
@@ -82,195 +81,193 @@
 </template>
 
 <script setup>
-import { NDataTable, NButton, NDropdown, NIcon } from "naive-ui";
+import { NDataTable, NButton, NDropdown, NIcon } from 'naive-ui'
-import { reactive, onMounted, h, computed } from "vue";
+import { reactive, onMounted, h, computed } from 'vue'
-import axios from "axios";
+import axios from 'axios'
 import {
   ChevronDownOutline,
   ChevronBackOutline,
   ChevronForwardOutline,
   ArrowUpOutline,
-} from "@vicons/ionicons5";
+} from '@vicons/ionicons5'
-import defaultTableData from "../data";
+import defaultTableData from '../data'
-console.log("defaultTableData", defaultTableData);
+console.log('defaultTableData', defaultTableData)
 
 // 数据筛选选项
 const periodOptions = [
-  { label: "Daily", key: "Daily" },
+  { label: 'Daily', key: 'Daily' },
-  { label: "Weekly", key: "Weekly" },
+  { label: 'Weekly', key: 'Weekly' },
-  { label: "Monthly", key: "Monthly" },
+  { label: 'Monthly', key: 'Monthly' },
-  { label: "Quarterly", key: "Quarterly" },
+  { label: 'Quarterly', key: 'Quarterly' },
-  { label: "Annual", key: "Annual" },
+  { label: 'Annual', key: 'Annual' },
-];
+]
 
 const durationOptions = [
-  { label: "3 Months", key: "3 Months" },
+  { label: '3 Months', key: '3 Months' },
-  { label: "6 Months", key: "6 Months" },
+  { label: '6 Months', key: '6 Months' },
-  { label: "Year to Date", key: "Year to Date" },
+  { label: 'Year to Date', key: 'Year to Date' },
-  { label: "1 Year", key: "1 Year" },
+  { label: '1 Year', key: '1 Year' },
-  { label: "5 Years", key: "5 Years" },
+  { label: '5 Years', key: '5 Years' },
-  { label: "10 Years", key: "10 Years" },
+  { label: '10 Years', key: '10 Years' },
-  { label: "Full History", key: "Full History", disabled: true },
+  { label: 'Full History', key: 'Full History', disabled: true },
-];
+]
 
 // 分页大小选项
 const pageSizeOptions = [
-  { label: "50", key: 50 },
+  { label: '50', key: 50 },
-  { label: "100", key: 100 },
+  { label: '100', key: 100 },
-  { label: "500", key: 500 },
+  { label: '500', key: 500 },
-  { label: "1000", key: 1000 },
+  { label: '1000', key: 1000 },
-];
+]
 
 const state = reactive({
-  selectedPeriod: "Daily",
+  selectedPeriod: 'Daily',
-  selectedDuration: "3 Months",
+  selectedDuration: '3 Months',
   tableData: [],
   currentPage: 1,
   pageSize: 50,
-});
+})
 
 // 计算总页数
 const totalPages = computed(() => {
-  return Math.ceil(state.tableData.length / state.pageSize);
+  return Math.ceil(state.tableData.length / state.pageSize)
-});
+})
 
 // 计算当前页的数据
 const paginatedData = computed(() => {
-  const start = (state.currentPage - 1) * state.pageSize;
+  const start = (state.currentPage - 1) * state.pageSize
-  const end = start + state.pageSize;
+  const end = start + state.pageSize
-  return state.tableData.slice(start, end);
+  return state.tableData.slice(start, end)
-});
+})
 
 // 表格列定义
 const columns = [
   {
-    title: "Date",
+    title: 'Date',
-    key: "date",
+    key: 'date',
-    align: "left",
+    align: 'left',
-    fixed: "left",
-    width: 150,
   },
   {
-    title: "Open",
+    title: 'Open',
-    key: "open",
+    key: 'open',
-    align: "center",
+    align: 'center',
   },
   {
-    title: "High",
+    title: 'High',
-    key: "high",
+    key: 'high',
-    align: "center",
+    align: 'center',
   },
   {
-    title: "Low",
+    title: 'Low',
-    key: "low",
+    key: 'low',
-    align: "center",
+    align: 'center',
   },
   {
-    title: "Close",
+    title: 'Close',
-    key: "close",
+    key: 'close',
-    align: "center",
+    align: 'center',
   },
   {
-    title: "Adj. Close",
+    title: 'Adj. Close',
-    key: "adjClose",
+    key: 'adjClose',
-    align: "center",
+    align: 'center',
   },
   {
-    title: "Change",
+    title: 'Change',
-    key: "change",
+    key: 'change',
-    align: "center",
+    align: 'center',
     render(row) {
-      const value = parseFloat(row.change);
+      const value = parseFloat(row.change)
-      const color = value < 0 ? "#ff4d4f" : value > 0 ? "#52c41a" : "";
+      const color = value < 0 ? '#ff4d4f' : value > 0 ? '#52c41a' : ''
-      return h("span", { style: { color } }, row.change);
+      return h('span', { style: { color } }, row.change)
     },
   },
   {
-    title: "Volume",
+    title: 'Volume',
-    key: "volume",
+    key: 'volume',
-    align: "center",
+    align: 'center',
   },
-];
+]
 
 // 处理下拉选项变更
 const handlePeriodChange = (key) => {
-  state.selectedPeriod = key;
+  state.selectedPeriod = key
-  if (key === "Annual") {
+  if (key === 'Annual') {
-    handleDurationChange("Full History");
+    handleDurationChange('Full History')
-    return;
+    return
   }
-  if (key === "Monthly") {
+  if (key === 'Monthly') {
-    handleDurationChange("10 Years");
+    handleDurationChange('10 Years')
-    return;
+    return
   }
-  if (key === "Quarterly") {
+  if (key === 'Quarterly') {
-    handleDurationChange("10 Years");
+    handleDurationChange('10 Years')
-    return;
+    return
   }
-  getPageData();
+  getPageData()
-};
+}
 
 const handleDurationChange = (key) => {
-  state.selectedDuration = key;
+  state.selectedDuration = key
-  getPageData();
+  getPageData()
-};
+}
 
 // 处理分页
 const handlePrevPage = () => {
   if (state.currentPage === 1) {
-    return;
+    return
   }
-  state.currentPage--;
+  state.currentPage--
-};
+}
 
 const handleNextPage = () => {
   if (state.currentPage >= totalPages.value) {
-    return;
+    return
   }
-  state.currentPage++;
+  state.currentPage++
-};
+}
 
 const handlePageSizeChange = (size) => {
-  state.pageSize = size;
+  state.pageSize = size
-  state.currentPage = 1; // 重置到第一页
+  state.currentPage = 1 // 重置到第一页
-};
+}
 
 // 回到顶部
 const scrollToTop = () => {
   window.scrollTo({
     top: 0,
-    behavior: "smooth",
+    behavior: 'smooth',
-  });
+  })
-};
+}
 
 onMounted(() => {
-  getPageDefaultData();
+  getPageDefaultData()
-});
+})
 
 const getPageDefaultData = async () => {
   try {
     let url =
-      "https://stockanalysis.com/api/symbol/a/OTC-MINM/history?type=chart";
+      'https://stockanalysis.com/api/symbol/a/OTC-MINM/history?type=chart'
-    const res = await axios.get(url);
+    const res = await axios.get(url)
-    let originalData = res.data.data;
+    let originalData = res.data.data
 
     // 转换为日期格式："Nov 26, 2024"
     let calcApiData = originalData.map((item) => [
-      new Date(item[0]).toLocaleDateString("en-US", {
+      new Date(item[0]).toLocaleDateString('en-US', {
-        month: "short",
+        month: 'short',
-        day: "numeric",
+        day: 'numeric',
-        year: "numeric",
+        year: 'numeric',
       }),
       item[1],
-    ]);
+    ])
-    console.log("接口数据", calcApiData);
+    console.log('接口数据', calcApiData)
 
     // 使用API数据更新defaultTableData中的close和adjClose值
     const updatedTableData = defaultTableData.map((tableItem) => {
       // 查找对应日期的API数据
       const matchedApiData = calcApiData.find(
-        (apiItem) => apiItem[0] === tableItem.date
+        (apiItem) => apiItem[0] === tableItem.date,
-      );
+      )
 
       if (matchedApiData) {
         // 更新close和adjClose值
@@ -278,58 +275,58 @@ const getPageDefaultData = async () => {
           ...tableItem,
           close: matchedApiData[1].toFixed(2),
           adjClose: matchedApiData[1].toFixed(2),
-        };
+        }
       }
-      return tableItem;
+      return tableItem
-    });
+    })
 
-    state.tableData = updatedTableData;
+    state.tableData = updatedTableData
   } catch (error) {
-    console.error("获取数据失败", error);
+    console.error('获取数据失败', error)
   }
-};
+}
 const getPageData = async () => {
-  let range = "";
+  let range = ''
-  if (state.selectedDuration === "3 Months") {
+  if (state.selectedDuration === '3 Months') {
-    range = "3M";
+    range = '3M'
-  } else if (state.selectedDuration === "6 Months") {
+  } else if (state.selectedDuration === '6 Months') {
-    range = "6M";
+    range = '6M'
-  } else if (state.selectedDuration === "Year to Date") {
+  } else if (state.selectedDuration === 'Year to Date') {
-    range = "YTD";
+    range = 'YTD'
-  } else if (state.selectedDuration === "1 Year") {
+  } else if (state.selectedDuration === '1 Year') {
-    range = "1Y";
+    range = '1Y'
-  } else if (state.selectedDuration === "5 Years") {
+  } else if (state.selectedDuration === '5 Years') {
-    range = "5Y";
+    range = '5Y'
-  } else if (state.selectedDuration === "10 Years") {
+  } else if (state.selectedDuration === '10 Years') {
-    range = "10Y";
+    range = '10Y'
-  } else if (state.selectedDuration === "Full History") {
+  } else if (state.selectedDuration === 'Full History') {
-    range = "Max";
+    range = 'Max'
   }
-  let url = `https://stockanalysis.com/api/symbol/a/OTC-MINM/history?period=${state.selectedPeriod}&range=${range}`;
+  let url = `https://stockanalysis.com/api/symbol/a/OTC-MINM/history?period=${state.selectedPeriod}&range=${range}`
-  const res = await axios.get(url);
+  const res = await axios.get(url)
   if (res.data.status === 200) {
-    console.error(res.data.data);
+    console.error(res.data.data)
     // 转换为日期格式："Nov 26, 2024"
     let resultData = res.data.data.map((item) => {
       return {
-        date: new Date(item.t).toLocaleDateString("en-US", {
+        date: new Date(item.t).toLocaleDateString('en-US', {
-          month: "short",
+          month: 'short',
-          day: "numeric",
+          day: 'numeric',
-          year: "numeric",
+          year: 'numeric',
         }),
-        open: item.o != null ? Number(item.o).toFixed(2) : "",
+        open: item.o != null ? Number(item.o).toFixed(2) : '',
-        high: item.h != null ? Number(item.h).toFixed(2) : "",
+        high: item.h != null ? Number(item.h).toFixed(2) : '',
-        low: item.l != null ? Number(item.l).toFixed(2) : "",
+        low: item.l != null ? Number(item.l).toFixed(2) : '',
-        close: item.c != null ? Number(item.c).toFixed(2) : "",
+        close: item.c != null ? Number(item.c).toFixed(2) : '',
-        adjClose: item.a != null ? Number(item.a).toFixed(2) : "",
+        adjClose: item.a != null ? Number(item.a).toFixed(2) : '',
-        change: item.ch != null ? Number(item.ch).toFixed(2) + "%" : "",
+        change: item.ch != null ? Number(item.ch).toFixed(2) + '%' : '',
         volume: item.v,
-      };
+      }
-    });
+    })
-    console.error(resultData, "resultData");
+    console.error(resultData, 'resultData')
-    state.tableData = resultData;
+    state.tableData = resultData
   }
-};
+}
 </script>
 
 <style scoped lang="scss">

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

@@ -1,427 +1,22 @@
-<template>
-  <div class="historic-data-container" style="margin-bottom: 100px">
-    <img
-      src="@/assets/image/historic-stock-375.png"
-      alt="1"
-      style="max-width: 100%; margin: 0 auto"
-    />
-
-    <div class="header mt-[80px]">
-      <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>
-    </div>
-
-    <n-data-table
-      :columns="columns"
-      :data="paginatedData"
-      :bordered="false"
-      :single-line="false"
-      :scroll-x="600"
-    />
-
-    <div class="pagination-container">
-      <n-button class="page-btn prev-btn" @click="handlePrevPage">
-        <n-icon><chevron-back-outline /></n-icon>
-      </n-button>
-
-      <div class="page-info mr-[40px]">
-        {{ state.currentPage }} of {{ totalPages }}
-      </div>
-
-      <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">
-          <n-icon><chevron-forward-outline /></n-icon>
-        </n-button>
-      </div>
-    </div>
-
-    <div class="back-to-top-link">
-      <a href="#" @click.prevent="scrollToTop">
-        Back to Top
-        <n-icon><arrow-up-outline /></n-icon>
-      </a>
-    </div>
-  </div>
-</template>
-
 <script setup>
-import { NDataTable, NButton, NDropdown, NIcon } from "naive-ui";
+import { NCarousel, NDivider, NMarquee, NPopselect } from "naive-ui";
-import { reactive, onMounted, h, computed } from "vue";
+import { onUnmounted, ref, watch, onMounted, computed } from "vue";
-import axios from "axios";
-import {
-  ChevronDownOutline,
-  ChevronBackOutline,
-  ChevronForwardOutline,
-  ArrowUpOutline,
-} from "@vicons/ionicons5";
-import defaultTableData from "../data";
-console.log("defaultTableData", defaultTableData);
 
-// 数据筛选选项
-const periodOptions = [
-  { label: "Daily", key: "Daily" },
-  { label: "Weekly", key: "Weekly" },
-  { label: "Monthly", key: "Monthly" },
-  { label: "Quarterly", key: "Quarterly" },
-  { label: "Annual", key: "Annual" },
-];
-
-const durationOptions = [
-  { label: "3 Months", key: "3 Months" },
-  { label: "6 Months", key: "6 Months" },
-  { label: "Year to Date", key: "Year to Date" },
-  { label: "1 Year", key: "1 Year" },
-  { label: "5 Years", key: "5 Years" },
-  { label: "10 Years", key: "10 Years" },
-  { label: "Full History", key: "Full History", disabled: true },
-];
-
-// 分页大小选项
-const pageSizeOptions = [
-  { label: "50", key: 50 },
-  { label: "100", key: 100 },
-  { label: "500", key: 500 },
-  { label: "1000", key: 1000 },
-];
-
-const state = reactive({
-  selectedPeriod: "Daily",
-  selectedDuration: "3 Months",
-  tableData: [],
-  currentPage: 1,
-  pageSize: 50,
-});
-
-// 计算总页数
-const totalPages = computed(() => {
-  return Math.ceil(state.tableData.length / state.pageSize);
-});
-
-// 计算当前页的数据
-const paginatedData = computed(() => {
-  const start = (state.currentPage - 1) * state.pageSize;
-  const end = start + state.pageSize;
-  return state.tableData.slice(start, end);
-});
-
-// 表格列定义
-const columns = [
-  {
-    width: 100,
-    title: "Date",
-    key: "date",
-    align: "left",
-    fixed: "left",
-  },
-  {
-    title: "Open",
-    key: "open",
-    align: "center",
-    fixed: "left",
-  },
-  {
-    title: "High",
-    key: "high",
-    align: "center",
-  },
-  {
-    title: "Low",
-    key: "low",
-    align: "center",
-  },
-  {
-    title: "Close",
-    key: "close",
-    align: "center",
-  },
-  {
-    title: "Adj. Close",
-    key: "adjClose",
-    align: "center",
-  },
-  {
-    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",
-    key: "volume",
-    align: "center",
-  },
-];
-
-// 处理下拉选项变更
-const handlePeriodChange = (key) => {
-  state.selectedPeriod = key;
-  if (key === "Annual") {
-    handleDurationChange("Full History");
-    return;
-  }
-  if (key === "Monthly") {
-    handleDurationChange("10 Years");
-    return;
-  }
-  if (key === "Quarterly") {
-    handleDurationChange("10 Years");
-    return;
-  }
-  getPageData();
-};
-
-const handleDurationChange = (key) => {
-  state.selectedDuration = key;
-  getPageData();
-};
-
-// 处理分页
-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 scrollToTop = () => {
-  window.scrollTo({
-    top: 0,
-    behavior: "smooth",
-  });
-};
-
-onMounted(() => {
-  getPageDefaultData();
-});
-
-const getPageDefaultData = async () => {
-  try {
-    let url =
-      "https://stockanalysis.com/api/symbol/a/OTC-MINM/history?type=chart";
-    const res = await axios.get(url);
-    let originalData = res.data.data;
-
-    // 转换为日期格式："Nov 26, 2024"
-    let calcApiData = originalData.map((item) => [
-      new Date(item[0]).toLocaleDateString("en-US", {
-        month: "short",
-        day: "numeric",
-        year: "numeric",
-      }),
-      item[1],
-    ]);
-    console.log("接口数据", calcApiData);
-
-    // 使用API数据更新defaultTableData中的close和adjClose值
-    const updatedTableData = defaultTableData.map((tableItem) => {
-      // 查找对应日期的API数据
-      const matchedApiData = calcApiData.find(
-        (apiItem) => apiItem[0] === tableItem.date
-      );
-
-      if (matchedApiData) {
-        // 更新close和adjClose值
-        return {
-          ...tableItem,
-          close: matchedApiData[1].toFixed(2),
-          adjClose: matchedApiData[1].toFixed(2),
-        };
-      }
-      return tableItem;
-    });
-
-    state.tableData = updatedTableData;
-  } catch (error) {
-    console.error("获取数据失败", error);
-  }
-};
-const getPageData = async () => {
-  let range = "";
-  if (state.selectedDuration === "3 Months") {
-    range = "3M";
-  } else if (state.selectedDuration === "6 Months") {
-    range = "6M";
-  } else if (state.selectedDuration === "Year to Date") {
-    range = "YTD";
-  } else if (state.selectedDuration === "1 Year") {
-    range = "1Y";
-  } else if (state.selectedDuration === "5 Years") {
-    range = "5Y";
-  } else if (state.selectedDuration === "10 Years") {
-    range = "10Y";
-  } else if (state.selectedDuration === "Full History") {
-    range = "Max";
-  }
-  let url = `https://stockanalysis.com/api/symbol/a/OTC-MINM/history?period=${state.selectedPeriod}&range=${range}`;
-  const res = await axios.get(url);
-  if (res.data.status === 200) {
-    console.error(res.data.data);
-    // 转换为日期格式："Nov 26, 2024"
-    let resultData = res.data.data.map((item) => {
-      return {
-        date: new Date(item.t).toLocaleDateString("en-US", {
-          month: "short",
-          day: "numeric",
-          year: "numeric",
-        }),
-        open: item.o != null ? Number(item.o).toFixed(2) : "",
-        high: item.h != null ? Number(item.h).toFixed(2) : "",
-        low: item.l != null ? Number(item.l).toFixed(2) : "",
-        close: item.c != null ? Number(item.c).toFixed(2) : "",
-        adjClose: item.a != null ? Number(item.a).toFixed(2) : "",
-        change: item.ch != null ? Number(item.ch).toFixed(2) + "%" : "",
-        volume: item.v,
-      };
-    });
-    console.error(resultData, "resultData");
-    state.tableData = resultData;
-  }
-};
 </script>
 
+<template>
+  <header className="header">
+  375
+  </header>
+  <main ref="main">
+
+  </main>
+  <footer>
+
+  </footer>
+</template>
+
 <style scoped lang="scss">
-.historic-data-container {
-  padding: 80px;
 
-  .header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 20px;
-
-    .title {
-      font-size: 113px;
-      font-weight: bold;
-      margin: 0;
-    }
-
-    .filter-container {
-      display: flex;
-      gap: 40px;
-    }
-  }
-
-  .pagination-container {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-top: 60px;
-    padding: 10px 16px;
-    border-radius: 4px;
-    background-color: #ffffff;
-
-    .page-btn {
-      display: flex;
-      align-items: center;
-      gap: 5px;
-      padding: 6px 12px;
-      font-size: 92px;
-
-      &.prev-btn {
-        margin-right: auto;
-      }
-
-      &.next-btn {
-        margin-left: 10px;
-      }
-
-      &:disabled {
-        opacity: 0.5;
-        cursor: not-allowed;
-      }
-    }
-
-    .page-info {
-      font-size: 72px;
-      color: #374151;
-    }
-
-    .right-controls {
-      display: flex;
-      align-items: center;
-
-      .rows-dropdown {
-        font-size: 72px;
-      }
-    }
-  }
-
-  .back-to-top-link {
-    display: flex;
-    justify-content: center;
-    margin-top: 56px;
-
-    a {
-      display: flex;
-      align-items: center;
-      gap: 5px;
-      color: #2563eb;
-      font-size: 92px;
-      font-weight: bold;
-      text-decoration: none;
-
-      &:hover {
-        text-decoration: underline;
-      }
-    }
-  }
-
-  :deep(.n-data-table) {
-    .n-data-table-td {
-      padding: 12px 8px;
-    }
-  }
-}
 </style>
+