From bad5b37b05236e5daedfb3fab26e2c571df0cd91 Mon Sep 17 00:00:00 2001
From: wangyifeng <812766448@qq.com>
Date: Fri, 30 May 2025 14:07:52 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=BA=95=E9=83=A8?=
 =?UTF-8?q?=E6=96=87=E5=AD=97=EF=BC=8C=E5=A2=9E=E5=8A=A04=E4=B8=AA?=
 =?UTF-8?q?=E8=B6=85=E9=93=BE=E6=8E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/customFooter/index.vue         |  4 +-
 .../customFooter/size1920/index.vue           | 54 +++++++++++--
 src/components/customFooter/size375/index.vue | 80 ++++++++++++++-----
 src/components/customFooter/size768/index.vue | 52 ++++++++++++
 src/router/index.js                           | 20 +++++
 .../footerLinks/cookiesSettings/index.vue     | 34 ++++++++
 .../cookiesSettings/size1920/index.vue        | 14 ++++
 .../cookiesSettings/size375/index.vue         | 14 ++++
 src/views/footerLinks/privacyPolicy/index.vue | 34 ++++++++
 .../privacyPolicy/size1920/index.vue          | 14 ++++
 .../privacyPolicy/size375/index.vue           | 14 ++++
 src/views/footerLinks/siteMap/index.vue       | 34 ++++++++
 .../footerLinks/siteMap/size1920/index.vue    | 14 ++++
 .../footerLinks/siteMap/size375/index.vue     | 14 ++++
 src/views/footerLinks/termsOfUse/index.vue    | 34 ++++++++
 .../footerLinks/termsOfUse/size1920/index.vue | 14 ++++
 .../footerLinks/termsOfUse/size375/index.vue  | 14 ++++
 17 files changed, 428 insertions(+), 30 deletions(-)
 create mode 100644 src/components/customFooter/size768/index.vue
 create mode 100644 src/views/footerLinks/cookiesSettings/index.vue
 create mode 100644 src/views/footerLinks/cookiesSettings/size1920/index.vue
 create mode 100644 src/views/footerLinks/cookiesSettings/size375/index.vue
 create mode 100644 src/views/footerLinks/privacyPolicy/index.vue
 create mode 100644 src/views/footerLinks/privacyPolicy/size1920/index.vue
 create mode 100644 src/views/footerLinks/privacyPolicy/size375/index.vue
 create mode 100644 src/views/footerLinks/siteMap/index.vue
 create mode 100644 src/views/footerLinks/siteMap/size1920/index.vue
 create mode 100644 src/views/footerLinks/siteMap/size375/index.vue
 create mode 100644 src/views/footerLinks/termsOfUse/index.vue
 create mode 100644 src/views/footerLinks/termsOfUse/size1920/index.vue
 create mode 100644 src/views/footerLinks/termsOfUse/size375/index.vue

diff --git a/src/components/customFooter/index.vue b/src/components/customFooter/index.vue
index 5b40e6e..83fbf0c 100644
--- a/src/components/customFooter/index.vue
+++ b/src/components/customFooter/index.vue
@@ -3,7 +3,7 @@ import { computed } from 'vue'
 import { useWindowSize } from '@vueuse/core'
 
 import size375 from '@/components/customFooter/size375/index.vue'
-import size768 from '@/components/customFooter/size1920/index.vue'
+import size768 from '@/components/customFooter/size768/index.vue'
 import size1440 from '@/components/customFooter/size1920/index.vue'
 import size1920 from '@/components/customFooter/size1920/index.vue'
 import { useRouter } from 'vue-router'
