Merge branch 'main' of https://gitea-inner.fontree.cn/scout666/fiee-official-website

src/components/customEcharts/index.vue

@@ -0,0 +1,137 @@
+<template>
+  <div class="custom-echarts">
+    <div id="myEcharts" class="myChart"></div>
+  </div>
+</template>
+<script setup>
+import { onMounted } from 'vue'
+import * as echarts from 'echarts'
+
+//初始化eCharts
+const initEcharts = () => {
+  // 基于准备好的dom，初始化echarts实例
+  var myCharts = echarts.init(document.getElementById('myEcharts'))
+  // 绘制图表
+  myCharts.setOption({
+    title: {
+      text: 'FiEE, Inc. Stock Price History',
+    },
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'line',
+        snap: true,
+        label: {
+          backgroundColor: '#6a7985'
+        }
+      },
+      formatter: function (params) {
+        const p = params[0];
+        return `${p.axisValue}<br/>Price: ${p.data}`;
+      }
+    },
+    xAxis: {
+      data: ['2013', '2015', '2017', '2019', '2021', '2023', '2025'],
+      type: 'category',
+      boundaryGap: false,
+    },
+    yAxis: {
+      type: 'value',
+      position: 'right',
+      interval: 25,
+      max: 75.0,
+      show: true,
+    },
+    series: [
+      {
+        name: '销量',
+        type: 'line',
+        data: [5, 20, 36, 10, 10, 20],
+        symbol: 'none',
+        lineStyle: {
+            color: '#2c6288'
+        },
+        areaStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 0,
+                color: '#2c6288'
+              },
+              {
+                offset: 1,
+                color: '#F4F6F8'
+              }
+            ]
+          },
+        },
+      },
+    ],
+
+    dataZoom: [
+      {
+        type: 'inside',
+      },
+      {
+        type: 'slider',
+        show: true,
+        dataBackground: {
+          lineStyle: {
+            color: '#2C6288'
+          },
+          areaStyle: {
+            color: {
+              type: 'linear',
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [
+                { offset: 1, color: '#2c6288' },
+                { offset: 0, color: '#F4F6F8' }
+              ]
+            }
+          }
+        },
+        selectedDataBackground: {
+          lineStyle: {
+            color: '#2C6288'
+          },
+          areaStyle: {
+            color: {
+              type: 'linear',
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [
+                { offset: 1, color: '#2c6288' },
+                { offset: 0, color: '#F4F6F8' }
+              ]
+            }
+          }
+        },
+        fillerColor: 'rgba(44, 98, 136, 0.3)',
+        realtime: false,
+      },
+    ],
+  })
+}
+
+onMounted(() => {
+  initEcharts()
+})
+</script>
+<style lang="scss" scoped>
+.custom-echarts {
+  .myChart {
+    width: 1000px;
+    height: 400px;
+  }
+}
+</style>

src/components/customFooter/index.vue

@@ -3,7 +3,7 @@ import { computed } from 'vue'
 import { useWindowSize } from '@vueuse/core'
 
 import size375 from '@/components/customFooter/size375/index.vue'
-import size768 from '@/components/customFooter/size1920/index.vue'
+import size768 from '@/components/customFooter/size768/index.vue'
 import size1440 from '@/components/customFooter/size1920/index.vue'
 import size1920 from '@/components/customFooter/size1920/index.vue'
 import { useRouter } from 'vue-router'
@@ -15,7 +15,7 @@ const { t } = useI18n()
 
 const viewComponent = computed(() => {
   const viewWidth = width.value
-  if (viewWidth <= 450) {
+  if (viewWidth <= 500) {
     return size375
   } else if (viewWidth <= 1100) {
     return size768

src/components/customFooter/size1920/index.vue

@@ -1,23 +1,61 @@
 <template>
   <!-- 通用页脚 -->
   <div class="custom-footer">
-    <span>Copyright &copy; 2024-2027 FiEE</span>
+    <div class="custom-footer-box">
+      <span>&copy; 2025 FiEE, Inc. All Rights Reserved.</span>
+      <div class="footer-links">
+        <span @click="handleLink('privacyPolicy')">Privacy Policy</span>
+        <span @click="handleLink('termsOfUse')">Terms of use</span>
+        <span @click="handleLink('cookiesSettings')">Cookies Settings</span>
+        <span @click="handleLink('siteMap')">Site Map</span>
+      </div>
+    </div>
   </div>
 </template>
 
-<script setup></script>
+<script setup>
+import { useRouter } from 'vue-router'
+const router = useRouter()
+
+//点击跳转到对应的链接页面
+const handleLink = (link) => {
+  console.log(link)
+  router.push(link)
+}
+</script>
 
 <style scoped lang="scss">
 .custom-footer {
   width: 100%;
-  text-align: center;
+  background: #f7f8fa;
-  padding: 24px 0;
+  border-top: 1px solid #ececec;
+  z-index: 100;
+
+  .custom-footer-box {
+    max-width: 1700px;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    letter-spacing: 1px;
     color: #888;
     // font-size: 15px;
     font-size: 1.05rem;
-  background: #f7f8fa;
+    padding: 1rem 40px;
-  letter-spacing: 1px;
+    text-align: center;
-  border-top: 1px solid #ececec;
+  }
-  z-index: 100;
+
+  .footer-links {
+    margin: 0.4rem 0 0;
+    span {
+      border-right: 1px solid #d2d2d7;
+      padding: 0 10px;
+      cursor: pointer;
+    }
+    span:nth-last-child(1) {
+      border: 0;
+    }
+  }
 }
 </style>

src/components/customFooter/size375/index.vue

@@ -1,23 +1,63 @@
 <template>
   <!-- 通用页脚 -->
   <div class="custom-footer">
-      <span>Copyright &copy; 2024-2027 FiEE</span>
+    <span>&copy; 2025 FiEE, Inc. All Rights Reserved.</span>
+    <div class="footer-links-box">
+      <div class="footer-links">
+        <span @click="handleLink('privacyPolicy')">Privacy Policy</span>
+        <span @click="handleLink('termsOfUse')">Terms of use</span>
+      </div>
+      <div class="footer-links">
+        <span @click="handleLink('cookiesSettings')">Cookies Settings</span>
+        <span @click="handleLink('siteMap')">Site Map</span>
+      </div>
+    </div>
   </div>
 </template>
 
-  <script setup></script>
+<script setup>
+import { useRouter } from 'vue-router'
+const router = useRouter()
+
+//点击跳转到对应的链接页面
+const handleLink = (link) => {
+  router.push(link)
+}
+</script>
 
 <style scoped lang="scss">
 .custom-footer {
   width: 100%;
   text-align: center;
-    padding: 120px 0;
+  padding: 1rem 0;
   color: #888;
-    font-size: 75px;
+  font-size: 0.9rem;
   background: #f7f8fa;
   letter-spacing: 5px;
   border-top: 5px solid #ececec;
   z-index: 100;
+
+  .footer-links-box {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin: 0.6rem 0 0;
+
+    .footer-links {
+      span {
+        border-right: 1px solid #d2d2d7;
+        padding: 0 0.8rem;
+        cursor: pointer;
+        font-size: 0.75rem;
+        min-width: 8.5rem;
+        display: inline-block;
+        text-align: left;
+      }
+      span:nth-last-child(1) {
+        border: 0;
+      }
+    }
+  }
 }
 </style>
-  

src/components/customFooter/size768/index.vue

@@ -0,0 +1,52 @@
+<template>
+    <!-- 通用页脚 -->
+    <div class="custom-footer">
+      <span>&copy; 2025 FiEE, Inc. All Rights Reserved.</span>
+      <div class="footer-links">
+        <span @click="handleLink('privacyPolicy')">Privacy Policy</span>
+        <span @click="handleLink('termsOfUse')">Terms of use</span>
+        <span @click="handleLink('cookiesSettings')">Cookies Settings</span>
+        <span @click="handleLink('siteMap')">Site Map</span>
+      </div>
+    </div>
+  </template>
+  
+  <script setup>
+  import { useRouter } from 'vue-router'
+  const router = useRouter()
+  
+  //点击跳转到对应的链接页面
+  const handleLink = (link) => {
+    console.log(link)
+    router.push(link)
+  }
+  </script>
+  
+  <style scoped lang="scss">
+  .custom-footer {
+    width: 100%;
+    text-align: center;
+    padding: 24px 0;
+    color: #888;
+    // font-size: 15px;
+    font-size: 1.05rem;
+    background: #f7f8fa;
+    letter-spacing: 1px;
+    border-top: 1px solid #ececec;
+    z-index: 100;
+    padding: 1rem 0;
+  
+    .footer-links {
+      margin: 0.4rem 0 0;
+      span {
+        border-right: 1px solid #d2d2d7;
+        padding: 0 10px;
+        cursor: pointer;
+      }
+      span:nth-last-child(1) {
+        border: 0;
+      }
+    }
+  }
+  </style>
+  

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",
+        desc: "To access all of our filings with the SEC, please",
-        click_here: "Click Here",
+        click_here: "click here",
       },
     },
     quarterlyresults: {
@@ -564,7 +564,7 @@ export default {
         TITLE: "Company Positioning",
         CONTENT: "",
         CONTENTTWO:
-          "Leveraging IoT, connectivity, and Al artificial intelligence to create targeted, multilingual digital brands, fostering a global community of Key Opinion Leaders and providing unparalleled value throughout the digital content lifecycle",
+          "Leveraging IoT, connectivity, and Al to create targeted, multilingual digital brands, fostering a global community of Key Opinion Leaders and providing unparalleled value throughout the digital content lifecycle",
       },
     },
     CONTAINY: {
@@ -607,7 +607,7 @@ export default {
     TITLETWO: {
       TITLE: "About FiEE, Inc.",
       CONTENT:
-        'FiEE, Inc. (NASDAQ: MINM) formerly Minim, Inc. was founded in 1977. We have a historical track record of delivering a comprehensive WiFi/Software as a Service platform in the market. After years of development, we made the strategic decision to transition to a Software First Model in 2023 to expand our technology portfolio and revenue streams. in 2025, we  rebranded ourselves as a technology company leveraging our expertise in IoT, connectivity, and artificial intelligence ("AI") to explore new business prospects and extend our global footprint.',
+        'FiEE, Inc. (NASDAQ: MINM), formerly Minim, Inc., was founded in 1977. We have a historical track record of delivering a comprehensive WiFi/Software as a Service platform in the market. After years of development, we made the strategic decision to transition to a Software First Model in 2023 to expand our technology portfolio and revenue streams. In 2025, we  rebranded ourselves as a technology company leveraging our expertise in IoT, connectivity, and artificial intelligence ("AI") to explore new business prospects and extend our global footprint.',
       CONTENTTWO:
         'into four key categories: Cloud-Managed Connectivity (WiFi) Platform, IoT Hardware Sales & Licensing, SAAS Solutions, and Professional To-C and To-B Services & Support. Notably, we have introduced our innovative Software as a Service ("SaaS") solutions, which integrate our AI and data analytics capabilities into content creation and brand management. This initiative has led to the nurturing of a robust pool of Key Opinion Leaders (KOLs) on major social media platforms worldwide, assisting them in developing, managing, and optimizing their digital presence across global platforms. Our services include customized graphics and posts, short videos, and editorial calendars tailored to align with brand objectives.',
       CONTENTTHREE:
@@ -710,18 +710,18 @@ export default {
       TITLE: "Wai Chung Li",
       TITLETWO: "Chief Executive Officer",
       CONTENT:
-        "Mr. Li is the Chief Executive Officer, Mr. Li has extensive experience in accounting, corporate management and finance management. His role encompasses the oversight of our daily business operations and plays a vital part in the overall management of our Group.With a track record spanning prestigious roles at Deloitte China, Shanghai Prime Machinery Company Limited, Lens Technology Co., Ltd., and more, Mr. Li brings invaluable expertise to lead the our team.",
+        "Mr. Li is our Chief Executive Officer. Mr. Li has extensive experience in accounting, corporate management and finance management. His role encompasses the oversight of our daily business operations and plays a vital part in the overall management of our Group.With a track record spanning prestigious roles at Deloitte China, Shanghai Prime Machinery Company Limited, Lens Technology Co., Ltd., and more, Mr. Li brings invaluable expertise to our team.",
       CONTENTTWO:
-        "He served as chair of the Audit Committees for Fulu Holdings and Taizhou Water Group in Hong Kong, and Nedschroef in the Netherlands, showcasing his global leadership. Holding key positions in investment management, business consulting, and directorial roles in publicly listed companies.",
+        "He served as chair of the Audit Committees for Fulu Holdings and Taizhou Water Group in Hong Kong, and Nedschroef in the Netherlands, showcasing his global leadership. Mr. Li has previously held key positions in investment management, business consulting, and directorial roles in publicly listed companies.",
       CONTENTTHREE: "",
     },
     TWO: {
       TITLE: "Cao Yu",
       TITLETWO: "Chief Financial Officer, Secretary, Treasurer and Director",
       CONTENTONE:
-        "Ms. Cao is our Chief Financial Officer, Secretary, Treasurer and Director, Ms. Cao has a wealth of experience in financial management. She oversees financial operations, strategic planning, risk management, and reporting to ensure our financial health and compliance with regulations.",
+        "Ms. Cao is our Chief Financial Officer. Secretary, Treasurer and Director. Ms. Cao has a wealth of experience in financial management. She oversees financial operations, strategic planning, risk management, and reporting to ensure our financial health and compliance with regulations.",
       CONTENTTWO:
-        "Ms. Cao was previously served as the treasury director of Taifeng Cultural Communication Co., Ltd where she oversaw its financial matters from November 2018 to November 2024. Prior to that, Ms. Cao served as a business manager of Yangfeng Art Exchange Co., Ltd from February 2016 to October 2018. From March 2011 to January 2016, she served as the treasury officer of financial department of Suzhou Industrial Park Xinfushida Plastic Profile Products Co., Ltd.",
+        "Ms. Cao previously served as the treasury director of Taifeng Cultural Communication Co., Ltd where she oversaw its financial matters from November 2018 to November 2024. Prior to that, Ms. Cao served as a business manager of Yangfeng Art Exchange Co., Ltd from February 2016 to October 2018. From March 2011 to January 2016, she served as the treasury officer of financial department of Suzhou Industrial Park Xinfushida Plastic Profile Products Co., Ltd.",
     },
   },
 };

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",
@@ -110,6 +116,26 @@ const routes = [
         name: "govern",
         component: () => import("@/views/govern/index.vue"),
       },
+      {
+        path: "/privacyPolicy",
+        name: "privacyPolicy",
+        component: () => import("@/views/footerLinks/privacyPolicy/index.vue"),
+      },
+      {
+        path: "/termsOfUse",
+        name: "termsOfUse",
+        component: () => import("@/views/footerLinks/termsOfUse/index.vue"),
+      },
+      {
+        path: "/cookiesSettings",
+        name: "cookiesSettings",
+        component: () => import("@/views/footerLinks/cookiesSettings/index.vue"),
+      },
+      {
+        path: "/siteMap",
+        name: "siteMap",
+        component: () => import("@/views/footerLinks/siteMap/index.vue"),
+      },
     ],
   },
   

src/views/CommitteeAppointment/size1440/index.vue

@@ -52,11 +52,15 @@
               <template v-if="getCommitteeRole(director.name, 'Audit')">
                 <div
                   class="role-badge"
-                  :class="
+                  :class="{
-                    getCommitteeRole(director.name, 'Audit').toLowerCase()
+                    [getCommitteeRole(
-                  "
+                      director.name,
+                      'Audit'
+                    )?.toLowerCase()]: true,
+                    chair: getCommitteeRole(director.name, 'Audit') === 'Chair',
+                  }"
                 >
