From 42b2313857cc389646ff0ee8e99ff9599b6f1123 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: Fri, 30 May 2025 15:33:35 +0800
Subject: [PATCH] add secfilings

---
 src/assets/image/icon/icon-link.png           | Bin 0 -> 1104 bytes
 src/dict/secTestData.js                       |  15 +
 src/locales/en.js                             |   4 +-
 src/router/index.js                           |   6 +
 .../annualreports/index.vue                   |   8 +-
 .../secfilings/size1440/index.vue             |  15 -
 .../secfilings/size1920/index.vue             | 586 +++++++++++-------
 .../secfilings/size375/index.vue              |  15 -
 .../secfilings/size768/index.vue              |  15 -
 .../secfilingsdetail/index.vue                |  34 +
 .../secfilingsdetail/size1440/index.vue       | 287 +++++++++
 .../secfilingsdetail/size1920/index.vue       | 202 ++++++
 .../secfilingsdetail/size375/index.vue        | 286 +++++++++
 .../secfilingsdetail/size768/index.vue        | 287 +++++++++
 14 files changed, 1471 insertions(+), 289 deletions(-)
 create mode 100644 src/assets/image/icon/icon-link.png
 create mode 100644 src/dict/secTestData.js
 create mode 100644 src/views/financialinformation/secfilingsdetail/index.vue
 create mode 100644 src/views/financialinformation/secfilingsdetail/size1440/index.vue
 create mode 100644 src/views/financialinformation/secfilingsdetail/size1920/index.vue
 create mode 100644 src/views/financialinformation/secfilingsdetail/size375/index.vue
 create mode 100644 src/views/financialinformation/secfilingsdetail/size768/index.vue

