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

src/components/customFooter/size1920/index.vue

@@ -6,7 +6,6 @@
       <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>
@@ -14,14 +13,22 @@
 </template>
 
 <script setup>
-import { useRouter } from 'vue-router'
+import { useRouter } from "vue-router";
-const router = useRouter()
+const router = useRouter();
+import privacyPolicy from "@/assets/file/footer/FiEE, Inc. _ Privacy policy.pdf";
+import termsOfUse from "@/assets/file/footer/FiEE, Inc. _ Terms of Use.pdf";
+import siteMap from "@/assets/file/footer/FiEE, Inc. _ Site Map.pdf";
 
 //点击跳转到对应的链接页面
 const handleLink = (link) => {
-  console.log(link)
+  if (link === "privacyPolicy") {
-  router.push(link)
+    window.open(privacyPolicy, "_blank");
-}
+  } else if (link === "termsOfUse") {
+    window.open(termsOfUse, "_blank");
+  } else if (link === "siteMap") {
+    window.open(siteMap, "_blank");
+  }
+};
 </script>
 
 <style scoped lang="scss">

src/components/customFooter/size375/index.vue

@@ -6,9 +6,6 @@
       <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>
@@ -16,13 +13,23 @@
 </template>
 
 <script setup>
-import { useRouter } from 'vue-router'
+import { useRouter } from "vue-router";
-const router = useRouter()
+const router = useRouter();
+
+import privacyPolicy from "@/assets/file/footer/FiEE, Inc. _ Privacy policy.pdf";
+import termsOfUse from "@/assets/file/footer/FiEE, Inc. _ Terms of Use.pdf";
+import siteMap from "@/assets/file/footer/FiEE, Inc. _ Site Map.pdf";
 
 //点击跳转到对应的链接页面
 const handleLink = (link) => {
-  router.push(link)
+  if (link === "privacyPolicy") {
-}
+    window.open(privacyPolicy, "_blank");
+  } else if (link === "termsOfUse") {
+    window.open(termsOfUse, "_blank");
+  } else if (link === "siteMap") {
+    window.open(siteMap, "_blank");
+  }
+};
 </script>
 
 <style scoped lang="scss">
@@ -50,7 +57,6 @@ const handleLink = (link) => {
         padding: 0 0.8rem;
         cursor: pointer;
         font-size: 0.75rem;
-        min-width: 8.5rem;
         display: inline-block;
         text-align: left;
       }

src/components/customFooter/size768/index.vue

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

src/config/headerMenuConfig.js

@@ -59,9 +59,9 @@ export const useHeaderMenuConfig = () => {
           href: "/annualreports",
         },
         {
-          label: t("header_menu.financial_information.quarterly_results"),
+          label: t("header_menu.financial_information.quarterly_reports"),
-          key: "quarterly_results",
+          key: "quarterly_reports",
-          href: "/quarterlyresults",
+          href: "/quarterlyreports",
         },
       ],
     },
@@ -79,11 +79,11 @@ export const useHeaderMenuConfig = () => {
           key: "historic_stock_price",
           href:'/historic-stock'
         },