-                  <span class="badge-icon"></span>
+                  {{ getCommitteeRole(director.name, "Audit") }}
                 </div>
               </template>
             </div>
@@ -67,14 +71,17 @@
               <template v-if="getCommitteeRole(director.name, 'Compensation')">
                 <div
                   class="role-badge"
-                  :class="
+                  :class="{
-                    getCommitteeRole(
+                    [getCommitteeRole(
                       director.name,
                       'Compensation'
-                    ).toLowerCase()
+                    )?.toLowerCase()]: true,
-                  "
+                    chair:
+                      getCommitteeRole(director.name, 'Compensation') ===
+                      'Chair',
+                  }"
                 >
-                  <span class="badge-icon"></span>
+                  {{ getCommitteeRole(director.name, "Compensation") }}
                 </div>
               </template>
             </div>
@@ -85,11 +92,16 @@
               <template v-if="getCommitteeRole(director.name, 'Governance')">
                 <div
                   class="role-badge"
-                  :class="
+                  :class="{
-                    getCommitteeRole(director.name, 'Governance').toLowerCase()
+                    [getCommitteeRole(
-                  "
+                      director.name,
+                      'Governance'
+                    )?.toLowerCase()]: true,
+                    chair:
+                      getCommitteeRole(director.name, 'Governance') === 'Chair',
+                  }"
                 >
-                  <span class="badge-icon"></span>
+                  {{ getCommitteeRole(director.name, "Governance") }}
                 </div>
               </template>
             </div>
@@ -112,24 +124,24 @@ const otherDirectors = [
   { name: "Chan Oi Fat", title: "Director" },
 ];
 
-// 模拟数据 - 实际应从API获取
+// Updated committee roles according to requirements
 const committeeRoles = {
   "Cao Yu": {},
   "David Lazar": {},
   "Hu Bin": {
-    Compensation: "Chair",
+    Audit: "Member",
-    Governance: "Member",
+    Compensation: "Member",
-    Audit: "Chair",
+    Governance: "Chair",
   },
   "David Natan": {
-    Compensation: "Chair",
-    Governance: "Member",
     Audit: "Chair",
+    Compensation: "Member",
+    Governance: "Member",
   },
   "Chan Oi Fat": {
+    Audit: "Member",
     Compensation: "Chair",
     Governance: "Member",
-    Audit: "Chair",
   },
 };
 
@@ -139,6 +151,9 @@ const getCommitteeRole = (name, committee) => {
 </script>
 
 <style scoped>
+.role-badge.chair {
+  color: orange;
+}
 .title h1 {
   position: relative;
 

src/views/CommitteeAppointment/size1920/index.vue

@@ -1,7 +1,6 @@
 <template>
   <div class="committees-page">
     <!-- 标题区 -->
-
     <div class="title mb-[50px] text-center">
       <h1 style="font-size: 40px; margin-top: 60px">Committee Composition</h1>
     </div>
@@ -41,7 +40,6 @@
                 >
                   {{ director.name }}
                 </router-link>
-                <!-- <p class="director-title">{{ director.title }}</p> -->
               </div>
             </div>
           </div>
@@ -52,11 +50,15 @@
               <template v-if="getCommitteeRole(director.name, 'Audit')">
                 <div
                   class="role-badge"
-                  :class="
+                  :class="{
-                    getCommitteeRole(director.name, 'Audit').toLowerCase()
+                    [getCommitteeRole(
-                  "
+                      director.name,
+                      'Audit'
+                    )?.toLowerCase()]: true,
+                    chair: getCommitteeRole(director.name, 'Audit') === 'Chair',
+                  }"
                 >
-                  <span class="badge-icon"></span>
+                  {{ getCommitteeRole(director.name, "Audit") }}
                 </div>
               </template>
             </div>
@@ -67,14 +69,17 @@
               <template v-if="getCommitteeRole(director.name, 'Compensation')">
                 <div
                   class="role-badge"
-                  :class="
+                  :class="{
-                    getCommitteeRole(
+                    [getCommitteeRole(
                       director.name,
                       'Compensation'
-                    ).toLowerCase()
+                    )?.toLowerCase()]: true,
-                  "
+                    chair:
+                      getCommitteeRole(director.name, 'Compensation') ===
+                      'Chair',
+                  }"
                 >
-                  <span class="badge-icon"></span>
+                  {{ getCommitteeRole(director.name, "Compensation") }}
                 </div>
               </template>
             </div>
@@ -85,11 +90,16 @@
               <template v-if="getCommitteeRole(director.name, 'Governance')">
                 <div
                   class="role-badge"
-                  :class="
+                  :class="{
-                    getCommitteeRole(director.name, 'Governance').toLowerCase()
+                    [getCommitteeRole(
-                  "
+                      director.name,
+                      'Governance'
+                    )?.toLowerCase()]: true,
+                    chair:
+                      getCommitteeRole(director.name, 'Governance') === 'Chair',
+                  }"
                 >
-                  <span class="badge-icon"></span>
+                  {{ getCommitteeRole(director.name, "Governance") }}
                 </div>
               </template>
             </div>
@@ -112,24 +122,24 @@ const otherDirectors = [
   { name: "Chan Oi Fat", title: "Director" },
 ];
 
-// 模拟数据 - 实际应从API获取
+// Updated committee roles according to requirements
 const committeeRoles = {
   "Cao Yu": {},
   "David Lazar": {},
   "Hu Bin": {
-    Compensation: "Chair",
+    Audit: "Member",
-    Governance: "Member",
+    Compensation: "Member",
-    Audit: "Chair",
+    Governance: "Chair",
   },
   "David Natan": {
-    Compensation: "Chair",
-    Governance: "Member",
     Audit: "Chair",
+    Compensation: "Member",
+    Governance: "Member",
   },
   "Chan Oi Fat": {
+    Audit: "Member",
     Compensation: "Chair",
     Governance: "Member",
-    Audit: "Chair",
   },
 };
 