@@ -15,7 +15,7 @@ const { t } = useI18n()
 
 const viewComponent = computed(() => {
   const viewWidth = width.value
-  if (viewWidth <= 450) {
+  if (viewWidth <= 500) {
     return size375
   } else if (viewWidth <= 1100) {
     return size768
diff --git a/src/components/customFooter/size1920/index.vue b/src/components/customFooter/size1920/index.vue
index 8ec1f90..35d4843 100644
--- a/src/components/customFooter/size1920/index.vue
+++ b/src/components/customFooter/size1920/index.vue
@@ -1,23 +1,61 @@
 <template>
   <!-- 通用页脚 -->
   <div class="custom-footer">
-    <span>Copyright &copy; 2024-2027 FiEE</span>
+    <div class="custom-footer-box">
+      <span>&copy; 2025 FiEE, Inc. All Rights Reserved.</span>
+      <div class="footer-links">
+        <span @click="handleLink('privacyPolicy')">Privacy Policy</span>
+        <span @click="handleLink('termsOfUse')">Terms of use</span>
+        <span @click="handleLink('cookiesSettings')">Cookies Settings</span>
+        <span @click="handleLink('siteMap')">Site Map</span>
+      </div>
+    </div>
   </div>
 </template>
 
-<script setup></script>
+<script setup>
+import { useRouter } from 'vue-router'
+const router = useRouter()
+
+//点击跳转到对应的链接页面
+const handleLink = (link) => {
+  console.log(link)
+  router.push(link)
+}
+</script>
 
 <style scoped lang="scss">
 .custom-footer {
   width: 100%;
-  text-align: center;
-  padding: 24px 0;
-  color: #888;
-  // font-size: 15px;
-  font-size: 1.05rem;
   background: #f7f8fa;
-  letter-spacing: 1px;
   border-top: 1px solid #ececec;
   z-index: 100;
+
+  .custom-footer-box {
+    max-width: 1700px;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    letter-spacing: 1px;
+    color: #888;
+    // font-size: 15px;
+    font-size: 1.05rem;
+    padding: 1rem 40px;
+    text-align: center;
+  }
+
+  .footer-links {
+    margin: 0.4rem 0 0;
+    span {
+      border-right: 1px solid #d2d2d7;
+      padding: 0 10px;
+      cursor: pointer;
+    }
+    span:nth-last-child(1) {
+      border: 0;
+    }
+  }
 }
 </style>
diff --git a/src/components/customFooter/size375/index.vue b/src/components/customFooter/size375/index.vue
index e302404..568d530 100644
--- a/src/components/customFooter/size375/index.vue
+++ b/src/components/customFooter/size375/index.vue
@@ -1,23 +1,63 @@
 <template>
-    <!-- 通用页脚 -->
-    <div class="custom-footer">
-      <span>Copyright &copy; 2024-2027 FiEE</span>
+  <!-- 通用页脚 -->
+  <div class="custom-footer">
+    <span>&copy; 2025 FiEE, Inc. All Rights Reserved.</span>
+    <div class="footer-links-box">
+      <div class="footer-links">
+        <span @click="handleLink('privacyPolicy')">Privacy Policy</span>
+        <span @click="handleLink('termsOfUse')">Terms of use</span>
+      </div>
+      <div class="footer-links">
+        <span @click="handleLink('cookiesSettings')">Cookies Settings</span>
+        <span @click="handleLink('siteMap')">Site Map</span>
+      </div>
     </div>
-  </template>
-  
-  <script setup></script>
-  
-  <style scoped lang="scss">
-  .custom-footer {
-    width: 100%;
-    text-align: center;
-    padding: 120px 0;
-    color: #888;
-    font-size: 75px;
-    background: #f7f8fa;
-    letter-spacing: 5px;
-    border-top: 5px solid #ececec;
-    z-index: 100;
+  </div>
+</template>
+
+<script setup>
+import { useRouter } from 'vue-router'
+const router = useRouter()
+
+//点击跳转到对应的链接页面
+const handleLink = (link) => {
+  router.push(link)
+}
+</script>
+
+<style scoped lang="scss">
+.custom-footer {
+  width: 100%;
+  text-align: center;
+  padding: 1rem 0;
+  color: #888;
+  font-size: 0.9rem;
+  background: #f7f8fa;
+  letter-spacing: 5px;
+  border-top: 5px solid #ececec;
+  z-index: 100;
+
+  .footer-links-box {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin: 0.6rem 0 0;
+
+    .footer-links {
+      span {
+        border-right: 1px solid #d2d2d7;
+        padding: 0 0.8rem;
+        cursor: pointer;
+        font-size: 0.75rem;
+        min-width: 8.5rem;
+        display: inline-block;
+        text-align: left;
+      }
+      span:nth-last-child(1) {
+        border: 0;
+      }
+    }
   }
-  </style>
-  
\ No newline at end of file
+}
+</style>
diff --git a/src/components/customFooter/size768/index.vue b/src/components/customFooter/size768/index.vue
new file mode 100644
index 0000000..e29e3ee
--- /dev/null
+++ b/src/components/customFooter/size768/index.vue
@@ -0,0 +1,52 @@
+<template>
+    <!-- 通用页脚 -->
+    <div class="custom-footer">
+      <span>&copy; 2025 FiEE, Inc. All Rights Reserved.</span>
+      <div class="footer-links">
+        <span @click="handleLink('privacyPolicy')">Privacy Policy</span>
+        <span @click="handleLink('termsOfUse')">Terms of use</span>
+        <span @click="handleLink('cookiesSettings')">Cookies Settings</span>
+        <span @click="handleLink('siteMap')">Site Map</span>
+      </div>
+    </div>
+  </template>
+  
+  <script setup>
+  import { useRouter } from 'vue-router'
+  const router = useRouter()
+  
+  //点击跳转到对应的链接页面
+  const handleLink = (link) => {
+    console.log(link)
+    router.push(link)
+  }
+  </script>
+  
+  <style scoped lang="scss">
+  .custom-footer {
+    width: 100%;
+    text-align: center;
+    padding: 24px 0;
+    color: #888;
+    // font-size: 15px;
+    font-size: 1.05rem;
+    background: #f7f8fa;
+    letter-spacing: 1px;
+    border-top: 1px solid #ececec;
+    z-index: 100;
+    padding: 1rem 0;
+  
+    .footer-links {
+      margin: 0.4rem 0 0;
+      span {
+        border-right: 1px solid #d2d2d7;
+        padding: 0 10px;
+        cursor: pointer;
+      }
+      span:nth-last-child(1) {
+        border: 0;
+      }
+    }
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index d881317..4656569 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -104,6 +104,26 @@ const routes = [
         name: "govern",
         component: () => import("@/views/govern/index.vue"),
       },
+      {
+        path: "/privacyPolicy",
+        name: "privacyPolicy",
+        component: () => import("@/views/footerLinks/privacyPolicy/index.vue"),
+      },
+      {
+        path: "/termsOfUse",
+        name: "termsOfUse",
+        component: () => import("@/views/footerLinks/termsOfUse/index.vue"),
+      },
+      {
+        path: "/cookiesSettings",
+        name: "cookiesSettings",
+        component: () => import("@/views/footerLinks/cookiesSettings/index.vue"),
+      },
+      {
+        path: "/siteMap",
+        name: "siteMap",
+        component: () => import("@/views/footerLinks/siteMap/index.vue"),
+      },
     ],
   },
   
diff --git a/src/views/footerLinks/cookiesSettings/index.vue b/src/views/footerLinks/cookiesSettings/index.vue
new file mode 100644
index 0000000..07482fa
--- /dev/null
+++ b/src/views/footerLinks/cookiesSettings/index.vue
@@ -0,0 +1,34 @@
+<script setup>
+import { computed } from 'vue'
+import { useWindowSize } from '@vueuse/core'
+
+import size375 from '@/views/footerLinks/cookiesSettings/size375/index.vue'
+import size768 from '@/views/footerLinks/cookiesSettings/size375/index.vue'
+import size1440 from '@/views/footerLinks/cookiesSettings/size1920/index.vue'
+import size1920 from '@/views/footerLinks/cookiesSettings/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>
diff --git a/src/views/footerLinks/cookiesSettings/size1920/index.vue b/src/views/footerLinks/cookiesSettings/size1920/index.vue
new file mode 100644
index 0000000..9c7a6a1
--- /dev/null
+++ b/src/views/footerLinks/cookiesSettings/size1920/index.vue
@@ -0,0 +1,14 @@
+<script setup>
+import { NCarousel, NDivider, NMarquee, NPopselect } from 'naive-ui'
+import { onUnmounted, ref, watch, onMounted, computed } from 'vue'
+</script>
+
+<template>
+  <header className="header">
+    1920 cookiesSettings
+  </header>
+  <main ref="main"></main>
+</template>
+
+<style scoped lang="scss">
+</style>
diff --git a/src/views/footerLinks/cookiesSettings/size375/index.vue b/src/views/footerLinks/cookiesSettings/size375/index.vue
new file mode 100644
index 0000000..5fc0f3f
--- /dev/null
+++ b/src/views/footerLinks/cookiesSettings/size375/index.vue
@@ -0,0 +1,14 @@
+<script setup>
+import { NCarousel, NDivider, NMarquee, NPopselect } from 'naive-ui'
+import { onUnmounted, ref, watch, onMounted, computed } from 'vue'
+</script>
+
+<template>
+  <header className="header">
+    375 cookiesSettings
+  </header>
+  <main ref="main"></main>
+</template>
+
+<style scoped lang="scss">
+</style>
diff --git a/src/views/footerLinks/privacyPolicy/index.vue b/src/views/footerLinks/privacyPolicy/index.vue
new file mode 100644
index 0000000..46dc0ed
--- /dev/null
+++ b/src/views/footerLinks/privacyPolicy/index.vue
@@ -0,0 +1,34 @@
+<script setup>
+import { computed } from 'vue'
+import { useWindowSize } from '@vueuse/core'
+
+import size375 from '@/views/footerLinks/privacyPolicy/size375/index.vue'
+import size768 from '@/views/footerLinks/privacyPolicy/size375/index.vue'
+import size1440 from '@/views/footerLinks/privacyPolicy/size1920/index.vue'
+import size1920 from '@/views/footerLinks/privacyPolicy/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>
diff --git a/src/views/footerLinks/privacyPolicy/size1920/index.vue b/src/views/footerLinks/privacyPolicy/size1920/index.vue
new file mode 100644
index 0000000..b4d63a5
--- /dev/null
+++ b/src/views/footerLinks/privacyPolicy/size1920/index.vue
@@ -0,0 +1,14 @@
+<script setup>
+import { NCarousel, NDivider, NMarquee, NPopselect } from 'naive-ui'
+import { onUnmounted, ref, watch, onMounted, computed } from 'vue'
+</script>
+
+<template>
+  <header className="header">
+    1920 privacyPolicy
+  </header>
+  <main ref="main"></main>
+</template>
+
+<style scoped lang="scss">
+</style>
diff --git a/src/views/footerLinks/privacyPolicy/size375/index.vue b/src/views/footerLinks/privacyPolicy/size375/index.vue
new file mode 100644
index 0000000..3ada20b
--- /dev/null
+++ b/src/views/footerLinks/privacyPolicy/size375/index.vue
@@ -0,0 +1,14 @@
+<script setup>
+import { NCarousel, NDivider, NMarquee, NPopselect } from 'naive-ui'
+import { onUnmounted, ref, watch, onMounted, computed } from 'vue'
+</script>
+
+<template>
+  <header className="header">
+    375 privacyPolicy
+  </header>
+  <main ref="main"></main>
+</template>
+
+<style scoped lang="scss">
+</style>
diff --git a/src/views/footerLinks/siteMap/index.vue b/src/views/footerLinks/siteMap/index.vue
new file mode 100644
index 0000000..5bbc2d1
--- /dev/null
+++ b/src/views/footerLinks/siteMap/index.vue
@@ -0,0 +1,34 @@
+<script setup>
+import { computed } from 'vue'
+import { useWindowSize } from '@vueuse/core'
+
+import size375 from '@/views/footerLinks/siteMap/size375/index.vue'
+import size768 from '@/views/footerLinks/siteMap/size375/index.vue'
+import size1440 from '@/views/footerLinks/siteMap/size1920/index.vue'
+import size1920 from '@/views/footerLinks/siteMap/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>
diff --git a/src/views/footerLinks/siteMap/size1920/index.vue b/src/views/footerLinks/siteMap/size1920/index.vue
new file mode 100644
index 0000000..ebca6d3
--- /dev/null
+++ b/src/views/footerLinks/siteMap/size1920/index.vue
@@ -0,0 +1,14 @@
+<script setup>
+import { NCarousel, NDivider, NMarquee, NPopselect } from 'naive-ui'
+import { onUnmounted, ref, watch, onMounted, computed } from 'vue'
+</script>
+
+<template>
+  <header className="header">
+    1920 siteMap
+  </header>
+  <main ref="main"></main>
+</template>
+
+<style scoped lang="scss">
+</style>
diff --git a/src/views/footerLinks/siteMap/size375/index.vue b/src/views/footerLinks/siteMap/size375/index.vue
new file mode 100644
index 0000000..4f64724
--- /dev/null
+++ b/src/views/footerLinks/siteMap/size375/index.vue
@@ -0,0 +1,14 @@
+<script setup>
+import { NCarousel, NDivider, NMarquee, NPopselect } from 'naive-ui'
+import { onUnmounted, ref, watch, onMounted, computed } from 'vue'
+</script>
+
+<template>
+  <header className="header">
+    375 siteMap
+  </header>
+  <main ref="main"></main>
+</template>
+
+<style scoped lang="scss">
+</style>
diff --git a/src/views/footerLinks/termsOfUse/index.vue b/src/views/footerLinks/termsOfUse/index.vue
new file mode 100644
index 0000000..77d2c15
--- /dev/null
+++ b/src/views/footerLinks/termsOfUse/index.vue
@@ -0,0 +1,34 @@
+<script setup>
+import { computed } from 'vue'
+import { useWindowSize } from '@vueuse/core'
+
+import size375 from '@/views/footerLinks/termsOfUse/size375/index.vue'
+import size768 from '@/views/footerLinks/termsOfUse/size375/index.vue'
+import size1440 from '@/views/footerLinks/termsOfUse/size1920/index.vue'
+import size1920 from '@/views/footerLinks/termsOfUse/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>
diff --git a/src/views/footerLinks/termsOfUse/size1920/index.vue b/src/views/footerLinks/termsOfUse/size1920/index.vue
new file mode 100644
index 0000000..790c0a2
--- /dev/null
+++ b/src/views/footerLinks/termsOfUse/size1920/index.vue
@@ -0,0 +1,14 @@
+<script setup>
+import { NCarousel, NDivider, NMarquee, NPopselect } from 'naive-ui'
+import { onUnmounted, ref, watch, onMounted, computed } from 'vue'
+</script>
+
+<template>
+  <header className="header">
+    1920 termsOfUse
+  </header>
+  <main ref="main"></main>
+</template>
+
+<style scoped lang="scss">
+</style>
diff --git a/src/views/footerLinks/termsOfUse/size375/index.vue b/src/views/footerLinks/termsOfUse/size375/index.vue
new file mode 100644
index 0000000..b799a7f
--- /dev/null
+++ b/src/views/footerLinks/termsOfUse/size375/index.vue
@@ -0,0 +1,14 @@
+<script setup>
+import { NCarousel, NDivider, NMarquee, NPopselect } from 'naive-ui'
+import { onUnmounted, ref, watch, onMounted, computed } from 'vue'
+</script>
+
+<template>
+  <header className="header">
+    375 termsOfUse
+  </header>
+  <main ref="main"></main>
+</template>
+
+<style scoped lang="scss">
+</style>

From 75824076efee5116a5cdbb24262ec72eccbf90b9 Mon Sep 17 00:00:00 2001
From: wangyifeng <812766448@qq.com>
Date: Fri, 30 May 2025 15:44:26 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E6=8E=A5=E5=85=A5echarts=E5=9B=BE=E8=A1=A8?=
 =?UTF-8?q?=EF=BC=8C=E5=AE=9E=E7=8E=B0=E9=83=A8=E5=88=86=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/customEcharts/index.vue      | 137 +++++++++
 src/views/historic-stock/size1920/index.vue | 296 ++++++++++----------
 2 files changed, 287 insertions(+), 146 deletions(-)
 create mode 100644 src/components/customEcharts/index.vue

diff --git a/src/components/customEcharts/index.vue b/src/components/customEcharts/index.vue
new file mode 100644
index 0000000..0ce9db2
--- /dev/null
+++ b/src/components/customEcharts/index.vue
@@ -0,0 +1,137 @@
+<template>
+  <div class="custom-echarts">
+    <div id="myEcharts" class="myChart"></div>
+  </div>
+</template>
+<script setup>
+import { onMounted } from 'vue'
+import * as echarts from 'echarts'
+
+//初始化eCharts
+const initEcharts = () => {
+  // 基于准备好的dom，初始化echarts实例
+  var myCharts = echarts.init(document.getElementById('myEcharts'))
+  // 绘制图表
+  myCharts.setOption({
+    title: {
+      text: 'FiEE, Inc. Stock Price History',
+    },
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'line',
+        snap: true,
+        label: {
+          backgroundColor: '#6a7985'
+        }
+      },
+      formatter: function (params) {
+        const p = params[0];
+        return `${p.axisValue}<br/>Price: ${p.data}`;
+      }
+    },
+    xAxis: {
+      data: ['2013', '2015', '2017', '2019', '2021', '2023', '2025'],
+      type: 'category',
+      boundaryGap: false,
+    },
+    yAxis: {
+      type: 'value',
+      position: 'right',
+      interval: 25,
+      max: 75.0,
+      show: true,
+    },
+    series: [
+      {
+        name: '销量',
+        type: 'line',
+        data: [5, 20, 36, 10, 10, 20],
+        symbol: 'none',
+        lineStyle: {
+            color: '#2c6288'
+        },
+        areaStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 0,
+                color: '#2c6288'
+              },
+              {
+                offset: 1,
+                color: '#F4F6F8'
+              }
+            ]
+          },
+        },
+      },
+    ],
+
+    dataZoom: [
+      {
+        type: 'inside',
+      },
+      {
+        type: 'slider',
+        show: true,
+        dataBackground: {
+          lineStyle: {
+            color: '#2C6288'
+          },
+          areaStyle: {
+            color: {
+              type: 'linear',
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [
+                { offset: 1, color: '#2c6288' },
+                { offset: 0, color: '#F4F6F8' }
+              ]
+            }
+          }
+        },
+        selectedDataBackground: {
+          lineStyle: {
+            color: '#2C6288'
+          },
+          areaStyle: {
+            color: {
+              type: 'linear',
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [
+                { offset: 1, color: '#2c6288' },
+                { offset: 0, color: '#F4F6F8' }
+              ]
+            }
+          }
+        },
+        fillerColor: 'rgba(44, 98, 136, 0.3)',
+        realtime: false,
+      },
+    ],
+  })
+}
+
+onMounted(() => {
+  initEcharts()
+})
+</script>
+<style lang="scss" scoped>
+.custom-echarts {
+  .myChart {
+    width: 1000px;
+    height: 400px;
+  }
+}
+</style>
diff --git a/src/views/historic-stock/size1920/index.vue b/src/views/historic-stock/size1920/index.vue
index 808c11f..38e4986 100644
--- a/src/views/historic-stock/size1920/index.vue
+++ b/src/views/historic-stock/size1920/index.vue
@@ -1,10 +1,13 @@
 <template>
