add product-introduction 1920

src/router/index.js

@@ -149,6 +149,7 @@ const routes = [
       {
         path: "/product-introduction",
         name: "product-introduction",
+        meta: { bg: 'null' },
         component: () => import("@/views/product-introduction/index.vue"),
       },
     ],

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

@@ -658,7 +658,7 @@ onUnmounted(() => {
 .pagination-container {
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  justify-content: flex-end;
   margin-bottom: 30px;
   gap: 21px;
 }
@@ -675,7 +675,7 @@ onUnmounted(() => {
 .pagination-controls {
   display: flex;
   align-items: center;
-  gap: 21px;
+  gap: 8px;
 }
 
 .pagination-buttons {
@@ -787,6 +787,7 @@ onUnmounted(() => {
   font-size: 14px;
   line-height: 1.428em;
   color: #455363;
+  margin-right: 16px;
 }
 
 .goto-input {

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

@@ -1,7 +1,5 @@
 <template>
-  <header></header>
+  <div class="page-container">
-  <main class="page-container">
-    <div class="financials-container">
     <!-- 标题区域 -->
     <div class="title-section">
       <div class="title-decoration"></div>
@@ -28,11 +26,7 @@
     <!-- 报告列表 -->
     <div class="reports-table">
       <div class="reports-list">
-          <div
+        <div v-for="(item, index) in pagedList" :key="index" class="table-row">
-            v-for="(item, index) in pagedList"
-            :key="index"
-            class="table-row"
-          >
           <div class="content">
             <div class="file-content">
               <div class="file-info">
@@ -143,8 +137,6 @@
       </div>
     </div>
   </div>
-  </main>
-  <footer></footer>
 </template>
 <script setup>
 import { ref, watch, onMounted, onUnmounted, computed, reactive } from "vue";
@@ -348,12 +340,6 @@ const handleClickOutside = (event) => {
 </script>
 <style scoped lang="scss">
 .page-container {
-  background-size: 100% 100%;
-  background-position: center;
-  background-repeat: no-repeat;
-}
-
-.financials-container {
   max-width: 932px;
   margin: 0 auto;
 }
@@ -553,7 +539,7 @@ const handleClickOutside = (event) => {
 .pagination-container {
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  justify-content: flex-end;
   margin-bottom: 30px;
   gap: 21px;
 }
@@ -570,7 +556,7 @@ const handleClickOutside = (event) => {
 .pagination-controls {
   display: flex;
   align-items: center;
-  gap: 21px;
+  gap: 8px;
 }
 
 .pagination-buttons {
@@ -682,6 +668,7 @@ const handleClickOutside = (event) => {
   font-size: 14px;
   line-height: 1.428em;
   color: #455363;
+  margin-right: 16px;
 }
 
 .goto-input {

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

@@ -1,10 +1,5 @@
 <template>
   <div class="historic-data-container" style="margin-bottom: 40px">
-    <!-- <img
-      src="@/assets/image/historic-stock.png"
-      alt="1"
-      style="max-width: 100%; margin: 0 auto"
-    /> -->
     <div class="echarts-container">
       <customEcharts></customEcharts>
     </div>
@@ -85,202 +80,202 @@
 </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)
-import customEcharts from '@/components/customEcharts/index.vue'
+import customEcharts from "@/components/customEcharts/index.vue";
 
 // 数据筛选选项
 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 },
-]
+];
 
 // 分页大小选项
 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: '6 Months',
+  selectedDuration: "6 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',
+    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;
-  state.currentPage = 1
+  state.currentPage = 1;
-  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 = () => {
   // 尝试多种方法
   // 1. 使用document.body
-  document.body.scrollTop = 0
+  document.body.scrollTop = 0;
   // 2. 使用document.documentElement (HTML元素)
-  document.documentElement.scrollTop = 0
+  document.documentElement.scrollTop = 0;
   // 3. 使用scrollIntoView
-  document.querySelector('.historic-data-container').scrollIntoView({
+  document.querySelector(".historic-data-container").scrollIntoView({
-    behavior: 'smooth',
+    behavior: "smooth",
-    block: 'start',
+    block: "start",
-  })
+  });
-}
+};
 onMounted(() => {
-  getPageData()
+  getPageData();
-})
+});
 
 const getPageDefaultData = async () => {
   try {
     let url =
-      'https://stockanalysis.com/api/symbol/a/OTC-MINM/history?period=Daily&range=3M'
+      "https://stockanalysis.com/api/symbol/a/OTC-MINM/history?period=Daily&range=3M";
-    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)
 
     // 使用API数据更新defaultTableData中的close和adjClose值
     const updatedTableData = defaultTableData.map((tableItem) => {
       // 查找对应日期的API数据
       const matchedApiData = calcApiData.find(
-        (apiItem) => apiItem[0] === tableItem.date,
+        (apiItem) => apiItem[0] === tableItem.date
-      )
+      );
 
       if (matchedApiData) {
         // 更新close和adjClose值
@@ -288,100 +283,100 @@ const getPageDefaultData = async () => {
           ...tableItem,
           close: matchedApiData[1].toFixed(2),
           adjClose: matchedApiData[1].toFixed(2),
+        };
       }
-      }
+      return tableItem;
-      return tableItem
+    });
-    })
 
-    state.tableData = updatedTableData
+    state.tableData = updatedTableData;
   } catch (error) {
     // console.error('获取数据失败', error)
   }
-}
+};
 const getPageData = async () => {
-  let range = ''
+  let range = "";
-  let now = new Date()
+  let now = new Date();
-  const last = new Date(now)
+  const last = new Date(now);
-  last.setMonth(now.getMonth() - 6)
+  last.setMonth(now.getMonth() - 6);
-  let fromDate = last
+  let fromDate = last;
   let toDate =
     now.getFullYear() +
-    '-' +
+    "-" +
-    String(now.getMonth() + 1).padStart(2, '0') +
+    String(now.getMonth() + 1).padStart(2, "0") +
-    '-' +
+    "-" +
-    String(now.getDate()).padStart(2, '0')
+    String(now.getDate()).padStart(2, "0");
-  if (state.selectedDuration === '3 Months') {
+  if (state.selectedDuration === "3 Months") {
-    range = '3M'
+    range = "3M";
-    const last = new Date(now)
+    const last = new Date(now);
-    last.setMonth(now.getMonth() - 3)
+    last.setMonth(now.getMonth() - 3);
-    fromDate = last
+    fromDate = last;
-  } else if (state.selectedDuration === '6 Months') {
+  } else if (state.selectedDuration === "6 Months") {
-    range = '6M'
+    range = "6M";
-    const last = new Date(now)
+    const last = new Date(now);
-    last.setMonth(now.getMonth() - 6)
+    last.setMonth(now.getMonth() - 6);
-    fromDate = last
+    fromDate = last;
-  } else if (state.selectedDuration === 'Year to Date') {
+  } else if (state.selectedDuration === "Year to Date") {
-    range = 'YTD'
+    range = "YTD";
-    fromDate = new Date(now.getFullYear(), 0, 1)
+    fromDate = new Date(now.getFullYear(), 0, 1);
-  } else if (state.selectedDuration === '1 Year') {
+  } else if (state.selectedDuration === "1 Year") {
-    range = '1Y'
+    range = "1Y";
-    const last = new Date(now)
+    const last = new Date(now);
-    last.setFullYear(now.getFullYear() - 1)
+    last.setFullYear(now.getFullYear() - 1);
-    fromDate = last
+    fromDate = last;
-  } else if (state.selectedDuration === '5 Years') {
+  } else if (state.selectedDuration === "5 Years") {
-    range = '5Y'
+    range = "5Y";
-    const last = new Date(now)
+    const last = new Date(now);
-    last.setFullYear(now.getFullYear() - 5)
+    last.setFullYear(now.getFullYear() - 5);
-    fromDate = last
+    fromDate = last;
-  } else if (state.selectedDuration === '10 Years') {
+  } else if (state.selectedDuration === "10 Years") {
-    range = '10Y'
+    range = "10Y";
-    const last = new Date(now)
+    const last = new Date(now);
-    last.setFullYear(now.getFullYear() - 10)
+    last.setFullYear(now.getFullYear() - 10);
-    fromDate = last
+    fromDate = last;
-  } else if (state.selectedDuration === 'Full History') {
+  } else if (state.selectedDuration === "Full History") {
-    range = 'Max'
+    range = "Max";
-    fromDate = new Date('2009-10-07')
+    fromDate = new Date("2009-10-07");
   }
   let finalFromDate =
     fromDate.getFullYear() +
-    '-' +
+    "-" +
-    String(fromDate.getMonth() + 1).padStart(2, '0') +
+    String(fromDate.getMonth() + 1).padStart(2, "0") +
-    '-' +
+    "-" +
-    String(fromDate.getDate()).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=' +
+    "https://common.szjixun.cn/api/stock/history/list?from=" +
     finalFromDate +
-    '&to=' +
+    "&to=" +
-    toDate
+    toDate;
-  const res = await axios.get(url)
+  const res = await axios.get(url);
   // console.error(res)
   if (res.status === 200) {
     if (res.data.status === 0) {
       // 转换为日期格式："Nov 26, 2024"
       let resultData = res.data.data.map((item) => {
         return {
-          date: new Date(item.date).toLocaleDateString('en-US', {
+          date: new Date(item.date).toLocaleDateString("en-US", {
-            month: 'short',
+            month: "short",
-            day: 'numeric',
+            day: "numeric",
-            year: 'numeric',
+            year: "numeric",
           }),
-          open: item.open != null ? Number(item.open).toFixed(2) : '',
+          open: item.open != null ? Number(item.open).toFixed(2) : "",
-          high: item.high != null ? Number(item.high).toFixed(2) : '',
+          high: item.high != null ? Number(item.high).toFixed(2) : "",
-          low: item.low != null ? Number(item.low).toFixed(2) : '',
+          low: item.low != null ? Number(item.low).toFixed(2) : "",
-          close: item.close != null ? Number(item.close).toFixed(2) : '',
+          close: item.close != null ? Number(item.close).toFixed(2) : "",
-          adjClose: item.close != null ? Number(item.close).toFixed(2) : '',
+          adjClose: item.close != null ? Number(item.close).toFixed(2) : "",
           change:
             item.changePercent != null
-              ? Number(item.changePercent).toFixed(2) + '%'
+              ? Number(item.changePercent).toFixed(2) + "%"
-              : '',
+              : "",
           volume: item.volume,
-        }
+        };
-      })
+      });
-      state.tableData = resultData
+      state.tableData = resultData;
-    }
     }
   }