diff --git a/src/assets/image/icon/icon-link.png b/src/assets/image/icon/icon-link.png
new file mode 100644
index 0000000000000000000000000000000000000000..33637c0fd33b090a48a8f0e12a83e1a080b47e26
GIT binary patch
literal 1104
zcmex=<NpH&0WUXCHwH#V1_nkTWcYuZ!5PS-41f%w%mkqB{|6WZIT)lEq?j3%7?=bZ
znFSgD9|7_in3zGXMF37l4lX8kpq!Eb0~1&hNI;}nSee-vnb<iPI28qjMFW9qM1dwF
zw1QZyY(QaUL6ETwj4VvdP+1mMMkZ!95e9Z4Q9)rvL&yKO7<hmxm;{*x8SEMEx8JM1
zS~Zuw^YiWSkeA;KR+V@~?UcR|H~;T!7mZsdWdsg0e8|*vH?Y~+9=9<g;9RkqDi=q9
zU!b7te%s_#7k0E;ZTng`KS6B0>ynjIk2YS6^44RQ_WjZ(!6s6xs_~3{y1@gT7#U-U
zgN@28I!5Phs&X1^^?wRYzdFaVUc3L;yZ-tY++ODM!j{Ipi}p2lTod?4{$1{^Uspq1
zJT6?`X%uuhBV_fh_`B*`TZ9kYoVTxS&267+d-C~SuQRCbVvJgHbkm192FFVec^rOQ
zapymSu-j4&O*WS0O1JXo#CtJu{4z|G&^sObTJTnRM#Y7W&o?@oYeP0$I;bR^SS92z
z)6LQGYJlW14$ieF;ub5}yS#{IZj0D#94(|^eS4km&!$CR?3Ow%`>MxzwdVc#>N%4#
zpW7Y1RJd$v-tsxJE0~VuRB7{A9qHwm!x46d`*hacr)k@ZXEty%@M#{YY2^EuzU!}5
zKHKN>Yos;X&&O~b*u5ma>Pc|%+T6L9KA4<IV_Saq^_9-=X1xw8*W}u28hdMXO<tzC
zSm{ER2j5Irt9}3eCEqE%lOd(PU3bwd;k}ZF1t#y-Ul=|kLNeyU#x}P;OG)D#`FD3`
z?bV!naGUe%1zuZ?T@@PNHv2v8zvmu3S)08_?PBJ-3*Bc;emk|?j+^Kz*5au=VWyz~
zUsm+x*gq#VF4i608y>o{^z^lPd26a}pTEoBcw2H#XX)LF3eI0IzRcO8f60XNYw59t
zC-(#z$cTG8O?kTejGY8ylk<fQPiGlD2*~_X|5N=7n`QpY+K9(9FYP&d^c!pL_Ep7d
z3)23+cvV`^@MKMhAxCk}Riiz}miq7|<@8OHl$29{GyUehHL+qP!XH1%oUeL6l{>-V
zXk=vNr-!*W8=cFXz8yRu^wIQfRY;kUs==w0E-{rm0i6?7796{;UbR1e;@77SvSn{`
zZqeW5W*>Cu!PWPc3k&M@Jnru`+4ibLujKY4(<A2kDsS4&Wg=u}3a;C6JtljdVQ=X%
u)9Vs{lO>MX_asaFXP9yPwY>lF;}`ALDM5g}px_@Dm-;}#e=b%3Zvp`6&YA!K

literal 0
HcmV?d00001

diff --git a/src/dict/secTestData.js b/src/dict/secTestData.js
new file mode 100644
index 0000000..90440b5
--- /dev/null
+++ b/src/dict/secTestData.js
@@ -0,0 +1,15 @@
+export const fileList = [
+    {
+        filingDate: '2016-05-29',
+        form: '10-K',
+        description: 'Report of foreign issuer rules 13a-16 and 15d-16 of the Securities Exchange Act',
+        link: 'https://www.sec.gov/Archives/edgar/data/1000000/0001000000-19-000001.txt',
+        dataFiles:[
+            {
+                description: 'Report of foreign',
+                link: 'https://www.sec.gov/Archives/edgar/data/1000000/0001000000-19-000001.txt',
+            }
+        ]
+    },
+   
+]
\ No newline at end of file
diff --git a/src/locales/en.js b/src/locales/en.js
index eaad512..bb5efec 100644
--- a/src/locales/en.js
+++ b/src/locales/en.js
@@ -498,8 +498,8 @@ export default {
       },
       sec: {
         title: "SEC Filings",
-        desc: "To Access All Of Our Fillings With Sec Sites, Please",
-        click_here: "Click Here",
+        desc: "To access all of our filings with the SEC, please",
+        click_here: "click here",
       },
     },
     quarterlyresults: {
diff --git a/src/router/index.js b/src/router/index.js
index edc7a96..ed5a8fc 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -59,6 +59,12 @@ const routes = [
         component: () =>
           import("@/views/financialinformation/secfilings/index.vue"),
       },
+      {
+        path: "/secfilingsDefail",
+        name: "SecFilingsDetail",
+        component: () =>
+          import("@/views/financialinformation/secfilingsdetail/index.vue"),
+      },
       {
         path: "/annualreports",
         name: "AnnualReports",
diff --git a/src/views/financialinformation/annualreports/index.vue b/src/views/financialinformation/annualreports/index.vue
index 3e9194f..9dd6335 100644
--- a/src/views/financialinformation/annualreports/index.vue
+++ b/src/views/financialinformation/annualreports/index.vue
@@ -2,10 +2,10 @@
 import { computed } from "vue";
 import { useWindowSize } from "@vueuse/core";
 
-import size375 from "@/views/financialinformation/secfilings/size375/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 size375 from "@/views/financialinformation/annualreports/size375/index.vue";
+import size768 from "@/views/financialinformation/annualreports/size768/index.vue";
+import size1440 from "@/views/financialinformation/annualreports/size1440/index.vue";
+import size1920 from "@/views/financialinformation/annualreports/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
index 6176b1a..2144535 100644
--- a/src/views/financialinformation/secfilings/size1440/index.vue
+++ b/src/views/financialinformation/secfilings/size1440/index.vue
@@ -55,21 +55,6 @@
           </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>
diff --git a/src/views/financialinformation/secfilings/size1920/index.vue b/src/views/financialinformation/secfilings/size1920/index.vue
index 6176b1a..27268e7 100644
--- a/src/views/financialinformation/secfilings/size1920/index.vue
+++ b/src/views/financialinformation/secfilings/size1920/index.vue
@@ -1,183 +1,306 @@
 <template>
   <div class="page-container">
-    <div class="financials-container">
+    <div class="sec-filings-container">
       <!-- 标题 -->
-      <div class="financials-title">
-        {{ t("financialinformation.secfilings.title") }}
+      <div class="page-title">SEC Filings</div>
+
+      <!-- 筛选器 -->
+      <div class="filters">
+        <div class="filter-group">
+          <label class="filter-label">Filing year</label>
+          <n-select
+            v-model:value="state.selectedYear"
+            :options="state.yearOptions"
+            placeholder="- Any -"
+            style="width: 150px"
+            clearable
+            @update:value="handleYearChange"
+          />
+        </div>
+
+        <div class="filter-group">
+          <label class="filter-label">Items per page:</label>
+          <n-select
+            v-model:value="state.pageSize"
+            :options="state.pageSizeOptions"
+            style="width: 150px"
+            @update:value="handlePageSizeChange"
+          />
+        </div>
       </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>
+      <!-- 表格 -->
+      <div class="table-container">
+        <n-data-table
+          :columns="columns"
+          :data="paginatedData"
+          :pagination="false"
+          :bordered="false"
+          :size="'medium'"
+          :row-key="(row) => row.filingDate"
+        />
 
-      <!-- 年度报告 -->
-      <section class="section">
-        <div class="section-title">
-          {{ t("financialinformation.secfilings.annual_reports.title") }}
-        </div>
+        <!-- 分页器 -->
+        <div class="pagination-container">
+          <n-pagination
+            v-model:page="state.currentPage"
+            v-model:page-size="state.pageSize"
+            show-size-picker
+            show-quick-jumper
+            :item-count="filteredData.length"
+            :page-sizes="[10, 25, 50]"
+            @update:page="handlePageChange"
+            @update:page-size="handlePageSizeChange"
+          >
+            <template #prev>
+              <span>‹ Previous</span>
+            </template>
+            <template #next>
+              <span>Next ›</span>
+            </template>
+          </n-pagination>
 
-        <!-- 报告表格 -->
-        <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 class="pagination-info">
+            Displaying {{ startIndex }} - {{ endIndex }} of
+            {{ filteredData.length }} results
           </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>
   </div>
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { reactive, computed, h, onMounted } from "vue";
+import { NSelect, NDataTable, NPagination, NButton, NIcon } from "naive-ui";
 import { useI18n } from "vue-i18n";
-
+import { useRouter } from "vue-router";
+import { fileList } from "@/dict/secTestData.js";
 const { t } = useI18n();
-// 年度报告数据
-const annualReports = ref([
+const router = useRouter();
+import iconLink from "@/assets/image/icon/icon-link.png";
+// 使用 reactive 管理所有状态
+const state = reactive({
+  selectedYear: null,
+  pageSize: 10,
+  currentPage: 1,
+
+  // 年份选项
+  yearOptions: [
+    { label: "- Any -", value: null },
+    { label: "2025", value: 2025 },
+    { label: "2024", value: 2024 },
+    { label: "2023", value: 2023 },
+    { label: "2022", value: 2022 },
+    { label: "2021", value: 2021 },
+    { label: "2020", value: 2020 },
+    { label: "2019", value: 2019 },
+    { label: "2018", value: 2018 },
+  ],
+
+  // 每页条数选项
+  pageSizeOptions: [
+    { label: "10", value: 10 },
+    { label: "25", value: 25 },
+    { label: "50", value: 50 },
+  ],
+
+  // SEC文件数据
+  secFilingsData: [],
+});
+onMounted(() => {
+  // 月份名称映射
+  const monthNames = [
+    "Jan",
+    "Feb",
+    "Mar",
+    "Apr",
+    "May",
+    "Jun",
+    "Jul",
+    "Aug",
+    "Sep",
+    "Oct",
+    "Nov",
+    "Dec",
+  ];
+
+  state.secFilingsData = fileList.map((item) => {
+    // 从 filingDate 中提取年份，支持两种格式：
+    // 1. "Feb 04, 2019" 格式（英文）
+    // 2. "2025-10-24" 格式（ISO格式）转换为英文格式
+    let year = null;
+    let formattedDate = item.filingDate;
+
+    if (item.filingDate) {
+      if (item.filingDate.includes(", ")) {
+        // "Feb 04, 2019" 格式，已经是英文格式，保持不变
+        year = parseInt(item.filingDate.split(", ")[1]);
+      } else if (item.filingDate.includes("-")) {
+        // "2025-10-24" 格式，转换为 "Oct 24, 2025" 英文格式
+        const dateParts = item.filingDate.split("-");
+        const yearPart = parseInt(dateParts[0]);
+        const monthPart = parseInt(dateParts[1]);
+        const dayPart = parseInt(dateParts[2]);
+
+        year = yearPart;
+        const monthName = monthNames[monthPart - 1]; // 月份从1开始，数组从0开始
+        const dayFormatted = dayPart.toString().padStart(2, "0");
+        formattedDate = `${monthName} ${dayFormatted}, ${yearPart}`;
+      }
+    }
+
+    return {
+      ...item,
+      formattedDate: formattedDate, // 更新为统一的英文格式
+      year: year,
+    };
+  });
+});
+// 表格列定义
+const columns = [
   {
-    fileName: "2024 Annual Report",
-    date: "April 10, 2025",
-    downloadUrl:
-      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912625002538/fieeinc_10k.htm",
+    title: "Filing Date",
+    key: "formattedDate",
+    sorter: true,
+    width: 150,
   },
   {
-    fileName: "2023 Annual Report",
-    date: "April 12, 2024",
-    downloadUrl:
-      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912624002449/miniminc_10k.htm",
+    title: "Form",
+    key: "form",
+    width: 120,
+    render: (row) => {
+      return h(
+        "a",
+        {
+          href: "javascript:void(0)",
+          style: {
+            color: "#0078d7",
+            textDecoration: "none",
+            cursor: "pointer",
+          },
+          onClick: (e) => {
+            e.preventDefault();
+            router.push({
+              path: "/secfilingsDefail",
+              query: {
+                filingDate: row.filingDate,
+              },
+            });
+          },
+          onMouseover: (e) => {
+            e.target.style.textDecoration = "underline";
+          },
+          onMouseout: (e) => {
+            e.target.style.textDecoration = "none";
+          },
+        },
+        row.form
+      );
+    },
   },
   {
-    fileName: "2022 Annual Report",
-    date: "March 31, 2023",
-    downloadUrl:
-      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000149315223010335/form10-k.htm",
+    title: "Description",
+    key: "description",
+    ellipsis: {
+      tooltip: true,
+    },
   },
   {
-    fileName: "2021 Annual Report",
-    date: "March 31, 2022",
-    downloadUrl:
-      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000149315222008365/form10-k.htm",
+    title: "View",
+    key: "view",
+    width: 150,
+    render: (row) => {
+      return h(
+        "div",
+        {
+          style: {
+            display: "flex",
+            gap: "8px",
+          },
+        },
+        [
+          h(
+            "a",
+            {
+              href: row.link,
+              style: {
+                color: "#0078d7",
+                textDecoration: "none",
+                fontSize: "12px",
+              },
+              onMouseover: (e) => {
+                e.target.style.textDecoration = "underline";
+              },
+              onMouseout: (e) => {
+                e.target.style.textDecoration = "none";
+              },
+            },
+            h("img", {
+              src: iconLink,
+              alt: "link",
+              style: {
+                width: "24px",
+                height: "24px",
+              },
+            })
+          ),
+        ]
+      );
+    },
   },
-  {
-    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",
-  },
-]);
+];
+
+// 筛选后的数据
+const filteredData = computed(() => {
+  let data = state.secFilingsData;
+
+  if (state.selectedYear) {
+    data = data.filter((item) => item.year === state.selectedYear);
+  }
+
+  return data;
+});
+
+// 分页数据
+const paginatedData = computed(() => {
+  const start = (state.currentPage - 1) * state.pageSize;
+  const end = start + state.pageSize;
+  return filteredData.value.slice(start, end);
+});
+
+// 总页数
+const totalPages = computed(() => {
+  return Math.ceil(filteredData.value.length / state.pageSize);
+});
+
+// 当前页起始索引
+const startIndex = computed(() => {
+  return (state.currentPage - 1) * state.pageSize + 1;
+});
+
+// 当前页结束索引
+const endIndex = computed(() => {
+  const end = state.currentPage * state.pageSize;
+  return Math.min(end, filteredData.value.length);
+});
+
+// 处理年份变化
+const handleYearChange = (value) => {
+  state.selectedYear = value;
+  state.currentPage = 1;
+};
+
+// 处理页码变化
+const handlePageChange = (page) => {
+  state.currentPage = page;
+};
+
+// 处理每页条数变化
+const handlePageSizeChange = (size) => {
+  state.pageSize = size;
+  state.currentPage = 1;
+};
 </script>
 
 <style scoped lang="scss">
@@ -186,117 +309,104 @@ const annualReports = ref([
   background-size: 100% 100%;
   background-position: center;
   background-repeat: no-repeat;
-}
-.financials-container {
-  max-width: 1200px;
-  margin: 0 auto;
+  min-height: 100vh;
   padding: 20px;
 }
 
-.financials-title {
-  font-size: 40px;
-  text-align: center;
-  margin-bottom: 60px;
-  color: #333;
+.sec-filings-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  background: white;
+  padding: 40px;
 }
 
-.section {
-  margin-bottom: 60px;
+.page-title {
+  font-size: 32px;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 40px;
 }
 
-.section-title {
-  font-size: 18px;
-  margin-bottom: 20px;
-  color: #333;
-}
-
-.overview-text {
-  font-size: 16px;
-  line-height: 1.6;
-  color: #333;
+.filters {
+  display: flex;
+  gap: 40px;
   margin-bottom: 30px;
+  align-items: end;
 }
 
-.tabs {
+.filter-group {
   display: flex;
-  margin-bottom: 20px;
+  flex-direction: column;
+  gap: 8px;
 }
 
-.tab {
-  padding: 10px 20px;
-  font-weight: bold;
-  cursor: pointer;
-  border-bottom: 2px solid transparent;
+.filter-label {
+  font-size: 14px;
+  color: #333;
+  font-weight: 500;
+}
 
-  &.active {
-    border-bottom: 2px solid #333;
+.table-container {
+  .n-data-table {
+    --n-th-color: #f5f5f5;
+    --n-th-text-color: #333;
+    --n-td-color: #fff;
+    --n-border-color: #e0e0e0;
   }
 }
 
-.reports-table {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-.table-header {
+.pagination-container {
   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;
+  margin-top: 20px;
+  padding: 20px 0;
 }
-.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;
+.pagination-info {
+  font-size: 14px;
+  color: #666;
+}
+
+:deep(.n-data-table-th) {
+  background-color: #9e9e9e !important;
+  color: white !important;
+  font-weight: bold;
+  text-align: left;
+}
+
+:deep(.n-data-table-td) {
+  border-bottom: 1px solid #e0e0e0;
+}
+
+:deep(.n-data-table-tr:hover .n-data-table-td) {
+  background-color: #f9f9f9;
+}
+
+:deep(.n-select) {
+  .n-base-selection {
+    border: 1px solid #ccc;
+    border-radius: 4px;
   }
 }
 
-.pdf-icon {
-  width: 36px;
-  height: 36px;
-}
+:deep(.n-pagination) {
+  .n-pagination-item {
+    border: 1px solid #ccc;
 
-.download-link {
-  color: #0078d7;
-  text-decoration: none;
-
-  &:hover {
-    text-decoration: underline;
+    &.n-pagination-item--active {
+      background-color: #969696;
+      border-color: #969696;
+      color: white;
+    }
   }
-}
 
-.sec-text {
-  font-size: 16px;
-  line-height: 1.6;
-}
+  .n-pagination-quick-jumper {
+    font-size: 14px;
+  }
 
-.link {
-  color: #f00;
-  text-decoration: none;
-
-  &:hover {
-    text-decoration: underline;
+  .n-pagination-sizes {
+    font-size: 14px;
   }
 }
 </style>
diff --git a/src/views/financialinformation/secfilings/size375/index.vue b/src/views/financialinformation/secfilings/size375/index.vue
index b4c34b7..ac13099 100644
--- a/src/views/financialinformation/secfilings/size375/index.vue
+++ b/src/views/financialinformation/secfilings/size375/index.vue
@@ -55,21 +55,6 @@
           </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>
diff --git a/src/views/financialinformation/secfilings/size768/index.vue b/src/views/financialinformation/secfilings/size768/index.vue
index bea3df0..30ccb20 100644
--- a/src/views/financialinformation/secfilings/size768/index.vue
+++ b/src/views/financialinformation/secfilings/size768/index.vue
@@ -55,21 +55,6 @@
           </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>
diff --git a/src/views/financialinformation/secfilingsdetail/index.vue b/src/views/financialinformation/secfilingsdetail/index.vue
new file mode 100644
index 0000000..0613f70
--- /dev/null
+++ b/src/views/financialinformation/secfilingsdetail/index.vue
@@ -0,0 +1,34 @@
+<script setup>
+import { computed } from "vue";
+import { useWindowSize } from "@vueuse/core";
+
+import size375 from "@/views/financialinformation/secfilingsdetail/size375/index.vue";
+import size768 from "@/views/financialinformation/secfilingsdetail/size768/index.vue";
+import size1440 from "@/views/financialinformation/secfilingsdetail/size1440/index.vue";
+import size1920 from "@/views/financialinformation/secfilingsdetail/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/financialinformation/secfilingsdetail/size1440/index.vue b/src/views/financialinformation/secfilingsdetail/size1440/index.vue
new file mode 100644
index 0000000..2144535
--- /dev/null
+++ b/src/views/financialinformation/secfilingsdetail/size1440/index.vue
@@ -0,0 +1,287 @@
+<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>
+    </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/secfilingsdetail/size1920/index.vue b/src/views/financialinformation/secfilingsdetail/size1920/index.vue
new file mode 100644
index 0000000..06a15b4
--- /dev/null
+++ b/src/views/financialinformation/secfilingsdetail/size1920/index.vue
@@ -0,0 +1,202 @@
+<template>
+  <div class="page-container">
+    <div class="sec-filing-detail-container">
+      <!-- 标题 -->
+      <div class="page-title">SEC Filing Details</div>
+
+      <!-- Document Details 部分 -->
+      <div class="section">
+        <h2 class="section-title">Document Details</h2>
+        <div class="details-grid">
+          <div class="detail-item">
+            <span class="detail-label">Form:</span>
+            <a :href="filingData.htmlLink" class="detail-value link">{{
+              filingData.form
+            }}</a>
+          </div>
+          <div class="detail-item">
+            <span class="detail-label">Filing Date:</span>
+            <span class="detail-value">{{ filingData.filingDate }}</span>
+          </div>
+          <div class="detail-item">
+            <span class="detail-label">Form Description:</span>
+            <span class="detail-value">{{ filingData.formDescription }}</span>
+          </div>
+          <div class="detail-item">
+            <span class="detail-label">Company:</span>
+            <span class="detail-value">{{ filingData.company }}</span>
+          </div>
+          <div class="detail-item">
+            <span class="detail-label">Issuer:</span>
+            <span class="detail-value">{{ filingData.issuer }}</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Filing Formats 部分 -->
+      <div class="section">
+        <h2 class="section-title">Filing Formats</h2>
+        <div class="formats-list">
+          <div class="format-item">
+            <img :src="iconLink" alt="link" class="format-icon" />
+            <a :href="filingData.htmlLink" class="format-link" target="_blank"
+              >View HTML</a
+            >
+          </div>
+        </div>
+      </div>
+
+      <!-- XBRL 部分 -->
+      <div
+        v-if="
+          Array.isArray(filingData.dataFiles) && filingData.dataFiles.length > 0
+        "
+        class="section"
+      >
+        <h2 class="section-title">XBRL</h2>
+        <div class="formats-list">
+          <div
+            class="format-item"
+            v-for="(item, idx) in filingData.dataFiles"
+            :key="idx"
+          >
+            <img :src="iconLink" alt="link" class="format-icon" />
+            <a :href="item.fileUrl" class="format-link" target="_blank">{{
+              item.description
+            }}</a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import iconLink from "@/assets/image/icon/icon-link.png";
+import { fileList } from "@/dict/secTestData.js";
+import { useRoute } from "vue-router";
+
+// 这里可以根据路由参数或props获取具体的文件详情
+const filingData = ref({
+  form: "",
+  filingDate: "",
+  formDescription: "",
+  company: "",
+  issuer: "",
+  htmlLink: "#",
+});
+
+const route = useRoute();
+
+onMounted(() => {
+  const { filingDate } = route.query;
+  const file = fileList.find((item) => item.filingDate === filingDate);
+  if (file) {
+    filingData.value = {
+      form: file.form,
+      filingDate: file.filingDate,
+      formDescription: file.description,
+      company: file.company,
+      issuer: file.issuer,
+      htmlLink: file.link || "#",
+      dataFiles: file.dataFiles || [],
+    };
+  }
+  console.log(filingData.value);
+});
+</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;
+  min-height: 100vh;
+  padding: 20px;
+}
+
+.sec-filing-detail-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  background: white;
+  padding: 40px;
+}
+
+.page-title {
+  font-size: 32px;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 40px;
+}
+
+.section {
+  margin-bottom: 40px;
+}
+
+.section-title {
+  font-size: 24px;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 20px;
+}
+
+.details-grid {
+  display: grid;
+  gap: 15px;
+}
+
+.detail-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+}
+
+.detail-label {
+  font-weight: bold;
+  color: #333;
+  min-width: 150px;
+  flex-shrink: 0;
+}
+
+.detail-value {
+  color: #333;
+  line-height: 1.5;
+}
+
+.link {
+  color: #0078d7;
+  text-decoration: underline;
+  cursor: pointer;
+  &:hover {
+    text-decoration: none;
+  }
+}
+.formats-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.format-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.format-icon {
+  width: 24px;
+  height: 24px;
+}
+
+.format-link {
+  color: #0078d7;
+  text-decoration: underline;
+  font-size: 14px;
+
+  &:hover {
+    text-decoration: none;
+  }
+}
+</style>
diff --git a/src/views/financialinformation/secfilingsdetail/size375/index.vue b/src/views/financialinformation/secfilingsdetail/size375/index.vue
new file mode 100644
index 0000000..ac13099
--- /dev/null
+++ b/src/views/financialinformation/secfilingsdetail/size375/index.vue
@@ -0,0 +1,286 @@
+<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>
+    </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-375.png");
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+.financials-container {
+  margin: 0 auto;
+  padding: 80px;
+}
+
+.financials-title {
+  font-size: 113px;
+  font-weight: 600;
+  text-align: center;
+  margin-bottom: 60px;
+  color: #333;
+}
+
+.section {
+  margin-bottom: 60px;
+}
+
+.section-title {
+  font-size: 92px;
+  font-weight: 600;
+  margin-bottom: 20px;
+  color: #333;
+}
+
+.overview-text {
+  font-size: 72px;
+  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: 45px 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: 35%;
+  }
+  &.date {
+    width: 35%;
+  }
+  &.download {
+    margin-right: 100px;
+  }
+}
+
+.pdf-icon {
+  width: 36px;
+  height: 36px;
+}
+
+.download-link {
+  color: #0078d7;
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.sec-text {
+  font-size: 72px;
+  line-height: 1.6;
+}
+
+.link {
+  color: #f00;
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+</style>
diff --git a/src/views/financialinformation/secfilingsdetail/size768/index.vue b/src/views/financialinformation/secfilingsdetail/size768/index.vue
new file mode 100644
index 0000000..30ccb20
--- /dev/null
+++ b/src/views/financialinformation/secfilingsdetail/size768/index.vue
@@ -0,0 +1,287 @@
+<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>
+    </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>