From e052d59c2bf59cd1a78418c05d1eb97360f9b15a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=20=E5=85=83=E5=B1=B1?= <piercezzs@outlook.com>
Date: Mon, 26 May 2025 10:37:58 +0800
Subject: [PATCH] =?UTF-8?q?768=201440=20=E6=A0=B7=E5=BC=8F=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../quarterlyresults/index.vue                |   4 +-
 .../quarterlyresults/size1440/index.vue       | 423 ++++++++++++++
 .../quarterlyresults/size375/index.vue        |  57 +-
 .../quarterlyresults/size768/index.vue        | 514 ++++++++++++++++++
 .../financialinformation/secfilings/index.vue |   4 +-
 .../secfilings/size1440/index.vue             | 302 ++++++++++
 .../secfilings/size768/index.vue              | 302 ++++++++++
 src/views/historic-stock/index.vue            |   4 +-
 src/views/historic-stock/size1440/index.vue   | 440 ++++++++++++++-
 src/views/historic-stock/size1920/index.vue   |   2 +-
 src/views/historic-stock/size375/index.vue    |   4 +-
 src/views/historic-stock/size768/index.vue    | 438 ++++++++++++++-
 12 files changed, 2440 insertions(+), 54 deletions(-)
 create mode 100644 src/views/financialinformation/quarterlyresults/size1440/index.vue
 create mode 100644 src/views/financialinformation/quarterlyresults/size768/index.vue
 create mode 100644 src/views/financialinformation/secfilings/size1440/index.vue
 create mode 100644 src/views/financialinformation/secfilings/size768/index.vue

diff --git a/src/views/financialinformation/quarterlyresults/index.vue b/src/views/financialinformation/quarterlyresults/index.vue
index b58e41c..f1466ca 100644
--- a/src/views/financialinformation/quarterlyresults/index.vue
+++ b/src/views/financialinformation/quarterlyresults/index.vue
@@ -3,8 +3,8 @@ import { computed } from "vue";
 import { useWindowSize } from "@vueuse/core";
 
 import size375 from "@/views/financialinformation/quarterlyresults/size375/index.vue";
-import size768 from "@/views/financialinformation/quarterlyresults/size1920/index.vue";
-import size1440 from "@/views/financialinformation/quarterlyresults/size1920/index.vue";
+import size768 from "@/views/financialinformation/quarterlyresults/size768/index.vue";
+import size1440 from "@/views/financialinformation/quarterlyresults/size1440/index.vue";
 import size1920 from "@/views/financialinformation/quarterlyresults/size1920/index.vue";
 import { useRouter } from "vue-router";
 import { useI18n } from "vue-i18n";