+};
 </script>
 
 <style scoped lang="scss">

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="historic-data-container" style="margin-bottom: 40px">
+  <div class="historic-data-container">
     <div class="echarts-container">
       <customEcharts></customEcharts>
     </div>
@@ -715,8 +715,9 @@ const getPageData = async () => {
 .pagination-container {
   display: flex;
   align-items: center;
-  justify-content: space-between;
   margin-top: 20px;
+  justify-content: flex-end;
+  margin-bottom: 30px;
   gap: 21px;
 }
 
@@ -732,7 +733,7 @@ const getPageData = async () => {
 .pagination-controls {
   display: flex;
   align-items: center;
-  gap: 21px;
+  gap: 8px;
 }
 
 .pagination-buttons {
@@ -740,7 +741,6 @@ const getPageData = async () => {
   align-items: center;
   gap: 8px;
 }
-
 .page-btn {
   display: flex;
   align-items: center;
@@ -844,6 +844,7 @@ const getPageData = async () => {
   font-size: 14px;
   line-height: 1.428em;
   color: #455363;
+  margin-right: 16px;
 }
 
 .goto-input {

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

@@ -1,10 +1,5 @@
 <template>
   <div class="historic-data-container" style="margin-bottom: 40px">
-    <!-- <img
-      src="@/assets/image/historic-stock-375.png"
-      alt="1"
-      style="max-width: 100%; margin: 0 auto"
-    /> -->
     <div class="echarts-container">
       <customEcharts></customEcharts>
     </div>
@@ -83,202 +78,202 @@
 </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)
-import customEcharts from '@/components/customEcharts/index.vue'
+import customEcharts from "@/components/customEcharts/index.vue";
 
 // 数据筛选选项
 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 },
-]
+];
 
 // 分页大小选项
 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: '6 Months',
+  selectedDuration: "6 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',
+    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;
-  state.currentPage = 1
+  state.currentPage = 1;
-  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 = () => {
   // 尝试多种方法
   // 1. 使用document.body
-  document.body.scrollTop = 0
+  document.body.scrollTop = 0;
   // 2. 使用document.documentElement (HTML元素)
-  document.documentElement.scrollTop = 0
+  document.documentElement.scrollTop = 0;
   // 3. 使用scrollIntoView
-  document.querySelector('.historic-data-container').scrollIntoView({
+  document.querySelector(".historic-data-container").scrollIntoView({
-    behavior: 'smooth',
+    behavior: "smooth",
-    block: 'start',
+    block: "start",
-  })
+  });
-}
+};
 onMounted(() => {
-  getPageData()
+  getPageData();
-})
+});
 
 const getPageDefaultData = async () => {
   try {
     let url =
-      'https://stockanalysis.com/api/symbol/a/OTC-MINM/history?period=Daily&range=3M'
+      "https://stockanalysis.com/api/symbol/a/OTC-MINM/history?period=Daily&range=3M";
-    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)
 
     // 使用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值
@@ -286,100 +281,100 @@ const getPageDefaultData = async () => {
           ...tableItem,
           close: matchedApiData[1].toFixed(2),
           adjClose: matchedApiData[1].toFixed(2),
+        };
       }