-  <div class="historic-data-container" style="margin-bottom: 40px">
+  <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"
+      style="max-width: 100%; margin: 0 auto;"
     />
+    <div class="echarts-container">
+      <customEcharts></customEcharts>
+    </div>
 
     <div class="header mt-[20px]">
       <div class="title">Historical Data</div>
@@ -82,200 +85,201 @@
 </template>
 
 <script setup>
-import { NDataTable, NButton, NDropdown, NIcon } from "naive-ui";
-import { reactive, onMounted, h, computed } from "vue";
-import axios from "axios";
+import { NDataTable, NButton, NDropdown, NIcon } from 'naive-ui'
+import { reactive, onMounted, h, computed } from 'vue'
+import axios from 'axios'
 import {
   ChevronDownOutline,
   ChevronBackOutline,
   ChevronForwardOutline,
   ArrowUpOutline,
-} from "@vicons/ionicons5";
-import defaultTableData from "../data";
-console.log("defaultTableData", defaultTableData);
+} from '@vicons/ionicons5'
+import defaultTableData from '../data'
+console.log('defaultTableData', defaultTableData)
+import customEcharts from '@/components/customEcharts/index.vue'
 
 // 数据筛选选项
 const periodOptions = [
-  { label: "Daily", key: "Daily" },
-  { label: "Weekly", key: "Weekly" },
-  { label: "Monthly", key: "Monthly" },
-  { label: "Quarterly", key: "Quarterly" },
-  { label: "Annual", key: "Annual" },
-];
+  { 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 },
-];
+  { 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 },
-];
+  { label: '50', key: 50 },
+  { label: '100', key: 100 },
+  { label: '500', key: 500 },
+  { label: '1000', key: 1000 },
+]
 
 const state = reactive({
-  selectedPeriod: "Daily",
-  selectedDuration: "3 Months",
+  selectedPeriod: 'Daily',
+  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 end = start + state.pageSize;
-  return state.tableData.slice(start, end);
-});
+  const start = (state.currentPage - 1) * state.pageSize
+  const end = start + state.pageSize
+  return state.tableData.slice(start, end)
+})
 
 // 表格列定义
 const columns = [
   {
-    title: "Date",
-    key: "date",
-    align: "left",
-    fixed: "left",
+    title: 'Date',
+    key: 'date',
+    align: 'left',
+    fixed: 'left',
     width: 150,
   },
   {
-    title: "Open",
-    key: "open",
-    align: "center",
+    title: 'Open',
+    key: 'open',
+    align: 'center',
   },
   {
-    title: "High",
-    key: "high",
-    align: "center",
+    title: 'High',
+    key: 'high',
+    align: 'center',
   },
   {
-    title: "Low",
-    key: "low",
-    align: "center",
+    title: 'Low',
+    key: 'low',
+    align: 'center',
   },
   {
-    title: "Close",
-    key: "close",
-    align: "center",
+    title: 'Close',
+    key: 'close',
+    align: 'center',
   },
   {
-    title: "Adj. Close",
-    key: "adjClose",
-    align: "center",
+    title: 'Adj. Close',
+    key: 'adjClose',
+    align: 'center',
   },
   {
-    title: "Change",
-    key: "change",
-    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);
+      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",
+    title: 'Volume',
+    key: 'volume',
+    align: 'center',
   },