diff --git a/src/views/financialinformation/quarterlyresults/size1440/index.vue b/src/views/financialinformation/quarterlyresults/size1440/index.vue
new file mode 100644
index 0000000..a49b74b
--- /dev/null
+++ b/src/views/financialinformation/quarterlyresults/size1440/index.vue
@@ -0,0 +1,423 @@
+<template>
+  <header></header>
+  <main class="p-[35px] max-w-[1200px] mx-auto">
+    <div class="title mb-[20px]">
+      {{ t("financialinformation.quarterlyresults.title") }}
+    </div>
+    <div class="search-container">
+      <input
+        type="text"
+        :placeholder="
+          t('financialinformation.quarterlyresults.search.placeholder')
+        "
+        v-model="searchQuery"
+        class="search-input"
+      />
+      <button class="search-button" @click="handleSearch">
+        {{ t("financialinformation.quarterlyresults.search.button") }}
+      </button>
+    </div>
+
+    <div class="results-list">
+      <div
+        v-for="(item, index) in filteredList"
+        :key="index"
+        class="result-item"
+      >
+        <div class="content">
+          <a :href="item.url" class="result-title subtitle">{{ item.title }}</a>
+          <p class="result-description content-text">{{ item.description }}</p>
+        </div>
+        <div class="pdf-icon">
+          <a :href="item.url" target="_blank">
+            <img src="@/assets/image/pdf.png" alt="PDF" />
+          </a>
+        </div>
+      </div>
+    </div>
+  </main>
+  <footer></footer>
+</template>
+<script setup>
+import { ref, watch, onMounted, computed, reactive } from "vue";
+import { useI18n } from "vue-i18n";
+import quarterlyPdf2024Q3 from "@/assets/file/quarterly/10Q 2024-Q3.pdf";
+import quarterlyPdf2024Q2 from "@/assets/file/quarterly/10Q 2024-Q2.pdf";
+import quarterlyPdf2024Q1 from "@/assets/file/quarterly/10Q 2024-Q1.pdf";
+import quarterlyPdf2023Q3 from "@/assets/file/quarterly/10Q 2023-Q3.pdf";
+import quarterlyPdf2023Q2 from "@/assets/file/quarterly/10Q 2023-Q2.pdf";
+import quarterlyPdf2023Q1 from "@/assets/file/quarterly/10Q 2023-Q1.pdf";
+import quarterlyPdf2022Q3 from "@/assets/file/quarterly/10Q 2022-Q3.pdf";
+import quarterlyPdf2022Q2 from "@/assets/file/quarterly/10Q 2022-Q2.pdf";
+import quarterlyPdf2022Q1 from "@/assets/file/quarterly/10Q 2022-Q1.pdf";
+import quarterlyPdf2021Q3 from "@/assets/file/quarterly/10Q 2021-Q3.pdf";
+import quarterlyPdf2021Q2 from "@/assets/file/quarterly/10Q 2021-Q2.pdf";
+import quarterlyPdf2021Q1 from "@/assets/file/quarterly/10Q 2021-Q1.pdf";
+import quarterlyPdf2020Q3 from "@/assets/file/quarterly/10Q 2020-Q3.pdf";
+import quarterlyPdf2020Q2 from "@/assets/file/quarterly/10Q 2020-Q2.pdf";
+import quarterlyPdf2020Q1 from "@/assets/file/quarterly/10Q 2020-Q1.pdf";
+import quarterlyPdf2019Q3 from "@/assets/file/quarterly/10Q 2019-Q3.pdf";
+import quarterlyPdf2019Q2 from "@/assets/file/quarterly/10Q 2019-Q2.pdf";
+import quarterlyPdf2019Q1 from "@/assets/file/quarterly/10Q 2019-Q1.pdf";
+import quarterlyPdf2018Q3 from "@/assets/file/quarterly/10Q 2018-Q3.pdf";
+import quarterlyPdf2018Q2 from "@/assets/file/quarterly/10Q 2018-Q2.pdf";
+import quarterlyPdf2018Q1 from "@/assets/file/quarterly/10Q 2018-Q1.pdf";
+import quarterlyPdf2017Q3 from "@/assets/file/quarterly/10Q 2017-Q3.pdf";
+import quarterlyPdf2017Q2 from "@/assets/file/quarterly/10Q 2017-Q2.pdf";
+import quarterlyPdf2017Q1 from "@/assets/file/quarterly/10Q 2017-Q1.pdf";
+import quarterlyPdf2016Q3 from "@/assets/file/quarterly/10Q 2016-Q3.pdf";
+import quarterlyPdf2016Q2 from "@/assets/file/quarterly/10Q 2016-Q2.pdf";
+import quarterlyPdf2016Q1 from "@/assets/file/quarterly/10Q 2016-Q1.pdf";
+import quarterlyPdf2015Q3 from "@/assets/file/quarterly/10Q 2015-Q3.pdf";
+import quarterlyPdf2015Q2 from "@/assets/file/quarterly/10Q 2015-Q2.pdf";
+import quarterlyPdf2015Q1 from "@/assets/file/quarterly/10Q 2015-Q1.pdf";
+import quarterlyPdf2014Q3 from "@/assets/file/quarterly/10Q 2014-Q3.pdf";
+import quarterlyPdf2014Q2 from "@/assets/file/quarterly/10Q 2014-Q2.pdf";
+import quarterlyPdf2014Q1 from "@/assets/file/quarterly/10Q 2014-Q1.pdf";
+import quarterlyPdf2013Q3 from "@/assets/file/quarterly/10Q 2013-Q3.pdf";
+import quarterlyPdf2013Q2 from "@/assets/file/quarterly/10Q 2013-Q2.pdf";
+import quarterlyPdf2013Q1 from "@/assets/file/quarterly/10Q 2013-Q1.pdf";
+import quarterlyPdf2012Q3 from "@/assets/file/quarterly/10Q 2012-Q3.pdf";
+import quarterlyPdf2012Q2 from "@/assets/file/quarterly/10Q 2012-Q2.pdf";
+import quarterlyPdf2012Q1 from "@/assets/file/quarterly/10Q 2012-Q1.pdf";
+import quarterlyPdf2011Q3 from "@/assets/file/quarterly/10Q 2011-Q3.pdf";
+import quarterlyPdf2011Q2 from "@/assets/file/quarterly/10Q 2011-Q2.pdf";
+import quarterlyPdf2011Q1 from "@/assets/file/quarterly/10Q 2011-Q1.pdf";
+import quarterlyPdf2010Q3 from "@/assets/file/quarterly/10Q 2010-Q3.pdf";
+import quarterlyPdf2010Q2 from "@/assets/file/quarterly/10Q 2010-Q2.pdf";
+import quarterlyPdf2010Q1 from "@/assets/file/quarterly/10Q 2010-Q1.pdf";
+import quarterlyPdf2009Q3 from "@/assets/file/quarterly/10Q 2009-Q3.pdf";
+
+const { t } = useI18n();
+const searchQuery = ref("");
+
+const state = reactive({
+  list: [
+    {
+      title: "2024 Q3 Quarterly Results",
+      description: "Third Quarter 2024 Financial Results",
+      url: quarterlyPdf2024Q3,
+    },
+    {
+      title: "2024 Q2 Quarterly Results",
+      description: "Second Quarter 2024 Financial Results",
+      url: quarterlyPdf2024Q2,
+    },
+    {
+      title: "2024 Q1 Quarterly Results",
+      description: "First Quarter 2024 Financial Results",
+      url: quarterlyPdf2024Q1,
+    },
+    {
+      title: "2023 Q3 Quarterly Results",
+      description: "Third Quarter 2023 Financial Results",
+      url: quarterlyPdf2023Q3,
+    },
+    {
+      title: "2023 Q2 Quarterly Results",
+      description: "Second Quarter 2023 Financial Results",
+      url: quarterlyPdf2023Q2,
+    },
+    {
+      title: "2023 Q1 Quarterly Results",
+      description: "First Quarter 2023 Financial Results",
+      url: quarterlyPdf2023Q1,
+    },
+    {
+      title: "2022 Q3 Quarterly Results",
+      description: "Third Quarter 2022 Financial Results",
+      url: quarterlyPdf2022Q3,
+    },
+    {
+      title: "2022 Q2 Quarterly Results",
+      description: "Second Quarter 2022 Financial Results",
+      url: quarterlyPdf2022Q2,
+    },
+    {
+      title: "2022 Q1 Quarterly Results",
+      description: "First Quarter 2022 Financial Results",
+      url: quarterlyPdf2022Q1,
+    },
+    {
+      title: "2021 Q3 Quarterly Results",
+      description: "Third Quarter 2021 Financial Results",
+      url: quarterlyPdf2021Q3,
+    },
+    {
+      title: "2021 Q2 Quarterly Results",
+      description: "Second Quarter 2021 Financial Results",
+      url: quarterlyPdf2021Q2,
+    },
+    {
+      title: "2021 Q1 Quarterly Results",
+      description: "First Quarter 2021 Financial Results",
+      url: quarterlyPdf2021Q1,
+    },
+    {
+      title: "2020 Q3 Quarterly Results",
+      description: "Third Quarter 2020 Financial Results",
+      url: quarterlyPdf2020Q3,
+    },
+    {
+      title: "2020 Q2 Quarterly Results",
+      description: "Second Quarter 2020 Financial Results",
+      url: quarterlyPdf2020Q2,
+    },
+    {
+      title: "2020 Q1 Quarterly Results",
+      description: "First Quarter 2020 Financial Results",
+      url: quarterlyPdf2020Q1,
+    },
+    {
+      title: "2019 Q3 Quarterly Results",
+      description: "Third Quarter 2019 Financial Results",
+      url: quarterlyPdf2019Q3,
+    },
+    {
+      title: "2019 Q2 Quarterly Results",
+      description: "Second Quarter 2019 Financial Results",
+      url: quarterlyPdf2019Q2,
+    },
+    {
+      title: "2019 Q1 Quarterly Results",
+      description: "First Quarter 2019 Financial Results",
+      url: quarterlyPdf2019Q1,
+    },
+    {
+      title: "2018 Q3 Quarterly Results",
+      description: "Third Quarter 2018 Financial Results",
+      url: quarterlyPdf2018Q3,
+    },
+    {
+      title: "2018 Q2 Quarterly Results",
+      description: "Second Quarter 2018 Financial Results",
+      url: quarterlyPdf2018Q2,
+    },
+    {
+      title: "2018 Q1 Quarterly Results",
+      description: "First Quarter 2018 Financial Results",
+      url: quarterlyPdf2018Q1,
+    },
+    {
+      title: "2017 Q3 Quarterly Results",
+      description: "Third Quarter 2017 Financial Results",
+      url: quarterlyPdf2017Q3,
+    },
+    {
+      title: "2017 Q2 Quarterly Results",
+      description: "Second Quarter 2017 Financial Results",
+      url: quarterlyPdf2017Q2,
+    },
+    {
+      title: "2017 Q1 Quarterly Results",
+      description: "First Quarter 2017 Financial Results",
+      url: quarterlyPdf2017Q1,
+    },
+    {
+      title: "2016 Q3 Quarterly Results",
+      description: "Third Quarter 2016 Financial Results",
+      url: quarterlyPdf2016Q3,
+    },
+    {
+      title: "2016 Q2 Quarterly Results",
+      description: "Second Quarter 2016 Financial Results",
+      url: quarterlyPdf2016Q2,
+    },
+    {
+      title: "2016 Q1 Quarterly Results",
+      description: "First Quarter 2016 Financial Results",
+      url: quarterlyPdf2016Q1,
+    },
+    {
+      title: "2015 Q3 Quarterly Results",
+      description: "Third Quarter 2015 Financial Results",
+      url: quarterlyPdf2015Q3,
+    },
+    {
+      title: "2015 Q2 Quarterly Results",
+      description: "Second Quarter 2015 Financial Results",
+      url: quarterlyPdf2015Q2,
+    },
+    {
+      title: "2015 Q1 Quarterly Results",
+      description: "First Quarter 2015 Financial Results",
+      url: quarterlyPdf2015Q1,
+    },
+    {
+      title: "2014 Q3 Quarterly Results",
+      description: "Third Quarter 2014 Financial Results",
+      url: quarterlyPdf2014Q3,
+    },
+    {
+      title: "2014 Q2 Quarterly Results",
+      description: "Second Quarter 2014 Financial Results",
+      url: quarterlyPdf2014Q2,
+    },
+    {
+      title: "2014 Q1 Quarterly Results",
+      description: "First Quarter 2014 Financial Results",
+      url: quarterlyPdf2014Q1,
+    },
+    {
+      title: "2013 Q3 Quarterly Results",
+      description: "Third Quarter 2013 Financial Results",
+      url: quarterlyPdf2013Q3,
+    },
+    {
+      title: "2013 Q2 Quarterly Results",
+      description: "Second Quarter 2013 Financial Results",
+      url: quarterlyPdf2013Q2,
+    },
+    {
+      title: "2013 Q1 Quarterly Results",
+      description: "First Quarter 2013 Financial Results",
+      url: quarterlyPdf2013Q1,
+    },
+    {
+      title: "2012 Q3 Quarterly Results",
+      description: "Third Quarter 2012 Financial Results",
+      url: quarterlyPdf2012Q3,
+    },
+    {
+      title: "2012 Q2 Quarterly Results",
+      description: "Second Quarter 2012 Financial Results",
+      url: quarterlyPdf2012Q2,
+    },
+    {
+      title: "2012 Q1 Quarterly Results",
+      description: "First Quarter 2012 Financial Results",
+      url: quarterlyPdf2012Q1,
+    },
+    {
+      title: "2011 Q3 Quarterly Results",
+      description: "Third Quarter 2011 Financial Results",
+      url: quarterlyPdf2011Q3,
+    },
+    {
+      title: "2011 Q2 Quarterly Results",
+      description: "Second Quarter 2011 Financial Results",
+      url: quarterlyPdf2011Q2,
+    },
+    {
+      title: "2011 Q1 Quarterly Results",
+      description: "First Quarter 2011 Financial Results",
+      url: quarterlyPdf2011Q1,
+    },
+    {
+      title: "2010 Q3 Quarterly Results",
+      description: "Third Quarter 2010 Financial Results",
+      url: quarterlyPdf2010Q3,
+    },
+    {
+      title: "2010 Q2 Quarterly Results",
+      description: "Second Quarter 2010 Financial Results",
+      url: quarterlyPdf2010Q2,
+    },
+    {
+      title: "2010 Q1 Quarterly Results",
+      description: "First Quarter 2010 Financial Results",
+      url: quarterlyPdf2010Q1,
+    },
+    {
+      title: "2009 Q3 Quarterly Results",
+      description: "Third Quarter 2009 Financial Results",
+      url: quarterlyPdf2009Q3,
+    },
+  ],
+});
+
+onMounted(async () => {});
+const filteredList = computed(() => {
+  if (!searchQuery.value) return state.list;
+  const query = searchQuery.value.toLowerCase();
+  return state.list.filter(
+    (item) =>
+      item.title.toLowerCase().includes(query) ||
+      item.description.toLowerCase().includes(query)
+  );
+});
+
+const handleSearch = () => {
+  // 搜索处理逻辑
+  console.log("搜索:", searchQuery.value);
+};
+</script>
+<style scoped lang="scss">
+.title {
+  font-size: 40px;
+  color: #333;
+}
+.subtitle {
+  font-size: 18px;
+  font-weight: 600;
+  color: #333;
+}
+.content-text {
+  font-size: 16px;
+}
+.search-container {
+  margin-bottom: 20px;
+  display: flex;
+  align-items: center;
+}
+
+.search-input {
+  padding: 8px 12px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  width: 360px;
+  margin-right: 10px;
+}
+
+.search-button {
+  padding: 8px 16px;
+  background-color: #f0f0f0;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.results-list {
+  padding-right: 20px;
+  margin-top: 20px;
+  max-height: 1200px;
+  overflow-y: auto;
+}
+
+.result-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding: 15px 0;
+  border-bottom: 1px solid #eee;
+}
+
+.content {
+  flex: 1;
+}
+
+.result-title {
+  color: #0078d7;
+  text-decoration: none;
+  display: block;
+  margin-bottom: 5px;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.result-description {
+  color: #666;
+  margin: 0;
+}
+
+.pdf-icon {
+  margin-left: 15px;
+
+  img {
+    width: 24px;
+    height: 24px;
+  }
+}
+</style>
diff --git a/src/views/financialinformation/quarterlyresults/size375/index.vue b/src/views/financialinformation/quarterlyresults/size375/index.vue
index 5767073..49cf46e 100644
--- a/src/views/financialinformation/quarterlyresults/size375/index.vue
+++ b/src/views/financialinformation/quarterlyresults/size375/index.vue
@@ -1,26 +1,21 @@
 <template>
   <header></header>
-  <main class="p-[80px] mx-auto" style="max-width: 100vw; min-width: 375px">
+  <main class="p-[80px] mx-auto" style="max-width: 100vw; min-width: 350px">
     <div class="page-title mb-[24px]">
       {{ t("financialinformation.quarterlyresults.title") }}
     </div>
     <div class="search-container">
-      <n-input
-        v-model:value="searchQuery"
+      <input
+        type="text"
+        v-model="searchQuery"
+        class="search-input"
         :placeholder="
           t('financialinformation.quarterlyresults.search.placeholder')
         "
-        clearable
-        :font-size="72"
       />
-      <n-button
-        type="primary"
-        @click="handleSearch"
-        :font-size="72"
-        class="ml-[10px]"
-      >
+      <button @click="handleSearch" class="search-button">
         {{ t("financialinformation.quarterlyresults.search.button") }}
-      </n-button>
+      </button>
     </div>
 
     <div class="results-list">
@@ -412,12 +407,40 @@ const handleDownload = (url) => {
 }
 
 .search-container {
-  margin-bottom: 24px;
   display: flex;
-  align-items: center;
-  background-color: #f6f7f9;
-  border-radius: 8px;
-  padding: 8px;
+  flex-direction: column;
+  gap: 10px;
+  margin-bottom: 20px;
+}
+
+.search-input {
+  width: 100%;
+  padding: 10px 15px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  outline: none;
+  transition: border-color 0.3s;
+}
+
+.search-input:focus {
+  border-color: #2979ff;
+  box-shadow: 0 0 0 2px rgba(41, 121, 255, 0.2);
+}
+
+.search-button {
+  width: 100%;
+  padding: 10px 0;
+  background: #2979ff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.3s;
+}
+
+.search-button:hover {
+  background: #1e6de8;
 }
 
 .results-list {
diff --git a/src/views/financialinformation/quarterlyresults/size768/index.vue b/src/views/financialinformation/quarterlyresults/size768/index.vue
new file mode 100644
index 0000000..2007242
--- /dev/null
+++ b/src/views/financialinformation/quarterlyresults/size768/index.vue
@@ -0,0 +1,514 @@
+<template>
+  <header></header>
+  <main class="p-[80px] mx-auto" style="max-width: 100vw; min-width: 350px">
+    <div class="page-title mb-[24px]">
+      {{ t("financialinformation.quarterlyresults.title") }}
+    </div>
+    <div class="search-container">
+      <input
+        type="text"
+        v-model="searchQuery"
+        class="search-input"
+        :placeholder="
+          t('financialinformation.quarterlyresults.search.placeholder')
+        "
+      />
+      <button @click="handleSearch" class="search-button">
+        {{ t("financialinformation.quarterlyresults.search.button") }}
+      </button>
+    </div>
+
+    <div class="results-list">
+      <div
+        v-for="(item, index) in filteredList"
+        :key="index"
+        class="result-item flex items-center mt-[20px] mb-[20px]"
+      >
+        <img
+          src="@/assets/image/pdf.png"
+          alt="PDF"
+          style="width: 20px; height: 20px"
+        />
+        <div class="content">
+          <div class="result-title">{{ item.title }}</div>
+        </div>
+
+        <img
+          src="@/assets/image/download.svg"
+          style="width: 20px; height: 20px"
+          @click="handleDownload(item.url)"
+        />
+      </div>
+    </div>
+  </main>
+  <footer></footer>
+</template>
+<script setup>
+import { ref, watch, onMounted, computed, reactive } from "vue";
+import { useI18n } from "vue-i18n";
+import quarterlyPdf2024Q3 from "@/assets/file/quarterly/10Q 2024-Q3.pdf";
+import quarterlyPdf2024Q2 from "@/assets/file/quarterly/10Q 2024-Q2.pdf";
+import quarterlyPdf2024Q1 from "@/assets/file/quarterly/10Q 2024-Q1.pdf";
+import quarterlyPdf2023Q3 from "@/assets/file/quarterly/10Q 2023-Q3.pdf";
+import quarterlyPdf2023Q2 from "@/assets/file/quarterly/10Q 2023-Q2.pdf";
+import quarterlyPdf2023Q1 from "@/assets/file/quarterly/10Q 2023-Q1.pdf";
+import quarterlyPdf2022Q3 from "@/assets/file/quarterly/10Q 2022-Q3.pdf";
+import quarterlyPdf2022Q2 from "@/assets/file/quarterly/10Q 2022-Q2.pdf";
+import quarterlyPdf2022Q1 from "@/assets/file/quarterly/10Q 2022-Q1.pdf";
+import quarterlyPdf2021Q3 from "@/assets/file/quarterly/10Q 2021-Q3.pdf";
+import quarterlyPdf2021Q2 from "@/assets/file/quarterly/10Q 2021-Q2.pdf";
+import quarterlyPdf2021Q1 from "@/assets/file/quarterly/10Q 2021-Q1.pdf";
+import quarterlyPdf2020Q3 from "@/assets/file/quarterly/10Q 2020-Q3.pdf";
+import quarterlyPdf2020Q2 from "@/assets/file/quarterly/10Q 2020-Q2.pdf";
+import quarterlyPdf2020Q1 from "@/assets/file/quarterly/10Q 2020-Q1.pdf";
+import quarterlyPdf2019Q3 from "@/assets/file/quarterly/10Q 2019-Q3.pdf";
+import quarterlyPdf2019Q2 from "@/assets/file/quarterly/10Q 2019-Q2.pdf";
+import quarterlyPdf2019Q1 from "@/assets/file/quarterly/10Q 2019-Q1.pdf";
+import quarterlyPdf2018Q3 from "@/assets/file/quarterly/10Q 2018-Q3.pdf";
+import quarterlyPdf2018Q2 from "@/assets/file/quarterly/10Q 2018-Q2.pdf";
+import quarterlyPdf2018Q1 from "@/assets/file/quarterly/10Q 2018-Q1.pdf";
+import quarterlyPdf2017Q3 from "@/assets/file/quarterly/10Q 2017-Q3.pdf";
+import quarterlyPdf2017Q2 from "@/assets/file/quarterly/10Q 2017-Q2.pdf";
+import quarterlyPdf2017Q1 from "@/assets/file/quarterly/10Q 2017-Q1.pdf";
+import quarterlyPdf2016Q3 from "@/assets/file/quarterly/10Q 2016-Q3.pdf";
+import quarterlyPdf2016Q2 from "@/assets/file/quarterly/10Q 2016-Q2.pdf";
+import quarterlyPdf2016Q1 from "@/assets/file/quarterly/10Q 2016-Q1.pdf";
+import quarterlyPdf2015Q3 from "@/assets/file/quarterly/10Q 2015-Q3.pdf";
+import quarterlyPdf2015Q2 from "@/assets/file/quarterly/10Q 2015-Q2.pdf";
+import quarterlyPdf2015Q1 from "@/assets/file/quarterly/10Q 2015-Q1.pdf";
+import quarterlyPdf2014Q3 from "@/assets/file/quarterly/10Q 2014-Q3.pdf";
+import quarterlyPdf2014Q2 from "@/assets/file/quarterly/10Q 2014-Q2.pdf";
+import quarterlyPdf2014Q1 from "@/assets/file/quarterly/10Q 2014-Q1.pdf";
+import quarterlyPdf2013Q3 from "@/assets/file/quarterly/10Q 2013-Q3.pdf";
+import quarterlyPdf2013Q2 from "@/assets/file/quarterly/10Q 2013-Q2.pdf";
+import quarterlyPdf2013Q1 from "@/assets/file/quarterly/10Q 2013-Q1.pdf";
+import quarterlyPdf2012Q3 from "@/assets/file/quarterly/10Q 2012-Q3.pdf";
+import quarterlyPdf2012Q2 from "@/assets/file/quarterly/10Q 2012-Q2.pdf";
+import quarterlyPdf2012Q1 from "@/assets/file/quarterly/10Q 2012-Q1.pdf";
+import quarterlyPdf2011Q3 from "@/assets/file/quarterly/10Q 2011-Q3.pdf";
+import quarterlyPdf2011Q2 from "@/assets/file/quarterly/10Q 2011-Q2.pdf";
+import quarterlyPdf2011Q1 from "@/assets/file/quarterly/10Q 2011-Q1.pdf";
+import quarterlyPdf2010Q3 from "@/assets/file/quarterly/10Q 2010-Q3.pdf";
+import quarterlyPdf2010Q2 from "@/assets/file/quarterly/10Q 2010-Q2.pdf";
+import quarterlyPdf2010Q1 from "@/assets/file/quarterly/10Q 2010-Q1.pdf";
+import quarterlyPdf2009Q3 from "@/assets/file/quarterly/10Q 2009-Q3.pdf";
+
+const { t } = useI18n();
+const searchQuery = ref("");
+
+const state = reactive({
+  list: [
+    {
+      title: "2024 Q3 Quarterly Results",
+      description: "Third Quarter 2024 Financial Results",
+      url: quarterlyPdf2024Q3,
+    },
+    {
+      title: "2024 Q2 Quarterly Results",
+      description: "Second Quarter 2024 Financial Results",
+      url: quarterlyPdf2024Q2,
+    },
+    {
+      title: "2024 Q1 Quarterly Results",
+      description: "First Quarter 2024 Financial Results",
+      url: quarterlyPdf2024Q1,
+    },
+    {
+      title: "2023 Q3 Quarterly Results",
+      description: "Third Quarter 2023 Financial Results",
+      url: quarterlyPdf2023Q3,
+    },
+    {
+      title: "2023 Q2 Quarterly Results",
+      description: "Second Quarter 2023 Financial Results",
+      url: quarterlyPdf2023Q2,
+    },
+    {
+      title: "2023 Q1 Quarterly Results",
+      description: "First Quarter 2023 Financial Results",
+      url: quarterlyPdf2023Q1,
+    },
+    {
+      title: "2022 Q3 Quarterly Results",
+      description: "Third Quarter 2022 Financial Results",
+      url: quarterlyPdf2022Q3,
+    },
+    {
+      title: "2022 Q2 Quarterly Results",
+      description: "Second Quarter 2022 Financial Results",
+      url: quarterlyPdf2022Q2,
+    },
+    {
+      title: "2022 Q1 Quarterly Results",
+      description: "First Quarter 2022 Financial Results",
+      url: quarterlyPdf2022Q1,
+    },
+    {
+      title: "2021 Q3 Quarterly Results",
+      description: "Third Quarter 2021 Financial Results",
+      url: quarterlyPdf2021Q3,
+    },
+    {
+      title: "2021 Q2 Quarterly Results",
+      description: "Second Quarter 2021 Financial Results",
+      url: quarterlyPdf2021Q2,
+    },
+    {
+      title: "2021 Q1 Quarterly Results",
+      description: "First Quarter 2021 Financial Results",
+      url: quarterlyPdf2021Q1,
+    },
+    {
+      title: "2020 Q3 Quarterly Results",
+      description: "Third Quarter 2020 Financial Results",
+      url: quarterlyPdf2020Q3,
+    },
+    {
+      title: "2020 Q2 Quarterly Results",
+      description: "Second Quarter 2020 Financial Results",
+      url: quarterlyPdf2020Q2,
+    },
+    {
+      title: "2020 Q1 Quarterly Results",
+      description: "First Quarter 2020 Financial Results",
+      url: quarterlyPdf2020Q1,
+    },
+    {
+      title: "2019 Q3 Quarterly Results",
+      description: "Third Quarter 2019 Financial Results",
+      url: quarterlyPdf2019Q3,
+    },
+    {
+      title: "2019 Q2 Quarterly Results",
+      description: "Second Quarter 2019 Financial Results",
+      url: quarterlyPdf2019Q2,
+    },
+    {
+      title: "2019 Q1 Quarterly Results",
+      description: "First Quarter 2019 Financial Results",
+      url: quarterlyPdf2019Q1,
+    },
+    {
+      title: "2018 Q3 Quarterly Results",
+      description: "Third Quarter 2018 Financial Results",
+      url: quarterlyPdf2018Q3,
+    },
+    {
+      title: "2018 Q2 Quarterly Results",
+      description: "Second Quarter 2018 Financial Results",
+      url: quarterlyPdf2018Q2,
+    },
+    {
+      title: "2018 Q1 Quarterly Results",
+      description: "First Quarter 2018 Financial Results",
+      url: quarterlyPdf2018Q1,
+    },
+    {
+      title: "2017 Q3 Quarterly Results",
+      description: "Third Quarter 2017 Financial Results",
+      url: quarterlyPdf2017Q3,
+    },
+    {
+      title: "2017 Q2 Quarterly Results",
+      description: "Second Quarter 2017 Financial Results",
+      url: quarterlyPdf2017Q2,
+    },
+    {
+      title: "2017 Q1 Quarterly Results",
+      description: "First Quarter 2017 Financial Results",
+      url: quarterlyPdf2017Q1,
+    },
+    {
+      title: "2016 Q3 Quarterly Results",
+      description: "Third Quarter 2016 Financial Results",
+      url: quarterlyPdf2016Q3,
+    },
+    {
+      title: "2016 Q2 Quarterly Results",
+      description: "Second Quarter 2016 Financial Results",
+      url: quarterlyPdf2016Q2,
+    },
+    {
+      title: "2016 Q1 Quarterly Results",
+      description: "First Quarter 2016 Financial Results",
+      url: quarterlyPdf2016Q1,
+    },
+    {
+      title: "2015 Q3 Quarterly Results",
+      description: "Third Quarter 2015 Financial Results",
+      url: quarterlyPdf2015Q3,
+    },
+    {
+      title: "2015 Q2 Quarterly Results",
+      description: "Second Quarter 2015 Financial Results",
+      url: quarterlyPdf2015Q2,
+    },
+    {
+      title: "2015 Q1 Quarterly Results",
+      description: "First Quarter 2015 Financial Results",
+      url: quarterlyPdf2015Q1,
+    },
+    {
+      title: "2014 Q3 Quarterly Results",
+      description: "Third Quarter 2014 Financial Results",
+      url: quarterlyPdf2014Q3,
+    },
+    {
+      title: "2014 Q2 Quarterly Results",
+      description: "Second Quarter 2014 Financial Results",
+      url: quarterlyPdf2014Q2,
+    },
+    {
+      title: "2014 Q1 Quarterly Results",
+      description: "First Quarter 2014 Financial Results",
+      url: quarterlyPdf2014Q1,
+    },
+    {
+      title: "2013 Q3 Quarterly Results",
+      description: "Third Quarter 2013 Financial Results",
+      url: quarterlyPdf2013Q3,
+    },
+    {
+      title: "2013 Q2 Quarterly Results",
+      description: "Second Quarter 2013 Financial Results",
+      url: quarterlyPdf2013Q2,
+    },
+    {
+      title: "2013 Q1 Quarterly Results",
+      description: "First Quarter 2013 Financial Results",
+      url: quarterlyPdf2013Q1,
+    },
+    {
+      title: "2012 Q3 Quarterly Results",
+      description: "Third Quarter 2012 Financial Results",
+      url: quarterlyPdf2012Q3,
+    },
+    {
+      title: "2012 Q2 Quarterly Results",
+      description: "Second Quarter 2012 Financial Results",
+      url: quarterlyPdf2012Q2,
+    },
+    {
+      title: "2012 Q1 Quarterly Results",
+      description: "First Quarter 2012 Financial Results",
+      url: quarterlyPdf2012Q1,
+    },
+    {
+      title: "2011 Q3 Quarterly Results",
+      description: "Third Quarter 2011 Financial Results",
+      url: quarterlyPdf2011Q3,
+    },
+    {
+      title: "2011 Q2 Quarterly Results",
+      description: "Second Quarter 2011 Financial Results",
+      url: quarterlyPdf2011Q2,
+    },
+    {
+      title: "2011 Q1 Quarterly Results",
+      description: "First Quarter 2011 Financial Results",
+      url: quarterlyPdf2011Q1,
+    },
+    {
+      title: "2010 Q3 Quarterly Results",
+      description: "Third Quarter 2010 Financial Results",
+      url: quarterlyPdf2010Q3,
+    },
+    {
+      title: "2010 Q2 Quarterly Results",
+      description: "Second Quarter 2010 Financial Results",
+      url: quarterlyPdf2010Q2,
+    },
+    {
+      title: "2010 Q1 Quarterly Results",
+      description: "First Quarter 2010 Financial Results",
+      url: quarterlyPdf2010Q1,
+    },
+    {
+      title: "2009 Q3 Quarterly Results",
+      description: "Third Quarter 2009 Financial Results",
+      url: quarterlyPdf2009Q3,
+    },
+  ],
+});
+const filteredList = computed(() => {
+  if (!searchQuery.value) return state.list;
+  const query = searchQuery.value.toLowerCase();
+  return state.list.filter(
+    (item) =>
+      item.title.toLowerCase().includes(query) ||
+      item.description.toLowerCase().includes(query)
+  );
+});
+
+const handleSearch = () => {
+  // 搜索处理逻辑
+  console.log("搜索:", searchQuery.value);
+};
+
+const handleDownload = (url) => {
+  // 下载处理逻辑
+  console.log("下载:", url);
+
+  // 创建一个隐藏的a元素
+  const link = document.createElement("a");
+  link.href = url;
+
+  // 修复文件名提取逻辑
+  let fileName = url.split("/").pop();
+  // 移除可能存在的查询参数
+  if (fileName.includes("?") || fileName.includes("_t=")) {
+    fileName = fileName.split(/[?_]/)[0];
+  }
+  link.download = fileName;
+  link.target = "_blank";
+
+  // 对于移动设备，我们需要特殊处理
+  const isMobile =
+    /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+      navigator.userAgent
+    );
+
+  if (isMobile) {
+    // 在移动设备上，可能需要使用fetch下载文件并创建blob
+    fetch(url)
+      .then((response) => response.blob())
+      .then((blob) => {
+        const objectUrl = URL.createObjectURL(blob);
+        link.href = objectUrl;
+        document.body.appendChild(link);
+        link.click();
+
+        // 清理
+        setTimeout(() => {
+          document.body.removeChild(link);
+          URL.revokeObjectURL(objectUrl);
+        }, 100);
+      })
+      .catch((error) => {
+        console.error("下载文件时出错:", error);
+        // 如果fetch失败，回退到window.open
+        window.open(url, "_blank");
+      });
+  } else {
+    // 桌面设备上直接点击链接
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  }
+};
+</script>
+<style scoped lang="scss">
+.page-title {
+  font-size: 85px;
+  font-weight: bold;
+  color: #333;
+  text-align: center;
+  margin-top: 8px;
+}
+
+.search-container {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-bottom: 20px;
+}
+
+.search-input {
+  width: 100%;
+  padding: 10px 15px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  outline: none;
+  transition: border-color 0.3s;
+}
+
+.search-input:focus {
+  border-color: #2979ff;
+  box-shadow: 0 0 0 2px rgba(41, 121, 255, 0.2);
+}
+
+.search-button {
+  width: 100%;
+  padding: 10px 0;
+  background: #2979ff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.3s;
+}
+
+.search-button:hover {
+  background: #1e6de8;
+}
+
+.results-list {
+  margin-top: 46px;
+  max-height: 3000px;
+  overflow-y: auto;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
+  background-color: #fff;
+}
+
+.result-item {
+  display: flex;
+  justify-content: space-between;
+  padding: 46px;
+  border-bottom: 1px solid #f0f0f0;
+  transition: background-color 0.2s;
+
+  &:hover {
+    background-color: #f9fafc;
+  }
+
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.result-title {
+  color: #2979ff;
+  text-decoration: none;
+  display: block;
+  margin-bottom: 8px;
+  font-size: 50px;
+  font-weight: 600;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.result-description {
+  color: #666;
+  margin: 0;
+  font-size: 40px;
+  line-height: 1.4;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+}
+
+.pdf-icon {
+  margin-left: 16px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  .pdf-link {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-decoration: none;
+    color: #ff5252;
+    font-size: 40px;
+
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+}
+</style>
diff --git a/src/views/financialinformation/secfilings/index.vue b/src/views/financialinformation/secfilings/index.vue
index 5713bdc..3e9194f 100644
--- a/src/views/financialinformation/secfilings/index.vue
+++ b/src/views/financialinformation/secfilings/index.vue
@@ -3,8 +3,8 @@ import { computed } from "vue";
 import { useWindowSize } from "@vueuse/core";
 
 import size375 from "@/views/financialinformation/secfilings/size375/index.vue";
-import size768 from "@/views/financialinformation/secfilings/size1920/index.vue";
-import size1440 from "@/views/financialinformation/secfilings/size1920/index.vue";
+import size768 from "@/views/financialinformation/secfilings/size768/index.vue";
+import size1440 from "@/views/financialinformation/secfilings/size1440/index.vue";
 import size1920 from "@/views/financialinformation/secfilings/size1920/index.vue";
 import { useRouter } from "vue-router";
 import { useI18n } from "vue-i18n";
diff --git a/src/views/financialinformation/secfilings/size1440/index.vue b/src/views/financialinformation/secfilings/size1440/index.vue
new file mode 100644
index 0000000..6176b1a
--- /dev/null
+++ b/src/views/financialinformation/secfilings/size1440/index.vue
@@ -0,0 +1,302 @@
+<template>
+  <div class="page-container">
+    <div class="financials-container">
+      <!-- 标题 -->
+      <div class="financials-title">
+        {{ t("financialinformation.secfilings.title") }}
+      </div>
+
+      <!-- 公司财务概览 -->
+      <section class="section">
+        <div class="section-title">
+          {{ t("financialinformation.secfilings.overview.title") }}
+        </div>
+        <p
+          class="overview-text"
+          v-html="t('financialinformation.secfilings.overview.desc')"
+        ></p>
+      </section>
+
+      <!-- 年度报告 -->
+      <section class="section">
+        <div class="section-title">
+          {{ t("financialinformation.secfilings.annual_reports.title") }}
+        </div>
+
+        <!-- 报告表格 -->
+        <div class="reports-table">
+          <div class="table-header">
+            <div class="column file-name">
+              {{
+                t("financialinformation.secfilings.annual_reports.file_name")
+              }}
+            </div>
+            <div class="column date">
+              {{ t("financialinformation.secfilings.annual_reports.date") }}
+            </div>
+            <div class="column download"></div>
+          </div>
+
+          <!-- 报告列表 -->
+          <div class="reports-list">
+            <div
+              class="table-row"
+              v-for="(report, index) in annualReports"
+              :key="index"
+            >
+              <div class="column file-name">{{ report.fileName }}</div>
+              <div class="column date">{{ report.date }}</div>
+              <div class="column download">
+                <a :href="report.downloadUrl" class="download-link">{{
+                  t("financialinformation.secfilings.annual_reports.view")
+                }}</a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- SEC文件 -->
+      <section class="section">
+        <div class="section-title">
+          {{ t("financialinformation.secfilings.sec.title") }}
+        </div>
+        <p class="sec-text">
+          {{ t("financialinformation.secfilings.sec.desc") }}
+          <a
+            href="https://www.sec.gov/cgi-bin/browse-edgar?company=FiEE&match=starts-with&filenum=&State=&Country=&SIC=&myowner=exclude&action=getcompany"
+            class="link"
+            >{{ t("financialinformation.secfilings.sec.click_here") }}</a
+          >.
+        </p>
+      </section>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
+// 年度报告数据
+const annualReports = ref([
+  {
+    fileName: "2024 Annual Report",
+    date: "April 10, 2025",
+    downloadUrl:
+      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912625002538/fieeinc_10k.htm",
+  },
+  {
+    fileName: "2023 Annual Report",
+    date: "April 12, 2024",
+    downloadUrl:
+      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912624002449/miniminc_10k.htm",
+  },
+  {
+    fileName: "2022 Annual Report",
+    date: "March 31, 2023",
+    downloadUrl:
+      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000149315223010335/form10-k.htm",
+  },
+  {
+    fileName: "2021 Annual Report",
+    date: "March 31, 2022",
+    downloadUrl:
+      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000149315222008365/form10-k.htm",
+  },
+  {
+    fileName: "2020 Annual Report",
+    date: "April 13, 2021",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000165495421004133/zmtp_10k.htm",
+  },
+  {
+    fileName: "2019 Annual Report",
+    date: "April 15, 2020",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000165495420004069/zmtp_10k.htm",
+  },
+  {
+    fileName: "2018 Annual Report",
+    date: "April 1, 2019",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000165495419003878/zmtp_10k.htm",
+  },
+  {
+    fileName: "2017 Annual Report",
+    date: "March 30, 2018",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000165495418003402/zmtp_10k.htm",
+  },
+  {
+    fileName: "2016 Annual Report",
+    date: "March 22, 2017",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000165495417002279/zmtp_10k.htm",
+  },
+  {
+    fileName: "2015 Annual Report",
+    date: "March 15, 2016",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000135448816006596/zmtp_10k.htm",
+  },
+  {
+    fileName: "2014 Annual Report",
+    date: "March 24, 2015",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000135448815001308/zmtp_10k.htm",
+  },
+  {
+    fileName: "2013 Annual Report",
+    date: "March 31, 2014",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000135448814001518/zmpt_10k.htm",
+  },
+  {
+    fileName: "2012 Annual Report",
+    date: "March 29, 2013",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000135448813001584/zmtp_10k.htm",
+  },
+  {
+    fileName: "2011 Annual Report",
+    date: "March 30, 2012",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000135448812001548/zoom_10k.htm",
+  },
+  {
+    fileName: "2010 Annual Report",
+    date: "March 29, 2011",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000135448811000969/zmtp_10k.htm",
+  },
+  {
+    fileName: "2009 Annual Report",
+    date: "March 31, 2010",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000135448810001043/zmtp_10k.htm",
+  },
+]);
+</script>
+
+<style scoped lang="scss">
+.page-container {
+  background-image: url("@/assets/image/bg.png");
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+.financials-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.financials-title {
+  font-size: 40px;
+  text-align: center;
+  margin-bottom: 60px;
+  color: #333;
+}
+
+.section {
+  margin-bottom: 60px;
+}
+
+.section-title {
+  font-size: 18px;
+  margin-bottom: 20px;
+  color: #333;
+}
+
+.overview-text {
+  font-size: 16px;
+  line-height: 1.6;
+  color: #333;
+  margin-bottom: 30px;
+}
+
+.tabs {
+  display: flex;
+  margin-bottom: 20px;
+}
+
+.tab {
+  padding: 10px 20px;
+  font-weight: bold;
+  cursor: pointer;
+  border-bottom: 2px solid transparent;
+
+  &.active {
+    border-bottom: 2px solid #333;
+  }
+}
+
+.reports-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.table-header {
+  display: flex;
+  padding: 10px 0;
+  border-bottom: 1px solid #ccc;
+  font-weight: bold;
+  justify-content: space-between;
+}
+
+.table-row {
+  display: flex;
+  padding: 15px 0;
+  border-bottom: 1px solid #eee;
+  align-items: center;
+  justify-content: space-between;
+}
+.reports-list {
+  // max-height: 600px;
+  // overflow-y: auto;
+}
+.column {
+  &.file-name {
+    width: 25%;
+  }
+  &.date {
+    width: 25%;
+  }
+
+  &.download {
+    width: 25%;
+    text-align: right;
+    margin-right: 50px;
+  }
+}
+
+.pdf-icon {
+  width: 36px;
+  height: 36px;
+}
+
+.download-link {
+  color: #0078d7;
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.sec-text {
+  font-size: 16px;
+  line-height: 1.6;
+}
+
+.link {
+  color: #f00;
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+</style>
diff --git a/src/views/financialinformation/secfilings/size768/index.vue b/src/views/financialinformation/secfilings/size768/index.vue
new file mode 100644
index 0000000..bea3df0
--- /dev/null
+++ b/src/views/financialinformation/secfilings/size768/index.vue
@@ -0,0 +1,302 @@
+<template>
+  <div class="page-container">
+    <div class="financials-container">
+      <!-- 标题 -->
+      <div class="financials-title">
+        {{ t("financialinformation.secfilings.title") }}
+      </div>
+
+      <!-- 公司财务概览 -->
+      <section class="section">
+        <div class="section-title">
+          {{ t("financialinformation.secfilings.overview.title") }}
+        </div>
+        <p
+          class="overview-text"
+          v-html="t('financialinformation.secfilings.overview.desc')"
+        ></p>
+      </section>
+
+      <!-- 年度报告 -->
+      <section class="section">
+        <div class="section-title">
+          {{ t("financialinformation.secfilings.annual_reports.title") }}
+        </div>
+
+        <!-- 报告表格 -->
+        <div class="reports-table">
+          <div class="table-header">
+            <div class="column file-name">
+              {{
+                t("financialinformation.secfilings.annual_reports.file_name")
+              }}
+            </div>
+            <div class="column date">
+              {{ t("financialinformation.secfilings.annual_reports.date") }}
+            </div>
+            <div class="column download"></div>
+          </div>
+
+          <!-- 报告列表 -->
+          <div class="reports-list">
+            <div
+              class="table-row"
+              v-for="(report, index) in annualReports"
+              :key="index"
+            >
+              <div class="column file-name">{{ report.fileName }}</div>
+              <div class="column date">{{ report.date }}</div>
+              <div class="column download">
+                <a :href="report.downloadUrl" class="download-link">{{
+                  t("financialinformation.secfilings.annual_reports.view")
+                }}</a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- SEC文件 -->
+      <section class="section">
+        <div class="section-title">
+          {{ t("financialinformation.secfilings.sec.title") }}
+        </div>
+        <p class="sec-text">
+          {{ t("financialinformation.secfilings.sec.desc") }}
+          <a
+            href="https://www.sec.gov/cgi-bin/browse-edgar?company=FiEE&match=starts-with&filenum=&State=&Country=&SIC=&myowner=exclude&action=getcompany"
+            class="link"
+            >{{ t("financialinformation.secfilings.sec.click_here") }}</a
+          >.
+        </p>
+      </section>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
+// 年度报告数据
+const annualReports = ref([
+  {
+    fileName: "2024 Annual Report",
+    date: "April 10, 2025",
+    downloadUrl:
+      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912625002538/fieeinc_10k.htm",
+  },
+  {
+    fileName: "2023 Annual Report",
+    date: "April 12, 2024",
+    downloadUrl:
+      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912624002449/miniminc_10k.htm",
+  },
+  {
+    fileName: "2022 Annual Report",
+    date: "March 31, 2023",
+    downloadUrl:
+      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000149315223010335/form10-k.htm",
+  },
+  {
+    fileName: "2021 Annual Report",
+    date: "March 31, 2022",
+    downloadUrl:
+      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000149315222008365/form10-k.htm",
+  },
+  {
+    fileName: "2020 Annual Report",
+    date: "April 13, 2021",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000165495421004133/zmtp_10k.htm",
+  },
+  {
+    fileName: "2019 Annual Report",
+    date: "April 15, 2020",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000165495420004069/zmtp_10k.htm",
+  },
+  {
+    fileName: "2018 Annual Report",
+    date: "April 1, 2019",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000165495419003878/zmtp_10k.htm",
+  },
+  {
+    fileName: "2017 Annual Report",
+    date: "March 30, 2018",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000165495418003402/zmtp_10k.htm",
+  },
+  {
+    fileName: "2016 Annual Report",
+    date: "March 22, 2017",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000165495417002279/zmtp_10k.htm",
+  },
+  {
+    fileName: "2015 Annual Report",
+    date: "March 15, 2016",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000135448816006596/zmtp_10k.htm",
+  },
+  {
+    fileName: "2014 Annual Report",
+    date: "March 24, 2015",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000135448815001308/zmtp_10k.htm",
+  },
+  {
+    fileName: "2013 Annual Report",
+    date: "March 31, 2014",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000135448814001518/zmpt_10k.htm",
+  },
+  {
+    fileName: "2012 Annual Report",
+    date: "March 29, 2013",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000135448813001584/zmtp_10k.htm",
+  },
+  {
+    fileName: "2011 Annual Report",
+    date: "March 30, 2012",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000135448812001548/zoom_10k.htm",
+  },
+  {
+    fileName: "2010 Annual Report",
+    date: "March 29, 2011",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000135448811000969/zmtp_10k.htm",
+  },
+  {
+    fileName: "2009 Annual Report",
+    date: "March 31, 2010",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000135448810001043/zmtp_10k.htm",
+  },
+]);
+</script>
+
+<style scoped lang="scss">
+.page-container {
+  background-image: url("@/assets/image/bg.png");
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+.financials-container {
+  max-width: calc(100% - 300px);
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.financials-title {
+  font-size: 85px;
+  text-align: center;
+  margin-bottom: 60px;
+  color: #333;
+}
+
+.section {
+  margin-bottom: 60px;
+}
+
+.section-title {
+  font-size: 50px;
+  margin-bottom: 20px;
+  color: #333;
+}
+
+.overview-text {
+  font-size: 40px;
+  line-height: 1.6;
+  color: #333;
+  margin-bottom: 30px;
+}
+
+.tabs {
+  display: flex;
+  margin-bottom: 20px;
+}
+
+.tab {
+  padding: 10px 20px;
+  font-weight: bold;
+  cursor: pointer;
+  border-bottom: 2px solid transparent;
+
+  &.active {
+    border-bottom: 2px solid #333;
+  }
+}
+
+.reports-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.table-header {
+  display: flex;
+  padding: 10px 0;
+  border-bottom: 1px solid #ccc;
+  font-weight: bold;
+  justify-content: space-between;
+}
+
+.table-row {
+  display: flex;
+  padding: 15px 0;
+  border-bottom: 1px solid #eee;
+  align-items: center;
+  justify-content: space-between;
+}
+.reports-list {
+  // max-height: 600px;
+  // overflow-y: auto;
+}
+.column {
+  &.file-name {
+    width: 25%;
+  }
+  &.date {
+    width: 25%;
+  }
+
+  &.download {
+    width: 25%;
+    text-align: right;
+    margin-right: 50px;
+  }
+}
+
+.pdf-icon {
+  width: 36px;
+  height: 36px;
+}
+
+.download-link {
+  color: #0078d7;
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.sec-text {
+  font-size: 40px;
+  line-height: 1.6;
+}
+
+.link {
+  color: #f00;
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+</style>
diff --git a/src/views/historic-stock/index.vue b/src/views/historic-stock/index.vue
index 9cc908b..cfc4094 100644
--- a/src/views/historic-stock/index.vue
+++ b/src/views/historic-stock/index.vue
@@ -3,8 +3,8 @@ import { computed } from "vue";
 import { useWindowSize } from "@vueuse/core";
 
 import size375 from "./size375/index.vue";
-import size768 from "./size1920/index.vue";
-import size1440 from "./size1920/index.vue";
+import size768 from "./size768/index.vue";
+import size1440 from "./size1440/index.vue";
 import size1920 from "./size1920/index.vue";
 import { useRouter } from "vue-router";
 import { useI18n } from "vue-i18n";
diff --git a/src/views/historic-stock/size1440/index.vue b/src/views/historic-stock/size1440/index.vue
index 427f3d2..30a6200 100644
--- a/src/views/historic-stock/size1440/index.vue
+++ b/src/views/historic-stock/size1440/index.vue
@@ -1,22 +1,434 @@
-<script setup>
-import { NCarousel, NDivider, NMarquee, NPopselect } from "naive-ui";
-import { onUnmounted, ref, watch, onMounted, computed } from "vue";
-
-</script>
-
 <template>
-  <header className="header">
-  1440
-  </header>
-  <main ref="main">
+  <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"
+    />
 
-  </main>
-  <footer>
+    <div class="header mt-[20px]">
+      <div class="title">Historical Data</div>
+      <div class="filter-container">
+        <n-dropdown
+          trigger="click"
+          :options="periodOptions"
+          @select="handlePeriodChange"
+          :value="state.selectedPeriod"
+        >
+          <n-button>
+            {{ state.selectedPeriod }}
+            <n-icon><chevron-down-outline /></n-icon>
+          </n-button>
+        </n-dropdown>
 
-  </footer>
+        <n-dropdown
+          trigger="click"
+          :options="durationOptions"
+          @select="handleDurationChange"
+          :value="state.selectedDuration"
+        >
+          <n-button>
+            {{ state.selectedDuration }}
+            <n-icon><chevron-down-outline /></n-icon>
+          </n-button>
+        </n-dropdown>
+      </div>
+    </div>
+
+    <n-data-table
+      :columns="columns"
+      :data="paginatedData"
+      :bordered="false"
+      :single-line="false"
+      :scroll-x="1200"
+    />
+
+    <div class="pagination-container">
+      <n-button class="page-btn prev-btn" @click="handlePrevPage">
+        <n-icon><chevron-back-outline /></n-icon>
+        Previous
+      </n-button>
+
+      <div class="page-info">
+        Page {{ state.currentPage }} of {{ totalPages }}
+      </div>
+
+      <div class="right-controls">
+        <n-dropdown
+          trigger="click"
+          :options="pageSizeOptions"
+          @select="handlePageSizeChange"
+        >
+          <n-button class="rows-dropdown">
+            {{ state.pageSize }} Rows
+            <n-icon><chevron-down-outline /></n-icon>
+          </n-button>
+        </n-dropdown>
+
+        <n-button class="page-btn next-btn" @click="handleNextPage">
+          Next
+          <n-icon><chevron-forward-outline /></n-icon>
+        </n-button>
+      </div>
+    </div>
+
+    <div class="back-to-top-link">
+      <a href="#" @click.prevent="scrollToTop">
+        Back to Top
+        <n-icon><arrow-up-outline /></n-icon>
+      </a>
+    </div>
+  </div>
 </template>
 
+<script setup>
+import { NDataTable, NButton, NDropdown, NIcon } from "naive-ui";
+import { 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);
+
+// 数据筛选选项
+const periodOptions = [
+  { label: "Daily", key: "Daily" },
+  { label: "Weekly", key: "Weekly" },
+  { label: "Monthly", key: "Monthly" },
+  { label: "Quarterly", key: "Quarterly" },
+  { label: "Annual", key: "Annual" },
+];
+
+const durationOptions = [
+  { label: "3 Months", key: "3 Months" },
+  { label: "6 Months", key: "6 Months" },
+  { label: "Year to Date", key: "Year to Date" },
+  { label: "1 Year", key: "1 Year" },
+  { label: "5 Years", key: "5 Years" },
+  { label: "10 Years", key: "10 Years" },
+  { label: "Full History", key: "Full History", disabled: true },
+];
+
+// 分页大小选项
+const pageSizeOptions = [
+  { label: "50", key: 50 },
+  { label: "100", key: 100 },
+  { label: "500", key: 500 },
+  { label: "1000", key: 1000 },
+];
+
+const state = reactive({
+  selectedPeriod: "Daily",
+  selectedDuration: "3 Months",
+  tableData: [],
+  currentPage: 1,
+  pageSize: 50,
+});
+
+// 计算总页数
+const totalPages = computed(() => {
+  return Math.ceil(state.tableData.length / state.pageSize);
+});
+
+// 计算当前页的数据
+const paginatedData = computed(() => {
+  const start = (state.currentPage - 1) * state.pageSize;
+  const end = start + state.pageSize;
+  return state.tableData.slice(start, end);
+});
+
+// 表格列定义
+const columns = [
+  {
+    title: "Date",
+    key: "date",
+    align: "left",
+    fixed: "left",
+    width: 150,
+  },
+  {
+    title: "Open",
+    key: "open",
+    align: "center",
+  },
+  {
+    title: "High",
+    key: "high",
+    align: "center",
+  },
+  {
+    title: "Low",
+    key: "low",
+    align: "center",
+  },
+  {
+    title: "Close",
+    key: "close",
+    align: "center",
+  },
+  {
+    title: "Adj. Close",
+    key: "adjClose",
+    align: "center",
+  },
+  {
+    title: "Change",
+    key: "change",
+    align: "center",
+    render(row) {
+      const value = parseFloat(row.change);
+      const color = value < 0 ? "#ff4d4f" : value > 0 ? "#52c41a" : "";
+      return h("span", { style: { color } }, row.change);
+    },
+  },
+  {
+    title: "Volume",
+    key: "volume",
+    align: "center",
+  },
+];
+
+// 处理下拉选项变更
+const handlePeriodChange = (key) => {
+  state.selectedPeriod = key;
+  if (key === "Annual") {
+    handleDurationChange("Full History");
+    return;
+  }
+  if (key === "Monthly") {
+    handleDurationChange("10 Years");
+    return;
+  }
+  if (key === "Quarterly") {
+    handleDurationChange("10 Years");
+    return;
+  }
+  getPageData();
+};
+
+const handleDurationChange = (key) => {
+  state.selectedDuration = key;
+  getPageData();
+};
+
+// 处理分页
+const handlePrevPage = () => {
+  if (state.currentPage === 1) {
+    return;
+  }
+  state.currentPage--;
+};
+
+const handleNextPage = () => {
+  if (state.currentPage >= totalPages.value) {
+    return;
+  }
+  state.currentPage++;
+};
+
+const handlePageSizeChange = (size) => {
+  state.pageSize = size;
+  state.currentPage = 1; // 重置到第一页
+};
+
+// 回到顶部
+const scrollToTop = () => {
+  // 尝试多种方法
+  // 1. 使用document.body
+  document.body.scrollTop = 0;
+  // 2. 使用document.documentElement (HTML元素)
+  document.documentElement.scrollTop = 0;
+  // 3. 使用scrollIntoView
+  document.querySelector(".historic-data-container").scrollIntoView({
+    behavior: "smooth",
+    block: "start",
+  });
+};
+onMounted(() => {
+  getPageDefaultData();
+});
+
+const getPageDefaultData = async () => {
+  try {
+    let url =
+      "https://stockanalysis.com/api/symbol/a/OTC-MINM/history?type=chart";
+    const res = await axios.get(url);
+    let originalData = res.data.data;
+
+    // 转换为日期格式："Nov 26, 2024"
+    let calcApiData = originalData.map((item) => [
+      new Date(item[0]).toLocaleDateString("en-US", {
+        month: "short",
+        day: "numeric",
+        year: "numeric",
+      }),
+      item[1],
+    ]);
+    console.log("接口数据", calcApiData);
+
+    // 使用API数据更新defaultTableData中的close和adjClose值
+    const updatedTableData = defaultTableData.map((tableItem) => {
+      // 查找对应日期的API数据
+      const matchedApiData = calcApiData.find(
+        (apiItem) => apiItem[0] === tableItem.date
+      );
+
+      if (matchedApiData) {
+        // 更新close和adjClose值
+        return {
+          ...tableItem,
+          close: matchedApiData[1].toFixed(2),
+          adjClose: matchedApiData[1].toFixed(2),
+        };
+      }
+      return tableItem;
+    });
+
+    state.tableData = updatedTableData;
+  } catch (error) {
+    console.error("获取数据失败", error);
+  }
+};
+const getPageData = async () => {
+  let range = "";
+  if (state.selectedDuration === "3 Months") {
+    range = "3M";
+  } else if (state.selectedDuration === "6 Months") {
+    range = "6M";
+  } else if (state.selectedDuration === "Year to Date") {
+    range = "YTD";
+  } else if (state.selectedDuration === "1 Year") {
+    range = "1Y";
+  } else if (state.selectedDuration === "5 Years") {
+    range = "5Y";
+  } else if (state.selectedDuration === "10 Years") {
+    range = "10Y";
+  } else if (state.selectedDuration === "Full History") {
+    range = "Max";
+  }
+  let url = `https://stockanalysis.com/api/symbol/a/OTC-MINM/history?period=${state.selectedPeriod}&range=${range}`;
+  const res = await axios.get(url);
+  if (res.data.status === 200) {
+    // 转换为日期格式："Nov 26, 2024"
+    let resultData = res.data.data.map((item) => {
+      return {
+        date: new Date(item.t).toLocaleDateString("en-US", {
+          month: "short",
+          day: "numeric",
+          year: "numeric",
+        }),
+        open: item.o != null ? Number(item.o).toFixed(2) : "",
+        high: item.h != null ? Number(item.h).toFixed(2) : "",
+        low: item.l != null ? Number(item.l).toFixed(2) : "",
+        close: item.c != null ? Number(item.c).toFixed(2) : "",
+        adjClose: item.a != null ? Number(item.a).toFixed(2) : "",
+        change: item.ch != null ? Number(item.ch).toFixed(2) + "%" : "",
+        volume: item.v,
+      };
+    });
+    state.tableData = resultData;
+  }
+};
+</script>
+
 <style scoped lang="scss">
+.historic-data-container {
+  padding: 20px;
+  max-width: 1200px;
+  margin: 0 auto;
 
+  .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+
+    .title {
+      font-size: 40px;
+      font-weight: bold;
+      margin: 0;
+    }
+
+    .filter-container {
+      display: flex;
+      gap: 10px;
+    }
+  }
+
+  .pagination-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 20px;
+    padding: 10px 16px;
+    border-radius: 4px;
+    background-color: #ffffff;
+
+    .page-btn {
+      display: flex;
+      align-items: center;
+      gap: 5px;
+      padding: 6px 12px;
+      font-size: 20px;
+
+      &.prev-btn {
+        margin-right: auto;
+      }
+
+      &.next-btn {
+        margin-left: 10px;
+      }
+
+      &:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+    }
+
+    .page-info {
+      font-size: 16px;
+      color: #374151;
+      margin: 0 10px;
+    }
+
+    .right-controls {
+      display: flex;
+      align-items: center;
+
+      .rows-dropdown {
+        font-size: 16px;
+      }
+    }
+  }
+
+  .back-to-top-link {
+    display: flex;
+    justify-content: center;
+    margin-top: 16px;
+
+    a {
+      display: flex;
+      align-items: center;
+      gap: 5px;
+      color: #2563eb;
+      font-size: 20px;
+      font-weight: bold;
+      text-decoration: none;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  :deep(.n-data-table) {
+    .n-data-table-td {
+      padding: 12px 8px;
+    }
+  }
+}
 </style>
-
diff --git a/src/views/historic-stock/size1920/index.vue b/src/views/historic-stock/size1920/index.vue
index d6d3548..30a6200 100644
--- a/src/views/historic-stock/size1920/index.vue
+++ b/src/views/historic-stock/size1920/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="historic-data-container" style="margin-bottom: 100px">
+  <div class="historic-data-container" style="margin-bottom: 40px">
     <img
       src="@/assets/image/historic-stock.png"
       alt="1"
diff --git a/src/views/historic-stock/size375/index.vue b/src/views/historic-stock/size375/index.vue
index 4acdb12..724a03e 100644
--- a/src/views/historic-stock/size375/index.vue
+++ b/src/views/historic-stock/size375/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="historic-data-container" style="margin-bottom: 100px">
+  <div class="historic-data-container" style="margin-bottom: 40px">
     <img
       src="@/assets/image/historic-stock-375.png"
       alt="1"
@@ -345,7 +345,7 @@ const getPageData = async () => {
     margin-bottom: 20px;
 
     .title {
-      font-size: 113px;
+      font-size: 80px;
       font-weight: bold;
       margin: 0;
     }
diff --git a/src/views/historic-stock/size768/index.vue b/src/views/historic-stock/size768/index.vue
index e7c4364..7c420be 100644
--- a/src/views/historic-stock/size768/index.vue
+++ b/src/views/historic-stock/size768/index.vue
@@ -1,22 +1,432 @@
-<script setup>
-import { NCarousel, NDivider, NMarquee, NPopselect } from "naive-ui";
-import { onUnmounted, ref, watch, onMounted, computed } from "vue";
-
-</script>
-
 <template>
-  <header className="header">
-  768
-  </header>
-  <main ref="main">
+  <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"
+    />
 
-  </main>
-  <footer>
+    <div class="header mt-[20px]">
+      <div class="title">Historical Data</div>
+      <div class="filter-container">
+        <n-dropdown
+          trigger="click"
+          :options="periodOptions"
+          @select="handlePeriodChange"
+          :value="state.selectedPeriod"
+        >
+          <n-button>
+            {{ state.selectedPeriod }}
+            <n-icon><chevron-down-outline /></n-icon>
+          </n-button>
+        </n-dropdown>
 
-  </footer>
+        <n-dropdown
+          trigger="click"
+          :options="durationOptions"
+          @select="handleDurationChange"
+          :value="state.selectedDuration"
+        >
+          <n-button>
+            {{ state.selectedDuration }}
+            <n-icon><chevron-down-outline /></n-icon>
+          </n-button>
+        </n-dropdown>
+      </div>
+    </div>
+
+    <n-data-table
+      :columns="columns"
+      :data="paginatedData"
+      :bordered="false"
+      :single-line="false"
+      :scroll-x="1200"
+    />
+
+    <div class="pagination-container">
+      <n-button class="page-btn prev-btn" @click="handlePrevPage">
+        <n-icon><chevron-back-outline /></n-icon>
+        Previous
+      </n-button>
+
+      <div class="page-info">
+        Page {{ state.currentPage }} of {{ totalPages }}
+      </div>
+
+      <div class="right-controls">
+        <n-dropdown
+          trigger="click"
+          :options="pageSizeOptions"
+          @select="handlePageSizeChange"
+        >
+          <n-button class="rows-dropdown">
+            {{ state.pageSize }} Rows
+            <n-icon><chevron-down-outline /></n-icon>
+          </n-button>
+        </n-dropdown>
+
+        <n-button class="page-btn next-btn" @click="handleNextPage">
+          Next
+          <n-icon><chevron-forward-outline /></n-icon>
+        </n-button>
+      </div>
+    </div>
+
+    <div class="back-to-top-link">
+      <a href="#" @click.prevent="scrollToTop">
+        Back to Top
+        <n-icon><arrow-up-outline /></n-icon>
+      </a>
+    </div>
+  </div>
 </template>
 
+<script setup>
+import { NDataTable, NButton, NDropdown, NIcon } from "naive-ui";
+import { 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);
+
+// 数据筛选选项
+const periodOptions = [
+  { label: "Daily", key: "Daily" },
+  { label: "Weekly", key: "Weekly" },
+  { label: "Monthly", key: "Monthly" },
+  { label: "Quarterly", key: "Quarterly" },
+  { label: "Annual", key: "Annual" },
+];
+
+const durationOptions = [
+  { label: "3 Months", key: "3 Months" },
+  { label: "6 Months", key: "6 Months" },
+  { label: "Year to Date", key: "Year to Date" },
+  { label: "1 Year", key: "1 Year" },
+  { label: "5 Years", key: "5 Years" },
+  { label: "10 Years", key: "10 Years" },
+  { label: "Full History", key: "Full History", disabled: true },
+];
+
+// 分页大小选项
+const pageSizeOptions = [
+  { label: "50", key: 50 },
+  { label: "100", key: 100 },
+  { label: "500", key: 500 },
+  { label: "1000", key: 1000 },
+];
+
+const state = reactive({
+  selectedPeriod: "Daily",
+  selectedDuration: "3 Months",
+  tableData: [],
+  currentPage: 1,
+  pageSize: 50,
+});
+
+// 计算总页数
+const totalPages = computed(() => {
+  return Math.ceil(state.tableData.length / state.pageSize);
+});
+
+// 计算当前页的数据
+const paginatedData = computed(() => {
+  const start = (state.currentPage - 1) * state.pageSize;
+  const end = start + state.pageSize;
+  return state.tableData.slice(start, end);
+});
+
+// 表格列定义
+const columns = [
+  {
+    title: "Date",
+    key: "date",
+    align: "left",
+    fixed: "left",
+    width: 150,
+  },
+  {
+    title: "Open",
+    key: "open",
+    align: "center",
+  },
+  {
+    title: "High",
+    key: "high",
+    align: "center",
+  },
+  {
+    title: "Low",
+    key: "low",
+    align: "center",
+  },
+  {
+    title: "Close",
+    key: "close",
+    align: "center",
+  },
+  {
+    title: "Adj. Close",
+    key: "adjClose",
+    align: "center",
+  },
+  {
+    title: "Change",
+    key: "change",
+    align: "center",
+    render(row) {
+      const value = parseFloat(row.change);
+      const color = value < 0 ? "#ff4d4f" : value > 0 ? "#52c41a" : "";
+      return h("span", { style: { color } }, row.change);
+    },
+  },
+  {
+    title: "Volume",
+    key: "volume",
+    align: "center",
+  },
+];
+
+// 处理下拉选项变更
+const handlePeriodChange = (key) => {
+  state.selectedPeriod = key;
+  if (key === "Annual") {
+    handleDurationChange("Full History");
+    return;
+  }
+  if (key === "Monthly") {
+    handleDurationChange("10 Years");
+    return;
+  }
+  if (key === "Quarterly") {
+    handleDurationChange("10 Years");
+    return;
+  }
+  getPageData();
+};
+
+const handleDurationChange = (key) => {
+  state.selectedDuration = key;
+  getPageData();
+};
+
+// 处理分页
+const handlePrevPage = () => {
+  if (state.currentPage === 1) {
+    return;
+  }
+  state.currentPage--;
+};
+
+const handleNextPage = () => {
+  if (state.currentPage >= totalPages.value) {
+    return;
+  }
+  state.currentPage++;
+};
+
+const handlePageSizeChange = (size) => {
+  state.pageSize = size;
+  state.currentPage = 1; // 重置到第一页
+};
+
+// 回到顶部
+const scrollToTop = () => {
+  // 尝试多种方法
+  // 1. 使用document.body
+  document.body.scrollTop = 0;
+  // 2. 使用document.documentElement (HTML元素)
+  document.documentElement.scrollTop = 0;
+  // 3. 使用scrollIntoView
+  document.querySelector(".historic-data-container").scrollIntoView({
+    behavior: "smooth",
+    block: "start",
+  });
+};
+onMounted(() => {
+  getPageDefaultData();
+});
+
+const getPageDefaultData = async () => {
+  try {
+    let url =
+      "https://stockanalysis.com/api/symbol/a/OTC-MINM/history?type=chart";
+    const res = await axios.get(url);
+    let originalData = res.data.data;
+
+    // 转换为日期格式："Nov 26, 2024"
+    let calcApiData = originalData.map((item) => [
+      new Date(item[0]).toLocaleDateString("en-US", {
+        month: "short",
+        day: "numeric",
+        year: "numeric",
+      }),
+      item[1],
+    ]);
+    console.log("接口数据", calcApiData);
+
+    // 使用API数据更新defaultTableData中的close和adjClose值
+    const updatedTableData = defaultTableData.map((tableItem) => {
+      // 查找对应日期的API数据
+      const matchedApiData = calcApiData.find(
+        (apiItem) => apiItem[0] === tableItem.date
+      );
+
+      if (matchedApiData) {
+        // 更新close和adjClose值
+        return {
+          ...tableItem,
+          close: matchedApiData[1].toFixed(2),
+          adjClose: matchedApiData[1].toFixed(2),
+        };
+      }
+      return tableItem;
+    });
+
+    state.tableData = updatedTableData;
+  } catch (error) {
+    console.error("获取数据失败", error);
+  }
+};
+const getPageData = async () => {
+  let range = "";
+  if (state.selectedDuration === "3 Months") {
+    range = "3M";
+  } else if (state.selectedDuration === "6 Months") {
+    range = "6M";
+  } else if (state.selectedDuration === "Year to Date") {
+    range = "YTD";
+  } else if (state.selectedDuration === "1 Year") {
+    range = "1Y";
+  } else if (state.selectedDuration === "5 Years") {
+    range = "5Y";
+  } else if (state.selectedDuration === "10 Years") {
+    range = "10Y";
+  } else if (state.selectedDuration === "Full History") {
+    range = "Max";
+  }
+  let url = `https://stockanalysis.com/api/symbol/a/OTC-MINM/history?period=${state.selectedPeriod}&range=${range}`;
+  const res = await axios.get(url);
+  if (res.data.status === 200) {
+    // 转换为日期格式："Nov 26, 2024"
+    let resultData = res.data.data.map((item) => {
+      return {
+        date: new Date(item.t).toLocaleDateString("en-US", {
+          month: "short",
+          day: "numeric",
+          year: "numeric",
+        }),
+        open: item.o != null ? Number(item.o).toFixed(2) : "",
+        high: item.h != null ? Number(item.h).toFixed(2) : "",
+        low: item.l != null ? Number(item.l).toFixed(2) : "",
+        close: item.c != null ? Number(item.c).toFixed(2) : "",
+        adjClose: item.a != null ? Number(item.a).toFixed(2) : "",
+        change: item.ch != null ? Number(item.ch).toFixed(2) + "%" : "",
+        volume: item.v,
+      };
+    });
+    state.tableData = resultData;
+  }
+};
+</script>
+
 <style scoped lang="scss">
+.historic-data-container {
+  max-width: calc(100% - 300px);
+  margin: 0 auto;
+  .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
 
+    .title {
+      font-size: 85px;
+      font-weight: bold;
+      margin: 0;
+    }
+
+    .filter-container {
+      display: flex;
+      gap: 10px;
+    }
+  }
+
+  .pagination-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 20px;
+    padding: 10px 16px;
+    border-radius: 4px;
+    background-color: #ffffff;
+
+    .page-btn {
+      display: flex;
+      align-items: center;
+      gap: 5px;
+      padding: 6px 12px;
+      font-size: 50px;
+
+      &.prev-btn {
+        margin-right: auto;
+      }
+
+      &.next-btn {
+        margin-left: 10px;
+      }
+
+      &:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+    }
+
+    .page-info {
+      font-size: 40px;
+      color: #374151;
+      margin: 0 10px;
+    }
+
+    .right-controls {
+      display: flex;
+      align-items: center;
+
+      .rows-dropdown {
+        font-size: 40px;
+      }
+    }
+  }
+
+  .back-to-top-link {
+    display: flex;
+    justify-content: center;
+    margin-top: 16px;
+
+    a {
+      display: flex;
+      align-items: center;
+      gap: 5px;
+      color: #2563eb;
+      font-size: 50px;
+      font-weight: bold;
+      text-decoration: none;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  :deep(.n-data-table) {
+    .n-data-table-td {
+      padding: 12px 8px;
+    }
+  }
+}
 </style>
-