-      }
+      return tableItem;
-      return tableItem
+    });
-    })
 
-    state.tableData = updatedTableData
+    state.tableData = updatedTableData;
   } catch (error) {
     // console.error('获取数据失败', error)
   }
-}
+};
 const getPageData = async () => {
-  let range = ''
+  let range = "";
-  let now = new Date()
+  let now = new Date();
-  const last = new Date(now)
+  const last = new Date(now);
-  last.setMonth(now.getMonth() - 6)
+  last.setMonth(now.getMonth() - 6);
-  let fromDate = last
+  let fromDate = last;
   let toDate =
     now.getFullYear() +
-    '-' +
+    "-" +
-    String(now.getMonth() + 1).padStart(2, '0') +
+    String(now.getMonth() + 1).padStart(2, "0") +
-    '-' +
+    "-" +
-    String(now.getDate()).padStart(2, '0')
+    String(now.getDate()).padStart(2, "0");
-  if (state.selectedDuration === '3 Months') {
+  if (state.selectedDuration === "3 Months") {
-    range = '3M'
+    range = "3M";
-    const last = new Date(now)
+    const last = new Date(now);
-    last.setMonth(now.getMonth() - 3)
+    last.setMonth(now.getMonth() - 3);
-    fromDate = last
+    fromDate = last;
-  } else if (state.selectedDuration === '6 Months') {
+  } else if (state.selectedDuration === "6 Months") {
-    range = '6M'
+    range = "6M";
-    const last = new Date(now)
+    const last = new Date(now);
-    last.setMonth(now.getMonth() - 6)
+    last.setMonth(now.getMonth() - 6);
-    fromDate = last
+    fromDate = last;
-  } else if (state.selectedDuration === 'Year to Date') {
+  } else if (state.selectedDuration === "Year to Date") {
-    range = 'YTD'
+    range = "YTD";
-    fromDate = new Date(now.getFullYear(), 0, 1)
+    fromDate = new Date(now.getFullYear(), 0, 1);
-  } else if (state.selectedDuration === '1 Year') {
+  } else if (state.selectedDuration === "1 Year") {
-    range = '1Y'
+    range = "1Y";
-    const last = new Date(now)
+    const last = new Date(now);
-    last.setFullYear(now.getFullYear() - 1)
+    last.setFullYear(now.getFullYear() - 1);
-    fromDate = last
+    fromDate = last;
-  } else if (state.selectedDuration === '5 Years') {
+  } else if (state.selectedDuration === "5 Years") {
-    range = '5Y'
+    range = "5Y";
-    const last = new Date(now)
+    const last = new Date(now);
-    last.setFullYear(now.getFullYear() - 5)
+    last.setFullYear(now.getFullYear() - 5);
-    fromDate = last
+    fromDate = last;
-  } else if (state.selectedDuration === '10 Years') {
+  } else if (state.selectedDuration === "10 Years") {
-    range = '10Y'
+    range = "10Y";
-    const last = new Date(now)
+    const last = new Date(now);
-    last.setFullYear(now.getFullYear() - 10)
+    last.setFullYear(now.getFullYear() - 10);
-    fromDate = last
+    fromDate = last;
-  } else if (state.selectedDuration === 'Full History') {
+  } else if (state.selectedDuration === "Full History") {
-    range = 'Max'
+    range = "Max";
-    fromDate = new Date('2009-10-07')
+    fromDate = new Date("2009-10-07");
   }
   let finalFromDate =
     fromDate.getFullYear() +
-    '-' +
+    "-" +
-    String(fromDate.getMonth() + 1).padStart(2, '0') +
+    String(fromDate.getMonth() + 1).padStart(2, "0") +
-    '-' +
+    "-" +
-    String(fromDate.getDate()).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=' +
+    "https://common.szjixun.cn/api/stock/history/list?from=" +
     finalFromDate +
-    '&to=' +
+    "&to=" +
-    toDate
+    toDate;
-  const res = await axios.get(url)
+  const res = await axios.get(url);
   // console.error(res)
   if (res.status === 200) {
     if (res.data.status === 0) {
       // 转换为日期格式："Nov 26, 2024"
       let resultData = res.data.data.map((item) => {
         return {
-          date: new Date(item.date).toLocaleDateString('en-US', {
+          date: new Date(item.date).toLocaleDateString("en-US", {
-            month: 'short',
+            month: "short",
-            day: 'numeric',
+            day: "numeric",
-            year: 'numeric',
+            year: "numeric",
           }),
-          open: item.open != null ? Number(item.open).toFixed(2) : '',
+          open: item.open != null ? Number(item.open).toFixed(2) : "",
-          high: item.high != null ? Number(item.high).toFixed(2) : '',
+          high: item.high != null ? Number(item.high).toFixed(2) : "",
-          low: item.low != null ? Number(item.low).toFixed(2) : '',
+          low: item.low != null ? Number(item.low).toFixed(2) : "",
-          close: item.close != null ? Number(item.close).toFixed(2) : '',
+          close: item.close != null ? Number(item.close).toFixed(2) : "",
-          adjClose: item.close != null ? Number(item.close).toFixed(2) : '',
+          adjClose: item.close != null ? Number(item.close).toFixed(2) : "",
           change:
             item.changePercent != null
-              ? Number(item.changePercent).toFixed(2) + '%'
+              ? Number(item.changePercent).toFixed(2) + "%"
-              : '',
+              : "",
           volume: item.volume,
-        }
+        };
-      })
+      });
-      state.tableData = resultData
+      state.tableData = resultData;
-    }
     }
   }