@@ -140,6 +150,9 @@ const getCommitteeRole = (name, committee) => {
 
 <style scoped>
 /* 紫色主题变量 */
+.role-badge.chair {
+  color: orange;
+}
 :root {
   --primary: #895bff;
   --primary-light: #a07cff;

src/views/CommitteeAppointment/size375/index.vue

@@ -40,14 +40,18 @@
                 v-for="(committee, idx) in getCommittees(director.name)"
                 :key="idx"
               >
+                <div class="committee-position">
                   <div
                     class="role-badge"
                     :class="
                       getCommitteeRole(director.name, committee).toLowerCase()
                     "
                   >
-                  <span>{{ getCommitteeRole(director.name, committee) }}</span>
+                    <span>{{ getCommitteeShortName(committee) }}</span>
-                  <span class="committee-name"></span>
+                  </div>
+                  <div style="font-size: 16px" class="role-title">
+                    {{ getCommitteeRole(director.name, committee) }}
+                  </div>
                 </div>
               </template>
             </div>
@@ -73,33 +77,40 @@ const otherDirectors = [
   { name: "Chan Oi Fat", title: "Director" },
 ];
 
-// 委员会角色数据
+// 委员会角色数据 - 现在包含职位类型 (Chair/Member)
 const committeeRoles = {
   "Cao Yu": {},
   "David Lazar": {},
   "Hu Bin": {
-    Compensation: "Audit Committee ",
+    Audit: "Member",
-    Governance: "Compensation Committee",
+    Compensation: "Member",
-    Audit: "Nominating Committee",
+    Governance: "Chair",
   },
   "David Natan": {
-    Compensation: "Audit Committee ",
+    Audit: "Chair",
-    Governance: "Compensation Committee",
+    Compensation: "Member",
-    Audit: "Nominating Committee",
+    Governance: "Member",
   },
   "Chan Oi Fat": {
-    Compensation: "Audit Committee ",
+    Audit: "Member",
-    Governance: "Compensation Committee",
+    Compensation: "Chair",
-    Audit: "Nominating Committee",
+    Governance: "Member",
   },
 };
 
+// 委员会完整名称
+const committeeFullNames = {
+  Audit: "Audit Committee",
+  Compensation: "Compensation Committee",
+  Governance: "Nominating and Corporate Governance Committee",
+};
+
 // 获取委员会列表
 const getCommittees = (name) => {
   return Object.keys(committeeRoles[name] || {});
 };
 
-// 获取委员会角色
+// 获取委员会角色 (Chair/Member)
 const getCommitteeRole = (name, committee) => {
   return committeeRoles[name]?.[committee] || "";
 };
@@ -125,6 +136,40 @@ const getInitials = (name) => {
 </script>
 
 <style scoped>
+/* 添加这些样式来显示职位类型 */
+.committee-position {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.role-title {
+  font-size: 12px;
+  color: #666;
+  margin-top: 4px;
+  text-transform: capitalize;
+}
+
+/* 保持原有的角色徽章样式 */
+.role-badge {
+  padding: 6px 12px;
+  border-radius: 20px;
+  font-size: 14px;
+  font-weight: 500;
+  display: inline-flex;
+  align-items: center;
+}
+
+.role-badge.chair {
+  background-color: #e6f2ff;
+  color: #0066cc;
+}
+
+.role-badge.member {
+  background-color: #f0f0f0;
+  color: #555;
+}
 .title h1 {
   position: relative;
 

src/views/CommitteeAppointment/size768/index.vue

@@ -40,14 +40,18 @@
                 v-for="(committee, idx) in getCommittees(director.name)"
                 :key="idx"
               >
+                <div class="committee-position">
                   <div
                     class="role-badge"
                     :class="
                       getCommitteeRole(director.name, committee).toLowerCase()
                     "
                   >
-                  <span>{{ getCommitteeRole(director.name, committee) }}</span>
+                    <span>{{ getCommitteeShortName(committee) }}</span>
-                  <span class="committee-name"></span>
+                  </div>
+                  <div style="font-size: 16px" class="role-title">
+                    {{ getCommitteeRole(director.name, committee) }}
+                  </div>
                 </div>
               </template>
             </div>
@@ -73,33 +77,40 @@ const otherDirectors = [
   { name: "Chan Oi Fat", title: "Director" },
 ];
 
-// 委员会角色数据
+// 委员会角色数据 - 现在包含职位类型 (Chair/Member)
 const committeeRoles = {
   "Cao Yu": {},
   "David Lazar": {},
   "Hu Bin": {
-    Compensation: "Audit Committee ",
+    Audit: "Member",
-    Governance: "Compensation Committee",
+    Compensation: "Member",
-    Audit: "Nominating Committee",
+    Governance: "Chair",
   },
   "David Natan": {
-    Compensation: "Audit Committee ",
+    Audit: "Chair",
-    Governance: "Compensation Committee",
+    Compensation: "Member",
-    Audit: "Nominating Committee",
+    Governance: "Member",
   },
   "Chan Oi Fat": {
-    Compensation: "Audit Committee ",
+    Audit: "Member",
-    Governance: "Compensation Committee",
+    Compensation: "Chair",
-    Audit: "Nominating Committee",
+    Governance: "Member",
   },
 };
 
+// 委员会完整名称
+const committeeFullNames = {
+  Audit: "Audit Committee",
+  Compensation: "Compensation Committee",
+  Governance: "Nominating and Corporate Governance Committee",
+};
+
 // 获取委员会列表
 const getCommittees = (name) => {
   return Object.keys(committeeRoles[name] || {});
 };
 
-// 获取委员会角色
+// 获取委员会角色 (Chair/Member)
 const getCommitteeRole = (name, committee) => {
   return committeeRoles[name]?.[committee] || "";
 };
@@ -125,6 +136,40 @@ const getInitials = (name) => {
 </script>
 
 <style scoped>
+/* 添加这些样式来显示职位类型 */
+.committee-position {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.role-title {
+  font-size: 12px;
+  color: #666;
+  margin-top: 4px;
+  text-transform: capitalize;
+}
+
+/* 保持原有的角色徽章样式 */
+.role-badge {
+  padding: 6px 12px;
+  border-radius: 20px;
+  font-size: 14px;
+  font-weight: 500;
+  display: inline-flex;
+  align-items: center;
+}
+
+.role-badge.chair {
+  background-color: #e6f2ff;
+  color: #0066cc;
+}
+
+.role-badge.member {
+  background-color: #f0f0f0;
+  color: #555;
+}
 .title h1 {
   position: relative;
 

src/views/boarddirectors/size1440/index.vue

@@ -10,8 +10,12 @@
           :key="index"
           class="director-item"
         >
-          <n-h2 class="director-name">{{ director.name }}</n-h2>
+          <n-h2 style="font-size: 18px" class="director-name">{{
-          <n-text class="director-title">{{ director.title }}</n-text>
+            director.name
+          }}</n-h2>
+          <n-text style="font-size: 16px" class="director-title">{{
+            director.title
+          }}</n-text>
           <n-divider class="divider" />
           <!-- <n-p class="director-bio">{{ director.contain }}</n-p> -->
         </div>
@@ -22,6 +26,12 @@
 
 <script setup>
 const otherDirectors = [
+  {
+    name: "Hu Bin",
+    title: "Chairman of the Board of Directors",
+    contain:
+      "Hu Bin,age 55, has served as a director of DC International Service Trade GmbH since December 2024. Prior to that, Mr. Hu worked as a freelancer in thetourism industry from April 2001 to October 2024. From April 1994 to October 2000, he served as the general manager of Suzhou Wintime AdvertisingCo., Ltd. Before that, he served as the general manager of Suzhou Bauhaus Advertising Design Co., Ltd. from August 1992 to April 1994, where he wasengaged in computer-aided design and 3D computer animation production. Mr. Hu began his career at Suzhou Advertising Company in October 1989,where he worked as a designer responsible for graphic design, platemaking, printing, and interior decoration. Mr. Hu graduated from Suzhou Academy of Arts in 1989.",
+  },
   {
     name: "Cao Yu",
     title: "Chief Financial Officer, Secretary, Treasurer and Director",
@@ -34,12 +44,7 @@ const otherDirectors = [
     contain:
       "David E. Lazar, age 34, has served as the Chief Executive Officer of OpGen, Inc., a precision medicine company listed on the Nasdaq (OPGN) since April11, 2024, where he also servs as a director and board chairman, beginning on March 25, 2024. Mr. Lazar served as the Chief Executive Officer of TitanPharmaceuticals Inc. listed on the Nasdaq (TTNP) from August 2022 through April 11, 2024, where he also served as a director and board chairman fromAugust 2022 until October 2023. He has also served as the CEO of Custodian Ventures LLC, a company which specializes in assisting distressed publiccompanies through custodianship, since February 2018, and Activist Investing LLC, an actively managed private investment fund, since March 2018.Previously, Mr. Lazar served as Managing Partner at Zenith Partners International Inc., a boutique consulting firm, from July 2012 to April 2018. In his roleas Chief Eecutive Officer of Custodian Ventures LLC, Mr. Lazar has successfully served as a custodian to numerous public companies across a widerange of industries.",
   },
-  {
+
-    name: "Hu Bin",
-    title: "Director",
-    contain:
-      "Hu Bin,age 55, has served as a director of DC International Service Trade GmbH since December 2024. Prior to that, Mr. Hu worked as a freelancer in thetourism industry from April 2001 to October 2024. From April 1994 to October 2000, he served as the general manager of Suzhou Wintime AdvertisingCo., Ltd. Before that, he served as the general manager of Suzhou Bauhaus Advertising Design Co., Ltd. from August 1992 to April 1994, where he wasengaged in computer-aided design and 3D computer animation production. Mr. Hu began his career at Suzhou Advertising Company in October 1989,where he worked as a designer responsible for graphic design, platemaking, printing, and interior decoration. Mr. Hu graduated from Suzhou Academy of Arts in 1989.",
-  },
   {
     name: "David Natan",
     title: "Director",

src/views/boarddirectors/size1920/index.vue

@@ -22,6 +22,12 @@
 
 <script setup>
 const otherDirectors = [
+  {
+    name: "Hu Bin",
+    title: "Chairman of the Board of Directors",
+    contain:
+      "Hu Bin,age 55, has served as a director of DC International Service Trade GmbH since December 2024. Prior to that, Mr. Hu worked as a freelancer in thetourism industry from April 2001 to October 2024. From April 1994 to October 2000, he served as the general manager of Suzhou Wintime AdvertisingCo., Ltd. Before that, he served as the general manager of Suzhou Bauhaus Advertising Design Co., Ltd. from August 1992 to April 1994, where he wasengaged in computer-aided design and 3D computer animation production. Mr. Hu began his career at Suzhou Advertising Company in October 1989,where he worked as a designer responsible for graphic design, platemaking, printing, and interior decoration. Mr. Hu graduated from Suzhou Academy of Arts in 1989.",
+  },
   {
     name: "Cao Yu",
     title: "Chief Financial Officer, Secretary, Treasurer and Director",
@@ -34,12 +40,7 @@ const otherDirectors = [
     contain:
       "David E. Lazar, age 34, has served as the Chief Executive Officer of OpGen, Inc., a precision medicine company listed on the Nasdaq (OPGN) since April11, 2024, where he also servs as a director and board chairman, beginning on March 25, 2024. Mr. Lazar served as the Chief Executive Officer of TitanPharmaceuticals Inc. listed on the Nasdaq (TTNP) from August 2022 through April 11, 2024, where he also served as a director and board chairman fromAugust 2022 until October 2023. He has also served as the CEO of Custodian Ventures LLC, a company which specializes in assisting distressed publiccompanies through custodianship, since February 2018, and Activist Investing LLC, an actively managed private investment fund, since March 2018.Previously, Mr. Lazar served as Managing Partner at Zenith Partners International Inc., a boutique consulting firm, from July 2012 to April 2018. In his roleas Chief Eecutive Officer of Custodian Ventures LLC, Mr. Lazar has successfully served as a custodian to numerous public companies across a widerange of industries.",
   },
-  {
+
-    name: "Hu Bin",
-    title: "Director",
-    contain:
-      "Hu Bin,age 55, has served as a director of DC International Service Trade GmbH since December 2024. Prior to that, Mr. Hu worked as a freelancer in thetourism industry from April 2001 to October 2024. From April 1994 to October 2000, he served as the general manager of Suzhou Wintime AdvertisingCo., Ltd. Before that, he served as the general manager of Suzhou Bauhaus Advertising Design Co., Ltd. from August 1992 to April 1994, where he wasengaged in computer-aided design and 3D computer animation production. Mr. Hu began his career at Suzhou Advertising Company in October 1989,where he worked as a designer responsible for graphic design, platemaking, printing, and interior decoration. Mr. Hu graduated from Suzhou Academy of Arts in 1989.",
-  },
   {
     name: "David Natan",
     title: "Director",

src/views/boarddirectors/size375/index.vue

@@ -22,6 +22,12 @@
 
 <script setup>
 const otherDirectors = [
+  {
+    name: "Hu Bin",
+    title: "Chairman of the Board of Directors",
+    contain:
+      "Hu Bin,age 55, has served as a director of DC International Service Trade GmbH since December 2024. Prior to that, Mr. Hu worked as a freelancer in thetourism industry from April 2001 to October 2024. From April 1994 to October 2000, he served as the general manager of Suzhou Wintime AdvertisingCo., Ltd. Before that, he served as the general manager of Suzhou Bauhaus Advertising Design Co., Ltd. from August 1992 to April 1994, where he wasengaged in computer-aided design and 3D computer animation production. Mr. Hu began his career at Suzhou Advertising Company in October 1989,where he worked as a designer responsible for graphic design, platemaking, printing, and interior decoration. Mr. Hu graduated from Suzhou Academy of Arts in 1989.",
+  },
   {
     name: "Cao Yu",
     title: "Chief Financial Officer, Secretary, Treasurer and Director",
@@ -34,12 +40,7 @@ const otherDirectors = [
     contain:
       "David E. Lazar, age 34, has served as the Chief Executive Officer of OpGen, Inc., a precision medicine company listed on the Nasdaq (OPGN) since April11, 2024, where he also servs as a director and board chairman, beginning on March 25, 2024. Mr. Lazar served as the Chief Executive Officer of TitanPharmaceuticals Inc. listed on the Nasdaq (TTNP) from August 2022 through April 11, 2024, where he also served as a director and board chairman fromAugust 2022 until October 2023. He has also served as the CEO of Custodian Ventures LLC, a company which specializes in assisting distressed publiccompanies through custodianship, since February 2018, and Activist Investing LLC, an actively managed private investment fund, since March 2018.Previously, Mr. Lazar served as Managing Partner at Zenith Partners International Inc., a boutique consulting firm, from July 2012 to April 2018. In his roleas Chief Eecutive Officer of Custodian Ventures LLC, Mr. Lazar has successfully served as a custodian to numerous public companies across a widerange of industries.",
   },
-  {
+
-    name: "Hu Bin",
-    title: "Director",
-    contain:
-      "Hu Bin,age 55, has served as a director of DC International Service Trade GmbH since December 2024. Prior to that, Mr. Hu worked as a freelancer in thetourism industry from April 2001 to October 2024. From April 1994 to October 2000, he served as the general manager of Suzhou Wintime AdvertisingCo., Ltd. Before that, he served as the general manager of Suzhou Bauhaus Advertising Design Co., Ltd. from August 1992 to April 1994, where he wasengaged in computer-aided design and 3D computer animation production. Mr. Hu began his career at Suzhou Advertising Company in October 1989,where he worked as a designer responsible for graphic design, platemaking, printing, and interior decoration. Mr. Hu graduated from Suzhou Academy of Arts in 1989.",
-  },
   {
     name: "David Natan",
     title: "Director",

src/views/boarddirectors/size768/index.vue

@@ -1,6 +1,3 @@
-<template>
-  <div class="home-page">
-    <div class="directors-page">
 <template>
   <div class="home-page">
     <div class="directors-page">
@@ -13,8 +10,12 @@
           :key="index"
           class="director-item"
         >
-                <n-h2 class="director-name">{{ director.name }}</n-h2>
+          <n-h2 style="font-size: 18px" class="director-name">{{
-                <n-text class="director-title">{{ director.title }}</n-text>
+            director.name
+          }}</n-h2>
+          <n-text style="font-size: 16px" class="director-title">{{
+            director.title
+          }}</n-text>
           <n-divider class="divider" />
           <!-- <n-p class="director-bio">{{ director.contain }}</n-p> -->
         </div>
@@ -25,6 +26,12 @@
 
 <script setup>
 const otherDirectors = [
+  {
+    name: "Hu Bin",
+    title: "Chairman of the Board of Directors",
+    contain:
+      "Hu Bin,age 55, has served as a director of DC International Service Trade GmbH since December 2024. Prior to that, Mr. Hu worked as a freelancer in thetourism industry from April 2001 to October 2024. From April 1994 to October 2000, he served as the general manager of Suzhou Wintime AdvertisingCo., Ltd. Before that, he served as the general manager of Suzhou Bauhaus Advertising Design Co., Ltd. from August 1992 to April 1994, where he wasengaged in computer-aided design and 3D computer animation production. Mr. Hu began his career at Suzhou Advertising Company in October 1989,where he worked as a designer responsible for graphic design, platemaking, printing, and interior decoration. Mr. Hu graduated from Suzhou Academy of Arts in 1989.",
+  },
   {
     name: "Cao Yu",
     title: "Chief Financial Officer, Secretary, Treasurer and Director",
@@ -37,12 +44,7 @@
     contain:
       "David E. Lazar, age 34, has served as the Chief Executive Officer of OpGen, Inc., a precision medicine company listed on the Nasdaq (OPGN) since April11, 2024, where he also servs as a director and board chairman, beginning on March 25, 2024. Mr. Lazar served as the Chief Executive Officer of TitanPharmaceuticals Inc. listed on the Nasdaq (TTNP) from August 2022 through April 11, 2024, where he also served as a director and board chairman fromAugust 2022 until October 2023. He has also served as the CEO of Custodian Ventures LLC, a company which specializes in assisting distressed publiccompanies through custodianship, since February 2018, and Activist Investing LLC, an actively managed private investment fund, since March 2018.Previously, Mr. Lazar served as Managing Partner at Zenith Partners International Inc., a boutique consulting firm, from July 2012 to April 2018. In his roleas Chief Eecutive Officer of Custodian Ventures LLC, Mr. Lazar has successfully served as a custodian to numerous public companies across a widerange of industries.",
   },
-          {
+
-            name: "Hu Bin",
-            title: "Director",
-            contain:
-              "Hu Bin,age 55, has served as a director of DC International Service Trade GmbH since December 2024. Prior to that, Mr. Hu worked as a freelancer in thetourism industry from April 2001 to October 2024. From April 1994 to October 2000, he served as the general manager of Suzhou Wintime AdvertisingCo., Ltd. Before that, he served as the general manager of Suzhou Bauhaus Advertising Design Co., Ltd. from August 1992 to April 1994, where he wasengaged in computer-aided design and 3D computer animation production. Mr. Hu began his career at Suzhou Advertising Company in October 1989,where he worked as a designer responsible for graphic design, platemaking, printing, and interior decoration. Mr. Hu graduated from Suzhou Academy of Arts in 1989.",
-          },
   {
     name: "David Natan",
     title: "Director",
@@ -133,144 +135,3 @@
   }
 }
 </style>
-
-      <n-divider />
-
-      <div class="directors-list">
-        <div
-          v-for="(director, index) in otherDirectors"
-          :key="index"
-          class="director-item"
-        >
-          <n-h2 class="director-name">{{ director.name }}</n-h2>
-          <n-text class="director-title">{{ director.title }}</n-text>
-          <n-divider class="divider" />
-          <!-- <n-p class="director-bio">{{ director.contain }}</n-p> -->
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-const otherDirectors = [
-  {
-    name: "Cao Yu",
-    title: "Chief Financial Officer, Secretary, Treasurer and Director",
-    contain:
-      "Cao Yu, age 34, previously served as the treasury director of Taifeng Cultural Communication Co., Ltd where she oversees its financial matters fromNovember 2018 to November 2024. Prior to that, Ms. Cao served as a business manager of Yangfeng Art Exchange Co., Ltd from February 2016 toOctober 2018. From March 2011 to January 2016, she served as the treasury officer of financial department of Suzhou Industrial Park Xinfushida PlasticProfile Products Co., Ltd.",
-  },
-  {
-    name: "David Lazar",
-    title: "Director",
-    contain:
-      "David E. Lazar, age 34, has served as the Chief Executive Officer of OpGen, Inc., a precision medicine company listed on the Nasdaq (OPGN) since April11, 2024, where he also servs as a director and board chairman, beginning on March 25, 2024. Mr. Lazar served as the Chief Executive Officer of TitanPharmaceuticals Inc. listed on the Nasdaq (TTNP) from August 2022 through April 11, 2024, where he also served as a director and board chairman fromAugust 2022 until October 2023. He has also served as the CEO of Custodian Ventures LLC, a company which specializes in assisting distressed publiccompanies through custodianship, since February 2018, and Activist Investing LLC, an actively managed private investment fund, since March 2018.Previously, Mr. Lazar served as Managing Partner at Zenith Partners International Inc., a boutique consulting firm, from July 2012 to April 2018. In his roleas Chief Eecutive Officer of Custodian Ventures LLC, Mr. Lazar has successfully served as a custodian to numerous public companies across a widerange of industries.",
-  },
-  {
-    name: "Hu Bin",
-    title: "Director",
-    contain:
-      "Hu Bin,age 55, has served as a director of DC International Service Trade GmbH since December 2024. Prior to that, Mr. Hu worked as a freelancer in thetourism industry from April 2001 to October 2024. From April 1994 to October 2000, he served as the general manager of Suzhou Wintime AdvertisingCo., Ltd. Before that, he served as the general manager of Suzhou Bauhaus Advertising Design Co., Ltd. from August 1992 to April 1994, where he wasengaged in computer-aided design and 3D computer animation production. Mr. Hu began his career at Suzhou Advertising Company in October 1989,where he worked as a designer responsible for graphic design, platemaking, printing, and interior decoration. Mr. Hu graduated from Suzhou Academy of Arts in 1989.",
-  },
-  {
-    name: "David Natan",
-    title: "Director",
-    contain:
-      "David Natan,age 72, currently serves as President and Chief Executive Officer of Natan & Associates, LLC, a consulting firm offering chief financialofficer services to public and private companies in a variety of industries, since 2007. Mr. Natan previously served as a Director of the Company fromNovember 2023 to February 2025. From February 2010 to May 2020, Mr. Natan served as Chief Executive Officer of ForceField Energy, Inc.(OTCMKTS: FNRG), a company focused on the solar industry and LED lighting products. From February 2002 to November 2007, Mr. Natan served asExecutive Vice President of Reporting and Chief Financial Officer of PharmaNet Development Group, Inc., a drug development services company, and,from June 1995 to February 2002, as Chief Financial Officer and Vice President of Global Technovations, Inc., a manufacturer and marketer of oil analysisinstruments and speakers and speaker components. Prior to that, Mr. Natan served in various roles of increasing responsibility with Deloitte & Touche LLP,a global consulting firm. Mr. Natan currently serves as a member of the Board of Directors and Chair of the Audit Committee of Sunshine Biopharma, Inc.(Nasdaq: SBFM), a pharmaceutical and nutritional supplement company, since February 2022. Previously, Mr. Natan has served as a director for thefollowing public companies: Global Technovations, Forcefield Energy, Titan Pharmaceuticals (Nasdaq: TTNP), Vivakor Inc. (Nasdaq: VIVK), NetBrandsCorp. (OTC: NBND), and OpGen Inc. (OTC: OPGN), and Cyclacel Pharmaceuticals (Nasdaq: CYCC). Mr. Natan holds a B.A. in Economics from Boston University.",
-  },
-  {
-    name: "Chan Oi Fat",
-    title: "Director",
-    contain:
-      "Chan Oi Fat, age 46, has served as Vice President – Finance of SML Group Corporation since March 2018 and as Company Secretary of China LeonInspection Holding Limited (HKEX: 1586) since February 2018 and of Raily Aesthetic Medicine International Holdings Limited (HKEX: 2135) sinceNovember 2020. He is an independent non-executive director of Huajin International Holdings Limited (HKEX: 2738) (since March 2025) and UBoTHolding Limited (HKEX GEM: 8529) (since May 2024) and previously served as an independent non-executive director of China Saftower InternationalHolding Group Limited (HKEX GEM: 8623) from June 2020 to December 2023 and Shanghai Prime Machinery Company Limited (HKEX: 2345) fromJune 2014 to January 2021. Mr. Chan holds a B.B.A. (Hons) in Accountancy from the City University of Hong Kong (2000) and is a member of theAssociation of Chartered Certified Accountants (since 2003) and the Hong Kong Institute of Certified Public Accountants (since 2004).",
-  },
-];
-</script>
-
-<style scoped>
-:root {
-  --primary-color: #333;
-  --secondary-color: #666;
-  --divider-color: #f0f0f0;
-  --mobile-padding: 16px;
-  --tablet-padding: 24px;
-}
-
-.home-page {
-  background-image: url("@/assets/image/bg-mobile.png");
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-}
-
-.directors-page {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: clamp(2rem, 5vw, 4rem)
-    clamp(var(--mobile-padding), 4vw, var(--tablet-padding));
-}
-
-.page-title {
-  font-size: clamp(1.75rem, 4vw, 2.5rem);
-  margin-bottom: clamp(1.5rem, 3vw, 2rem);
-  color: var(--primary-color);
-}
-
-.directors-list {
-  display: flex;
-  flex-direction: column;
-  gap: clamp(2rem, 4vw, 3rem);
-  margin-top: clamp(1.5rem, 3vw, 2.5rem);
-}
-
-.director-item {
-  padding-bottom: clamp(2rem, 4vw, 3rem);
-  border-bottom: 1px solid var(--divider-color);
-}
-
-.director-item:last-child {
-  border-bottom: none;
-  padding-bottom: 0;
-}
-
-.director-name {
-  margin-bottom: clamp(0.5rem, 1vw, 0.75rem);
-  font-size: clamp(1.25rem, 3vw, 1.75rem);
-  font-weight: 500;
-  color: var(--primary-color);
-}
-
-.director-title {
-  font-size: clamp(1rem, 2vw, 1.25rem);
-  color: var(--secondary-color);
-  display: block;
-  margin-bottom: clamp(1rem, 2vw, 1.5rem);
-  line-height: 1.5;
-}
-
-.divider {
-  margin: clamp(1rem, 2vw, 1.5rem) 0;
-  background-color: var(--divider-color);
-}
-
-.director-bio {
-  line-height: 1.8;
-  color: #4a4a4a;
-  font-size: clamp(0.9rem, 1.8vw, 1rem);
-}
-
-/* 针对超小屏幕的优化 */
-@media (max-width: 375px) {
-  .directors-page {
-    padding: clamp(1.5rem, 5vw, 2rem) clamp(12px, 4vw, 16px);
-  }
-
-  .director-name {
-    font-size: 1.25rem;
-  }
-
-  .director-title {
-    font-size: 1rem;
-  }
-}
-</style>

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 size375 from "@/views/financialinformation/annualreports/size375/index.vue";
-import size768 from "@/views/financialinformation/secfilings/size768/index.vue";
+import size768 from "@/views/financialinformation/annualreports/size768/index.vue";
-import size1440 from "@/views/financialinformation/secfilings/size1440/index.vue";
+import size1440 from "@/views/financialinformation/annualreports/size1440/index.vue";
-import size1920 from "@/views/financialinformation/secfilings/size1920/index.vue";
+import size1920 from "@/views/financialinformation/annualreports/size1920/index.vue";
 import { useRouter } from "vue-router";
 import { useI18n } from "vue-i18n";
 

src/views/financialinformation/secfilings/size1440/index.vue

@@ -1,183 +1,318 @@
 <template>
   <div class="page-container">
-    <div class="financials-container">
+    <div class="sec-filings-container">
       <!-- 标题 -->
-      <div class="financials-title">
+      <div class="page-title">SEC Filings</div>
-        {{ t("financialinformation.secfilings.title") }}
+
+      <!-- 筛选器 -->
+      <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">
-      <section class="section">
+          <label class="filter-label">Items per page:</label>
-        <div class="section-title">
+          <n-select
-          {{ t("financialinformation.secfilings.overview.title") }}
+            v-model:value="state.pageSize"
+            :options="state.pageSizeOptions"
+            style="width: 150px"
+            @update:value="handlePageSizeChange"
+          />
         </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-container">
-          <div class="table-header">
+        <n-data-table
-            <div class="column file-name">
+          :columns="columns"
-              {{
+          :data="paginatedData"
-                t("financialinformation.secfilings.annual_reports.file_name")
+          :pagination="false"
-              }}
+          :bordered="false"
-            </div>
+          :size="'medium'"
-            <div class="column date">
+          :row-key="(row) => row.index"
-              {{ t("financialinformation.secfilings.annual_reports.date") }}
+        />
-            </div>
-            <div class="column download"></div>
-          </div>
 
-          <!-- 报告列表 -->
+        <!-- 分页器 -->
-          <div class="reports-list">
+        <div class="pagination-container">
-            <div
+          <n-pagination
-              class="table-row"
+            v-model:page="state.currentPage"
-              v-for="(report, index) in annualReports"
+            v-model:page-size="state.pageSize"
-              :key="index"
+            show-size-picker
+            show-quick-jumper
+            :item-count="filteredData.length"
+            :page-sizes="[10, 25, 50]"
+            @update:page="handlePageChange"
+            @update:page-size="handlePageSizeChange"
           >
-              <div class="column file-name">{{ report.fileName }}</div>
+            <template #prev>
-              <div class="column date">{{ report.date }}</div>
+              <span>‹ Previous</span>
-              <div class="column download">
+            </template>
-                <a :href="report.downloadUrl" class="download-link">{{
+            <template #next>
-                  t("financialinformation.secfilings.annual_reports.view")
+              <span>Next ›</span>
-                }}</a>
+            </template>
-              </div>
+          </n-pagination>
-            </div>
-          </div>
-        </div>
-      </section>
 
-      <!-- SEC文件 -->
+          <div class="pagination-info">
-      <section class="section">
+            Displaying {{ startIndex }} - {{ endIndex }} of
-        <div class="section-title">
+            {{ filteredData.length }} results
-          {{ t("financialinformation.secfilings.sec.title") }}
+          </div>
+        </div>
       </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 { 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/secFiles.js";
 const { t } = useI18n();
-// 年度报告数据
+const router = useRouter();
-const annualReports = ref([
+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 },
+    { label: "2017", value: 2017 },
+    { label: "2016", value: 2016 },
+    { label: "2015", value: 2015 },
+    { label: "2014", value: 2014 },
+    { label: "2013", value: 2013 },
+    { label: "2012", value: 2012 },
+    { label: "2011", value: 2011 },
+    { label: "2010", value: 2010 },
+    { label: "2009", value: 2009 },
+  ],
+
+  // 每页条数选项
+  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, index) => {
+    // 从 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 {
+      index: index,
+      ...item,
+      formattedDate: formattedDate, // 更新为统一的英文格式
+      year: year,
+    };
+  });
+});
+// 表格列定义
+const columns = [
   {
-    fileName: "2024 Annual Report",
+    title: "Filing Date",
-    date: "April 10, 2025",
+    key: "formattedDate",
-    downloadUrl:
+    sorter: "default",
-      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912625002538/fieeinc_10k.htm",
+    width: 150,
   },
   {
-    fileName: "2023 Annual Report",
+    title: "Form",
-    date: "April 12, 2024",
+    key: "form",
-    downloadUrl:
+    sorter: "default",
-      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912624002449/miniminc_10k.htm",
+    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",
+    title: "Description",
-    date: "March 31, 2023",
+    key: "description",
-    downloadUrl:
+    sorter: "default",
-      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000149315223010335/form10-k.htm",
+    ellipsis: {
+      tooltip: true,
+    },
   },
   {
-    fileName: "2021 Annual Report",
+    title: "View",
-    date: "March 31, 2022",
+    key: "view",
-    downloadUrl:
+    width: 150,
-      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000149315222008365/form10-k.htm",
+    render: (row) => {
-  },
+      return h(
+        "div",
         {
-    fileName: "2020 Annual Report",
+          style: {
-    date: "April 13, 2021",
+            display: "flex",
-    downloadUrl:
+            gap: "8px",
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495421004133/zmtp_10k.htm",
           },
+        },
+        [
+          h(
+            "a",
             {
-    fileName: "2019 Annual Report",
+              href: row.fileLink,
-    date: "April 15, 2020",
+              style: {
-    downloadUrl:
+                color: "#0078d7",
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495420004069/zmtp_10k.htm",
+                textDecoration: "none",
+                fontSize: "12px",
               },
-  {
+              onMouseover: (e) => {
-    fileName: "2018 Annual Report",
+                e.target.style.textDecoration = "underline";
-    date: "April 1, 2019",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495419003878/zmtp_10k.htm",
               },
-  {
+              onMouseout: (e) => {
-    fileName: "2017 Annual Report",
+                e.target.style.textDecoration = "none";
-    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",
             },
-  {
+            h("img", {
-    fileName: "2015 Annual Report",
+              src: iconLink,
-    date: "March 15, 2016",
+              alt: "link",
-    downloadUrl:
+              style: {
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448816006596/zmtp_10k.htm",
+                width: "24px",
+                height: "24px",
               },
-  {
+            })
-    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:
+const filteredData = computed(() => {
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448813001584/zmtp_10k.htm",
+  let data = state.secFilingsData;
-  },
+
-  {
+  if (state.selectedYear) {
-    fileName: "2011 Annual Report",
+    data = data.filter((item) => item.year === state.selectedYear);
-    date: "March 30, 2012",
+  }
-    downloadUrl:
+
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448812001548/zoom_10k.htm",
+  return data;
-  },
+});
-  {
+
-    fileName: "2010 Annual Report",
+// 分页数据
-    date: "March 29, 2011",
+const paginatedData = computed(() => {
-    downloadUrl:
+  const start = (state.currentPage - 1) * state.pageSize;
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448811000969/zmtp_10k.htm",
+  const end = start + state.pageSize;
-  },
+  return filteredData.value.slice(start, end);
-  {
+});
-    fileName: "2009 Annual Report",
+
-    date: "March 31, 2010",
+// 总页数
-    downloadUrl:
+const totalPages = computed(() => {
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448810001043/zmtp_10k.htm",
+  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 +321,103 @@ const annualReports = ref([
   background-size: 100% 100%;
   background-position: center;
   background-repeat: no-repeat;
-}
+  min-height: 100vh;
-.financials-container {
-  max-width: 1200px;
-  margin: 0 auto;
   padding: 20px;
 }
 
-.financials-title {
+.sec-filings-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 40px;
+}
+
+.page-title {
   font-size: 40px;
-  text-align: center;
+  font-weight: bold;
-  margin-bottom: 60px;
   color: #333;
+  margin-bottom: 40px;
 }
 
-.section {
+.filters {
-  margin-bottom: 60px;
+  display: flex;
-}
+  gap: 40px;
-
-.section-title {
-  font-size: 18px;
-  margin-bottom: 20px;
-  color: #333;
-}
-
-.overview-text {
-  font-size: 16px;
-  line-height: 1.6;
-  color: #333;
   margin-bottom: 30px;
+  align-items: end;
 }
 
-.tabs {
+.filter-group {
   display: flex;
-  margin-bottom: 20px;
+  flex-direction: column;
+  gap: 8px;
 }
 
-.tab {
+.filter-label {
-  padding: 10px 20px;
+  font-size: 18px;
-  font-weight: bold;
+  color: #333;
-  cursor: pointer;
+  font-weight: 500;
-  border-bottom: 2px solid transparent;
+}
 
-  &.active {
+.table-container {
-    border-bottom: 2px solid #333;
+  .n-data-table {
+    --n-th-color: #f5f5f5;
+    --n-th-text-color: #333;
+    --n-td-color: #fff;
+    --n-border-color: #e0e0e0;
   }
 }
 
-.reports-table {
+.pagination-container {
-  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;
+  margin-top: 20px;
-}
+  padding: 20px 0;
-.reports-list {
-  // max-height: 600px;
-  // overflow-y: auto;
-}
-.column {
-  &.file-name {
-    width: 25%;
-  }
-  &.date {
-    width: 25%;
 }
 
-  &.download {
+.pagination-info {
-    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;
+  color: #666;
 }
 
-.link {
+:deep(.n-data-table-th) {
-  color: #f00;
+  background-color: #9e9e9e !important;
-  text-decoration: none;
+  color: white !important;
+  font-weight: bold;
+  text-align: left;
+}
 
-  &:hover {
+:deep(.n-data-table-td) {
-    text-decoration: underline;
+  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;
+  }
+}
+
+:deep(.n-pagination) {
+  .n-pagination-item {
+    border: 1px solid #ccc;
+
+    &.n-pagination-item--active {
+      background-color: #969696;
+      border-color: #969696;
+      color: white;
+    }
+  }
+
+  .n-pagination-quick-jumper {
+    font-size: 16px;
+  }
+
+  .n-pagination-sizes {
+    font-size: 16px;
   }
 }
 </style>

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

@@ -1,183 +1,318 @@
 <template>
   <div class="page-container">
-    <div class="financials-container">
+    <div class="sec-filings-container">
       <!-- 标题 -->
-      <div class="financials-title">
+      <div class="page-title">SEC Filings</div>
-        {{ t("financialinformation.secfilings.title") }}
+
+      <!-- 筛选器 -->
+      <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">
-      <section class="section">
+          <label class="filter-label">Items per page:</label>
-        <div class="section-title">
+          <n-select
-          {{ t("financialinformation.secfilings.overview.title") }}
+            v-model:value="state.pageSize"
+            :options="state.pageSizeOptions"
+            style="width: 150px"
+            @update:value="handlePageSizeChange"
+          />
         </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-container">
-          <div class="table-header">
+        <n-data-table
-            <div class="column file-name">
+          :columns="columns"
-              {{
+          :data="paginatedData"
-                t("financialinformation.secfilings.annual_reports.file_name")
+          :pagination="false"
-              }}
+          :bordered="false"
-            </div>
+          :size="'medium'"
-            <div class="column date">
+          :row-key="(row) => row.index"
-              {{ t("financialinformation.secfilings.annual_reports.date") }}
+        />
-            </div>
-            <div class="column download"></div>
-          </div>
 
-          <!-- 报告列表 -->
+        <!-- 分页器 -->
-          <div class="reports-list">
+        <div class="pagination-container">
-            <div
+          <n-pagination
-              class="table-row"
+            v-model:page="state.currentPage"
-              v-for="(report, index) in annualReports"
+            v-model:page-size="state.pageSize"
-              :key="index"
+            show-size-picker
+            show-quick-jumper
+            :item-count="filteredData.length"
+            :page-sizes="[10, 25, 50]"
+            @update:page="handlePageChange"
+            @update:page-size="handlePageSizeChange"
           >
-              <div class="column file-name">{{ report.fileName }}</div>
+            <template #prev>
-              <div class="column date">{{ report.date }}</div>
+              <span>‹ Previous</span>
-              <div class="column download">
+            </template>
-                <a :href="report.downloadUrl" class="download-link">{{
+            <template #next>
-                  t("financialinformation.secfilings.annual_reports.view")
+              <span>Next ›</span>
-                }}</a>
+            </template>
-              </div>
+          </n-pagination>
-            </div>
-          </div>
-        </div>
-      </section>
 
-      <!-- SEC文件 -->
+          <div class="pagination-info">
-      <section class="section">
+            Displaying {{ startIndex }} - {{ endIndex }} of
-        <div class="section-title">
+            {{ filteredData.length }} results
-          {{ t("financialinformation.secfilings.sec.title") }}
+          </div>
+        </div>
       </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 { 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/secFiles.js";
 const { t } = useI18n();
-// 年度报告数据
+const router = useRouter();
-const annualReports = ref([
+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 },
+    { label: "2017", value: 2017 },
+    { label: "2016", value: 2016 },
+    { label: "2015", value: 2015 },
+    { label: "2014", value: 2014 },
+    { label: "2013", value: 2013 },
+    { label: "2012", value: 2012 },
+    { label: "2011", value: 2011 },
+    { label: "2010", value: 2010 },
+    { label: "2009", value: 2009 },
+  ],
+
+  // 每页条数选项
+  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, index) => {
+    // 从 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 {
+      index: index,
+      ...item,
+      formattedDate: formattedDate, // 更新为统一的英文格式
+      year: year,
+    };
+  });
+});
+// 表格列定义
+const columns = [
   {
-    fileName: "2024 Annual Report",
+    title: "Filing Date",
-    date: "April 10, 2025",
+    key: "formattedDate",
-    downloadUrl:
+    sorter: "default",
-      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912625002538/fieeinc_10k.htm",
+    width: 150,
   },
   {
-    fileName: "2023 Annual Report",
+    title: "Form",
-    date: "April 12, 2024",
+    key: "form",
-    downloadUrl:
+    sorter: "default",
-      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912624002449/miniminc_10k.htm",
+    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",
+    title: "Description",
-    date: "March 31, 2023",
+    key: "description",
-    downloadUrl:
+    sorter: "default",
-      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000149315223010335/form10-k.htm",
+    ellipsis: {
+      tooltip: true,
+    },
   },
   {
-    fileName: "2021 Annual Report",
+    title: "View",
-    date: "March 31, 2022",
+    key: "view",
-    downloadUrl:
+    width: 150,
-      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000149315222008365/form10-k.htm",
+    render: (row) => {
-  },
+      return h(
+        "div",
         {
-    fileName: "2020 Annual Report",
+          style: {
-    date: "April 13, 2021",
+            display: "flex",
-    downloadUrl:
+            gap: "8px",
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495421004133/zmtp_10k.htm",
           },
+        },
+        [
+          h(
+            "a",
             {
-    fileName: "2019 Annual Report",
+              href: row.fileLink,
-    date: "April 15, 2020",
+              style: {
-    downloadUrl:
+                color: "#0078d7",
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495420004069/zmtp_10k.htm",
+                textDecoration: "none",
+                fontSize: "12px",
               },
-  {
+              onMouseover: (e) => {
-    fileName: "2018 Annual Report",
+                e.target.style.textDecoration = "underline";
-    date: "April 1, 2019",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495419003878/zmtp_10k.htm",
               },
-  {
+              onMouseout: (e) => {
-    fileName: "2017 Annual Report",
+                e.target.style.textDecoration = "none";
-    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",
             },
-  {
+            h("img", {
-    fileName: "2015 Annual Report",
+              src: iconLink,
-    date: "March 15, 2016",
+              alt: "link",
-    downloadUrl:
+              style: {
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448816006596/zmtp_10k.htm",
+                width: "24px",
+                height: "24px",
               },
-  {
+            })
-    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:
+const filteredData = computed(() => {
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448813001584/zmtp_10k.htm",
+  let data = state.secFilingsData;
-  },
+
-  {
+  if (state.selectedYear) {
-    fileName: "2011 Annual Report",
+    data = data.filter((item) => item.year === state.selectedYear);
-    date: "March 30, 2012",
+  }
-    downloadUrl:
+
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448812001548/zoom_10k.htm",
+  return data;
-  },
+});
-  {
+
-    fileName: "2010 Annual Report",
+// 分页数据
-    date: "March 29, 2011",
+const paginatedData = computed(() => {
-    downloadUrl:
+  const start = (state.currentPage - 1) * state.pageSize;
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448811000969/zmtp_10k.htm",
+  const end = start + state.pageSize;
-  },
+  return filteredData.value.slice(start, end);
-  {
+});
-    fileName: "2009 Annual Report",
+
-    date: "March 31, 2010",
+// 总页数
-    downloadUrl:
+const totalPages = computed(() => {
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448810001043/zmtp_10k.htm",
+  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 +321,103 @@ const annualReports = ref([
   background-size: 100% 100%;
   background-position: center;
   background-repeat: no-repeat;
-}
+  min-height: 100vh;
-.financials-container {
-  max-width: 1200px;
-  margin: 0 auto;
   padding: 20px;
 }
 
-.financials-title {
+.sec-filings-container {
-  font-size: 40px;
+  max-width: 1200px;
-  text-align: center;
+  margin: 0 auto;
-  margin-bottom: 60px;
+  padding: 40px;
-  color: #333;
 }
 
-.section {
+.page-title {
-  margin-bottom: 60px;
+  font-size: 32px;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 40px;
 }
 
-.section-title {
+.filters {
-  font-size: 18px;
+  display: flex;
-  margin-bottom: 20px;
+  gap: 40px;
-  color: #333;
-}
-
-.overview-text {
-  font-size: 16px;
-  line-height: 1.6;
-  color: #333;
   margin-bottom: 30px;
+  align-items: end;
 }
 
-.tabs {
+.filter-group {
   display: flex;
-  margin-bottom: 20px;
+  flex-direction: column;
+  gap: 8px;
 }
 
-.tab {
+.filter-label {
-  padding: 10px 20px;
+  font-size: 14px;
-  font-weight: bold;
+  color: #333;
-  cursor: pointer;
+  font-weight: 500;
-  border-bottom: 2px solid transparent;
+}
 
-  &.active {
+.table-container {
-    border-bottom: 2px solid #333;
+  .n-data-table {
+    --n-th-color: #f5f5f5;
+    --n-th-text-color: #333;
+    --n-td-color: #fff;
+    --n-border-color: #e0e0e0;
   }
 }
 
-.reports-table {
+.pagination-container {
-  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;
+  margin-top: 20px;
-}
+  padding: 20px 0;
-.reports-list {
-  // max-height: 600px;
-  // overflow-y: auto;
-}
-.column {
-  &.file-name {
-    width: 25%;
-  }
-  &.date {
-    width: 25%;
 }
 
-  &.download {
+.pagination-info {
-    width: 25%;
+  font-size: 14px;
-    text-align: right;
+  color: #666;
-    margin-right: 50px;
+}
+
+: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 {
+:deep(.n-pagination) {
-  width: 36px;
+  .n-pagination-item {
-  height: 36px;
+    border: 1px solid #ccc;
-}
 
-.download-link {
+    &.n-pagination-item--active {
-  color: #0078d7;
+      background-color: #969696;
-  text-decoration: none;
+      border-color: #969696;
-
+      color: white;
-  &:hover {
-    text-decoration: underline;
     }
   }
 
-.sec-text {
+  .n-pagination-quick-jumper {
-  font-size: 16px;
+    font-size: 14px;
-  line-height: 1.6;
   }
 
-.link {
+  .n-pagination-sizes {
-  color: #f00;
+    font-size: 14px;
-  text-decoration: none;
-
-  &:hover {
-    text-decoration: underline;
   }
 }
 </style>

src/views/financialinformation/secfilings/size375/index.vue

@@ -1,301 +1,423 @@
 <template>
   <div class="page-container">
-    <div class="financials-container">
+    <div class="sec-filings-container">
       <!-- 标题 -->
-      <div class="financials-title">
+      <div class="page-title">SEC Filings</div>
-        {{ t("financialinformation.secfilings.title") }}
+
+      <!-- 筛选器 -->
+      <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">
-      <section class="section">
+          <label class="filter-label">Items per page:</label>
-        <div class="section-title">
+          <n-select
-          {{ t("financialinformation.secfilings.overview.title") }}
+            v-model:value="state.pageSize"
+            :options="state.pageSizeOptions"
+            style="width: 150px"
+            @update:value="handlePageSizeChange"
+          />
         </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-container">
-          <div class="table-header">
+        <n-data-table
-            <div class="column file-name">
+          :columns="columns"
-              {{
+          :data="paginatedData"
-                t("financialinformation.secfilings.annual_reports.file_name")
+          :pagination="false"
-              }}
+          :row-key="(row) => row.index"
-            </div>
+          :bordered="false"
-            <div class="column date">
+          :single-line="false"
-              {{ t("financialinformation.secfilings.annual_reports.date") }}
+          :scroll-x="600"
-            </div>
+        />
-            <div class="column download"></div>
-          </div>
 
-          <!-- 报告列表 -->
+        <!-- 分页器 -->
-          <div class="reports-list">
+        <div class="pagination-container mt-[40px]">
-            <div
+          <n-pagination
-              class="table-row"
+            v-model:page="state.currentPage"
-              v-for="(report, index) in annualReports"
+            v-model:page-size="state.pageSize"
-              :key="index"
+            show-size-picker
+            :item-count="filteredData.length"
+            :page-sizes="[10, 25, 50]"
+            @update:page="handlePageChange"
+            @update:page-size="handlePageSizeChange"
           >
-              <div class="column file-name">{{ report.fileName }}</div>
+            <template #prev>
-              <div class="column date">{{ report.date }}</div>
+              <span>‹</span>
-              <div class="column download">
+            </template>
-                <a :href="report.downloadUrl" class="download-link">{{
+            <template #next>
-                  t("financialinformation.secfilings.annual_reports.view")
+              <span> ›</span>
-                }}</a>
+            </template>
-              </div>
+          </n-pagination>
-            </div>
-          </div>
-        </div>
-      </section>
 
-      <!-- SEC文件 -->
+          <div class="pagination-info mt-[40px]">
-      <section class="section">
+            Displaying {{ startIndex }} - {{ endIndex }} of
-        <div class="section-title">
+            {{ filteredData.length }} results
-          {{ t("financialinformation.secfilings.sec.title") }}
+          </div>
+        </div>
       </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 { 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/secFiles.js";
 const { t } = useI18n();
+const router = useRouter();
+import iconLink from "@/assets/image/icon/icon-link.png";
+// 使用 reactive 管理所有状态
+const state = reactive({
+  selectedYear: null,
+  pageSize: 10,
+  currentPage: 1,
 
-// 年度报告数据
+  // 年份选项
-const annualReports = ref([
+  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 },
+    { label: "2017", value: 2017 },
+    { label: "2016", value: 2016 },
+    { label: "2015", value: 2015 },
+    { label: "2014", value: 2014 },
+    { label: "2013", value: 2013 },
+    { label: "2012", value: 2012 },
+    { label: "2011", value: 2011 },
+    { label: "2010", value: 2010 },
+    { label: "2009", value: 2009 },
+  ],
+
+  // 每页条数选项
+  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, index) => {
+    // 从 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 {
+      index: index,
+      ...item,
+      formattedDate: formattedDate, // 更新为统一的英文格式
+      year: year,
+    };
+  });
+});
+// 表格列定义
+const columns = [
   {
-    fileName: "2024 Annual Report",
+    title: "Filing Date",
-    date: "April 10, 2025",
+    key: "formattedDate",
-    downloadUrl:
+    sorter: "default",
-      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912625002538/fieeinc_10k.htm",
+    width: 150,
   },
   {
-    fileName: "2023 Annual Report",
+    title: "Form",
-    date: "April 12, 2024",
+    key: "form",
-    downloadUrl:
+    sorter: "default",
-      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912624002449/miniminc_10k.htm",
+    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",
+    title: "Description",
-    date: "March 31, 2023",
+    key: "description",
-    downloadUrl:
+    sorter: "default",
-      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000149315223010335/form10-k.htm",
+    ellipsis: {
+      tooltip: true,
+    },
   },
   {
-    fileName: "2021 Annual Report",
+    title: "View",
-    date: "March 31, 2022",
+    key: "view",
-    downloadUrl:
+    width: 80,
-      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000149315222008365/form10-k.htm",
+    render: (row) => {
-  },
+      return h(
+        "div",
         {
-    fileName: "2020 Annual Report",
+          style: {
-    date: "April 13, 2021",
+            display: "flex",
-    downloadUrl:
+            gap: "8px",
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495421004133/zmtp_10k.htm",
           },
+        },
+        [
+          h(
+            "a",
             {
-    fileName: "2019 Annual Report",
+              href: row.fileLink,
-    date: "April 15, 2020",
+              style: {
-    downloadUrl:
+                color: "#0078d7",
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495420004069/zmtp_10k.htm",
+                textDecoration: "none",
+                fontSize: "12px",
               },
-  {
+              onMouseover: (e) => {
-    fileName: "2018 Annual Report",
+                e.target.style.textDecoration = "underline";
-    date: "April 1, 2019",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495419003878/zmtp_10k.htm",
               },
-  {
+              onMouseout: (e) => {
-    fileName: "2017 Annual Report",
+                e.target.style.textDecoration = "none";
-    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",
             },
-  {
+            h("img", {
-    fileName: "2015 Annual Report",
+              src: iconLink,
-    date: "March 15, 2016",
+              alt: "link",
-    downloadUrl:
+              style: {
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448816006596/zmtp_10k.htm",
+                width: "24px",
+                height: "24px",
               },
-  {
+            })
-    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:
+const filteredData = computed(() => {
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448813001584/zmtp_10k.htm",
+  let data = state.secFilingsData;
-  },
+
-  {
+  if (state.selectedYear) {
-    fileName: "2011 Annual Report",
+    data = data.filter((item) => item.year === state.selectedYear);
-    date: "March 30, 2012",
+  }
-    downloadUrl:
+
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448812001548/zoom_10k.htm",
+  return data;
-  },
+});
-  {
+
-    fileName: "2010 Annual Report",
+// 分页数据
-    date: "March 29, 2011",
+const paginatedData = computed(() => {
-    downloadUrl:
+  const start = (state.currentPage - 1) * state.pageSize;
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448811000969/zmtp_10k.htm",
+  const end = start + state.pageSize;
-  },
+  return filteredData.value.slice(start, end);
-  {
+});
-    fileName: "2009 Annual Report",
+
-    date: "March 31, 2010",
+// 总页数
-    downloadUrl:
+const totalPages = computed(() => {
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448810001043/zmtp_10k.htm",
+  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">
 .page-container {
-  background-image: url("@/assets/image/bg-375.png");
+  background-image: url("@/assets/image/bg.png");
   background-size: 100% 100%;
   background-position: center;
   background-repeat: no-repeat;
+  min-height: 100vh;
+  padding: 20px;
 }
-.financials-container {
+
+.sec-filings-container {
   margin: 0 auto;
   padding: 80px;
 }
 
-.financials-title {
+.page-title {
   font-size: 113px;
-  font-weight: 600;
+  font-weight: bold;
-  text-align: center;
-  margin-bottom: 60px;
   color: #333;
+  margin-bottom: 40px;
 }
 
-.section {
+.filters {
-  margin-bottom: 60px;
+  display: flex;
-}
+  gap: 40px;
-
-.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;
+  align-items: end;
 }
 
-.tabs {
+.filter-group {
   display: flex;
-  margin-bottom: 20px;
+  flex-direction: column;
+  gap: 26px;
 }
 
-.tab {
+.filter-label {
-  padding: 10px 20px;
+  font-size: 92px;
-  font-weight: bold;
+  color: #333;
-  cursor: pointer;
+  font-weight: 500;
-  border-bottom: 2px solid transparent;
+}
 
-  &.active {
+.table-container {
-    border-bottom: 2px solid #333;
+  .n-data-table {
+    --n-th-color: #f5f5f5;
+    --n-th-text-color: #333;
+    --n-td-color: #fff;
+    --n-border-color: #e0e0e0;
   }
 }
 
-.reports-table {
+.pagination-container {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-.table-header {
   display: flex;
-  padding: 10px 0;
+  flex-wrap: wrap; // 添加这行
-  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;
+  margin-top: 60px;
-}
+  padding: 20px 0;
-.reports-list {
-  // max-height: 600px;
-  // overflow-y: auto;
-}
-.column {
-  &.file-name {
-    width: 35%;
-  }
-  &.date {
-    width: 35%;
-  }
-  &.download {
-    margin-right: 100px;
-  }
 }
 
-.pdf-icon {
+.pagination-info {
-  width: 36px;
-  height: 36px;
-}
-
-.download-link {
-  color: #0078d7;
-  text-decoration: none;
-
-  &:hover {
-    text-decoration: underline;
-  }
-}
-
-.sec-text {
   font-size: 72px;
-  line-height: 1.6;
+  color: #666;
 }
 
-.link {
+:deep(.n-data-table-th) {
-  color: #f00;
+  background-color: #9e9e9e !important;
-  text-decoration: none;
+  color: white !important;
+  font-weight: bold;
+  text-align: left;
+}
 
-  &:hover {
+:deep(.n-data-table-td) {
-    text-decoration: underline;
+  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;
+  }
+}
+
+:deep(.n-pagination) {
+  .n-pagination-item {
+    border: 1px solid #ccc;
+
+    &.n-pagination-item--active {
+      background-color: #969696;
+      border-color: #969696;
+      color: white;
+    }
+  }
+
+  .n-pagination-quick-jumper {
+    font-size: 72px;
+  }
+
+  .n-pagination-sizes {
+    font-size: 72px;
   }
 }
 </style>

src/views/financialinformation/secfilings/size768/index.vue

@@ -1,183 +1,318 @@
 <template>
   <div class="page-container">
-    <div class="financials-container">
+    <div class="sec-filings-container">
       <!-- 标题 -->
-      <div class="financials-title">
+      <div class="page-title">SEC Filings</div>
-        {{ t("financialinformation.secfilings.title") }}
+
+      <!-- 筛选器 -->
+      <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">
-      <section class="section">
+          <label class="filter-label">Items per page:</label>
-        <div class="section-title">
+          <n-select
-          {{ t("financialinformation.secfilings.overview.title") }}
+            v-model:value="state.pageSize"
+            :options="state.pageSizeOptions"
+            style="width: 150px"
+            @update:value="handlePageSizeChange"
+          />
         </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-container">
-          <div class="table-header">
+        <n-data-table
-            <div class="column file-name">
+          :columns="columns"
-              {{
+          :data="paginatedData"
-                t("financialinformation.secfilings.annual_reports.file_name")
+          :pagination="false"
-              }}
+          :bordered="false"
-            </div>
+          :size="'medium'"
-            <div class="column date">
+          :row-key="(row) => row.index"
-              {{ t("financialinformation.secfilings.annual_reports.date") }}
+        />
-            </div>
-            <div class="column download"></div>
-          </div>
 
-          <!-- 报告列表 -->
+        <!-- 分页器 -->
-          <div class="reports-list">
+        <div class="pagination-container">
-            <div
+          <n-pagination
-              class="table-row"
+            class="w-full"
-              v-for="(report, index) in annualReports"
+            v-model:page="state.currentPage"
-              :key="index"
+            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"
           >
-              <div class="column file-name">{{ report.fileName }}</div>
+            <template #prev>
-              <div class="column date">{{ report.date }}</div>
+              <span>‹ Previous</span>
-              <div class="column download">
+            </template>
-                <a :href="report.downloadUrl" class="download-link">{{
+            <template #next>
-                  t("financialinformation.secfilings.annual_reports.view")
+              <span>Next ›</span>
-                }}</a>
+            </template>
-              </div>
+          </n-pagination>
-            </div>
-          </div>
-        </div>
-      </section>
 
-      <!-- SEC文件 -->
+          <div class="pagination-info w-full mt-[20px]">
-      <section class="section">
+            Displaying {{ startIndex }} - {{ endIndex }} of
-        <div class="section-title">
+            {{ filteredData.length }} results
-          {{ t("financialinformation.secfilings.sec.title") }}
+          </div>
+        </div>
       </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 { 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/secFiles.js";
 const { t } = useI18n();
-// 年度报告数据
+const router = useRouter();
-const annualReports = ref([
+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 },
+    { label: "2017", value: 2017 },
+    { label: "2016", value: 2016 },
+    { label: "2015", value: 2015 },
+    { label: "2014", value: 2014 },
+    { label: "2013", value: 2013 },
+    { label: "2012", value: 2012 },
+    { label: "2011", value: 2011 },
+    { label: "2010", value: 2010 },
+    { label: "2009", value: 2009 },
+  ],
+
+  // 每页条数选项
+  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, index) => {
+    // 从 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 {
+      index: index,
+      ...item,
+      formattedDate: formattedDate, // 更新为统一的英文格式
+      year: year,
+    };
+  });
+});
+// 表格列定义
+const columns = [
   {
-    fileName: "2024 Annual Report",
+    title: "Filing Date",
-    date: "April 10, 2025",
+    key: "formattedDate",
-    downloadUrl:
+    sorter: "default",
-      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912625002538/fieeinc_10k.htm",
+    width: 150,
   },
   {
-    fileName: "2023 Annual Report",
+    title: "Form",
-    date: "April 12, 2024",
+    key: "form",
-    downloadUrl:
+    sorter: "default",
-      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912624002449/miniminc_10k.htm",
+    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",
+    title: "Description",
-    date: "March 31, 2023",
+    key: "description",
-    downloadUrl:
+    sorter: "default",
-      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000149315223010335/form10-k.htm",
+    ellipsis: {
+      tooltip: true,
+    },
   },
   {
-    fileName: "2021 Annual Report",
+    title: "View",
-    date: "March 31, 2022",
+    key: "view",
-    downloadUrl:
+    render: (row) => {
-      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000149315222008365/form10-k.htm",
+      return h(
-  },
+        "div",
         {
-    fileName: "2020 Annual Report",
+          style: {
-    date: "April 13, 2021",
+            display: "flex",
-    downloadUrl:
+            gap: "8px",
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495421004133/zmtp_10k.htm",
           },
+        },
+        [
+          h(
+            "a",
             {
-    fileName: "2019 Annual Report",
+              href: row.fileLink,
-    date: "April 15, 2020",
+              style: {
-    downloadUrl:
+                color: "#0078d7",
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495420004069/zmtp_10k.htm",
+                textDecoration: "none",
+                fontSize: "12px",
               },
-  {
+              onMouseover: (e) => {
-    fileName: "2018 Annual Report",
+                e.target.style.textDecoration = "underline";
-    date: "April 1, 2019",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495419003878/zmtp_10k.htm",
               },
-  {
+              onMouseout: (e) => {
-    fileName: "2017 Annual Report",
+                e.target.style.textDecoration = "none";
-    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",
             },
-  {
+            h("img", {
-    fileName: "2015 Annual Report",
+              src: iconLink,
-    date: "March 15, 2016",
+              alt: "link",
-    downloadUrl:
+              style: {
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448816006596/zmtp_10k.htm",
+                width: "24px",
+                height: "24px",
               },
-  {
+            })
-    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:
+const filteredData = computed(() => {
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448813001584/zmtp_10k.htm",
+  let data = state.secFilingsData;
-  },
+
-  {
+  if (state.selectedYear) {
-    fileName: "2011 Annual Report",
+    data = data.filter((item) => item.year === state.selectedYear);
-    date: "March 30, 2012",
+  }
-    downloadUrl:
+
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448812001548/zoom_10k.htm",
+  return data;
-  },
+});
-  {
+
-    fileName: "2010 Annual Report",
+// 分页数据
-    date: "March 29, 2011",
+const paginatedData = computed(() => {
-    downloadUrl:
+  const start = (state.currentPage - 1) * state.pageSize;
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448811000969/zmtp_10k.htm",
+  const end = start + state.pageSize;
-  },
+  return filteredData.value.slice(start, end);
-  {
+});
-    fileName: "2009 Annual Report",
+
-    date: "March 31, 2010",
+// 总页数
-    downloadUrl:
+const totalPages = computed(() => {
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448810001043/zmtp_10k.htm",
+  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 +321,104 @@ const annualReports = ref([
   background-size: 100% 100%;
   background-position: center;
   background-repeat: no-repeat;
+  min-height: 100vh;
+  padding: 20px;
 }
-.financials-container {
+
+.sec-filings-container {
   max-width: calc(100% - 300px);
   margin: 0 auto;
   padding: 20px;
 }
 
-.financials-title {
+.page-title {
   font-size: 85px;
-  text-align: center;
+  font-weight: bold;
-  margin-bottom: 60px;
   color: #333;
+  margin-bottom: 40px;
 }
 
-.section {
+.filters {
-  margin-bottom: 60px;
+  display: flex;
-}
+  gap: 40px;
-
-.section-title {
-  font-size: 50px;
-  margin-bottom: 20px;
-  color: #333;
-}
-
-.overview-text {
-  font-size: 40px;
-  line-height: 1.6;
-  color: #333;
   margin-bottom: 30px;
+  align-items: end;
 }
 
-.tabs {
+.filter-group {
   display: flex;
-  margin-bottom: 20px;
+  flex-direction: column;
+  gap: 8px;
 }
 
-.tab {
+.filter-label {
-  padding: 10px 20px;
+  font-size: 50px;
-  font-weight: bold;
+  color: #333;
-  cursor: pointer;
+  font-weight: 500;
-  border-bottom: 2px solid transparent;
+}
 
-  &.active {
+.table-container {
-    border-bottom: 2px solid #333;
+  .n-data-table {
+    --n-th-color: #f5f5f5;
+    --n-th-text-color: #333;
+    --n-td-color: #fff;
+    --n-border-color: #e0e0e0;
   }
 }
 
-.reports-table {
+.pagination-container {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-.table-header {
   display: flex;
-  padding: 10px 0;
+  flex-wrap: wrap; // 添加这行
-  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 {
+.pagination-info {
-    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;
+  color: #666;
 }
 
-.link {
+:deep(.n-data-table-th) {
-  color: #f00;
+  background-color: #9e9e9e !important;
-  text-decoration: none;
+  color: white !important;
+  font-weight: bold;
+  text-align: left;
+}
 
-  &:hover {
+:deep(.n-data-table-td) {
-    text-decoration: underline;
+  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;
+  }
+}
+
+:deep(.n-pagination) {
+  .n-pagination-item {
+    border: 1px solid #ccc;
+
+    &.n-pagination-item--active {
+      background-color: #969696;
+      border-color: #969696;
+      color: white;
+    }
+  }
+
+  .n-pagination-quick-jumper {
+    font-size: 40px;
+  }
+
+  .n-pagination-sizes {
+    font-size: 40px;
   }
 }
 </style>

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>

src/views/financialinformation/secfilingsdetail/size1440/index.vue

@@ -0,0 +1,201 @@
+<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/secFiles.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.formDescription,
+      htmlLink: file.fileLink || "#",
+      dataFiles: file.dataFiles || [],
+      company: "FiEE, Inc. ",
+      issuer: "FiEE, Inc. ",
+    };
+  }
+  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;
+  padding: 40px;
+}
+
+.page-title {
+  font-size: 40px;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 40px;
+}
+
+.section {
+  margin-bottom: 40px;
+}
+
+.section-title {
+  font-size: 18px;
+  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>

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

@@ -0,0 +1,201 @@
+<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/secFiles.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.formDescription,
+      htmlLink: file.fileLink || "#",
+      dataFiles: file.dataFiles || [],
+      company: "FiEE, Inc. ",
+      issuer: "FiEE, Inc. ",
+    };
+  }
+  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;
+  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>

src/views/financialinformation/secfilingsdetail/size375/index.vue

@@ -0,0 +1,200 @@
+<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/secFiles.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.formDescription,
+      htmlLink: file.fileLink || "#",
+      dataFiles: file.dataFiles || [],
+      company: "FiEE, Inc. ",
+      issuer: "FiEE, Inc. ",
+    };
+  }
+  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 {
+  margin: 0 auto;
+  padding: 80px;
+}
+
+.page-title {
+  font-size: 113px;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 40px;
+}
+
+.section {
+  margin-bottom: 40px;
+}
+
+.section-title {
+  font-size: 92px;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 20px;
+}
+
+.details-grid {
+  display: grid;
+  gap: 30px;
+}
+
+.detail-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 40px;
+}
+
+.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: 40px;
+}
+
+.format-item {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.format-icon {
+  width: 96px;
+  height: 96px;
+}
+
+.format-link {
+  color: #0078d7;
+  text-decoration: underline;
+  font-size: 72px;
+
+  &:hover {
+    text-decoration: none;
+  }
+}
+</style>

src/views/financialinformation/secfilingsdetail/size768/index.vue

@@ -0,0 +1,201 @@
+<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/secFiles.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.formDescription,
+      htmlLink: file.fileLink || "#",
+      dataFiles: file.dataFiles || [],
+      company: "FiEE, Inc. ",
+      issuer: "FiEE, Inc. ",
+    };
+  }
+  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: calc(100% - 300px);
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.page-title {
+  font-size: 85px;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 40px;
+}
+
+.section {
+  margin-bottom: 40px;
+}
+
+.section-title {
+  font-size: 50px;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 20px;
+}
+
+.details-grid {
+  display: grid;
+  gap: 25px;
+}
+
+.detail-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 20px;
+}
+
+.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: 20px;
+}
+
+.format-item {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.format-icon {
+  width: 68px;
+  height: 68px;
+}
+
+.format-link {
+  color: #0078d7;
+  text-decoration: underline;
+  font-size: 40px;
+
+  &:hover {
+    text-decoration: none;
+  }
+}
+</style>

src/views/footerLinks/cookiesSettings/index.vue

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

src/views/footerLinks/cookiesSettings/size1920/index.vue

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

src/views/footerLinks/cookiesSettings/size375/index.vue

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

src/views/footerLinks/privacyPolicy/index.vue

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

src/views/footerLinks/privacyPolicy/size1920/index.vue

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

src/views/footerLinks/privacyPolicy/size375/index.vue

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

src/views/footerLinks/siteMap/index.vue

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

src/views/footerLinks/siteMap/size1920/index.vue

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

src/views/footerLinks/siteMap/size375/index.vue

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

src/views/footerLinks/termsOfUse/index.vue

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

src/views/footerLinks/termsOfUse/size1920/index.vue

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

src/views/footerLinks/termsOfUse/size375/index.vue

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

src/views/govern/size1920/index.vue

@@ -39,6 +39,7 @@
             <h1 style="font-size: 18px" class="">
               {{ item.title }}
             </h1>
+            <text> {{ item.date }}</text>
           </div>
         </div>
         <div class="mt-auto">
@@ -86,28 +87,28 @@ const state = reactive({
       description:
         "Defines the purpose, composition, and responsibilities of the Audit Committee in overseeing financial reporting and disclosure.",
       url: quarterlyPdfone,
-      date: "Last updated: March 2025",
+      date: "May 30, 2025",
     },
     {
       title: "CODE OF BUSINESS CONDUCT AND ETHICS",
       description:
         "Establishes the ethical standards and legal compliance expectations for all directors, officers and employees.",
       url: quarterlyPdftwo,
-      date: "Last updated: January 2025",
+      date: "May 30, 2025",
     },
     {
       title: "COMPENSATION COMMITTEE CHARTER",
       description:
         "Outlines the duties and responsibilities for overseeing executive compensation and benefit plans.",
       url: quarterlyPdfthree,
-      date: "Last updated: February 2025",
+      date: "May 30, 2025",
     },
     {
       title: "NOMINATING AND CORPORATE GOVERNANCE COMMITTEE CHARTER",
       description:
         "Provides the framework for director nominations and corporate governance matters.",
       url: quarterlyPdffour,
-      date: "Last updated: April 2025",
+      date: "May 30, 2025",
     },
   ],
 });

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

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