-        {
+        // {
-          label: t("header_menu.stock_information.investment_calculator"),
+        //   label: t("header_menu.stock_information.investment_calculator"),
-          key: "investment_calculator",
+        //   key: "investment_calculator",
-          href:'/calculator'
+        //   href:'/calculator'
-        },
+        // },
       ],
     },
     {

src/dict/secTestData.js

@@ -1,15 +0,0 @@
-export const fileList = [
-    {
-        filingDate: '2016-05-29',
-        form: '10-K',
-        description: 'Report of foreign issuer rules 13a-16 and 15d-16 of the Securities Exchange Act',
-        link: 'https://www.sec.gov/Archives/edgar/data/1000000/0001000000-19-000001.txt',
-        dataFiles:[
-            {
-                description: 'Report of foreign',
-                link: 'https://www.sec.gov/Archives/edgar/data/1000000/0001000000-19-000001.txt',
-            }
-        ]
-    },
-   
-]

src/locales/en.js

@@ -488,7 +488,7 @@ export default {
       title: "Financials",
       overview: {
         title: "Company Financial Overview",
-        desc: "This page offers access to our <strong>Annual Reports</strong> and <strong>SEC Filings</strong>. These sections provide key financial data and regulatory documents, keeping you informed about our financial performance and compliance.",
+        desc: "This page offers access to our <strong>Annual Reports</strong>. These sections provide key financial data and regulatory documents, keeping you informed about our financial performance and compliance.",
       },
       annual_reports: {
         title: "Annual Reports",
@@ -502,8 +502,8 @@ export default {
         click_here: "click here",
       },
     },
-    quarterlyresults: {
+    quarterlyreports: {
-      title: "Quarterly Results",
+      title: "Quarterly Reports",
       search: {
         placeholder: "Search",
         button: "Go",
@@ -526,7 +526,7 @@ export default {
       title: "Financial Information",
       sec_filings: "SEC Filings",
       annual_reports: "Annual Reports",
-      quarterly_results: "Quarterly Results",
+      quarterly_reports: "Quarterly Reports",
     },
     stock_information: {
       title: "Stock Information",
@@ -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,7 +710,7 @@ export default {
       TITLE: "Wai Chung Li",
       TITLETWO: "Chief Executive Officer",
       CONTENT:
-        "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.",
+        "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. Mr. Li has previously held key positions in investment management, business consulting, and directorial roles in publicly listed companies.",
       CONTENTTHREE: "",
@@ -719,7 +719,7 @@ export default {
       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 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

@@ -48,10 +48,10 @@ const routes = [
         component: () => import("@/views/email-alerts/index.vue"),
       },
       {
-        path: "/quarterlyresults",
+        path: "/quarterlyreports",
-        name: "QuarterlyResults",
+        name: "quarterlyreports",
         component: () =>
-          import("@/views/financialinformation/quarterlyresults/index.vue"),
+          import("@/views/financialinformation/quarterlyreports/index.vue"),
       },
       {
         path: "/secfilings",
@@ -76,6 +76,11 @@ const routes = [
         name: "press-releases",
         component: () => import("@/views/press-releases/index.vue"),
       },
+      {
+        path: "/news",
+        name: "news",
+        component: () => import("@/views/news/index.vue"),
+      },
       {
         path: "/events-calendar",
         name: "events-calendar",

src/views/CommitteeAppointment/size1440/index.vue

@@ -52,9 +52,13 @@
               <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',
+                  }"
                 >
                   {{ getCommitteeRole(director.name, "Audit") }}
                 </div>
@@ -67,12 +71,15 @@
               <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',
+                  }"
                 >
                   {{ getCommitteeRole(director.name, "Compensation") }}
                 </div>
@@ -85,9 +92,14 @@
               <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',
+                  }"
                 >
                   {{ getCommitteeRole(director.name, "Governance") }}
                 </div>
@@ -102,11 +114,11 @@
 
 <script setup>
 const otherDirectors = [
-  {
+  // {
-    name: "Cao Yu",
+  //   name: "Cao Yu",
-    title: "Chief Financial Officer, Secretary, Treasurer and Director",
+  //   title: "Chief Financial Officer, Secretary, Treasurer and Director",
-  },
+  // },
-  { name: "David Lazar", title: "Director" },
+  // { name: "David Lazar", title: "Director" },
   { name: "Hu Bin", title: "Director" },
   { name: "David Natan", title: "Director" },
   { name: "Chan Oi Fat", title: "Director" },
@@ -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

@@ -50,9 +50,13 @@
               <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',
+                  }"
                 >
                   {{ getCommitteeRole(director.name, "Audit") }}
                 </div>
@@ -65,12 +69,15 @@
               <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',
+                  }"
                 >
                   {{ getCommitteeRole(director.name, "Compensation") }}
                 </div>
@@ -83,9 +90,14 @@
               <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',
+                  }"
                 >
                   {{ getCommitteeRole(director.name, "Governance") }}
                 </div>
@@ -100,11 +112,11 @@
 
 <script setup>
 const otherDirectors = [
-  {
+  // {
-    name: "Cao Yu",
+  //   name: "Cao Yu",
-    title: "Chief Financial Officer, Secretary, Treasurer and Director",
+  //   title: "Chief Financial Officer, Secretary, Treasurer and Director",
-  },
+  // },
-  { name: "David Lazar", title: "Director" },
+  // { name: "David Lazar", title: "Director" },
   { name: "Hu Bin", title: "Director" },
   { name: "David Natan", title: "Director" },
   { name: "Chan Oi Fat", title: "Director" },
@@ -138,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

@@ -67,11 +67,11 @@ import { ref, computed } from "vue";
 
 // 董事会成员数据
 const otherDirectors = [
-  {
+  // {
-    name: "Cao Yu",
+  //   name: "Cao Yu",
-    title: "Chief Financial Officer, Secretary, Treasurer and Director",
+  //   title: "Chief Financial Officer, Secretary, Treasurer and Director",
-  },
+  // },
-  { name: "David Lazar", title: "Director" },
+  // { name: "David Lazar", title: "Director" },
   { name: "Hu Bin", title: "Director" },
   { name: "David Natan", title: "Director" },
   { name: "Chan Oi Fat", title: "Director" },

src/views/CommitteeAppointment/size768/index.vue

@@ -67,11 +67,11 @@ import { ref, computed } from "vue";
 
 // 董事会成员数据
 const otherDirectors = [
-  {
+  // {
-    name: "Cao Yu",
+  //   name: "Cao Yu",
-    title: "Chief Financial Officer, Secretary, Treasurer and Director",
+  //   title: "Chief Financial Officer, Secretary, Treasurer and Director",
-  },
+  // },
-  { name: "David Lazar", title: "Director" },
+  // { name: "David Lazar", title: "Director" },
   { name: "Hu Bin", title: "Director" },
   { name: "David Natan", title: "Director" },
   { name: "Chan Oi Fat", title: "Director" },

src/views/boarddirectors/size1440/index.vue

@@ -10,10 +10,14 @@
           :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> -->
+          <n-p class="director-bio">{{ director.contain }}</n-p>
         </div>
       </div>
     </div>
@@ -22,24 +26,25 @@
 
 <script setup>
 const otherDirectors = [
+  {
+    name: "Hu Bin",
+    title: "Chairman of the Board of Directors",
+    contain:
+      "Served as a director of DC International Service Trade GmbH since December 2024. Prior to that, Mr. Hu worked as a freelancer in the tourism industry from April 2001 to October 2024. From April 1994 to October 2000, he served as the general manager of Suzhou Wintime Advertising Co., Ltd. Before that, he served as the general manager of Suzhou Bauhaus Advertising Design Co., Ltd. from August 1992 to April 1994, where he was engaged 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",
     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.",
+      "Previously served as the treasury director of Taifeng Cultural Communication Co., Ltd where she oversees 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.",
   },
   {
     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.",
+      "Currently serves as President and Chief Executive Officer of Natan & Associates, LLC, a consulting firm offering chief financial officer services to public and private companies in a variety of industries, since 2007. Mr. Natan previously served as a Director of the Company from November 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 as Executive 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 analysis instruments 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 the following public companies: Global Technovations, Forcefield Energy, Titan Pharmaceuticals (Nasdaq: TTNP), Vivakor Inc. (Nasdaq: VIVK), NetBrands Corp. (OTC: NBND), and OpGen Inc. (OTC: OPGN), and Cyclacel Pharmaceuticals (Nasdaq: CYCC). Mr. Natan holds a B.A. in Economics from Boston University.",
-  },
-  {
-    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",
@@ -50,7 +55,7 @@ const otherDirectors = [
     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).",
+      "Served as Vice President – Finance of SML Group Corporation since March 2018 and as Company Secretary of China Leon Inspection Holding Limited (HKEX: 1586) since February 2018 and of Raily Aesthetic Medicine International Holdings Limited (HKEX: 2135) since November 2020. He is an independent non-executive director of Huajin International Holdings Limited (HKEX: 2738) (since March 2025) and UBoT Holding Limited (HKEX GEM: 8529) (since May 2024) and previously served as an independent non-executive director of China Saftower International Holding Group Limited (HKEX GEM: 8623) from June 2020 to December 2023 and Shanghai Prime Machinery Company Limited (HKEX: 2345) from June 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 the Association of Chartered Certified Accountants (since 2003) and the Hong Kong Institute of Certified Public Accountants (since 2004).",
   },
 ];
 </script>

src/views/boarddirectors/size1920/index.vue

@@ -13,7 +13,7 @@
           <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> -->
+          <n-p class="director-bio">{{ director.contain }}</n-p>
         </div>
       </div>
     </div>
@@ -22,24 +22,25 @@
 
 <script setup>
 const otherDirectors = [
+  {
+    name: "Hu Bin",
+    title: "Chairman of the Board of Directors",
+    contain:
+      "Served as a director of DC International Service Trade GmbH since December 2024. Prior to that, Mr. Hu worked as a freelancer in the tourism industry from April 2001 to October 2024. From April 1994 to October 2000, he served as the general manager of Suzhou Wintime Advertising Co., Ltd. Before that, he served as the general manager of Suzhou Bauhaus Advertising Design Co., Ltd. from August 1992 to April 1994, where he was engaged 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",
     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.",
+      "Previously served as the treasury director of Taifeng Cultural Communication Co., Ltd where she oversees 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.",
   },
   {
     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.",
+      "Currently serves as President and Chief Executive Officer of Natan & Associates, LLC, a consulting firm offering chief financial officer services to public and private companies in a variety of industries, since 2007. Mr. Natan previously served as a Director of the Company from November 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 as Executive 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 analysis instruments 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 the following public companies: Global Technovations, Forcefield Energy, Titan Pharmaceuticals (Nasdaq: TTNP), Vivakor Inc. (Nasdaq: VIVK), NetBrands Corp. (OTC: NBND), and OpGen Inc. (OTC: OPGN), and Cyclacel Pharmaceuticals (Nasdaq: CYCC). Mr. Natan holds a B.A. in Economics from Boston University.",
-  },
-  {
-    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",
@@ -50,7 +51,7 @@ const otherDirectors = [
     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).",
+      "Served as Vice President – Finance of SML Group Corporation since March 2018 and as Company Secretary of China Leon Inspection Holding Limited (HKEX: 1586) since February 2018 and of Raily Aesthetic Medicine International Holdings Limited (HKEX: 2135) since November 2020. He is an independent non-executive director of Huajin International Holdings Limited (HKEX: 2738) (since March 2025) and UBoT Holding Limited (HKEX GEM: 8529) (since May 2024) and previously served as an independent non-executive director of China Saftower International Holding Group Limited (HKEX GEM: 8623) from June 2020 to December 2023 and Shanghai Prime Machinery Company Limited (HKEX: 2345) from June 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 the Association of Chartered Certified Accountants (since 2003) and the Hong Kong Institute of Certified Public Accountants (since 2004).",
   },
 ];
 </script>

src/views/boarddirectors/size375/index.vue

@@ -13,7 +13,7 @@
           <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> -->
+          <n-p class="director-bio">{{ director.contain }}</n-p>
         </div>
       </div>
     </div>
@@ -22,24 +22,25 @@
 
 <script setup>
 const otherDirectors = [
+  {
+    name: "Hu Bin",
+    title: "Chairman of the Board of Directors",
+    contain:
+      "Served as a director of DC International Service Trade GmbH since December 2024. Prior to that, Mr. Hu worked as a freelancer in the tourism industry from April 2001 to October 2024. From April 1994 to October 2000, he served as the general manager of Suzhou Wintime Advertising Co., Ltd. Before that, he served as the general manager of Suzhou Bauhaus Advertising Design Co., Ltd. from August 1992 to April 1994, where he was engaged 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",
     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.",
+      "Previously served as the treasury director of Taifeng Cultural Communication Co., Ltd where she oversees 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.",
   },
   {
     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.",
+      "Currently serves as President and Chief Executive Officer of Natan & Associates, LLC, a consulting firm offering chief financial officer services to public and private companies in a variety of industries, since 2007. Mr. Natan previously served as a Director of the Company from November 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 as Executive 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 analysis instruments 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 the following public companies: Global Technovations, Forcefield Energy, Titan Pharmaceuticals (Nasdaq: TTNP), Vivakor Inc. (Nasdaq: VIVK), NetBrands Corp. (OTC: NBND), and OpGen Inc. (OTC: OPGN), and Cyclacel Pharmaceuticals (Nasdaq: CYCC). Mr. Natan holds a B.A. in Economics from Boston University.",
-  },
-  {
-    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",
@@ -50,7 +51,7 @@ const otherDirectors = [
     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).",
+      "Served as Vice President – Finance of SML Group Corporation since March 2018 and as Company Secretary of China Leon Inspection Holding Limited (HKEX: 1586) since February 2018 and of Raily Aesthetic Medicine International Holdings Limited (HKEX: 2135) since November 2020. He is an independent non-executive director of Huajin International Holdings Limited (HKEX: 2738) (since March 2025) and UBoT Holding Limited (HKEX GEM: 8529) (since May 2024) and previously served as an independent non-executive director of China Saftower International Holding Group Limited (HKEX GEM: 8623) from June 2020 to December 2023 and Shanghai Prime Machinery Company Limited (HKEX: 2345) from June 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 the Association of Chartered Certified Accountants (since 2003) and the Hong Kong Institute of Certified Public Accountants (since 2004).",
   },
 ];
 </script>

src/views/boarddirectors/size768/index.vue

@@ -1,139 +1,7 @@
 <template>
   <div class="home-page">
     <div class="directors-page">
-      <template>
+      <h1 class="page-title">Board of Directors</h1>
-        <div class="home-page">
-          <div class="directors-page">
-            <h1 class="page-title">Board of Directors</h1>
-            <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>
-        .home-page {
-          background-image: url("@/assets/image/bg.png");
-          background-size: 100% 100%;
-          background-position: center;
-          background-repeat: no-repeat;
-        }
-        .directors-page {
-          max-width: 900px;
-          margin: 0 auto;
-          padding: 60px 24px;
-        }
-
-        .page-title {
-          font-size: 2.5rem; /* 18px */
-          margin-bottom: 30px;
-          color: #333;
-        }
-
-        .directors-list {
-          display: flex;
-          flex-direction: column;
-          gap: 48px;
-          margin-top: 40px;
-        }
-
-        .director-item {
-          padding-bottom: 48px;
-          border-bottom: 1px solid #f0f0f0;
-        }
-
-        .director-item:last-child {
-          border-bottom: none;
-          padding-bottom: 0;
-        }
-
-        .director-name {
-          margin-bottom: 8px;
-          font-size: 28px;
-          font-weight: 500;
-          color: #1a1a1a;
-        }
-
-        .director-title {
-          font-size: 18px;
-          color: #666;
-          display: block;
-          margin-bottom: 24px;
-        }
-
-        .divider {
-          margin: 16px 0;
-          background-color: #f0f0f0;
-        }
-
-        .director-bio {
-          line-height: 1.8;
-          color: #4a4a4a;
-          font-size: 16px;
-        }
-
-        @media (min-width: 768px) {
-          .directors-page {
-            padding: 80px 40px;
-          }
-
-          .director-name {
-            font-size: 32px;
-          }
-
-          .director-title {
-            font-size: 20px;
-          }
-        }
-      </style>
-
       <n-divider />
 
       <div class="directors-list">
@@ -142,10 +10,14 @@
           :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> -->
+          <n-p class="director-bio">{{ director.contain }}</n-p>
         </div>
       </div>
     </div>
@@ -154,24 +26,25 @@
 
 <script setup>
 const otherDirectors = [
+  {
+    name: "Hu Bin",
+    title: "Chairman of the Board of Directors",
+    contain:
+      "Served as a director of DC International Service Trade GmbH since December 2024. Prior to that, Mr. Hu worked as a freelancer in the tourism industry from April 2001 to October 2024. From April 1994 to October 2000, he served as the general manager of Suzhou Wintime Advertising Co., Ltd. Before that, he served as the general manager of Suzhou Bauhaus Advertising Design Co., Ltd. from August 1992 to April 1994, where he was engaged 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",
     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.",
+      "Previously served as the treasury director of Taifeng Cultural Communication Co., Ltd where she oversees 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.",
   },
   {
     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.",
+      "Currently serves as President and Chief Executive Officer of Natan & Associates, LLC, a consulting firm offering chief financial officer services to public and private companies in a variety of industries, since 2007. Mr. Natan previously served as a Director of the Company from November 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 as Executive 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 analysis instruments 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 the following public companies: Global Technovations, Forcefield Energy, Titan Pharmaceuticals (Nasdaq: TTNP), Vivakor Inc. (Nasdaq: VIVK), NetBrands Corp. (OTC: NBND), and OpGen Inc. (OTC: OPGN), and Cyclacel Pharmaceuticals (Nasdaq: CYCC). Mr. Natan holds a B.A. in Economics from Boston University.",
-  },
-  {
-    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",
@@ -182,50 +55,40 @@ const otherDirectors = [
     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).",
+      "Served as Vice President – Finance of SML Group Corporation since March 2018 and as Company Secretary of China Leon Inspection Holding Limited (HKEX: 1586) since February 2018 and of Raily Aesthetic Medicine International Holdings Limited (HKEX: 2135) since November 2020. He is an independent non-executive director of Huajin International Holdings Limited (HKEX: 2738) (since March 2025) and UBoT Holding Limited (HKEX GEM: 8529) (since May 2024) and previously served as an independent non-executive director of China Saftower International Holding Group Limited (HKEX GEM: 8623) from June 2020 to December 2023 and Shanghai Prime Machinery Company Limited (HKEX: 2345) from June 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 the Association 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-image: url("@/assets/image/bg.png");
-  background-size: cover;
+  background-size: 100% 100%;
   background-position: center;
   background-repeat: no-repeat;
 }
-
 .directors-page {
-  max-width: 1200px;
+  max-width: 900px;
   margin: 0 auto;
-  padding: clamp(2rem, 5vw, 4rem)
+  padding: 60px 24px;
-    clamp(var(--mobile-padding), 4vw, var(--tablet-padding));
 }
 
 .page-title {
-  font-size: clamp(1.75rem, 4vw, 2.5rem);
+  font-size: 2.5rem; /* 18px */
-  margin-bottom: clamp(1.5rem, 3vw, 2rem);
+  margin-bottom: 30px;
-  color: var(--primary-color);
+  color: #333;
 }
 
 .directors-list {
   display: flex;
   flex-direction: column;
-  gap: clamp(2rem, 4vw, 3rem);
+  gap: 48px;
-  margin-top: clamp(1.5rem, 3vw, 2.5rem);
+  margin-top: 40px;
 }
 
 .director-item {
-  padding-bottom: clamp(2rem, 4vw, 3rem);
+  padding-bottom: 48px;
-  border-bottom: 1px solid var(--divider-color);
+  border-bottom: 1px solid #f0f0f0;
 }
 
 .director-item:last-child {
@@ -234,43 +97,41 @@ const otherDirectors = [
 }
 
 .director-name {
-  margin-bottom: clamp(0.5rem, 1vw, 0.75rem);
+  margin-bottom: 8px;
-  font-size: clamp(1.25rem, 3vw, 1.75rem);
+  font-size: 28px;
   font-weight: 500;
-  color: var(--primary-color);
+  color: #1a1a1a;
 }
 
 .director-title {
-  font-size: clamp(1rem, 2vw, 1.25rem);
+  font-size: 18px;
-  color: var(--secondary-color);
+  color: #666;
   display: block;
-  margin-bottom: clamp(1rem, 2vw, 1.5rem);
+  margin-bottom: 24px;
-  line-height: 1.5;
 }
 
 .divider {
-  margin: clamp(1rem, 2vw, 1.5rem) 0;
+  margin: 16px 0;
-  background-color: var(--divider-color);
+  background-color: #f0f0f0;
 }
 
 .director-bio {
   line-height: 1.8;
   color: #4a4a4a;
-  font-size: clamp(0.9rem, 1.8vw, 1rem);
+  font-size: 16px;
 }
 
-/* 针对超小屏幕的优化 */
+@media (min-width: 768px) {
-@media (max-width: 375px) {
   .directors-page {
-    padding: clamp(1.5rem, 5vw, 2rem) clamp(12px, 4vw, 16px);
+    padding: 80px 40px;
   }
 
   .director-name {
-    font-size: 1.25rem;
+    font-size: 32px;
   }
 
   .director-title {
-    font-size: 1rem;
+    font-size: 20px;
   }
 }
 </style>

src/views/email-alerts/size1440/index.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { ref } from "vue";
-
+import axios from 'axios'
 const form = ref({
   firstName: "",
   lastName: "",
@@ -11,9 +11,15 @@ const form = ref({
 });
 const submitted = ref(false);
 
-function handleSubmit(e) {
+async function handleSubmit(e) {
   e.preventDefault();
-  submitted.value = true;
+  const res = await axios.post('https://erpapi-out.szjixun.cn/api/stock/submit/data', form.value)
+  if(res.data.status === 0){
+    submitted.value = true;
+  }else{
+ 
+  }
+
 }
 </script>
 

src/views/email-alerts/size1920/index.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { ref } from "vue";
 
+import axios from 'axios'
 const form = ref({
   firstName: "",
   lastName: "",
@@ -11,9 +12,15 @@ alertType: "all"
 });
 const submitted = ref(false);
 
-function handleSubmit(e) {
+async function handleSubmit(e) {
   e.preventDefault();
-  submitted.value = true;
+  const res = await axios.post('https://erpapi-out.szjixun.cn/api/stock/submit/data', form.value)
+  if(res.data.status === 0){
+    submitted.value = true;
+  }else{
+ 
+  }
+
 }
 </script>
 

src/views/email-alerts/size375/index.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { ref } from 'vue';
-
+import axios from 'axios'
 const form = ref({
   firstName: '',
   lastName: '',
@@ -11,9 +11,15 @@ const form = ref({
 });
 const submitted = ref(false);
 
-function handleSubmit(e) {
+async function handleSubmit(e) {
   e.preventDefault();
-  submitted.value = true;
+  const res = await axios.post('https://erpapi-out.szjixun.cn/api/stock/submit/data', form.value)
+  if(res.data.status === 0){
+    submitted.value = true;
+  }else{
+ 
+  }
+
 }
 </script>
 

src/views/email-alerts/size768/index.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { NCarousel, NDivider, NMarquee, NPopselect } from "naive-ui";
 import { onUnmounted, ref, watch, onMounted, computed } from "vue";
-
+import axios from 'axios'
 const form = ref({
   firstName: '',
   lastName: '',
@@ -12,9 +12,15 @@ const form = ref({
 });
 const submitted = ref(false);
 
-function handleSubmit(e) {
+async function handleSubmit(e) {
   e.preventDefault();
-  submitted.value = true;
+  const res = await axios.post('https://erpapi-out.szjixun.cn/api/stock/submit/data', form.value)
+  if(res.data.status === 0){
+    submitted.value = true;
+  }else{
+ 
+  }
+
 }
 </script>
 

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

@@ -55,21 +55,6 @@
           </div>
         </div>
       </section>
-
-      <!-- SEC文件 -->
-      <section class="section">
-        <div class="section-title">
-          {{ t("financialinformation.secfilings.sec.title") }}
-        </div>
-        <p class="sec-text">
-          {{ t("financialinformation.secfilings.sec.desc") }}
-          <a
-            href="https://www.sec.gov/cgi-bin/browse-edgar?company=FiEE&match=starts-with&filenum=&State=&Country=&SIC=&myowner=exclude&action=getcompany"
-            class="link"
-            >{{ t("financialinformation.secfilings.sec.click_here") }}</a
-          >.
-        </p>
-      </section>
     </div>
   </div>
 </template>

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

@@ -55,21 +55,6 @@
           </div>
         </div>
       </section>
-
-      <!-- SEC文件 -->
-      <section class="section">
-        <div class="section-title">
-          {{ t("financialinformation.secfilings.sec.title") }}
-        </div>
-        <p class="sec-text">
-          {{ t("financialinformation.secfilings.sec.desc") }}
-          <a
-            href="https://www.sec.gov/cgi-bin/browse-edgar?company=FiEE&match=starts-with&filenum=&State=&Country=&SIC=&myowner=exclude&action=getcompany"
-            class="link"
-            >{{ t("financialinformation.secfilings.sec.click_here") }}</a
-          >.
-        </p>
-      </section>
     </div>
   </div>
 </template>

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

@@ -55,21 +55,6 @@
           </div>
         </div>
       </section>
-
-      <!-- SEC文件 -->
-      <section class="section">
-        <div class="section-title">
-          {{ t("financialinformation.secfilings.sec.title") }}
-        </div>
-        <p class="sec-text">
-          {{ t("financialinformation.secfilings.sec.desc") }}
-          <a
-            href="https://www.sec.gov/cgi-bin/browse-edgar?company=FiEE&match=starts-with&filenum=&State=&Country=&SIC=&myowner=exclude&action=getcompany"
-            class="link"
-            >{{ t("financialinformation.secfilings.sec.click_here") }}</a
-          >.
-        </p>
-      </section>
     </div>
   </div>
 </template>

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

@@ -55,21 +55,6 @@
           </div>
         </div>
       </section>
-
-      <!-- SEC文件 -->
-      <section class="section">
-        <div class="section-title">
-          {{ t("financialinformation.secfilings.sec.title") }}
-        </div>
-        <p class="sec-text">
-          {{ t("financialinformation.secfilings.sec.desc") }}
-          <a
-            href="https://www.sec.gov/cgi-bin/browse-edgar?company=FiEE&match=starts-with&filenum=&State=&Country=&SIC=&myowner=exclude&action=getcompany"
-            class="link"
-            >{{ t("financialinformation.secfilings.sec.click_here") }}</a
-          >.
-        </p>
-      </section>
     </div>
   </div>
 </template>

src/views/financialinformation/quarterlyreports/index.vue

@@ -2,10 +2,10 @@
 import { computed } from "vue";
 import { useWindowSize } from "@vueuse/core";
 
-import size375 from "@/views/financialinformation/quarterlyresults/size375/index.vue";
+import size375 from "@/views/financialinformation/quarterlyreports/size375/index.vue";
-import size768 from "@/views/financialinformation/quarterlyresults/size768/index.vue";
+import size768 from "@/views/financialinformation/quarterlyreports/size768/index.vue";
-import size1440 from "@/views/financialinformation/quarterlyresults/size1440/index.vue";
+import size1440 from "@/views/financialinformation/quarterlyreports/size1440/index.vue";
-import size1920 from "@/views/financialinformation/quarterlyresults/size1920/index.vue";
+import size1920 from "@/views/financialinformation/quarterlyreports/size1920/index.vue";
 import { useRouter } from "vue-router";
 import { useI18n } from "vue-i18n";
 

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

@@ -2,19 +2,19 @@
   <header></header>
   <main class="p-[35px] max-w-[1200px] mx-auto">
     <div class="title mb-[20px]">
-      {{ t("financialinformation.quarterlyresults.title") }}
+      {{ t("financialinformation.quarterlyreports.title") }}
     </div>
     <div class="search-container">
       <input
         type="text"
         :placeholder="
-          t('financialinformation.quarterlyresults.search.placeholder')
+          t('financialinformation.quarterlyreports.search.placeholder')
         "
         v-model="searchQuery"
         class="search-input"
       />
       <button class="search-button" @click="handleSearch">
-        {{ t("financialinformation.quarterlyresults.search.button") }}
+        {{ t("financialinformation.quarterlyreports.search.button") }}
       </button>
     </div>
 
@@ -35,7 +35,7 @@
           style="color: #2979ff; cursor: pointer"
         >
           <img src="@/assets/image/pdf.png" alt="PDF" />
-          {{ t("financialinformation.quarterlyresults.download") }}
+          {{ t("financialinformation.quarterlyreports.download") }}
         </div>
       </div>
     </div>
@@ -98,232 +98,232 @@ const searchQuery = ref("");
 const state = reactive({
   list: [
     {
-      title: "2024 Q3 Quarterly Results",
+      title: "2024 Q3 Quarterly Reports",
       description: "Third Quarter 2024 Financial Results",
       url: quarterlyPdf2024Q3,
     },
     {
-      title: "2024 Q2 Quarterly Results",
+      title: "2024 Q2 Quarterly Reports",
       description: "Second Quarter 2024 Financial Results",
       url: quarterlyPdf2024Q2,
     },
     {
-      title: "2024 Q1 Quarterly Results",
+      title: "2024 Q1 Quarterly Reports",
       description: "First Quarter 2024 Financial Results",
       url: quarterlyPdf2024Q1,
     },
     {
-      title: "2023 Q3 Quarterly Results",
+      title: "2023 Q3 Quarterly Reports",
       description: "Third Quarter 2023 Financial Results",
       url: quarterlyPdf2023Q3,
     },
     {
-      title: "2023 Q2 Quarterly Results",
+      title: "2023 Q2 Quarterly Reports",
       description: "Second Quarter 2023 Financial Results",
       url: quarterlyPdf2023Q2,
     },
     {
-      title: "2023 Q1 Quarterly Results",
+      title: "2023 Q1 Quarterly Reports",
       description: "First Quarter 2023 Financial Results",
       url: quarterlyPdf2023Q1,
     },
     {
-      title: "2022 Q3 Quarterly Results",
+      title: "2022 Q3 Quarterly Reports",
       description: "Third Quarter 2022 Financial Results",
       url: quarterlyPdf2022Q3,
     },
     {
-      title: "2022 Q2 Quarterly Results",
+      title: "2022 Q2 Quarterly Reports",
       description: "Second Quarter 2022 Financial Results",
       url: quarterlyPdf2022Q2,
     },
     {
-      title: "2022 Q1 Quarterly Results",
+      title: "2022 Q1 Quarterly Reports",
       description: "First Quarter 2022 Financial Results",
       url: quarterlyPdf2022Q1,
     },
     {
-      title: "2021 Q3 Quarterly Results",
+      title: "2021 Q3 Quarterly Reports",
       description: "Third Quarter 2021 Financial Results",
       url: quarterlyPdf2021Q3,
     },
     {
-      title: "2021 Q2 Quarterly Results",
+      title: "2021 Q2 Quarterly Reports",
       description: "Second Quarter 2021 Financial Results",
       url: quarterlyPdf2021Q2,
     },
     {
-      title: "2021 Q1 Quarterly Results",
+      title: "2021 Q1 Quarterly Reports",
       description: "First Quarter 2021 Financial Results",
       url: quarterlyPdf2021Q1,
     },
     {
-      title: "2020 Q3 Quarterly Results",
+      title: "2020 Q3 Quarterly Reports",
       description: "Third Quarter 2020 Financial Results",
       url: quarterlyPdf2020Q3,
     },
     {
-      title: "2020 Q2 Quarterly Results",
+      title: "2020 Q2 Quarterly Reports",
       description: "Second Quarter 2020 Financial Results",
       url: quarterlyPdf2020Q2,
     },
     {
-      title: "2020 Q1 Quarterly Results",
+      title: "2020 Q1 Quarterly Reports",
       description: "First Quarter 2020 Financial Results",
       url: quarterlyPdf2020Q1,
     },
     {
-      title: "2019 Q3 Quarterly Results",
+      title: "2019 Q3 Quarterly Reports",
       description: "Third Quarter 2019 Financial Results",
       url: quarterlyPdf2019Q3,
     },
     {
-      title: "2019 Q2 Quarterly Results",
+      title: "2019 Q2 Quarterly Reports",
       description: "Second Quarter 2019 Financial Results",
       url: quarterlyPdf2019Q2,
     },
     {
-      title: "2019 Q1 Quarterly Results",
+      title: "2019 Q1 Quarterly Reports",
       description: "First Quarter 2019 Financial Results",
       url: quarterlyPdf2019Q1,
     },
     {
-      title: "2018 Q3 Quarterly Results",
+      title: "2018 Q3 Quarterly Reports",
       description: "Third Quarter 2018 Financial Results",
       url: quarterlyPdf2018Q3,
     },
     {
-      title: "2018 Q2 Quarterly Results",
+      title: "2018 Q2 Quarterly Reports",
       description: "Second Quarter 2018 Financial Results",
       url: quarterlyPdf2018Q2,
     },
     {
-      title: "2018 Q1 Quarterly Results",
+      title: "2018 Q1 Quarterly Reports",
       description: "First Quarter 2018 Financial Results",
       url: quarterlyPdf2018Q1,
     },
     {
-      title: "2017 Q3 Quarterly Results",
+      title: "2017 Q3 Quarterly Reports",
       description: "Third Quarter 2017 Financial Results",
       url: quarterlyPdf2017Q3,
     },
     {
-      title: "2017 Q2 Quarterly Results",
+      title: "2017 Q2 Quarterly Reports",
       description: "Second Quarter 2017 Financial Results",
       url: quarterlyPdf2017Q2,
     },
     {
-      title: "2017 Q1 Quarterly Results",
+      title: "2017 Q1 Quarterly Reports",
       description: "First Quarter 2017 Financial Results",
       url: quarterlyPdf2017Q1,
     },
     {
-      title: "2016 Q3 Quarterly Results",
+      title: "2016 Q3 Quarterly Reports",
       description: "Third Quarter 2016 Financial Results",
       url: quarterlyPdf2016Q3,
     },
     {
-      title: "2016 Q2 Quarterly Results",
+      title: "2016 Q2 Quarterly Reports",
       description: "Second Quarter 2016 Financial Results",
       url: quarterlyPdf2016Q2,
     },
     {
-      title: "2016 Q1 Quarterly Results",
+      title: "2016 Q1 Quarterly Reports",
       description: "First Quarter 2016 Financial Results",
       url: quarterlyPdf2016Q1,
     },
     {
-      title: "2015 Q3 Quarterly Results",
+      title: "2015 Q3 Quarterly Reports",
       description: "Third Quarter 2015 Financial Results",
       url: quarterlyPdf2015Q3,
     },
     {
-      title: "2015 Q2 Quarterly Results",
+      title: "2015 Q2 Quarterly Reports",
       description: "Second Quarter 2015 Financial Results",
       url: quarterlyPdf2015Q2,
     },
     {
-      title: "2015 Q1 Quarterly Results",
+      title: "2015 Q1 Quarterly Reports",
       description: "First Quarter 2015 Financial Results",
       url: quarterlyPdf2015Q1,
     },
     {
-      title: "2014 Q3 Quarterly Results",
+      title: "2014 Q3 Quarterly Reports",
       description: "Third Quarter 2014 Financial Results",
       url: quarterlyPdf2014Q3,
     },
     {
-      title: "2014 Q2 Quarterly Results",
+      title: "2014 Q2 Quarterly Reports",
       description: "Second Quarter 2014 Financial Results",
       url: quarterlyPdf2014Q2,
     },
     {
-      title: "2014 Q1 Quarterly Results",
+      title: "2014 Q1 Quarterly Reports",
       description: "First Quarter 2014 Financial Results",
       url: quarterlyPdf2014Q1,
     },
     {
-      title: "2013 Q3 Quarterly Results",
+      title: "2013 Q3 Quarterly Reports",
       description: "Third Quarter 2013 Financial Results",
       url: quarterlyPdf2013Q3,
     },
     {
-      title: "2013 Q2 Quarterly Results",
+      title: "2013 Q2 Quarterly Reports",
       description: "Second Quarter 2013 Financial Results",
       url: quarterlyPdf2013Q2,
     },
     {
-      title: "2013 Q1 Quarterly Results",
+      title: "2013 Q1 Quarterly Reports",
       description: "First Quarter 2013 Financial Results",
       url: quarterlyPdf2013Q1,
     },
     {
-      title: "2012 Q3 Quarterly Results",
+      title: "2012 Q3 Quarterly Reports",
       description: "Third Quarter 2012 Financial Results",
       url: quarterlyPdf2012Q3,
     },
     {
-      title: "2012 Q2 Quarterly Results",
+      title: "2012 Q2 Quarterly Reports",
       description: "Second Quarter 2012 Financial Results",
       url: quarterlyPdf2012Q2,
     },
     {
-      title: "2012 Q1 Quarterly Results",
+      title: "2012 Q1 Quarterly Reports",
       description: "First Quarter 2012 Financial Results",
       url: quarterlyPdf2012Q1,
     },
     {
-      title: "2011 Q3 Quarterly Results",
+      title: "2011 Q3 Quarterly Reports",
       description: "Third Quarter 2011 Financial Results",
       url: quarterlyPdf2011Q3,
     },
     {
-      title: "2011 Q2 Quarterly Results",
+      title: "2011 Q2 Quarterly Reports",
       description: "Second Quarter 2011 Financial Results",
       url: quarterlyPdf2011Q2,
     },
     {
-      title: "2011 Q1 Quarterly Results",
+      title: "2011 Q1 Quarterly Reports",
       description: "First Quarter 2011 Financial Results",
       url: quarterlyPdf2011Q1,
     },
     {
-      title: "2010 Q3 Quarterly Results",
+      title: "2010 Q3 Quarterly Reports",
       description: "Third Quarter 2010 Financial Results",
       url: quarterlyPdf2010Q3,
     },
     {
-      title: "2010 Q2 Quarterly Results",
+      title: "2010 Q2 Quarterly Reports",
       description: "Second Quarter 2010 Financial Results",
       url: quarterlyPdf2010Q2,
     },
     {
-      title: "2010 Q1 Quarterly Results",
+      title: "2010 Q1 Quarterly Reports",
       description: "First Quarter 2010 Financial Results",
       url: quarterlyPdf2010Q1,
     },
     {
-      title: "2009 Q3 Quarterly Results",
+      title: "2009 Q3 Quarterly Reports",
       description: "Third Quarter 2009 Financial Results",
       url: quarterlyPdf2009Q3,
     },

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

@@ -2,19 +2,19 @@
   <header></header>
   <main class="p-[35px] max-w-[1200px] mx-auto">
     <div class="title mb-[20px]">
-      {{ t("financialinformation.quarterlyresults.title") }}
+      {{ t("financialinformation.quarterlyreports.title") }}
     </div>
     <div class="search-container">
       <input
         type="text"
         :placeholder="
-          t('financialinformation.quarterlyresults.search.placeholder')
+          t('financialinformation.quarterlyreports.search.placeholder')
         "
         v-model="searchQuery"
         class="search-input"
       />
       <button class="search-button" @click="handleSearch">
-        {{ t("financialinformation.quarterlyresults.search.button") }}
+        {{ t("financialinformation.quarterlyreports.search.button") }}
       </button>
     </div>
 
@@ -34,7 +34,7 @@
           style="color: #2979ff; cursor: pointer"
         >
           <img src="@/assets/image/pdf.png" alt="PDF" />
-          {{ t("financialinformation.quarterlyresults.download") }}
+          {{ t("financialinformation.quarterlyreports.download") }}
         </div>
       </div>
     </div>
@@ -97,232 +97,232 @@ const searchQuery = ref("");
 const state = reactive({
   list: [
     {
-      title: "2024 Q3 Quarterly Results",
+      title: "2024 Q3 Quarterly Reports",
       description: "Third Quarter 2024 Financial Results",
       url: quarterlyPdf2024Q3,
     },
     {
-      title: "2024 Q2 Quarterly Results",
+      title: "2024 Q2 Quarterly Reports",
       description: "Second Quarter 2024 Financial Results",
       url: quarterlyPdf2024Q2,
     },
     {
-      title: "2024 Q1 Quarterly Results",
+      title: "2024 Q1 Quarterly Reports",
       description: "First Quarter 2024 Financial Results",
       url: quarterlyPdf2024Q1,
     },
     {
-      title: "2023 Q3 Quarterly Results",
+      title: "2023 Q3 Quarterly Reports",
       description: "Third Quarter 2023 Financial Results",
       url: quarterlyPdf2023Q3,
     },
     {
-      title: "2023 Q2 Quarterly Results",
+      title: "2023 Q2 Quarterly Reports",
       description: "Second Quarter 2023 Financial Results",
       url: quarterlyPdf2023Q2,
     },
     {
-      title: "2023 Q1 Quarterly Results",
+      title: "2023 Q1 Quarterly Reports",
       description: "First Quarter 2023 Financial Results",
       url: quarterlyPdf2023Q1,
     },
     {
-      title: "2022 Q3 Quarterly Results",
+      title: "2022 Q3 Quarterly Reports",
       description: "Third Quarter 2022 Financial Results",
       url: quarterlyPdf2022Q3,
     },
     {
-      title: "2022 Q2 Quarterly Results",
+      title: "2022 Q2 Quarterly Reports",
       description: "Second Quarter 2022 Financial Results",
       url: quarterlyPdf2022Q2,
     },
     {
-      title: "2022 Q1 Quarterly Results",
+      title: "2022 Q1 Quarterly Reports",
       description: "First Quarter 2022 Financial Results",
       url: quarterlyPdf2022Q1,
     },
     {
-      title: "2021 Q3 Quarterly Results",
+      title: "2021 Q3 Quarterly Reports",
       description: "Third Quarter 2021 Financial Results",
       url: quarterlyPdf2021Q3,
     },
     {
-      title: "2021 Q2 Quarterly Results",
+      title: "2021 Q2 Quarterly Reports",
       description: "Second Quarter 2021 Financial Results",
       url: quarterlyPdf2021Q2,
     },
     {
-      title: "2021 Q1 Quarterly Results",
+      title: "2021 Q1 Quarterly Reports",
       description: "First Quarter 2021 Financial Results",
       url: quarterlyPdf2021Q1,
     },
     {
-      title: "2020 Q3 Quarterly Results",
+      title: "2020 Q3 Quarterly Reports",
       description: "Third Quarter 2020 Financial Results",
       url: quarterlyPdf2020Q3,
     },
     {
-      title: "2020 Q2 Quarterly Results",
+      title: "2020 Q2 Quarterly Reports",
       description: "Second Quarter 2020 Financial Results",
       url: quarterlyPdf2020Q2,
     },
     {
-      title: "2020 Q1 Quarterly Results",
+      title: "2020 Q1 Quarterly Reports",
       description: "First Quarter 2020 Financial Results",
       url: quarterlyPdf2020Q1,
     },
     {
-      title: "2019 Q3 Quarterly Results",
+      title: "2019 Q3 Quarterly Reports",
       description: "Third Quarter 2019 Financial Results",
       url: quarterlyPdf2019Q3,
     },
     {
-      title: "2019 Q2 Quarterly Results",
+      title: "2019 Q2 Quarterly Reports",
       description: "Second Quarter 2019 Financial Results",
       url: quarterlyPdf2019Q2,
     },
     {
-      title: "2019 Q1 Quarterly Results",
+      title: "2019 Q1 Quarterly Reports",
       description: "First Quarter 2019 Financial Results",
       url: quarterlyPdf2019Q1,
     },
     {
-      title: "2018 Q3 Quarterly Results",
+      title: "2018 Q3 Quarterly Reports",
       description: "Third Quarter 2018 Financial Results",
       url: quarterlyPdf2018Q3,
     },
     {
-      title: "2018 Q2 Quarterly Results",
+      title: "2018 Q2 Quarterly Reports",
       description: "Second Quarter 2018 Financial Results",
       url: quarterlyPdf2018Q2,
     },
     {
-      title: "2018 Q1 Quarterly Results",
+      title: "2018 Q1 Quarterly Reports",
       description: "First Quarter 2018 Financial Results",
       url: quarterlyPdf2018Q1,
     },
     {
-      title: "2017 Q3 Quarterly Results",
+      title: "2017 Q3 Quarterly Reports",
       description: "Third Quarter 2017 Financial Results",
       url: quarterlyPdf2017Q3,
     },
     {
-      title: "2017 Q2 Quarterly Results",
+      title: "2017 Q2 Quarterly Reports",
       description: "Second Quarter 2017 Financial Results",
       url: quarterlyPdf2017Q2,
     },
     {
-      title: "2017 Q1 Quarterly Results",
+      title: "2017 Q1 Quarterly Reports",
       description: "First Quarter 2017 Financial Results",
       url: quarterlyPdf2017Q1,
     },
     {
-      title: "2016 Q3 Quarterly Results",
+      title: "2016 Q3 Quarterly Reports",
       description: "Third Quarter 2016 Financial Results",
       url: quarterlyPdf2016Q3,
     },
     {
-      title: "2016 Q2 Quarterly Results",
+      title: "2016 Q2 Quarterly Reports",
       description: "Second Quarter 2016 Financial Results",
       url: quarterlyPdf2016Q2,
     },
     {
-      title: "2016 Q1 Quarterly Results",
+      title: "2016 Q1 Quarterly Reports",
       description: "First Quarter 2016 Financial Results",
       url: quarterlyPdf2016Q1,
     },
     {
-      title: "2015 Q3 Quarterly Results",
+      title: "2015 Q3 Quarterly Reports",
       description: "Third Quarter 2015 Financial Results",
       url: quarterlyPdf2015Q3,
     },
     {
-      title: "2015 Q2 Quarterly Results",
+      title: "2015 Q2 Quarterly Reports",
       description: "Second Quarter 2015 Financial Results",
       url: quarterlyPdf2015Q2,
     },
     {
-      title: "2015 Q1 Quarterly Results",
+      title: "2015 Q1 Quarterly Reports",
       description: "First Quarter 2015 Financial Results",
       url: quarterlyPdf2015Q1,
     },
     {
-      title: "2014 Q3 Quarterly Results",
+      title: "2014 Q3 Quarterly Reports",
       description: "Third Quarter 2014 Financial Results",
       url: quarterlyPdf2014Q3,
     },
     {
-      title: "2014 Q2 Quarterly Results",
+      title: "2014 Q2 Quarterly Reports",
       description: "Second Quarter 2014 Financial Results",
       url: quarterlyPdf2014Q2,
     },
     {
-      title: "2014 Q1 Quarterly Results",
+      title: "2014 Q1 Quarterly Reports",
       description: "First Quarter 2014 Financial Results",
       url: quarterlyPdf2014Q1,
     },
     {
-      title: "2013 Q3 Quarterly Results",
+      title: "2013 Q3 Quarterly Reports",
       description: "Third Quarter 2013 Financial Results",
       url: quarterlyPdf2013Q3,
     },
     {
-      title: "2013 Q2 Quarterly Results",
+      title: "2013 Q2 Quarterly Reports",
       description: "Second Quarter 2013 Financial Results",
       url: quarterlyPdf2013Q2,
     },
     {
-      title: "2013 Q1 Quarterly Results",
+      title: "2013 Q1 Quarterly Reports",
       description: "First Quarter 2013 Financial Results",
       url: quarterlyPdf2013Q1,
     },
     {
-      title: "2012 Q3 Quarterly Results",
+      title: "2012 Q3 Quarterly Reports",
       description: "Third Quarter 2012 Financial Results",
       url: quarterlyPdf2012Q3,
     },
     {
-      title: "2012 Q2 Quarterly Results",
+      title: "2012 Q2 Quarterly Reports",
       description: "Second Quarter 2012 Financial Results",
       url: quarterlyPdf2012Q2,
     },
     {
-      title: "2012 Q1 Quarterly Results",
+      title: "2012 Q1 Quarterly Reports",
       description: "First Quarter 2012 Financial Results",
       url: quarterlyPdf2012Q1,
     },
     {
-      title: "2011 Q3 Quarterly Results",
+      title: "2011 Q3 Quarterly Reports",
       description: "Third Quarter 2011 Financial Results",
       url: quarterlyPdf2011Q3,
     },
     {
-      title: "2011 Q2 Quarterly Results",
+      title: "2011 Q2 Quarterly Reports",
       description: "Second Quarter 2011 Financial Results",
       url: quarterlyPdf2011Q2,
     },
     {
-      title: "2011 Q1 Quarterly Results",
+      title: "2011 Q1 Quarterly Reports",
       description: "First Quarter 2011 Financial Results",
       url: quarterlyPdf2011Q1,
     },
     {
-      title: "2010 Q3 Quarterly Results",
+      title: "2010 Q3 Quarterly Reports",
       description: "Third Quarter 2010 Financial Results",
       url: quarterlyPdf2010Q3,
     },
     {
-      title: "2010 Q2 Quarterly Results",
+      title: "2010 Q2 Quarterly Reports",
       description: "Second Quarter 2010 Financial Results",
       url: quarterlyPdf2010Q2,
     },
     {
-      title: "2010 Q1 Quarterly Results",
+      title: "2010 Q1 Quarterly Reports",
       description: "First Quarter 2010 Financial Results",
       url: quarterlyPdf2010Q1,
     },
     {
-      title: "2009 Q3 Quarterly Results",
+      title: "2009 Q3 Quarterly Reports",
       description: "Third Quarter 2009 Financial Results",
       url: quarterlyPdf2009Q3,
     },

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

@@ -2,7 +2,7 @@
   <header></header>
   <main class="p-[80px] mx-auto" style="max-width: 100vw; min-width: 350px">
     <div class="page-title mb-[24px]">
-      {{ t("financialinformation.quarterlyresults.title") }}
+      {{ t("financialinformation.quarterlyreports.title") }}
     </div>
     <div class="search-container">
       <input
@@ -10,11 +10,11 @@
         v-model="searchQuery"
         class="search-input"
         :placeholder="
-          t('financialinformation.quarterlyresults.search.placeholder')
+          t('financialinformation.quarterlyreports.search.placeholder')
         "
       />
       <button @click="handleSearch" class="search-button">
-        {{ t("financialinformation.quarterlyresults.search.button") }}
+        {{ t("financialinformation.quarterlyreports.search.button") }}
       </button>
     </div>
 
@@ -99,232 +99,232 @@ const searchQuery = ref("");
 const state = reactive({
   list: [
     {
-      title: "2024 Q3 Quarterly Results",
+      title: "2024 Q3 Quarterly Reports",
       description: "Third Quarter 2024 Financial Results",
       url: quarterlyPdf2024Q3,
     },
     {
-      title: "2024 Q2 Quarterly Results",
+      title: "2024 Q2 Quarterly Reports",
       description: "Second Quarter 2024 Financial Results",
       url: quarterlyPdf2024Q2,
     },
     {
-      title: "2024 Q1 Quarterly Results",
+      title: "2024 Q1 Quarterly Reports",
       description: "First Quarter 2024 Financial Results",
       url: quarterlyPdf2024Q1,
     },
     {
-      title: "2023 Q3 Quarterly Results",
+      title: "2023 Q3 Quarterly Reports",
       description: "Third Quarter 2023 Financial Results",
       url: quarterlyPdf2023Q3,
     },
     {
-      title: "2023 Q2 Quarterly Results",
+      title: "2023 Q2 Quarterly Reports",
       description: "Second Quarter 2023 Financial Results",
       url: quarterlyPdf2023Q2,
     },
     {
-      title: "2023 Q1 Quarterly Results",
+      title: "2023 Q1 Quarterly Reports",
       description: "First Quarter 2023 Financial Results",
       url: quarterlyPdf2023Q1,
     },
     {
-      title: "2022 Q3 Quarterly Results",
+      title: "2022 Q3 Quarterly Reports",
       description: "Third Quarter 2022 Financial Results",
       url: quarterlyPdf2022Q3,
     },
     {
-      title: "2022 Q2 Quarterly Results",
+      title: "2022 Q2 Quarterly Reports",
       description: "Second Quarter 2022 Financial Results",
       url: quarterlyPdf2022Q2,
     },
     {
-      title: "2022 Q1 Quarterly Results",
+      title: "2022 Q1 Quarterly Reports",
       description: "First Quarter 2022 Financial Results",
       url: quarterlyPdf2022Q1,
     },
     {
-      title: "2021 Q3 Quarterly Results",
+      title: "2021 Q3 Quarterly Reports",
       description: "Third Quarter 2021 Financial Results",
       url: quarterlyPdf2021Q3,
     },
     {
-      title: "2021 Q2 Quarterly Results",
+      title: "2021 Q2 Quarterly Reports",
       description: "Second Quarter 2021 Financial Results",
       url: quarterlyPdf2021Q2,
     },
     {
-      title: "2021 Q1 Quarterly Results",
+      title: "2021 Q1 Quarterly Reports",
       description: "First Quarter 2021 Financial Results",
       url: quarterlyPdf2021Q1,
     },
     {
-      title: "2020 Q3 Quarterly Results",
+      title: "2020 Q3 Quarterly Reports",
       description: "Third Quarter 2020 Financial Results",
       url: quarterlyPdf2020Q3,
     },
     {
-      title: "2020 Q2 Quarterly Results",
+      title: "2020 Q2 Quarterly Reports",
       description: "Second Quarter 2020 Financial Results",
       url: quarterlyPdf2020Q2,
     },
     {
-      title: "2020 Q1 Quarterly Results",
+      title: "2020 Q1 Quarterly Reports",
       description: "First Quarter 2020 Financial Results",
       url: quarterlyPdf2020Q1,
     },
     {
-      title: "2019 Q3 Quarterly Results",
+      title: "2019 Q3 Quarterly Reports",
       description: "Third Quarter 2019 Financial Results",
       url: quarterlyPdf2019Q3,
     },
     {
-      title: "2019 Q2 Quarterly Results",
+      title: "2019 Q2 Quarterly Reports",
       description: "Second Quarter 2019 Financial Results",
       url: quarterlyPdf2019Q2,
     },
     {
-      title: "2019 Q1 Quarterly Results",
+      title: "2019 Q1 Quarterly Reports",
       description: "First Quarter 2019 Financial Results",
       url: quarterlyPdf2019Q1,
     },
     {
-      title: "2018 Q3 Quarterly Results",
+      title: "2018 Q3 Quarterly Reports",
       description: "Third Quarter 2018 Financial Results",
       url: quarterlyPdf2018Q3,
     },
     {
-      title: "2018 Q2 Quarterly Results",
+      title: "2018 Q2 Quarterly Reports",
       description: "Second Quarter 2018 Financial Results",
       url: quarterlyPdf2018Q2,
     },
     {
-      title: "2018 Q1 Quarterly Results",
+      title: "2018 Q1 Quarterly Reports",
       description: "First Quarter 2018 Financial Results",
       url: quarterlyPdf2018Q1,
     },
     {
-      title: "2017 Q3 Quarterly Results",
+      title: "2017 Q3 Quarterly Reports",
       description: "Third Quarter 2017 Financial Results",
       url: quarterlyPdf2017Q3,
     },
     {
-      title: "2017 Q2 Quarterly Results",
+      title: "2017 Q2 Quarterly Reports",
       description: "Second Quarter 2017 Financial Results",
       url: quarterlyPdf2017Q2,
     },
     {
-      title: "2017 Q1 Quarterly Results",
+      title: "2017 Q1 Quarterly Reports",
       description: "First Quarter 2017 Financial Results",
       url: quarterlyPdf2017Q1,
     },
     {
-      title: "2016 Q3 Quarterly Results",
+      title: "2016 Q3 Quarterly Reports",
       description: "Third Quarter 2016 Financial Results",
       url: quarterlyPdf2016Q3,
     },
     {
-      title: "2016 Q2 Quarterly Results",
+      title: "2016 Q2 Quarterly Reports",
       description: "Second Quarter 2016 Financial Results",
       url: quarterlyPdf2016Q2,
     },
     {
-      title: "2016 Q1 Quarterly Results",
+      title: "2016 Q1 Quarterly Reports",
       description: "First Quarter 2016 Financial Results",
       url: quarterlyPdf2016Q1,
     },
     {
-      title: "2015 Q3 Quarterly Results",
+      title: "2015 Q3 Quarterly Reports",
       description: "Third Quarter 2015 Financial Results",
       url: quarterlyPdf2015Q3,
     },
     {
-      title: "2015 Q2 Quarterly Results",
+      title: "2015 Q2 Quarterly Reports",
       description: "Second Quarter 2015 Financial Results",
       url: quarterlyPdf2015Q2,
     },
     {
-      title: "2015 Q1 Quarterly Results",
+      title: "2015 Q1 Quarterly Reports",
       description: "First Quarter 2015 Financial Results",
       url: quarterlyPdf2015Q1,
     },
     {
-      title: "2014 Q3 Quarterly Results",
+      title: "2014 Q3 Quarterly Reports",
       description: "Third Quarter 2014 Financial Results",
       url: quarterlyPdf2014Q3,
     },
     {
-      title: "2014 Q2 Quarterly Results",
+      title: "2014 Q2 Quarterly Reports",
       description: "Second Quarter 2014 Financial Results",
       url: quarterlyPdf2014Q2,
     },
     {
-      title: "2014 Q1 Quarterly Results",
+      title: "2014 Q1 Quarterly Reports",
       description: "First Quarter 2014 Financial Results",
       url: quarterlyPdf2014Q1,
     },
     {
-      title: "2013 Q3 Quarterly Results",
+      title: "2013 Q3 Quarterly Reports",
       description: "Third Quarter 2013 Financial Results",
       url: quarterlyPdf2013Q3,
     },
     {
-      title: "2013 Q2 Quarterly Results",
+      title: "2013 Q2 Quarterly Reports",
       description: "Second Quarter 2013 Financial Results",
       url: quarterlyPdf2013Q2,
     },
     {
-      title: "2013 Q1 Quarterly Results",
+      title: "2013 Q1 Quarterly Reports",
       description: "First Quarter 2013 Financial Results",
       url: quarterlyPdf2013Q1,
     },
     {
-      title: "2012 Q3 Quarterly Results",
+      title: "2012 Q3 Quarterly Reports",
       description: "Third Quarter 2012 Financial Results",
       url: quarterlyPdf2012Q3,
     },
     {
-      title: "2012 Q2 Quarterly Results",
+      title: "2012 Q2 Quarterly Reports",
       description: "Second Quarter 2012 Financial Results",
       url: quarterlyPdf2012Q2,
     },
     {
-      title: "2012 Q1 Quarterly Results",
+      title: "2012 Q1 Quarterly Reports",
       description: "First Quarter 2012 Financial Results",
       url: quarterlyPdf2012Q1,
     },
     {
-      title: "2011 Q3 Quarterly Results",
+      title: "2011 Q3 Quarterly Reports",
       description: "Third Quarter 2011 Financial Results",
       url: quarterlyPdf2011Q3,
     },
     {
-      title: "2011 Q2 Quarterly Results",
+      title: "2011 Q2 Quarterly Reports",
       description: "Second Quarter 2011 Financial Results",
       url: quarterlyPdf2011Q2,
     },
     {
-      title: "2011 Q1 Quarterly Results",
+      title: "2011 Q1 Quarterly Reports",
       description: "First Quarter 2011 Financial Results",
       url: quarterlyPdf2011Q1,
     },
     {
-      title: "2010 Q3 Quarterly Results",
+      title: "2010 Q3 Quarterly Reports",
       description: "Third Quarter 2010 Financial Results",
       url: quarterlyPdf2010Q3,
     },
     {
-      title: "2010 Q2 Quarterly Results",
+      title: "2010 Q2 Quarterly Reports",
       description: "Second Quarter 2010 Financial Results",
       url: quarterlyPdf2010Q2,
     },
     {
-      title: "2010 Q1 Quarterly Results",
+      title: "2010 Q1 Quarterly Reports",
       description: "First Quarter 2010 Financial Results",
       url: quarterlyPdf2010Q1,
     },
     {
-      title: "2009 Q3 Quarterly Results",
+      title: "2009 Q3 Quarterly Reports",
       description: "Third Quarter 2009 Financial Results",
       url: quarterlyPdf2009Q3,
     },

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

@@ -2,7 +2,7 @@
   <header></header>
   <main class="p-[80px] mx-auto" style="max-width: 100vw; min-width: 350px">
     <div class="page-title mb-[24px]">
-      {{ t("financialinformation.quarterlyresults.title") }}
+      {{ t("financialinformation.quarterlyreports.title") }}
     </div>
     <div class="search-container">
       <input
@@ -10,11 +10,11 @@
         v-model="searchQuery"
         class="search-input"
         :placeholder="
-          t('financialinformation.quarterlyresults.search.placeholder')
+          t('financialinformation.quarterlyreports.search.placeholder')
         "
       />
       <button @click="handleSearch" class="search-button">
-        {{ t("financialinformation.quarterlyresults.search.button") }}
+        {{ t("financialinformation.quarterlyreports.search.button") }}
       </button>
     </div>
 
@@ -99,232 +99,232 @@ const searchQuery = ref("");
 const state = reactive({
   list: [
     {
-      title: "2024 Q3 Quarterly Results",
+      title: "2024 Q3 Quarterly Reports",
       description: "Third Quarter 2024 Financial Results",
       url: quarterlyPdf2024Q3,
     },
     {
-      title: "2024 Q2 Quarterly Results",
+      title: "2024 Q2 Quarterly Reports",
       description: "Second Quarter 2024 Financial Results",
       url: quarterlyPdf2024Q2,
     },
     {
-      title: "2024 Q1 Quarterly Results",
+      title: "2024 Q1 Quarterly Reports",
       description: "First Quarter 2024 Financial Results",
       url: quarterlyPdf2024Q1,
     },
     {
-      title: "2023 Q3 Quarterly Results",
+      title: "2023 Q3 Quarterly Reports",
       description: "Third Quarter 2023 Financial Results",
       url: quarterlyPdf2023Q3,
     },
     {
-      title: "2023 Q2 Quarterly Results",
+      title: "2023 Q2 Quarterly Reports",
       description: "Second Quarter 2023 Financial Results",
       url: quarterlyPdf2023Q2,
     },
     {
-      title: "2023 Q1 Quarterly Results",
+      title: "2023 Q1 Quarterly Reports",
       description: "First Quarter 2023 Financial Results",
       url: quarterlyPdf2023Q1,
     },
     {
-      title: "2022 Q3 Quarterly Results",
+      title: "2022 Q3 Quarterly Reports",
       description: "Third Quarter 2022 Financial Results",
       url: quarterlyPdf2022Q3,
     },
     {
-      title: "2022 Q2 Quarterly Results",
+      title: "2022 Q2 Quarterly Reports",
       description: "Second Quarter 2022 Financial Results",
       url: quarterlyPdf2022Q2,
     },
     {
-      title: "2022 Q1 Quarterly Results",
+      title: "2022 Q1 Quarterly Reports",
       description: "First Quarter 2022 Financial Results",
       url: quarterlyPdf2022Q1,
     },
     {
-      title: "2021 Q3 Quarterly Results",
+      title: "2021 Q3 Quarterly Reports",
       description: "Third Quarter 2021 Financial Results",
       url: quarterlyPdf2021Q3,
     },
     {
-      title: "2021 Q2 Quarterly Results",
+      title: "2021 Q2 Quarterly Reports",
       description: "Second Quarter 2021 Financial Results",
       url: quarterlyPdf2021Q2,
     },
     {
-      title: "2021 Q1 Quarterly Results",
+      title: "2021 Q1 Quarterly Reports",
       description: "First Quarter 2021 Financial Results",
       url: quarterlyPdf2021Q1,
     },
     {
-      title: "2020 Q3 Quarterly Results",
+      title: "2020 Q3 Quarterly Reports",
       description: "Third Quarter 2020 Financial Results",
       url: quarterlyPdf2020Q3,
     },
     {
-      title: "2020 Q2 Quarterly Results",
+      title: "2020 Q2 Quarterly Reports",
       description: "Second Quarter 2020 Financial Results",
       url: quarterlyPdf2020Q2,
     },
     {
-      title: "2020 Q1 Quarterly Results",
+      title: "2020 Q1 Quarterly Reports",
       description: "First Quarter 2020 Financial Results",
       url: quarterlyPdf2020Q1,
     },
     {
-      title: "2019 Q3 Quarterly Results",
+      title: "2019 Q3 Quarterly Reports",
       description: "Third Quarter 2019 Financial Results",
       url: quarterlyPdf2019Q3,
     },
     {
-      title: "2019 Q2 Quarterly Results",
+      title: "2019 Q2 Quarterly Reports",
       description: "Second Quarter 2019 Financial Results",
       url: quarterlyPdf2019Q2,
     },
     {
-      title: "2019 Q1 Quarterly Results",
+      title: "2019 Q1 Quarterly Reports",
       description: "First Quarter 2019 Financial Results",
       url: quarterlyPdf2019Q1,
     },
     {
-      title: "2018 Q3 Quarterly Results",
+      title: "2018 Q3 Quarterly Reports",
       description: "Third Quarter 2018 Financial Results",
       url: quarterlyPdf2018Q3,
     },
     {
-      title: "2018 Q2 Quarterly Results",
+      title: "2018 Q2 Quarterly Reports",
       description: "Second Quarter 2018 Financial Results",
       url: quarterlyPdf2018Q2,
     },
     {
-      title: "2018 Q1 Quarterly Results",
+      title: "2018 Q1 Quarterly Reports",
       description: "First Quarter 2018 Financial Results",
       url: quarterlyPdf2018Q1,
     },
     {
-      title: "2017 Q3 Quarterly Results",
+      title: "2017 Q3 Quarterly Reports",
       description: "Third Quarter 2017 Financial Results",
       url: quarterlyPdf2017Q3,
     },
     {
-      title: "2017 Q2 Quarterly Results",
+      title: "2017 Q2 Quarterly Reports",
       description: "Second Quarter 2017 Financial Results",
       url: quarterlyPdf2017Q2,
     },
     {
-      title: "2017 Q1 Quarterly Results",
+      title: "2017 Q1 Quarterly Reports",
       description: "First Quarter 2017 Financial Results",
       url: quarterlyPdf2017Q1,
     },
     {
-      title: "2016 Q3 Quarterly Results",
+      title: "2016 Q3 Quarterly Reports",
       description: "Third Quarter 2016 Financial Results",
       url: quarterlyPdf2016Q3,
     },
     {
-      title: "2016 Q2 Quarterly Results",
+      title: "2016 Q2 Quarterly Reports",
       description: "Second Quarter 2016 Financial Results",
       url: quarterlyPdf2016Q2,
     },
     {
-      title: "2016 Q1 Quarterly Results",
+      title: "2016 Q1 Quarterly Reports",
       description: "First Quarter 2016 Financial Results",
       url: quarterlyPdf2016Q1,
     },
     {
-      title: "2015 Q3 Quarterly Results",
+      title: "2015 Q3 Quarterly Reports",
       description: "Third Quarter 2015 Financial Results",
       url: quarterlyPdf2015Q3,
     },
     {
-      title: "2015 Q2 Quarterly Results",
+      title: "2015 Q2 Quarterly Reports",
       description: "Second Quarter 2015 Financial Results",
       url: quarterlyPdf2015Q2,
     },
     {
-      title: "2015 Q1 Quarterly Results",
+      title: "2015 Q1 Quarterly Reports",
       description: "First Quarter 2015 Financial Results",
       url: quarterlyPdf2015Q1,
     },
     {
-      title: "2014 Q3 Quarterly Results",
+      title: "2014 Q3 Quarterly Reports",
       description: "Third Quarter 2014 Financial Results",
       url: quarterlyPdf2014Q3,
     },
     {
-      title: "2014 Q2 Quarterly Results",
+      title: "2014 Q2 Quarterly Reports",
       description: "Second Quarter 2014 Financial Results",
       url: quarterlyPdf2014Q2,
     },
     {
-      title: "2014 Q1 Quarterly Results",
+      title: "2014 Q1 Quarterly Reports",
       description: "First Quarter 2014 Financial Results",
       url: quarterlyPdf2014Q1,
     },
     {
-      title: "2013 Q3 Quarterly Results",
+      title: "2013 Q3 Quarterly Reports",
       description: "Third Quarter 2013 Financial Results",
       url: quarterlyPdf2013Q3,
     },
     {
-      title: "2013 Q2 Quarterly Results",
+      title: "2013 Q2 Quarterly Reports",
       description: "Second Quarter 2013 Financial Results",
       url: quarterlyPdf2013Q2,
     },
     {
-      title: "2013 Q1 Quarterly Results",
+      title: "2013 Q1 Quarterly Reports",
       description: "First Quarter 2013 Financial Results",
       url: quarterlyPdf2013Q1,
     },
     {
-      title: "2012 Q3 Quarterly Results",
+      title: "2012 Q3 Quarterly Reports",
       description: "Third Quarter 2012 Financial Results",
       url: quarterlyPdf2012Q3,
     },
     {
-      title: "2012 Q2 Quarterly Results",
+      title: "2012 Q2 Quarterly Reports",
       description: "Second Quarter 2012 Financial Results",
       url: quarterlyPdf2012Q2,
     },
     {
-      title: "2012 Q1 Quarterly Results",
+      title: "2012 Q1 Quarterly Reports",
       description: "First Quarter 2012 Financial Results",
       url: quarterlyPdf2012Q1,
     },
     {
-      title: "2011 Q3 Quarterly Results",
+      title: "2011 Q3 Quarterly Reports",
       description: "Third Quarter 2011 Financial Results",
       url: quarterlyPdf2011Q3,
     },
     {
-      title: "2011 Q2 Quarterly Results",
+      title: "2011 Q2 Quarterly Reports",
       description: "Second Quarter 2011 Financial Results",
       url: quarterlyPdf2011Q2,
     },
     {
-      title: "2011 Q1 Quarterly Results",
+      title: "2011 Q1 Quarterly Reports",
       description: "First Quarter 2011 Financial Results",
       url: quarterlyPdf2011Q1,
     },
     {
-      title: "2010 Q3 Quarterly Results",
+      title: "2010 Q3 Quarterly Reports",
       description: "Third Quarter 2010 Financial Results",
       url: quarterlyPdf2010Q3,
     },
     {
-      title: "2010 Q2 Quarterly Results",
+      title: "2010 Q2 Quarterly Reports",
       description: "Second Quarter 2010 Financial Results",
       url: quarterlyPdf2010Q2,
     },
     {
-      title: "2010 Q1 Quarterly Results",
+      title: "2010 Q1 Quarterly Reports",
       description: "First Quarter 2010 Financial Results",
       url: quarterlyPdf2010Q1,
     },
     {
-      title: "2009 Q3 Quarterly Results",
+      title: "2009 Q3 Quarterly Reports",
       description: "Third Quarter 2009 Financial Results",
       url: quarterlyPdf2009Q3,
     },

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

@@ -1,168 +1,317 @@
 <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">
+          <label class="filter-label">Items per page:</label>
+          <n-select
+            v-model:value="state.pageSize"
+            :options="state.pageSizeOptions"
+            style="width: 150px"
+            @update:value="handlePageSizeChange"
+          />
+        </div>
       </div>
 
-      <!-- 公司财务概览 -->
+      <!-- 表格 -->
-      <section class="section">
+      <div class="table-container">
-        <div class="section-title">
+        <n-data-table
-          {{ t("financialinformation.secfilings.overview.title") }}
+          :columns="columns"
-        </div>
+          :data="paginatedData"
-        <p
+          :pagination="false"
-          class="overview-text"
+          :bordered="false"
-          v-html="t('financialinformation.secfilings.overview.desc')"
+          :size="'medium'"
-        ></p>
+          :row-key="(row) => row.idx"
-      </section>
+        />
 
-      <!-- 年度报告 -->
+        <!-- 分页器 -->
-      <section class="section">
+        <div class="pagination-container">
-        <div class="section-title">
+          <n-pagination
-          {{ t("financialinformation.secfilings.annual_reports.title") }}
+            v-model:page="state.currentPage"
-        </div>
+            v-model:page-size="state.pageSize"
+            show-size-picker
+            show-quick-jumper
+            :item-count="filteredData.length"
+            :page-sizes="[10, 25, 50]"
+            @update:page="handlePageChange"
+            @update:page-size="handlePageSizeChange"
+          >
+            <template #prev>
+              <span>‹ Previous</span>
+            </template>
+            <template #next>
+              <span>Next ›</span>
+            </template>
+          </n-pagination>
 
-        <!-- 报告表格 -->
+          <div class="pagination-info">
-        <div class="reports-table">
+            Displaying {{ startIndex }} - {{ endIndex }} of
-          <div class="table-header">
+            {{ filteredData.length }} results
-            <div class="column file-name">
-              {{
-                t("financialinformation.secfilings.annual_reports.file_name")
-              }}
-            </div>
-            <div class="column date">
-              {{ t("financialinformation.secfilings.annual_reports.date") }}
-            </div>
-            <div class="column download"></div>
-          </div>
-
-          <!-- 报告列表 -->
-          <div class="reports-list">
-            <div
-              class="table-row"
-              v-for="(report, index) in annualReports"
-              :key="index"
-            >
-              <div class="column file-name">{{ report.fileName }}</div>
-              <div class="column date">{{ report.date }}</div>
-              <div class="column download">
-                <a :href="report.downloadUrl" class="download-link">{{
-                  t("financialinformation.secfilings.annual_reports.view")
-                }}</a>
-              </div>
-            </div>
           </div>
         </div>
-      </section>
+      </div>
     </div>
   </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 {
+      ...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",
+        {
+          style: {
+            display: "flex",
+            gap: "8px",
+          },
+        },
+        [
+          h(
+            "a",
+            {
+              href: row.fileLink,
+              style: {
+                color: "#0078d7",
+                textDecoration: "none",
+                fontSize: "12px",
+              },
+              onMouseover: (e) => {
+                e.target.style.textDecoration = "underline";
+              },
+              onMouseout: (e) => {
+                e.target.style.textDecoration = "none";
+              },
+            },
+            h("img", {
+              src: iconLink,
+              alt: "link",
+              style: {
+                width: "24px",
+                height: "24px",
+              },
+            })
+          ),
+        ]
+      );
+    },
   },
-  {
+];
-    fileName: "2020 Annual Report",
+
-    date: "April 13, 2021",
+// 筛选后的数据
-    downloadUrl:
+const filteredData = computed(() => {
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495421004133/zmtp_10k.htm",
+  let data = state.secFilingsData;
-  },
+
-  {
+  if (state.selectedYear) {
-    fileName: "2019 Annual Report",
+    data = data.filter((item) => item.year === state.selectedYear);
-    date: "April 15, 2020",
+  }
-    downloadUrl:
+
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495420004069/zmtp_10k.htm",
+  return data;
-  },
+});
-  {
+
-    fileName: "2018 Annual Report",
+// 分页数据
-    date: "April 1, 2019",
+const paginatedData = computed(() => {
-    downloadUrl:
+  const start = (state.currentPage - 1) * state.pageSize;
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495419003878/zmtp_10k.htm",
+  const end = start + state.pageSize;
-  },
+  return filteredData.value.slice(start, end);
-  {
+});
-    fileName: "2017 Annual Report",
+
-    date: "March 30, 2018",
+// 总页数
-    downloadUrl:
+const totalPages = computed(() => {
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495418003402/zmtp_10k.htm",
+  return Math.ceil(filteredData.value.length / state.pageSize);
-  },
+});
-  {
+
-    fileName: "2016 Annual Report",
+// 当前页起始索引
-    date: "March 22, 2017",
+const startIndex = computed(() => {
-    downloadUrl:
+  return (state.currentPage - 1) * state.pageSize + 1;
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495417002279/zmtp_10k.htm",
+});
-  },
+
-  {
+// 当前页结束索引
-    fileName: "2015 Annual Report",
+const endIndex = computed(() => {
-    date: "March 15, 2016",
+  const end = state.currentPage * state.pageSize;
-    downloadUrl:
+  return Math.min(end, filteredData.value.length);
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448816006596/zmtp_10k.htm",
+});
-  },
+
-  {
+// 处理年份变化
-    fileName: "2014 Annual Report",
+const handleYearChange = (value) => {
-    date: "March 24, 2015",
+  state.selectedYear = value;
-    downloadUrl:
+  state.currentPage = 1;
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448815001308/zmtp_10k.htm",
+};
-  },
+
-  {
+// 处理页码变化
-    fileName: "2013 Annual Report",
+const handlePageChange = (page) => {
-    date: "March 31, 2014",
+  state.currentPage = page;
-    downloadUrl:
+};
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448814001518/zmpt_10k.htm",
+
-  },
+// 处理每页条数变化
-  {
+const handlePageSizeChange = (size) => {
-    fileName: "2012 Annual Report",
+  state.pageSize = size;
-    date: "March 29, 2013",
+  state.currentPage = 1;
-    downloadUrl:
+};
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448813001584/zmtp_10k.htm",
-  },
-  {
-    fileName: "2011 Annual Report",
-    date: "March 30, 2012",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448812001548/zoom_10k.htm",
-  },
-  {
-    fileName: "2010 Annual Report",
-    date: "March 29, 2011",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448811000969/zmtp_10k.htm",
-  },
-  {
-    fileName: "2009 Annual Report",
-    date: "March 31, 2010",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448810001043/zmtp_10k.htm",
-  },
-]);
 </script>
 
 <style scoped lang="scss">
@@ -171,117 +320,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 {
-    width: 25%;
-    text-align: right;
-    margin-right: 50px;
-  }
 }
 
-.pdf-icon {
+.pagination-info {
-  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

@@ -37,7 +37,7 @@
           :pagination="false"
           :bordered="false"
           :size="'medium'"
-          :row-key="(row) => row.filingDate"
+          :row-key="(row) => row.idx"
         />
 
         <!-- 分页器 -->
@@ -75,7 +75,8 @@ import { reactive, computed, h, onMounted } from "vue";
 import { NSelect, NDataTable, NPagination, NButton, NIcon } from "naive-ui";
 import { useI18n } from "vue-i18n";
 import { useRouter } from "vue-router";
-import { fileList } from "@/dict/secTestData.js";
+import { fileList } from "@/dict/secFiles.js";
+
 const { t } = useI18n();
 const router = useRouter();
 import iconLink from "@/assets/image/icon/icon-link.png";
@@ -96,6 +97,15 @@ const state = reactive({
     { 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 },
   ],
 
   // 每页条数选项
@@ -125,7 +135,7 @@ onMounted(() => {
     "Dec",
   ];
 
-  state.secFilingsData = fileList.map((item) => {
+  state.secFilingsData = fileList.map((item, index) => {
     // 从 filingDate 中提取年份，支持两种格式：
     // 1. "Feb 04, 2019" 格式（英文）
     // 2. "2025-10-24" 格式（ISO格式）转换为英文格式
@@ -162,12 +172,13 @@ const columns = [
   {
     title: "Filing Date",
     key: "formattedDate",
-    sorter: true,
+    sorter: "default",
     width: 150,
   },
   {
     title: "Form",
     key: "form",
+    sorter: "default",
     width: 120,
     render: (row) => {
       return h(
@@ -184,7 +195,7 @@ const columns = [
             router.push({
               path: "/secfilingsDefail",
               query: {
-                filingDate: row.filingDate,
+                idx: row.idx,
               },
             });
           },
@@ -202,6 +213,7 @@ const columns = [
   {
     title: "Description",
     key: "description",
+    sorter: "default",
     ellipsis: {
       tooltip: true,
     },
@@ -223,7 +235,7 @@ const columns = [
           h(
             "a",
             {
-              href: row.link,
+              href: row.fileLink,
               style: {
                 color: "#0078d7",
                 textDecoration: "none",
@@ -316,7 +328,6 @@ const handlePageSizeChange = (size) => {
 .sec-filings-container {
   max-width: 1200px;
   margin: 0 auto;
-  background: white;
   padding: 40px;
 }
 

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

@@ -1,286 +1,422 @@
 <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">
+          <label class="filter-label">Items per page:</label>
+          <n-select
+            v-model:value="state.pageSize"
+            :options="state.pageSizeOptions"
+            style="width: 150px"
+            @update:value="handlePageSizeChange"
+          />
+        </div>
       </div>
 
-      <!-- 公司财务概览 -->
+      <!-- 表格 -->
-      <section class="section">
+      <div class="table-container">
-        <div class="section-title">
+        <n-data-table
-          {{ t("financialinformation.secfilings.overview.title") }}
+          :columns="columns"
-        </div>
+          :data="paginatedData"
-        <p
+          :pagination="false"
-          class="overview-text"
+          :row-key="(row) => row.idx"
-          v-html="t('financialinformation.secfilings.overview.desc')"
+          :bordered="false"
-        ></p>
+          :single-line="false"
-      </section>
+          :scroll-x="600"
+        />
 
-      <!-- 年度报告 -->
+        <!-- 分页器 -->
-      <section class="section">
+        <div class="pagination-container mt-[40px]">
-        <div class="section-title">
+          <n-pagination
-          {{ t("financialinformation.secfilings.annual_reports.title") }}
+            v-model:page="state.currentPage"
-        </div>
+            v-model:page-size="state.pageSize"
+            show-size-picker
+            :item-count="filteredData.length"
+            :page-sizes="[10, 25, 50]"
+            @update:page="handlePageChange"
+            @update:page-size="handlePageSizeChange"
+          >
+            <template #prev>
+              <span>‹</span>
+            </template>
+            <template #next>
+              <span> ›</span>
+            </template>
+          </n-pagination>
 
-        <!-- 报告表格 -->
+          <div class="pagination-info mt-[40px]">
-        <div class="reports-table">
+            Displaying {{ startIndex }} - {{ endIndex }} of
-          <div class="table-header">
+            {{ filteredData.length }} results
-            <div class="column file-name">
-              {{
-                t("financialinformation.secfilings.annual_reports.file_name")
-              }}
-            </div>
-            <div class="column date">
-              {{ t("financialinformation.secfilings.annual_reports.date") }}
-            </div>
-            <div class="column download"></div>
-          </div>
-
-          <!-- 报告列表 -->
-          <div class="reports-list">
-            <div
-              class="table-row"
-              v-for="(report, index) in annualReports"
-              :key="index"
-            >
-              <div class="column file-name">{{ report.fileName }}</div>
-              <div class="column date">{{ report.date }}</div>
-              <div class="column download">
-                <a :href="report.downloadUrl" class="download-link">{{
-                  t("financialinformation.secfilings.annual_reports.view")
-                }}</a>
-              </div>
-            </div>
           </div>
         </div>
-      </section>
+      </div>
     </div>
   </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 {
+      ...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",
+        {
+          style: {
+            display: "flex",
+            gap: "8px",
+          },
+        },
+        [
+          h(
+            "a",
+            {
+              href: row.fileLink,
+              style: {
+                color: "#0078d7",
+                textDecoration: "none",
+                fontSize: "12px",
+              },
+              onMouseover: (e) => {
+                e.target.style.textDecoration = "underline";
+              },
+              onMouseout: (e) => {
+                e.target.style.textDecoration = "none";
+              },
+            },
+            h("img", {
+              src: iconLink,
+              alt: "link",
+              style: {
+                width: "24px",
+                height: "24px",
+              },
+            })
+          ),
+        ]
+      );
+    },
   },
-  {
+];
-    fileName: "2020 Annual Report",
+
-    date: "April 13, 2021",
+// 筛选后的数据
-    downloadUrl:
+const filteredData = computed(() => {
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495421004133/zmtp_10k.htm",
+  let data = state.secFilingsData;
-  },
+
-  {
+  if (state.selectedYear) {
-    fileName: "2019 Annual Report",
+    data = data.filter((item) => item.year === state.selectedYear);
-    date: "April 15, 2020",
+  }
-    downloadUrl:
+
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495420004069/zmtp_10k.htm",
+  return data;
-  },
+});
-  {
+
-    fileName: "2018 Annual Report",
+// 分页数据
-    date: "April 1, 2019",
+const paginatedData = computed(() => {
-    downloadUrl:
+  const start = (state.currentPage - 1) * state.pageSize;
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495419003878/zmtp_10k.htm",
+  const end = start + state.pageSize;
-  },
+  return filteredData.value.slice(start, end);
-  {
+});
-    fileName: "2017 Annual Report",
+
-    date: "March 30, 2018",
+// 总页数
-    downloadUrl:
+const totalPages = computed(() => {
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495418003402/zmtp_10k.htm",
+  return Math.ceil(filteredData.value.length / state.pageSize);
-  },
+});
-  {
+
-    fileName: "2016 Annual Report",
+// 当前页起始索引
-    date: "March 22, 2017",
+const startIndex = computed(() => {
-    downloadUrl:
+  return (state.currentPage - 1) * state.pageSize + 1;
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495417002279/zmtp_10k.htm",
+});
-  },
+
-  {
+// 当前页结束索引
-    fileName: "2015 Annual Report",
+const endIndex = computed(() => {
-    date: "March 15, 2016",
+  const end = state.currentPage * state.pageSize;
-    downloadUrl:
+  return Math.min(end, filteredData.value.length);
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448816006596/zmtp_10k.htm",
+});
-  },
+
-  {
+// 处理年份变化
-    fileName: "2014 Annual Report",
+const handleYearChange = (value) => {
-    date: "March 24, 2015",
+  state.selectedYear = value;
-    downloadUrl:
+  state.currentPage = 1;
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448815001308/zmtp_10k.htm",
+};
-  },
+
-  {
+// 处理页码变化
-    fileName: "2013 Annual Report",
+const handlePageChange = (page) => {
-    date: "March 31, 2014",
+  state.currentPage = page;
-    downloadUrl:
+};
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448814001518/zmpt_10k.htm",
+
-  },
+// 处理每页条数变化
-  {
+const handlePageSizeChange = (size) => {
-    fileName: "2012 Annual Report",
+  state.pageSize = size;
-    date: "March 29, 2013",
+  state.currentPage = 1;
-    downloadUrl:
+};
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448813001584/zmtp_10k.htm",
-  },
-  {
-    fileName: "2011 Annual Report",
-    date: "March 30, 2012",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448812001548/zoom_10k.htm",
-  },
-  {
-    fileName: "2010 Annual Report",
-    date: "March 29, 2011",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448811000969/zmtp_10k.htm",
-  },
-  {
-    fileName: "2009 Annual Report",
-    date: "March 31, 2010",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448810001043/zmtp_10k.htm",
-  },
-]);
 </script>
 
 <style scoped lang="scss">
 .page-container {
-  background-image: url("@/assets/image/bg-375.png");
+  background-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,168 +1,317 @@
 <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">
+          <label class="filter-label">Items per page:</label>
+          <n-select
+            v-model:value="state.pageSize"
+            :options="state.pageSizeOptions"
+            style="width: 150px"
+            @update:value="handlePageSizeChange"
+          />
+        </div>
       </div>
 
-      <!-- 公司财务概览 -->
+      <!-- 表格 -->
-      <section class="section">
+      <div class="table-container">
-        <div class="section-title">
+        <n-data-table
-          {{ t("financialinformation.secfilings.overview.title") }}
+          :columns="columns"
-        </div>
+          :data="paginatedData"
-        <p
+          :pagination="false"
-          class="overview-text"
+          :bordered="false"
-          v-html="t('financialinformation.secfilings.overview.desc')"
+          :size="'medium'"
-        ></p>
+          :row-key="(row) => row.idx"
-      </section>
+        />
 
-      <!-- 年度报告 -->
+        <!-- 分页器 -->
-      <section class="section">
+        <div class="pagination-container">
-        <div class="section-title">
+          <n-pagination
-          {{ t("financialinformation.secfilings.annual_reports.title") }}
+            class="w-full"
-        </div>
+            v-model:page="state.currentPage"
+            v-model:page-size="state.pageSize"
+            show-size-picker
+            show-quick-jumper
+            :item-count="filteredData.length"
+            :page-sizes="[10, 25, 50]"
+            @update:page="handlePageChange"
+            @update:page-size="handlePageSizeChange"
+          >
+            <template #prev>
+              <span>‹ Previous</span>
+            </template>
+            <template #next>
+              <span>Next ›</span>
+            </template>
+          </n-pagination>
 
-        <!-- 报告表格 -->
+          <div class="pagination-info w-full mt-[20px]">
-        <div class="reports-table">
+            Displaying {{ startIndex }} - {{ endIndex }} of
-          <div class="table-header">
+            {{ filteredData.length }} results
-            <div class="column file-name">
-              {{
-                t("financialinformation.secfilings.annual_reports.file_name")
-              }}
-            </div>
-            <div class="column date">
-              {{ t("financialinformation.secfilings.annual_reports.date") }}
-            </div>
-            <div class="column download"></div>
-          </div>
-
-          <!-- 报告列表 -->
-          <div class="reports-list">
-            <div
-              class="table-row"
-              v-for="(report, index) in annualReports"
-              :key="index"
-            >
-              <div class="column file-name">{{ report.fileName }}</div>
-              <div class="column date">{{ report.date }}</div>
-              <div class="column download">
-                <a :href="report.downloadUrl" class="download-link">{{
-                  t("financialinformation.secfilings.annual_reports.view")
-                }}</a>
-              </div>
-            </div>
           </div>
         </div>
-      </section>
+      </div>
     </div>
   </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 {
+      ...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",
+        {
+          style: {
+            display: "flex",
+            gap: "8px",
+          },
+        },
+        [
+          h(
+            "a",
+            {
+              href: row.fileLink,
+              style: {
+                color: "#0078d7",
+                textDecoration: "none",
+                fontSize: "12px",
+              },
+              onMouseover: (e) => {
+                e.target.style.textDecoration = "underline";
+              },
+              onMouseout: (e) => {
+                e.target.style.textDecoration = "none";
+              },
+            },
+            h("img", {
+              src: iconLink,
+              alt: "link",
+              style: {
+                width: "24px",
+                height: "24px",
+              },
+            })
+          ),
+        ]
+      );
+    },
   },
-  {
+];
-    fileName: "2020 Annual Report",
+
-    date: "April 13, 2021",
+// 筛选后的数据
-    downloadUrl:
+const filteredData = computed(() => {
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495421004133/zmtp_10k.htm",
+  let data = state.secFilingsData;
-  },
+
-  {
+  if (state.selectedYear) {
-    fileName: "2019 Annual Report",
+    data = data.filter((item) => item.year === state.selectedYear);
-    date: "April 15, 2020",
+  }
-    downloadUrl:
+
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495420004069/zmtp_10k.htm",
+  return data;
-  },
+});
-  {
+
-    fileName: "2018 Annual Report",
+// 分页数据
-    date: "April 1, 2019",
+const paginatedData = computed(() => {
-    downloadUrl:
+  const start = (state.currentPage - 1) * state.pageSize;
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495419003878/zmtp_10k.htm",
+  const end = start + state.pageSize;
-  },
+  return filteredData.value.slice(start, end);
-  {
+});
-    fileName: "2017 Annual Report",
+
-    date: "March 30, 2018",
+// 总页数
-    downloadUrl:
+const totalPages = computed(() => {
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495418003402/zmtp_10k.htm",
+  return Math.ceil(filteredData.value.length / state.pageSize);
-  },
+});
-  {
+
-    fileName: "2016 Annual Report",
+// 当前页起始索引
-    date: "March 22, 2017",
+const startIndex = computed(() => {
-    downloadUrl:
+  return (state.currentPage - 1) * state.pageSize + 1;
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495417002279/zmtp_10k.htm",
+});
-  },
+
-  {
+// 当前页结束索引
-    fileName: "2015 Annual Report",
+const endIndex = computed(() => {
-    date: "March 15, 2016",
+  const end = state.currentPage * state.pageSize;
-    downloadUrl:
+  return Math.min(end, filteredData.value.length);
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448816006596/zmtp_10k.htm",
+});
-  },
+
-  {
+// 处理年份变化
-    fileName: "2014 Annual Report",
+const handleYearChange = (value) => {
-    date: "March 24, 2015",
+  state.selectedYear = value;
-    downloadUrl:
+  state.currentPage = 1;
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448815001308/zmtp_10k.htm",
+};
-  },
+
-  {
+// 处理页码变化
-    fileName: "2013 Annual Report",
+const handlePageChange = (page) => {
-    date: "March 31, 2014",
+  state.currentPage = page;
-    downloadUrl:
+};
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448814001518/zmpt_10k.htm",
+
-  },
+// 处理每页条数变化
-  {
+const handlePageSizeChange = (size) => {
-    fileName: "2012 Annual Report",
+  state.pageSize = size;
-    date: "March 29, 2013",
+  state.currentPage = 1;
-    downloadUrl:
+};
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448813001584/zmtp_10k.htm",
-  },
-  {
-    fileName: "2011 Annual Report",
-    date: "March 30, 2012",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448812001548/zoom_10k.htm",
-  },
-  {
-    fileName: "2010 Annual Report",
-    date: "March 29, 2011",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448811000969/zmtp_10k.htm",
-  },
-  {
-    fileName: "2009 Annual Report",
-    date: "March 31, 2010",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448810001043/zmtp_10k.htm",
-  },
-]);
 </script>
 
 <style scoped lang="scss">
@@ -171,117 +320,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 {
-    width: 25%;
-    text-align: right;
-    margin-right: 50px;
-  }
 }
 
-.pdf-icon {
+.pagination-info {
-  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/size1440/index.vue

@@ -1,168 +1,110 @@
 <template>
   <div class="page-container">
-    <div class="financials-container">
+    <div class="sec-filing-detail-container">
       <!-- 标题 -->
-      <div class="financials-title">
+      <div class="page-title">SEC Filing Details</div>
-        {{ t("financialinformation.secfilings.title") }}
+
+      <!-- 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 部分 -->
-      <section class="section">
+      <div class="section">
-        <div class="section-title">
+        <h2 class="section-title">Filing Formats</h2>
-          {{ t("financialinformation.secfilings.overview.title") }}
+        <div class="formats-list">
-        </div>
+          <div class="format-item">
-        <p
+            <img :src="iconLink" alt="link" class="format-icon" />
-          class="overview-text"
+            <a :href="filingData.htmlLink" class="format-link" target="_blank"
-          v-html="t('financialinformation.secfilings.overview.desc')"
+              >View HTML</a
-        ></p>
-      </section>
-
-      <!-- 年度报告 -->
-      <section class="section">
-        <div class="section-title">
-          {{ t("financialinformation.secfilings.annual_reports.title") }}
-        </div>
-
-        <!-- 报告表格 -->
-        <div class="reports-table">
-          <div class="table-header">
-            <div class="column file-name">
-              {{
-                t("financialinformation.secfilings.annual_reports.file_name")
-              }}
-            </div>
-            <div class="column date">
-              {{ t("financialinformation.secfilings.annual_reports.date") }}
-            </div>
-            <div class="column download"></div>
-          </div>
-
-          <!-- 报告列表 -->
-          <div class="reports-list">
-            <div
-              class="table-row"
-              v-for="(report, index) in annualReports"
-              :key="index"
             >
-              <div class="column file-name">{{ report.fileName }}</div>
-              <div class="column date">{{ report.date }}</div>
-              <div class="column download">
-                <a :href="report.downloadUrl" class="download-link">{{
-                  t("financialinformation.secfilings.annual_reports.view")
-                }}</a>
-              </div>
-            </div>
           </div>
         </div>
-      </section>
+      </div>
+
+      <!-- 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 } from "vue";
+import { ref, onMounted } from "vue";
-import { useI18n } from "vue-i18n";
+import iconLink from "@/assets/image/icon/icon-link.png";
+import { fileList } from "@/dict/secFiles.js";
+import { useRoute } from "vue-router";
 
-const { t } = useI18n();
+// 这里可以根据路由参数或props获取具体的文件详情
-// 年度报告数据
+const filingData = ref({
-const annualReports = ref([
+  form: "",
-  {
+  filingDate: "",
-    fileName: "2024 Annual Report",
+  formDescription: "",
-    date: "April 10, 2025",
+  company: "",
-    downloadUrl:
+  issuer: "",
-      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912625002538/fieeinc_10k.htm",
+  htmlLink: "#",
-  },
+});
-  {
+
-    fileName: "2023 Annual Report",
+const route = useRoute();
-    date: "April 12, 2024",
+
-    downloadUrl:
+onMounted(() => {
-      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912624002449/miniminc_10k.htm",
+  const { idx } = route.query;
-  },
+  const file = fileList.find((item) => item.idx == idx);
-  {
+  if (file) {
-    fileName: "2022 Annual Report",
+    filingData.value = {
-    date: "March 31, 2023",
+      form: file.form,
-    downloadUrl:
+      filingDate: file.filingDate,
-      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000149315223010335/form10-k.htm",
+      formDescription: file.formDescription,
-  },
+      htmlLink: file.fileLink || "#",
-  {
+      dataFiles: file.dataFiles || [],
-    fileName: "2021 Annual Report",
+      company: "FiEE, Inc. ",
-    date: "March 31, 2022",
+      issuer: "FiEE, Inc. ",
-    downloadUrl:
+    };
-      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000149315222008365/form10-k.htm",
+  }
-  },
+  console.log(filingData.value);
-  {
+});
-    fileName: "2020 Annual Report",
-    date: "April 13, 2021",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495421004133/zmtp_10k.htm",
-  },
-  {
-    fileName: "2019 Annual Report",
-    date: "April 15, 2020",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495420004069/zmtp_10k.htm",
-  },
-  {
-    fileName: "2018 Annual Report",
-    date: "April 1, 2019",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495419003878/zmtp_10k.htm",
-  },
-  {
-    fileName: "2017 Annual Report",
-    date: "March 30, 2018",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495418003402/zmtp_10k.htm",
-  },
-  {
-    fileName: "2016 Annual Report",
-    date: "March 22, 2017",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495417002279/zmtp_10k.htm",
-  },
-  {
-    fileName: "2015 Annual Report",
-    date: "March 15, 2016",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448816006596/zmtp_10k.htm",
-  },
-  {
-    fileName: "2014 Annual Report",
-    date: "March 24, 2015",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448815001308/zmtp_10k.htm",
-  },
-  {
-    fileName: "2013 Annual Report",
-    date: "March 31, 2014",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448814001518/zmpt_10k.htm",
-  },
-  {
-    fileName: "2012 Annual Report",
-    date: "March 29, 2013",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448813001584/zmtp_10k.htm",
-  },
-  {
-    fileName: "2011 Annual Report",
-    date: "March 30, 2012",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448812001548/zoom_10k.htm",
-  },
-  {
-    fileName: "2010 Annual Report",
-    date: "March 29, 2011",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448811000969/zmtp_10k.htm",
-  },
-  {
-    fileName: "2009 Annual Report",
-    date: "March 31, 2010",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448810001043/zmtp_10k.htm",
-  },
-]);
 </script>
 
 <style scoped lang="scss">
@@ -171,117 +113,89 @@ 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-filing-detail-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 {
-  margin-bottom: 60px;
+  margin-bottom: 40px;
 }
 
 .section-title {
   font-size: 18px;
-  margin-bottom: 20px;
+  font-weight: bold;
   color: #333;
-}
-
-.overview-text {
-  font-size: 16px;
-  line-height: 1.6;
-  color: #333;
-  margin-bottom: 30px;
-}
-
-.tabs {
-  display: flex;
   margin-bottom: 20px;
 }
 
-.tab {
+.details-grid {
-  padding: 10px 20px;
+  display: grid;
-  font-weight: bold;
+  gap: 15px;
-  cursor: pointer;
-  border-bottom: 2px solid transparent;
-
-  &.active {
-    border-bottom: 2px solid #333;
-  }
 }
 
-.reports-table {
+.detail-item {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-.table-header {
   display: flex;
-  padding: 10px 0;
+  align-items: flex-start;
-  border-bottom: 1px solid #ccc;
+  gap: 10px;
+}
+
+.detail-label {
   font-weight: bold;
-  justify-content: space-between;
+  color: #333;
+  min-width: 150px;
+  flex-shrink: 0;
 }
 
-.table-row {
+.detail-value {
-  display: flex;
+  color: #333;
-  padding: 15px 0;
+  line-height: 1.5;
-  border-bottom: 1px solid #eee;
-  align-items: center;
-  justify-content: space-between;
-}
-.reports-list {
-  // max-height: 600px;
-  // overflow-y: auto;
-}
-.column {
-  &.file-name {
-    width: 25%;
-  }
-  &.date {
-    width: 25%;
-  }
-
-  &.download {
-    width: 25%;
-    text-align: right;
-    margin-right: 50px;
-  }
-}
-
-.pdf-icon {
-  width: 36px;
-  height: 36px;
-}
-
-.download-link {
-  color: #0078d7;
-  text-decoration: none;
-
-  &:hover {
-    text-decoration: underline;
-  }
-}
-
-.sec-text {
-  font-size: 16px;
-  line-height: 1.6;
 }
 
 .link {
-  color: #f00;
+  color: #0078d7;
-  text-decoration: none;
+  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: underline;
+    text-decoration: none;
   }
 }
 </style>

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

@@ -74,7 +74,7 @@
 <script setup>
 import { ref, onMounted } from "vue";
 import iconLink from "@/assets/image/icon/icon-link.png";
-import { fileList } from "@/dict/secTestData.js";
+import { fileList } from "@/dict/secFiles.js";
 import { useRoute } from "vue-router";
 
 // 这里可以根据路由参数或props获取具体的文件详情
@@ -90,20 +90,19 @@ const filingData = ref({
 const route = useRoute();
 
 onMounted(() => {
-  const { filingDate } = route.query;
+  const { idx } = route.query;
-  const file = fileList.find((item) => item.filingDate === filingDate);
+  const file = fileList.find((item) => item.idx == idx);
   if (file) {
     filingData.value = {
       form: file.form,
       filingDate: file.filingDate,
-      formDescription: file.description,
+      formDescription: file.formDescription,
-      company: file.company,
+      htmlLink: file.fileLink || "#",
-      issuer: file.issuer,
-      htmlLink: file.link || "#",
       dataFiles: file.dataFiles || [],
+      company: "FiEE, Inc. ",
+      issuer: "FiEE, Inc. ",
     };
   }
-  console.log(filingData.value);
 });
 </script>
 
@@ -120,7 +119,6 @@ onMounted(() => {
 .sec-filing-detail-container {
   max-width: 1200px;
   margin: 0 auto;
-  background: white;
   padding: 40px;
 }
 

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

@@ -1,286 +1,200 @@
 <template>
   <div class="page-container">
-    <div class="financials-container">
+    <div class="sec-filing-detail-container">
       <!-- 标题 -->
-      <div class="financials-title">
+      <div class="page-title">SEC Filing Details</div>
-        {{ t("financialinformation.secfilings.title") }}
+
+      <!-- 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 部分 -->
-      <section class="section">
+      <div class="section">
-        <div class="section-title">
+        <h2 class="section-title">Filing Formats</h2>
-          {{ t("financialinformation.secfilings.overview.title") }}
+        <div class="formats-list">
-        </div>
+          <div class="format-item">
-        <p
+            <img :src="iconLink" alt="link" class="format-icon" />
-          class="overview-text"
+            <a :href="filingData.htmlLink" class="format-link" target="_blank"
-          v-html="t('financialinformation.secfilings.overview.desc')"
+              >View HTML</a
-        ></p>
-      </section>
-
-      <!-- 年度报告 -->
-      <section class="section">
-        <div class="section-title">
-          {{ t("financialinformation.secfilings.annual_reports.title") }}
-        </div>
-
-        <!-- 报告表格 -->
-        <div class="reports-table">
-          <div class="table-header">
-            <div class="column file-name">
-              {{
-                t("financialinformation.secfilings.annual_reports.file_name")
-              }}
-            </div>
-            <div class="column date">
-              {{ t("financialinformation.secfilings.annual_reports.date") }}
-            </div>
-            <div class="column download"></div>
-          </div>
-
-          <!-- 报告列表 -->
-          <div class="reports-list">
-            <div
-              class="table-row"
-              v-for="(report, index) in annualReports"
-              :key="index"
             >
-              <div class="column file-name">{{ report.fileName }}</div>
-              <div class="column date">{{ report.date }}</div>
-              <div class="column download">
-                <a :href="report.downloadUrl" class="download-link">{{
-                  t("financialinformation.secfilings.annual_reports.view")
-                }}</a>
-              </div>
-            </div>
           </div>
         </div>
-      </section>
+      </div>
+
+      <!-- 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 } from "vue";
+import { ref, onMounted } from "vue";
-import { useI18n } from "vue-i18n";
+import iconLink from "@/assets/image/icon/icon-link.png";
+import { fileList } from "@/dict/secFiles.js";
+import { useRoute } from "vue-router";
 
-const { t } = useI18n();
+// 这里可以根据路由参数或props获取具体的文件详情
+const filingData = ref({
+  form: "",
+  filingDate: "",
+  formDescription: "",
+  company: "",
+  issuer: "",
+  htmlLink: "#",
+});
 
-// 年度报告数据
+const route = useRoute();
-const annualReports = ref([
+
-  {
+onMounted(() => {
-    fileName: "2024 Annual Report",
+  const { idx } = route.query;
-    date: "April 10, 2025",
+  const file = fileList.find((item) => item.idx == idx);
-    downloadUrl:
+  if (file) {
-      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912625002538/fieeinc_10k.htm",
+    filingData.value = {
-  },
+      form: file.form,
-  {
+      filingDate: file.filingDate,
-    fileName: "2023 Annual Report",
+      formDescription: file.formDescription,
-    date: "April 12, 2024",
+      htmlLink: file.fileLink || "#",
-    downloadUrl:
+      dataFiles: file.dataFiles || [],
-      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912624002449/miniminc_10k.htm",
+      company: "FiEE, Inc. ",
-  },
+      issuer: "FiEE, Inc. ",
-  {
+    };
-    fileName: "2022 Annual Report",
+  }
-    date: "March 31, 2023",
+  console.log(filingData.value);
-    downloadUrl:
+});
-      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000149315223010335/form10-k.htm",
-  },
-  {
-    fileName: "2021 Annual Report",
-    date: "March 31, 2022",
-    downloadUrl:
-      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000149315222008365/form10-k.htm",
-  },
-  {
-    fileName: "2020 Annual Report",
-    date: "April 13, 2021",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495421004133/zmtp_10k.htm",
-  },
-  {
-    fileName: "2019 Annual Report",
-    date: "April 15, 2020",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495420004069/zmtp_10k.htm",
-  },
-  {
-    fileName: "2018 Annual Report",
-    date: "April 1, 2019",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495419003878/zmtp_10k.htm",
-  },
-  {
-    fileName: "2017 Annual Report",
-    date: "March 30, 2018",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495418003402/zmtp_10k.htm",
-  },
-  {
-    fileName: "2016 Annual Report",
-    date: "March 22, 2017",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495417002279/zmtp_10k.htm",
-  },
-  {
-    fileName: "2015 Annual Report",
-    date: "March 15, 2016",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448816006596/zmtp_10k.htm",
-  },
-  {
-    fileName: "2014 Annual Report",
-    date: "March 24, 2015",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448815001308/zmtp_10k.htm",
-  },
-  {
-    fileName: "2013 Annual Report",
-    date: "March 31, 2014",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448814001518/zmpt_10k.htm",
-  },
-  {
-    fileName: "2012 Annual Report",
-    date: "March 29, 2013",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448813001584/zmtp_10k.htm",
-  },
-  {
-    fileName: "2011 Annual Report",
-    date: "March 30, 2012",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448812001548/zoom_10k.htm",
-  },
-  {
-    fileName: "2010 Annual Report",
-    date: "March 29, 2011",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448811000969/zmtp_10k.htm",
-  },
-  {
-    fileName: "2009 Annual Report",
-    date: "March 31, 2010",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448810001043/zmtp_10k.htm",
-  },
-]);
 </script>
 
 <style scoped lang="scss">
 .page-container {
-  background-image: url("@/assets/image/bg-375.png");
+  background-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-filing-detail-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 {
-  margin-bottom: 60px;
+  margin-bottom: 40px;
 }
 
 .section-title {
   font-size: 92px;
-  font-weight: 600;
+  font-weight: bold;
-  margin-bottom: 20px;
   color: #333;
-}
-
-.overview-text {
-  font-size: 72px;
-  line-height: 1.6;
-  color: #333;
-  margin-bottom: 30px;
-}
-
-.tabs {
-  display: flex;
   margin-bottom: 20px;
 }
 
-.tab {
+.details-grid {
-  padding: 10px 20px;
+  display: grid;
-  font-weight: bold;
+  gap: 30px;
-  cursor: pointer;
-  border-bottom: 2px solid transparent;
-
-  &.active {
-    border-bottom: 2px solid #333;
-  }
 }
 
-.reports-table {
+.detail-item {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-.table-header {
   display: flex;
-  padding: 10px 0;
+  align-items: flex-start;
-  border-bottom: 1px solid #ccc;
+  gap: 40px;
+}
+
+.detail-label {
   font-weight: bold;
-  justify-content: space-between;
+  color: #333;
+  min-width: 150px;
+  flex-shrink: 0;
 }
 
-.table-row {
+.detail-value {
-  display: flex;
+  color: #333;
-  padding: 45px 0;
+  line-height: 1.5;
-  border-bottom: 1px solid #eee;
-  align-items: center;
-  justify-content: space-between;
-}
-.reports-list {
-  // max-height: 600px;
-  // overflow-y: auto;
-}
-.column {
-  &.file-name {
-    width: 35%;
-  }
-  &.date {
-    width: 35%;
-  }
-  &.download {
-    margin-right: 100px;
-  }
-}
-
-.pdf-icon {
-  width: 36px;
-  height: 36px;
-}
-
-.download-link {
-  color: #0078d7;
-  text-decoration: none;
-
-  &:hover {
-    text-decoration: underline;
-  }
-}
-
-.sec-text {
-  font-size: 72px;
-  line-height: 1.6;
 }
 
 .link {
-  color: #f00;
+  color: #0078d7;
-  text-decoration: none;
+  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: underline;
+    text-decoration: none;
   }
 }
 </style>

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

@@ -1,168 +1,110 @@
 <template>
   <div class="page-container">
-    <div class="financials-container">
+    <div class="sec-filing-detail-container">
       <!-- 标题 -->
-      <div class="financials-title">
+      <div class="page-title">SEC Filing Details</div>
-        {{ t("financialinformation.secfilings.title") }}
+
+      <!-- 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 部分 -->
-      <section class="section">
+      <div class="section">
-        <div class="section-title">
+        <h2 class="section-title">Filing Formats</h2>
-          {{ t("financialinformation.secfilings.overview.title") }}
+        <div class="formats-list">
-        </div>
+          <div class="format-item">
-        <p
+            <img :src="iconLink" alt="link" class="format-icon" />
-          class="overview-text"
+            <a :href="filingData.htmlLink" class="format-link" target="_blank"
-          v-html="t('financialinformation.secfilings.overview.desc')"
+              >View HTML</a
-        ></p>
-      </section>
-
-      <!-- 年度报告 -->
-      <section class="section">
-        <div class="section-title">
-          {{ t("financialinformation.secfilings.annual_reports.title") }}
-        </div>
-
-        <!-- 报告表格 -->
-        <div class="reports-table">
-          <div class="table-header">
-            <div class="column file-name">
-              {{
-                t("financialinformation.secfilings.annual_reports.file_name")
-              }}
-            </div>
-            <div class="column date">
-              {{ t("financialinformation.secfilings.annual_reports.date") }}
-            </div>
-            <div class="column download"></div>
-          </div>
-
-          <!-- 报告列表 -->
-          <div class="reports-list">
-            <div
-              class="table-row"
-              v-for="(report, index) in annualReports"
-              :key="index"
             >
-              <div class="column file-name">{{ report.fileName }}</div>
-              <div class="column date">{{ report.date }}</div>
-              <div class="column download">
-                <a :href="report.downloadUrl" class="download-link">{{
-                  t("financialinformation.secfilings.annual_reports.view")
-                }}</a>
-              </div>
-            </div>
           </div>
         </div>
-      </section>
+      </div>
+
+      <!-- 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 } from "vue";
+import { ref, onMounted } from "vue";
-import { useI18n } from "vue-i18n";
+import iconLink from "@/assets/image/icon/icon-link.png";
+import { fileList } from "@/dict/secFiles.js";
+import { useRoute } from "vue-router";
 
-const { t } = useI18n();
+// 这里可以根据路由参数或props获取具体的文件详情
-// 年度报告数据
+const filingData = ref({
-const annualReports = ref([
+  form: "",
-  {
+  filingDate: "",
-    fileName: "2024 Annual Report",
+  formDescription: "",
-    date: "April 10, 2025",
+  company: "",
-    downloadUrl:
+  issuer: "",
-      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912625002538/fieeinc_10k.htm",
+  htmlLink: "#",
-  },
+});
-  {
+
-    fileName: "2023 Annual Report",
+const route = useRoute();
-    date: "April 12, 2024",
+
-    downloadUrl:
+onMounted(() => {
-      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912624002449/miniminc_10k.htm",
+  const { idx } = route.query;
-  },
+  const file = fileList.find((item) => item.idx == idx);
-  {
+  if (file) {
-    fileName: "2022 Annual Report",
+    filingData.value = {
-    date: "March 31, 2023",
+      form: file.form,
-    downloadUrl:
+      filingDate: file.filingDate,
-      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000149315223010335/form10-k.htm",
+      formDescription: file.formDescription,
-  },
+      htmlLink: file.fileLink || "#",
-  {
+      dataFiles: file.dataFiles || [],
-    fileName: "2021 Annual Report",
+      company: "FiEE, Inc. ",
-    date: "March 31, 2022",
+      issuer: "FiEE, Inc. ",
-    downloadUrl:
+    };
-      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000149315222008365/form10-k.htm",
+  }
-  },
+  console.log(filingData.value);
-  {
+});
-    fileName: "2020 Annual Report",
-    date: "April 13, 2021",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495421004133/zmtp_10k.htm",
-  },
-  {
-    fileName: "2019 Annual Report",
-    date: "April 15, 2020",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495420004069/zmtp_10k.htm",
-  },
-  {
-    fileName: "2018 Annual Report",
-    date: "April 1, 2019",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495419003878/zmtp_10k.htm",
-  },
-  {
-    fileName: "2017 Annual Report",
-    date: "March 30, 2018",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495418003402/zmtp_10k.htm",
-  },
-  {
-    fileName: "2016 Annual Report",
-    date: "March 22, 2017",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495417002279/zmtp_10k.htm",
-  },
-  {
-    fileName: "2015 Annual Report",
-    date: "March 15, 2016",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448816006596/zmtp_10k.htm",
-  },
-  {
-    fileName: "2014 Annual Report",
-    date: "March 24, 2015",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448815001308/zmtp_10k.htm",
-  },
-  {
-    fileName: "2013 Annual Report",
-    date: "March 31, 2014",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448814001518/zmpt_10k.htm",
-  },
-  {
-    fileName: "2012 Annual Report",
-    date: "March 29, 2013",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448813001584/zmtp_10k.htm",
-  },
-  {
-    fileName: "2011 Annual Report",
-    date: "March 30, 2012",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448812001548/zoom_10k.htm",
-  },
-  {
-    fileName: "2010 Annual Report",
-    date: "March 29, 2011",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448811000969/zmtp_10k.htm",
-  },
-  {
-    fileName: "2009 Annual Report",
-    date: "March 31, 2010",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448810001043/zmtp_10k.htm",
-  },
-]);
 </script>
 
 <style scoped lang="scss">
@@ -171,117 +113,89 @@ const annualReports = ref([
   background-size: 100% 100%;
   background-position: center;
   background-repeat: no-repeat;
+  min-height: 100vh;
+  padding: 20px;
 }
-.financials-container {
+
+.sec-filing-detail-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 {
-  margin-bottom: 60px;
+  margin-bottom: 40px;
 }
 
 .section-title {
   font-size: 50px;
-  margin-bottom: 20px;
+  font-weight: bold;
   color: #333;
-}
-
-.overview-text {
-  font-size: 40px;
-  line-height: 1.6;
-  color: #333;
-  margin-bottom: 30px;
-}
-
-.tabs {
-  display: flex;
   margin-bottom: 20px;
 }
 
-.tab {
+.details-grid {
-  padding: 10px 20px;
+  display: grid;
-  font-weight: bold;
+  gap: 25px;
-  cursor: pointer;
-  border-bottom: 2px solid transparent;
-
-  &.active {
-    border-bottom: 2px solid #333;
-  }
 }
 
-.reports-table {
+.detail-item {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-.table-header {
   display: flex;
-  padding: 10px 0;
+  align-items: flex-start;
-  border-bottom: 1px solid #ccc;
+  gap: 20px;
+}
+
+.detail-label {
   font-weight: bold;
-  justify-content: space-between;
+  color: #333;
+  min-width: 150px;
+  flex-shrink: 0;
 }
 
-.table-row {
+.detail-value {
-  display: flex;
+  color: #333;
-  padding: 15px 0;
+  line-height: 1.5;
-  border-bottom: 1px solid #eee;
-  align-items: center;
-  justify-content: space-between;
-}
-.reports-list {
-  // max-height: 600px;
-  // overflow-y: auto;
-}
-.column {
-  &.file-name {
-    width: 25%;
-  }
-  &.date {
-    width: 25%;
-  }
-
-  &.download {
-    width: 25%;
-    text-align: right;
-    margin-right: 50px;
-  }
-}
-
-.pdf-icon {
-  width: 36px;
-  height: 36px;
-}
-
-.download-link {
-  color: #0078d7;
-  text-decoration: none;
-
-  &:hover {
-    text-decoration: underline;
-  }
-}
-
-.sec-text {
-  font-size: 40px;
-  line-height: 1.6;
 }
 
 .link {
-  color: #f00;
+  color: #0078d7;
-  text-decoration: none;
+  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: underline;
+    text-decoration: none;
   }
 }
 </style>

src/views/govern/size1440/index.vue

@@ -72,12 +72,12 @@
 
 <script setup>
 import { reactive } from "vue";
-import quarterlyPdfone from "@/assets/file/AUDIT COMMITTEE CHARTER.pdf";
+import quarterlyPdfone from "@/assets/file/FiEE, Inc._Audit Committee Charter.pdf";
-import quarterlyPdftwo from "@/assets/file/CODE OF BUSINESS CONDUCT AND ETHICS.pdf";
+import quarterlyPdftwo from "@/assets/file/FiEE, Inc. _Code of Business Conduct and Ethics.pdf";
 
-import quarterlyPdfthree from "@/assets/file/COMPENSATION COMMITTEE CHARTER.pdf";
+import quarterlyPdfthree from "@/assets/file/FiEE, Inc._Compensation Committee Charter.pdf";
 
-import quarterlyPdffour from "@/assets/file/NOMINATING AND CORPORATE GOVERNANCE COMMITTEE CHARTER.pdf";
+import quarterlyPdffour from "@/assets/file/FiEE, Inc. _Nominating and Corporate Governance Committee Charter.pdf";
 
 const state = reactive({
   list: [

src/views/govern/size1920/index.vue

@@ -73,12 +73,12 @@
 
 <script setup>
 import { reactive } from "vue";
-import quarterlyPdfone from "@/assets/file/AUDIT COMMITTEE CHARTER.pdf";
+import quarterlyPdfone from "@/assets/file/FiEE, Inc._Audit Committee Charter.pdf";
-import quarterlyPdftwo from "@/assets/file/CODE OF BUSINESS CONDUCT AND ETHICS.pdf";
+import quarterlyPdftwo from "@/assets/file/FiEE, Inc. _Code of Business Conduct and Ethics.pdf";
 
-import quarterlyPdfthree from "@/assets/file/COMPENSATION COMMITTEE CHARTER.pdf";
+import quarterlyPdfthree from "@/assets/file/FiEE, Inc._Compensation Committee Charter.pdf";
 
-import quarterlyPdffour from "@/assets/file/NOMINATING AND CORPORATE GOVERNANCE COMMITTEE CHARTER.pdf";
+import quarterlyPdffour from "@/assets/file/FiEE, Inc. _Nominating and Corporate Governance Committee Charter.pdf";
 
 const state = reactive({
   list: [

src/views/govern/size375/index.vue

@@ -68,12 +68,12 @@
 
 <script setup>
 import { reactive } from "vue";
-import quarterlyPdfone from "@/assets/file/AUDIT COMMITTEE CHARTER.pdf";
+import quarterlyPdfone from "@/assets/file/FiEE, Inc._Audit Committee Charter.pdf";
-import quarterlyPdftwo from "@/assets/file/CODE OF BUSINESS CONDUCT AND ETHICS.pdf";
+import quarterlyPdftwo from "@/assets/file/FiEE, Inc. _Code of Business Conduct and Ethics.pdf";
 
-import quarterlyPdfthree from "@/assets/file/COMPENSATION COMMITTEE CHARTER.pdf";
+import quarterlyPdfthree from "@/assets/file/FiEE, Inc._Compensation Committee Charter.pdf";
 
-import quarterlyPdffour from "@/assets/file/NOMINATING AND CORPORATE GOVERNANCE COMMITTEE CHARTER.pdf";
+import quarterlyPdffour from "@/assets/file/FiEE, Inc. _Nominating and Corporate Governance Committee Charter.pdf";
 
 const state = reactive({
   list: [

src/views/govern/size768/index.vue

@@ -68,12 +68,12 @@
 
 <script setup>
 import { reactive } from "vue";
-import quarterlyPdfone from "@/assets/file/AUDIT COMMITTEE CHARTER.pdf";
+import quarterlyPdfone from "@/assets/file/FiEE, Inc._Audit Committee Charter.pdf";
-import quarterlyPdftwo from "@/assets/file/CODE OF BUSINESS CONDUCT AND ETHICS.pdf";
+import quarterlyPdftwo from "@/assets/file/FiEE, Inc. _Code of Business Conduct and Ethics.pdf";
 
-import quarterlyPdfthree from "@/assets/file/COMPENSATION COMMITTEE CHARTER.pdf";
+import quarterlyPdfthree from "@/assets/file/FiEE, Inc._Compensation Committee Charter.pdf";
 
-import quarterlyPdffour from "@/assets/file/NOMINATING AND CORPORATE GOVERNANCE COMMITTEE CHARTER.pdf";
+import quarterlyPdffour from "@/assets/file/FiEE, Inc. _Nominating and Corporate Governance Committee Charter.pdf";
 
 const state = reactive({
   list: [

src/views/myHome/size1440/index.vue

@@ -66,24 +66,26 @@
       <div class="news-card">
         <!-- <div class="news-date">De 15. 2023</div> -->
         <!-- <h3 class="news-title">{{ $t("HOME.CONTAINY.NEWS.LATEST_TITLE") }}</h3> -->
-        <p style="font-size: 18px">
+        <div style="font-size: 18px">
-          {{ $t("HOME.CONTAINY.NEWS.TITLETWO") }}
+          <div>May 30, 2025 EDT</div>
-        </p>
+
-        <p style="font-size: 18px">
+          <div style="font-size: 18px">
-          {{ $t("HOME.CONTAINY.NEWS.TITLETHTEE") }}
+            FiEE, Inc. Announces Relisting on Nasdaq
-        </p>
+          </div>
-        <p style="font-size: 18px">
+
-          {{ $t("HOME.CONTAINY.NEWS.CONTENTTHREE") }}
+          <div
-        </p>
+            style="font-size: 18px"
-        <p style="font-size: 18px">
+            class="cursor-pointer"
-          {{ $t("HOME.CONTAINY.NEWS.CONTENTFOUR") }}
+            @click="handleLink('/news')"
-        </p>
+          >
-        <p style="font-size: 18px">
+            View Press Release<img
-          {{ $t("HOME.CONTAINY.NEWS.CONTENTFIVE") }}
+              class="ml-[10px]"
-        </p>
+              src="@/assets/image/icon/icon-new.png"
-        <!-- <a href="#" class="news-link"
+              alt=""
-          >{{ $t("HOME.CONTAINY.NEWS.READ_MORE") }} →</a
+              style="width: 20px; height: 20px"
-        > -->
+            />
+          </div>
+        </div>
       </div>
     </section>
     <!-- 新增：股票信息与活动预告双栏模块 -->
@@ -235,6 +237,11 @@ onUnmounted(() => {
     observer.disconnect();
   }
 });
+import { useRouter } from "vue-router";
+const router = useRouter();
+const handleLink = (link) => {
+  router.push(link);
+};
 </script>
 
 <style scoped>
@@ -527,13 +534,6 @@ onUnmounted(() => {
   margin-bottom: 15px;
 }
 
-.news-excerpt {
-  color: black;
-  line-height: 0.8;
-  margin-bottom: 20px;
-  font-size: 18px;
-}
-
 .news-link {
   color: #895bff;
   font-weight: 600;

src/views/myHome/size1920/index.vue

@@ -65,24 +65,27 @@
       <div class="news-card">
         <!-- <div class="news-date">De 15. 2023</div> -->
         <!-- <h3 class="news-title">{{ $t("HOME.CONTAINY.NEWS.LATEST_TITLE") }}</h3> -->
-        <p class="news-excerpt">
+
-          {{ $t("HOME.CONTAINY.NEWS.TITLETWO") }}
+        <div style="font-size: 18px">
-        </p>
+          <div>May 30, 2025 EDT</div>
-        <p class="news-excerpt">
+
-          {{ $t("HOME.CONTAINY.NEWS.TITLETHTEE") }}
+          <div style="font-size: 18px">
-        </p>
+            FiEE, Inc. Announces Relisting on Nasdaq
-        <p class="news-excerpt">
+          </div>
-          {{ $t("HOME.CONTAINY.NEWS.CONTENTTHREE") }}
+
-        </p>
+          <div
-        <p class="news-excerpt">
+            style="font-size: 18px"
-          {{ $t("HOME.CONTAINY.NEWS.CONTENTFOUR") }}
+            class="cursor-pointer"
-        </p>
+            @click="handleLink('/news')"
-        <p class="news-excerpt">
+          >
-          {{ $t("HOME.CONTAINY.NEWS.CONTENTFIVE") }}
+            View Press Release<img
-        </p>
+              class="ml-[10px]"
-        <!-- <a href="#" class="news-link"
+              src="@/assets/image/icon/icon-new.png"
-          >{{ $t("HOME.CONTAINY.NEWS.READ_MORE") }} →</a
+              alt=""
-        > -->
+              style="width: 20px; height: 20px"
+            />
+          </div>
+        </div>
       </div>
     </section>
     <!-- 新增：股票信息与活动预告双栏模块 -->
@@ -224,6 +227,11 @@ onUnmounted(() => {
     observer.disconnect();
   }
 });
+import { useRouter } from "vue-router";
+const router = useRouter();
+const handleLink = (link) => {
+  router.push(link);
+};
 </script>
 
 <style scoped>

src/views/myHome/size375/index.vue

@@ -66,24 +66,26 @@
       <div class="news-card">
         <!-- <div class="news-date">De 15. 2023</div> -->
         <!-- <h3 class="news-title">{{ $t("HOME.CONTAINY.NEWS.LATEST_TITLE") }}</h3> -->
-        <p style="font-size: 18px">
+        <div style="font-size: 18px">
-          {{ $t("HOME.CONTAINY.NEWS.TITLETWO") }}
+          <div>May 30, 2025 EDT</div>
-        </p>
+
-        <p style="font-size: 18px">
+          <div style="font-size: 18px">
-          {{ $t("HOME.CONTAINY.NEWS.TITLETHTEE") }}
+            FiEE, Inc. Announces Relisting on Nasdaq
-        </p>
+          </div>
-        <p style="font-size: 18px">
+
-          {{ $t("HOME.CONTAINY.NEWS.CONTENTTHREE") }}
+          <div
-        </p>
+            style="font-size: 18px"
-        <p style="font-size: 18px">
+            class="cursor-pointer mt-[20px]"
-          {{ $t("HOME.CONTAINY.NEWS.CONTENTFOUR") }}
+            @click="handleLink('/news')"
-        </p>
+          >
-        <p style="font-size: 18px">
+            View Press Release<img
-          {{ $t("HOME.CONTAINY.NEWS.CONTENTFIVE") }}
+              class="ml-[10px]"
-        </p>
+              src="@/assets/image/icon/icon-new.png"
-        <!-- <a href="#" class="news-link"
+              alt=""
-          >{{ $t("HOME.CONTAINY.NEWS.READ_MORE") }} →</a
+              style="width: 20px; height: 20px"
-        > -->
+            />
+          </div>
+        </div>
       </div>
     </section>
     <!-- 新增：股票信息与活动预告双栏模块 -->
@@ -233,6 +235,11 @@ onUnmounted(() => {
     observer.disconnect();
   }
 });
+import { useRouter } from "vue-router";
+const router = useRouter();
+const handleLink = (link) => {
+  router.push(link);
+};
 </script>
 
 <style scoped>

src/views/myHome/size768/index.vue

@@ -66,24 +66,25 @@
       <div class="news-card">
         <!-- <div class="news-date">De 15. 2023</div> -->
         <!-- <h3 class="news-title">{{ $t("HOME.CONTAINY.NEWS.LATEST_TITLE") }}</h3> -->
-        <p style="font-size: 18px">
+        <div style="font-size: 18px">
-          {{ $t("HOME.CONTAINY.NEWS.TITLETWO") }}
+          <div>May 30, 2025 EDT</div>
-        </p>
+
-        <p style="font-size: 18px">
+          <div style="font-size: 18px">
-          {{ $t("HOME.CONTAINY.NEWS.TITLETHTEE") }}
+            FiEE, Inc. Announces Relisting on Nasdaq
-        </p>
+          </div>
-        <p style="font-size: 18px">
+          <div
-          {{ $t("HOME.CONTAINY.NEWS.CONTENTTHREE") }}
+            style="font-size: 18px"
-        </p>
+            class="cursor-pointer mt-[10px]"
-        <p style="font-size: 18px">
+            @click="handleLink('/news')"
-          {{ $t("HOME.CONTAINY.NEWS.CONTENTFOUR") }}
+          >
-        </p>
+            View Press Release<img
-        <p style="font-size: 18px">
+              class="ml-[10px]"
-          {{ $t("HOME.CONTAINY.NEWS.CONTENTFIVE") }}
+              src="@/assets/image/icon/icon-new.png"
-        </p>
+              alt=""
-        <!-- <a href="#" class="news-link"
+              style="width: 20px; height: 20px"
-          >{{ $t("HOME.CONTAINY.NEWS.READ_MORE") }} →</a
+            />
-        > -->
+          </div>
+        </div>
       </div>
     </section>
     <!-- 新增：股票信息与活动预告双栏模块 -->
@@ -235,6 +236,11 @@ onUnmounted(() => {
     observer.disconnect();
   }
 });
+import { useRouter } from "vue-router";
+const router = useRouter();
+const handleLink = (link) => {
+  router.push(link);
+};
 </script>
 
 <style scoped>

src/views/news/index.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="new-releases-page">
+    <component :is="viewComponent" />
+  </div>
+</template>
+<script setup>
+import size375 from "@/views/news/size375/index.vue";
+import size768 from "@/views/news/size768/index.vue";
+import size1440 from "@/views/news/size1440/index.vue";
+import size1920 from "@/views/news/size1920/index.vue";
+import { computed } from "vue";
+import { useWindowSize } from "@vueuse/core";
+
+const { width } = useWindowSize();
+const viewComponent = computed(() => {
+  const viewWidth = width.value;
+  if (viewWidth <= 450) {
+    return size375;
+  } else if (viewWidth <= 768) {
+    return size768;
+  } else if (viewWidth <= 1500) {
+    return size1440;
+  } else if (viewWidth <= 1920 || viewWidth > 1920) {
+    return size1920;
+  }
+});
+</script>
+
+<style scoped lang="scss"></style>

src/views/news/size1440/index.vue

@@ -0,0 +1,116 @@
+<template>
+  <div class="page-container">
+    <p style="font-size: 24px">
+      <strong>FiEE, Inc. Announces Relisting on Nasdaq</strong>
+    </p>
+    <p>May 30, 2025</p>
+    <p>
+      <em>Company will resume trading under its existing symbols “MINM” </em>
+    </p>
+    <p>
+      <strong>Hong Kong, May 30, 2025 </strong>— FiEE, Inc. (“FiEE, Inc.” or the
+      “Company”), a technology company integrating IoT, connectivity and AI to
+      redefine brand management solutions in the digital era, is pleased to
+      announce that The Nasdaq Stock Market LLC (“Nasdaq”) has approved its
+      application for the relisting of the Company’s ordinary shares. Trading is
+      expected to commence on Nasdaq at the opening of trading on Monday, 2
+      June, 2025 under the ticker symbol “MINM”.
+    </p>
+    <p>
+      <strong>Rafael Li, Chief Executive Officer of FiEE,</strong> commented,
+      "We are honored to announce our successful relisting on Nasdaq, a
+      significant milestone that reflects our unwavering commitment to
+      operational excellence and strategic growth. We extend our sincere
+      gratitude to the Nasdaq team for their prompt review and approval of our
+      application, affirming our compliance with all initial listing criteria.
+    </p>
+    <p>
+      FiEE, Inc. is currently undergoing a strategic transformation aimed at
+      capitalizing on broader market opportunities. Central to this evolution is
+      our integrated approach, where cyber-hardened IoT connectivity converges
+      with AI-driven content creation and audience targeting. This synergy is
+      designed to empower Key Opinion Leaders (KOLs) and brands to achieve
+      accelerated growth and deeper audience engagement. Leveraging
+      IoT-connectivity solutions, AI and big data analytics, we are capable to
+      deliver intelligent, multimedia and multilingual contents tailored to
+      diverse audiences. Coupling with AI targeting analysis, we enhance
+      audience targeting capabilities, ensuring effective content placement and
+      personalized promotions.
+    </p>
+    <p>
+      As we advance, our focus remains on continuous innovation and strategic
+      initiatives that drive long-term growth and shareholder value.”
+    </p>
+    <p><strong>About FiEE, Inc.</strong></p>
+    <p>
+      FiEE, Inc., (NASDAQ: MINM), formerly Minim, Inc., was founded in 1977. It
+      has a historical track record of delivering comprehensive WiFi/Software as
+      a Service platform in the market. After years of development, it made the
+      strategic decision to transition to a Software First Model in 2023 to
+      expand our technology portfolio and revenue streams. In 2025, FiEE, Inc.
+      rebranded itself as a technology company leveraging the expertise in IoT,
+      connectivity, and artificial intelligence ("AI") to explore new business
+      prospects and extend our global footprint.
+    </p>
+    <p>
+      Our services are structured into four key categories: Cloud-Managed
+      Connectivity (WiFi) Platform, IoT Hardware Sales &amp; Licensing, SAAS
+      Solutions, and Professional To-C and To-B Services &amp; 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.
+    </p>
+    <p>
+      <strong>Forward-Looking Statements</strong><br />This communication
+      contains forward-looking statements which include, but are not limited to,
+      statements regarding the Company’s listing of its ordinary shares on
+      Nasdaq; the impact of the listing; the Company’s business strategy,
+      including its strategic transformation; and the Company’s ability to drive
+      long-term growth and shareholder value. These forward-looking statements
+      are subject to the safe harbor provisions under the Private Securities
+      Litigation Reform Act of 1995. The Company’s expectations and beliefs
+      regarding these matters may not materialize. Actual outcomes and results
+      may differ materially from those contemplated by these forward-looking
+      statements as a result of uncertainties, risks, and changes in
+      circumstances, including but not limited to risks and uncertainties
+      related to: the ability of the Company to maintain compliance with the
+      Nasdaq continued listing standards; the impact of fluctuations in global
+      financial markets on the Company’s business and the actions it may take in
+      response thereto; the Company’s ability to execute its plans and
+      strategies; and the impact of government laws and regulations. Additional
+      risks and uncertainties that could cause actual outcomes and results to
+      differ materially from those contemplated by the forward-looking
+      statements are included under the caption “Risk Factors” in the Company’s
+      Quarterly Report on Form 10-Q for the quarter ended March 31, 2025 and
+      elsewhere in the Company’s subsequent reports on Form 10-K, Form 10-Q or
+      Form 8-K filed with the U.S. Securities and Exchange Commission from time
+      to time and available at www.sec.gov.
+    </p>
+    <p><strong>Media</strong></p>
+    <p><a href="mailto:fiee@dlkadvisory.com">fiee@dlkadvisory.com</a></p>
+    <p>Source: FiEE, Inc.</p>
+  </div>
+</template>
+
+<script setup>
+import { reactive } from "vue";
+import { NSelect, NInput, NButton } from "naive-ui";
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
+
+const state = reactive({});
+</script>
+
+<style scoped lang="scss">
+.page-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 40px;
+}
+</style>

src/views/news/size1920/index.vue

@@ -0,0 +1,116 @@
+<template>
+  <div class="page-container">
+    <p style="font-size: 24px">
+      <strong>FiEE, Inc. Announces Relisting on Nasdaq</strong>
+    </p>
+    <p>May 30, 2025</p>
+    <p>
+      <em>Company will resume trading under its existing symbols “MINM” </em>
+    </p>
+    <p>
+      <strong>Hong Kong, May 30, 2025 </strong>— FiEE, Inc. (“FiEE, Inc.” or the
+      “Company”), a technology company integrating IoT, connectivity and AI to
+      redefine brand management solutions in the digital era, is pleased to
+      announce that The Nasdaq Stock Market LLC (“Nasdaq”) has approved its
+      application for the relisting of the Company’s ordinary shares. Trading is
+      expected to commence on Nasdaq at the opening of trading on Monday, 2
+      June, 2025 under the ticker symbol “MINM”.
+    </p>
+    <p>
+      <strong>Rafael Li, Chief Executive Officer of FiEE,</strong> commented,
+      "We are honored to announce our successful relisting on Nasdaq, a
+      significant milestone that reflects our unwavering commitment to
+      operational excellence and strategic growth. We extend our sincere
+      gratitude to the Nasdaq team for their prompt review and approval of our
+      application, affirming our compliance with all initial listing criteria.
+    </p>
+    <p>
+      FiEE, Inc. is currently undergoing a strategic transformation aimed at
+      capitalizing on broader market opportunities. Central to this evolution is
+      our integrated approach, where cyber-hardened IoT connectivity converges
+      with AI-driven content creation and audience targeting. This synergy is
+      designed to empower Key Opinion Leaders (KOLs) and brands to achieve
+      accelerated growth and deeper audience engagement. Leveraging
+      IoT-connectivity solutions, AI and big data analytics, we are capable to
+      deliver intelligent, multimedia and multilingual contents tailored to
+      diverse audiences. Coupling with AI targeting analysis, we enhance
+      audience targeting capabilities, ensuring effective content placement and
+      personalized promotions.
+    </p>
+    <p>
+      As we advance, our focus remains on continuous innovation and strategic
+      initiatives that drive long-term growth and shareholder value.”
+    </p>
+    <p><strong>About FiEE, Inc.</strong></p>
+    <p>
+      FiEE, Inc., (NASDAQ: MINM), formerly Minim, Inc., was founded in 1977. It
+      has a historical track record of delivering comprehensive WiFi/Software as
+      a Service platform in the market. After years of development, it made the
+      strategic decision to transition to a Software First Model in 2023 to
+      expand our technology portfolio and revenue streams. In 2025, FiEE, Inc.
+      rebranded itself as a technology company leveraging the expertise in IoT,
+      connectivity, and artificial intelligence ("AI") to explore new business
+      prospects and extend our global footprint.
+    </p>
+    <p>
+      Our services are structured into four key categories: Cloud-Managed
+      Connectivity (WiFi) Platform, IoT Hardware Sales &amp; Licensing, SAAS
+      Solutions, and Professional To-C and To-B Services &amp; 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.
+    </p>
+    <p>
+      <strong>Forward-Looking Statements</strong><br />This communication
+      contains forward-looking statements which include, but are not limited to,
+      statements regarding the Company’s listing of its ordinary shares on
+      Nasdaq; the impact of the listing; the Company’s business strategy,
+      including its strategic transformation; and the Company’s ability to drive
+      long-term growth and shareholder value. These forward-looking statements
+      are subject to the safe harbor provisions under the Private Securities
+      Litigation Reform Act of 1995. The Company’s expectations and beliefs
+      regarding these matters may not materialize. Actual outcomes and results
+      may differ materially from those contemplated by these forward-looking
+      statements as a result of uncertainties, risks, and changes in
+      circumstances, including but not limited to risks and uncertainties
+      related to: the ability of the Company to maintain compliance with the
+      Nasdaq continued listing standards; the impact of fluctuations in global
+      financial markets on the Company’s business and the actions it may take in
+      response thereto; the Company’s ability to execute its plans and
+      strategies; and the impact of government laws and regulations. Additional
+      risks and uncertainties that could cause actual outcomes and results to
+      differ materially from those contemplated by the forward-looking
+      statements are included under the caption “Risk Factors” in the Company’s
+      Quarterly Report on Form 10-Q for the quarter ended March 31, 2025 and
+      elsewhere in the Company’s subsequent reports on Form 10-K, Form 10-Q or
+      Form 8-K filed with the U.S. Securities and Exchange Commission from time
+      to time and available at www.sec.gov.
+    </p>
+    <p><strong>Media</strong></p>
+    <p><a href="mailto:fiee@dlkadvisory.com">fiee@dlkadvisory.com</a></p>
+    <p>Source: FiEE, Inc.</p>
+  </div>
+</template>
+
+<script setup>
+import { reactive } from "vue";
+import { NSelect, NInput, NButton } from "naive-ui";
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
+
+const state = reactive({});
+</script>
+
+<style scoped lang="scss">
+.page-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 40px;
+}
+</style>

src/views/news/size375/index.vue

@@ -0,0 +1,116 @@
+<template>
+  <div class="page-container">
+    <p style="font-size: 24px">
+      <strong>FiEE, Inc. Announces Relisting on Nasdaq</strong>
+    </p>
+    <p>May 30, 2025</p>
+    <p>
+      <em>Company will resume trading under its existing symbols “MINM” </em>
+    </p>
+    <p>
+      <strong>Hong Kong, May 30, 2025 </strong>— FiEE, Inc. (“FiEE, Inc.” or the
+      “Company”), a technology company integrating IoT, connectivity and AI to
+      redefine brand management solutions in the digital era, is pleased to
+      announce that The Nasdaq Stock Market LLC (“Nasdaq”) has approved its
+      application for the relisting of the Company’s ordinary shares. Trading is
+      expected to commence on Nasdaq at the opening of trading on Monday, 2
+      June, 2025 under the ticker symbol “MINM”.
+    </p>
+    <p>
+      <strong>Rafael Li, Chief Executive Officer of FiEE,</strong> commented,
+      "We are honored to announce our successful relisting on Nasdaq, a
+      significant milestone that reflects our unwavering commitment to
+      operational excellence and strategic growth. We extend our sincere
+      gratitude to the Nasdaq team for their prompt review and approval of our
+      application, affirming our compliance with all initial listing criteria.
+    </p>
+    <p>
+      FiEE, Inc. is currently undergoing a strategic transformation aimed at
+      capitalizing on broader market opportunities. Central to this evolution is
+      our integrated approach, where cyber-hardened IoT connectivity converges
+      with AI-driven content creation and audience targeting. This synergy is
+      designed to empower Key Opinion Leaders (KOLs) and brands to achieve
+      accelerated growth and deeper audience engagement. Leveraging
+      IoT-connectivity solutions, AI and big data analytics, we are capable to
+      deliver intelligent, multimedia and multilingual contents tailored to
+      diverse audiences. Coupling with AI targeting analysis, we enhance
+      audience targeting capabilities, ensuring effective content placement and
+      personalized promotions.
+    </p>
+    <p>
+      As we advance, our focus remains on continuous innovation and strategic
+      initiatives that drive long-term growth and shareholder value.”
+    </p>
+    <p><strong>About FiEE, Inc.</strong></p>
+    <p>
+      FiEE, Inc., (NASDAQ: MINM), formerly Minim, Inc., was founded in 1977. It
+      has a historical track record of delivering comprehensive WiFi/Software as
+      a Service platform in the market. After years of development, it made the
+      strategic decision to transition to a Software First Model in 2023 to
+      expand our technology portfolio and revenue streams. In 2025, FiEE, Inc.
+      rebranded itself as a technology company leveraging the expertise in IoT,
+      connectivity, and artificial intelligence ("AI") to explore new business
+      prospects and extend our global footprint.
+    </p>
+    <p>
+      Our services are structured into four key categories: Cloud-Managed
+      Connectivity (WiFi) Platform, IoT Hardware Sales &amp; Licensing, SAAS
+      Solutions, and Professional To-C and To-B Services &amp; 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.
+    </p>
+    <p>
+      <strong>Forward-Looking Statements</strong><br />This communication
+      contains forward-looking statements which include, but are not limited to,
+      statements regarding the Company’s listing of its ordinary shares on
+      Nasdaq; the impact of the listing; the Company’s business strategy,
+      including its strategic transformation; and the Company’s ability to drive
+      long-term growth and shareholder value. These forward-looking statements
+      are subject to the safe harbor provisions under the Private Securities
+      Litigation Reform Act of 1995. The Company’s expectations and beliefs
+      regarding these matters may not materialize. Actual outcomes and results
+      may differ materially from those contemplated by these forward-looking
+      statements as a result of uncertainties, risks, and changes in
+      circumstances, including but not limited to risks and uncertainties
+      related to: the ability of the Company to maintain compliance with the
+      Nasdaq continued listing standards; the impact of fluctuations in global
+      financial markets on the Company’s business and the actions it may take in
+      response thereto; the Company’s ability to execute its plans and
+      strategies; and the impact of government laws and regulations. Additional
+      risks and uncertainties that could cause actual outcomes and results to
+      differ materially from those contemplated by the forward-looking
+      statements are included under the caption “Risk Factors” in the Company’s
+      Quarterly Report on Form 10-Q for the quarter ended March 31, 2025 and
+      elsewhere in the Company’s subsequent reports on Form 10-K, Form 10-Q or
+      Form 8-K filed with the U.S. Securities and Exchange Commission from time
+      to time and available at www.sec.gov.
+    </p>
+    <p><strong>Media</strong></p>
+    <p><a href="mailto:fiee@dlkadvisory.com">fiee@dlkadvisory.com</a></p>
+    <p>Source: FiEE, Inc.</p>
+  </div>
+</template>
+
+<script setup>
+import { reactive } from "vue";
+import { NSelect, NInput, NButton } from "naive-ui";
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
+
+const state = reactive({});
+</script>
+
+<style scoped lang="scss">
+.page-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 40px;
+}
+</style>

src/views/news/size768/index.vue

@@ -0,0 +1,116 @@
+<template>
+  <div class="page-container">
+    <p style="font-size: 24px">
+      <strong>FiEE, Inc. Announces Relisting on Nasdaq</strong>
+    </p>
+    <p>May 30, 2025</p>
+    <p>
+      <em>Company will resume trading under its existing symbols “MINM” </em>
+    </p>
+    <p>
+      <strong>Hong Kong, May 30, 2025 </strong>— FiEE, Inc. (“FiEE, Inc.” or the
+      “Company”), a technology company integrating IoT, connectivity and AI to
+      redefine brand management solutions in the digital era, is pleased to
+      announce that The Nasdaq Stock Market LLC (“Nasdaq”) has approved its
+      application for the relisting of the Company’s ordinary shares. Trading is
+      expected to commence on Nasdaq at the opening of trading on Monday, 2
+      June, 2025 under the ticker symbol “MINM”.
+    </p>
+    <p>
+      <strong>Rafael Li, Chief Executive Officer of FiEE,</strong> commented,
+      "We are honored to announce our successful relisting on Nasdaq, a
+      significant milestone that reflects our unwavering commitment to
+      operational excellence and strategic growth. We extend our sincere
+      gratitude to the Nasdaq team for their prompt review and approval of our
+      application, affirming our compliance with all initial listing criteria.
+    </p>
+    <p>
+      FiEE, Inc. is currently undergoing a strategic transformation aimed at
+      capitalizing on broader market opportunities. Central to this evolution is
+      our integrated approach, where cyber-hardened IoT connectivity converges
+      with AI-driven content creation and audience targeting. This synergy is
+      designed to empower Key Opinion Leaders (KOLs) and brands to achieve
+      accelerated growth and deeper audience engagement. Leveraging
+      IoT-connectivity solutions, AI and big data analytics, we are capable to
+      deliver intelligent, multimedia and multilingual contents tailored to
+      diverse audiences. Coupling with AI targeting analysis, we enhance
+      audience targeting capabilities, ensuring effective content placement and
+      personalized promotions.
+    </p>
+    <p>
+      As we advance, our focus remains on continuous innovation and strategic
+      initiatives that drive long-term growth and shareholder value.”
+    </p>
+    <p><strong>About FiEE, Inc.</strong></p>
+    <p>
+      FiEE, Inc., (NASDAQ: MINM), formerly Minim, Inc., was founded in 1977. It
+      has a historical track record of delivering comprehensive WiFi/Software as
+      a Service platform in the market. After years of development, it made the
+      strategic decision to transition to a Software First Model in 2023 to
+      expand our technology portfolio and revenue streams. In 2025, FiEE, Inc.
+      rebranded itself as a technology company leveraging the expertise in IoT,
+      connectivity, and artificial intelligence ("AI") to explore new business
+      prospects and extend our global footprint.
+    </p>
+    <p>
+      Our services are structured into four key categories: Cloud-Managed
+      Connectivity (WiFi) Platform, IoT Hardware Sales &amp; Licensing, SAAS
+      Solutions, and Professional To-C and To-B Services &amp; 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.
+    </p>
+    <p>
+      <strong>Forward-Looking Statements</strong><br />This communication
+      contains forward-looking statements which include, but are not limited to,
+      statements regarding the Company’s listing of its ordinary shares on
+      Nasdaq; the impact of the listing; the Company’s business strategy,
+      including its strategic transformation; and the Company’s ability to drive
+      long-term growth and shareholder value. These forward-looking statements
+      are subject to the safe harbor provisions under the Private Securities
+      Litigation Reform Act of 1995. The Company’s expectations and beliefs
+      regarding these matters may not materialize. Actual outcomes and results
+      may differ materially from those contemplated by these forward-looking
+      statements as a result of uncertainties, risks, and changes in
+      circumstances, including but not limited to risks and uncertainties
+      related to: the ability of the Company to maintain compliance with the
+      Nasdaq continued listing standards; the impact of fluctuations in global
+      financial markets on the Company’s business and the actions it may take in
+      response thereto; the Company’s ability to execute its plans and
+      strategies; and the impact of government laws and regulations. Additional
+      risks and uncertainties that could cause actual outcomes and results to
+      differ materially from those contemplated by the forward-looking
+      statements are included under the caption “Risk Factors” in the Company’s
+      Quarterly Report on Form 10-Q for the quarter ended March 31, 2025 and
+      elsewhere in the Company’s subsequent reports on Form 10-K, Form 10-Q or
+      Form 8-K filed with the U.S. Securities and Exchange Commission from time
+      to time and available at www.sec.gov.
+    </p>
+    <p><strong>Media</strong></p>
+    <p><a href="mailto:fiee@dlkadvisory.com">fiee@dlkadvisory.com</a></p>
+    <p>Source: FiEE, Inc.</p>
+  </div>
+</template>
+
+<script setup>
+import { reactive } from "vue";
+import { NSelect, NInput, NButton } from "naive-ui";
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
+
+const state = reactive({});
+</script>
+
+<style scoped lang="scss">
+.page-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 40px;
+}
+</style>

src/views/press-releases/index.vue

@@ -4,26 +4,26 @@
   </div>
 </template>
 <script setup>
-import size375 from '@/views/press-releases/size375/index.vue'
+import size375 from "@/views/press-releases/size375/index.vue";
-import size768 from '@/views/press-releases/size375/index.vue'
+import size768 from "@/views/press-releases/size768/index.vue";
-import size1440 from '@/views/press-releases/size1920/index.vue'
+import size1440 from "@/views/press-releases/size1440/index.vue";
-import size1920 from '@/views/press-releases/size1920/index.vue'
+import size1920 from "@/views/press-releases/size1920/index.vue";
-import { computed } from 'vue'
+import { computed } from "vue";
-import { useWindowSize } from '@vueuse/core'
+import { useWindowSize } from "@vueuse/core";
 
-const { width } = useWindowSize()
+const { width } = useWindowSize();
 const viewComponent = computed(() => {
-  const viewWidth = width.value
+  const viewWidth = width.value;
   if (viewWidth <= 450) {
-    return size375
+    return size375;
   } else if (viewWidth <= 768) {
-    return size768
+    return size768;
   } else if (viewWidth <= 1500) {
-    return size1440
+    return size1440;
   } else if (viewWidth <= 1920 || viewWidth > 1920) {
-    return size1920
+    return size1920;
   }
-})
+});
 </script>
 
 <style scoped lang="scss"></style>

src/views/press-releases/size1440/index.vue

@@ -0,0 +1,192 @@
+<template>
+  <div class="press-releases-page">
+    <customDefaultPage>
+      <template #content>
+        <main class="p-[35px] max-w-[1200px] mx-auto">
+          <div class="title mb-[20px]">
+            {{ t("press_releases.title") }}
+          </div>
+          <div class="search-container">
+            <n-select
+              :options="state.selectOptions"
+              v-model:value="state.selectedValue"
+              class="search-select"
+            />
+            <n-input
+              v-model:value="state.inputValue"
+              type="text"
+              :placeholder="t('press_releases.search.placeholder')"
+              class="search-input"
+            />
+            <n-button
+              type="primary"
+              @click="handleSearch"
+              class="search-button w-[80px]"
+            >
+              {{ t("press_releases.search.button") }}
+            </n-button>
+          </div>
+          <div v-for="(item, idx) in state.filterNewsData" :key="idx">
+            <div class="news-item mt-[10px]">
+              <div class="news-item-date">{{ item.date }}</div>
+              <div
+                class="news-item-title text-[#0078d7] overflow-hidden whitespace-nowrap text-ellipsis cursor-pointer"
+                @click="handleNewClick(item)"
+              >
+                {{ item.title }}
+              </div>
+              <div class="news-item-content">
+                {{
+                  item.content.length > 230
+                    ? item.content.substring(0, 230) + "..."
+                    : item.content
+                }}
+              </div>
+            </div>
+          </div>
+        </main>
+      </template>
+    </customDefaultPage>
+  </div>
+</template>
+
+<script setup>
+import customDefaultPage from "@/components/customDefaultPage/index.vue";
+import { reactive, onMounted, watch } from "vue";
+import { NSelect, NInput, NButton } from "naive-ui";
+import { useI18n } from "vue-i18n";
+
+import { useRouter } from "vue-router";
+const router = useRouter();
+const { t } = useI18n();
+
+const state = reactive({
+  selectedValue: "all_years", //选中值
+  selectOptions: [
+    {
+      label: "All Years",
+      value: "all_years",
+    },
+    ...Array.from({ length: 2025 - 1990 + 1 }, (_, i) => {
+      const year = 2025 - i;
+      return { label: String(year), value: String(year) };
+    }),
+  ], //下拉选项
+  inputValue: "", //输入值
+  newsData: [
+    {
+      date: "May 30, 2025",
+      title: "FiEE, Inc. Announces Relisting on Nasdaq",
+      content:
+        'Hong Kong, May 30, 2025 — FiEE, Inc. ("FiEE, Inc." or the "Company"), a technology company integrating IoT, connectivity and AI to redefine brand management solutions...',
+    },
+  ],
+  filterNewsData: [],
+});
+
+onMounted(() => {
+  state.filterNewsData = state.newsData;
+});
+
+const handleFilter = () => {
+  // 筛选逻辑
+  let filteredData = [...state.newsData];
+
+  // 按年份筛选
+  if (state.selectedValue !== "all_years") {
+    filteredData = filteredData.filter((item) => {
+      // 从日期字符串中提取年份，假设日期格式为 "May 30, 2025"
+      const dateMatch = item.date.match(/\b\d{4}\b/);
+      if (dateMatch) {
+        const year = dateMatch[0];
+        return year === state.selectedValue;
+      }
+      return false;
+    });
+  }
+
+  // 按输入内容进行模糊查询（title 和 content）
+  if (state.inputValue && state.inputValue.trim() !== "") {
+    const searchText = state.inputValue.toLowerCase().trim();
+    filteredData = filteredData.filter((item) => {
+      const titleMatch = item.title.toLowerCase().includes(searchText);
+      const contentMatch = item.content.toLowerCase().includes(searchText);
+      return titleMatch || contentMatch;
+    });
+  }
+
+  state.filterNewsData = filteredData;
+};
+
+// 添加 watcher 来实现自动筛选
+watch(
+  () => [state.selectedValue, state.inputValue],
+  () => {
+    handleFilter();
+  },
+  { immediate: true }
+);
+
+const handleSearch = () => {
+  // 手动触发筛选（保留这个函数以保持兼容性）
+  handleFilter();
+  console.log("筛选结果:", state.filterNewsData);
+};
+
+const handleNewClick = (item) => {
+  router.push({
+    path: "/news",
+    query: {
+      date: item.date,
+    },
+  });
+};
+</script>
+
+<style scoped lang="scss">
+.title {
+  font-size: 40px;
+  color: #333;
+}
+
+.search-container {
+  margin-bottom: 20px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 10px;
+}
+
+.search-select {
+  width: 7rem;
+  :deep(.n-base-selection) {
+    padding: 4px 0;
+  }
+}
+
+.search-input {
+  width: 240px;
+}
+
+:deep(.n-input) {
+  .n-input__input {
+    padding: 4px 0;
+    // border: 1px solid #ccc;
+    border-radius: 4px;
+  }
+}
+
+:deep(.n-select) {
+  .n-select__input {
+    padding: 8px 12px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+  }
+}
+
+:deep(.n-button) {
+  padding: 20px 16px;
+  border-radius: 4px;
+}
+</style>

src/views/press-releases/size1920/index.vue

@@ -4,7 +4,7 @@
       <template #content>
         <main class="p-[35px] max-w-[1200px] mx-auto">
           <div class="title mb-[20px]">
-            {{ t('press_releases.title') }}
+            {{ t("press_releases.title") }}
           </div>
           <div class="search-container">
             <n-select
@@ -21,11 +21,29 @@
             <n-button
               type="primary"
               @click="handleSearch"
-              class="search-button"
+              class="search-button w-[60px]"
             >
-              {{ t('press_releases.search.button') }}
+              {{ t("press_releases.search.button") }}
             </n-button>
           </div>
+          <div v-for="(item, idx) in state.filterNewsData" :key="idx">
+            <div class="news-item mt-[10px]">
+              <div class="news-item-date">{{ item.date }}</div>
+              <div
+                class="news-item-title text-[#0078d7] overflow-hidden whitespace-nowrap text-ellipsis cursor-pointer"
+                @click="handleNewClick(item)"
+              >
+                {{ item.title }}
+              </div>
+              <div class="news-item-content">
+                {{
+                  item.content.length > 230
+                    ? item.content.substring(0, 230) + "..."
+                    : item.content
+                }}
+              </div>
+            </div>
+          </div>
         </main>
       </template>
     </customDefaultPage>
@@ -33,32 +51,96 @@
 </template>
 
 <script setup>
-import customDefaultPage from '@/components/customDefaultPage/index.vue'
+import customDefaultPage from "@/components/customDefaultPage/index.vue";
-import { reactive } from 'vue'
+import { reactive, onMounted, watch } from "vue";
-import { NSelect, NInput, NButton } from 'naive-ui'
+import { NSelect, NInput, NButton } from "naive-ui";
-import { useI18n } from 'vue-i18n'
+import { useI18n } from "vue-i18n";
 
-const { t } = useI18n()
+import { useRouter } from "vue-router";
+const router = useRouter();
+const { t } = useI18n();
 
 const state = reactive({
-  selectedValue: 'all_years', //选中值
+  selectedValue: "all_years", //选中值
   selectOptions: [
     {
-      label: 'All Years',
+      label: "All Years",
-      value: 'all_years',
+      value: "all_years",
     },
     ...Array.from({ length: 2025 - 1990 + 1 }, (_, i) => {
-      const year = 2025 - i
+      const year = 2025 - i;
-      return { label: String(year), value: String(year) }
+      return { label: String(year), value: String(year) };
-    })
+    }),
   ], //下拉选项
-  inputValue: '', //输入值
+  inputValue: "", //输入值
-})
+  newsData: [
+    {
+      date: "May 30, 2025",
+      title: "FiEE, Inc. Announces Relisting on Nasdaq",
+      content:
+        'Hong Kong, May 30, 2025 — FiEE, Inc. ("FiEE, Inc." or the "Company"), a technology company integrating IoT, connectivity and AI to redefine brand management solutions...',
+    },
+  ],
+  filterNewsData: [],
+});
+
+onMounted(() => {
+  state.filterNewsData = state.newsData;
+});
+
+const handleFilter = () => {
+  // 筛选逻辑
+  let filteredData = [...state.newsData];
+
+  // 按年份筛选
+  if (state.selectedValue !== "all_years") {
+    filteredData = filteredData.filter((item) => {
+      // 从日期字符串中提取年份，假设日期格式为 "May 30, 2025"
+      const dateMatch = item.date.match(/\b\d{4}\b/);
+      if (dateMatch) {
+        const year = dateMatch[0];
+        return year === state.selectedValue;
+      }
+      return false;
+    });
+  }
+
+  // 按输入内容进行模糊查询（title 和 content）
+  if (state.inputValue && state.inputValue.trim() !== "") {
+    const searchText = state.inputValue.toLowerCase().trim();
+    filteredData = filteredData.filter((item) => {
+      const titleMatch = item.title.toLowerCase().includes(searchText);
+      const contentMatch = item.content.toLowerCase().includes(searchText);
+      return titleMatch || contentMatch;
+    });
+  }
+
+  state.filterNewsData = filteredData;
+};
+
+// 添加 watcher 来实现自动筛选
+watch(
+  () => [state.selectedValue, state.inputValue],
+  () => {
+    handleFilter();
+  },
+  { immediate: true }
+);
 
 const handleSearch = () => {
-  // 搜索处理逻辑
+  // 手动触发筛选（保留这个函数以保持兼容性）
-  console.log('搜索:', state.inputValue)
+  handleFilter();
-}
+  console.log("筛选结果:", state.filterNewsData);
+};
+
+const handleNewClick = (item) => {
+  router.push({
+    path: "/news",
+    query: {
+      date: item.date,
+    },
+  });
+};
 </script>
 
 <style scoped lang="scss">

src/views/press-releases/size375/index.vue

@@ -4,10 +4,10 @@
       <template #content>
         <main
           class="p-[80px] mx-auto"
-          style="max-width: 100vw; min-width: 375px;"
+          style="max-width: 100vw; min-width: 285px"
         >
           <div class="title mb-[24px]">
-            {{ t('press_releases.title') }}
+            {{ t("press_releases.title") }}
           </div>
           <div class="search-container">
             <n-select
@@ -30,9 +30,27 @@
               class="search-button"
               :font-size="72"
             >
-              {{ t('press_releases.search.button') }}
+              {{ t("press_releases.search.button") }}
             </n-button>
           </div>
+          <div v-for="(item, idx) in state.filterNewsData" :key="idx">
+            <div class="news-item mt-[10px]">
+              <div class="news-item-date">{{ item.date }}</div>
+              <div
+                class="news-item-title text-[#0078d7] overflow-hidden whitespace-nowrap text-ellipsis cursor-pointer"
+                @click="handleNewClick(item)"
+              >
+                {{ item.title }}
+              </div>
+              <div class="news-item-content">
+                {{
+                  item.content.length > 230
+                    ? item.content.substring(0, 230) + "..."
+                    : item.content
+                }}
+              </div>
+            </div>
+          </div>
         </main>
       </template>
     </customDefaultPage>
@@ -40,32 +58,96 @@
 </template>
 
 <script setup>
-import customDefaultPage from '@/components/customDefaultPage/index.vue'
+import customDefaultPage from "@/components/customDefaultPage/index.vue";
-import { reactive } from 'vue'
+import { reactive, onMounted, watch } from "vue";
-import { NSelect, NInput, NButton } from 'naive-ui'
+import { NSelect, NInput, NButton } from "naive-ui";
-import { useI18n } from 'vue-i18n'
+import { useI18n } from "vue-i18n";
+import { useRouter } from "vue-router";
 
-const { t } = useI18n()
+const router = useRouter();
+const { t } = useI18n();
 
 const state = reactive({
-  selectedValue: 'all_years', //选中值
+  selectedValue: "all_years", //选中值
   selectOptions: [
     {
-      label: 'All Years',
+      label: "All Years",
-      value: 'all_years',
+      value: "all_years",
     },
     ...Array.from({ length: 2025 - 1990 + 1 }, (_, i) => {
-      const year = 2025 - i
+      const year = 2025 - i;
-      return { label: String(year), value: String(year) }
+      return { label: String(year), value: String(year) };
     }),
   ], //下拉选项
-  inputValue: '', //输入值
+  inputValue: "", //输入值
-})
+  newsData: [
+    {
+      date: "May 30, 2025",
+      title: "FiEE, Inc. Announces Relisting on Nasdaq",
+      content:
+        'Hong Kong, May 30, 2025 — FiEE, Inc. ("FiEE, Inc." or the "Company"), a technology company integrating IoT, connectivity and AI to redefine brand management solutions...',
+    },
+  ],
+  filterNewsData: [],
+});
+
+onMounted(() => {
+  state.filterNewsData = state.newsData;
+});
+
+const handleFilter = () => {
+  // 筛选逻辑
+  let filteredData = [...state.newsData];
+
+  // 按年份筛选
+  if (state.selectedValue !== "all_years") {
+    filteredData = filteredData.filter((item) => {
+      // 从日期字符串中提取年份，假设日期格式为 "May 30, 2025"
+      const dateMatch = item.date.match(/\b\d{4}\b/);
+      if (dateMatch) {
+        const year = dateMatch[0];
+        return year === state.selectedValue;
+      }
+      return false;
+    });
+  }
+
+  // 按输入内容进行模糊查询（title 和 content）
+  if (state.inputValue && state.inputValue.trim() !== "") {
+    const searchText = state.inputValue.toLowerCase().trim();
+    filteredData = filteredData.filter((item) => {
+      const titleMatch = item.title.toLowerCase().includes(searchText);
+      const contentMatch = item.content.toLowerCase().includes(searchText);
+      return titleMatch || contentMatch;
+    });
+  }
+
+  state.filterNewsData = filteredData;
+};
+
+// 添加 watcher 来实现自动筛选
+watch(
+  () => [state.selectedValue, state.inputValue],
+  () => {
+    handleFilter();
+  },
+  { immediate: true }
+);
 
 const handleSearch = () => {
-  // 搜索处理逻辑
+  // 手动触发筛选（保留这个函数以保持兼容性）
-  console.log('搜索:', state.inputValue)
+  handleFilter();
-}
+  console.log("筛选结果:", state.filterNewsData);
+};
+
+const handleNewClick = (item) => {
+  router.push({
+    path: "/news",
+    query: {
+      date: item.date,
+    },
+  });
+};
 </script>
 
 <style scoped lang="scss">
@@ -119,4 +201,29 @@ const handleSearch = () => {
   padding: 20px 16px;
   border-radius: 4px;
 }
+
+.news-item {
+  padding: 16px;
+  border-bottom: 1px solid #eee;
+  margin-bottom: 16px;
+}
+
+.news-item-date {
+  font-size: 72px;
+  color: #666;
+  margin-bottom: 8px;
+}
+
+.news-item-title {
+  font-size: 92px;
+  font-weight: bold;
+  margin-bottom: 8px;
+  line-height: 1.4;
+}
+
+.news-item-content {
+  font-size: 72px;
+  color: #333;
+  line-height: 1.6;
+}
 </style>

src/views/press-releases/size768/index.vue

@@ -0,0 +1,192 @@
+<template>
+  <div class="press-releases-page">
+    <customDefaultPage>
+      <template #content>
+        <main class="p-[35px] mx-auto" style="max-width: calc(100% - 100px)">
+          <div class="title mb-[20px]">
+            {{ t("press_releases.title") }}
+          </div>
+          <div class="search-container">
+            <n-select
+              :options="state.selectOptions"
+              v-model:value="state.selectedValue"
+              class="search-select"
+            />
+            <n-input
+              v-model:value="state.inputValue"
+              type="text"
+              :placeholder="t('press_releases.search.placeholder')"
+              class="search-input"
+            />
+            <n-button
+              type="primary"
+              @click="handleSearch"
+              class="search-button w-[120px]"
+            >
+              {{ t("press_releases.search.button") }}
+            </n-button>
+          </div>
+          <div v-for="(item, idx) in state.filterNewsData" :key="idx">
+            <div class="news-item mt-[10px]">
+              <div class="news-item-date">{{ item.date }}</div>
+              <div
+                class="news-item-title text-[#0078d7] overflow-hidden whitespace-nowrap text-ellipsis cursor-pointer"
+                @click="handleNewClick(item)"
+              >
+                {{ item.title }}
+              </div>
+              <div class="news-item-content">
+                {{
+                  item.content.length > 230
+                    ? item.content.substring(0, 230) + "..."
+                    : item.content
+                }}
+              </div>
+            </div>
+          </div>
+        </main>
+      </template>
+    </customDefaultPage>
+  </div>
+</template>
+
+<script setup>
+import customDefaultPage from "@/components/customDefaultPage/index.vue";
+import { reactive, onMounted, watch } from "vue";
+import { NSelect, NInput, NButton } from "naive-ui";
+import { useI18n } from "vue-i18n";
+
+import { useRouter } from "vue-router";
+const router = useRouter();
+const { t } = useI18n();
+
+const state = reactive({
+  selectedValue: "all_years", //选中值
+  selectOptions: [
+    {
+      label: "All Years",
+      value: "all_years",
+    },
+    ...Array.from({ length: 2025 - 1990 + 1 }, (_, i) => {
+      const year = 2025 - i;
+      return { label: String(year), value: String(year) };
+    }),
+  ], //下拉选项
+  inputValue: "", //输入值
+  newsData: [
+    {
+      date: "May 30, 2025",
+      title: "FiEE, Inc. Announces Relisting on Nasdaq",
+      content:
+        'Hong Kong, May 30, 2025 — FiEE, Inc. ("FiEE, Inc." or the "Company"), a technology company integrating IoT, connectivity and AI to redefine brand management solutions...',
+    },
+  ],
+  filterNewsData: [],
+});
+
+onMounted(() => {
+  state.filterNewsData = state.newsData;
+});
+
+const handleFilter = () => {
+  // 筛选逻辑
+  let filteredData = [...state.newsData];
+
+  // 按年份筛选
+  if (state.selectedValue !== "all_years") {
+    filteredData = filteredData.filter((item) => {
+      // 从日期字符串中提取年份，假设日期格式为 "May 30, 2025"
+      const dateMatch = item.date.match(/\b\d{4}\b/);
+      if (dateMatch) {
+        const year = dateMatch[0];
+        return year === state.selectedValue;
+      }
+      return false;
+    });
+  }
+
+  // 按输入内容进行模糊查询（title 和 content）
+  if (state.inputValue && state.inputValue.trim() !== "") {
+    const searchText = state.inputValue.toLowerCase().trim();
+    filteredData = filteredData.filter((item) => {
+      const titleMatch = item.title.toLowerCase().includes(searchText);
+      const contentMatch = item.content.toLowerCase().includes(searchText);
+      return titleMatch || contentMatch;
+    });
+  }
+
+  state.filterNewsData = filteredData;
+};
+
+// 添加 watcher 来实现自动筛选
+watch(
+  () => [state.selectedValue, state.inputValue],
+  () => {
+    handleFilter();
+  },
+  { immediate: true }
+);
+
+const handleSearch = () => {
+  // 手动触发筛选（保留这个函数以保持兼容性）
+  handleFilter();
+  console.log("筛选结果:", state.filterNewsData);
+};
+
+const handleNewClick = (item) => {
+  router.push({
+    path: "/news",
+    query: {
+      date: item.date,
+    },
+  });
+};
+</script>
+
+<style scoped lang="scss">
+.title {
+  font-size: 40px;
+  color: #333;
+}
+
+.search-container {
+  margin-bottom: 20px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 25px;
+}
+
+.search-select {
+  width: 360px;
+  :deep(.n-base-selection) {
+    padding: 4px 0;
+  }
+}
+
+.search-input {
+  width: 360px;
+}
+
+:deep(.n-input) {
+  .n-input__input {
+    padding: 4px 0;
+    // border: 1px solid #ccc;
+    border-radius: 4px;
+  }
+}
+
+:deep(.n-select) {
+  .n-select__input {
+    padding: 8px 12px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+  }
+}
+
+:deep(.n-button) {
+  padding: 20px 16px;
+  border-radius: 4px;
+}
+</style>