+};
 </script>
 
 <style scoped lang="scss">

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

@@ -1,10 +1,5 @@
 <template>
   <div class="historic-data-container" style="margin-bottom: 40px">
-    <!-- <img
-      src="@/assets/image/historic-stock.png"
-      alt="1"
-      style="max-width: 100%; margin: 0 auto"
-    /> -->
     <div class="echarts-container">
       <customEcharts></customEcharts>
     </div>
@@ -85,202 +80,202 @@
 </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)
-import customEcharts from '@/components/customEcharts/index.vue'
+import customEcharts from "@/components/customEcharts/index.vue";
 
 // 数据筛选选项
 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 },
-]
+];
 
 // 分页大小选项
 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: '6 Months',
+  selectedDuration: "6 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',
+    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;
-  state.currentPage = 1
+  state.currentPage = 1;
-  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 = () => {
   // 尝试多种方法
   // 1. 使用document.body
-  document.body.scrollTop = 0
+  document.body.scrollTop = 0;
   // 2. 使用document.documentElement (HTML元素)
-  document.documentElement.scrollTop = 0
+  document.documentElement.scrollTop = 0;
   // 3. 使用scrollIntoView
-  document.querySelector('.historic-data-container').scrollIntoView({
+  document.querySelector(".historic-data-container").scrollIntoView({
-    behavior: 'smooth',
+    behavior: "smooth",
-    block: 'start',
+    block: "start",
-  })
+  });
-}
+};
 onMounted(() => {
-  getPageData()
+  getPageData();
-})
+});
 
 const getPageDefaultData = async () => {
   try {
     let url =
-      'https://stockanalysis.com/api/symbol/a/OTC-MINM/history?period=Daily&range=3M'
+      "https://stockanalysis.com/api/symbol/a/OTC-MINM/history?period=Daily&range=3M";
-    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)
 
     // 使用API数据更新defaultTableData中的close和adjClose值
     const updatedTableData = defaultTableData.map((tableItem) => {
       // 查找对应日期的API数据
       const matchedApiData = calcApiData.find(
-        (apiItem) => apiItem[0] === tableItem.date,
+        (apiItem) => apiItem[0] === tableItem.date
-      )
+      );
 
       if (matchedApiData) {
         // 更新close和adjClose值
@@ -288,100 +283,100 @@ const getPageDefaultData = async () => {
           ...tableItem,
           close: matchedApiData[1].toFixed(2),
           adjClose: matchedApiData[1].toFixed(2),
+        };
       }
-      }
+      return tableItem;
-      return tableItem
+    });
-    })
 
-    state.tableData = updatedTableData
+    state.tableData = updatedTableData;
   } catch (error) {
     // console.error('获取数据失败', error)
   }
