Business Introduction 模块 768尺寸变形问题

src/config/testRequest.js

@@ -1,14 +0,0 @@
-// src/api/testRequest.js
-import axios from "axios";
-
-export const getTestData = async () => {
-  try {
-    const response = await axios.get(
-      "http://saas-test.szjixun.cn/api/chart/forward/test"
-    );
-    return response.data;
-  } catch (error) {
-    console.error("请求出错:", error);
-    throw error; // 可选：让调用方处理异常
-  }
-};

src/locales/en.js

@@ -607,9 +607,9 @@ export default {
     TITLETWO: {
       TITLE: "About FiEE, Inc.",
       CONTENT:
-        'FiEE Inc., (NASDAQ: MINM) was formerly Minim, Inc. 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. By 2025, we have 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) was formerly Minim, Inc. 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. By 2025, we have 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:
-        'Our services are structured 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.',
+        '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:
         "Powered by IoT-enabled Connectivity Solutions, we are empowering talents with value throughout the entire lifecycle. We are committed to ongoing investments in AI technology for data analysis and fan behavior insights to develop highly targeted multimedia and multilingual content. Our goal is to expand our solutions and services to reach a broader global audience.",
       CONTENTTWOTITLE: "Our services are structured",
@@ -625,37 +625,37 @@ export default {
       CONTENT: "",
 
       TITLE: "Corporate Milestone",
-      SUBHEADING: "•1977 – 2015 : Founding & Licensing",
+      SUBHEADING: "1977 – 2015 : Founding & Licensing",
       paragraph: {
-        ONE: "I.Founded as Zoom Telephonics in 1977. ",
-        TWO: "II.Secured a five-year Motorola home-network license effective 1 Jan, 2016. ",
+        ONE: "• Founded as Zoom Telephonics in 1977. ",
+        TWO: "• Secured a five-year Motorola home-network license effective 1 Jan, 2016. ",
       },
-      SUBHEADINGTWO: "•2020 : Merger & AI Advancement",
+      SUBHEADINGTWO: "2020 : Merger & AI Advancement",
       paragraphTwo: {
-        ONE: "I.November 2020: Merged with Minim Inc.; adopted Minim name/OTCQB ticker",
-        TWO: "II.Rolled out AI-driven Wi-Fi management and IoT security platform.",
+        ONE: "• November 2020: Merged with Minim Inc.; adopted Minim name/OTCQB ticker",
+        TWO: "• Rolled out AI-driven Wi-Fi management and IoT security platform.",
         THREE: "",
       },
-      SUBHEADINGTHREE: "•2021: NASDAQ Listing",
+      SUBHEADINGTHREE: "2021: NASDAQ Listing",
       paragraphTHREE: {
-        ONE: "I.Transitioned from OTCQB to NASDAQ Capital Market on 7 July, 2021, under ticker MINM.",
-        TWO: "II.Raised $25 M in a public offering to fund expansion.",
+        ONE: "• Transitioned from OTCQB to NASDAQ Capital Market on 7 July, 2021, under ticker MINM.",
+        TWO: "• Raised $25 M in a public offering to fund expansion.",
         THREE: "",
       },
-      SUBHEADINGFOREFF: "•2023 – 2024: Pivoting to A Software First Model",
+      SUBHEADINGFOREFF: "2023 – 2024: Pivoting to A Software First Model",
       paragraphFOUR: {
-        ONE: "I.Enhanced its MinimOS cloud platform and API suite for ISPs/OEMs, with major deployments like Vox’s AI-driven Wi-Fi Home Manager.",
-        TWO: "II.Signed a merger agreement with e2Companies to broaden its technology and revenue base",
+        ONE: "• Enhanced its MinimOS cloud platform and API suite for ISPs/OEMs, with major deployments like Vox’s AI-driven Wi-Fi Home Manager.",
+        TWO: "• Signed a merger agreement with e2Companies to broaden its technology and revenue base",
         THREE: "",
       },
-      SUBHEADINGFIVE: "•2025 Rebranding & New C-Suite",
+      SUBHEADINGFIVE: "2025 Rebranding & New C-Suite",
       paragraphFIVE: {
-        ONE: "I.Officially rebranded from Minim Inc. to FiEE Inc.",
-        TWO: "II.Appointed Li Wai Chung as CEO and Cao Yu as CFO.",
+        ONE: "• Officially rebranded from Minim Inc. to FiEE Inc.",
+        TWO: "• Appointed Li Wai Chung as CEO and Cao Yu as CFO.",
         THREE:
-          "III.Leverage on foundation in IoT, connectivity and AI to pursue new business opportunities.",
-        FOUR: "IV.Launched SaaS product in the market to generate recurring revenue streams",
-        FIVE: "V.Acquisition of  Suzhou Yixuntong Network Technology Co., Ltd., a high growth technology service provider in PRC",
+          "• Leverage on foundation in IoT, connectivity and AI to pursue new business opportunities.",
+        FOUR: "• Launched SaaS product in the market to generate recurring revenue streams",
+        FIVE: "• Acquisition of  Suzhou Yixuntong Network Technology Co., Ltd., a high growth technology service provider in PRC",
       },
     },
     TITLEFIVE: {

src/store/stock-quote/index.js

@@ -14,11 +14,25 @@ export const useStockQuote = createGlobalState(() => {
       ""
     ]
   })
+  const date = new Date();
+const options = {
+  year: 'numeric',
+  month: 'short',
+  day: 'numeric',
+  hour: 'numeric',
+  minute: '2-digit',
+  hour12: true,
+  timeZone: 'America/New_York',
+  timeZoneName: 'short'
+};
+
+const formatted = ref(date.toLocaleString('en-US', options))
 const getStockQuate= async()=>{
     const res = await axios.get('https://saas-test.szjixun.cn/api/chart/forward/test')
     stockQuote.value=res.data
 }
   return {
+    formatted,
     getStockQuate,
     stockQuote
   }

src/views/BusinessServices/index.vue

@@ -1,14 +1,26 @@
 <script setup>
-import size1920 from "@/views/BusinessServices/size1920/index.vue";
-import size375 from "@/views/BusinessServices/size375/index.vue";
 import { computed } from "vue";
 import { useWindowSize } from "@vueuse/core";
 
+import size375 from "./size375/index.vue";
+import size768 from "./size768/index.vue";
+import size1440 from "./size1440/index.vue";
+import size1920 from "./size1920/index.vue";
+import { useRouter } from "vue-router";
+import { useI18n } from "vue-i18n";
+
+const router = useRouter();
 const { width } = useWindowSize();
+const { t } = useI18n();
+
 const viewComponent = computed(() => {
   const viewWidth = width.value;
   if (viewWidth <= 450) {
     return size375;
+  } else if (viewWidth <= 1100) {
+    return size768;
+  } else if (viewWidth <= 1500) {
+    return size1440;
   } else if (viewWidth <= 1920 || viewWidth > 1920) {
     return size1920;
   }

src/views/BusinessServices/size1440/index.vue

@@ -0,0 +1,397 @@
+<template>
+  <div class="home-page">
+    <div class="business-page">
+      <!-- 渐变背景标题区 - 增加层次感 -->
+      <section class="hero-section">
+        <div class="container">
+          <div class="title-wrapper">
+            <h1 class="hero-title">
+              {{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.TITLE") }}
+            </h1>
+          </div>
+          <div class="hero-description">
+            {{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENT") }}
+          </div>
+        </div>
+      </section>
+
+      <!-- 业务核心解决方案 -->
+      <main class="container">
+        <section>
+          <h1 class="hero-title">
+            {{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENTTWO") }}
+          </h1>
+        </section>
+
+        <!-- 解决方案网格 - 响应式弹性布局 -->
+        <div class="solution-grid">
+          <!-- 主推解决方案组 -->
+          <div class="solution-group">
+            <div class="featured-solution">
+              <div class="solution-card" :style="{ '--delay': '0s' }">
+                <div class="card-header">
+                  <div class="decorative-line"></div>
+                  <h2 class="card-title">{{ solutions[0].title }}</h2>
+                </div>
+                <ul class="card-content">
+                  <li
+                    v-for="(point, pIndex) in solutions[0].points"
+                    :key="pIndex"
+                    class="content-point"
+                  >
+                    <div class="point-icon">➤</div>
+                    <div class="point-text">{{ point }}</div>
+                  </li>
+                </ul>
+              </div>
+            </div>
+
+            <div class="featured-solution">
+              <div class="solution-card" :style="{ '--delay': '0.2s' }">
+                <div class="card-header">
+                  <div class="decorative-line"></div>
+                  <h2 class="card-title">{{ solutions[1].title }}</h2>
+                </div>
+                <ul class="card-content">
+                  <li
+                    v-for="(point, pIndex) in solutions[1].points"
+                    :key="pIndex"
+                    class="content-point"
+                  >
+                    <div class="point-icon">➤</div>
+                    <div class="point-text">{{ point }}</div>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+
+          <!-- 次推解决方案组 -->
+          <div class="solution-group">
+            <div class="featured-solution">
+              <div
+                class="solution-card"
+                style="height: auto"
+                :style="{ '--delay': '0.4s' }"
+              >
+                <div class="card-header">
+                  <div class="decorative-line"></div>
+                  <h2 class="card-title">{{ solutions[2].title }}</h2>
+                </div>
+                <ul class="card-content">
+                  <li
+                    v-for="(point, pIndex) in solutions[2].points"
+                    :key="pIndex"
+                    class="content-point"
+                  >
+                    <div class="point-icon">➤</div>
+                    <div class="point-text">{{ point }}</div>
+                  </li>
+                  <li style="padding-bottom: 105px"></li>
+                </ul>
+              </div>
+            </div>
+
+            <div class="featured-solution">
+              <div
+                class="solution-card"
+                style="height: auto"
+                :style="{ '--delay': '0.6s' }"
+              >
+                <div class="card-header">
+                  <div class="decorative-line"></div>
+                  <h2 class="card-title">{{ solutions[3].title }}</h2>
+                </div>
+                <ul class="card-content">
+                  <li
+                    v-for="(point, pIndex) in solutions[3].points"
+                    :key="pIndex"
+                    class="content-point"
+                  >
+                    <div class="point-icon">➤</div>
+                    <div class="point-text">{{ point }}</div>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useI18n } from "vue-i18n";
+import { computed } from "vue";
+
+const { t } = useI18n();
+
+const solutions = computed(() => [
+  {
+    title: t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.ONE.TITLE"),
+    points: [
+      t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.ONE.CONTENT"),
+      t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.ONE.CONTENTTWO"),
+    ],
+  },
+  {
+    title: t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.TWO.TITLE"),
+    points: [
+      t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.TWO.CONTENT"),
+      t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.TWO.CONTENTTWO"),
+    ],
+  },
+  {
+    title: t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.THREE.TITLE"),
+    points: [
+      t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.THREE.CONTENT"),
+      t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.THREE.CONTENTTWO"),
+      t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.THREE.CONTENTTHREE"),
+    ],
+  },
+  {
+    title: t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.FOUR.TITLE"),
+    points: [
+      t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.FOUR.CONTENT"),
+      t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.FOUR.CONTENTTWO"),
+      t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.FOUR.CONTENTTHREE"),
+    ],
+  },
+]);
+</script>
+
+<style scoped>
+/* 基础样式 */
+.container {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 0 2rem;
+}
+
+/* 标题区样式 */
+.hero-section {
+  background: linear-gradient(135deg, #f8fbfe 0%, #e6f0ff 100%);
+  padding: 8rem 0 6rem;
+  position: relative;
+  overflow: hidden;
+}
+
+.hero-section::after {
+  content: "";
+  position: absolute;
+  bottom: -50px;
+  left: 0;
+  width: 100%;
+  height: 100px;
+  background: white;
+  transform: skewY(-3deg);
+}
+
+.hero-title {
+  font-size: 40px;
+  color: #2c3e50;
+  margin-bottom: 2rem;
+  animation: slideIn 1s ease;
+}
+
+.hero-description {
+  margin: 0 auto;
+  font-size: 1.1rem;
+  line-height: 1.8;
+  color: #5a6d80;
+}
+
+:root {
+  --primary-color: #895bff;
+  --primary-light: #a07cff;
+  --primary-dark: #6a11cb;
+  --primary-gradient: linear-gradient(
+    135deg,
+    var(--primary-light) 0%,
+    var(--primary-color) 100%
+  );
+}
+.home-page {
+  background-image: url("@/assets/image/bg.png");
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.container {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 0 2rem;
+}
+
+/* 标题区 - 紫色渐变 */
+.hero-section {
+  background: var(--primary-gradient);
+  padding: 10rem 0 8rem;
+  position: relative;
+  overflow: hidden;
+  color: white;
+}
+
+.hero-section::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><path fill="rgba(255,255,255,0.05)" d="M0,0 L100,0 L100,100 Q50,80 0,100 Z"></path></svg>')
+    no-repeat bottom/100% 30%;
+}
+.title-decoration {
+  position: absolute;
+  bottom: -15px;
+  left: 0;
+  width: 80%;
+  height: 4px;
+  background: rgba(255, 255, 255, 0.5);
+  border-radius: 2px;
+}
+
+/* 解决方案网格 */
+.solution-grid {
+  padding: 6rem 0 4rem;
+}
+
+.solution-group {
+  display: flex;
+  flex-direction: column;
+  gap: 3rem;
+  margin-bottom: 4rem;
+}
+
+/* 桌面端布局（>=768px） */
+@media (min-width: 768px) {
+  .solution-group {
+    flex-direction: row;
+    gap: 4rem;
+  }
+
+  .featured-solution {
+    flex: 1;
+  }
+
+  .solution-card {
+    height: 350px;
+  }
+}
+
+/* 移动端布局（<768px） */
+@media (max-width: 767px) {
+  .home-page {
+    background-image: url("@/assets/image/bg-mobile.png");
+  }
+
+  .hero-title {
+    font-size: 1.8rem;
+  }
+
+  .solution-group {
+    flex-direction: column;
+    gap: 2rem;
+  }
+
+  .featured-solution {
+    width: 100% !important; /* 强制占满容器 */
+    margin-bottom: 2rem;
+  }
+
+  .solution-card {
+    padding: 2rem;
+    height: auto;
+  }
+
+  .content-point {
+    padding: 1rem 0;
+  }
+}
+
+/* 卡片公共样式 */
+.solution-card {
+  background: white;
+  border-radius: 16px;
+  padding: 2.5rem;
+  box-shadow: 0 10px 40px rgba(137, 91, 255, 0.1);
+  transform: translateY(20px);
+  opacity: 0;
+  animation: cardEnter 0.6s ease forwards;
+  position: relative;
+  overflow: hidden;
+  border: 1px solid rgba(137, 91, 255, 0.2);
+  background: linear-gradient(135deg, #f9f6ff 0%, #f0e9ff 100%);
+}
+
+.solution-card::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+    135deg,
+    rgba(137, 91, 255, 0.03) 0%,
+    rgba(137, 91, 255, 0) 100%
+  );
+  z-index: -1;
+}
+
+.solution-card:hover {
+  transform: translateY(-8px);
+  box-shadow: 0 15px 50px rgba(137, 91, 255, 0.2);
+}
+
+.card-header {
+  margin-bottom: 2rem;
+}
+
+.decorative-line {
+  width: 50px;
+  height: 3px;
+  background: var(--primary-gradient);
+  margin-bottom: 1rem;
+  border-radius: 3px;
+}
+
+.solution-card:hover .decorative-line {
+  width: 80px;
+}
+
+.card-title {
+  font-size: 1.3rem;
+  color: #2c0850;
+  font-weight: 600;
+}
+
+.content-point {
+  display: flex;
+  gap: 1rem;
+  padding: 1rem 0;
+  border-bottom: 1px solid rgba(137, 91, 255, 0.1);
+}
+
+.point-icon {
+  color: var(--primary-color);
+  font-size: 1.2rem;
+  flex-shrink: 0;
+}
+
+.point-text {
+  color: #4a3a6b;
+  line-height: 1.6;
+  font-size: 1rem;
+}
+
+@keyframes cardEnter {
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+</style>

src/views/BusinessServices/size1920/index.vue

@@ -3,69 +3,116 @@
     <div class="business-page">
       <!-- 渐变背景标题区 - 增加层次感 -->
       <section class="hero-section">
-        <div class="hero-content container">
+        <div class="container">
           <div class="title-wrapper">
             <h1 class="hero-title">
               {{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.TITLE") }}
             </h1>
-            <div class="title-decoration"></div>
           </div>
           <div class="hero-description">
-            <p>{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENT") }}</p>
+            {{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENT") }}
           </div>
         </div>
       </section>
 
-      <!-- 业务核心解决方案 - 重新设计布局 -->
+      <!-- 业务核心解决方案 -->
       <main class="container">
-        <p style="font-size: 18px; font-weight: bold">
-          {{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENTTWO") }}
-        </p>
-        <!-- 解决方案网格 - 新布局 -->
+        <section>
+          <h1 class="hero-title">
+            {{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENTTWO") }}
+          </h1>
+        </section>
+
+        <!-- 解决方案网格 - 响应式弹性布局 -->
         <div class="solution-grid">
-          <!-- 主推解决方案 -->
-          <div class="featured-solution">
-            <div class="solution-card" :style="{ '--delay': '0s' }">
-              <!-- <div class="card-badge">旗舰方案</div> -->
-              <div class="card-header">
-                <div class="decorative-line"></div>
-                <h2 class="card-title">{{ solutions[0].title }}</h2>
+          <!-- 主推解决方案组 -->
+          <div class="solution-group">
+            <div class="featured-solution">
+              <div class="solution-card" :style="{ '--delay': '0s' }">
+                <div class="card-header">
+                  <div class="decorative-line"></div>
+                  <h2 class="card-title">{{ solutions[0].title }}</h2>
+                </div>
+                <ul class="card-content">
+                  <li
+                    v-for="(point, pIndex) in solutions[0].points"
+                    :key="pIndex"
+                    class="content-point"
+                  >
+                    <div class="point-icon">➤</div>
+                    <div class="point-text">{{ point }}</div>
+                  </li>
+                </ul>
+              </div>
+            </div>
+
+            <div class="featured-solution">
+              <div class="solution-card" :style="{ '--delay': '0.2s' }">
+                <div class="card-header">
+                  <div class="decorative-line"></div>
+                  <h2 class="card-title">{{ solutions[1].title }}</h2>
+                </div>
+                <ul class="card-content">
+                  <li
+                    v-for="(point, pIndex) in solutions[1].points"
+                    :key="pIndex"
+                    class="content-point"
+                  >
+                    <div class="point-icon">➤</div>
+                    <div class="point-text">{{ point }}</div>
+                  </li>
+                </ul>
               </div>
-              <ul class="card-content">
-                <li
-                  v-for="(point, pIndex) in solutions[0].points"
-                  :key="pIndex"
-                  class="content-point"
-                >
-                  <div class="point-icon">➤</div>
-                  <div class="point-text">{{ point }}</div>
-                </li>
-              </ul>
             </div>
           </div>
 
-          <!-- 次要解决方案组 -->
-          <div class="secondary-solutions">
-            <div
-              v-for="(item, index) in solutions.slice(1)"
-              :key="index + 1"
-              class="solution-card"
-              :style="{ '--delay': (index + 1) * 0.1 + 's' }"
-            >
-              <div class="card-header">
-                <div class="decorative-line"></div>
-                <h2 class="card-title">{{ item.title }}</h2>
+          <!-- 次推解决方案组 -->
+          <div class="solution-group">
+            <div class="featured-solution">
+              <div
+                class="solution-card"
+                style="height: auto"
+                :style="{ '--delay': '0.4s' }"
+              >
+                <div class="card-header">
+                  <div class="decorative-line"></div>
+                  <h2 class="card-title">{{ solutions[2].title }}</h2>
+                </div>
+                <ul class="card-content">
+                  <li
+                    v-for="(point, pIndex) in solutions[2].points"
+                    :key="pIndex"
+                    class="content-point"
+                  >
+                    <div class="point-icon">➤</div>
+                    <div class="point-text">{{ point }}</div>
+                  </li>
+                  <li style="padding-bottom: 45px"></li>
+                </ul>
+              </div>
+            </div>
+
+            <div class="featured-solution">
+              <div
+                class="solution-card"
+                style="height: auto"
+                :style="{ '--delay': '0.6s' }"
+              >
+                <div class="card-header">
+                  <div class="decorative-line"></div>
+                  <h2 class="card-title">{{ solutions[3].title }}</h2>
+                </div>
+                <ul class="card-content">
+                  <li
+                    v-for="(point, pIndex) in solutions[3].points"
+                    :key="pIndex"
+                    class="content-point"
+                  >
+                    <div class="point-icon">➤</div>
+                    <div class="point-text">{{ point }}</div>
+                  </li>
+                </ul>
               </div>
-              <ul class="card-content">
-                <li
-                  v-for="(point, pIndex) in item.points"
-                  :key="pIndex"
-                  class="content-point"
-                >
-                  <div class="point-icon">➤</div>
-                  <div class="point-text">{{ point }}</div>
-                </li>
-              </ul>
             </div>
           </div>
         </div>
@@ -115,12 +162,6 @@ const solutions = computed(() => [
 </script>
 
 <style scoped>
-.home-page {
-  background-image: url("@/assets/image/bg-mobile.png");
-  background-size: 100% 100%;
-  background-position: center;
-  background-repeat: no-repeat;
-}
 /* 基础样式 */
 .container {
   max-width: 1280px;
@@ -148,14 +189,13 @@ const solutions = computed(() => [
 }
 
 .hero-title {
-  font-size: 3.5rem;
+  font-size: 40px;
   color: #2c3e50;
   margin-bottom: 2rem;
   animation: slideIn 1s ease;
 }
 
 .hero-description {
-  max-width: 800px;
   margin: 0 auto;
   font-size: 1.1rem;
   line-height: 1.8;
@@ -204,13 +244,6 @@ const solutions = computed(() => [
   background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><path fill="rgba(255,255,255,0.05)" d="M0,0 L100,0 L100,100 Q50,80 0,100 Z"></path></svg>')
     no-repeat bottom/100% 30%;
 }
-
-.hero-title {
-  font-size: 3.5rem;
-  margin-bottom: 2rem;
-  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
 .title-decoration {
   position: absolute;
   bottom: -15px;
@@ -221,36 +254,65 @@ const solutions = computed(() => [
   border-radius: 2px;
 }
 
-.hero-description {
-  max-width: 800px;
-  font-size: 1.1rem;
-  line-height: 1.8;
-  opacity: 0.9;
-}
-
 /* 解决方案网格 */
 .solution-grid {
+  padding: 6rem 0 4rem;
+}
+
+.solution-group {
   display: flex;
   flex-direction: column;
-  gap: 2.5rem;
-  padding: 5rem 0;
-  position: relative;
-  z-index: 1;
+  gap: 3rem;
+  margin-bottom: 4rem;
 }
 
-.solution-grid::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 80%;
-  height: 100%;
-  opacity: 0.03;
-  z-index: -1;
+/* 桌面端布局（>=768px） */
+@media (min-width: 768px) {
+  .solution-group {
+    flex-direction: row;
+    gap: 4rem;
+  }
+
+  .featured-solution {
+    flex: 1;
+  }
+
+  .solution-card {
+    height: 350px;
+  }
 }
 
-/* 卡片设计 */
+/* 移动端布局（<768px） */
+@media (max-width: 767px) {
+  .home-page {
+    background-image: url("@/assets/image/bg-mobile.png");
+  }
+
+  .hero-title {
+    font-size: 1.8rem;
+  }
+
+  .solution-group {
+    flex-direction: column;
+    gap: 2rem;
+  }
+
+  .featured-solution {
+    width: 100% !important; /* 强制占满容器 */
+    margin-bottom: 2rem;
+  }
+
+  .solution-card {
+    padding: 2rem;
+    height: auto;
+  }
+
+  .content-point {
+    padding: 1rem 0;
+  }
+}
+
+/* 卡片公共样式 */
 .solution-card {
   background: white;
   border-radius: 16px;
@@ -259,11 +321,10 @@ const solutions = computed(() => [
   transform: translateY(20px);
   opacity: 0;
   animation: cardEnter 0.6s ease forwards;
-  animation-delay: var(--delay);
-  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1);
   position: relative;
   overflow: hidden;
-  border: none;
+  border: 1px solid rgba(137, 91, 255, 0.2);
+  background: linear-gradient(135deg, #f9f6ff 0%, #f0e9ff 100%);
 }
 
 .solution-card::after {
@@ -286,31 +347,16 @@ const solutions = computed(() => [
   box-shadow: 0 15px 50px rgba(137, 91, 255, 0.2);
 }
 
-.featured-solution .solution-card {
-  border: 1px solid rgba(137, 91, 255, 0.2);
-  background: linear-gradient(135deg, #f9f6ff 0%, #f0e9ff 100%);
-}
-
-.card-badge {
-  position: absolute;
-  top: 20px;
-  right: 20px;
-  background: var(--primary-gradient);
-  color: white;
-  padding: 0.3rem 1.2rem;
-  border-radius: 20px;
-  font-size: 0.8rem;
-  font-weight: 600;
-  box-shadow: 0 4px 12px rgba(137, 91, 255, 0.3);
+.card-header {
+  margin-bottom: 2rem;
 }
 
 .decorative-line {
   width: 50px;
   height: 3px;
   background: var(--primary-gradient);
-  margin-bottom: 1.5rem;
+  margin-bottom: 1rem;
   border-radius: 3px;
-  transition: width 0.3s ease;
 }
 
 .solution-card:hover .decorative-line {
@@ -318,87 +364,30 @@ const solutions = computed(() => [
 }
 
 .card-title {
-  font-size: 1.6rem;
+  font-size: 1.3rem;
   color: #2c0850;
-  margin-bottom: 1.5rem;
   font-weight: 600;
 }
 
 .content-point {
   display: flex;
-  gap: 1.2rem;
-  padding: 1.2rem 0;
+  gap: 1rem;
+  padding: 1rem 0;
   border-bottom: 1px solid rgba(137, 91, 255, 0.1);
 }
 
 .point-icon {
   color: var(--primary-color);
-  font-size: 1.4rem;
+  font-size: 1.2rem;
   flex-shrink: 0;
-  margin-top: 0.1rem;
 }
 
 .point-text {
   color: #4a3a6b;
-  line-height: 1.7;
-  font-size: 1.05rem;
+  line-height: 1.6;
+  font-size: 1rem;
 }
 
-.card-button {
-  background: var(--primary-gradient);
-  color: white;
-  border: none;
-  padding: 0.8rem 1.8rem;
-  border-radius: 8px;
-  font-weight: 500;
-  margin-top: 1.5rem;
-  cursor: pointer;
-  transition: all 0.3s ease;
-  box-shadow: 0 4px 15px rgba(137, 91, 255, 0.3);
-}
-
-.card-button:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 6px 20px rgba(137, 91, 255, 0.4);
-}
-
-/* 布局调整 */
-.secondary-solutions {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 2rem;
-}
-
-/* 响应式设计 */
-@media (max-width: 1024px) {
-  .secondary-solutions {
-    grid-template-columns: repeat(2, 1fr);
-  }
-
-  .featured-solution {
-    margin-bottom: 2rem;
-  }
-}
-
-@media (max-width: 768px) {
-  .hero-section {
-    padding: 7rem 0 5rem;
-  }
-
-  .hero-title {
-    font-size: 2.5rem;
-  }
-
-  .secondary-solutions {
-    grid-template-columns: 1fr;
-  }
-
-  .solution-card {
-    padding: 2rem;
-  }
-}
-
-/* 动画 */
 @keyframes cardEnter {
   to {
     opacity: 1;

src/views/BusinessServices/size375/index.vue

@@ -1,68 +1,118 @@
 <template>
   <div class="home-page">
     <div class="business-page">
-      <!-- 渐变背景标题区 -->
+      <!-- 渐变背景标题区 - 增加层次感 -->
       <section class="hero-section">
-        <div class="hero-content container">
+        <div class="container">
           <div class="title-wrapper">
             <h1 class="hero-title">
               {{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.TITLE") }}
             </h1>
-            <div class="title-decoration"></div>
           </div>
           <div class="hero-description">
-            <p>{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENT") }}</p>
-            <p>{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENTTWO") }}</p>
+            {{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENT") }}
           </div>
         </div>
       </section>
 
       <!-- 业务核心解决方案 -->
       <main class="container">
-        <!-- 解决方案网格 -->
+        <section>
+          <h1 class="hero-title">
+            {{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENTTWO") }}
+          </h1>
+        </section>
+
+        <!-- 解决方案网格 - 响应式弹性布局 -->
         <div class="solution-grid">
-          <!-- 主推解决方案 -->
-          <div class="featured-solution">
-            <div class="solution-card" :style="{ '--delay': '0s' }">
-              <div class="card-header">
-                <div class="decorative-line"></div>
-                <h2 class="card-title">{{ solutions[0].title }}</h2>
+          <!-- 主推解决方案组 -->
+          <div class="solution-group">
+            <div class="featured-solution">
+              <div class="solution-card" :style="{ '--delay': '0s' }">
+                <div class="card-header">
+                  <div class="decorative-line"></div>
+                  <h2 class="card-title">{{ solutions[0].title }}</h2>
+                </div>
+                <ul class="card-content">
+                  <li
+                    v-for="(point, pIndex) in solutions[0].points"
+                    :key="pIndex"
+                    class="content-point"
+                  >
+                    <div class="point-icon">➤</div>
+                    <div class="point-text">{{ point }}</div>
+                  </li>
+                </ul>
+              </div>
+            </div>
+
+            <div class="featured-solution">
+              <div class="solution-card" :style="{ '--delay': '0.2s' }">
+                <div class="card-header">
+                  <div class="decorative-line"></div>
+                  <h2 class="card-title">{{ solutions[1].title }}</h2>
+                </div>
+                <ul class="card-content">
+                  <li
+                    v-for="(point, pIndex) in solutions[1].points"
+                    :key="pIndex"
+                    class="content-point"
+                  >
+                    <div class="point-icon">➤</div>
+                    <div class="point-text">{{ point }}</div>
+                  </li>
+                </ul>
               </div>
-              <ul class="card-content">
-                <li
-                  v-for="(point, pIndex) in solutions[0].points"
-                  :key="pIndex"
-                  class="content-point"
-                >
-                  <div class="point-icon">➤</div>
-                  <div class="point-text">{{ point }}</div>
-                </li>
-              </ul>
             </div>
           </div>
 
-          <!-- 次要解决方案组 -->
-          <div class="secondary-solutions">
-            <div
-              v-for="(item, index) in solutions.slice(1)"
-              :key="index + 1"
-              class="solution-card"
-              :style="{ '--delay': (index + 1) * 0.1 + 's' }"
-            >
-              <div class="card-header">
-                <div class="decorative-line"></div>
-                <h2 class="card-title">{{ item.title }}</h2>
+          <!-- 次推解决方案组 -->
+          <div class="solution-group">
+            <div class="featured-solution">
+              <div
+                class="solution-card"
+                style="height: auto"
+                :style="{ '--delay': '0.4s' }"
+              >
+                <div class="card-header">
+                  <div class="decorative-line"></div>
+                  <h2 class="card-title">{{ solutions[2].title }}</h2>
+                </div>
+                <ul class="card-content">
+                  <li
+                    v-for="(point, pIndex) in solutions[2].points"
+                    :key="pIndex"
+                    class="content-point"
+                  >
+                    <div class="point-icon">➤</div>
+                    <div class="point-text">{{ point }}</div>
+                  </li>
+                  <li style="padding-bottom: 45px"></li>
+                </ul>
+              </div>
+            </div>
+
+            <div class="featured-solution">
+              <div
+                class="solution-card"
+                style="height: auto"
+                :style="{ '--delay': '0.6s' }"
+              >
+                <div class="card-header">
+                  <div class="decorative-line"></div>
+                  <h2 class="card-title">{{ solutions[3].title }}</h2>
+                </div>
+                <ul class="card-content">
+                  <li
+                    v-for="(point, pIndex) in solutions[3].points"
+                    :key="pIndex"
+                    class="content-point"
+                  >
+                    <div class="point-icon">➤</div>
+                    <div class="point-text">{{ point }}</div>
+                  </li>
+                </ul>
               </div>
-              <ul class="card-content">
-                <li
-                  v-for="(point, pIndex) in item.points"
-                  :key="pIndex"
-                  class="content-point"
-                >
-                  <div class="point-icon">➤</div>
-                  <div class="point-text">{{ point }}</div>
-                </li>
-              </ul>
             </div>
           </div>
         </div>
@@ -112,7 +162,45 @@ const solutions = computed(() => [
 </script>
 
 <style scoped>
-/* 基础变量定义 */
+/* 基础样式 */
+.container {
+  margin: 0 auto;
+  padding: 0 2rem;
+}
+
+/* 标题区样式 */
+.hero-section {
+  background: linear-gradient(135deg, #f8fbfe 0%, #e6f0ff 100%);
+  padding: 8rem 0 6rem;
+  position: relative;
+  overflow: hidden;
+}
+
+.hero-section::after {
+  content: "";
+  position: absolute;
+  bottom: -50px;
+  left: 0;
+  width: 100%;
+  height: 100px;
+  background: white;
+  transform: skewY(-3deg);
+}
+
+.hero-title {
+  font-size: 40px;
+  color: #2c3e50;
+  margin-bottom: 2rem;
+  animation: slideIn 1s ease;
+}
+
+.hero-description {
+  margin: 0 auto;
+  font-size: 1.1rem;
+  line-height: 1.8;
+  color: #5a6d80;
+}
+
 :root {
   --primary-color: #895bff;
   --primary-light: #a07cff;
@@ -122,26 +210,26 @@ const solutions = computed(() => [
     var(--primary-light) 0%,
     var(--primary-color) 100%
   );
-  --text-primary: #2c0850;
-  --text-secondary: #4a3a6b;
-  --text-light: #6c5ce7;
-  --bg-light: #f9f6ff;
-  --border-radius: 16px;
-  --box-shadow: 0 10px 30px rgba(137, 91, 255, 0.15);
+}
+.home-page {
+  background-image: url("@/assets/image/bg-mobile.png");
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
 }
 
-/* 基础样式 */
 .container {
-  padding: 0 1.25rem;
+  margin: 0 auto;
+  padding: 0 2rem;
 }
 
-/* 标题区样式 */
+/* 标题区 - 紫色渐变 */
 .hero-section {
   background: var(--primary-gradient);
-  padding: 6rem 0 4rem;
+  padding: 10rem 0 8rem;
   position: relative;
   overflow: hidden;
-  color: #895bff;
+  color: white;
 }
 
 .hero-section::before {
@@ -154,63 +242,87 @@ const solutions = computed(() => [
   background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><path fill="rgba(255,255,255,0.05)" d="M0,0 L100,0 L100,100 Q50,80 0,100 Z"></path></svg>')
     no-repeat bottom/100% 30%;
 }
-
-.hero-section::after {
-  content: "";
-  position: absolute;
-  bottom: -20px;
-  left: 0;
-  width: 100%;
-  height: 40px;
-  background: white;
-  transform: skewY(-3deg);
-}
-
-.hero-title {
-  font-size: clamp(1.8rem, 5vw, 2.5rem);
-  margin-bottom: 1.5rem;
-  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
 .title-decoration {
   position: absolute;
-  bottom: -10px;
+  bottom: -15px;
   left: 0;
-  width: 60%;
-  height: 3px;
+  width: 80%;
+  height: 4px;
   background: rgba(255, 255, 255, 0.5);
   border-radius: 2px;
 }
 
-.hero-description {
-  font-size: 1rem;
-  line-height: 1.7;
-  opacity: 0.9;
-}
-
 /* 解决方案网格 */
 .solution-grid {
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-  padding: 3rem 0;
-  position: relative;
+  padding: 6rem 0 4rem;
 }
 
-/* 卡片设计 */
+.solution-group {
+  display: flex;
+  flex-direction: column;
+  gap: 3rem;
+  margin-bottom: 4rem;
+}
+
+/* 桌面端布局（>=768px） */
+@media (min-width: 768px) {
+  .solution-group {
+    flex-direction: row;
+    gap: 4rem;
+  }
+
+  .featured-solution {
+    flex: 1;
+  }
+
+  .solution-card {
+    height: 350px;
+  }
+}
+
+/* 移动端布局（<768px） */
+@media (max-width: 767px) {
+  .home-page {
+    background-image: url("@/assets/image/bg-mobile.png");
+  }
+
+  .hero-title {
+    font-size: 1.8rem;
+  }
+
+  .solution-group {
+    flex-direction: column;
+    gap: 2rem;
+  }
+
+  .featured-solution {
+    width: 100% !important; /* 强制占满容器 */
+    margin-bottom: 2rem;
+  }
+
+  .solution-card {
+    padding: 2rem;
+    height: auto;
+  }
+
+  .content-point {
+    padding: 1rem 0;
+  }
+}
+
+/* 卡片公共样式 */
 .solution-card {
   background: white;
-  border-radius: var(--border-radius);
-  padding: 1.5rem;
-  box-shadow: var(--box-shadow);
+  border-radius: 16px;
+  padding: 2.5rem;
+  box-shadow: 0 10px 40px rgba(137, 91, 255, 0.1);
   transform: translateY(20px);
   opacity: 0;
   animation: cardEnter 0.6s ease forwards;
-  animation-delay: var(--delay);
-  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1);
   position: relative;
   overflow: hidden;
-  border: 1px solid rgba(137, 91, 255, 0.1);
+  border: 1px solid rgba(137, 91, 255, 0.2);
+  background: linear-gradient(135deg, #f9f6ff 0%, #f0e9ff 100%);
 }
 
 .solution-card::after {
@@ -229,67 +341,51 @@ const solutions = computed(() => [
 }
 
 .solution-card:hover {
-  transform: translateY(-5px);
-  box-shadow: 0 15px 40px rgba(137, 91, 255, 0.2);
+  transform: translateY(-8px);
+  box-shadow: 0 15px 50px rgba(137, 91, 255, 0.2);
 }
 
-.featured-solution .solution-card {
-  background: var(--bg-light);
-  border: 1px solid rgba(137, 91, 255, 0.2);
+.card-header {
+  margin-bottom: 2rem;
 }
 
 .decorative-line {
-  width: 40px;
+  width: 50px;
   height: 3px;
   background: var(--primary-gradient);
   margin-bottom: 1rem;
   border-radius: 3px;
-  transition: width 0.3s ease;
 }
 
 .solution-card:hover .decorative-line {
-  width: 60px;
+  width: 80px;
 }
 
 .card-title {
   font-size: 1.3rem;
-  color: var(--text-primary);
-  margin-bottom: 1rem;
+  color: #2c0850;
   font-weight: 600;
 }
 
 .content-point {
   display: flex;
-  gap: 0.8rem;
-  padding: 0.8rem 0;
+  gap: 1rem;
+  padding: 1rem 0;
   border-bottom: 1px solid rgba(137, 91, 255, 0.1);
 }
 
-.content-point:last-child {
-  border-bottom: none;
-}
-
 .point-icon {
   color: var(--primary-color);
   font-size: 1.2rem;
   flex-shrink: 0;
-  margin-top: 0.1rem;
 }
 
 .point-text {
-  color: var(--text-secondary);
+  color: #4a3a6b;
   line-height: 1.6;
-  font-size: 0.95rem;
+  font-size: 1rem;
 }
 
-/* 布局调整 */
-.secondary-solutions {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: 1.5rem;
-}
-
-/* 动画 */
 @keyframes cardEnter {
   to {
     opacity: 1;

src/views/BusinessServices/size768/index.vue

@@ -0,0 +1,275 @@
+<template>
+  <div class="home-page">
+    <div class="business-page">
+      <!-- 渐变背景标题区 -->
+      <section class="hero-section">
+        <div class="container">
+          <div class="title-wrapper">
+            <h1 class="hero-title">
+              {{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.TITLE") }}
+            </h1>
+          </div>
+          <div class="hero-description">
+            {{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENT") }}
+          </div>
+        </div>
+      </section>
+
+      <!-- 业务核心解决方案 -->
+      <main class="container">
+        <section>
+          <h1 class="hero-title">
+            {{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENTTWO") }}
+          </h1>
+        </section>
+
+        <!-- 解决方案网格 - 响应式弹性布局 -->
+        <div class="solution-grid">
+          <!-- 统一使用弹性列布局，通过媒体查询控制排列方式 -->
+          <div
+            v-for="(solution, sIndex) in solutions"
+            :key="sIndex"
+            class="featured-solution"
+          >
+            <div
+              class="solution-card"
+              :style="{ '--delay': `${sIndex * 0.2}s` }"
+            >
+              <div class="card-header">
+                <div class="decorative-line"></div>
+                <h2 class="card-title">{{ solution.title }}</h2>
+              </div>
+              <ul class="card-content">
+                <li
+                  v-for="(point, pIndex) in solution.points"
+                  :key="pIndex"
+                  class="content-point"
+                >
+                  <div class="point-icon">➤</div>
+                  <div class="point-text">{{ point }}</div>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useI18n } from "vue-i18n";
+import { computed } from "vue";
+
+const { t } = useI18n();
+
+const solutions = computed(() => [
+  {
+    title: t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.ONE.TITLE"),
+    points: [
+      t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.ONE.CONTENT"),
+      t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.ONE.CONTENTTWO"),
+    ],
+  },
+  {
+    title: t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.TWO.TITLE"),
+    points: [
+      t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.TWO.CONTENT"),
+      t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.TWO.CONTENTTWO"),
+    ],
+  },
+  {
+    title: t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.THREE.TITLE"),
+    points: [
+      t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.THREE.CONTENT"),
+      t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.THREE.CONTENTTWO"),
+      t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.THREE.CONTENTTHREE"),
+    ],
+  },
+  {
+    title: t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.FOUR.TITLE"),
+    points: [
+      t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.FOUR.CONTENT"),
+      t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.FOUR.CONTENTTWO"),
+      t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.FOUR.CONTENTTHREE"),
+    ],
+  },
+]);
+</script>
+
+<style scoped>
+/* 基础样式 */
+.container {
+  margin: 0 auto;
+  padding: 0 2rem;
+  max-width: 1600px;
+}
+
+/* 标题区样式 */
+.hero-section {
+  background: linear-gradient(135deg, #f8fbfe 0%, #e6f0ff 100%);
+  padding: 8rem 0 6rem;
+  position: relative;
+  overflow: hidden;
+}
+
+.hero-section::after {
+  content: "";
+  position: absolute;
+  bottom: -50px;
+  left: 0;
+  width: 100%;
+  height: 100px;
+  background: white;
+  transform: skewY(-3deg);
+}
+
+.hero-title {
+  font-size: 2.5rem;
+  color: #2c3e50;
+  margin-bottom: 2rem;
+  position: relative;
+}
+
+.hero-title::after {
+  content: "";
+  position: absolute;
+  bottom: -10px;
+  left: 0;
+  width: 80px;
+  height: 4px;
+  background: linear-gradient(135deg, #895bff 0%, #6a11cb 100%);
+  border-radius: 2px;
+}
+
+.hero-description {
+  max-width: 1000px;
+  margin: 0 auto;
+  font-size: 1.1rem;
+  line-height: 1.8;
+  color: #5a6d80;
+}
+
+:root {
+  --primary-color: #895bff;
+  --primary-light: #a07cff;
+  --primary-dark: #6a11cb;
+  --primary-gradient: linear-gradient(
+    135deg,
+    var(--primary-light) 0%,
+    var(--primary-color) 100%
+  );
+}
+
+.home-page {
+  background-image: url("@/assets/image/bg-mobile.png");
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+/* 解决方案网格 - 响应式布局 */
+.solution-grid {
+  padding: 6rem 0;
+  display: grid;
+  grid-template-columns: 1fr; /* 默认单列（移动端） */
+  gap: 3rem;
+}
+
+/* 中等屏幕（768px-1439px） - 单列布局 */
+@media (min-width: 768px) and (max-width: 1439px) {
+  .solution-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* 大屏幕（≥1440px） - 双列布局 */
+@media (min-width: 1440px) {
+  .solution-grid {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+/* 卡片样式 */
+.solution-card {
+  background: white;
+  border-radius: 16px;
+  padding: 2.5rem;
+  box-shadow: 0 10px 40px rgba(137, 91, 255, 0.1);
+  transform: translateY(20px);
+  opacity: 0;
+  animation: cardEnter 0.6s ease forwards;
+  position: relative;
+  overflow: hidden;
+  border: 1px solid rgba(137, 91, 255, 0.2);
+  transition: all 0.3s ease;
+}
+
+.solution-card::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 4px;
+  background: var(--primary-gradient);
+}
+
+.solution-card:hover {
+  transform: translateY(-8px);
+  box-shadow: 0 15px 50px rgba(137, 91, 255, 0.2);
+}
+
+.card-header {
+  margin-bottom: 2rem;
+}
+
+.decorative-line {
+  width: 50px;
+  height: 3px;
+  background: var(--primary-gradient);
+  margin-bottom: 1rem;
+  border-radius: 3px;
+  transition: width 0.3s ease;
+}
+
+.solution-card:hover .decorative-line {
+  width: 80px;
+}
+
+.card-title {
+  font-size: 1.3rem;
+  color: #2c0850;
+  font-weight: 600;
+}
+
+.content-point {
+  display: flex;
+  gap: 1rem;
+  padding: 1rem 0;
+  border-bottom: 1px solid rgba(137, 91, 255, 0.1);
+}
+
+.content-point:last-child {
+  border-bottom: none;
+}
+
+.point-icon {
+  color: var(--primary-color);
+  font-size: 1.2rem;
+  flex-shrink: 0;
+}
+
+.point-text {
+  color: #4a3a6b;
+  line-height: 1.6;
+  font-size: 1rem;
+}
+
+@keyframes cardEnter {
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+</style>

src/views/CommitteeAppointment/index.vue

@@ -1,14 +1,26 @@
 <script setup>
-import size1920 from "@/views/CommitteeAppointment/size1920/index.vue";
-import size375 from "@/views/CommitteeAppointment/size375/index.vue";
 import { computed } from "vue";
 import { useWindowSize } from "@vueuse/core";
 
+import size375 from "./size375/index.vue";
+import size768 from "./size768/index.vue";
+import size1440 from "./size1440/index.vue";
+import size1920 from "./size1920/index.vue";
+import { useRouter } from "vue-router";
+import { useI18n } from "vue-i18n";
+
+const router = useRouter();
 const { width } = useWindowSize();
+const { t } = useI18n();
+
 const viewComponent = computed(() => {
   const viewWidth = width.value;
   if (viewWidth <= 450) {
     return size375;
+  } else if (viewWidth <= 1100) {
+    return size768;
+  } else if (viewWidth <= 1500) {
+    return size1440;
   } else if (viewWidth <= 1920 || viewWidth > 1920) {
     return size1920;
   }

src/views/CommitteeAppointment/size1440/index.vue

@@ -0,0 +1,335 @@
+<template>
+  <div class="committees-page">
+    <!-- 标题区 -->
+    <section class="hero-section">
+      <div class="container">
+        <h1 style="font-size: 40px">Committee Composition</h1>
+      </div>
+    </section>
+
+    <!-- 委员会表格 -->
+    <div class="container">
+      <div class="committees-table">
+        <!-- 表头 - 委员会名称 -->
+        <div class="table-header">
+          <div class="director-cell"></div>
+          <div class="committee-cell">
+            <h3>Audit Committee</h3>
+          </div>
+          <div class="committee-cell">
+            <h3>Compensation Committee</h3>
+          </div>
+          <div class="committee-cell">
+            <h3>Nominating and Corporate Governance Committee</h3>
+          </div>
+        </div>
+
+        <!-- 表格内容 - 每位董事 -->
+        <div
+          class="table-row"
+          v-for="(director, index) in otherDirectors"
+          :key="index"
+        >
+          <!-- 董事姓名 -->
+          <div class="director-cell">
+            <div class="director-info">
+              <div class="avatar"></div>
+              <div>
+                <router-link :to="'/boarddirectors'" class="director-link">
+                  {{ director.name }}
+                </router-link>
+                <!-- <p class="director-title">{{ director.title }}</p> -->
+              </div>
+            </div>
+          </div>
+
+          <!-- 委员会职位 -->
+          <div class="committee-cell">
+            <div class="role-badges">
+              <template v-if="getCommitteeRole(director.name, 'Audit')">
+                <div
+                  class="role-badge"
+                  :class="
+                    getCommitteeRole(director.name, 'Audit').toLowerCase()
+                  "
+                >
+                  <span class="badge-icon"></span>
+                </div>
+              </template>
+            </div>
+          </div>
+
+          <div class="committee-cell">
+            <div class="role-badges">
+              <template v-if="getCommitteeRole(director.name, 'Compensation')">
+                <div
+                  class="role-badge"
+                  :class="
+                    getCommitteeRole(
+                      director.name,
+                      'Compensation'
+                    ).toLowerCase()
+                  "
+                >
+                  <span class="badge-icon"></span>
+                </div>
+              </template>
+            </div>
+          </div>
+
+          <div class="committee-cell">
+            <div class="role-badges">
+              <template v-if="getCommitteeRole(director.name, 'Governance')">
+                <div
+                  class="role-badge"
+                  :class="
+                    getCommitteeRole(director.name, 'Governance').toLowerCase()
+                  "
+                >
+                  <span class="badge-icon"></span>
+                </div>
+              </template>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const otherDirectors = [
+  {
+    name: "Cao Yu",
+    title: "Chief Financial Officer, Secretary, Treasurer and Director",
+  },
+  { name: "David Lazar", title: "Director" },
+  { name: "Hu Bin", title: "Director" },
+  { name: "David Natan", title: "Director" },
+  { name: "Chan Oi Fat", title: "Director" },
+];
+
+// 模拟数据 - 实际应从API获取
+const committeeRoles = {
+  "Cao Yu": {},
+  "David Lazar": {},
+  "Hu Bin": {
+    Compensation: "Chair",
+    Governance: "Member",
+    Audit: "Chair",
+  },
+  "David Natan": {
+    Compensation: "Chair",
+    Governance: "Member",
+    Audit: "Chair",
+  },
+  "Chan Oi Fat": {
+    Compensation: "Chair",
+    Governance: "Member",
+    Audit: "Chair",
+  },
+};
+
+const getCommitteeRole = (name, committee) => {
+  return committeeRoles[name]?.[committee] || null;
+};
+</script>
+
+<style scoped>
+/* 紫色主题变量 */
+:root {
+  --primary: #895bff;
+  --primary-light: #a07cff;
+  --primary-dark: #6a11cb;
+  --primary-transparent: rgba(137, 91, 255, 0.1);
+}
+
+.committees-page {
+  background-image: url("@/assets/image/bg.png");
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+  min-height: 100vh;
+}
+
+/* 标题区设计 */
+.hero-section {
+  background: linear-gradient(
+    135deg,
+    var(--primary-light) 0%,
+    var(--primary) 100%
+  );
+  padding: 6rem 2rem;
+  text-align: center;
+  color: #895bff;
+}
+
+.hero-section h1 {
+  font-size: 2.8rem;
+  margin-bottom: 1rem;
+}
+
+.hero-section p {
+  font-size: 1.2rem;
+  opacity: 0.9;
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 2rem;
+}
+
+/* 表格设计 */
+.committees-table {
+  margin: 4rem 0;
+  background: white;
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 10px 30px rgba(137, 91, 255, 0.08);
+}
+
+.table-header,
+.table-row {
+  display: grid;
+  grid-template-columns: 1.5fr repeat(3, 1fr);
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.table-header {
+  background: #f9f6ff;
+  position: sticky;
+  top: 0;
+  z-index: 2;
+}
+
+.committee-cell {
+  padding: 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  border-right: 1px solid #f0f0f0;
+}
+
+.committee-cell:last-child {
+  border-right: none;
+}
+
+.committee-cell h3 {
+  color: var(--primary-dark);
+  font-size: 1.1rem;
+  font-weight: 600;
+}
+
+.director-cell {
+  padding: 1.5rem;
+  border-right: 1px solid #f0f0f0;
+}
+
+.director-info {
+  display: flex;
+  align-items: center;
+  gap: 1.2rem;
+}
+
+.director-info h4 {
+  font-size: 1.1rem;
+  color: #333;
+  margin-bottom: 0.3rem;
+}
+
+.director-title {
+  font-size: 0.85rem;
+  color: #666;
+}
+
+/* 职位徽章设计 */
+.role-badges {
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+}
+
+.role-badge {
+  padding: 0.5rem 1rem;
+  border-radius: 20px;
+  font-size: 0.85rem;
+  font-weight: 500;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 80px;
+}
+
+.badge-icon {
+  width: 16px;
+  height: 16px;
+  margin-left: 0.5rem;
+  background: currentColor;
+  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5L20 7"/></svg>')
+    no-repeat center;
+}
+
+/* 悬停效果 */
+.table-row {
+  transition: all 0.3s ease;
+}
+
+.table-row:hover {
+  background: #fdfcff;
+  transform: translateY(-1px);
+  box-shadow: 0 5px 15px rgba(137, 91, 255, 0.05);
+}
+
+/* 响应式设计 */
+@media (max-width: 1024px) {
+  .committees-table {
+    overflow-x: auto;
+  }
+
+  .table-header,
+  .table-row {
+    grid-template-columns: 250px repeat(3, 200px);
+    width: max-content;
+    min-width: 100%;
+  }
+}
+
+@media (max-width: 768px) {
+  .hero-section {
+    padding: 4rem 1rem;
+  }
+
+  .hero-section h1 {
+    font-size: 2.2rem;
+  }
+
+  .director-info {
+    flex-direction: column;
+    text-align: center;
+    gap: 0.8rem;
+  }
+
+  .director-cell {
+    padding: 1rem;
+  }
+
+  .committee-cell {
+    padding: 1rem 0.5rem;
+  }
+}
+.director-link {
+  color: #895bff;
+  font-size: 18px;
+  font-weight: bold;
+  text-decoration: none;
+  transition: color 0.3s ease;
+}
+
+.director-link:hover {
+  color: var(--primary);
+  text-decoration: underline;
+}
+</style>

src/views/CommitteeAppointment/size1920/index.vue

@@ -3,7 +3,7 @@
     <!-- 标题区 -->
     <section class="hero-section">
       <div class="container">
-        <h1>Committee Composition</h1>
+        <h1 style="font-size: 40px">Committee Composition</h1>
       </div>
     </section>
 
@@ -322,6 +322,8 @@ const getCommitteeRole = (name, committee) => {
 }
 .director-link {
   color: #895bff;
+  font-size: 18px;
+  font-weight: bold;
   text-decoration: none;
   transition: color 0.3s ease;
 }

src/views/CommitteeAppointment/size375/index.vue

@@ -141,7 +141,7 @@ const getInitials = (name) => {
 
 /* 页面样式 */
 .board-members-page {
-  background-image: url("@/assets/image/bg.png");
+  background-image: url("@/assets/image/bg-mobile.png");
   background-size: 100% 100%;
   background-position: center;
   background-repeat: no-repeat;

src/views/CommitteeAppointment/size768/index.vue

@@ -0,0 +1,275 @@
+<template>
+  <div class="board-members-page">
+    <!-- 页面头部 -->
+    <section class="hero-section">
+      <div class="container">
+        <h1 class="page-title">Committee Composition</h1>
+      </div>
+    </section>
+
+    <!-- 移动端视图 -->
+    <div class="container">
+      <div
+        class="director-card"
+        v-for="(director, index) in otherDirectors"
+        :key="director.name"
+        :style="{ '--delay': index * 0.1 + 's' }"
+      >
+        <div class="card-header">
+          <div class="director-info">
+            <div class="avatar">
+              <span class="initials">{{ getInitials(director.name) }}</span>
+            </div>
+            <div>
+              <router-link
+                :to="`/boarddirectors/${director.name}`"
+                class="director-name"
+              >
+                {{ director.name }}
+              </router-link>
+              <!-- <p class="director-title">{{ director.title }}</p> -->
+            </div>
+          </div>
+        </div>
+
+        <div class="committee-groups">
+          <!-- 委员会职位 -->
+          <div
+            class="committee-group"
+            v-if="getCommittees(director.name).length > 0"
+          >
+            <div class="role-badges">
+              <template
+                v-for="(committee, idx) in getCommittees(director.name)"
+                :key="idx"
+              >
+                <div
+                  class="role-badge"
+                  :class="
+                    getCommitteeRole(director.name, committee).toLowerCase()
+                  "
+                >
+                  <span>{{ getCommitteeRole(director.name, committee) }}</span>
+                  <span class="committee-name"></span>
+                </div>
+              </template>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from "vue";
+
+// 董事会成员数据
+const otherDirectors = [
+  {
+    name: "Cao Yu",
+    title: "Chief Financial Officer, Secretary, Treasurer and Director",
+  },
+  { name: "David Lazar", title: "Director" },
+  { name: "Hu Bin", title: "Director" },
+  { name: "David Natan", title: "Director" },
+  { name: "Chan Oi Fat", title: "Director" },
+];
+
+// 委员会角色数据
+const committeeRoles = {
+  "Cao Yu": {},
+  "David Lazar": {},
+  "Hu Bin": {
+    Compensation: "Audit Committee ",
+    Governance: "Compensation Committee",
+    Audit: "Nominating Committee",
+  },
+  "David Natan": {
+    Compensation: "Audit Committee ",
+    Governance: "Compensation Committee",
+    Audit: "Nominating Committee",
+  },
+  "Chan Oi Fat": {
+    Compensation: "Audit Committee ",
+    Governance: "Compensation Committee",
+    Audit: "Nominating Committee",
+  },
+};
+
+// 获取委员会列表
+const getCommittees = (name) => {
+  return Object.keys(committeeRoles[name] || {});
+};
+
+// 获取委员会角色
+const getCommitteeRole = (name, committee) => {
+  return committeeRoles[name]?.[committee] || "";
+};
+
+// 获取委员会简称
+const getCommitteeShortName = (committee) => {
+  const names = {
+    Audit: "Audit",
+    Compensation: "Comp.",
+    Governance: "Governance",
+  };
+  return names[committee] || committee;
+};
+
+// 获取姓名首字母
+const getInitials = (name) => {
+  return name
+    .split(" ")
+    .map((word) => word[0])
+    .join("")
+    .toUpperCase();
+};
+</script>
+
+<style scoped>
+/* 基础变量 */
+:root {
+  --primary: #895bff;
+  --primary-light: #a07cff;
+  --primary-dark: #6a11cb;
+  --text-primary: #333;
+  --text-secondary: #666;
+  --bg-light: #f9f6ff;
+  --border-radius: 12px;
+}
+
+/* 页面样式 */
+.board-members-page {
+  background-image: url("@/assets/image/bg-mobile.png");
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+  min-height: 100vh;
+}
+
+.container {
+  padding: 0 16px;
+  margin: 0 auto;
+}
+
+/* 头部样式 */
+.hero-section {
+  background: linear-gradient(
+    135deg,
+    var(--primary-light) 0%,
+    var(--primary) 100%
+  );
+  padding: 3rem 1rem;
+  text-align: center;
+  color: #895bff;
+  margin-bottom: 2rem;
+}
+
+.page-title {
+  font-size: clamp(1.75rem, 5vw, 2.25rem);
+  margin-bottom: 0.5rem;
+  font-weight: 600;
+}
+
+.page-subtitle {
+  font-size: clamp(1rem, 3vw, 1.25rem);
+  opacity: 0.9;
+}
+
+/* 董事卡片 */
+.director-card {
+  background: white;
+  border-radius: var(--border-radius);
+  margin-bottom: 1.5rem;
+  box-shadow: 0 5px 20px rgba(137, 91, 255, 0.08);
+  overflow: hidden;
+  transform: translateY(20px);
+  opacity: 0;
+  animation: fadeIn 0.5s ease forwards;
+  animation-delay: var(--delay);
+}
+
+@keyframes fadeIn {
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.card-header {
+  padding: 1.25rem;
+  background: var(--bg-light);
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.director-info {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.avatar {
+  width: 56px;
+  height: 56px;
+  background: var(--primary-transparent);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.initials {
+  font-size: 1.25rem;
+  font-weight: bold;
+  color: var(--primary);
+}
+
+.director-name {
+  color: var(--text-primary);
+  text-decoration: none;
+  font-size: 1.2rem;
+  font-weight: 500;
+  display: block;
+  margin-bottom: 0.25rem;
+}
+
+.director-title {
+  font-size: 0.9rem;
+  color: var(--text-secondary);
+  line-height: 1.3;
+}
+
+/* 委员会职位 */
+.committee-groups {
+  padding: 1.25rem;
+}
+
+.role-badges {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.role-badge {
+  padding: 0.35rem 0.75rem;
+  border-radius: 16px;
+  font-size: 0.8rem;
+  font-weight: 500;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  background: rgba(137, 91, 255, 0.08);
+  color: var(--primary);
+}
+
+.role-badge.chair {
+  background: rgba(137, 91, 255, 0.15);
+  color: var(--primary-dark);
+}
+
+.committee-name {
+  font-size: 0.75rem;
+  opacity: 0.8;
+}
+</style>

src/views/boarddirectors/size1440/index.vue

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

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>
@@ -69,10 +69,9 @@ const otherDirectors = [
 }
 
 .page-title {
-  text-align: center;
-  margin-bottom: 16px;
-  font-weight: 500;
-  color: #1a1a1a;
+  font-size: 2.5rem; /* 18px */
+  margin-bottom: 30px;
+  color: #333;
 }
 
 .directors-list {

src/views/boarddirectors/size375/index.vue

@@ -7,16 +7,13 @@
       <div class="directors-list">
         <div
           v-for="(director, index) in otherDirectors"
-          :key="director.name"
+          :key="index"
           class="director-item"
-          v-motion-fade
         >
-          <div class="director-header">
-            <n-h2 class="director-name">{{ director.name }}</n-h2>
-            <n-text class="director-title">{{ director.title }}</n-text>
-          </div>
+          <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>
@@ -29,70 +26,74 @@ 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 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.",
+      "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 April 11, 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 Titan Pharmaceuticals Inc. listed on the Nasdaq (TTNP) from August 2022 through April 11, 2024, where he also served as a director and board chairman from August 2022 until October 2023. He has also served as the CEO of Custodian Ventures LLC, a company which specializes in assisting distressed public companies 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 role as Chief Eecutive Officer of Custodian Ventures LLC, Mr. Lazar has successfully served as a custodian to numerous public companies across a wide range of industries.",
+      "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 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.",
+      "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 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.",
+      "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 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).",
+      "Chan Oi Fat, age 46, has served as Vice President – Finance of SML Group Corporation since March 2018 and as Company Secretary of China LeonInspection Holding Limited (HKEX: 1586) since February 2018 and of Raily Aesthetic Medicine International Holdings Limited (HKEX: 2135) sinceNovember 2020. He is an independent non-executive director of Huajin International Holdings Limited (HKEX: 2738) (since March 2025) and UBoTHolding Limited (HKEX GEM: 8529) (since May 2024) and previously served as an independent non-executive director of China Saftower InternationalHolding Group Limited (HKEX GEM: 8623) from June 2020 to December 2023 and Shanghai Prime Machinery Company Limited (HKEX: 2345) fromJune 2014 to January 2021. Mr. Chan holds a B.B.A. (Hons) in Accountancy from the City University of Hong Kong (2000) and is a member of theAssociation of Chartered Certified Accountants (since 2003) and the Hong Kong Institute of Certified Public Accountants (since 2004).",
   },
 ];
 </script>
 
 <style scoped>
-/* 基础变量定义 */
 :root {
-  --primary-color: #895bff;
-  --text-primary: #1a1a1a;
-  --text-secondary: #4a4a4a;
-  --text-light: #666;
-  --border-color: #f0f0f0;
+  --primary-color: #333;
+  --secondary-color: #666;
+  --divider-color: #f0f0f0;
   --mobile-padding: 16px;
-  --section-spacing: 32px;
+  --tablet-padding: 24px;
+}
+
+.home-page {
+  background-image: url("@/assets/image/bg-mobile.png");
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
 }
 
 .directors-page {
+  max-width: 1200px;
   margin: 0 auto;
-  padding: 40px var(--mobile-padding);
+  padding: clamp(2rem, 5vw, 4rem)
+    clamp(var(--mobile-padding), 4vw, var(--tablet-padding));
 }
 
 .page-title {
-  text-align: center;
-  margin-bottom: 12px;
-  font-weight: 500;
-  color: var(--text-primary);
-  font-size: clamp(1.5rem, 5vw, 2rem);
+  font-size: clamp(1.75rem, 4vw, 2.5rem);
+  margin-bottom: clamp(1.5rem, 3vw, 2rem);
+  color: var(--primary-color);
 }
 
 .directors-list {
   display: flex;
   flex-direction: column;
-  gap: var(--section-spacing);
-  margin-top: 32px;
+  gap: clamp(2rem, 4vw, 3rem);
+  margin-top: clamp(1.5rem, 3vw, 2.5rem);
 }
 
 .director-item {
-  padding-bottom: var(--section-spacing);
-  border-bottom: 1px solid var(--border-color);
+  padding-bottom: clamp(2rem, 4vw, 3rem);
+  border-bottom: 1px solid var(--divider-color);
 }
 
 .director-item:last-child {
@@ -100,47 +101,44 @@ const otherDirectors = [
   padding-bottom: 0;
 }
 
-.director-header {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
 .director-name {
-  margin-bottom: 0;
-  font-size: clamp(1.25rem, 4vw, 1.75rem);
+  margin-bottom: clamp(0.5rem, 1vw, 0.75rem);
+  font-size: clamp(1.25rem, 3vw, 1.75rem);
   font-weight: 500;
-  color: var(--text-primary);
+  color: var(--primary-color);
 }
 
 .director-title {
-  font-size: clamp(0.95rem, 3vw, 1.1rem);
-  color: var(--text-light);
+  font-size: clamp(1rem, 2vw, 1.25rem);
+  color: var(--secondary-color);
   display: block;
-  margin-bottom: 16px;
+  margin-bottom: clamp(1rem, 2vw, 1.5rem);
+  line-height: 1.5;
 }
 
 .divider {
-  margin: 12px 0;
-  background-color: var(--border-color);
+  margin: clamp(1rem, 2vw, 1.5rem) 0;
+  background-color: var(--divider-color);
 }
 
 .director-bio {
-  line-height: 1.7;
-  color: var(--text-secondary);
-  font-size: clamp(0.9rem, 2.8vw, 1rem);
-  text-align: justify;
+  line-height: 1.8;
+  color: #4a4a4a;
+  font-size: clamp(0.9rem, 1.8vw, 1rem);
 }
 
-/* 动画效果 */
-.v-motion-fade {
-  opacity: 0;
-  transform: translateY(10px);
-  transition: opacity 0.5s ease, transform 0.5s ease;
-}
+/* 针对超小屏幕的优化 */
+@media (max-width: 375px) {
+  .directors-page {
+    padding: clamp(1.5rem, 5vw, 2rem) clamp(12px, 4vw, 16px);
+  }
 
-.v-motion-fade.appear {
-  opacity: 1;
-  transform: translateY(0);
+  .director-name {
+    font-size: 1.25rem;
+  }
+
+  .director-title {
+    font-size: 1rem;
+  }
 }
 </style>

src/views/boarddirectors/size768/index.vue

@@ -0,0 +1,144 @@
+<template>
+  <div class="home-page">
+    <div class="directors-page">
+      <n-h1 class="page-title">Board of Directors</n-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>
+:root {
+  --primary-color: #333;
+  --secondary-color: #666;
+  --divider-color: #f0f0f0;
+  --mobile-padding: 16px;
+  --tablet-padding: 24px;
+}
+
+.home-page {
+  background-image: url("@/assets/image/bg-mobile.png");
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.directors-page {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: clamp(2rem, 5vw, 4rem)
+    clamp(var(--mobile-padding), 4vw, var(--tablet-padding));
+}
+
+.page-title {
+  font-size: clamp(1.75rem, 4vw, 2.5rem);
+  margin-bottom: clamp(1.5rem, 3vw, 2rem);
+  color: var(--primary-color);
+}
+
+.directors-list {
+  display: flex;
+  flex-direction: column;
+  gap: clamp(2rem, 4vw, 3rem);
+  margin-top: clamp(1.5rem, 3vw, 2.5rem);
+}
+
+.director-item {
+  padding-bottom: clamp(2rem, 4vw, 3rem);
+  border-bottom: 1px solid var(--divider-color);
+}
+
+.director-item:last-child {
+  border-bottom: none;
+  padding-bottom: 0;
+}
+
+.director-name {
+  margin-bottom: clamp(0.5rem, 1vw, 0.75rem);
+  font-size: clamp(1.25rem, 3vw, 1.75rem);
+  font-weight: 500;
+  color: var(--primary-color);
+}
+
+.director-title {
+  font-size: clamp(1rem, 2vw, 1.25rem);
+  color: var(--secondary-color);
+  display: block;
+  margin-bottom: clamp(1rem, 2vw, 1.5rem);
+  line-height: 1.5;
+}
+
+.divider {
+  margin: clamp(1rem, 2vw, 1.5rem) 0;
+  background-color: var(--divider-color);
+}
+
+.director-bio {
+  line-height: 1.8;
+  color: #4a4a4a;
+  font-size: clamp(0.9rem, 1.8vw, 1rem);
+}
+
+/* 针对超小屏幕的优化 */
+@media (max-width: 375px) {
+  .directors-page {
+    padding: clamp(1.5rem, 5vw, 2rem) clamp(12px, 4vw, 16px);
+  }
+
+  .director-name {
+    font-size: 1.25rem;
+  }
+
+  .director-title {
+    font-size: 1rem;
+  }
+}
+</style>

src/views/calculator/size1440/index.vue

@@ -1,22 +1,63 @@
 <script setup>
-import { NCarousel, NDivider, NMarquee, NPopselect } from "naive-ui";
-import { onUnmounted, ref, watch, onMounted, computed } from "vue";
+import { ref } from 'vue'
+import { NCard, NRadioGroup, NRadio, NInput, NDatePicker, NButton } from 'naive-ui'
 
+const investmentType = ref('amount')
+const amount = ref(10000)
+const dividendType = ref('notReinvested')
+const investmentDate = ref(null)
+
+const handleSubmit = () => {
+}
 </script>
 
 <template>
-  <header className="header">
-  1440
-  </header>
-  <main ref="main">
-
-  </main>
-  <footer>
-
-  </footer>
+  <div class="flex-center min-h-[70vh] animate-bg-move">
+    <n-card
+      class="w-[700px] glass-card animate-bounce-in shadow-xl border-none"
+      :content-style="{padding: '32px 32px'}"
+      :header-style="{background: 'transparent'}"
+    >
+      <div class="flex justify-between gap-6">
+        <!-- 投资类型 -->
+        <div class="flex-1">
+          <div class="text-lg font-bold mb-3">Investment Type</div>
+          <n-radio-group v-model:value="investmentType" name="investmentType">
+            <n-radio value="amount">Amount invested (in dollars)</n-radio>
+            <n-radio value="shares">Number of shares purchased</n-radio>
+          </n-radio-group>
+        </div>
+        <!-- 金额与分红 -->
+        <div class="flex-1">
+          <div class="text-lg font-bold mb-3">Amount to Calculate</div>
+          <n-input v-model:value="amount" type="number" class="mb-2" size="medium" placeholder="Enter amount" />
+          <n-radio-group v-model:value="dividendType" name="dividendType">
+            <n-radio value="reinvested">Dividends reinvested</n-radio>
+            <n-radio value="notReinvested">Dividends not reinvested</n-radio>
+          </n-radio-group>
+        </div>
+        <!-- 投资日期 -->
+        <div class="flex-1">
+          <div class="text-lg font-bold mb-3">Investment Date</div>
+          <n-date-picker v-model:value="investmentDate" type="date" class="w-full" size="medium" placeholder="Select date" />
+        </div>
+      </div>
+      <div class="flex justify-end mt-8">
+        <n-button type="primary" size="medium" class="px-8 py-2 rounded-full animate-bounce-in hover:scale-105 transition-transform duration-300 shadow-lg" @click="handleSubmit">
+          Submit
+        </n-button>
+      </div>
+    </n-card>
+  </div>
 </template>
 
-<style scoped lang="scss">
-
+<style scoped>
+.glass-card {
+  background: rgba(255,255,255,0.18);
+  box-shadow: 0 6px 24px 0 rgba(31, 38, 135, 0.25);
+  backdrop-filter: blur(10px);
+  border-radius: 24px;
+  border: 1px solid rgba(255,255,255,0.18);
+}
 </style>
 

src/views/calculator/size768/index.vue

@@ -1,22 +1,63 @@
 <script setup>
-import { NCarousel, NDivider, NMarquee, NPopselect } from "naive-ui";
-import { onUnmounted, ref, watch, onMounted, computed } from "vue";
+import { ref } from 'vue'
+import { NCard, NRadioGroup, NRadio, NInput, NDatePicker, NButton } from 'naive-ui'
 
+const investmentType = ref('amount')
+const amount = ref(10000)
+const dividendType = ref('notReinvested')
+const investmentDate = ref(null)
+
+const handleSubmit = () => {
+}
 </script>
 
 <template>
-  <header className="header">
-  768
-  </header>
-  <main ref="main">
-
-  </main>
-  <footer>
-
-  </footer>
+  <div class="flex-center h-70vh px-4 py-8 animate-bg-move">
+    <n-card
+      class="w-full max-w-[900px] glass-card animate-bounce-in shadow-xl border-none"
+      :content-style="{padding: '32px 24px'}"
+      :header-style="{background: 'transparent'}"
+    >
+      <div class="flex flex-col gap-8">
+        <!-- 投资类型 -->
+        <div>
+          <div class="text-lg font-bold mb-3">Investment Type</div>
+          <n-radio-group v-model:value="investmentType" name="investmentType">
+            <n-radio value="amount">Amount invested (in dollars)</n-radio>
+            <n-radio value="shares">Number of shares purchased</n-radio>
+          </n-radio-group>
+        </div>
+        <!-- 金额与分红 -->
+        <div>
+          <div class="text-lg font-bold mb-3">Amount to Calculate</div>
+          <n-input v-model:value="amount" type="number" class="mb-3" size="large" placeholder="Enter amount" />
+          <n-radio-group v-model:value="dividendType" name="dividendType">
+            <n-radio value="reinvested">Dividends reinvested</n-radio>
+            <n-radio value="notReinvested">Dividends not reinvested</n-radio>
+          </n-radio-group>
+        </div>
+        <!-- 投资日期 -->
+        <div>
+          <div class="text-lg font-bold mb-3">Investment Date</div>
+          <n-date-picker v-model:value="investmentDate" type="date" class="w-full" size="large" placeholder="Select date" />
+        </div>
+      </div>
+      <div class="flex justify-end mt-8">
+        <n-button type="primary" size="large" class="px-8 py-2 rounded-full animate-bounce-in hover:scale-105 transition-transform duration-300 shadow" @click="handleSubmit">
+          Submit
+        </n-button>
+      </div>
+    </n-card>
+  </div>
 </template>
 
-<style scoped lang="scss">
-
+<style scoped>
+.glass-card {
+  background: rgba(255,255,255,0.18);
+  box-shadow: 0 6px 24px 0 rgba(31, 38, 135, 0.25);
+  backdrop-filter: blur(10px);
+  border-radius: 24px;
+  border: 1px solid rgba(255,255,255,0.18);
+}
 </style>
 

src/views/companyoverview/index.vue

@@ -1,14 +1,26 @@
 <script setup>
-import size1920 from "@/views/companyoverview/size1920/index.vue";
-import size375 from "@/views/companyoverview/size375/index.vue";
 import { computed } from "vue";
 import { useWindowSize } from "@vueuse/core";
 
+import size375 from "./size375/index.vue";
+import size768 from "./size768/index.vue";
+import size1440 from "./size1440/index.vue";
+import size1920 from "./size1920/index.vue";
+import { useRouter } from "vue-router";
+import { useI18n } from "vue-i18n";
+
+const router = useRouter();
 const { width } = useWindowSize();
+const { t } = useI18n();
+
 const viewComponent = computed(() => {
   const viewWidth = width.value;
   if (viewWidth <= 450) {
     return size375;
+  } else if (viewWidth <= 1100) {
+    return size768;
+  } else if (viewWidth <= 1500) {
+    return size1440;
   } else if (viewWidth <= 1920 || viewWidth > 1920) {
     return size1920;
   }

src/views/companyoverview/size1440/index.vue

@@ -0,0 +1,434 @@
+<template>
+  <div class="home-page">
+    <div class="company-overview">
+      <!-- 顶部大图区域 -->
+      <div class="hero-section">
+        <transition name="fade-up" appear>
+          <n-h1 class="hero-title">{{
+            $t("COMPANYOVERVIEW.TITLETWO.TITLE")
+          }}</n-h1>
+        </transition>
+      </div>
+
+      <!-- 公司简介部分 -->
+      <!-- 公司概况 -->
+      <section
+        class="company-overview"
+        style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
+      >
+        <h2 class="section-title">
+          {{ $t("COMPANYOVERVIEW.TITLETWO.TITLE") }}
+        </h2>
+        <div class="content-block">
+          <p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENT") }}</p>
+          <!-- <p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTWO") }}</p>
+          <p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTHREE") }}</p> -->
+        </div>
+      </section>
+
+      <!-- 使命愿景卡片 -->
+      <section class="mission-section">
+        <div class="mission-cards">
+          <n-card hoverable class="mission-card" v-motion-pop>
+            <n-h3 class="card-title">{{
+              $t("COMPANYOVERVIEW.TITLETHREE.TITLE")
+            }}</n-h3>
+            <n-p class="card-content">{{
+              $t("COMPANYOVERVIEW.TITLETHREE.CONTENT")
+            }}</n-p>
+          </n-card>
+
+          <n-card hoverable class="mission-card" v-motion-pop>
+            <n-h3 class="card-title">{{
+              $t("COMPANYOVERVIEW.TITLETHREE.TITLE")
+            }}</n-h3>
+            <n-p class="card-content">{{
+              $t("COMPANYOVERVIEW.TITLETHREE.CONTENTTWO")
+            }}</n-p>
+          </n-card>
+        </div>
+      </section>
+
+      <!-- 里程碑时间轴 -->
+      <!-- 里程碑时间轴 -->
+      <section class="section timeline-section">
+        <n-h2 class="section-title">{{
+          $t("COMPANYOVERVIEW.TITLEFOUR.TITLE")
+        }}</n-h2>
+        <div class="timeline">
+          <!-- 1977-2015 -->
+          <div class="timeline-item" v-motion-slide-visible-once-bottom>
+            <div class="timeline-dot"></div>
+            <div class="timeline-content">
+              <n-h3 class="timeline-year">{{
+                $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADING")
+              }}</n-h3>
+              <br />
+              <n-p class="timeline-desc">{{
+                $t("COMPANYOVERVIEW.TITLEFOUR.paragraph.ONE")
+              }}</n-p>
+              <br />
+
+              <n-p class="timeline-desc">{{
+                $t("COMPANYOVERVIEW.TITLEFOUR.paragraph.TWO")
+              }}</n-p>
+            </div>
+          </div>
+
+          <!-- 2020 -->
+          <div class="timeline-item" v-motion-slide-visible-once-bottom>
+            <div class="timeline-dot"></div>
+            <div class="timeline-content">
+              <n-h3 class="timeline-year">{{
+                $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGTWO")
+              }}</n-h3>
+              <br />
+
+              <n-p class="timeline-desc">{{
+                $t("COMPANYOVERVIEW.TITLEFOUR.paragraphTwo.ONE")
+              }}</n-p>
+              <br />
+
+              <n-p class="timeline-desc">{{
+                $t("COMPANYOVERVIEW.TITLEFOUR.paragraphTwo.TWO")
+              }}</n-p>
+            </div>
+          </div>
+
+          <!-- 2021 -->
+          <div class="timeline-item" v-motion-slide-visible-once-bottom>
+            <div class="timeline-dot"></div>
+            <div class="timeline-content">
+              <n-h3 class="timeline-year">{{
+                $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGTHREE")
+              }}</n-h3>
+              <br />
+
+              <n-p class="timeline-desc">{{
+                $t("COMPANYOVERVIEW.TITLEFOUR.paragraphTHREE.ONE")
+              }}</n-p>
+              <br />
+
+              <n-p class="timeline-desc">{{
+                $t("COMPANYOVERVIEW.TITLEFOUR.paragraphTHREE.TWO")
+              }}</n-p>
+            </div>
+          </div>
+
+          <!-- 2023-2024 -->
+          <div class="timeline-item" v-motion-slide-visible-once-bottom>
+            <div class="timeline-dot"></div>
+            <div class="timeline-content">
+              <n-h3 class="timeline-year">{{
+                $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGFOREFF")
+              }}</n-h3>
+              <br />
+
+              <n-p class="timeline-desc">{{
+                $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFOUR.ONE")
+              }}</n-p>
+              <br />
+
+              <n-p class="timeline-desc">{{
+                $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFOUR.TWO")
+              }}</n-p>
+            </div>
+          </div>
+
+          <!-- 2025 -->
+          <div class="timeline-item" v-motion-slide-visible-once-bottom>
+            <div class="timeline-dot"></div>
+            <div class="timeline-content">
+              <n-h3 class="timeline-year">{{
+                $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGFIVE")
+              }}</n-h3>
+              <br />
+
+              <n-p class="timeline-desc">{{
+                $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.ONE")
+              }}</n-p>
+              <br />
+
+              <n-p class="timeline-desc">{{
+                $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.TWO")
+              }}</n-p>
+              <br />
+
+              <n-p class="timeline-desc">{{
+                $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.THREE")
+              }}</n-p>
+              <br />
+
+              <n-p class="timeline-desc">{{
+                $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.FOUR")
+              }}</n-p>
+              <br />
+
+              <n-p class="timeline-desc">{{
+                $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.FIVE")
+              }}</n-p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- 成就部分 -->
+      <section class="achievement-section" v-motion-fade>
+        <n-h2 class="section-title">{{
+          $t("COMPANYOVERVIEW.TITLEFIVE.TITLE")
+        }}</n-h2>
+        <br />
+
+        <n-p class="section-content">{{
+          $t("COMPANYOVERVIEW.TITLEFIVE.CONTENT")
+        }}</n-p>
+      </section>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { useI18n } from "vue-i18n";
+const { t: $t } = useI18n();
+
+const stats = ref([
+  { number: "48+", labelKey: "COMPANYOVERVIEW.STATS.YEARS_IN_BUSINESS" },
+  { number: "100+", labelKey: "COMPANYOVERVIEW.STATS.PATENTS" },
+  { number: "Global", labelKey: "COMPANYOVERVIEW.STATS.FOOTPRINT" },
+  { number: "NASDAQ", labelKey: "COMPANYOVERVIEW.STATS.LISTED_SINCE" },
+]);
+</script>
+
+<style scoped>
+.home-page {
+  background-image: url("@/assets/image/bg.png");
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+.company-overview {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 20px;
+}
+
+/* 顶部大图区域 */
+.hero-section {
+  background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
+  background-size: 400% 400%;
+  animation: gradientBG 15s ease infinite;
+  color: white;
+  padding: 120px 0;
+  text-align: center;
+  margin-bottom: 60px;
+  border-radius: 8px;
+}
+
+.hero-title {
+  font-size: 40px;
+  margin-bottom: 20px;
+  font-weight: 700;
+}
+
+.hero-subtitle {
+  font-size: 1.5rem;
+  opacity: 0.9;
+}
+
+/* 通用部分样式 */
+.section {
+  margin-bottom: 80px;
+}
+
+.section-title {
+  font-size: 2.2rem;
+  margin-bottom: 30px;
+  position: relative;
+  display: inline-block;
+}
+
+.section-title:after {
+  content: "";
+  position: absolute;
+  bottom: -10px;
+  left: 0;
+  width: 60px;
+  height: 4px;
+  background: linear-gradient(to right, #1a2a6c, #fdbb2d);
+  border-radius: 2px;
+}
+
+.section-content {
+  font-size: 1.1rem;
+  line-height: 1.8;
+  margin-bottom: 20px;
+  color: var(--text-color-secondary);
+}
+
+/* 使命愿景卡片 */
+.mission-section {
+  margin: 80px 0;
+}
+
+.mission-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 30px;
+}
+
+.mission-card {
+  background: white;
+  padding: 40px 30px;
+  border-radius: 12px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.mission-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
+}
+
+.card-title {
+  font-size: 1.5rem;
+  margin-bottom: 20px;
+  color: #895bff;
+}
+
+.card-content {
+  font-size: 1.05rem;
+  line-height: 1.7;
+}
+
+/* 时间轴样式 */
+.timeline {
+  position: relative;
+  padding-left: 50px;
+  margin-top: 50px;
+}
+
+.timeline:before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 20px;
+  height: 100%;
+  width: 4px;
+  background: linear-gradient(to bottom, #895bff, #fdbb2d);
+}
+
+.timeline-item {
+  position: relative;
+  margin-bottom: 50px;
+}
+
+.timeline-dot {
+  position: absolute;
+  left: -50px;
+  top: 5px;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: #895bff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-weight: bold;
+  box-shadow: 0 0 0 6px rgba(26, 42, 108, 0.2);
+}
+
+.timeline-year {
+  font-size: 1.4rem;
+  margin-bottom: 15px;
+  color: #1a2a6c;
+}
+
+.timeline-desc {
+  font-size: 1.05rem;
+  line-height: 1.7;
+  margin-bottom: 10px;
+}
+
+/* 成就部分 */
+.achievement-section {
+  background: #f9fafc;
+  padding: 60px;
+  border-radius: 12px;
+  margin: 80px 0;
+}
+
+.achievement-stats {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 30px;
+  margin-top: 50px;
+}
+
+.stat-item {
+  text-align: center;
+  padding: 30px 20px;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
+  transition: transform 0.3s ease;
+}
+
+.stat-item:hover {
+  transform: translateY(-5px);
+}
+
+.stat-number {
+  font-size: 2.5rem;
+  color: #1a2a6c;
+  margin-bottom: 10px;
+}
+
+.stat-label {
+  font-size: 1.1rem;
+  color: var(--text-color-secondary);
+}
+
+/* 动画 */
+@keyframes gradientBG {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .hero-title {
+    font-size: 2.5rem;
+  }
+
+  .hero-subtitle {
+    font-size: 1.2rem;
+  }
+
+  .section-title {
+    font-size: 1.8rem;
+  }
+
+  .timeline {
+    padding-left: 30px;
+  }
+
+  .timeline-dot {
+    left: -30px;
+    width: 30px;
+    height: 30px;
+  }
+
+  .achievement-section {
+    padding: 40px 20px;
+  }
+}
+</style>

src/views/companyoverview/size1920/index.vue

@@ -8,11 +8,6 @@
             $t("COMPANYOVERVIEW.TITLETWO.TITLE")
           }}</n-h1>
         </transition>
-        <!-- <transition name="fade-up" appear>
-          <n-p class="hero-subtitle">
-            {{ $t("COMPANYOVERVIEW.HERO_SUBTITLE") }}
-          </n-p>
-        </transition> -->
       </div>
 
       <!-- 公司简介部分 -->
@@ -216,7 +211,6 @@ const stats = ref([
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 20px;
-  color: var(--text-color);
 }
 
 /* 顶部大图区域 */
@@ -232,7 +226,7 @@ const stats = ref([
 }
 
 .hero-title {
-  font-size: 3.5rem;
+  font-size: 40px;
   margin-bottom: 20px;
   font-weight: 700;
 }

src/views/companyoverview/size375/index.vue

@@ -11,7 +11,11 @@
       </div>
 
       <!-- 公司简介部分 -->
-      <section class="company-overview content-section">
+      <!-- 公司概况 -->
+      <section
+        class="company-overview"
+        style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
+      >
         <h2 class="section-title">
           {{ $t("COMPANYOVERVIEW.TITLETWO.TITLE") }}
         </h2>
@@ -23,7 +27,7 @@
       </section>
 
       <!-- 使命愿景卡片 -->
-      <section class="mission-section content-section">
+      <section class="mission-section">
         <div class="mission-cards">
           <n-card hoverable class="mission-card" v-motion-pop>
             <n-h3 class="card-title">{{
@@ -46,7 +50,8 @@
       </section>
 
       <!-- 里程碑时间轴 -->
-      <section class="section timeline-section content-section">
+      <!-- 里程碑时间轴 -->
+      <section class="section timeline-section">
         <n-h2 class="section-title">{{
           $t("COMPANYOVERVIEW.TITLEFOUR.TITLE")
         }}</n-h2>
@@ -142,6 +147,8 @@
               <n-p class="timeline-desc">{{
                 $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.ONE")
               }}</n-p>
+              <br />
+
               <n-p class="timeline-desc">{{
                 $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.TWO")
               }}</n-p>
@@ -166,10 +173,12 @@
       </section>
 
       <!-- 成就部分 -->
-      <section class="achievement-section content-section" v-motion-fade>
+      <section class="achievement-section" v-motion-fade>
         <n-h2 class="section-title">{{
           $t("COMPANYOVERVIEW.TITLEFIVE.TITLE")
         }}</n-h2>
+        <br />
+
         <n-p class="section-content">{{
           $t("COMPANYOVERVIEW.TITLEFIVE.CONTENT")
         }}</n-p>
@@ -192,50 +201,15 @@ const stats = ref([
 </script>
 
 <style scoped>
-/* 基础变量定义 */
-:root {
-  --primary-color: #895bff;
-  --secondary-color: #fdbb2d;
-  --text-color: #333;
-  --text-color-secondary: #666;
-  --bg-color: #f9fafc;
-  --mobile-breakpoint: 768px;
-}
-
 .home-page {
-  background-image: url("@/assets/image/bg.png");
-  background-size: cover;
+  background-image: url("@/assets/image/bg-mobile.png");
+  background-size: 100% 100%;
   background-position: center;
   background-repeat: no-repeat;
-  background-attachment: fixed;
 }
-
-/* 内容区块通用样式 */
-.content-section {
-  padding: 0 16px;
-  margin-bottom: 48px;
-}
-
-.section-title {
-  font-size: clamp(1.5rem, 5vw, 2.2rem);
-  margin-bottom: 24px;
-  position: relative;
-  display: inline-block;
-}
-
-.section-title:after {
-  content: "";
-  position: absolute;
-  bottom: -8px;
-  left: 0;
-  width: 40px;
-  height: 3px;
-  background: linear-gradient(
-    to right,
-    var(--primary-color),
-    var(--secondary-color)
-  );
-  border-radius: 2px;
+.company-overview {
+  margin: 0 auto;
+  padding: 20px;
 }
 
 /* 顶部大图区域 */
@@ -244,168 +218,175 @@ const stats = ref([
   background-size: 400% 400%;
   animation: gradientBG 15s ease infinite;
   color: white;
-  padding: 80px 16px;
+  padding: 120px 0;
   text-align: center;
-  margin-bottom: 48px;
-  border-radius: 0 0 16px 16px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+  margin-bottom: 60px;
+  border-radius: 8px;
 }
 
 .hero-title {
-  font-size: clamp(2rem, 6vw, 3.5rem);
-  margin-bottom: 16px;
+  font-size: 40px;
+  margin-bottom: 20px;
   font-weight: 700;
-  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
 }
 
-/* 公司简介部分 */
-.company-overview.content-section {
-  margin-top: -24px;
-  background-color: white;
-  border-radius: 16px;
-  padding: 32px 24px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+.hero-subtitle {
+  font-size: 1.5rem;
+  opacity: 0.9;
+}
+
+/* 通用部分样式 */
+.section {
+  margin-bottom: 80px;
+}
+
+.section-title {
+  font-size: 2.2rem;
+  margin-bottom: 30px;
   position: relative;
-  z-index: 10;
+  display: inline-block;
 }
 
-.content-block p {
-  margin-bottom: 16px;
+.section-title:after {
+  content: "";
+  position: absolute;
+  bottom: -10px;
+  left: 0;
+  width: 60px;
+  height: 4px;
+  background: linear-gradient(to right, #1a2a6c, #fdbb2d);
+  border-radius: 2px;
+}
+
+.section-content {
+  font-size: 1.1rem;
   line-height: 1.8;
-  text-align: justify;
+  margin-bottom: 20px;
+  color: var(--text-color-secondary);
 }
 
 /* 使命愿景卡片 */
+.mission-section {
+  margin: 80px 0;
+}
+
 .mission-cards {
   display: grid;
-  grid-template-columns: 1fr;
-  gap: 24px;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 30px;
 }
 
 .mission-card {
   background: white;
-  padding: 28px 24px;
+  padding: 40px 30px;
   border-radius: 12px;
-  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07);
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
   transition: transform 0.3s ease, box-shadow 0.3s ease;
-  border: 1px solid #eee;
 }
 
 .mission-card:hover {
-  transform: translateY(-3px);
-  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+  transform: translateY(-5px);
+  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
 }
 
 .card-title {
-  font-size: 1.3rem;
-  margin-bottom: 16px;
-  color: var(--primary-color);
-  font-weight: 600;
+  font-size: 1.5rem;
+  margin-bottom: 20px;
+  color: #895bff;
 }
 
 .card-content {
-  font-size: 1rem;
+  font-size: 1.05rem;
   line-height: 1.7;
-  color: var(--text-color-secondary);
 }
 
 /* 时间轴样式 */
 .timeline {
   position: relative;
-  padding-left: 36px;
-  margin-top: 32px;
+  padding-left: 50px;
+  margin-top: 50px;
 }
 
 .timeline:before {
   content: "";
   position: absolute;
   top: 0;
-  left: 16px;
+  left: 20px;
   height: 100%;
-  width: 2px;
-  background: linear-gradient(
-    to bottom,
-    var(--primary-color),
-    var(--secondary-color)
-  );
+  width: 4px;
+  background: linear-gradient(to bottom, #895bff, #fdbb2d);
 }
 
 .timeline-item {
   position: relative;
-  margin-bottom: 36px;
+  margin-bottom: 50px;
 }
 
 .timeline-dot {
   position: absolute;
-  left: -36px;
+  left: -50px;
   top: 5px;
-  width: 32px;
-  height: 32px;
+  width: 40px;
+  height: 40px;
   border-radius: 50%;
-  background: var(--primary-color);
+  background: #895bff;
   display: flex;
   align-items: center;
   justify-content: center;
   color: white;
   font-weight: bold;
-  box-shadow: 0 0 0 4px rgba(137, 91, 255, 0.15);
-  font-size: 0.9rem;
+  box-shadow: 0 0 0 6px rgba(26, 42, 108, 0.2);
 }
 
 .timeline-year {
-  font-size: 1.2rem;
-  margin-bottom: 12px;
-  color: var(--primary-color);
-  font-weight: 600;
+  font-size: 1.4rem;
+  margin-bottom: 15px;
+  color: #1a2a6c;
 }
 
 .timeline-desc {
-  font-size: 1rem;
+  font-size: 1.05rem;
   line-height: 1.7;
-  margin-bottom: 8px;
-  color: var(--text-color-secondary);
+  margin-bottom: 10px;
 }
 
 /* 成就部分 */
 .achievement-section {
-  background: var(--bg-color);
-  padding: 32px 24px;
-  border-radius: 16px;
-  margin-top: 48px;
+  background: #f9fafc;
+  padding: 60px;
+  border-radius: 12px;
+  margin: 80px 0;
 }
 
 .achievement-stats {
   display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 16px;
-  margin-top: 32px;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 30px;
+  margin-top: 50px;
 }
 
 .stat-item {
   text-align: center;
-  padding: 24px 16px;
+  padding: 30px 20px;
   background: white;
-  border-radius: 12px;
-  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
+  border-radius: 8px;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
   transition: transform 0.3s ease;
-  border: 1px solid #f0f0f0;
 }
 
 .stat-item:hover {
-  transform: translateY(-3px);
+  transform: translateY(-5px);
 }
 
 .stat-number {
-  font-size: 1.8rem;
-  color: var(--primary-color);
-  margin-bottom: 8px;
-  font-weight: 600;
+  font-size: 2.5rem;
+  color: #1a2a6c;
+  margin-bottom: 10px;
 }
 
 .stat-label {
-  font-size: 0.95rem;
+  font-size: 1.1rem;
   color: var(--text-color-secondary);
-  line-height: 1.4;
 }
 
 /* 动画 */
@@ -421,54 +402,32 @@ const stats = ref([
   }
 }
 
-/* 响应式设计 - 针对平板和桌面端的优化 */
-@media (min-width: 768px) {
-  .content-section {
-    padding: 0 32px;
-    margin-bottom: 64px;
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .hero-title {
+    font-size: 2.5rem;
   }
 
-  .hero-section {
-    padding: 120px 32px;
-    margin-bottom: 64px;
+  .hero-subtitle {
+    font-size: 1.2rem;
   }
 
-  .company-overview.content-section {
-    margin-top: -32px;
-    padding: 40px 32px;
-  }
-
-  .mission-cards {
-    grid-template-columns: repeat(2, 1fr);
-  }
-
-  .achievement-stats {
-    grid-template-columns: repeat(4, 1fr);
+  .section-title {
+    font-size: 1.8rem;
   }
 
   .timeline {
-    padding-left: 50px;
-  }
-
-  .timeline:before {
-    left: 20px;
-    width: 4px;
+    padding-left: 30px;
   }
 
   .timeline-dot {
-    left: -50px;
-    width: 40px;
-    height: 40px;
-    font-size: 1rem;
+    left: -30px;
+    width: 30px;
+    height: 30px;
   }
-}
 
-/* 针对更大屏幕的优化 */
-@media (min-width: 1024px) {
-  .content-section {
-    max-width: 1200px;
-    margin-left: auto;
-    margin-right: auto;
+  .achievement-section {
+    padding: 40px 20px;
   }
 }
 </style>

src/views/companyoverview/size768/index.vue

@@ -0,0 +1,433 @@
+<template>
+  <div class="home-page">
+    <div class="company-overview">
+      <!-- 顶部大图区域 -->
+      <div class="hero-section">
+        <transition name="fade-up" appear>
+          <n-h1 class="hero-title">{{
+            $t("COMPANYOVERVIEW.TITLETWO.TITLE")
+          }}</n-h1>
+        </transition>
+      </div>
+
+      <!-- 公司简介部分 -->
+      <!-- 公司概况 -->
+      <section
+        class="company-overview"
+        style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
+      >
+        <h2 class="section-title">
+          {{ $t("COMPANYOVERVIEW.TITLETWO.TITLE") }}
+        </h2>
+        <div class="content-block">
+          <p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENT") }}</p>
+          <!-- <p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTWO") }}</p>
+          <p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTHREE") }}</p> -->
+        </div>
+      </section>
+
+      <!-- 使命愿景卡片 -->
+      <section class="mission-section">
+        <div class="mission-cards">
+          <n-card hoverable class="mission-card" v-motion-pop>
+            <n-h3 class="card-title">{{
+              $t("COMPANYOVERVIEW.TITLETHREE.TITLE")
+            }}</n-h3>
+            <n-p class="card-content">{{
+              $t("COMPANYOVERVIEW.TITLETHREE.CONTENT")
+            }}</n-p>
+          </n-card>
+
+          <n-card hoverable class="mission-card" v-motion-pop>
+            <n-h3 class="card-title">{{
+              $t("COMPANYOVERVIEW.TITLETHREE.TITLE")
+            }}</n-h3>
+            <n-p class="card-content">{{
+              $t("COMPANYOVERVIEW.TITLETHREE.CONTENTTWO")
+            }}</n-p>
+          </n-card>
+        </div>
+      </section>
+
+      <!-- 里程碑时间轴 -->
+      <!-- 里程碑时间轴 -->
+      <section class="section timeline-section">
+        <n-h2 class="section-title">{{
+          $t("COMPANYOVERVIEW.TITLEFOUR.TITLE")
+        }}</n-h2>
+        <div class="timeline">
+          <!-- 1977-2015 -->
+          <div class="timeline-item" v-motion-slide-visible-once-bottom>
+            <div class="timeline-dot"></div>
+            <div class="timeline-content">
+              <n-h3 class="timeline-year">{{
+                $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADING")
+              }}</n-h3>
+              <br />
+              <n-p class="timeline-desc">{{
+                $t("COMPANYOVERVIEW.TITLEFOUR.paragraph.ONE")
+              }}</n-p>
+              <br />
+
+              <n-p class="timeline-desc">{{
+                $t("COMPANYOVERVIEW.TITLEFOUR.paragraph.TWO")
+              }}</n-p>
+            </div>
+          </div>
+
+          <!-- 2020 -->
+          <div class="timeline-item" v-motion-slide-visible-once-bottom>
+            <div class="timeline-dot"></div>
+            <div class="timeline-content">
+              <n-h3 class="timeline-year">{{
+                $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGTWO")
+              }}</n-h3>
+              <br />
+
+              <n-p class="timeline-desc">{{
+                $t("COMPANYOVERVIEW.TITLEFOUR.paragraphTwo.ONE")
+              }}</n-p>
+              <br />
+
+              <n-p class="timeline-desc">{{
+                $t("COMPANYOVERVIEW.TITLEFOUR.paragraphTwo.TWO")
+              }}</n-p>
+            </div>
+          </div>
+
+          <!-- 2021 -->
+          <div class="timeline-item" v-motion-slide-visible-once-bottom>
+            <div class="timeline-dot"></div>
+            <div class="timeline-content">
+              <n-h3 class="timeline-year">{{
+                $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGTHREE")
+              }}</n-h3>
+              <br />
+
+              <n-p class="timeline-desc">{{
+                $t("COMPANYOVERVIEW.TITLEFOUR.paragraphTHREE.ONE")
+              }}</n-p>
+              <br />
+
+              <n-p class="timeline-desc">{{
+                $t("COMPANYOVERVIEW.TITLEFOUR.paragraphTHREE.TWO")
+              }}</n-p>
+            </div>
+          </div>
+
+          <!-- 2023-2024 -->
+          <div class="timeline-item" v-motion-slide-visible-once-bottom>
+            <div class="timeline-dot"></div>
+            <div class="timeline-content">
+              <n-h3 class="timeline-year">{{
+                $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGFOREFF")
+              }}</n-h3>
+              <br />
+
+              <n-p class="timeline-desc">{{
+                $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFOUR.ONE")
+              }}</n-p>
+              <br />
+
+              <n-p class="timeline-desc">{{
+                $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFOUR.TWO")
+              }}</n-p>
+            </div>
+          </div>
+
+          <!-- 2025 -->
+          <div class="timeline-item" v-motion-slide-visible-once-bottom>
+            <div class="timeline-dot"></div>
+            <div class="timeline-content">
+              <n-h3 class="timeline-year">{{
+                $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGFIVE")
+              }}</n-h3>
+              <br />
+
+              <n-p class="timeline-desc">{{
+                $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.ONE")
+              }}</n-p>
+              <br />
+
+              <n-p class="timeline-desc">{{
+                $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.TWO")
+              }}</n-p>
+              <br />
+
+              <n-p class="timeline-desc">{{
+                $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.THREE")
+              }}</n-p>
+              <br />
+
+              <n-p class="timeline-desc">{{
+                $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.FOUR")
+              }}</n-p>
+              <br />
+
+              <n-p class="timeline-desc">{{
+                $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.FIVE")
+              }}</n-p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- 成就部分 -->
+      <section class="achievement-section" v-motion-fade>
+        <n-h2 class="section-title">{{
+          $t("COMPANYOVERVIEW.TITLEFIVE.TITLE")
+        }}</n-h2>
+        <br />
+
+        <n-p class="section-content">{{
+          $t("COMPANYOVERVIEW.TITLEFIVE.CONTENT")
+        }}</n-p>
+      </section>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { useI18n } from "vue-i18n";
+const { t: $t } = useI18n();
+
+const stats = ref([
+  { number: "48+", labelKey: "COMPANYOVERVIEW.STATS.YEARS_IN_BUSINESS" },
+  { number: "100+", labelKey: "COMPANYOVERVIEW.STATS.PATENTS" },
+  { number: "Global", labelKey: "COMPANYOVERVIEW.STATS.FOOTPRINT" },
+  { number: "NASDAQ", labelKey: "COMPANYOVERVIEW.STATS.LISTED_SINCE" },
+]);
+</script>
+
+<style scoped>
+.home-page {
+  background-image: url("@/assets/image/bg-mobile.png");
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+.company-overview {
+  margin: 0 auto;
+  padding: 20px;
+}
+
+/* 顶部大图区域 */
+.hero-section {
+  background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
+  background-size: 400% 400%;
+  animation: gradientBG 15s ease infinite;
+  color: white;
+  padding: 120px 0;
+  text-align: center;
+  margin-bottom: 60px;
+  border-radius: 8px;
+}
+
+.hero-title {
+  font-size: 40px;
+  margin-bottom: 20px;
+  font-weight: 700;
+}
+
+.hero-subtitle {
+  font-size: 1.5rem;
+  opacity: 0.9;
+}
+
+/* 通用部分样式 */
+.section {
+  margin-bottom: 80px;
+}
+
+.section-title {
+  font-size: 2.2rem;
+  margin-bottom: 30px;
+  position: relative;
+  display: inline-block;
+}
+
+.section-title:after {
+  content: "";
+  position: absolute;
+  bottom: -10px;
+  left: 0;
+  width: 60px;
+  height: 4px;
+  background: linear-gradient(to right, #1a2a6c, #fdbb2d);
+  border-radius: 2px;
+}
+
+.section-content {
+  font-size: 1.1rem;
+  line-height: 1.8;
+  margin-bottom: 20px;
+  color: var(--text-color-secondary);
+}
+
+/* 使命愿景卡片 */
+.mission-section {
+  margin: 80px 0;
+}
+
+.mission-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 30px;
+}
+
+.mission-card {
+  background: white;
+  padding: 40px 30px;
+  border-radius: 12px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.mission-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
+}
+
+.card-title {
+  font-size: 1.5rem;
+  margin-bottom: 20px;
+  color: #895bff;
+}
+
+.card-content {
+  font-size: 1.05rem;
+  line-height: 1.7;
+}
+
+/* 时间轴样式 */
+.timeline {
+  position: relative;
+  padding-left: 50px;
+  margin-top: 50px;
+}
+
+.timeline:before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 20px;
+  height: 100%;
+  width: 4px;
+  background: linear-gradient(to bottom, #895bff, #fdbb2d);
+}
+
+.timeline-item {
+  position: relative;
+  margin-bottom: 50px;
+}
+
+.timeline-dot {
+  position: absolute;
+  left: -50px;
+  top: 5px;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: #895bff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-weight: bold;
+  box-shadow: 0 0 0 6px rgba(26, 42, 108, 0.2);
+}
+
+.timeline-year {
+  font-size: 1.4rem;
+  margin-bottom: 15px;
+  color: #1a2a6c;
+}
+
+.timeline-desc {
+  font-size: 1.05rem;
+  line-height: 1.7;
+  margin-bottom: 10px;
+}
+
+/* 成就部分 */
+.achievement-section {
+  background: #f9fafc;
+  padding: 60px;
+  border-radius: 12px;
+  margin: 80px 0;
+}
+
+.achievement-stats {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 30px;
+  margin-top: 50px;
+}
+
+.stat-item {
+  text-align: center;
+  padding: 30px 20px;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
+  transition: transform 0.3s ease;
+}
+
+.stat-item:hover {
+  transform: translateY(-5px);
+}
+
+.stat-number {
+  font-size: 2.5rem;
+  color: #1a2a6c;
+  margin-bottom: 10px;
+}
+
+.stat-label {
+  font-size: 1.1rem;
+  color: var(--text-color-secondary);
+}
+
+/* 动画 */
+@keyframes gradientBG {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .hero-title {
+    font-size: 2.5rem;
+  }
+
+  .hero-subtitle {
+    font-size: 1.2rem;
+  }
+
+  .section-title {
+    font-size: 1.8rem;
+  }
+
+  .timeline {
+    padding-left: 30px;
+  }
+
+  .timeline-dot {
+    left: -30px;
+    width: 30px;
+    height: 30px;
+  }
+
+  .achievement-section {
+    padding: 40px 20px;
+  }
+}
+</style>

src/views/contacts/size1440/index.vue

@@ -2,21 +2,44 @@
 import { NCarousel, NDivider, NMarquee, NPopselect } from "naive-ui";
 import { onUnmounted, ref, watch, onMounted, computed } from "vue";
 
+function copyEmail() {
+  navigator.clipboard.writeText('fiee@dlkadvisory.com');
+}
 </script>
 
 <template>
-  <header className="header">
-  1440
-  </header>
-  <main ref="main">
 
+  <main ref="main" class="flex-center min-h-80vh bg-[url('@/assets/image/bg-pc.png')] rounded-3xl to-accent w-100vw animate-fade-in bg-[url('@/assets/image/bg-pc.png')]" >
+    <div class="w-full flex flex-col items-center gap-5 py-12 px-6">
+      <h1 class="text-4xl font-bold text-primary animate-fade-in-down animate-delay-0">Investor Contacts</h1>
+      <div class="text-2xl font-semibold text-gray-800 animate-fade-in-down animate-delay-200">FiEE Inc.</div>
+      <div class="text-xl text-secondary animate-fade-in-down animate-delay-400">Investor Relations</div>
+      <div class="text-lg text-gray-600 flex items-center gap-2 animate-fade-in-down animate-delay-600">
+        <span>Email:</span>
+        <span class="transition-colors duration-300 cursor-pointer text-accent hover:text-primary active:text-secondary select-all" @click="copyEmail">fiee@dlkadvisory.com</span>
+      </div>
+    </div>
   </main>
-  <footer>
-
-  </footer>
 </template>
 
 <style scoped lang="scss">
-
+/**** UnoCSS 动画补充（如未全局引入可在 uno.config.js 添加）****/
+@keyframes fade-in-down {
+  0% {
+    opacity: 0;
+    transform: translateY(-30px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.animate-fade-in-down {
+  animation: fade-in-down 0.8s cubic-bezier(0.23, 1, 0.32, 1) both;
+}
+.animate-delay-0 { animation-delay: 0s; }
+.animate-delay-200 { animation-delay: 0.2s; }
+.animate-delay-400 { animation-delay: 0.4s; }
+.animate-delay-600 { animation-delay: 0.6s; }
 </style>
 

src/views/contacts/size768/index.vue

@@ -1,22 +1,41 @@
 <script setup>
-import { NCarousel, NDivider, NMarquee, NPopselect } from "naive-ui";
 import { onUnmounted, ref, watch, onMounted, computed } from "vue";
-
+function copyEmail() {
+  navigator.clipboard.writeText('fiee@dlkadvisory.com');
+}
 </script>
 
 <template>
-  <header className="header">
-  768
-  </header>
-  <main ref="main">
-
+  <main ref="main" class="flex flex-col items-center from-primary to-accent w-[100vw] mt-12 animate-fade-in px-6 py-10 pt-500px">
+    <div class="w-full flex flex-col items-center gap-5 px-4">
+      <h1 class="text-3xl font-bold text-primary animate-fade-in-down animate-delay-0">Investor Contacts</h1>
+      <div class="text-xl font-semibold text-gray-800 animate-fade-in-down animate-delay-200">FiEE Inc.</div>
+      <div class="text-lg text-secondary animate-fade-in-down animate-delay-400">Investor Relations</div>
+      <div class="text-base text-gray-600 flex items-center gap-2 animate-fade-in-down animate-delay-600">
+        <span>Email:</span>
+        <span class="transition-colors duration-300 cursor-pointer text-accent hover:text-primary active:text-secondary select-all" @click="copyEmail">fiee@dlkadvisory.com</span>
+      </div>
+    </div>
   </main>
-  <footer>
-
-  </footer>
 </template>
 
 <style scoped lang="scss">
-
+@keyframes fade-in-down {
+  0% {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.animate-fade-in-down {
+  animation: fade-in-down 0.8s cubic-bezier(0.23, 1, 0.32, 1) both;
+}
+.animate-delay-0 { animation-delay: 0s; }
+.animate-delay-200 { animation-delay: 0.2s; }
+.animate-delay-400 { animation-delay: 0.4s; }
+.animate-delay-600 { animation-delay: 0.6s; }
 </style>
 

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

@@ -1,22 +1,78 @@
 <script setup>
-import { NCarousel, NDivider, NMarquee, NPopselect } from "naive-ui";
-import { onUnmounted, ref, watch, onMounted, computed } from "vue";
+import { ref } from "vue";
 
+const form = ref({
+  firstName: "",
+  lastName: "",
+  email: "",
+  company: "",
+  phone: "",
+  alertType: "all"
+});
+const submitted = ref(false);
+
+function handleSubmit(e) {
+  e.preventDefault();
+  submitted.value = true;
+}
 </script>
 
 <template>
-  <header className="header">
-  1440
-  </header>
-  <main ref="main">
 
+  <main ref="main" class="relative min-h-[80vh] flex-center bg-[url('@/assets/image/bg-pc.png')] overflow-hidden">
+    <!-- 粒子背景 -->
+    <div class="absolute inset-0 z-0 pointer-events-none animate-bg-move"></div>
+    <!-- 表单卡片/提交成功卡片 -->
+    <div class="relative z-10 w-[600px] max-w-[90vw] p-8 bg-white/80 rounded-2xl shadow-xl backdrop-blur-md animate-bounce-in">
+      <template v-if="!submitted">
+        <h2 class="text-2xl font-bold text-#8A5AFB mb-2 tracking-wide">E-Mail Alerts</h2>
+        <p class="text-sm text-gray-500 mb-5">* Required Fields</p>
+        <form class="space-y-3" @submit="handleSubmit">
+          <div>
+            <label class="block text-gray-700 font-semibold mb-1">* First Name</label>
+            <input v-model="form.firstName" type="text" class="w-full px-3 py-2 rounded-lg border border-gray-300 ring-2 ring-#8A5AFB/20) transition-all duration-300 outline-none bg-white/90" />
+          </div>
+          <div>
+            <label class="block text-gray-700 font-semibold mb-1">* Last Name</label>
+            <input v-model="form.lastName" type="text" class="w-full px-3 py-2 rounded-lg border border-gray-300 ring-2 ring-#8A5AFB/20) transition-all duration-300 outline-none bg-white/90" />
+          </div>
+          <div>
+            <label class="block text-gray-700 font-semibold mb-1">* Email</label>
+            <input v-model="form.email" type="email" class="w-full px-3 py-2 rounded-lg border border-gray-300 ring-2 ring-#8A5AFB/20) transition-all duration-300 outline-none bg-white/90" />
+          </div>
+          <div>
+            <label class="block text-gray-700 font-semibold mb-1">* Company</label>
+            <input v-model="form.company" type="text" class="w-full px-3 py-2 rounded-lg border border-gray-300 ring-2 ring-#8A5AFB/20) transition-all duration-300 outline-none bg-white/90" />
+          </div>
+          <div>
+            <label class="block text-gray-700 font-semibold mb-1">Phone</label>
+            <input v-model="form.phone" type="tel" class="w-full px-3 py-2 rounded-lg border border-gray-300 ring-2 ring-#8A5AFB/20) transition-all duration-300 outline-none bg-white/90" />
+          </div>
+          <button type="submit" class="w-full py-2.5 rounded-xl bg-#8A5AFB text-white font-bold text-base active:scale-95 transition-all duration-200 animate-bounce-in animate-delay-200">
+            Submit
+          </button>
+        </form>
+      </template>
+      <template v-else>
+        <div class="flex flex-col items-center justify-center min-h-[280px] animate-bounce-in">
+          <span class="i-mdi:check-circle-outline text-green-500 text-4xl mb-3"></span>
+          <h2 class="text-xl font-bold text-#8A5AFB mb-2">Submitted successfully!</h2>
+          <div class="text-gray-700 text-sm mb-3">The information you submitted is as follows:</div>
+          <div class="w-full bg-white/80 rounded-xl shadow p-3 space-y-2 text-gray-800 text-sm">
+            <div><span class="font-semibold">First Name：</span>{{ form.firstName }}</div>
+            <div><span class="font-semibold">Last Name：</span>{{ form.lastName }}</div>
+            <div><span class="font-semibold">Email：</span>{{ form.email }}</div>
+            <div><span class="font-semibold">Company：</span>{{ form.company }}</div>
+            <div><span class="font-semibold">Phone：</span>{{ form.phone || 'Not filled in' }}</div>
+            <div><span class="font-semibold">Alert Type：</span>{{ form.alertType === 'all' ? 'All Alerts' : 'Customize Alerts' }}</div>
+          </div>
+        </div>
+      </template>
+    </div>
   </main>
-  <footer>
-
-  </footer>
 </template>
 
 <style scoped lang="scss">
-
+/* 可选：自定义粒子或渐变动画背景 */
 </style>
 

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

@@ -2,21 +2,78 @@
 import { NCarousel, NDivider, NMarquee, NPopselect } from "naive-ui";
 import { onUnmounted, ref, watch, onMounted, computed } from "vue";
 
+const form = ref({
+  firstName: '',
+  lastName: '',
+  email: '',
+  company: '',
+  phone: '',
+  alertType: 'all',
+});
+const submitted = ref(false);
+
+function handleSubmit(e) {
+  e.preventDefault();
+  submitted.value = true;
+}
 </script>
 
 <template>
-  <header className="header">
-  768
-  </header>
+ 
   <main ref="main">
-
+    <main class="min-h-70vh flex flex-col items-center justify-center relative px-6 py-10">
+      <div class="w-[640px] max-w-90vw p-6 bg-white/95 rounded-2xl shadow-lg animate-bounce-in">
+        <template v-if="!submitted">
+          <h2 class="text-2xl font-bold text-#8A5AFB mb-3 text-center tracking-wide">E-Mail Alerts</h2>
+          <p class="text-sm text-gray-500 mb-5 text-center">* Required Fields</p>
+          <form class="flex flex-col gap-4" @submit="handleSubmit">
+            <div>
+              <label class="block text-gray-700 font-semibold mb-1.5 text-base">* First Name</label>
+              <input v-model="form.firstName" type="text" class="w-full px-4 py-2.5 rounded-lg border border-gray-300 outline-none bg-white/90 text-base" />
+            </div>
+            <div>
+              <label class="block text-gray-700 font-semibold mb-1.5 text-base">* Last Name</label>
+              <input v-model="form.lastName" type="text" class="w-full px-4 py-2.5 rounded-lg border border-gray-300 outline-none bg-white/90 text-base" />
+            </div>
+            <div>
+              <label class="block text-gray-700 font-semibold mb-1.5 text-base">* Email</label>
+              <input v-model="form.email" type="email" class="w-full px-4 py-2.5 rounded-lg border border-gray-300 outline-none bg-white/90 text-base" />
+            </div>
+            <div>
+              <label class="block text-gray-700 font-semibold mb-1.5 text-base">* Company</label>
+              <input v-model="form.company" type="text" class="w-full px-4 py-2.5 rounded-lg border border-gray-300 outline-none bg-white/90 text-base" />
+            </div>
+            <div>
+              <label class="block text-gray-700 font-semibold mb-1.5 text-base">Phone</label>
+              <input v-model="form.phone" type="tel" class="w-full px-4 py-2.5 rounded-lg border border-gray-300 outline-none bg-white/90 text-base" />
+            </div>
+            <button type="submit" class="w-full py-3.5 rounded-xl bg-#8A5AFB text-white font-bold text-lg active:scale-95 transition-all duration-200 animate-bounce-in animate-delay-200 mt-3">
+              Submit
+            </button>
+          </form>
+        </template>
+        <template v-else>
+          <div class="flex flex-col items-center justify-center min-h-[240px] animate-bounce-in">
+            <span class="i-mdi:check-circle-outline text-green-500 text-5xl mb-4"></span>
+            <h2 class="text-xl font-bold text-#8A5AFB mb-3">Submitted successfully!</h2>
+            <div class="text-gray-700 text-base mb-4">The information you submitted is as follows:</div>
+            <div class="w-full bg-white/90 rounded-xl shadow p-4 space-y-2 text-gray-800 text-base">
+              <div><span class="font-semibold">First Name：</span>{{ form.firstName }}</div>
+              <div><span class="font-semibold">Last Name：</span>{{ form.lastName }}</div>
+              <div><span class="font-semibold">Email：</span>{{ form.email }}</div>
+              <div><span class="font-semibold">Company：</span>{{ form.company }}</div>
+              <div><span class="font-semibold">Phone：</span>{{ form.phone || '(Not filled)' }}</div>
+              <div><span class="font-semibold">Alert Type：</span>{{ form.alertType === 'all' ? 'All Alerts' : 'Customize Alerts' }}</div>
+            </div>
+          </div>
+        </template>
+      </div>
+    </main>
   </main>
-  <footer>
 
-  </footer>
 </template>
 
 <style scoped lang="scss">
-
+/* Keep tablet background simple */
 </style>
 

src/views/financialinformation/quarterlyresults/index.vue

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

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

@@ -0,0 +1,423 @@
+<template>
+  <header></header>
+  <main class="p-[35px] max-w-[1200px] mx-auto">
+    <div class="title mb-[20px]">
+      {{ t("financialinformation.quarterlyresults.title") }}
+    </div>
+    <div class="search-container">
+      <input
+        type="text"
+        :placeholder="
+          t('financialinformation.quarterlyresults.search.placeholder')
+        "
+        v-model="searchQuery"
+        class="search-input"
+      />
+      <button class="search-button" @click="handleSearch">
+        {{ t("financialinformation.quarterlyresults.search.button") }}
+      </button>
+    </div>
+
+    <div class="results-list">
+      <div
+        v-for="(item, index) in filteredList"
+        :key="index"
+        class="result-item"
+      >
+        <div class="content">
+          <a :href="item.url" class="result-title subtitle">{{ item.title }}</a>
+          <p class="result-description content-text">{{ item.description }}</p>
+        </div>
+        <div class="pdf-icon">
+          <a :href="item.url" target="_blank">
+            <img src="@/assets/image/pdf.png" alt="PDF" />
+          </a>
+        </div>
+      </div>
+    </div>
+  </main>
+  <footer></footer>
+</template>
+<script setup>
+import { ref, watch, onMounted, computed, reactive } from "vue";
+import { useI18n } from "vue-i18n";
+import quarterlyPdf2024Q3 from "@/assets/file/quarterly/10Q 2024-Q3.pdf";
+import quarterlyPdf2024Q2 from "@/assets/file/quarterly/10Q 2024-Q2.pdf";
+import quarterlyPdf2024Q1 from "@/assets/file/quarterly/10Q 2024-Q1.pdf";
+import quarterlyPdf2023Q3 from "@/assets/file/quarterly/10Q 2023-Q3.pdf";
+import quarterlyPdf2023Q2 from "@/assets/file/quarterly/10Q 2023-Q2.pdf";
+import quarterlyPdf2023Q1 from "@/assets/file/quarterly/10Q 2023-Q1.pdf";
+import quarterlyPdf2022Q3 from "@/assets/file/quarterly/10Q 2022-Q3.pdf";
+import quarterlyPdf2022Q2 from "@/assets/file/quarterly/10Q 2022-Q2.pdf";
+import quarterlyPdf2022Q1 from "@/assets/file/quarterly/10Q 2022-Q1.pdf";
+import quarterlyPdf2021Q3 from "@/assets/file/quarterly/10Q 2021-Q3.pdf";
+import quarterlyPdf2021Q2 from "@/assets/file/quarterly/10Q 2021-Q2.pdf";
+import quarterlyPdf2021Q1 from "@/assets/file/quarterly/10Q 2021-Q1.pdf";
+import quarterlyPdf2020Q3 from "@/assets/file/quarterly/10Q 2020-Q3.pdf";
+import quarterlyPdf2020Q2 from "@/assets/file/quarterly/10Q 2020-Q2.pdf";
+import quarterlyPdf2020Q1 from "@/assets/file/quarterly/10Q 2020-Q1.pdf";
+import quarterlyPdf2019Q3 from "@/assets/file/quarterly/10Q 2019-Q3.pdf";
+import quarterlyPdf2019Q2 from "@/assets/file/quarterly/10Q 2019-Q2.pdf";
+import quarterlyPdf2019Q1 from "@/assets/file/quarterly/10Q 2019-Q1.pdf";
+import quarterlyPdf2018Q3 from "@/assets/file/quarterly/10Q 2018-Q3.pdf";
+import quarterlyPdf2018Q2 from "@/assets/file/quarterly/10Q 2018-Q2.pdf";
+import quarterlyPdf2018Q1 from "@/assets/file/quarterly/10Q 2018-Q1.pdf";
+import quarterlyPdf2017Q3 from "@/assets/file/quarterly/10Q 2017-Q3.pdf";
+import quarterlyPdf2017Q2 from "@/assets/file/quarterly/10Q 2017-Q2.pdf";
+import quarterlyPdf2017Q1 from "@/assets/file/quarterly/10Q 2017-Q1.pdf";
+import quarterlyPdf2016Q3 from "@/assets/file/quarterly/10Q 2016-Q3.pdf";
+import quarterlyPdf2016Q2 from "@/assets/file/quarterly/10Q 2016-Q2.pdf";
+import quarterlyPdf2016Q1 from "@/assets/file/quarterly/10Q 2016-Q1.pdf";
+import quarterlyPdf2015Q3 from "@/assets/file/quarterly/10Q 2015-Q3.pdf";
+import quarterlyPdf2015Q2 from "@/assets/file/quarterly/10Q 2015-Q2.pdf";
+import quarterlyPdf2015Q1 from "@/assets/file/quarterly/10Q 2015-Q1.pdf";
+import quarterlyPdf2014Q3 from "@/assets/file/quarterly/10Q 2014-Q3.pdf";
+import quarterlyPdf2014Q2 from "@/assets/file/quarterly/10Q 2014-Q2.pdf";
+import quarterlyPdf2014Q1 from "@/assets/file/quarterly/10Q 2014-Q1.pdf";
+import quarterlyPdf2013Q3 from "@/assets/file/quarterly/10Q 2013-Q3.pdf";
+import quarterlyPdf2013Q2 from "@/assets/file/quarterly/10Q 2013-Q2.pdf";
+import quarterlyPdf2013Q1 from "@/assets/file/quarterly/10Q 2013-Q1.pdf";
+import quarterlyPdf2012Q3 from "@/assets/file/quarterly/10Q 2012-Q3.pdf";
+import quarterlyPdf2012Q2 from "@/assets/file/quarterly/10Q 2012-Q2.pdf";
+import quarterlyPdf2012Q1 from "@/assets/file/quarterly/10Q 2012-Q1.pdf";
+import quarterlyPdf2011Q3 from "@/assets/file/quarterly/10Q 2011-Q3.pdf";
+import quarterlyPdf2011Q2 from "@/assets/file/quarterly/10Q 2011-Q2.pdf";
+import quarterlyPdf2011Q1 from "@/assets/file/quarterly/10Q 2011-Q1.pdf";
+import quarterlyPdf2010Q3 from "@/assets/file/quarterly/10Q 2010-Q3.pdf";
+import quarterlyPdf2010Q2 from "@/assets/file/quarterly/10Q 2010-Q2.pdf";
+import quarterlyPdf2010Q1 from "@/assets/file/quarterly/10Q 2010-Q1.pdf";
+import quarterlyPdf2009Q3 from "@/assets/file/quarterly/10Q 2009-Q3.pdf";
+
+const { t } = useI18n();
+const searchQuery = ref("");
+
+const state = reactive({
+  list: [
+    {
+      title: "2024 Q3 Quarterly Results",
+      description: "Third Quarter 2024 Financial Results",
+      url: quarterlyPdf2024Q3,
+    },
+    {
+      title: "2024 Q2 Quarterly Results",
+      description: "Second Quarter 2024 Financial Results",
+      url: quarterlyPdf2024Q2,
+    },
+    {
+      title: "2024 Q1 Quarterly Results",
+      description: "First Quarter 2024 Financial Results",
+      url: quarterlyPdf2024Q1,
+    },
+    {
+      title: "2023 Q3 Quarterly Results",
+      description: "Third Quarter 2023 Financial Results",
+      url: quarterlyPdf2023Q3,
+    },
+    {
+      title: "2023 Q2 Quarterly Results",
+      description: "Second Quarter 2023 Financial Results",
+      url: quarterlyPdf2023Q2,
+    },
+    {
+      title: "2023 Q1 Quarterly Results",
+      description: "First Quarter 2023 Financial Results",
+      url: quarterlyPdf2023Q1,
+    },
+    {
+      title: "2022 Q3 Quarterly Results",
+      description: "Third Quarter 2022 Financial Results",
+      url: quarterlyPdf2022Q3,
+    },
+    {
+      title: "2022 Q2 Quarterly Results",
+      description: "Second Quarter 2022 Financial Results",
+      url: quarterlyPdf2022Q2,
+    },
+    {
+      title: "2022 Q1 Quarterly Results",
+      description: "First Quarter 2022 Financial Results",
+      url: quarterlyPdf2022Q1,
+    },
+    {
+      title: "2021 Q3 Quarterly Results",
+      description: "Third Quarter 2021 Financial Results",
+      url: quarterlyPdf2021Q3,
+    },
+    {
+      title: "2021 Q2 Quarterly Results",
+      description: "Second Quarter 2021 Financial Results",
+      url: quarterlyPdf2021Q2,
+    },
+    {
+      title: "2021 Q1 Quarterly Results",
+      description: "First Quarter 2021 Financial Results",
+      url: quarterlyPdf2021Q1,
+    },
+    {
+      title: "2020 Q3 Quarterly Results",
+      description: "Third Quarter 2020 Financial Results",
+      url: quarterlyPdf2020Q3,
+    },
+    {
+      title: "2020 Q2 Quarterly Results",
+      description: "Second Quarter 2020 Financial Results",
+      url: quarterlyPdf2020Q2,
+    },
+    {
+      title: "2020 Q1 Quarterly Results",
+      description: "First Quarter 2020 Financial Results",
+      url: quarterlyPdf2020Q1,
+    },
+    {
+      title: "2019 Q3 Quarterly Results",
+      description: "Third Quarter 2019 Financial Results",
+      url: quarterlyPdf2019Q3,
+    },
+    {
+      title: "2019 Q2 Quarterly Results",
+      description: "Second Quarter 2019 Financial Results",
+      url: quarterlyPdf2019Q2,
+    },
+    {
+      title: "2019 Q1 Quarterly Results",
+      description: "First Quarter 2019 Financial Results",
+      url: quarterlyPdf2019Q1,
+    },
+    {
+      title: "2018 Q3 Quarterly Results",
+      description: "Third Quarter 2018 Financial Results",
+      url: quarterlyPdf2018Q3,
+    },
+    {
+      title: "2018 Q2 Quarterly Results",
+      description: "Second Quarter 2018 Financial Results",
+      url: quarterlyPdf2018Q2,
+    },
+    {
+      title: "2018 Q1 Quarterly Results",
+      description: "First Quarter 2018 Financial Results",
+      url: quarterlyPdf2018Q1,
+    },
+    {
+      title: "2017 Q3 Quarterly Results",
+      description: "Third Quarter 2017 Financial Results",
+      url: quarterlyPdf2017Q3,
+    },
+    {
+      title: "2017 Q2 Quarterly Results",
+      description: "Second Quarter 2017 Financial Results",
+      url: quarterlyPdf2017Q2,
+    },
+    {
+      title: "2017 Q1 Quarterly Results",
+      description: "First Quarter 2017 Financial Results",
+      url: quarterlyPdf2017Q1,
+    },
+    {
+      title: "2016 Q3 Quarterly Results",
+      description: "Third Quarter 2016 Financial Results",
+      url: quarterlyPdf2016Q3,
+    },
+    {
+      title: "2016 Q2 Quarterly Results",
+      description: "Second Quarter 2016 Financial Results",
+      url: quarterlyPdf2016Q2,
+    },
+    {
+      title: "2016 Q1 Quarterly Results",
+      description: "First Quarter 2016 Financial Results",
+      url: quarterlyPdf2016Q1,
+    },
+    {
+      title: "2015 Q3 Quarterly Results",
+      description: "Third Quarter 2015 Financial Results",
+      url: quarterlyPdf2015Q3,
+    },
+    {
+      title: "2015 Q2 Quarterly Results",
+      description: "Second Quarter 2015 Financial Results",
+      url: quarterlyPdf2015Q2,
+    },
+    {
+      title: "2015 Q1 Quarterly Results",
+      description: "First Quarter 2015 Financial Results",
+      url: quarterlyPdf2015Q1,
+    },
+    {
+      title: "2014 Q3 Quarterly Results",
+      description: "Third Quarter 2014 Financial Results",
+      url: quarterlyPdf2014Q3,
+    },
+    {
+      title: "2014 Q2 Quarterly Results",
+      description: "Second Quarter 2014 Financial Results",
+      url: quarterlyPdf2014Q2,
+    },
+    {
+      title: "2014 Q1 Quarterly Results",
+      description: "First Quarter 2014 Financial Results",
+      url: quarterlyPdf2014Q1,
+    },
+    {
+      title: "2013 Q3 Quarterly Results",
+      description: "Third Quarter 2013 Financial Results",
+      url: quarterlyPdf2013Q3,
+    },
+    {
+      title: "2013 Q2 Quarterly Results",
+      description: "Second Quarter 2013 Financial Results",
+      url: quarterlyPdf2013Q2,
+    },
+    {
+      title: "2013 Q1 Quarterly Results",
+      description: "First Quarter 2013 Financial Results",
+      url: quarterlyPdf2013Q1,
+    },
+    {
+      title: "2012 Q3 Quarterly Results",
+      description: "Third Quarter 2012 Financial Results",
+      url: quarterlyPdf2012Q3,
+    },
+    {
+      title: "2012 Q2 Quarterly Results",
+      description: "Second Quarter 2012 Financial Results",
+      url: quarterlyPdf2012Q2,
+    },
+    {
+      title: "2012 Q1 Quarterly Results",
+      description: "First Quarter 2012 Financial Results",
+      url: quarterlyPdf2012Q1,
+    },
+    {
+      title: "2011 Q3 Quarterly Results",
+      description: "Third Quarter 2011 Financial Results",
+      url: quarterlyPdf2011Q3,
+    },
+    {
+      title: "2011 Q2 Quarterly Results",
+      description: "Second Quarter 2011 Financial Results",
+      url: quarterlyPdf2011Q2,
+    },
+    {
+      title: "2011 Q1 Quarterly Results",
+      description: "First Quarter 2011 Financial Results",
+      url: quarterlyPdf2011Q1,
+    },
+    {
+      title: "2010 Q3 Quarterly Results",
+      description: "Third Quarter 2010 Financial Results",
+      url: quarterlyPdf2010Q3,
+    },
+    {
+      title: "2010 Q2 Quarterly Results",
+      description: "Second Quarter 2010 Financial Results",
+      url: quarterlyPdf2010Q2,
+    },
+    {
+      title: "2010 Q1 Quarterly Results",
+      description: "First Quarter 2010 Financial Results",
+      url: quarterlyPdf2010Q1,
+    },
+    {
+      title: "2009 Q3 Quarterly Results",
+      description: "Third Quarter 2009 Financial Results",
+      url: quarterlyPdf2009Q3,
+    },
+  ],
+});
+
+onMounted(async () => {});
+const filteredList = computed(() => {
+  if (!searchQuery.value) return state.list;
+  const query = searchQuery.value.toLowerCase();
+  return state.list.filter(
+    (item) =>
+      item.title.toLowerCase().includes(query) ||
+      item.description.toLowerCase().includes(query)
+  );
+});
+
+const handleSearch = () => {
+  // 搜索处理逻辑
+  console.log("搜索:", searchQuery.value);
+};
+</script>
+<style scoped lang="scss">
+.title {
+  font-size: 40px;
+  color: #333;
+}
+.subtitle {
+  font-size: 18px;
+  font-weight: 600;
+  color: #333;
+}
+.content-text {
+  font-size: 16px;
+}
+.search-container {
+  margin-bottom: 20px;
+  display: flex;
+  align-items: center;
+}
+
+.search-input {
+  padding: 8px 12px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  width: 360px;
+  margin-right: 10px;
+}
+
+.search-button {
+  padding: 8px 16px;
+  background-color: #f0f0f0;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.results-list {
+  padding-right: 20px;
+  margin-top: 20px;
+  max-height: 1200px;
+  overflow-y: auto;
+}
+
+.result-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding: 15px 0;
+  border-bottom: 1px solid #eee;
+}
+
+.content {
+  flex: 1;
+}
+
+.result-title {
+  color: #0078d7;
+  text-decoration: none;
+  display: block;
+  margin-bottom: 5px;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.result-description {
+  color: #666;
+  margin: 0;
+}
+
+.pdf-icon {
+  margin-left: 15px;
+
+  img {
+    width: 24px;
+    height: 24px;
+  }
+}
+</style>

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

@@ -41,30 +41,288 @@
 <script setup>
 import { ref, watch, onMounted, computed, reactive } from "vue";
 import { useI18n } from "vue-i18n";
-import quarterlyPdf2025Q1 from "@/assets/file/2025 Q1 Quarterly Results.pdf";
-import quarterlyPdf2023Q1 from "@/assets/file/2023 Q1 Quarterly Results.pdf";
-import quarterlyPdf2023Q2 from "@/assets/file/2023 Q2 Quarterly Results.pdf";
+import quarterlyPdf2024Q3 from "@/assets/file/quarterly/10Q 2024-Q3.pdf";
+import quarterlyPdf2024Q2 from "@/assets/file/quarterly/10Q 2024-Q2.pdf";
+import quarterlyPdf2024Q1 from "@/assets/file/quarterly/10Q 2024-Q1.pdf";
+import quarterlyPdf2023Q3 from "@/assets/file/quarterly/10Q 2023-Q3.pdf";
+import quarterlyPdf2023Q2 from "@/assets/file/quarterly/10Q 2023-Q2.pdf";
+import quarterlyPdf2023Q1 from "@/assets/file/quarterly/10Q 2023-Q1.pdf";
+import quarterlyPdf2022Q3 from "@/assets/file/quarterly/10Q 2022-Q3.pdf";
+import quarterlyPdf2022Q2 from "@/assets/file/quarterly/10Q 2022-Q2.pdf";
+import quarterlyPdf2022Q1 from "@/assets/file/quarterly/10Q 2022-Q1.pdf";
+import quarterlyPdf2021Q3 from "@/assets/file/quarterly/10Q 2021-Q3.pdf";
+import quarterlyPdf2021Q2 from "@/assets/file/quarterly/10Q 2021-Q2.pdf";
+import quarterlyPdf2021Q1 from "@/assets/file/quarterly/10Q 2021-Q1.pdf";
+import quarterlyPdf2020Q3 from "@/assets/file/quarterly/10Q 2020-Q3.pdf";
+import quarterlyPdf2020Q2 from "@/assets/file/quarterly/10Q 2020-Q2.pdf";
+import quarterlyPdf2020Q1 from "@/assets/file/quarterly/10Q 2020-Q1.pdf";
+import quarterlyPdf2019Q3 from "@/assets/file/quarterly/10Q 2019-Q3.pdf";
+import quarterlyPdf2019Q2 from "@/assets/file/quarterly/10Q 2019-Q2.pdf";
+import quarterlyPdf2019Q1 from "@/assets/file/quarterly/10Q 2019-Q1.pdf";
+import quarterlyPdf2018Q3 from "@/assets/file/quarterly/10Q 2018-Q3.pdf";
+import quarterlyPdf2018Q2 from "@/assets/file/quarterly/10Q 2018-Q2.pdf";
+import quarterlyPdf2018Q1 from "@/assets/file/quarterly/10Q 2018-Q1.pdf";
+import quarterlyPdf2017Q3 from "@/assets/file/quarterly/10Q 2017-Q3.pdf";
+import quarterlyPdf2017Q2 from "@/assets/file/quarterly/10Q 2017-Q2.pdf";
+import quarterlyPdf2017Q1 from "@/assets/file/quarterly/10Q 2017-Q1.pdf";
+import quarterlyPdf2016Q3 from "@/assets/file/quarterly/10Q 2016-Q3.pdf";
+import quarterlyPdf2016Q2 from "@/assets/file/quarterly/10Q 2016-Q2.pdf";
+import quarterlyPdf2016Q1 from "@/assets/file/quarterly/10Q 2016-Q1.pdf";
+import quarterlyPdf2015Q3 from "@/assets/file/quarterly/10Q 2015-Q3.pdf";
+import quarterlyPdf2015Q2 from "@/assets/file/quarterly/10Q 2015-Q2.pdf";
+import quarterlyPdf2015Q1 from "@/assets/file/quarterly/10Q 2015-Q1.pdf";
+import quarterlyPdf2014Q3 from "@/assets/file/quarterly/10Q 2014-Q3.pdf";
+import quarterlyPdf2014Q2 from "@/assets/file/quarterly/10Q 2014-Q2.pdf";
+import quarterlyPdf2014Q1 from "@/assets/file/quarterly/10Q 2014-Q1.pdf";
+import quarterlyPdf2013Q3 from "@/assets/file/quarterly/10Q 2013-Q3.pdf";
+import quarterlyPdf2013Q2 from "@/assets/file/quarterly/10Q 2013-Q2.pdf";
+import quarterlyPdf2013Q1 from "@/assets/file/quarterly/10Q 2013-Q1.pdf";
+import quarterlyPdf2012Q3 from "@/assets/file/quarterly/10Q 2012-Q3.pdf";
+import quarterlyPdf2012Q2 from "@/assets/file/quarterly/10Q 2012-Q2.pdf";
+import quarterlyPdf2012Q1 from "@/assets/file/quarterly/10Q 2012-Q1.pdf";
+import quarterlyPdf2011Q3 from "@/assets/file/quarterly/10Q 2011-Q3.pdf";
+import quarterlyPdf2011Q2 from "@/assets/file/quarterly/10Q 2011-Q2.pdf";
+import quarterlyPdf2011Q1 from "@/assets/file/quarterly/10Q 2011-Q1.pdf";
+import quarterlyPdf2010Q3 from "@/assets/file/quarterly/10Q 2010-Q3.pdf";
+import quarterlyPdf2010Q2 from "@/assets/file/quarterly/10Q 2010-Q2.pdf";
+import quarterlyPdf2010Q1 from "@/assets/file/quarterly/10Q 2010-Q1.pdf";
+import quarterlyPdf2009Q3 from "@/assets/file/quarterly/10Q 2009-Q3.pdf";
+
 const { t } = useI18n();
 const searchQuery = ref("");
 
 const state = reactive({
   list: [
     {
-      title: "2025 Q1 Quarterly Results",
-      description:
-        "Unaudited First Quarter and Full Year 2025 Financial Results",
-      url: quarterlyPdf2025Q1,
+      title: "2024 Q3 Quarterly Results",
+      description: "Third Quarter 2024 Financial Results",
+      url: quarterlyPdf2024Q3,
     },
     {
-      title: "2023 Q1 Quarterly Results",
-      description: "First Quarter and Full Year 2023 Financial Results",
-      url: quarterlyPdf2023Q1,
+      title: "2024 Q2 Quarterly Results",
+      description: "Second Quarter 2024 Financial Results",
+      url: quarterlyPdf2024Q2,
+    },
+    {
+      title: "2024 Q1 Quarterly Results",
+      description: "First Quarter 2024 Financial Results",
+      url: quarterlyPdf2024Q1,
+    },
+    {
+      title: "2023 Q3 Quarterly Results",
+      description: "Third Quarter 2023 Financial Results",
+      url: quarterlyPdf2023Q3,
     },
     {
       title: "2023 Q2 Quarterly Results",
-      description: "Second Quarter and Full Year 2023 Financial Results",
+      description: "Second Quarter 2023 Financial Results",
       url: quarterlyPdf2023Q2,
     },
+    {
+      title: "2023 Q1 Quarterly Results",
+      description: "First Quarter 2023 Financial Results",
+      url: quarterlyPdf2023Q1,
+    },
+    {
+      title: "2022 Q3 Quarterly Results",
+      description: "Third Quarter 2022 Financial Results",
+      url: quarterlyPdf2022Q3,
+    },
+    {
+      title: "2022 Q2 Quarterly Results",
+      description: "Second Quarter 2022 Financial Results",
+      url: quarterlyPdf2022Q2,
+    },
+    {
+      title: "2022 Q1 Quarterly Results",
+      description: "First Quarter 2022 Financial Results",
+      url: quarterlyPdf2022Q1,
+    },
+    {
+      title: "2021 Q3 Quarterly Results",
+      description: "Third Quarter 2021 Financial Results",
+      url: quarterlyPdf2021Q3,
+    },
+    {
+      title: "2021 Q2 Quarterly Results",
+      description: "Second Quarter 2021 Financial Results",
+      url: quarterlyPdf2021Q2,
+    },
+    {
+      title: "2021 Q1 Quarterly Results",
+      description: "First Quarter 2021 Financial Results",
+      url: quarterlyPdf2021Q1,
+    },
+    {
+      title: "2020 Q3 Quarterly Results",
+      description: "Third Quarter 2020 Financial Results",
+      url: quarterlyPdf2020Q3,
+    },
+    {
+      title: "2020 Q2 Quarterly Results",
+      description: "Second Quarter 2020 Financial Results",
+      url: quarterlyPdf2020Q2,
+    },
+    {
+      title: "2020 Q1 Quarterly Results",
+      description: "First Quarter 2020 Financial Results",
+      url: quarterlyPdf2020Q1,
+    },
+    {
+      title: "2019 Q3 Quarterly Results",
+      description: "Third Quarter 2019 Financial Results",
+      url: quarterlyPdf2019Q3,
+    },
+    {
+      title: "2019 Q2 Quarterly Results",
+      description: "Second Quarter 2019 Financial Results",
+      url: quarterlyPdf2019Q2,
+    },
+    {
+      title: "2019 Q1 Quarterly Results",
+      description: "First Quarter 2019 Financial Results",
+      url: quarterlyPdf2019Q1,
+    },
+    {
+      title: "2018 Q3 Quarterly Results",
+      description: "Third Quarter 2018 Financial Results",
+      url: quarterlyPdf2018Q3,
+    },
+    {
+      title: "2018 Q2 Quarterly Results",
+      description: "Second Quarter 2018 Financial Results",
+      url: quarterlyPdf2018Q2,
+    },
+    {
+      title: "2018 Q1 Quarterly Results",
+      description: "First Quarter 2018 Financial Results",
+      url: quarterlyPdf2018Q1,
+    },
+    {
+      title: "2017 Q3 Quarterly Results",
+      description: "Third Quarter 2017 Financial Results",
+      url: quarterlyPdf2017Q3,
+    },
+    {
+      title: "2017 Q2 Quarterly Results",
+      description: "Second Quarter 2017 Financial Results",
+      url: quarterlyPdf2017Q2,
+    },
+    {
+      title: "2017 Q1 Quarterly Results",
+      description: "First Quarter 2017 Financial Results",
+      url: quarterlyPdf2017Q1,
+    },
+    {
+      title: "2016 Q3 Quarterly Results",
+      description: "Third Quarter 2016 Financial Results",
+      url: quarterlyPdf2016Q3,
+    },
+    {
+      title: "2016 Q2 Quarterly Results",
+      description: "Second Quarter 2016 Financial Results",
+      url: quarterlyPdf2016Q2,
+    },
+    {
+      title: "2016 Q1 Quarterly Results",
+      description: "First Quarter 2016 Financial Results",
+      url: quarterlyPdf2016Q1,
+    },
+    {
+      title: "2015 Q3 Quarterly Results",
+      description: "Third Quarter 2015 Financial Results",
+      url: quarterlyPdf2015Q3,
+    },
+    {
+      title: "2015 Q2 Quarterly Results",
+      description: "Second Quarter 2015 Financial Results",
+      url: quarterlyPdf2015Q2,
+    },
+    {
+      title: "2015 Q1 Quarterly Results",
+      description: "First Quarter 2015 Financial Results",
+      url: quarterlyPdf2015Q1,
+    },
+    {
+      title: "2014 Q3 Quarterly Results",
+      description: "Third Quarter 2014 Financial Results",
+      url: quarterlyPdf2014Q3,
+    },
+    {
+      title: "2014 Q2 Quarterly Results",
+      description: "Second Quarter 2014 Financial Results",
+      url: quarterlyPdf2014Q2,
+    },
+    {
+      title: "2014 Q1 Quarterly Results",
+      description: "First Quarter 2014 Financial Results",
+      url: quarterlyPdf2014Q1,
+    },
+    {
+      title: "2013 Q3 Quarterly Results",
+      description: "Third Quarter 2013 Financial Results",
+      url: quarterlyPdf2013Q3,
+    },
+    {
+      title: "2013 Q2 Quarterly Results",
+      description: "Second Quarter 2013 Financial Results",
+      url: quarterlyPdf2013Q2,
+    },
+    {
+      title: "2013 Q1 Quarterly Results",
+      description: "First Quarter 2013 Financial Results",
+      url: quarterlyPdf2013Q1,
+    },
+    {
+      title: "2012 Q3 Quarterly Results",
+      description: "Third Quarter 2012 Financial Results",
+      url: quarterlyPdf2012Q3,
+    },
+    {
+      title: "2012 Q2 Quarterly Results",
+      description: "Second Quarter 2012 Financial Results",
+      url: quarterlyPdf2012Q2,
+    },
+    {
+      title: "2012 Q1 Quarterly Results",
+      description: "First Quarter 2012 Financial Results",
+      url: quarterlyPdf2012Q1,
+    },
+    {
+      title: "2011 Q3 Quarterly Results",
+      description: "Third Quarter 2011 Financial Results",
+      url: quarterlyPdf2011Q3,
+    },
+    {
+      title: "2011 Q2 Quarterly Results",
+      description: "Second Quarter 2011 Financial Results",
+      url: quarterlyPdf2011Q2,
+    },
+    {
+      title: "2011 Q1 Quarterly Results",
+      description: "First Quarter 2011 Financial Results",
+      url: quarterlyPdf2011Q1,
+    },
+    {
+      title: "2010 Q3 Quarterly Results",
+      description: "Third Quarter 2010 Financial Results",
+      url: quarterlyPdf2010Q3,
+    },
+    {
+      title: "2010 Q2 Quarterly Results",
+      description: "Second Quarter 2010 Financial Results",
+      url: quarterlyPdf2010Q2,
+    },
+    {
+      title: "2010 Q1 Quarterly Results",
+      description: "First Quarter 2010 Financial Results",
+      url: quarterlyPdf2010Q1,
+    },
+    {
+      title: "2009 Q3 Quarterly Results",
+      description: "Third Quarter 2009 Financial Results",
+      url: quarterlyPdf2009Q3,
+    },
   ],
 });
 

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

@@ -1,26 +1,21 @@
 <template>
   <header></header>
-  <main class="p-[80px] mx-auto" style="max-width: 100vw; min-width: 375px">
+  <main class="p-[80px] mx-auto" style="max-width: 100vw; min-width: 350px">
     <div class="page-title mb-[24px]">
       {{ t("financialinformation.quarterlyresults.title") }}
     </div>
     <div class="search-container">
-      <n-input
-        v-model:value="searchQuery"
+      <input
+        type="text"
+        v-model="searchQuery"
+        class="search-input"
         :placeholder="
           t('financialinformation.quarterlyresults.search.placeholder')
         "
-        clearable
-        :font-size="72"
       />
-      <n-button
-        type="primary"
-        @click="handleSearch"
-        :font-size="72"
-        class="ml-[10px]"
-      >
+      <button @click="handleSearch" class="search-button">
         {{ t("financialinformation.quarterlyresults.search.button") }}
-      </n-button>
+      </button>
     </div>
 
     <div class="results-list">
@@ -50,37 +45,291 @@
 </template>
 <script setup>
 import { ref, watch, onMounted, computed, reactive } from "vue";
-import { NButton, NInput, NTooltip } from "naive-ui";
 import { useI18n } from "vue-i18n";
+import quarterlyPdf2024Q3 from "@/assets/file/quarterly/10Q 2024-Q3.pdf";
+import quarterlyPdf2024Q2 from "@/assets/file/quarterly/10Q 2024-Q2.pdf";
+import quarterlyPdf2024Q1 from "@/assets/file/quarterly/10Q 2024-Q1.pdf";
+import quarterlyPdf2023Q3 from "@/assets/file/quarterly/10Q 2023-Q3.pdf";
+import quarterlyPdf2023Q2 from "@/assets/file/quarterly/10Q 2023-Q2.pdf";
+import quarterlyPdf2023Q1 from "@/assets/file/quarterly/10Q 2023-Q1.pdf";
+import quarterlyPdf2022Q3 from "@/assets/file/quarterly/10Q 2022-Q3.pdf";
+import quarterlyPdf2022Q2 from "@/assets/file/quarterly/10Q 2022-Q2.pdf";
+import quarterlyPdf2022Q1 from "@/assets/file/quarterly/10Q 2022-Q1.pdf";
+import quarterlyPdf2021Q3 from "@/assets/file/quarterly/10Q 2021-Q3.pdf";
+import quarterlyPdf2021Q2 from "@/assets/file/quarterly/10Q 2021-Q2.pdf";
+import quarterlyPdf2021Q1 from "@/assets/file/quarterly/10Q 2021-Q1.pdf";
+import quarterlyPdf2020Q3 from "@/assets/file/quarterly/10Q 2020-Q3.pdf";
+import quarterlyPdf2020Q2 from "@/assets/file/quarterly/10Q 2020-Q2.pdf";
+import quarterlyPdf2020Q1 from "@/assets/file/quarterly/10Q 2020-Q1.pdf";
+import quarterlyPdf2019Q3 from "@/assets/file/quarterly/10Q 2019-Q3.pdf";
+import quarterlyPdf2019Q2 from "@/assets/file/quarterly/10Q 2019-Q2.pdf";
+import quarterlyPdf2019Q1 from "@/assets/file/quarterly/10Q 2019-Q1.pdf";
+import quarterlyPdf2018Q3 from "@/assets/file/quarterly/10Q 2018-Q3.pdf";
+import quarterlyPdf2018Q2 from "@/assets/file/quarterly/10Q 2018-Q2.pdf";
+import quarterlyPdf2018Q1 from "@/assets/file/quarterly/10Q 2018-Q1.pdf";
+import quarterlyPdf2017Q3 from "@/assets/file/quarterly/10Q 2017-Q3.pdf";
+import quarterlyPdf2017Q2 from "@/assets/file/quarterly/10Q 2017-Q2.pdf";
+import quarterlyPdf2017Q1 from "@/assets/file/quarterly/10Q 2017-Q1.pdf";
+import quarterlyPdf2016Q3 from "@/assets/file/quarterly/10Q 2016-Q3.pdf";
+import quarterlyPdf2016Q2 from "@/assets/file/quarterly/10Q 2016-Q2.pdf";
+import quarterlyPdf2016Q1 from "@/assets/file/quarterly/10Q 2016-Q1.pdf";
+import quarterlyPdf2015Q3 from "@/assets/file/quarterly/10Q 2015-Q3.pdf";
+import quarterlyPdf2015Q2 from "@/assets/file/quarterly/10Q 2015-Q2.pdf";
+import quarterlyPdf2015Q1 from "@/assets/file/quarterly/10Q 2015-Q1.pdf";
+import quarterlyPdf2014Q3 from "@/assets/file/quarterly/10Q 2014-Q3.pdf";
+import quarterlyPdf2014Q2 from "@/assets/file/quarterly/10Q 2014-Q2.pdf";
+import quarterlyPdf2014Q1 from "@/assets/file/quarterly/10Q 2014-Q1.pdf";
+import quarterlyPdf2013Q3 from "@/assets/file/quarterly/10Q 2013-Q3.pdf";
+import quarterlyPdf2013Q2 from "@/assets/file/quarterly/10Q 2013-Q2.pdf";
+import quarterlyPdf2013Q1 from "@/assets/file/quarterly/10Q 2013-Q1.pdf";
+import quarterlyPdf2012Q3 from "@/assets/file/quarterly/10Q 2012-Q3.pdf";
+import quarterlyPdf2012Q2 from "@/assets/file/quarterly/10Q 2012-Q2.pdf";
+import quarterlyPdf2012Q1 from "@/assets/file/quarterly/10Q 2012-Q1.pdf";
+import quarterlyPdf2011Q3 from "@/assets/file/quarterly/10Q 2011-Q3.pdf";
+import quarterlyPdf2011Q2 from "@/assets/file/quarterly/10Q 2011-Q2.pdf";
+import quarterlyPdf2011Q1 from "@/assets/file/quarterly/10Q 2011-Q1.pdf";
+import quarterlyPdf2010Q3 from "@/assets/file/quarterly/10Q 2010-Q3.pdf";
+import quarterlyPdf2010Q2 from "@/assets/file/quarterly/10Q 2010-Q2.pdf";
+import quarterlyPdf2010Q1 from "@/assets/file/quarterly/10Q 2010-Q1.pdf";
+import quarterlyPdf2009Q3 from "@/assets/file/quarterly/10Q 2009-Q3.pdf";
 
-import quarterlyPdf2025Q1 from "@/assets/file/2025 Q1 Quarterly Results.pdf";
-import quarterlyPdf2023Q1 from "@/assets/file/2023 Q1 Quarterly Results.pdf";
-import quarterlyPdf2023Q2 from "@/assets/file/2023 Q2 Quarterly Results.pdf";
 const { t } = useI18n();
 const searchQuery = ref("");
 
 const state = reactive({
   list: [
     {
-      title: "2025 Q1 Quarterly Results",
-      description:
-        "Unaudited First Quarter and Full Year 2025 Financial Results",
-      url: quarterlyPdf2025Q1,
+      title: "2024 Q3 Quarterly Results",
+      description: "Third Quarter 2024 Financial Results",
+      url: quarterlyPdf2024Q3,
     },
     {
-      title: "2023 Q1 Quarterly Results",
-      description: "First Quarter and Full Year 2023 Financial Results",
-      url: quarterlyPdf2023Q1,
+      title: "2024 Q2 Quarterly Results",
+      description: "Second Quarter 2024 Financial Results",
+      url: quarterlyPdf2024Q2,
+    },
+    {
+      title: "2024 Q1 Quarterly Results",
+      description: "First Quarter 2024 Financial Results",
+      url: quarterlyPdf2024Q1,
+    },
+    {
+      title: "2023 Q3 Quarterly Results",
+      description: "Third Quarter 2023 Financial Results",
+      url: quarterlyPdf2023Q3,
     },
     {
       title: "2023 Q2 Quarterly Results",
-      description: "Second Quarter and Full Year 2023 Financial Results",
+      description: "Second Quarter 2023 Financial Results",
       url: quarterlyPdf2023Q2,
     },
+    {
+      title: "2023 Q1 Quarterly Results",
+      description: "First Quarter 2023 Financial Results",
+      url: quarterlyPdf2023Q1,
+    },
+    {
+      title: "2022 Q3 Quarterly Results",
+      description: "Third Quarter 2022 Financial Results",
+      url: quarterlyPdf2022Q3,
+    },
+    {
+      title: "2022 Q2 Quarterly Results",
+      description: "Second Quarter 2022 Financial Results",
+      url: quarterlyPdf2022Q2,
+    },
+    {
+      title: "2022 Q1 Quarterly Results",
+      description: "First Quarter 2022 Financial Results",
+      url: quarterlyPdf2022Q1,
+    },
+    {
+      title: "2021 Q3 Quarterly Results",
+      description: "Third Quarter 2021 Financial Results",
+      url: quarterlyPdf2021Q3,
+    },
+    {
+      title: "2021 Q2 Quarterly Results",
+      description: "Second Quarter 2021 Financial Results",
+      url: quarterlyPdf2021Q2,
+    },
+    {
+      title: "2021 Q1 Quarterly Results",
+      description: "First Quarter 2021 Financial Results",
+      url: quarterlyPdf2021Q1,
+    },
+    {
+      title: "2020 Q3 Quarterly Results",
+      description: "Third Quarter 2020 Financial Results",
+      url: quarterlyPdf2020Q3,
+    },
+    {
+      title: "2020 Q2 Quarterly Results",
+      description: "Second Quarter 2020 Financial Results",
+      url: quarterlyPdf2020Q2,
+    },
+    {
+      title: "2020 Q1 Quarterly Results",
+      description: "First Quarter 2020 Financial Results",
+      url: quarterlyPdf2020Q1,
+    },
+    {
+      title: "2019 Q3 Quarterly Results",
+      description: "Third Quarter 2019 Financial Results",
+      url: quarterlyPdf2019Q3,
+    },
+    {
+      title: "2019 Q2 Quarterly Results",
+      description: "Second Quarter 2019 Financial Results",
+      url: quarterlyPdf2019Q2,
+    },
+    {
+      title: "2019 Q1 Quarterly Results",
+      description: "First Quarter 2019 Financial Results",
+      url: quarterlyPdf2019Q1,
+    },
+    {
+      title: "2018 Q3 Quarterly Results",
+      description: "Third Quarter 2018 Financial Results",
+      url: quarterlyPdf2018Q3,
+    },
+    {
+      title: "2018 Q2 Quarterly Results",
+      description: "Second Quarter 2018 Financial Results",
+      url: quarterlyPdf2018Q2,
+    },
+    {
+      title: "2018 Q1 Quarterly Results",
+      description: "First Quarter 2018 Financial Results",
+      url: quarterlyPdf2018Q1,
+    },
+    {
+      title: "2017 Q3 Quarterly Results",
+      description: "Third Quarter 2017 Financial Results",
+      url: quarterlyPdf2017Q3,
+    },
+    {
+      title: "2017 Q2 Quarterly Results",
+      description: "Second Quarter 2017 Financial Results",
+      url: quarterlyPdf2017Q2,
+    },
+    {
+      title: "2017 Q1 Quarterly Results",
+      description: "First Quarter 2017 Financial Results",
+      url: quarterlyPdf2017Q1,
+    },
+    {
+      title: "2016 Q3 Quarterly Results",
+      description: "Third Quarter 2016 Financial Results",
+      url: quarterlyPdf2016Q3,
+    },
+    {
+      title: "2016 Q2 Quarterly Results",
+      description: "Second Quarter 2016 Financial Results",
+      url: quarterlyPdf2016Q2,
+    },
+    {
+      title: "2016 Q1 Quarterly Results",
+      description: "First Quarter 2016 Financial Results",
+      url: quarterlyPdf2016Q1,
+    },
+    {
+      title: "2015 Q3 Quarterly Results",
+      description: "Third Quarter 2015 Financial Results",
+      url: quarterlyPdf2015Q3,
+    },
+    {
+      title: "2015 Q2 Quarterly Results",
+      description: "Second Quarter 2015 Financial Results",
+      url: quarterlyPdf2015Q2,
+    },
+    {
+      title: "2015 Q1 Quarterly Results",
+      description: "First Quarter 2015 Financial Results",
+      url: quarterlyPdf2015Q1,
+    },
+    {
+      title: "2014 Q3 Quarterly Results",
+      description: "Third Quarter 2014 Financial Results",
+      url: quarterlyPdf2014Q3,
+    },
+    {
+      title: "2014 Q2 Quarterly Results",
+      description: "Second Quarter 2014 Financial Results",
+      url: quarterlyPdf2014Q2,
+    },
+    {
+      title: "2014 Q1 Quarterly Results",
+      description: "First Quarter 2014 Financial Results",
+      url: quarterlyPdf2014Q1,
+    },
+    {
+      title: "2013 Q3 Quarterly Results",
+      description: "Third Quarter 2013 Financial Results",
+      url: quarterlyPdf2013Q3,
+    },
+    {
+      title: "2013 Q2 Quarterly Results",
+      description: "Second Quarter 2013 Financial Results",
+      url: quarterlyPdf2013Q2,
+    },
+    {
+      title: "2013 Q1 Quarterly Results",
+      description: "First Quarter 2013 Financial Results",
+      url: quarterlyPdf2013Q1,
+    },
+    {
+      title: "2012 Q3 Quarterly Results",
+      description: "Third Quarter 2012 Financial Results",
+      url: quarterlyPdf2012Q3,
+    },
+    {
+      title: "2012 Q2 Quarterly Results",
+      description: "Second Quarter 2012 Financial Results",
+      url: quarterlyPdf2012Q2,
+    },
+    {
+      title: "2012 Q1 Quarterly Results",
+      description: "First Quarter 2012 Financial Results",
+      url: quarterlyPdf2012Q1,
+    },
+    {
+      title: "2011 Q3 Quarterly Results",
+      description: "Third Quarter 2011 Financial Results",
+      url: quarterlyPdf2011Q3,
+    },
+    {
+      title: "2011 Q2 Quarterly Results",
+      description: "Second Quarter 2011 Financial Results",
+      url: quarterlyPdf2011Q2,
+    },
+    {
+      title: "2011 Q1 Quarterly Results",
+      description: "First Quarter 2011 Financial Results",
+      url: quarterlyPdf2011Q1,
+    },
+    {
+      title: "2010 Q3 Quarterly Results",
+      description: "Third Quarter 2010 Financial Results",
+      url: quarterlyPdf2010Q3,
+    },
+    {
+      title: "2010 Q2 Quarterly Results",
+      description: "Second Quarter 2010 Financial Results",
+      url: quarterlyPdf2010Q2,
+    },
+    {
+      title: "2010 Q1 Quarterly Results",
+      description: "First Quarter 2010 Financial Results",
+      url: quarterlyPdf2010Q1,
+    },
+    {
+      title: "2009 Q3 Quarterly Results",
+      description: "Third Quarter 2009 Financial Results",
+      url: quarterlyPdf2009Q3,
+    },
   ],
 });
-
-onMounted(async () => {});
 const filteredList = computed(() => {
   if (!searchQuery.value) return state.list;
   const query = searchQuery.value.toLowerCase();
@@ -158,12 +407,40 @@ const handleDownload = (url) => {
 }
 
 .search-container {
-  margin-bottom: 24px;
   display: flex;
-  align-items: center;
-  background-color: #f6f7f9;
-  border-radius: 8px;
-  padding: 8px;
+  flex-direction: column;
+  gap: 10px;
+  margin-bottom: 20px;
+}
+
+.search-input {
+  width: 100%;
+  padding: 10px 15px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  outline: none;
+  transition: border-color 0.3s;
+}
+
+.search-input:focus {
+  border-color: #2979ff;
+  box-shadow: 0 0 0 2px rgba(41, 121, 255, 0.2);
+}
+
+.search-button {
+  width: 100%;
+  padding: 10px 0;
+  background: #2979ff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.3s;
+}
+
+.search-button:hover {
+  background: #1e6de8;
 }
 
 .results-list {

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

@@ -0,0 +1,514 @@
+<template>
+  <header></header>
+  <main class="p-[80px] mx-auto" style="max-width: 100vw; min-width: 350px">
+    <div class="page-title mb-[24px]">
+      {{ t("financialinformation.quarterlyresults.title") }}
+    </div>
+    <div class="search-container">
+      <input
+        type="text"
+        v-model="searchQuery"
+        class="search-input"
+        :placeholder="
+          t('financialinformation.quarterlyresults.search.placeholder')
+        "
+      />
+      <button @click="handleSearch" class="search-button">
+        {{ t("financialinformation.quarterlyresults.search.button") }}
+      </button>
+    </div>
+
+    <div class="results-list">
+      <div
+        v-for="(item, index) in filteredList"
+        :key="index"
+        class="result-item flex items-center mt-[20px] mb-[20px]"
+      >
+        <img
+          src="@/assets/image/pdf.png"
+          alt="PDF"
+          style="width: 20px; height: 20px"
+        />
+        <div class="content">
+          <div class="result-title">{{ item.title }}</div>
+        </div>
+
+        <img
+          src="@/assets/image/download.svg"
+          style="width: 20px; height: 20px"
+          @click="handleDownload(item.url)"
+        />
+      </div>
+    </div>
+  </main>
+  <footer></footer>
+</template>
+<script setup>
+import { ref, watch, onMounted, computed, reactive } from "vue";
+import { useI18n } from "vue-i18n";
+import quarterlyPdf2024Q3 from "@/assets/file/quarterly/10Q 2024-Q3.pdf";
+import quarterlyPdf2024Q2 from "@/assets/file/quarterly/10Q 2024-Q2.pdf";
+import quarterlyPdf2024Q1 from "@/assets/file/quarterly/10Q 2024-Q1.pdf";
+import quarterlyPdf2023Q3 from "@/assets/file/quarterly/10Q 2023-Q3.pdf";
+import quarterlyPdf2023Q2 from "@/assets/file/quarterly/10Q 2023-Q2.pdf";
+import quarterlyPdf2023Q1 from "@/assets/file/quarterly/10Q 2023-Q1.pdf";
+import quarterlyPdf2022Q3 from "@/assets/file/quarterly/10Q 2022-Q3.pdf";
+import quarterlyPdf2022Q2 from "@/assets/file/quarterly/10Q 2022-Q2.pdf";
+import quarterlyPdf2022Q1 from "@/assets/file/quarterly/10Q 2022-Q1.pdf";
+import quarterlyPdf2021Q3 from "@/assets/file/quarterly/10Q 2021-Q3.pdf";
+import quarterlyPdf2021Q2 from "@/assets/file/quarterly/10Q 2021-Q2.pdf";
+import quarterlyPdf2021Q1 from "@/assets/file/quarterly/10Q 2021-Q1.pdf";
+import quarterlyPdf2020Q3 from "@/assets/file/quarterly/10Q 2020-Q3.pdf";
+import quarterlyPdf2020Q2 from "@/assets/file/quarterly/10Q 2020-Q2.pdf";
+import quarterlyPdf2020Q1 from "@/assets/file/quarterly/10Q 2020-Q1.pdf";
+import quarterlyPdf2019Q3 from "@/assets/file/quarterly/10Q 2019-Q3.pdf";
+import quarterlyPdf2019Q2 from "@/assets/file/quarterly/10Q 2019-Q2.pdf";
+import quarterlyPdf2019Q1 from "@/assets/file/quarterly/10Q 2019-Q1.pdf";
+import quarterlyPdf2018Q3 from "@/assets/file/quarterly/10Q 2018-Q3.pdf";
+import quarterlyPdf2018Q2 from "@/assets/file/quarterly/10Q 2018-Q2.pdf";
+import quarterlyPdf2018Q1 from "@/assets/file/quarterly/10Q 2018-Q1.pdf";
+import quarterlyPdf2017Q3 from "@/assets/file/quarterly/10Q 2017-Q3.pdf";
+import quarterlyPdf2017Q2 from "@/assets/file/quarterly/10Q 2017-Q2.pdf";
+import quarterlyPdf2017Q1 from "@/assets/file/quarterly/10Q 2017-Q1.pdf";
+import quarterlyPdf2016Q3 from "@/assets/file/quarterly/10Q 2016-Q3.pdf";
+import quarterlyPdf2016Q2 from "@/assets/file/quarterly/10Q 2016-Q2.pdf";
+import quarterlyPdf2016Q1 from "@/assets/file/quarterly/10Q 2016-Q1.pdf";
+import quarterlyPdf2015Q3 from "@/assets/file/quarterly/10Q 2015-Q3.pdf";
+import quarterlyPdf2015Q2 from "@/assets/file/quarterly/10Q 2015-Q2.pdf";
+import quarterlyPdf2015Q1 from "@/assets/file/quarterly/10Q 2015-Q1.pdf";
+import quarterlyPdf2014Q3 from "@/assets/file/quarterly/10Q 2014-Q3.pdf";
+import quarterlyPdf2014Q2 from "@/assets/file/quarterly/10Q 2014-Q2.pdf";
+import quarterlyPdf2014Q1 from "@/assets/file/quarterly/10Q 2014-Q1.pdf";
+import quarterlyPdf2013Q3 from "@/assets/file/quarterly/10Q 2013-Q3.pdf";
+import quarterlyPdf2013Q2 from "@/assets/file/quarterly/10Q 2013-Q2.pdf";
+import quarterlyPdf2013Q1 from "@/assets/file/quarterly/10Q 2013-Q1.pdf";
+import quarterlyPdf2012Q3 from "@/assets/file/quarterly/10Q 2012-Q3.pdf";
+import quarterlyPdf2012Q2 from "@/assets/file/quarterly/10Q 2012-Q2.pdf";
+import quarterlyPdf2012Q1 from "@/assets/file/quarterly/10Q 2012-Q1.pdf";
+import quarterlyPdf2011Q3 from "@/assets/file/quarterly/10Q 2011-Q3.pdf";
+import quarterlyPdf2011Q2 from "@/assets/file/quarterly/10Q 2011-Q2.pdf";
+import quarterlyPdf2011Q1 from "@/assets/file/quarterly/10Q 2011-Q1.pdf";
+import quarterlyPdf2010Q3 from "@/assets/file/quarterly/10Q 2010-Q3.pdf";
+import quarterlyPdf2010Q2 from "@/assets/file/quarterly/10Q 2010-Q2.pdf";
+import quarterlyPdf2010Q1 from "@/assets/file/quarterly/10Q 2010-Q1.pdf";
+import quarterlyPdf2009Q3 from "@/assets/file/quarterly/10Q 2009-Q3.pdf";
+
+const { t } = useI18n();
+const searchQuery = ref("");
+
+const state = reactive({
+  list: [
+    {
+      title: "2024 Q3 Quarterly Results",
+      description: "Third Quarter 2024 Financial Results",
+      url: quarterlyPdf2024Q3,
+    },
+    {
+      title: "2024 Q2 Quarterly Results",
+      description: "Second Quarter 2024 Financial Results",
+      url: quarterlyPdf2024Q2,
+    },
+    {
+      title: "2024 Q1 Quarterly Results",
+      description: "First Quarter 2024 Financial Results",
+      url: quarterlyPdf2024Q1,
+    },
+    {
+      title: "2023 Q3 Quarterly Results",
+      description: "Third Quarter 2023 Financial Results",
+      url: quarterlyPdf2023Q3,
+    },
+    {
+      title: "2023 Q2 Quarterly Results",
+      description: "Second Quarter 2023 Financial Results",
+      url: quarterlyPdf2023Q2,
+    },
+    {
+      title: "2023 Q1 Quarterly Results",
+      description: "First Quarter 2023 Financial Results",
+      url: quarterlyPdf2023Q1,
+    },
+    {
+      title: "2022 Q3 Quarterly Results",
+      description: "Third Quarter 2022 Financial Results",
+      url: quarterlyPdf2022Q3,
+    },
+    {
+      title: "2022 Q2 Quarterly Results",
+      description: "Second Quarter 2022 Financial Results",
+      url: quarterlyPdf2022Q2,
+    },
+    {
+      title: "2022 Q1 Quarterly Results",
+      description: "First Quarter 2022 Financial Results",
+      url: quarterlyPdf2022Q1,
+    },
+    {
+      title: "2021 Q3 Quarterly Results",
+      description: "Third Quarter 2021 Financial Results",
+      url: quarterlyPdf2021Q3,
+    },
+    {
+      title: "2021 Q2 Quarterly Results",
+      description: "Second Quarter 2021 Financial Results",
+      url: quarterlyPdf2021Q2,
+    },
+    {
+      title: "2021 Q1 Quarterly Results",
+      description: "First Quarter 2021 Financial Results",
+      url: quarterlyPdf2021Q1,
+    },
+    {
+      title: "2020 Q3 Quarterly Results",
+      description: "Third Quarter 2020 Financial Results",
+      url: quarterlyPdf2020Q3,
+    },
+    {
+      title: "2020 Q2 Quarterly Results",
+      description: "Second Quarter 2020 Financial Results",
+      url: quarterlyPdf2020Q2,
+    },
+    {
+      title: "2020 Q1 Quarterly Results",
+      description: "First Quarter 2020 Financial Results",
+      url: quarterlyPdf2020Q1,
+    },
+    {
+      title: "2019 Q3 Quarterly Results",
+      description: "Third Quarter 2019 Financial Results",
+      url: quarterlyPdf2019Q3,
+    },
+    {
+      title: "2019 Q2 Quarterly Results",
+      description: "Second Quarter 2019 Financial Results",
+      url: quarterlyPdf2019Q2,
+    },
+    {
+      title: "2019 Q1 Quarterly Results",
+      description: "First Quarter 2019 Financial Results",
+      url: quarterlyPdf2019Q1,
+    },
+    {
+      title: "2018 Q3 Quarterly Results",
+      description: "Third Quarter 2018 Financial Results",
+      url: quarterlyPdf2018Q3,
+    },
+    {
+      title: "2018 Q2 Quarterly Results",
+      description: "Second Quarter 2018 Financial Results",
+      url: quarterlyPdf2018Q2,
+    },
+    {
+      title: "2018 Q1 Quarterly Results",
+      description: "First Quarter 2018 Financial Results",
+      url: quarterlyPdf2018Q1,
+    },
+    {
+      title: "2017 Q3 Quarterly Results",
+      description: "Third Quarter 2017 Financial Results",
+      url: quarterlyPdf2017Q3,
+    },
+    {
+      title: "2017 Q2 Quarterly Results",
+      description: "Second Quarter 2017 Financial Results",
+      url: quarterlyPdf2017Q2,
+    },
+    {
+      title: "2017 Q1 Quarterly Results",
+      description: "First Quarter 2017 Financial Results",
+      url: quarterlyPdf2017Q1,
+    },
+    {
+      title: "2016 Q3 Quarterly Results",
+      description: "Third Quarter 2016 Financial Results",
+      url: quarterlyPdf2016Q3,
+    },
+    {
+      title: "2016 Q2 Quarterly Results",
+      description: "Second Quarter 2016 Financial Results",
+      url: quarterlyPdf2016Q2,
+    },
+    {
+      title: "2016 Q1 Quarterly Results",
+      description: "First Quarter 2016 Financial Results",
+      url: quarterlyPdf2016Q1,
+    },
+    {
+      title: "2015 Q3 Quarterly Results",
+      description: "Third Quarter 2015 Financial Results",
+      url: quarterlyPdf2015Q3,
+    },
+    {
+      title: "2015 Q2 Quarterly Results",
+      description: "Second Quarter 2015 Financial Results",
+      url: quarterlyPdf2015Q2,
+    },
+    {
+      title: "2015 Q1 Quarterly Results",
+      description: "First Quarter 2015 Financial Results",
+      url: quarterlyPdf2015Q1,
+    },
+    {
+      title: "2014 Q3 Quarterly Results",
+      description: "Third Quarter 2014 Financial Results",
+      url: quarterlyPdf2014Q3,
+    },
+    {
+      title: "2014 Q2 Quarterly Results",
+      description: "Second Quarter 2014 Financial Results",
+      url: quarterlyPdf2014Q2,
+    },
+    {
+      title: "2014 Q1 Quarterly Results",
+      description: "First Quarter 2014 Financial Results",
+      url: quarterlyPdf2014Q1,
+    },
+    {
+      title: "2013 Q3 Quarterly Results",
+      description: "Third Quarter 2013 Financial Results",
+      url: quarterlyPdf2013Q3,
+    },
+    {
+      title: "2013 Q2 Quarterly Results",
+      description: "Second Quarter 2013 Financial Results",
+      url: quarterlyPdf2013Q2,
+    },
+    {
+      title: "2013 Q1 Quarterly Results",
+      description: "First Quarter 2013 Financial Results",
+      url: quarterlyPdf2013Q1,
+    },
+    {
+      title: "2012 Q3 Quarterly Results",
+      description: "Third Quarter 2012 Financial Results",
+      url: quarterlyPdf2012Q3,
+    },
+    {
+      title: "2012 Q2 Quarterly Results",
+      description: "Second Quarter 2012 Financial Results",
+      url: quarterlyPdf2012Q2,
+    },
+    {
+      title: "2012 Q1 Quarterly Results",
+      description: "First Quarter 2012 Financial Results",
+      url: quarterlyPdf2012Q1,
+    },
+    {
+      title: "2011 Q3 Quarterly Results",
+      description: "Third Quarter 2011 Financial Results",
+      url: quarterlyPdf2011Q3,
+    },
+    {
+      title: "2011 Q2 Quarterly Results",
+      description: "Second Quarter 2011 Financial Results",
+      url: quarterlyPdf2011Q2,
+    },
+    {
+      title: "2011 Q1 Quarterly Results",
+      description: "First Quarter 2011 Financial Results",
+      url: quarterlyPdf2011Q1,
+    },
+    {
+      title: "2010 Q3 Quarterly Results",
+      description: "Third Quarter 2010 Financial Results",
+      url: quarterlyPdf2010Q3,
+    },
+    {
+      title: "2010 Q2 Quarterly Results",
+      description: "Second Quarter 2010 Financial Results",
+      url: quarterlyPdf2010Q2,
+    },
+    {
+      title: "2010 Q1 Quarterly Results",
+      description: "First Quarter 2010 Financial Results",
+      url: quarterlyPdf2010Q1,
+    },
+    {
+      title: "2009 Q3 Quarterly Results",
+      description: "Third Quarter 2009 Financial Results",
+      url: quarterlyPdf2009Q3,
+    },
+  ],
+});
+const filteredList = computed(() => {
+  if (!searchQuery.value) return state.list;
+  const query = searchQuery.value.toLowerCase();
+  return state.list.filter(
+    (item) =>
+      item.title.toLowerCase().includes(query) ||
+      item.description.toLowerCase().includes(query)
+  );
+});
+
+const handleSearch = () => {
+  // 搜索处理逻辑
+  console.log("搜索:", searchQuery.value);
+};
+
+const handleDownload = (url) => {
+  // 下载处理逻辑
+  console.log("下载:", url);
+
+  // 创建一个隐藏的a元素
+  const link = document.createElement("a");
+  link.href = url;
+
+  // 修复文件名提取逻辑
+  let fileName = url.split("/").pop();
+  // 移除可能存在的查询参数
+  if (fileName.includes("?") || fileName.includes("_t=")) {
+    fileName = fileName.split(/[?_]/)[0];
+  }
+  link.download = fileName;
+  link.target = "_blank";
+
+  // 对于移动设备，我们需要特殊处理
+  const isMobile =
+    /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+      navigator.userAgent
+    );
+
+  if (isMobile) {
+    // 在移动设备上，可能需要使用fetch下载文件并创建blob
+    fetch(url)
+      .then((response) => response.blob())
+      .then((blob) => {
+        const objectUrl = URL.createObjectURL(blob);
+        link.href = objectUrl;
+        document.body.appendChild(link);
+        link.click();
+
+        // 清理
+        setTimeout(() => {
+          document.body.removeChild(link);
+          URL.revokeObjectURL(objectUrl);
+        }, 100);
+      })
+      .catch((error) => {
+        console.error("下载文件时出错:", error);
+        // 如果fetch失败，回退到window.open
+        window.open(url, "_blank");
+      });
+  } else {
+    // 桌面设备上直接点击链接
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  }
+};
+</script>
+<style scoped lang="scss">
+.page-title {
+  font-size: 85px;
+  font-weight: bold;
+  color: #333;
+  text-align: center;
+  margin-top: 8px;
+}
+
+.search-container {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-bottom: 20px;
+}
+
+.search-input {
+  width: 100%;
+  padding: 10px 15px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  outline: none;
+  transition: border-color 0.3s;
+}
+
+.search-input:focus {
+  border-color: #2979ff;
+  box-shadow: 0 0 0 2px rgba(41, 121, 255, 0.2);
+}
+
+.search-button {
+  width: 100%;
+  padding: 10px 0;
+  background: #2979ff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.3s;
+}
+
+.search-button:hover {
+  background: #1e6de8;
+}
+
+.results-list {
+  margin-top: 46px;
+  max-height: 3000px;
+  overflow-y: auto;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
+  background-color: #fff;
+}
+
+.result-item {
+  display: flex;
+  justify-content: space-between;
+  padding: 46px;
+  border-bottom: 1px solid #f0f0f0;
+  transition: background-color 0.2s;
+
+  &:hover {
+    background-color: #f9fafc;
+  }
+
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.result-title {
+  color: #2979ff;
+  text-decoration: none;
+  display: block;
+  margin-bottom: 8px;
+  font-size: 50px;
+  font-weight: 600;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.result-description {
+  color: #666;
+  margin: 0;
+  font-size: 40px;
+  line-height: 1.4;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+}
+
+.pdf-icon {
+  margin-left: 16px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  .pdf-link {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-decoration: none;
+    color: #ff5252;
+    font-size: 40px;
+
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+}
+</style>

src/views/financialinformation/secfilings/index.vue

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

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

@@ -0,0 +1,302 @@
+<template>
+  <div class="page-container">
+    <div class="financials-container">
+      <!-- 标题 -->
+      <div class="financials-title">
+        {{ t("financialinformation.secfilings.title") }}
+      </div>
+
+      <!-- 公司财务概览 -->
+      <section class="section">
+        <div class="section-title">
+          {{ t("financialinformation.secfilings.overview.title") }}
+        </div>
+        <p
+          class="overview-text"
+          v-html="t('financialinformation.secfilings.overview.desc')"
+        ></p>
+      </section>
+
+      <!-- 年度报告 -->
+      <section class="section">
+        <div class="section-title">
+          {{ t("financialinformation.secfilings.annual_reports.title") }}
+        </div>
+
+        <!-- 报告表格 -->
+        <div class="reports-table">
+          <div class="table-header">
+            <div class="column file-name">
+              {{
+                t("financialinformation.secfilings.annual_reports.file_name")
+              }}
+            </div>
+            <div class="column date">
+              {{ t("financialinformation.secfilings.annual_reports.date") }}
+            </div>
+            <div class="column download"></div>
+          </div>
+
+          <!-- 报告列表 -->
+          <div class="reports-list">
+            <div
+              class="table-row"
+              v-for="(report, index) in annualReports"
+              :key="index"
+            >
+              <div class="column file-name">{{ report.fileName }}</div>
+              <div class="column date">{{ report.date }}</div>
+              <div class="column download">
+                <a :href="report.downloadUrl" class="download-link">{{
+                  t("financialinformation.secfilings.annual_reports.view")
+                }}</a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- SEC文件 -->
+      <section class="section">
+        <div class="section-title">
+          {{ t("financialinformation.secfilings.sec.title") }}
+        </div>
+        <p class="sec-text">
+          {{ t("financialinformation.secfilings.sec.desc") }}
+          <a
+            href="https://www.sec.gov/cgi-bin/browse-edgar?company=FiEE&match=starts-with&filenum=&State=&Country=&SIC=&myowner=exclude&action=getcompany"
+            class="link"
+            >{{ t("financialinformation.secfilings.sec.click_here") }}</a
+          >.
+        </p>
+      </section>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
+// 年度报告数据
+const annualReports = ref([
+  {
+    fileName: "2024 Annual Report",
+    date: "April 10, 2025",
+    downloadUrl:
+      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912625002538/fieeinc_10k.htm",
+  },
+  {
+    fileName: "2023 Annual Report",
+    date: "April 12, 2024",
+    downloadUrl:
+      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912624002449/miniminc_10k.htm",
+  },
+  {
+    fileName: "2022 Annual Report",
+    date: "March 31, 2023",
+    downloadUrl:
+      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000149315223010335/form10-k.htm",
+  },
+  {
+    fileName: "2021 Annual Report",
+    date: "March 31, 2022",
+    downloadUrl:
+      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000149315222008365/form10-k.htm",
+  },
+  {
+    fileName: "2020 Annual Report",
+    date: "April 13, 2021",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000165495421004133/zmtp_10k.htm",
+  },
+  {
+    fileName: "2019 Annual Report",
+    date: "April 15, 2020",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000165495420004069/zmtp_10k.htm",
+  },
+  {
+    fileName: "2018 Annual Report",
+    date: "April 1, 2019",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000165495419003878/zmtp_10k.htm",
+  },
+  {
+    fileName: "2017 Annual Report",
+    date: "March 30, 2018",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000165495418003402/zmtp_10k.htm",
+  },
+  {
+    fileName: "2016 Annual Report",
+    date: "March 22, 2017",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000165495417002279/zmtp_10k.htm",
+  },
+  {
+    fileName: "2015 Annual Report",
+    date: "March 15, 2016",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000135448816006596/zmtp_10k.htm",
+  },
+  {
+    fileName: "2014 Annual Report",
+    date: "March 24, 2015",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000135448815001308/zmtp_10k.htm",
+  },
+  {
+    fileName: "2013 Annual Report",
+    date: "March 31, 2014",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000135448814001518/zmpt_10k.htm",
+  },
+  {
+    fileName: "2012 Annual Report",
+    date: "March 29, 2013",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000135448813001584/zmtp_10k.htm",
+  },
+  {
+    fileName: "2011 Annual Report",
+    date: "March 30, 2012",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000135448812001548/zoom_10k.htm",
+  },
+  {
+    fileName: "2010 Annual Report",
+    date: "March 29, 2011",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000135448811000969/zmtp_10k.htm",
+  },
+  {
+    fileName: "2009 Annual Report",
+    date: "March 31, 2010",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000135448810001043/zmtp_10k.htm",
+  },
+]);
+</script>
+
+<style scoped lang="scss">
+.page-container {
+  background-image: url("@/assets/image/bg.png");
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+.financials-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.financials-title {
+  font-size: 40px;
+  text-align: center;
+  margin-bottom: 60px;
+  color: #333;
+}
+
+.section {
+  margin-bottom: 60px;
+}
+
+.section-title {
+  font-size: 18px;
+  margin-bottom: 20px;
+  color: #333;
+}
+
+.overview-text {
+  font-size: 16px;
+  line-height: 1.6;
+  color: #333;
+  margin-bottom: 30px;
+}
+
+.tabs {
+  display: flex;
+  margin-bottom: 20px;
+}
+
+.tab {
+  padding: 10px 20px;
+  font-weight: bold;
+  cursor: pointer;
+  border-bottom: 2px solid transparent;
+
+  &.active {
+    border-bottom: 2px solid #333;
+  }
+}
+
+.reports-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.table-header {
+  display: flex;
+  padding: 10px 0;
+  border-bottom: 1px solid #ccc;
+  font-weight: bold;
+  justify-content: space-between;
+}
+
+.table-row {
+  display: flex;
+  padding: 15px 0;
+  border-bottom: 1px solid #eee;
+  align-items: center;
+  justify-content: space-between;
+}
+.reports-list {
+  // max-height: 600px;
+  // overflow-y: auto;
+}
+.column {
+  &.file-name {
+    width: 25%;
+  }
+  &.date {
+    width: 25%;
+  }
+
+  &.download {
+    width: 25%;
+    text-align: right;
+    margin-right: 50px;
+  }
+}
+
+.pdf-icon {
+  width: 36px;
+  height: 36px;
+}
+
+.download-link {
+  color: #0078d7;
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.sec-text {
+  font-size: 16px;
+  line-height: 1.6;
+}
+
+.link {
+  color: #f00;
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+</style>

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

@@ -64,7 +64,7 @@
         <p class="sec-text">
           {{ t("financialinformation.secfilings.sec.desc") }}
           <a
-            href="https://www.sec.gov/cgi-bin/browse-edgar?company=&CIK=NCTY&filenum=&State=&SIC=&owner=include&action=getcompany"
+            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
           >.
@@ -79,101 +79,100 @@ import { ref } from "vue";
 import { useI18n } from "vue-i18n";
 
 const { t } = useI18n();
-
 // 年度报告数据
 const annualReports = ref([
   {
-    fileName: "2025 Annual Report",
+    fileName: "2024 Annual Report",
     date: "April 10, 2025",
     downloadUrl:
       "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912625002538/fieeinc_10k.htm",
   },
   {
-    fileName: "2024 Annual Report",
+    fileName: "2023 Annual Report",
     date: "April 12, 2024",
     downloadUrl:
       "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912624002449/miniminc_10k.htm",
   },
   {
-    fileName: "2023 Annual Report",
+    fileName: "2022 Annual Report",
     date: "March 31, 2023",
     downloadUrl:
       "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000149315223010335/form10-k.htm",
   },
   {
-    fileName: "2022 Annual Report",
+    fileName: "2021 Annual Report",
     date: "March 31, 2022",
     downloadUrl:
       "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000149315222008365/form10-k.htm",
   },
   {
-    fileName: "2021 Annual Report",
+    fileName: "2020 Annual Report",
     date: "April 13, 2021",
     downloadUrl:
       "https://www.sec.gov/Archives/edgar/data/1467761/000165495421004133/zmtp_10k.htm",
   },
   {
-    fileName: "2020 Annual Report",
+    fileName: "2019 Annual Report",
     date: "April 15, 2020",
     downloadUrl:
       "https://www.sec.gov/Archives/edgar/data/1467761/000165495420004069/zmtp_10k.htm",
   },
   {
-    fileName: "2019 Annual Report",
+    fileName: "2018 Annual Report",
     date: "April 1, 2019",
     downloadUrl:
       "https://www.sec.gov/Archives/edgar/data/1467761/000165495419003878/zmtp_10k.htm",
   },
   {
-    fileName: "2018 Annual Report",
+    fileName: "2017 Annual Report",
     date: "March 30, 2018",
     downloadUrl:
       "https://www.sec.gov/Archives/edgar/data/1467761/000165495418003402/zmtp_10k.htm",
   },
   {
-    fileName: "2017 Annual Report",
+    fileName: "2016 Annual Report",
     date: "March 22, 2017",
     downloadUrl:
       "https://www.sec.gov/Archives/edgar/data/1467761/000165495417002279/zmtp_10k.htm",
   },
   {
-    fileName: "2016 Annual Report",
+    fileName: "2015 Annual Report",
     date: "March 15, 2016",
     downloadUrl:
       "https://www.sec.gov/Archives/edgar/data/1467761/000135448816006596/zmtp_10k.htm",
   },
   {
-    fileName: "2015 Annual Report",
+    fileName: "2014 Annual Report",
     date: "March 24, 2015",
     downloadUrl:
       "https://www.sec.gov/Archives/edgar/data/1467761/000135448815001308/zmtp_10k.htm",
   },
   {
-    fileName: "2014 Annual Report",
+    fileName: "2013 Annual Report",
     date: "March 31, 2014",
     downloadUrl:
       "https://www.sec.gov/Archives/edgar/data/1467761/000135448814001518/zmpt_10k.htm",
   },
   {
-    fileName: "2013 Annual Report",
+    fileName: "2012 Annual Report",
     date: "March 29, 2013",
     downloadUrl:
       "https://www.sec.gov/Archives/edgar/data/1467761/000135448813001584/zmtp_10k.htm",
   },
   {
-    fileName: "2012 Annual Report",
+    fileName: "2011 Annual Report",
     date: "March 30, 2012",
     downloadUrl:
       "https://www.sec.gov/Archives/edgar/data/1467761/000135448812001548/zoom_10k.htm",
   },
   {
-    fileName: "2011 Annual Report",
+    fileName: "2010 Annual Report",
     date: "March 29, 2011",
     downloadUrl:
       "https://www.sec.gov/Archives/edgar/data/1467761/000135448811000969/zmtp_10k.htm",
   },
   {
-    fileName: "2010 Annual Report",
+    fileName: "2009 Annual Report",
     date: "March 31, 2010",
     downloadUrl:
       "https://www.sec.gov/Archives/edgar/data/1467761/000135448810001043/zmtp_10k.htm",

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

@@ -64,7 +64,7 @@
         <p class="sec-text">
           {{ t("financialinformation.secfilings.sec.desc") }}
           <a
-            href="https://www.sec.gov/cgi-bin/browse-edgar?company=&CIK=NCTY&filenum=&State=&SIC=&owner=include&action=getcompany"
+            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
           >.
@@ -83,97 +83,97 @@ const { t } = useI18n();
 // 年度报告数据
 const annualReports = ref([
   {
-    fileName: "2025 Annual Report",
+    fileName: "2024 Annual Report",
     date: "April 10, 2025",
     downloadUrl:
       "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912625002538/fieeinc_10k.htm",
   },
   {
-    fileName: "2024 Annual Report",
+    fileName: "2023 Annual Report",
     date: "April 12, 2024",
     downloadUrl:
       "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912624002449/miniminc_10k.htm",
   },
   {
-    fileName: "2023 Annual Report",
+    fileName: "2022 Annual Report",
     date: "March 31, 2023",
     downloadUrl:
       "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000149315223010335/form10-k.htm",
   },
   {
-    fileName: "2022 Annual Report",
+    fileName: "2021 Annual Report",
     date: "March 31, 2022",
     downloadUrl:
       "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000149315222008365/form10-k.htm",
   },
   {
-    fileName: "2021 Annual Report",
+    fileName: "2020 Annual Report",
     date: "April 13, 2021",
     downloadUrl:
       "https://www.sec.gov/Archives/edgar/data/1467761/000165495421004133/zmtp_10k.htm",
   },
   {
-    fileName: "2020 Annual Report",
+    fileName: "2019 Annual Report",
     date: "April 15, 2020",
     downloadUrl:
       "https://www.sec.gov/Archives/edgar/data/1467761/000165495420004069/zmtp_10k.htm",
   },
   {
-    fileName: "2019 Annual Report",
+    fileName: "2018 Annual Report",
     date: "April 1, 2019",
     downloadUrl:
       "https://www.sec.gov/Archives/edgar/data/1467761/000165495419003878/zmtp_10k.htm",
   },
   {
-    fileName: "2018 Annual Report",
+    fileName: "2017 Annual Report",
     date: "March 30, 2018",
     downloadUrl:
       "https://www.sec.gov/Archives/edgar/data/1467761/000165495418003402/zmtp_10k.htm",
   },
   {
-    fileName: "2017 Annual Report",
+    fileName: "2016 Annual Report",
     date: "March 22, 2017",
     downloadUrl:
       "https://www.sec.gov/Archives/edgar/data/1467761/000165495417002279/zmtp_10k.htm",
   },
   {
-    fileName: "2016 Annual Report",
+    fileName: "2015 Annual Report",
     date: "March 15, 2016",
     downloadUrl:
       "https://www.sec.gov/Archives/edgar/data/1467761/000135448816006596/zmtp_10k.htm",
   },
   {
-    fileName: "2015 Annual Report",
+    fileName: "2014 Annual Report",
     date: "March 24, 2015",
     downloadUrl:
       "https://www.sec.gov/Archives/edgar/data/1467761/000135448815001308/zmtp_10k.htm",
   },
   {
-    fileName: "2014 Annual Report",
+    fileName: "2013 Annual Report",
     date: "March 31, 2014",
     downloadUrl:
       "https://www.sec.gov/Archives/edgar/data/1467761/000135448814001518/zmpt_10k.htm",
   },
   {
-    fileName: "2013 Annual Report",
+    fileName: "2012 Annual Report",
     date: "March 29, 2013",
     downloadUrl:
       "https://www.sec.gov/Archives/edgar/data/1467761/000135448813001584/zmtp_10k.htm",
   },
   {
-    fileName: "2012 Annual Report",
+    fileName: "2011 Annual Report",
     date: "March 30, 2012",
     downloadUrl:
       "https://www.sec.gov/Archives/edgar/data/1467761/000135448812001548/zoom_10k.htm",
   },
   {
-    fileName: "2011 Annual Report",
+    fileName: "2010 Annual Report",
     date: "March 29, 2011",
     downloadUrl:
       "https://www.sec.gov/Archives/edgar/data/1467761/000135448811000969/zmtp_10k.htm",
   },
   {
-    fileName: "2010 Annual Report",
+    fileName: "2009 Annual Report",
     date: "March 31, 2010",
     downloadUrl:
       "https://www.sec.gov/Archives/edgar/data/1467761/000135448810001043/zmtp_10k.htm",

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

@@ -0,0 +1,302 @@
+<template>
+  <div class="page-container">
+    <div class="financials-container">
+      <!-- 标题 -->
+      <div class="financials-title">
+        {{ t("financialinformation.secfilings.title") }}
+      </div>
+
+      <!-- 公司财务概览 -->
+      <section class="section">
+        <div class="section-title">
+          {{ t("financialinformation.secfilings.overview.title") }}
+        </div>
+        <p
+          class="overview-text"
+          v-html="t('financialinformation.secfilings.overview.desc')"
+        ></p>
+      </section>
+
+      <!-- 年度报告 -->
+      <section class="section">
+        <div class="section-title">
+          {{ t("financialinformation.secfilings.annual_reports.title") }}
+        </div>
+
+        <!-- 报告表格 -->
+        <div class="reports-table">
+          <div class="table-header">
+            <div class="column file-name">
+              {{
+                t("financialinformation.secfilings.annual_reports.file_name")
+              }}
+            </div>
+            <div class="column date">
+              {{ t("financialinformation.secfilings.annual_reports.date") }}
+            </div>
+            <div class="column download"></div>
+          </div>
+
+          <!-- 报告列表 -->
+          <div class="reports-list">
+            <div
+              class="table-row"
+              v-for="(report, index) in annualReports"
+              :key="index"
+            >
+              <div class="column file-name">{{ report.fileName }}</div>
+              <div class="column date">{{ report.date }}</div>
+              <div class="column download">
+                <a :href="report.downloadUrl" class="download-link">{{
+                  t("financialinformation.secfilings.annual_reports.view")
+                }}</a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- SEC文件 -->
+      <section class="section">
+        <div class="section-title">
+          {{ t("financialinformation.secfilings.sec.title") }}
+        </div>
+        <p class="sec-text">
+          {{ t("financialinformation.secfilings.sec.desc") }}
+          <a
+            href="https://www.sec.gov/cgi-bin/browse-edgar?company=FiEE&match=starts-with&filenum=&State=&Country=&SIC=&myowner=exclude&action=getcompany"
+            class="link"
+            >{{ t("financialinformation.secfilings.sec.click_here") }}</a
+          >.
+        </p>
+      </section>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
+// 年度报告数据
+const annualReports = ref([
+  {
+    fileName: "2024 Annual Report",
+    date: "April 10, 2025",
+    downloadUrl:
+      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912625002538/fieeinc_10k.htm",
+  },
+  {
+    fileName: "2023 Annual Report",
+    date: "April 12, 2024",
+    downloadUrl:
+      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912624002449/miniminc_10k.htm",
+  },
+  {
+    fileName: "2022 Annual Report",
+    date: "March 31, 2023",
+    downloadUrl:
+      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000149315223010335/form10-k.htm",
+  },
+  {
+    fileName: "2021 Annual Report",
+    date: "March 31, 2022",
+    downloadUrl:
+      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000149315222008365/form10-k.htm",
+  },
+  {
+    fileName: "2020 Annual Report",
+    date: "April 13, 2021",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000165495421004133/zmtp_10k.htm",
+  },
+  {
+    fileName: "2019 Annual Report",
+    date: "April 15, 2020",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000165495420004069/zmtp_10k.htm",
+  },
+  {
+    fileName: "2018 Annual Report",
+    date: "April 1, 2019",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000165495419003878/zmtp_10k.htm",
+  },
+  {
+    fileName: "2017 Annual Report",
+    date: "March 30, 2018",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000165495418003402/zmtp_10k.htm",
+  },
+  {
+    fileName: "2016 Annual Report",
+    date: "March 22, 2017",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000165495417002279/zmtp_10k.htm",
+  },
+  {
+    fileName: "2015 Annual Report",
+    date: "March 15, 2016",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000135448816006596/zmtp_10k.htm",
+  },
+  {
+    fileName: "2014 Annual Report",
+    date: "March 24, 2015",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000135448815001308/zmtp_10k.htm",
+  },
+  {
+    fileName: "2013 Annual Report",
+    date: "March 31, 2014",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000135448814001518/zmpt_10k.htm",
+  },
+  {
+    fileName: "2012 Annual Report",
+    date: "March 29, 2013",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000135448813001584/zmtp_10k.htm",
+  },
+  {
+    fileName: "2011 Annual Report",
+    date: "March 30, 2012",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000135448812001548/zoom_10k.htm",
+  },
+  {
+    fileName: "2010 Annual Report",
+    date: "March 29, 2011",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000135448811000969/zmtp_10k.htm",
+  },
+  {
+    fileName: "2009 Annual Report",
+    date: "March 31, 2010",
+    downloadUrl:
+      "https://www.sec.gov/Archives/edgar/data/1467761/000135448810001043/zmtp_10k.htm",
+  },
+]);
+</script>
+
+<style scoped lang="scss">
+.page-container {
+  background-image: url("@/assets/image/bg.png");
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+.financials-container {
+  max-width: calc(100% - 300px);
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.financials-title {
+  font-size: 85px;
+  text-align: center;
+  margin-bottom: 60px;
+  color: #333;
+}
+
+.section {
+  margin-bottom: 60px;
+}
+
+.section-title {
+  font-size: 50px;
+  margin-bottom: 20px;
+  color: #333;
+}
+
+.overview-text {
+  font-size: 40px;
+  line-height: 1.6;
+  color: #333;
+  margin-bottom: 30px;
+}
+
+.tabs {
+  display: flex;
+  margin-bottom: 20px;
+}
+
+.tab {
+  padding: 10px 20px;
+  font-weight: bold;
+  cursor: pointer;
+  border-bottom: 2px solid transparent;
+
+  &.active {
+    border-bottom: 2px solid #333;
+  }
+}
+
+.reports-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.table-header {
+  display: flex;
+  padding: 10px 0;
+  border-bottom: 1px solid #ccc;
+  font-weight: bold;
+  justify-content: space-between;
+}
+
+.table-row {
+  display: flex;
+  padding: 15px 0;
+  border-bottom: 1px solid #eee;
+  align-items: center;
+  justify-content: space-between;
+}
+.reports-list {
+  // max-height: 600px;
+  // overflow-y: auto;
+}
+.column {
+  &.file-name {
+    width: 25%;
+  }
+  &.date {
+    width: 25%;
+  }
+
+  &.download {
+    width: 25%;
+    text-align: right;
+    margin-right: 50px;
+  }
+}
+
+.pdf-icon {
+  width: 36px;
+  height: 36px;
+}
+
+.download-link {
+  color: #0078d7;
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.sec-text {
+  font-size: 40px;
+  line-height: 1.6;
+}
+
+.link {
+  color: #f00;
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+</style>

src/views/govern/index.vue

@@ -1,14 +1,26 @@
 <script setup>
-import size1920 from "@/views/govern/size1920/index.vue";
-import size375 from "@/views/govern/size375/index.vue";
 import { computed } from "vue";
 import { useWindowSize } from "@vueuse/core";
 
+import size375 from "./size375/index.vue";
+import size768 from "./size768/index.vue";
+import size1440 from "./size1440/index.vue";
+import size1920 from "./size1920/index.vue";
+import { useRouter } from "vue-router";
+import { useI18n } from "vue-i18n";
+
+const router = useRouter();
 const { width } = useWindowSize();
+const { t } = useI18n();
+
 const viewComponent = computed(() => {
   const viewWidth = width.value;
   if (viewWidth <= 450) {
     return size375;
+  } else if (viewWidth <= 1100) {
+    return size768;
+  } else if (viewWidth <= 1500) {
+    return size1440;
   } else if (viewWidth <= 1920 || viewWidth > 1920) {
     return size1920;
   }

src/views/govern/size1440/index.vue

@@ -0,0 +1,184 @@
+<template>
+  <div class="title mb-[50px] text-center">
+    <div style="font-size: 40px; margin-top: 60px">Corporate Governance</div>
+    <div class="w-24 h-1 bg-[#895bff] mx-auto"></div>
+  </div>
+
+  <div
+    style="padding: 30px 150px"
+    class="grid grid-cols-1 md:grid-cols-2 gap-8"
+  >
+    <div
+      v-for="(item, index) in state.list"
+      :key="index"
+      class="governance-card relative overflow-hidden bg-white rounded-lg shadow-xl hover:shadow-2xl transition-all duration-500 border border-gray-100 transform hover:-translate-y-2"
+    >
+      <div
+        class="absolute inset-0 bg-gradient-to-r from-[#f5f0ff] to-white opacity-80"
+      ></div>
+      <div class="relative p-8 flex flex-col h-full">
+        <div class="flex items-start mb-6">
+          <div
+            class="bg-[#895bff] p-3 rounded-lg shadow-md mr-6 transform hover:rotate-6 transition-transform duration-300 governance-icon"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="h-8 w-8 text-white"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+              />
+            </svg>
+          </div>
+          <div>
+            <h1 style="font-size: 18px" class="">
+              {{ item.title }}
+            </h1>
+          </div>
+        </div>
+        <div class="mt-auto">
+          <a
+            :href="item.url"
+            class="inline-flex items-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-[#895bff] hover:bg-[#7a4de6] transition-all duration-300 transform hover:scale-105 shadow-md"
+            target="_blank"
+            style="font-size: 16px"
+          >
+            View Document
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="ml-3 -mr-1 h-5 w-5"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M9 5l7 7-7 7"
+              />
+            </svg>
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { reactive } from "vue";
+import quarterlyPdfone from "@/assets/file/AUDIT COMMITTEE CHARTER.pdf";
+import quarterlyPdftwo from "@/assets/file/CODE OF BUSINESS CONDUCT AND ETHICS.pdf";
+
+import quarterlyPdfthree from "@/assets/file/COMPENSATION COMMITTEE CHARTER.pdf";
+
+import quarterlyPdffour from "@/assets/file/NOMINATING AND CORPORATE GOVERNANCE COMMITTEE CHARTER.pdf";
+
+const state = reactive({
+  list: [
+    {
+      title: "AUDIT COMMITTEE CHARTER",
+      description:
+        "Defines the purpose, composition, and responsibilities of the Audit Committee in overseeing financial reporting and disclosure.",
+      url: quarterlyPdfone,
+      date: "Last updated: March 2025",
+    },
+    {
+      title: "CODE OF BUSINESS CONDUCT AND ETHICS",
+      description:
+        "Establishes the ethical standards and legal compliance expectations for all directors, officers and employees.",
+      url: quarterlyPdftwo,
+      date: "Last updated: January 2025",
+    },
+    {
+      title: "COMPENSATION COMMITTEE CHARTER",
+      description:
+        "Outlines the duties and responsibilities for overseeing executive compensation and benefit plans.",
+      url: quarterlyPdfthree,
+      date: "Last updated: February 2025",
+    },
+    {
+      title: "NOMINATING AND CORPORATE GOVERNANCE COMMITTEE CHARTER",
+      description:
+        "Provides the framework for director nominations and corporate governance matters.",
+      url: quarterlyPdffour,
+      date: "Last updated: April 2025",
+    },
+  ],
+});
+</script>
+
+<style scoped lang="scss">
+/* 标题样式 */
+.title h1 {
+  font-family: "Georgia", serif;
+  position: relative;
+
+  &::after {
+    content: "";
+    position: absolute;
+    bottom: -14px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 80px;
+    height: 3px;
+    background: #895bff;
+    border-radius: 3px;
+    transition: width 0.3s ease;
+  }
+
+  &:hover::after {
+    width: 120px;
+  }
+}
+
+/* 卡片图标动画 */
+.governance-icon {
+  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+
+.governance-card:hover .governance-icon {
+  animation: float 2s ease-in-out infinite;
+  box-shadow: 0 10px 20px rgba(137, 91, 255, 0.3) !important;
+}
+
+/* 卡片背景渐变效果 */
+.governance-card::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+    135deg,
+    rgba(137, 91, 255, 0.1) 0%,
+    rgba(0, 0, 0, 0) 50%
+  );
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.governance-card:hover::before {
+  opacity: 1;
+}
+
+/* 浮动动画 */
+@keyframes float {
+  0% {
+    transform: translateY(0px) rotate(0deg);
+  }
+  50% {
+    transform: translateY(-5px) rotate(3deg);
+  }
+  100% {
+    transform: translateY(0px) rotate(0deg);
+  }
+}
+</style>

src/views/govern/size1920/index.vue

@@ -1,12 +1,13 @@
 <template>
   <div class="title mb-[50px] text-center">
-    <h1 class="text-5xl font-light text-gray-800 mb-4 tracking-tight">
-      Corporate Governance
-    </h1>
+    <div style="font-size: 40px; margin-top: 60px">Corporate Governance</div>
     <div class="w-24 h-1 bg-[#895bff] mx-auto"></div>
   </div>
 
-  <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+  <div
+    style="padding: 30px 150px"
+    class="grid grid-cols-1 md:grid-cols-2 gap-8"
+  >
     <div
       v-for="(item, index) in state.list"
       :key="index"
@@ -36,9 +37,9 @@
             </svg>
           </div>
           <div>
-            <h2 class="text-2xl font-medium text-gray-800 mb-2">
+            <h1 style="font-size: 18px" class="">
               {{ item.title }}
-            </h2>
+            </h1>
           </div>
         </div>
         <div class="mt-auto">
@@ -46,6 +47,7 @@
             :href="item.url"
             class="inline-flex items-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-[#895bff] hover:bg-[#7a4de6] transition-all duration-300 transform hover:scale-105 shadow-md"
             target="_blank"
+            style="font-size: 16px"
           >
             View Document
             <svg
@@ -81,28 +83,28 @@ import quarterlyPdffour from "@/assets/file/NOMINATING AND CORPORATE GOVERNANCE
 const state = reactive({
   list: [
     {
-      title: "Audit Committee Charter",
+      title: "AUDIT COMMITTEE CHARTER",
       description:
         "Defines the purpose, composition, and responsibilities of the Audit Committee in overseeing financial reporting and disclosure.",
       url: quarterlyPdfone,
       date: "Last updated: March 2025",
     },
     {
-      title: "Code of Business Conduct",
+      title: "CODE OF BUSINESS CONDUCT AND ETHICS",
       description:
         "Establishes the ethical standards and legal compliance expectations for all directors, officers and employees.",
       url: quarterlyPdftwo,
       date: "Last updated: January 2025",
     },
     {
-      title: "Compensation Committee Charter",
+      title: "COMPENSATION COMMITTEE CHARTER",
       description:
         "Outlines the duties and responsibilities for overseeing executive compensation and benefit plans.",
       url: quarterlyPdfthree,
       date: "Last updated: February 2025",
     },
     {
-      title: "Nominating & Governance Charter",
+      title: "NOMINATING AND CORPORATE GOVERNANCE COMMITTEE CHARTER",
       description:
         "Provides the framework for director nominations and corporate governance matters.",
       url: quarterlyPdffour,

src/views/govern/size375/index.vue

@@ -36,9 +36,9 @@
             </svg>
           </div>
           <div>
-            <h2 class="text-2xl font-medium text-gray-800 mb-2">
+            <h1 class="text-2xl font-medium text-gray-800 mb-2">
               {{ item.title }}
-            </h2>
+            </h1>
           </div>
         </div>
         <div class="mt-auto">
@@ -71,35 +71,41 @@
 
 <script setup>
 import { reactive } from "vue";
+import quarterlyPdfone from "@/assets/file/AUDIT COMMITTEE CHARTER.pdf";
+import quarterlyPdftwo from "@/assets/file/CODE OF BUSINESS CONDUCT AND ETHICS.pdf";
+
+import quarterlyPdfthree from "@/assets/file/COMPENSATION COMMITTEE CHARTER.pdf";
+
+import quarterlyPdffour from "@/assets/file/NOMINATING AND CORPORATE GOVERNANCE COMMITTEE CHARTER.pdf";
 
 const state = reactive({
   list: [
     {
-      title: "Audit Committee Charter",
+      title: "AUDIT COMMITTEE CHARTER",
       description:
         "Defines the purpose, composition, and responsibilities of the Audit Committee in overseeing financial reporting and disclosure.",
-      url: "/src/assets/file/AUDIT COMMITTEE CHARTER.pdf",
+      url: quarterlyPdfone,
       date: "Last updated: March 2025",
     },
     {
-      title: "Code of Business Conduct",
+      title: "CODE OF BUSINESS CONDUCT AND ETHICS",
       description:
         "Establishes the ethical standards and legal compliance expectations for all directors, officers and employees.",
-      url: "/src/assets/file/CODE OF BUSINESS CONDUCT AND ETHICS.pdf",
+      url: quarterlyPdftwo,
       date: "Last updated: January 2025",
     },
     {
-      title: "Compensation Committee Charter",
+      title: "COMPENSATION COMMITTEE CHARTER",
       description:
         "Outlines the duties and responsibilities for overseeing executive compensation and benefit plans.",
-      url: "/src/assets/file/COMPENSATION COMMITTEE CHARTER.pdf",
+      url: quarterlyPdfthree,
       date: "Last updated: February 2025",
     },
     {
-      title: "Nominating & Governance Charter",
+      title: "NOMINATING AND CORPORATE GOVERNANCE COMMITTEE CHARTER",
       description:
         "Provides the framework for director nominations and corporate governance matters.",
-      url: "/src/assets/file/NOMINATING AND CORPORATE GOVERNANCE COMMITTEE CHARTER.pdf",
+      url: quarterlyPdffour,
       date: "Last updated: April 2025",
     },
   ],

src/views/govern/size768/index.vue

@@ -0,0 +1,182 @@
+<template>
+  <div class="title mb-[50px] text-center">
+    <h1 class="text-5xl font-light text-gray-800 mb-4 tracking-tight">
+      Corporate Governance
+    </h1>
+    <div class="w-24 h-1 bg-[#895bff] mx-auto"></div>
+  </div>
+
+  <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+    <div
+      v-for="(item, index) in state.list"
+      :key="index"
+      class="governance-card relative overflow-hidden bg-white rounded-lg shadow-xl hover:shadow-2xl transition-all duration-500 border border-gray-100 transform hover:-translate-y-2"
+    >
+      <div
+        class="absolute inset-0 bg-gradient-to-r from-[#f5f0ff] to-white opacity-80"
+      ></div>
+      <div class="relative p-8 flex flex-col h-full">
+        <div class="flex items-start mb-6">
+          <div
+            class="bg-[#895bff] p-3 rounded-lg shadow-md mr-6 transform hover:rotate-6 transition-transform duration-300 governance-icon"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="h-8 w-8 text-white"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+              />
+            </svg>
+          </div>
+          <div>
+            <h1 class="text-2xl font-medium text-gray-800 mb-2">
+              {{ item.title }}
+            </h1>
+          </div>
+        </div>
+        <div class="mt-auto">
+          <a
+            :href="item.url"
+            class="inline-flex items-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-[#895bff] hover:bg-[#7a4de6] transition-all duration-300 transform hover:scale-105 shadow-md"
+            target="_blank"
+          >
+            View Document
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="ml-3 -mr-1 h-5 w-5"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M9 5l7 7-7 7"
+              />
+            </svg>
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { reactive } from "vue";
+import quarterlyPdfone from "@/assets/file/AUDIT COMMITTEE CHARTER.pdf";
+import quarterlyPdftwo from "@/assets/file/CODE OF BUSINESS CONDUCT AND ETHICS.pdf";
+
+import quarterlyPdfthree from "@/assets/file/COMPENSATION COMMITTEE CHARTER.pdf";
+
+import quarterlyPdffour from "@/assets/file/NOMINATING AND CORPORATE GOVERNANCE COMMITTEE CHARTER.pdf";
+
+const state = reactive({
+  list: [
+    {
+      title: "AUDIT COMMITTEE CHARTER",
+      description:
+        "Defines the purpose, composition, and responsibilities of the Audit Committee in overseeing financial reporting and disclosure.",
+      url: quarterlyPdfone,
+      date: "Last updated: March 2025",
+    },
+    {
+      title: "CODE OF BUSINESS CONDUCT AND ETHICS",
+      description:
+        "Establishes the ethical standards and legal compliance expectations for all directors, officers and employees.",
+      url: quarterlyPdftwo,
+      date: "Last updated: January 2025",
+    },
+    {
+      title: "COMPENSATION COMMITTEE CHARTER",
+      description:
+        "Outlines the duties and responsibilities for overseeing executive compensation and benefit plans.",
+      url: quarterlyPdfthree,
+      date: "Last updated: February 2025",
+    },
+    {
+      title: "NOMINATING AND CORPORATE GOVERNANCE COMMITTEE CHARTER",
+      description:
+        "Provides the framework for director nominations and corporate governance matters.",
+      url: quarterlyPdffour,
+      date: "Last updated: April 2025",
+    },
+  ],
+});
+</script>
+
+<style scoped lang="scss">
+/* 标题样式 */
+.title h1 {
+  font-family: "Georgia", serif;
+  position: relative;
+
+  &::after {
+    content: "";
+    position: absolute;
+    bottom: -14px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 80px;
+    height: 3px;
+    background: #895bff;
+    border-radius: 3px;
+    transition: width 0.3s ease;
+  }
+
+  &:hover::after {
+    width: 120px;
+  }
+}
+
+/* 卡片图标动画 */
+.governance-icon {
+  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+
+.governance-card:hover .governance-icon {
+  animation: float 2s ease-in-out infinite;
+  box-shadow: 0 10px 20px rgba(137, 91, 255, 0.3) !important;
+}
+
+/* 卡片背景渐变效果 */
+.governance-card::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+    135deg,
+    rgba(137, 91, 255, 0.1) 0%,
+    rgba(0, 0, 0, 0) 50%
+  );
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.governance-card:hover::before {
+  opacity: 1;
+}
+
+/* 浮动动画 */
+@keyframes float {
+  0% {
+    transform: translateY(0px) rotate(0deg);
+  }
+  50% {
+    transform: translateY(-5px) rotate(3deg);
+  }
+  100% {
+    transform: translateY(0px) rotate(0deg);
+  }
+}
+</style>

src/views/historic-stock/index.vue

@@ -3,8 +3,8 @@ import { computed } from "vue";
 import { useWindowSize } from "@vueuse/core";
 
 import size375 from "./size375/index.vue";
-import size768 from "./size1920/index.vue";
-import size1440 from "./size1920/index.vue";
+import size768 from "./size768/index.vue";
+import size1440 from "./size1440/index.vue";
 import size1920 from "./size1920/index.vue";
 import { useRouter } from "vue-router";
 import { useI18n } from "vue-i18n";

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

@@ -1,22 +1,434 @@
-<script setup>
-import { NCarousel, NDivider, NMarquee, NPopselect } from "naive-ui";
-import { onUnmounted, ref, watch, onMounted, computed } from "vue";
-
-</script>
-
 <template>
-  <header className="header">
-  1440
-  </header>
-  <main ref="main">
+  <div class="historic-data-container" style="margin-bottom: 40px">
+    <img
+      src="@/assets/image/historic-stock.png"
+      alt="1"
+      style="max-width: 100%; margin: 0 auto"
+    />
 
-  </main>
-  <footer>
+    <div class="header mt-[20px]">
+      <div class="title">Historical Data</div>
+      <div class="filter-container">
+        <n-dropdown
+          trigger="click"
+          :options="periodOptions"
+          @select="handlePeriodChange"
+          :value="state.selectedPeriod"
+        >
+          <n-button>
+            {{ state.selectedPeriod }}
+            <n-icon><chevron-down-outline /></n-icon>
+          </n-button>
+        </n-dropdown>
 
-  </footer>
+        <n-dropdown
+          trigger="click"
+          :options="durationOptions"
+          @select="handleDurationChange"
+          :value="state.selectedDuration"
+        >
+          <n-button>
+            {{ state.selectedDuration }}
+            <n-icon><chevron-down-outline /></n-icon>
+          </n-button>
+        </n-dropdown>
+      </div>
+    </div>
+
+    <n-data-table
+      :columns="columns"
+      :data="paginatedData"
+      :bordered="false"
+      :single-line="false"
+      :scroll-x="1200"
+    />
+
+    <div class="pagination-container">
+      <n-button class="page-btn prev-btn" @click="handlePrevPage">
+        <n-icon><chevron-back-outline /></n-icon>
+        Previous
+      </n-button>
+
+      <div class="page-info">
+        Page {{ state.currentPage }} of {{ totalPages }}
+      </div>
+
+      <div class="right-controls">
+        <n-dropdown
+          trigger="click"
+          :options="pageSizeOptions"
+          @select="handlePageSizeChange"
+        >
+          <n-button class="rows-dropdown">
+            {{ state.pageSize }} Rows
+            <n-icon><chevron-down-outline /></n-icon>
+          </n-button>
+        </n-dropdown>
+
+        <n-button class="page-btn next-btn" @click="handleNextPage">
+          Next
+          <n-icon><chevron-forward-outline /></n-icon>
+        </n-button>
+      </div>
+    </div>
+
+    <div class="back-to-top-link">
+      <a href="#" @click.prevent="scrollToTop">
+        Back to Top
+        <n-icon><arrow-up-outline /></n-icon>
+      </a>
+    </div>
+  </div>
 </template>
 
+<script setup>
+import { NDataTable, NButton, NDropdown, NIcon } from "naive-ui";
+import { reactive, onMounted, h, computed } from "vue";
+import axios from "axios";
+import {
+  ChevronDownOutline,
+  ChevronBackOutline,
+  ChevronForwardOutline,
+  ArrowUpOutline,
+} from "@vicons/ionicons5";
+import defaultTableData from "../data";
+console.log("defaultTableData", defaultTableData);
+
+// 数据筛选选项
+const periodOptions = [
+  { label: "Daily", key: "Daily" },
+  { label: "Weekly", key: "Weekly" },
+  { label: "Monthly", key: "Monthly" },
+  { label: "Quarterly", key: "Quarterly" },
+  { label: "Annual", key: "Annual" },
+];
+
+const durationOptions = [
+  { label: "3 Months", key: "3 Months" },
+  { label: "6 Months", key: "6 Months" },
+  { label: "Year to Date", key: "Year to Date" },
+  { label: "1 Year", key: "1 Year" },
+  { label: "5 Years", key: "5 Years" },
+  { label: "10 Years", key: "10 Years" },
+  { label: "Full History", key: "Full History", disabled: true },
+];
+
+// 分页大小选项
+const pageSizeOptions = [
+  { label: "50", key: 50 },
+  { label: "100", key: 100 },
+  { label: "500", key: 500 },
+  { label: "1000", key: 1000 },
+];
+
+const state = reactive({
+  selectedPeriod: "Daily",
+  selectedDuration: "3 Months",
+  tableData: [],
+  currentPage: 1,
+  pageSize: 50,
+});
+
+// 计算总页数
+const totalPages = computed(() => {
+  return Math.ceil(state.tableData.length / state.pageSize);
+});
+
+// 计算当前页的数据
+const paginatedData = computed(() => {
+  const start = (state.currentPage - 1) * state.pageSize;
+  const end = start + state.pageSize;
+  return state.tableData.slice(start, end);
+});
+
+// 表格列定义
+const columns = [
+  {
+    title: "Date",
+    key: "date",
+    align: "left",
+    fixed: "left",
+    width: 150,
+  },
+  {
+    title: "Open",
+    key: "open",
+    align: "center",
+  },
+  {
+    title: "High",
+    key: "high",
+    align: "center",
+  },
+  {
+    title: "Low",
+    key: "low",
+    align: "center",
+  },
+  {
+    title: "Close",
+    key: "close",
+    align: "center",
+  },
+  {
+    title: "Adj. Close",
+    key: "adjClose",
+    align: "center",
+  },
+  {
+    title: "Change",
+    key: "change",
+    align: "center",
+    render(row) {
+      const value = parseFloat(row.change);
+      const color = value < 0 ? "#ff4d4f" : value > 0 ? "#52c41a" : "";
+      return h("span", { style: { color } }, row.change);
+    },
+  },
+  {
+    title: "Volume",
+    key: "volume",
+    align: "center",
+  },
+];
+
+// 处理下拉选项变更
+const handlePeriodChange = (key) => {
+  state.selectedPeriod = key;
+  if (key === "Annual") {
+    handleDurationChange("Full History");
+    return;
+  }
+  if (key === "Monthly") {
+    handleDurationChange("10 Years");
+    return;
+  }
+  if (key === "Quarterly") {
+    handleDurationChange("10 Years");
+    return;
+  }
+  getPageData();
+};
+
+const handleDurationChange = (key) => {
+  state.selectedDuration = key;
+  getPageData();
+};
+
+// 处理分页
+const handlePrevPage = () => {
+  if (state.currentPage === 1) {
+    return;
+  }
+  state.currentPage--;
+};
+
+const handleNextPage = () => {
+  if (state.currentPage >= totalPages.value) {
+    return;
+  }
+  state.currentPage++;
+};
+
+const handlePageSizeChange = (size) => {
+  state.pageSize = size;
+  state.currentPage = 1; // 重置到第一页
+};
+
+// 回到顶部
+const scrollToTop = () => {
+  // 尝试多种方法
+  // 1. 使用document.body
+  document.body.scrollTop = 0;
+  // 2. 使用document.documentElement (HTML元素)
+  document.documentElement.scrollTop = 0;
+  // 3. 使用scrollIntoView
+  document.querySelector(".historic-data-container").scrollIntoView({
+    behavior: "smooth",
+    block: "start",
+  });
+};
+onMounted(() => {
+  getPageDefaultData();
+});
+
+const getPageDefaultData = async () => {
+  try {
+    let url =
+      "https://stockanalysis.com/api/symbol/a/OTC-MINM/history?type=chart";
+    const res = await axios.get(url);
+    let originalData = res.data.data;
+
+    // 转换为日期格式："Nov 26, 2024"
+    let calcApiData = originalData.map((item) => [
+      new Date(item[0]).toLocaleDateString("en-US", {
+        month: "short",
+        day: "numeric",
+        year: "numeric",
+      }),
+      item[1],
+    ]);
+    console.log("接口数据", calcApiData);
+
+    // 使用API数据更新defaultTableData中的close和adjClose值
+    const updatedTableData = defaultTableData.map((tableItem) => {
+      // 查找对应日期的API数据
+      const matchedApiData = calcApiData.find(
+        (apiItem) => apiItem[0] === tableItem.date
+      );
+
+      if (matchedApiData) {
+        // 更新close和adjClose值
+        return {
+          ...tableItem,
+          close: matchedApiData[1].toFixed(2),
+          adjClose: matchedApiData[1].toFixed(2),
+        };
+      }
+      return tableItem;
+    });
+
+    state.tableData = updatedTableData;
+  } catch (error) {
+    console.error("获取数据失败", error);
+  }
+};
+const getPageData = async () => {
+  let range = "";
+  if (state.selectedDuration === "3 Months") {
+    range = "3M";
+  } else if (state.selectedDuration === "6 Months") {
+    range = "6M";
+  } else if (state.selectedDuration === "Year to Date") {
+    range = "YTD";
+  } else if (state.selectedDuration === "1 Year") {
+    range = "1Y";
+  } else if (state.selectedDuration === "5 Years") {
+    range = "5Y";
+  } else if (state.selectedDuration === "10 Years") {
+    range = "10Y";
+  } else if (state.selectedDuration === "Full History") {
+    range = "Max";
+  }
+  let url = `https://stockanalysis.com/api/symbol/a/OTC-MINM/history?period=${state.selectedPeriod}&range=${range}`;
+  const res = await axios.get(url);
+  if (res.data.status === 200) {
+    // 转换为日期格式："Nov 26, 2024"
+    let resultData = res.data.data.map((item) => {
+      return {
+        date: new Date(item.t).toLocaleDateString("en-US", {
+          month: "short",
+          day: "numeric",
+          year: "numeric",
+        }),
+        open: item.o != null ? Number(item.o).toFixed(2) : "",
+        high: item.h != null ? Number(item.h).toFixed(2) : "",
+        low: item.l != null ? Number(item.l).toFixed(2) : "",
+        close: item.c != null ? Number(item.c).toFixed(2) : "",
+        adjClose: item.a != null ? Number(item.a).toFixed(2) : "",
+        change: item.ch != null ? Number(item.ch).toFixed(2) + "%" : "",
+        volume: item.v,
+      };
+    });
+    state.tableData = resultData;
+  }
+};
+</script>
+
 <style scoped lang="scss">
+.historic-data-container {
+  padding: 20px;
+  max-width: 1200px;
+  margin: 0 auto;
 
+  .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+
+    .title {
+      font-size: 40px;
+      font-weight: bold;
+      margin: 0;
+    }
+
+    .filter-container {
+      display: flex;
+      gap: 10px;
+    }
+  }
+
+  .pagination-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 20px;
+    padding: 10px 16px;
+    border-radius: 4px;
+    background-color: #ffffff;
+
+    .page-btn {
+      display: flex;
+      align-items: center;
+      gap: 5px;
+      padding: 6px 12px;
+      font-size: 20px;
+
+      &.prev-btn {
+        margin-right: auto;
+      }
+
+      &.next-btn {
+        margin-left: 10px;
+      }
+
+      &:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+    }
+
+    .page-info {
+      font-size: 16px;
+      color: #374151;
+      margin: 0 10px;
+    }
+
+    .right-controls {
+      display: flex;
+      align-items: center;
+
+      .rows-dropdown {
+        font-size: 16px;
+      }
+    }
+  }
+
+  .back-to-top-link {
+    display: flex;
+    justify-content: center;
+    margin-top: 16px;
+
+    a {
+      display: flex;
+      align-items: center;
+      gap: 5px;
+      color: #2563eb;
+      font-size: 20px;
+      font-weight: bold;
+      text-decoration: none;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  :deep(.n-data-table) {
+    .n-data-table-td {
+      padding: 12px 8px;
+    }
+  }
+}
 </style>
-

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="historic-data-container" style="margin-bottom: 100px">
+  <div class="historic-data-container" style="margin-bottom: 40px">
     <img
       src="@/assets/image/historic-stock.png"
       alt="1"

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="historic-data-container" style="margin-bottom: 100px">
+  <div class="historic-data-container" style="margin-bottom: 40px">
     <img
       src="@/assets/image/historic-stock-375.png"
       alt="1"
@@ -345,7 +345,7 @@ const getPageData = async () => {
     margin-bottom: 20px;
 
     .title {
-      font-size: 113px;
+      font-size: 80px;
       font-weight: bold;
       margin: 0;
     }

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

@@ -1,22 +1,432 @@
-<script setup>
-import { NCarousel, NDivider, NMarquee, NPopselect } from "naive-ui";
-import { onUnmounted, ref, watch, onMounted, computed } from "vue";
-
-</script>
-
 <template>
-  <header className="header">
-  768
-  </header>
-  <main ref="main">
+  <div class="historic-data-container" style="margin-bottom: 40px">
+    <img
+      src="@/assets/image/historic-stock.png"
+      alt="1"
+      style="max-width: 100%; margin: 0 auto"
+    />
 
-  </main>
-  <footer>
+    <div class="header mt-[20px]">
+      <div class="title">Historical Data</div>
+      <div class="filter-container">
+        <n-dropdown
+          trigger="click"
+          :options="periodOptions"
+          @select="handlePeriodChange"
+          :value="state.selectedPeriod"
+        >
+          <n-button>
+            {{ state.selectedPeriod }}
+            <n-icon><chevron-down-outline /></n-icon>
+          </n-button>
+        </n-dropdown>
 
-  </footer>
+        <n-dropdown
+          trigger="click"
+          :options="durationOptions"
+          @select="handleDurationChange"
+          :value="state.selectedDuration"
+        >
+          <n-button>
+            {{ state.selectedDuration }}
+            <n-icon><chevron-down-outline /></n-icon>
+          </n-button>
+        </n-dropdown>
+      </div>
+    </div>
+
+    <n-data-table
+      :columns="columns"
+      :data="paginatedData"
+      :bordered="false"
+      :single-line="false"
+      :scroll-x="1200"
+    />
+
+    <div class="pagination-container">
+      <n-button class="page-btn prev-btn" @click="handlePrevPage">
+        <n-icon><chevron-back-outline /></n-icon>
+        Previous
+      </n-button>
+
+      <div class="page-info">
+        Page {{ state.currentPage }} of {{ totalPages }}
+      </div>
+
+      <div class="right-controls">
+        <n-dropdown
+          trigger="click"
+          :options="pageSizeOptions"
+          @select="handlePageSizeChange"
+        >
+          <n-button class="rows-dropdown">
+            {{ state.pageSize }} Rows
+            <n-icon><chevron-down-outline /></n-icon>
+          </n-button>
+        </n-dropdown>
+
+        <n-button class="page-btn next-btn" @click="handleNextPage">
+          Next
+          <n-icon><chevron-forward-outline /></n-icon>
+        </n-button>
+      </div>
+    </div>
+
+    <div class="back-to-top-link">
+      <a href="#" @click.prevent="scrollToTop">
+        Back to Top
+        <n-icon><arrow-up-outline /></n-icon>
+      </a>
+    </div>
+  </div>
 </template>
 
+<script setup>
+import { NDataTable, NButton, NDropdown, NIcon } from "naive-ui";
+import { reactive, onMounted, h, computed } from "vue";
+import axios from "axios";
+import {
+  ChevronDownOutline,
+  ChevronBackOutline,
+  ChevronForwardOutline,
+  ArrowUpOutline,
+} from "@vicons/ionicons5";
+import defaultTableData from "../data";
+console.log("defaultTableData", defaultTableData);
+
+// 数据筛选选项
+const periodOptions = [
+  { label: "Daily", key: "Daily" },
+  { label: "Weekly", key: "Weekly" },
+  { label: "Monthly", key: "Monthly" },
+  { label: "Quarterly", key: "Quarterly" },
+  { label: "Annual", key: "Annual" },
+];
+
+const durationOptions = [
+  { label: "3 Months", key: "3 Months" },
+  { label: "6 Months", key: "6 Months" },
+  { label: "Year to Date", key: "Year to Date" },
+  { label: "1 Year", key: "1 Year" },
+  { label: "5 Years", key: "5 Years" },
+  { label: "10 Years", key: "10 Years" },
+  { label: "Full History", key: "Full History", disabled: true },
+];
+
+// 分页大小选项
+const pageSizeOptions = [
+  { label: "50", key: 50 },
+  { label: "100", key: 100 },
+  { label: "500", key: 500 },
+  { label: "1000", key: 1000 },
+];
+
+const state = reactive({
+  selectedPeriod: "Daily",
+  selectedDuration: "3 Months",
+  tableData: [],
+  currentPage: 1,
+  pageSize: 50,
+});
+
+// 计算总页数
+const totalPages = computed(() => {
+  return Math.ceil(state.tableData.length / state.pageSize);
+});
+
+// 计算当前页的数据
+const paginatedData = computed(() => {
+  const start = (state.currentPage - 1) * state.pageSize;
+  const end = start + state.pageSize;
+  return state.tableData.slice(start, end);
+});
+
+// 表格列定义
+const columns = [
+  {
+    title: "Date",
+    key: "date",
+    align: "left",
+    fixed: "left",
+    width: 150,
+  },
+  {
+    title: "Open",
+    key: "open",
+    align: "center",
+  },
+  {
+    title: "High",
+    key: "high",
+    align: "center",
+  },
+  {
+    title: "Low",
+    key: "low",
+    align: "center",
+  },
+  {
+    title: "Close",
+    key: "close",
+    align: "center",
+  },
+  {
+    title: "Adj. Close",
+    key: "adjClose",
+    align: "center",
+  },
+  {
+    title: "Change",
+    key: "change",
+    align: "center",
+    render(row) {
+      const value = parseFloat(row.change);
+      const color = value < 0 ? "#ff4d4f" : value > 0 ? "#52c41a" : "";
+      return h("span", { style: { color } }, row.change);
+    },
+  },
+  {
+    title: "Volume",
+    key: "volume",
+    align: "center",
+  },
+];
+
+// 处理下拉选项变更
+const handlePeriodChange = (key) => {
+  state.selectedPeriod = key;
+  if (key === "Annual") {
+    handleDurationChange("Full History");
+    return;
+  }
+  if (key === "Monthly") {
+    handleDurationChange("10 Years");
+    return;
+  }
+  if (key === "Quarterly") {
+    handleDurationChange("10 Years");
+    return;
+  }
+  getPageData();
+};
+
+const handleDurationChange = (key) => {
+  state.selectedDuration = key;
+  getPageData();
+};
+
+// 处理分页
+const handlePrevPage = () => {
+  if (state.currentPage === 1) {
+    return;
+  }
+  state.currentPage--;
+};
+
+const handleNextPage = () => {
+  if (state.currentPage >= totalPages.value) {
+    return;
+  }
+  state.currentPage++;
+};
+
+const handlePageSizeChange = (size) => {
+  state.pageSize = size;
+  state.currentPage = 1; // 重置到第一页
+};
+
+// 回到顶部
+const scrollToTop = () => {
+  // 尝试多种方法
+  // 1. 使用document.body
+  document.body.scrollTop = 0;
+  // 2. 使用document.documentElement (HTML元素)
+  document.documentElement.scrollTop = 0;
+  // 3. 使用scrollIntoView
+  document.querySelector(".historic-data-container").scrollIntoView({
+    behavior: "smooth",
+    block: "start",
+  });
+};
+onMounted(() => {
+  getPageDefaultData();
+});
+
+const getPageDefaultData = async () => {
+  try {
+    let url =
+      "https://stockanalysis.com/api/symbol/a/OTC-MINM/history?type=chart";
+    const res = await axios.get(url);
+    let originalData = res.data.data;
+
+    // 转换为日期格式："Nov 26, 2024"
+    let calcApiData = originalData.map((item) => [
+      new Date(item[0]).toLocaleDateString("en-US", {
+        month: "short",
+        day: "numeric",
+        year: "numeric",
+      }),
+      item[1],
+    ]);
+    console.log("接口数据", calcApiData);
+
+    // 使用API数据更新defaultTableData中的close和adjClose值
+    const updatedTableData = defaultTableData.map((tableItem) => {
+      // 查找对应日期的API数据
+      const matchedApiData = calcApiData.find(
+        (apiItem) => apiItem[0] === tableItem.date
+      );
+
+      if (matchedApiData) {
+        // 更新close和adjClose值
+        return {
+          ...tableItem,
+          close: matchedApiData[1].toFixed(2),
+          adjClose: matchedApiData[1].toFixed(2),
+        };
+      }
+      return tableItem;
+    });
+
+    state.tableData = updatedTableData;
+  } catch (error) {
+    console.error("获取数据失败", error);
+  }
+};
+const getPageData = async () => {
+  let range = "";
+  if (state.selectedDuration === "3 Months") {
+    range = "3M";
+  } else if (state.selectedDuration === "6 Months") {
+    range = "6M";
+  } else if (state.selectedDuration === "Year to Date") {
+    range = "YTD";
+  } else if (state.selectedDuration === "1 Year") {
+    range = "1Y";
+  } else if (state.selectedDuration === "5 Years") {
+    range = "5Y";
+  } else if (state.selectedDuration === "10 Years") {
+    range = "10Y";
+  } else if (state.selectedDuration === "Full History") {
+    range = "Max";
+  }
+  let url = `https://stockanalysis.com/api/symbol/a/OTC-MINM/history?period=${state.selectedPeriod}&range=${range}`;
+  const res = await axios.get(url);
+  if (res.data.status === 200) {
+    // 转换为日期格式："Nov 26, 2024"
+    let resultData = res.data.data.map((item) => {
+      return {
+        date: new Date(item.t).toLocaleDateString("en-US", {
+          month: "short",
+          day: "numeric",
+          year: "numeric",
+        }),
+        open: item.o != null ? Number(item.o).toFixed(2) : "",
+        high: item.h != null ? Number(item.h).toFixed(2) : "",
+        low: item.l != null ? Number(item.l).toFixed(2) : "",
+        close: item.c != null ? Number(item.c).toFixed(2) : "",
+        adjClose: item.a != null ? Number(item.a).toFixed(2) : "",
+        change: item.ch != null ? Number(item.ch).toFixed(2) + "%" : "",
+        volume: item.v,
+      };
+    });
+    state.tableData = resultData;
+  }
+};
+</script>
+
 <style scoped lang="scss">
+.historic-data-container {
+  max-width: calc(100% - 300px);
+  margin: 0 auto;
+  .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
 
+    .title {
+      font-size: 85px;
+      font-weight: bold;
+      margin: 0;
+    }
+
+    .filter-container {
+      display: flex;
+      gap: 10px;
+    }
+  }
+
+  .pagination-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 20px;
+    padding: 10px 16px;
+    border-radius: 4px;
+    background-color: #ffffff;
+
+    .page-btn {
+      display: flex;
+      align-items: center;
+      gap: 5px;
+      padding: 6px 12px;
+      font-size: 50px;
+
+      &.prev-btn {
+        margin-right: auto;
+      }
+
+      &.next-btn {
+        margin-left: 10px;
+      }
+
+      &:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+    }
+
+    .page-info {
+      font-size: 40px;
+      color: #374151;
+      margin: 0 10px;
+    }
+
+    .right-controls {
+      display: flex;
+      align-items: center;
+
+      .rows-dropdown {
+        font-size: 40px;
+      }
+    }
+  }
+
+  .back-to-top-link {
+    display: flex;
+    justify-content: center;
+    margin-top: 16px;
+
+    a {
+      display: flex;
+      align-items: center;
+      gap: 5px;
+      color: #2563eb;
+      font-size: 50px;
+      font-weight: bold;
+      text-decoration: none;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  :deep(.n-data-table) {
+    .n-data-table-td {
+      padding: 12px 8px;
+    }
+  }
+}
 </style>
-

src/views/manage/index.vue

@@ -1,14 +1,26 @@
 <script setup>
-import size1920 from "@/views/manage/size1920/index.vue";
-import size375 from "@/views/manage/size375/index.vue";
 import { computed } from "vue";
 import { useWindowSize } from "@vueuse/core";
 
+import size375 from "./size375/index.vue";
+import size768 from "./size768/index.vue";
+import size1440 from "./size1440/index.vue";
+import size1920 from "./size1920/index.vue";
+import { useRouter } from "vue-router";
+import { useI18n } from "vue-i18n";
+
+const router = useRouter();
 const { width } = useWindowSize();
+const { t } = useI18n();
+
 const viewComponent = computed(() => {
   const viewWidth = width.value;
   if (viewWidth <= 450) {
     return size375;
+  } else if (viewWidth <= 1100) {
+    return size768;
+  } else if (viewWidth <= 1500) {
+    return size1440;
   } else if (viewWidth <= 1920 || viewWidth > 1920) {
     return size1920;
   }

src/views/manage/size1440/index.vue

@@ -0,0 +1,271 @@
+<template>
+  <div class="home-page">
+    <div class="">
+      <!-- 标题区 -->
+      <div class="company-overview">
+        <div class="hero-section">
+          <transition name="fade-up" appear>
+            <n-h1 class="hero-title"
+              >FiEE, Inc. has a team of capable senior management with extensive
+              professional experience</n-h1
+            >
+          </transition>
+        </div>
+      </div>
+
+      <!-- 管理团队列表 -->
+      <main class="container">
+        <div class="leadership-grid">
+          <!-- 每个高管卡片 -->
+          <div
+            v-for="(leader, index) in leadershipTeam"
+            :key="index"
+            class="leader-card"
+            :style="{ '--delay': index * 0.2 + 's' }"
+          >
+            <!-- 卡片上半部 -->
+            <div class="card-profile">
+              <div class="avatar-wrapper">
+                <div class="decorative-dot"></div>
+                <div class="initials">{{ getInitials(leader.name) }}</div>
+              </div>
+              <div class="profile-info">
+                <h2 class="leader-name">{{ leader.name }}</h2>
+                <p class="leader-position">{{ leader.position }}</p>
+              </div>
+            </div>
+
+            <!-- 卡片下半部 -->
+            <div class="card-content">
+              <div
+                class="content-section"
+                v-for="(content, cIndex) in leader.content"
+                :key="cIndex"
+              >
+                <p>{{ content }}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useI18n } from "vue-i18n";
+import { computed } from "vue";
+
+const { t } = useI18n();
+
+const leadershipTeam = computed(() => [
+  {
+    name: t("MANAGEMENT.ONE.TITLE"),
+    position: t("MANAGEMENT.ONE.TITLETWO"),
+    content: [
+      t("MANAGEMENT.ONE.CONTENT"),
+      t("MANAGEMENT.ONE.CONTENTTWO"),
+      t("MANAGEMENT.ONE.CONTENTTHREE"),
+    ],
+  },
+  {
+    name: t("MANAGEMENT.TWO.TITLE"),
+    position: t("MANAGEMENT.TWO.TITLETWO"),
+    content: [t("MANAGEMENT.TWO.CONTENTONE"), t("MANAGEMENT.TWO.CONTENTTWO")],
+  },
+]);
+
+const getInitials = (name) => {
+  return name
+    .split(" ")
+    .map((n) => n[0])
+    .join("");
+};
+</script>
+
+<style scoped>
+.home-page {
+  background-image: url("@/assets/image/bg.png");
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+.company-overview {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 20px;
+  color: var(--text-color);
+}
+
+/* 顶部大图区域 */
+.hero-section {
+  background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
+  background-size: 400% 400%;
+  animation: gradientBG 15s ease infinite;
+  color: white;
+  padding: 120px 0;
+  text-align: center;
+  margin-bottom: 60px;
+  border-radius: 8px;
+}
+/* 动画 */
+@keyframes gradientBG {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+.hero-title {
+  font-size: 40px;
+  margin-bottom: 20px;
+  font-weight: 700;
+}
+
+.hero-subtitle {
+  font-size: 1.5rem;
+  opacity: 0.9;
+}
+/* 基础样式 */
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 2rem;
+}
+
+/* 标题区 */
+.leadership-header {
+  background: linear-gradient(135deg, #f9fbfe 0%, #e8f2ff 100%);
+  padding: 6rem 0 4rem;
+  text-align: center;
+}
+
+.page-title {
+  font-size: 2.5rem;
+  color: #2c3e50;
+  margin-bottom: 1rem;
+}
+
+.page-subtitle {
+  color: #6b7c93;
+  font-size: 1.1rem;
+}
+
+/* 管理团队网格 */
+.leadership-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+  gap: 2rem;
+  padding: 4rem 0;
+}
+
+/* 高管卡片 */
+.leader-card {
+  background: white;
+  border-radius: 20px;
+  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
+  overflow: hidden;
+  transform: translateY(20px);
+  opacity: 0;
+  animation: cardEnter 0.6s ease forwards;
+  animation-delay: var(--delay);
+  transition: transform 0.3s ease;
+}
+
+.leader-card:hover {
+  transform: translateY(-5px);
+}
+
+/* 个人资料区 */
+.card-profile {
+  padding: 2rem;
+  background: linear-gradient(
+    135deg,
+    #7a4dff 0%,
+    #895bff 100%
+  ); /* 主色调接近 #895bff */
+  position: relative;
+}
+
+.avatar-wrapper {
+  position: relative;
+  width: 80px;
+  height: 80px;
+  margin-bottom: 1.5rem;
+}
+
+.decorative-dot {
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 50%;
+  top: -10px;
+  right: -10px;
+}
+
+.initials {
+  width: 100%;
+  height: 100%;
+  background: white;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.8rem;
+  font-weight: bold;
+  color: #895bff;
+}
+
+.profile-info {
+  color: white;
+}
+
+.leader-name {
+  font-size: 1.6rem;
+  margin-bottom: 0.5rem;
+}
+
+.leader-position {
+  font-size: 1rem;
+  opacity: 0.9;
+}
+
+/* 内容区 */
+.card-content {
+  padding: 2rem;
+}
+
+.content-section {
+  margin-bottom: 1.5rem;
+}
+
+.content-section p {
+  color: #5a6d80;
+  line-height: 1.7;
+  font-size: 0.95rem;
+}
+
+/* 动画 */
+@keyframes cardEnter {
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* 响应式 */
+@media (max-width: 768px) {
+  .leadership-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .leader-card {
+    margin: 0 1rem;
+  }
+}
+</style>