-];
+]
 
 // 处理下拉选项变更
 const handlePeriodChange = (key) => {
-  state.selectedPeriod = key;
-  if (key === "Annual") {
-    handleDurationChange("Full History");
-    return;
+  state.selectedPeriod = key
+  if (key === 'Annual') {
+    handleDurationChange('Full History')
+    return
   }
-  if (key === "Monthly") {
-    handleDurationChange("10 Years");
-    return;
+  if (key === 'Monthly') {
+    handleDurationChange('10 Years')
+    return
   }
-  if (key === "Quarterly") {
-    handleDurationChange("10 Years");
-    return;
+  if (key === 'Quarterly') {
+    handleDurationChange('10 Years')
+    return
   }
-  getPageData();
-};
+  getPageData()
+}
 
 const handleDurationChange = (key) => {
-  state.selectedDuration = key;
-  getPageData();
-};
+  state.selectedDuration = key
+  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.currentPage = 1; // 重置到第一页
-};
+  state.pageSize = size
+  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({
-    behavior: "smooth",
-    block: "start",
-  });
-};
+  document.querySelector('.historic-data-container').scrollIntoView({
+    behavior: 'smooth',
+    block: 'start',
+  })
+}
 onMounted(() => {
-  getPageData();
-});
+  getPageData()
+})
 
 const getPageDefaultData = async () => {
   try {
     let url =
-      "https://stockanalysis.com/api/symbol/a/OTC-MINM/history?period=Daily&range=3M";
-    const res = await axios.get(url);
-    let originalData = res.data.data;
+      'https://stockanalysis.com/api/symbol/a/OTC-MINM/history?period=Daily&range=3M'
+    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",
+      new Date(item[0]).toLocaleDateString('en-US', {
+        month: 'short',
+        day: '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值
@@ -283,56 +287,56 @@ 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 = "";
-  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 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);
+  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) {
     // 转换为日期格式："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",
+        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) + "%" : "",
+        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,
-      };
-    });
-    state.tableData = resultData;
+      }
+    })
+    state.tableData = resultData
   }
-};
+}
 </script>
 
 <style scoped lang="scss">