-}
+};
 const getPageData = async () => {
-  let range = ''
+  let range = "";
-  let now = new Date()
+  let now = new Date();
-  const last = new Date(now)
+  const last = new Date(now);
-  last.setMonth(now.getMonth() - 6)
+  last.setMonth(now.getMonth() - 6);
-  let fromDate = last
+  let fromDate = last;
   let toDate =
     now.getFullYear() +
-    '-' +
+    "-" +
-    String(now.getMonth() + 1).padStart(2, '0') +
+    String(now.getMonth() + 1).padStart(2, "0") +
-    '-' +
+    "-" +
-    String(now.getDate()).padStart(2, '0')
+    String(now.getDate()).padStart(2, "0");
-  if (state.selectedDuration === '3 Months') {
+  if (state.selectedDuration === "3 Months") {
-    range = '3M'
+    range = "3M";
-    const last = new Date(now)
+    const last = new Date(now);
-    last.setMonth(now.getMonth() - 3)
+    last.setMonth(now.getMonth() - 3);
-    fromDate = last
+    fromDate = last;
-  } else if (state.selectedDuration === '6 Months') {
+  } else if (state.selectedDuration === "6 Months") {
-    range = '6M'
+    range = "6M";
-    const last = new Date(now)
+    const last = new Date(now);
-    last.setMonth(now.getMonth() - 6)
+    last.setMonth(now.getMonth() - 6);
-    fromDate = last
+    fromDate = last;
-  } else if (state.selectedDuration === 'Year to Date') {
+  } else if (state.selectedDuration === "Year to Date") {
-    range = 'YTD'
+    range = "YTD";
-    fromDate = new Date(now.getFullYear(), 0, 1)
+    fromDate = new Date(now.getFullYear(), 0, 1);
-  } else if (state.selectedDuration === '1 Year') {
+  } else if (state.selectedDuration === "1 Year") {
-    range = '1Y'
+    range = "1Y";
-    const last = new Date(now)
+    const last = new Date(now);
-    last.setFullYear(now.getFullYear() - 1)
+    last.setFullYear(now.getFullYear() - 1);
-    fromDate = last
+    fromDate = last;
-  } else if (state.selectedDuration === '5 Years') {
+  } else if (state.selectedDuration === "5 Years") {
-    range = '5Y'
+    range = "5Y";
-    const last = new Date(now)
+    const last = new Date(now);
-    last.setFullYear(now.getFullYear() - 5)
+    last.setFullYear(now.getFullYear() - 5);
-    fromDate = last
+    fromDate = last;
-  } else if (state.selectedDuration === '10 Years') {
+  } else if (state.selectedDuration === "10 Years") {
-    range = '10Y'
+    range = "10Y";
-    const last = new Date(now)
+    const last = new Date(now);
-    last.setFullYear(now.getFullYear() - 10)
+    last.setFullYear(now.getFullYear() - 10);
-    fromDate = last
+    fromDate = last;
-  } else if (state.selectedDuration === 'Full History') {
+  } else if (state.selectedDuration === "Full History") {
-    range = 'Max'
+    range = "Max";
-    fromDate = new Date('2009-10-07')
+    fromDate = new Date("2009-10-07");
   }
   let finalFromDate =
     fromDate.getFullYear() +
-    '-' +
+    "-" +
-    String(fromDate.getMonth() + 1).padStart(2, '0') +
+    String(fromDate.getMonth() + 1).padStart(2, "0") +
-    '-' +
+    "-" +
-    String(fromDate.getDate()).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=' +
+    "https://common.szjixun.cn/api/stock/history/list?from=" +
     finalFromDate +
-    '&to=' +
+    "&to=" +
-    toDate
+    toDate;
-  const res = await axios.get(url)
+  const res = await axios.get(url);
   // console.error(res)
   if (res.status === 200) {
     if (res.data.status === 0) {
       // 转换为日期格式："Nov 26, 2024"
       let resultData = res.data.data.map((item) => {
         return {
-          date: new Date(item.date).toLocaleDateString('en-US', {
+          date: new Date(item.date).toLocaleDateString("en-US", {
-            month: 'short',
+            month: "short",
-            day: 'numeric',
+            day: "numeric",
-            year: 'numeric',
+            year: "numeric",
           }),
-          open: item.open != null ? Number(item.open).toFixed(2) : '',
+          open: item.open != null ? Number(item.open).toFixed(2) : "",
-          high: item.high != null ? Number(item.high).toFixed(2) : '',
+          high: item.high != null ? Number(item.high).toFixed(2) : "",
-          low: item.low != null ? Number(item.low).toFixed(2) : '',
+          low: item.low != null ? Number(item.low).toFixed(2) : "",
-          close: item.close != null ? Number(item.close).toFixed(2) : '',
+          close: item.close != null ? Number(item.close).toFixed(2) : "",
-          adjClose: item.close != null ? Number(item.close).toFixed(2) : '',
+          adjClose: item.close != null ? Number(item.close).toFixed(2) : "",
           change:
             item.changePercent != null
-              ? Number(item.changePercent).toFixed(2) + '%'
+              ? Number(item.changePercent).toFixed(2) + "%"
-              : '',
+              : "",
           volume: item.volume,
-        }
+        };
-      })
+      });
-      state.tableData = resultData
+      state.tableData = resultData;
-    }
     }
   }
+};
 </script>
 
 <style scoped lang="scss">

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

@@ -1,233 +1,546 @@
-<script setup>
+<script setup></script>
-import { useStockQuote } from "@/store/stock-quote/index.js";
-const { getStockQuate, stockQuote, formatted } = useStockQuote();
-console.log(stockQuote);
-getStockQuate();
-</script>
 
 <template>
-  <main ref="main" class="stock-quote-hero">
+  <div class="page-container">
+    <section class="hero-section relative">
       <div class="hero-content">
-      <!-- 标题区域 -->
+        <div class="hero-title">
-      <div class="title-section">
+          More than just a tool——<br />
-        <div class="title-decoration"></div>
+          Comprehensive growth solutions, <br />
-        <div class="stock-title">Stock Quote</div>
+          providing a one-stop solution for content creation,<br />
+          publishing, analysis, and monetization
         </div>
-      <section class="quote-layout">
-        <article class="price-card">
-          <div class="price-value">${{ stockQuote.price }}</div>
-          <div class="price-market">NASDAQ: FIEE</div>
-          <div class="price-time">{{ formatted }}</div>
-        </article>
-        <div class="stats-table">
-          <div class="stats-cell">
-            <span class="stat-title">Open</span>
-            <span class="stat-value">{{ stockQuote.open }}</span>
       </div>
-          <div class="stats-cell">
+      <div class="core-value-card">
-            <span class="stat-title">% Change</span>
+        <div class="card-content">
-            <span
+          <div class="card-title">Core Value</div>
-              class="stat-value"
+          <div class="card-text">
-              :class="
+            The FIEE-SAAS platform is a one-stop content operation solution
-                stockQuote.change
+            tailored for creators in the digital era. The platform utilizes
-                  ? String(stockQuote.change).includes('-')
+            intelligent distribution technology, A1 empowerment tools, and
-                    ? 'negative-change'
+            full-chain services,Assist you in efficiently reaching audiences on
-                    : String(stockQuote.change).includes('+')
+            global mainstream platforms such as TikTok, YouTube, and Instagram,
-                    ? 'positive-change'
+            creating a KOL brand effect, unlocking content value, and achieving
-                    : 'neutral-change'
+            sustainable growth.
-                  : 'neutral-change'
+          </div>
-              "
+        </div>
+      </div>
+      <img
+        src="@/assets/image/product-introduction-img2.png"
+        alt="background"
+        class="hero-bg-img"
+      />
+    </section>
+
+    <section class="features-section">
+      <div class="section-header">
+        <div class="decorator-bar"></div>
+        <div class="section-title">Product Features</div>
+      </div>
+      <div class="features-list">
+        <div class="feature-item">
+          <div class="feature-title">
+            <div class="vertical-line"></div>
+            One-click Synchronous Publishing
+          </div>
+          <div class="feature-description">
+            Synchronize graphic and video content to TikTok, YouTube, and
+            Instagram platforms at once, saving time on repetitive operations.
+          </div>
+        </div>
+        <div class="feature-item">
+          <div class="feature-title">
+            <div class="vertical-line"></div>
+            Intelligent Scheduled Publishing
+          </div>
+          <div class="feature-description">
+            Plan the content release time in advance, support batch scheduling,
+            and accurately grasp the optimal release time of each platform.
+          </div>
+        </div>
+        <div class="feature-item">
+          <div class="feature-title">
+            <div class="vertical-line"></div>
+            Unified Management of Multiple Accounts
+          </div>
+          <div class="feature-description">
+            Easily manage multiple accounts on one platform without the need for
+            repeated login and switching, improving team collaboration
+            efficiency.
+          </div>
+        </div>
+        <div class="feature-item">
+          <div class="feature-title">
+            <div class="vertical-line"></div>
+            Cloud Content Library
+          </div>
+          <div class="feature-description">
+            Safely store and manage all creative materials, access and use them
+            anytime, anywhere, and support quick retrieval and reuse.
+          </div>
+        </div>
+        <div class="feature-item">
+          <div class="feature-title">
+            <div class="vertical-line"></div>
+            Basic Data Tracking
+          </div>
+          <div class="feature-description">
+            Visually view the content performance of various platforms,
+            understand core data indicators, and provide a basis for optimizing
+            strategies.
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="solutions-section">
+      <div class="section-header">
+        <div class="decorator-bar"></div>
+        <div class="section-title">Value Added Solutions</div>
+      </div>
+      <div class="solutions-content">
+        <div class="solutions-list">
+          <div class="solution-item">
+            <img
+              src="@/assets/image/product-introduction-icon1.png"
+              alt="KOL Brand Promotion"
+              class="solution-icon"
+            />
+            <div class="solution-title">
+              <div class="vertical-line"></div>
+              KOL Brand Promotion Services
+            </div>
+            <div class="solution-description">
+              Efficiently connect high-quality business cooperation
+              opportunities and complete the entire process management from
+              order acceptance to publication within the platform.
+            </div>
+          </div>
+          <div class="solution-item">
+            <img
+              src="@/assets/image/product-introduction-icon2.png"
+              alt="Content Creation Support"
+              class="solution-icon"
+            />
+            <div class="solution-title">
+              <div class="vertical-line"></div>
+              Professional Content Creation Support
+            </div>
+            <div class="solution-description">
+              Connect professional shooting and post production teams for you,
+              create high-quality "art+story" content, and strengthen IP
+              influence.
+            </div>
+          </div>
+          <div class="solution-item">
+            <img
+              src="@/assets/image/product-introduction-icon3.png"
+              alt="Account Operation"
+              class="solution-icon"
+            />
+            <div class="solution-title">
+              <div class="vertical-line"></div>
+              Account Operation and Hosting Services
+            </div>
+            <div class="solution-description">
+              From 0 to 1 account positioning, follower growth strategy to
+              monetization cycle, operation experts provide full cycle running
+              and hosting services.
+            </div>
+          </div>
+        </div>
+        <div class="solution-image-container">
+          <img
+            src="@/assets/image/product-introduction-img1.png"
+            alt="Value Added Solutions"
+            class="solution-image"
+          />
+        </div>
+      </div>
+    </section>
+
+    <section class="advantages-section">
+      <div class="advantages-content">
+        <div class="advantages-header">
+          <div class="decorator-bar"></div>
+          <div class="section-title text-white">Our Advantages</div>
+        </div>
+        <div class="advantages-list">
+          <div class="advantage-item">
+            <div class="advantage-title">
+              <div class="vertical-line"></div>
+              Time Saving
+            </div>
+            <div class="advantage-description">
+              Multi platform publishing efficiency improvement, allowing you to
+              focus on content creation.
+            </div>
+          </div>
+          <div class="advantage-item">
+            <div class="advantage-title">
+              <div class="vertical-line"></div>
+              Safe and Reliable
+            </div>
+            <div class="advantage-description">
+              Enterprise level data encryption and permission control ensure
+              account and content security.
+            </div>
+          </div>
+          <div class="advantage-item">
+            <div class="advantage-title">
+              <div class="vertical-line"></div>
+              Maintain Consistency
+            </div>
+            <div class="advantage-description">
+              Ensure that brand information is presented uniformly on all
+              platforms.
+            </div>
+          </div>
+          <div class="advantage-item">
+            <div class="advantage-title">
+              <div class="vertical-line"></div>
+              Data Driven
+            </div>
+            <div class="advantage-description">
+              Optimizing Content Strategies Based on Actual Performance.
+            </div>
+          </div>
+          <div class="advantage-item">
+            <div class="advantage-title">
+              <div class="vertical-line"></div>
+              Easy to Use
+            </div>
+            <div class="advantage-description">
+              Intuitive interface design, no need for professional technical
+              background.
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="cta-section">
+      <img
+        src="@/assets/image/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"
           >
-              {{ stockQuote.change }}
+            <path
-            </span>
+              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 class="stats-cell">
-            <span class="stat-title">Day's Range</span>
-            <span class="stat-value">{{ stockQuote.daysRange }}</span>
         </div>
-          <div class="stats-cell">
+        <div class="cta-qr-code">
-            <span class="stat-title">52-Week Range</span>
+          <img
-            <span class="stat-value">{{ stockQuote.week52Range }}</span>
+            src="@/assets/image/product-introduction-img6.png"
-          </div>
+            alt="QR Code"
-          <div class="stats-cell">
+          />
-            <span class="stat-title">Volume</span>
-            <span class="stat-value">{{ stockQuote.volume }}</span>
-          </div>
-          <div class="stats-cell">
-            <span class="stat-title">Market Cap</span>
-            <span class="stat-value">{{ stockQuote.marketCap }}</span>
         </div>
       </div>
     </section>
   </div>
-  </main>
 </template>
 
 <style scoped>
-.stock-quote-hero {
+.page-container {
+  background-color: #fff;
+  font-family: "PingFang SC", sans-serif;
+  /* max-width: 932px; */
+  margin: 0 auto;
+}
+
+.hero-section {
+  text-align: center;
   position: relative;
+  background-image: url("@/assets/image/product-introduction-img3.png");
+  background-repeat: no-repeat;
+  background-size: 100% auto;
+  background-position: top;
 }
 
 .hero-content {
-  max-width: 1200px;
+  position: relative;
-  margin: 0 auto;
+  z-index: 2;
-  padding: 0 16px;
-}
-
-.hero-header {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 12px;
-}
-.title-section {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  margin-bottom: 32px;
-  padding: 0 16px;
-}
-.title-decoration {
-  width: 58px;
-  height: 7px;
-  background: #ff7bac;
-  margin: auto 0;
-  margin-top: 43px;
-}
-
-.stock-title {
-  font-family: "PingFang SC", sans-serif;
-  font-weight: 500;
-  font-size: 40px;
-  line-height: 1.4em;
-  letter-spacing: 3%;
-  color: #000000;
-}
-
-.gradient-badge {
-  width: 48px;
-  height: 4px;
-  border-radius: 4px;
-  background: #e62968;
 }
 
 .hero-title {
-  font-size: 32px;
+  font-size: 40px;
-  font-weight: 600;
+  font-weight: 500;
-  letter-spacing: 0.02em;
+  line-height: 56px;
-  color: #0d1b2a;
+  letter-spacing: 1.2px;
+  padding: 153px 0;
+  color: #000;
+  z-index: 2;
+}
+.hero-bg-img {
+  position: absolute;
+  bottom: -84px;
+  left: 0;
+  width: 100%;
+  /* height: 100%; */
+  z-index: 1;
+}
+.core-value-card {
+  width: 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;
 }
 
-.quote-layout {
+.card-content {
-  display: grid;
-  grid-template-columns: 420px 1fr;
-  align-items: start;
-  margin-top: 56px;
-}
-
-.price-card {
-  width: 420px;
-  min-height: 420px;
-  border-radius: 32px;
-  background: #ffffff;
-  border: 1px solid #f0f3f8;
-  box-shadow: 0 12px 32px rgba(16, 46, 86, 0.08);
   display: flex;
   flex-direction: column;
-  justify-content: center;
+  gap: 24px;
+}
+
+.card-title {
+  font-size: 40px;
+  font-weight: 500;
+  line-height: 56px;
+  letter-spacing: 1.2px;
+}
+
+.card-text {
+  font-size: 16px;
+  line-height: 22px;
+  color: #455363;
+  letter-spacing: 0.48px;
+}
+
+.section-header {
+  margin-bottom: 32px;
+  padding: 0 16px;
+}
+
+.decorator-bar {
+  width: 58px;
+  height: 7px;
+  background-color: #ff7bac;
+  margin-bottom: 16px;
+}
+
+.section-title {
+  font-size: 40px;
+  font-weight: 500;
+  line-height: 56px;
+  letter-spacing: 1.2px;
+  color: #000;
+}
+.features-section {
+  padding-top: 200px;
+  max-width: 932px;
+  margin: 0 auto;
+}
+.features-list {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.feature-item {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.feature-title {
+  font-size: 24px;
+  font-weight: 500;
+  line-height: 32px;
+  letter-spacing: 1.2px;
+  display: flex;
   align-items: center;
-  padding: 16px;
+  gap: 16px;
-  text-align: center;
+}
+.feature-description {
+  font-size: 16px;
+  line-height: 22px;
+  color: #455363;
+  letter-spacing: 0.48px;
+  padding: 0 16px;
 }
 
-.price-value {
+.solutions-section {
-  font-size: 110px;
+  padding-top: 80px;
-  font-weight: 700;
+  max-width: 932px;
-  letter-spacing: -0.03em;
+  margin: 0 auto;
-  background: linear-gradient(90deg, #ff7bac 0%, #0ff 100%);
+}
-  -webkit-background-clip: text;
+.solutions-content {
-  -webkit-text-fill-color: transparent;
+  display: flex;
-  text-transform: uppercase;
+  gap: 16px;
+}
+.solutions-list {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  width: 466px;
+}
+.solution-item {
+  text-align: left;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.solution-icon {
+  width: 92px;
+  height: 76px;
+  padding-left: 16px;
+}
+.solution-title {
+  font-size: 20px;
+  line-height: 28px;
+  font-weight: 500;
+  display: flex;
+  gap: 16px;
+  align-items: center;
+}
+.solution-description {
+  font-size: 16px;
+  line-height: 22px;
+  color: #455363;
+  letter-spacing: 0.48px;
+  padding: 0 16px;
+}
+.solution-image-container {
+  width: 434px;
+  height: 628px;
+  border-radius: 16px;
+}
+.solution-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 16px;
 }
 
-.price-market {
+.advantages-section {
-  font-size: 22px;
+  margin-top: 80px;
-  font-weight: 600;
+  padding: 80px 0;
-  letter-spacing: 0.04em;
+  background-image: url("@/assets/image/product-introduction-img4.png");
-  color: #0d1b2a;
+  background-size: cover;
-  margin-bottom: 12px;
+  background-position: center;
+  color: #fff;
+  position: relative;
 }
 
-.price-time {
+.advantages-content {
-  font-size: 18px;
+  max-width: 932px;
-  letter-spacing: 0.02em;
+  margin: 0 auto;
-  color: #5a6775;
+  display: flex;
+  gap: 16px;
+  position: relative;
+  z-index: 1;
 }
 
-.stats-table {
+.advantages-header {
-  display: grid;
+  width: 466px;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+  padding: 0 16px;
-  grid-auto-rows: minmax(0, 1fr);
+}
-  border-radius: 24px;
+.advantages-list {
+  width: 466px;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+.advantage-item {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.advantage-title {
+  font-size: 24px;
+  font-weight: 500;
+  line-height: 32px;
+  letter-spacing: 1.2px;
+  display: flex;
+  gap: 16px;
+  align-items: center;
+}
+.advantage-description {
+  font-size: 16px;
+  line-height: 22px;
+  letter-spacing: 0.48px;
+  opacity: 0.7;
+}
+.text-white {
+  color: #fff;
+}
+
+.cta-section {
+  padding: 80px 0;
+  position: relative;
+  max-width: 932px;
+  margin: 0 auto;
   overflow: hidden;
 }
-
+.cta-content {
-.stats-cell {
+  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: center;
+  justify-content: space-between;
-  gap: 8px;
+  height: 188px;
-  padding: 24px 32px;
-  border-bottom: 1px solid rgba(232, 237, 245, 0.85);
-  border-right: 1px solid rgba(232, 237, 245, 0.85);
 }
-
+.cta-arrow {
-.stats-cell:nth-child(2n) {
+  width: 60px;
-  border-right: none;
+  height: 32px;
 }
-
+.cta-title {
-.stats-cell:nth-last-child(-n + 2) {
+  font-size: 40px;
-  border-bottom: none;
-}
-
-.stat-title {
-  font-size: 14px;
   font-weight: 500;
-  letter-spacing: 0.08em;
+  line-height: 56px;
-  text-transform: uppercase;
+  letter-spacing: 1.2px;
-  color: #73849a;
 }
-
+.cta-qr-code {
-.stat-value {
+  width: 188px;
-  font-size: 22px;
+  height: 188px;
-  font-weight: 600;
+  background-color: #90ffff;
-  letter-spacing: 0.02em;
+  border-radius: 16px;
-  color: #10243b;
+  padding: 14px;
 }
-
+.cta-qr-code img {
-.stat-title {
+  width: 100%;
-  font-size: 18px;
+  height: 100%;
-  font-weight: 500;
+  object-fit: contain;
-  letter-spacing: 0.03em;
-  color: #455363;
 }
-
+.cta-bg-img {
-.stat-value {
+  position: absolute;
-  font-size: 30px;
+  top: 80px;
-  font-weight: 600;
+  left: 201px;
-  letter-spacing: 0.04em;
+  width: 530px;
-  color: #0d1b2a;
+  height: 268px;
+  opacity: 0.8;
+  z-index: 0;
 }
-
+.vertical-line {
-.positive-change {
+  width: 1px;
-  color: #00c48c;
+  height: 20px;
-}
+  background: #ff7bac;
-
+  flex-shrink: 0;
-.negative-change {
-  color: #cf3050;
-}
-
-.neutral-change {
-  color: #0d1b2a;
 }
 </style>