diff --git a/src/assets/image/1440/product-introduction-img4.png b/src/assets/image/1440/product-introduction-img4.png
index 58813e4..bec1b65 100644
Binary files a/src/assets/image/1440/product-introduction-img4.png and b/src/assets/image/1440/product-introduction-img4.png differ
diff --git a/src/assets/image/768/bg-events-calendar.png b/src/assets/image/768/bg-events-calendar.png
index dc41b4e..d2b8a40 100644
Binary files a/src/assets/image/768/bg-events-calendar.png and b/src/assets/image/768/bg-events-calendar.png differ
diff --git a/src/assets/image/768/bg-pc.png b/src/assets/image/768/bg-pc.png
index dc41b4e..d2b8a40 100644
Binary files a/src/assets/image/768/bg-pc.png and b/src/assets/image/768/bg-pc.png differ
diff --git a/src/assets/image/768/product-introduction-img4.png b/src/assets/image/768/product-introduction-img4.png
index bec1b65..58813e4 100644
Binary files a/src/assets/image/768/product-introduction-img4.png and b/src/assets/image/768/product-introduction-img4.png differ
diff --git a/src/components/customFooter/size768/index.vue b/src/components/customFooter/size768/index.vue
index 33031d1..3ebbe67 100644
--- a/src/components/customFooter/size768/index.vue
+++ b/src/components/customFooter/size768/index.vue
@@ -1,12 +1,12 @@
 <template>
   <!-- 通用页脚 -->
   <div class="custom-footer">
-    <span>&copy; 2025 FiEE, Inc. All Rights Reserved.</span>
     <div class="footer-links">
       <span @click="handleLink('privacyPolicy')">Privacy Policy</span>
       <span @click="handleLink('termsOfUse')">Terms of use</span>
       <span @click="handleLink('siteMap')">Site Map</span>
     </div>
+    <div>&copy; 2025 FiEE, Inc. All Rights Reserved.</div>
   </div>
 </template>
 
@@ -26,29 +26,28 @@ const handleLink = (link) => {
   // } else if (link === "siteMap") {
   //   window.open(siteMap, "_blank");
   // }
-  router.push(link)
+  router.push(link);
 };
 </script>
 
 <style scoped lang="scss">
 .custom-footer {
   width: 100%;
-  text-align: center;
-  padding: 24px 0;
+  padding: 24 * 2.5px 32 * 2.5px;
   color: #888;
-  // font-size: 15px;
-  font-size: 1.05rem;
+  font-size: 14 * 2.5px;
   background: #f7f8fa;
   letter-spacing: 1px;
   border-top: 1px solid #ececec;
   z-index: 100;
-  padding: 1rem 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 
   .footer-links {
-    margin: 0.4rem 0 0;
     span {
       border-right: 1px solid #d2d2d7;
-      padding: 0 10px;
+      padding: 0 16 * 2.5px;
       cursor: pointer;
     }
     span:nth-last-child(1) {
diff --git a/src/components/customHeader/index.vue b/src/components/customHeader/index.vue
index eb93384..dfcde5f 100644
--- a/src/components/customHeader/index.vue
+++ b/src/components/customHeader/index.vue
@@ -1,30 +1,30 @@
 <script setup>
-import { computed } from 'vue'
-import { useWindowSize } from '@vueuse/core'
+import { computed } from "vue";
+import { useWindowSize } from "@vueuse/core";
 
-import size375 from '@/components/customHeader/size375/index.vue'
-import size768 from '@/components/customHeader/size375/index.vue'
-import size1440 from '@/components/customHeader/size1440/index.vue'
-import size1920 from '@/components/customHeader/size1920/index.vue'
-import { useRouter } from 'vue-router'
-import { useI18n } from 'vue-i18n'
+import size375 from "@/components/customHeader/size375/index.vue";
+import size768 from "@/components/customHeader/size768/index.vue";
+import size1440 from "@/components/customHeader/size1440/index.vue";
+import size1920 from "@/components/customHeader/size1920/index.vue";
+import { useRouter } from "vue-router";
+import { useI18n } from "vue-i18n";
 
-const router = useRouter()
-const { width } = useWindowSize()
-const { t } = useI18n()
+const router = useRouter();
+const { width } = useWindowSize();
+const { t } = useI18n();
 
 const viewComponent = computed(() => {
-  const viewWidth = width.value
+  const viewWidth = width.value;
   if (viewWidth <= 450) {
-    return size375
+    return size375;
   } else if (viewWidth <= 835) {
-    return size768
+    return size768;
   } else if (viewWidth <= 1640) {
-    return size1440
+    return size1440;
   } else if (viewWidth <= 1920 || viewWidth > 1920) {
-    return size1920
+    return size1920;
   }
-})
+});
 </script>
 
 <template>
diff --git a/src/components/customHeader/size768/index.vue b/src/components/customHeader/size768/index.vue
new file mode 100644
index 0000000..5b721f5
--- /dev/null
+++ b/src/components/customHeader/size768/index.vue
@@ -0,0 +1,220 @@
+<template>
+  <!-- 通用页头 -->
+  <NLayoutHeader
+    class="custom-header"
+    :class="{ 'header-scrolled': isScrolled }"
+  >
+    <div class="header-container">
+      <div class="logo" @click="handleToHome">
+        <NImage class="logo-image" :src="FiEELogo" preview-disabled />
+      </div>
+      <div
+        class="menu-btn"
+        :class="{ 'menu-open': showMenu }"
+        @click="toggleMenu"
+      >
+        <n-icon size="28" class="menu-icon menu-icon-menu">
+          <menu-sharp />
+        </n-icon>
+        <n-icon size="28" class="menu-icon menu-icon-close">
+          <close-sharp />
+        </n-icon>
+      </div>
+    </div>
+  </NLayoutHeader>
+  <transition name="fade-slide">
+    <div v-if="showMenu" class="mobile-menu-wrapper" @click.self="closeMenu">
+      <NConfigProvider :theme-overrides="themeOverrides">
+        <NMenu
+          mode="vertical"
+          :options="menuOptions"
+          :inverted="isScrolled"
+          class="mobile-menu"
+          accordion
+          v-model:value="selectedKey"
+          @update:value="handleMenuSelect"
+        />
+      </NConfigProvider>
+    </div>
+  </transition>
+</template>
+
+<script setup>
+import FiEELogo from "@/assets/image/header/logo.png";
+import { ref, onMounted, onUnmounted } from "vue";
+import { NMenu, NLayoutHeader, NImage, NIcon, NConfigProvider } from "naive-ui";
+import { MenuSharp, CloseSharp } from "@vicons/ionicons5";
+import { useI18n } from "vue-i18n";
+import { useRouter } from "vue-router";
+import { useHeaderMenuConfig } from "@/config/headerMenuConfig";
+const themeOverrides = {
+  Menu: {
+    itemTextColorHover: "#000",
+    itemTextColorActive: "#FF7BAC",
+    itemTextColorActiveHover: "#fff8fb",
+    itemColorHover: "#FDDFE9",
+    itemColorActive: "#fff",
+    itemColorActiveHover: "#fff8fb",
+  },
+};
+const { t } = useI18n();
+const router = useRouter();
+
+const isScrolled = ref(false);
+const showMenu = ref(false);
+const selectedKey = ref(null);
+
+const toggleMenu = () => {
+  showMenu.value = !showMenu.value;
+};
+const closeMenu = () => {
+  showMenu.value = false;
+};
+
+// 递归查找菜单项
+function findMenuOptionByKey(options, key) {
+  for (const option of options) {
+    if (option.key === key) return option;
+    if (option.children) {
+      const found = findMenuOptionByKey(option.children, key);
+      if (found) return found;
+    }
+  }
+  return null;
+}
+
+// 菜单点击跳转
+const handleMenuSelect = (key) => {
+  const option = findMenuOptionByKey(menuOptions, key);
+  if (option && option.href) {
+    router.push(option.href);
+    showMenu.value = false; // 跳转后收起菜单
+  }
+};
+
+// 使用统一的菜单配置
+const menuOptions = useHeaderMenuConfig();
+
+// 监听滚动事件
+const handleScroll = () => {
+  //滚动距离大于100*2.5px时，处理对应的header样式
+  isScrolled.value = window.scrollY >= 100;
+};
+
+onMounted(() => {
+  window.addEventListener("scroll", handleScroll);
+});
+
+onUnmounted(() => {
+  window.removeEventListener("scroll", handleScroll);
+});
+
+//点击回到首页
+const handleToHome = () => {
+  router.push("/");
+  selectedKey.value = null; // 重置菜单选中状态
+  showMenu.value = false; // 在移动端同时关闭菜单
+};
+</script>
+
+<style scoped lang="scss">
+.custom-header {
+  transition: all 0.3s ease;
+  background: transparent;
+  height: 60 * 2.5px;
+
+  &.header-scrolled {
+    background: rgba(255, 255, 255, 0.95);
+    box-shadow: 0 2 * 2.5px 8 * 2.5px rgba(0, 0, 0, 0.1);
+  }
+}
+
+.header-container {
+  width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
+  padding: 0 59 * 2.5px;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.logo {
+  flex-shrink: 0;
+  margin-left: 11 * 2.5px;
+  display: flex;
+  align-items: center;
+}
+
+.logo-image {
+  width: 120 * 2.5px;
+  height: 27 * 2.5px;
+}
+
+.menu-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  font-size: 75 * 2.5px;
+  padding: 20 * 2.5px;
+  border-radius: 30 * 2.5px;
+  background: transparent;
+  user-select: none;
+  transition: background 0.2s;
+  position: relative;
+
+  .menu-icon {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%) rotate(0deg);
+    opacity: 1;
+    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+      transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    pointer-events: none;
+  }
+  .menu-icon-close {
+    opacity: 0;
+    transform: translate(-50%, -50%) rotate(-90deg) scale(0.8);
+  }
+
+  &.menu-open {
+    .menu-icon-menu {
+      opacity: 0;
+      transform: translate(-50%, -50%) rotate(90deg) scale(0.8);
+    }
+    .menu-icon-close {
+      opacity: 1;
+      transform: translate(-50%, -50%) rotate(0deg) scale(1);
+    }
+  }
+}
+
+.mobile-menu-wrapper {
+  position: fixed;
+  top: 60 * 2.5px;
+  left: 0;
+  width: 100vw;
+  background: #fff;
+  z-index: 1100;
+  box-shadow: 0 30 * 2.5px 40 * 2.5px rgba(0, 0, 0, 0.08);
+  padding: 40 * 2.5px;
+  max-height: 1500 * 2.5px;
+  overflow-y: auto;
+  :deep(.n-menu-item) {
+    font-weight: 600;
+  }
+}
+
+.fade-slide-enter-active,
+.fade-slide-leave-active {
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.fade-slide-enter-from,
+.fade-slide-leave-to {
+  opacity: 0;
+  transform: translateY(-50 * 2.5px);
+}
+</style>
diff --git a/src/views/financialinformation/quarterlyreports/size1440/index.vue b/src/views/financialinformation/quarterlyreports/size1440/index.vue
index 8016124..0ec02c9 100644
--- a/src/views/financialinformation/quarterlyreports/size1440/index.vue
+++ b/src/views/financialinformation/quarterlyreports/size1440/index.vue
@@ -341,6 +341,7 @@ const handleClickOutside = (event) => {
 <style scoped lang="scss">
 .page-container {
   // width: 932px;
+  background: #fff;
   margin: 0 auto;
 }
 
@@ -430,11 +431,11 @@ const handleClickOutside = (event) => {
   position: relative;
   border-radius: 8px;
 
-  &:last-child {
-    .separator-line {
-      display: none;
-    }
-  }
+  // &:last-child {
+  //   .separator-line {
+  //     display: none;
+  //   }
+  // }
 
   &:nth-child(even) {
     margin: 12px 0;
diff --git a/src/views/financialinformation/quarterlyreports/size1920/index.vue b/src/views/financialinformation/quarterlyreports/size1920/index.vue
index 37ccf39..23bc55b 100644
--- a/src/views/financialinformation/quarterlyreports/size1920/index.vue
+++ b/src/views/financialinformation/quarterlyreports/size1920/index.vue
@@ -342,6 +342,7 @@ const handleClickOutside = (event) => {
 .page-container {
   width: 932px;
   margin: 0 auto;
+  background: #fff;
 }
 
 .title-section {
@@ -429,11 +430,11 @@ const handleClickOutside = (event) => {
   position: relative;
   border-radius: 8px;
 
-  &:last-child {
-    .separator-line {
-      display: none;
-    }
-  }
+  // &:last-child {
+  //   .separator-line {
+  //     display: none;
+  //   }
+  // }
 
   &:nth-child(even) {
     margin: 4px 0;
diff --git a/src/views/financialinformation/quarterlyreports/size375/index.vue b/src/views/financialinformation/quarterlyreports/size375/index.vue
index 64aaed9..7f8bb94 100644
--- a/src/views/financialinformation/quarterlyreports/size375/index.vue
+++ b/src/views/financialinformation/quarterlyreports/size375/index.vue
@@ -542,9 +542,9 @@ const downloadPdf = (url) => {
     background-color: #f9fafc;
   }
 
-  &:last-child {
-    border-bottom: none;
-  }
+  // &:last-child {
+  //   border-bottom: none;
+  // }
 }
 
 .result-title {
diff --git a/src/views/financialinformation/quarterlyreports/size768/index.vue b/src/views/financialinformation/quarterlyreports/size768/index.vue
index 584b3b5..d75daad 100644
--- a/src/views/financialinformation/quarterlyreports/size768/index.vue
+++ b/src/views/financialinformation/quarterlyreports/size768/index.vue
@@ -1,114 +1,155 @@
 <template>
-  <header></header>
-  <main class="p-[80px] mx-auto" style="max-width: 100vw; min-width: 350px">
-    <div class="page-title mb-[24px]">
-      {{ t("financialinformation.quarterlyreports.title") }}
+  <div class="page-container w-full">
+    <!-- 标题区域 -->
+    <div class="title-section">
+      <div class="title-decoration"></div>
+      <div class="financials-title">
+        {{ t("financialinformation.quarterlyreports.title") }}
+      </div>
     </div>
+
+    <!-- 搜索区域 -->
     <div class="search-container">
       <input
         type="text"
-        v-model="searchQuery"
-        class="search-input"
         :placeholder="
           t('financialinformation.quarterlyreports.search.placeholder')
         "
+        v-model="searchQuery"
+        class="search-input"
       />
-      <button @click="handleSearch" class="search-button">
+      <button class="search-button" @click="handleSearch">
         {{ t("financialinformation.quarterlyreports.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 class="reports-table">
+      <div class="reports-list">
+        <div v-for="(item, index) in pagedList" :key="index" class="table-row">
+          <div class="content">
+            <div class="file-content">
+              <div class="file-info">
+                <div class="vertical-line"></div>
+                <p class="file-title">{{ item.title }}</p>
+              </div>
+              <p class="file-description">{{ item.description }}</p>
+            </div>
+            <div class="download-section">
+              <p class="download-text" @click="downloadPdf(item.url)">
+                PDF Download
+              </p>
+            </div>
+          </div>
+          <div class="separator-line"></div>
         </div>
+      </div>
+    </div>
 
-        <img
-          src="@/assets/image/download.svg"
-          style="width: 20px; height: 20px"
-          @click="downloadPdf(item.url)"
+    <!-- 分页器 -->
+    <div class="pagination-container">
+      <div class="pagination-buttons">
+        <button
+          class="page-btn prev-btn"
+          :disabled="state.currentPage === 1"
+          @click="goToPrevPage"
+        >
+          <svg width="5" height="9" viewBox="0 0 5 9" fill="none">
+            <path
+              d="M4 1L1 4.5L4 8"
+              stroke="#455363"
+              stroke-width="1.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+        </button>
+
+        <!-- 动态生成页码按钮 -->
+        <template v-for="page in getVisiblePages()" :key="page">
+          <button
+            v-if="page !== '...'"
+            class="page-btn"
+            :class="{ active: page === state.currentPage }"
+            @click="goToPage(page)"
+          >
+            {{ page }}
+          </button>
+          <button v-else class="page-btn disabled" disabled>...</button>
+        </template>
+
+        <button
+          class="page-btn next-btn"
+          :disabled="state.currentPage === totalPages"
+          @click="goToNextPage"
+        >
+          <svg width="5" height="9" viewBox="0 0 5 9" fill="none">
+            <path
+              d="M1 1L4 4.5L1 8"
+              stroke="#455363"
+              stroke-width="1.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+        </button>
+      </div>
+      <div class="page-size-selector" @click="togglePageSizeMenu">
+        <span>{{ state.pageSize }}/page</span>
+        <svg width="10" height="5" viewBox="0 0 10 5" fill="none">
+          <path
+            d="M1 1L5 4L9 1"
+            stroke="#455363"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+        <!-- 页面大小选择菜单 -->
+        <div v-if="showPageSizeMenu" class="page-size-menu">
+          <div
+            v-for="size in [10, 20, 50]"
+            :key="size"
+            class="page-size-option"
+            :class="{ active: state.pageSize === size }"
+            @click="changePageSize(size)"
+          >
+            {{ size }}/page
+          </div>
+        </div>
+      </div>
+      <div class="goto-section">
+        <span>Goto</span>
+        <input
+          type="number"
+          v-model="state.gotoPage"
+          class="goto-input"
+          :min="1"
+          :max="totalPages"
+          @keyup.enter="handleGoto"
         />
       </div>
     </div>
-  </main>
-  <footer></footer>
+    <div class="pagination-info">
+      Displaying {{ displayRange.start }} - {{ displayRange.end }} of
+      {{ state.total }} results
+    </div>
+  </div>
 </template>
 <script setup>
-import { ref, watch, onMounted, computed, reactive } from "vue";
+import { ref, watch, onMounted, onUnmounted, computed, reactive } from "vue";
 import { useI18n } from "vue-i18n";
 import quarterlyPdf2025Q2 from "@/assets/file/quarterly/10Q 2025-Q2.pdf";
-import quarterlyPdf2025Q1 from "@/assets/file/quarterly/10Q 2025-Q1.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";
-import quarterlyPdf2016Q3A from "@/assets/file/quarterly/10Q 2016-Q3s.pdf";
-import quarterlyPdf2020Q2A from "@/assets/file/quarterly/10Q 2020-Q2s.pdf";
-import quarterlyPdf2020Q3A from "@/assets/file/quarterly/10Q 2020-Q3s.pdf";
-import quarterlyPdf2022Q1A from "@/assets/file/quarterly/10Q 2022-Q1s.pdf";
-import quarterlyPdf2022Q2A from "@/assets/file/quarterly/10Q 2022-Q2s.pdf";
-import quarterlyPdf2022Q3A from "@/assets/file/quarterly/10Q 2022-Q3s.pdf";
-import quarterlyPdf2024Q1A from "@/assets/file/quarterly/10Q 2024-Q1s.pdf";
-import quarterlyPdf2024Q2A from "@/assets/file/quarterly/10Q 2024-Q2s.pdf";
-import quarterlyPdf2024Q3A from "@/assets/file/quarterly/10Q 2024-Q3s.pdf";
 import quarterlyPdf2025Q3N from "@/assets/file/quarterly/10Q 2025-Q1-No1.pdf";
 
 const { t } = useI18n();
 const searchQuery = ref("");
 
 const state = reactive({
+  currentPage: 1,
+  pageSize: 10,
+  total: 0,
+  gotoPage: 1,
   list: [
     {
       title: "2025 Q2 Quarterly Report",
@@ -120,291 +161,18 @@ const state = reactive({
       description: "First Quarter 2025 Financial Results",
       url: quarterlyPdf2025Q3N,
     },
-    {
-      title: "2025 Q1 Quarterly Report",
-      description: "First Quarter 2025 Financial Results",
-      url: quarterlyPdf2025Q1,
-    },
-    {
-      title: "2024 Q3 Quarterly Report Amendment",
-      description: "Third Quarter 2024 Financial Results",
-      url: quarterlyPdf2024Q3A,
-    },
-    {
-      title: "2024 Q3 Quarterly Report",
-      description: "Third Quarter 2024 Financial Results",
-      url: quarterlyPdf2024Q3,
-    },
-    {
-      title: "2024 Q2 Quarterly Report Amendment",
-      description: "Second Quarter 2024 Financial Results",
-      url: quarterlyPdf2024Q2A,
-    },
-    {
-      title: "2024 Q2 Quarterly Report",
-      description: "Second Quarter 2024 Financial Results",
-      url: quarterlyPdf2024Q2,
-    },
-    {
-      title: "2024 Q1 Quarterly Report Amendment",
-      description: "First Quarter 2024 Financial Results",
-      url: quarterlyPdf2024Q1A,
-    },
-    {
-      title: "2024 Q1 Quarterly Report",
-      description: "First Quarter 2024 Financial Results",
-      url: quarterlyPdf2024Q1,
-    },
-    {
-      title: "2023 Q3 Quarterly Report",
-      description: "Third Quarter 2023 Financial Results",
-      url: quarterlyPdf2023Q3,
-    },
-    {
-      title: "2023 Q2 Quarterly Report",
-      description: "Second Quarter 2023 Financial Results",
-      url: quarterlyPdf2023Q2,
-    },
-    {
-      title: "2023 Q1 Quarterly Report",
-      description: "First Quarter 2023 Financial Results",
-      url: quarterlyPdf2023Q1,
-    },
-    {
-      title: "2022 Q3 Quarterly Report Amendment",
-      description: "Third Quarter 2022 Financial Results",
-      url: quarterlyPdf2022Q3A,
-    },
-    {
-      title: "2022 Q3 Quarterly Report",
-      description: "Third Quarter 2022 Financial Results",
-      url: quarterlyPdf2022Q3,
-    },
-    {
-      title: "2022 Q2 Quarterly Report Amendment",
-      description: "Second Quarter 2022 Financial Results",
-      url: quarterlyPdf2022Q2A,
-    },
-    {
-      title: "2022 Q2 Quarterly Report",
-      description: "Second Quarter 2022 Financial Results",
-      url: quarterlyPdf2022Q2,
-    },
-    {
-      title: "2022 Q1 Quarterly Report Amendment No.1",
-      description: "First Quarter 2022 Financial Results",
-      url: quarterlyPdf2022Q1A,
-    },
-
-    {
-      title: "2022 Q1 Quarterly Report",
-      description: "First Quarter 2022 Financial Results",
-      url: quarterlyPdf2022Q1,
-    },
-    {
-      title: "2021 Q3 Quarterly Report",
-      description: "Third Quarter 2021 Financial Results",
-      url: quarterlyPdf2021Q3,
-    },
-    {
-      title: "2021 Q2 Quarterly Report",
-      description: "Second Quarter 2021 Financial Results",
-      url: quarterlyPdf2021Q2,
-    },
-    {
-      title: "2021 Q1 Quarterly Report",
-      description: "First Quarter 2021 Financial Results",
-      url: quarterlyPdf2021Q1,
-    },
-    {
-      title: "2020 Q3 Quarterly Report Amendment No.1",
-      description: "Third Quarter 2020 Financial Results",
-      url: quarterlyPdf2020Q3A,
-    },
-    {
-      title: "2020 Q3 Quarterly Report",
-      description: "Third Quarter 2020 Financial Results",
-      url: quarterlyPdf2020Q3,
-    },
-    {
-      title: "2020 Q2 Quarterly Report Amendment No.1",
-      description: "Second Quarter 2020 Financial Results",
-      url: quarterlyPdf2020Q2A,
-    },
-    {
-      title: "2020 Q2 Quarterly Report",
-      description: "Second Quarter 2020 Financial Results",
-      url: quarterlyPdf2020Q2,
-    },
-
-    {
-      title: "2020 Q1 Quarterly Report",
-      description: "First Quarter 2020 Financial Results",
-      url: quarterlyPdf2020Q1,
-    },
-    {
-      title: "2019 Q3 Quarterly Report",
-      description: "Third Quarter 2019 Financial Results",
-      url: quarterlyPdf2019Q3,
-    },
-    {
-      title: "2019 Q2 Quarterly Report",
-      description: "Second Quarter 2019 Financial Results",
-      url: quarterlyPdf2019Q2,
-    },
-    {
-      title: "2019 Q1 Quarterly Report",
-      description: "First Quarter 2019 Financial Results",
-      url: quarterlyPdf2019Q1,
-    },
-    {
-      title: "2018 Q3 Quarterly Report",
-      description: "Third Quarter 2018 Financial Results",
-      url: quarterlyPdf2018Q3,
-    },
-    {
-      title: "2018 Q2 Quarterly Report",
-      description: "Second Quarter 2018 Financial Results",
-      url: quarterlyPdf2018Q2,
-    },
-    {
-      title: "2018 Q1 Quarterly Report",
-      description: "First Quarter 2018 Financial Results",
-      url: quarterlyPdf2018Q1,
-    },
-    {
-      title: "2017 Q3 Quarterly Report",
-      description: "Third Quarter 2017 Financial Results",
-      url: quarterlyPdf2017Q3,
-    },
-    {
-      title: "2017 Q2 Quarterly Report",
-      description: "Second Quarter 2017 Financial Results",
-      url: quarterlyPdf2017Q2,
-    },
-    {
-      title: "2017 Q1 Quarterly Report",
-      description: "First Quarter 2017 Financial Results",
-      url: quarterlyPdf2017Q1,
-    },
-    {
-      title: "2016 Q3 Quarterly Report Amendment No.1",
-      description: "Third Quarter 2016 Financial Results",
-      url: quarterlyPdf2016Q3A,
-    },
-    {
-      title: "2016 Q3 Quarterly Report",
-      description: "Third Quarter 2016 Financial Results",
-      url: quarterlyPdf2016Q3,
-    },
-    {
-      title: "2016 Q2 Quarterly Report",
-      description: "Second Quarter 2016 Financial Results",
-      url: quarterlyPdf2016Q2,
-    },
-    {
-      title: "2016 Q1 Quarterly Report",
-      description: "First Quarter 2016 Financial Results",
-      url: quarterlyPdf2016Q1,
-    },
-    {
-      title: "2015 Q3 Quarterly Report",
-      description: "Third Quarter 2015 Financial Results",
-      url: quarterlyPdf2015Q3,
-    },
-    {
-      title: "2015 Q2 Quarterly Report",
-      description: "Second Quarter 2015 Financial Results",
-      url: quarterlyPdf2015Q2,
-    },
-    {
-      title: "2015 Q1 Quarterly Report",
-      description: "First Quarter 2015 Financial Results",
-      url: quarterlyPdf2015Q1,
-    },
-    {
-      title: "2014 Q3 Quarterly Report",
-      description: "Third Quarter 2014 Financial Results",
-      url: quarterlyPdf2014Q3,
-    },
-    {
-      title: "2014 Q2 Quarterly Report",
-      description: "Second Quarter 2014 Financial Results",
-      url: quarterlyPdf2014Q2,
-    },
-    {
-      title: "2014 Q1 Quarterly Report",
-      description: "First Quarter 2014 Financial Results",
-      url: quarterlyPdf2014Q1,
-    },
-    {
-      title: "2013 Q3 Quarterly Report",
-      description: "Third Quarter 2013 Financial Results",
-      url: quarterlyPdf2013Q3,
-    },
-    {
-      title: "2013 Q2 Quarterly Report",
-      description: "Second Quarter 2013 Financial Results",
-      url: quarterlyPdf2013Q2,
-    },
-    {
-      title: "2013 Q1 Quarterly Report",
-      description: "First Quarter 2013 Financial Results",
-      url: quarterlyPdf2013Q1,
-    },
-    {
-      title: "2012 Q3 Quarterly Report",
-      description: "Third Quarter 2012 Financial Results",
-      url: quarterlyPdf2012Q3,
-    },
-    {
-      title: "2012 Q2 Quarterly Report",
-      description: "Second Quarter 2012 Financial Results",
-      url: quarterlyPdf2012Q2,
-    },
-    {
-      title: "2012 Q1 Quarterly Report",
-      description: "First Quarter 2012 Financial Results",
-      url: quarterlyPdf2012Q1,
-    },
-    {
-      title: "2011 Q3 Quarterly Report",
-      description: "Third Quarter 2011 Financial Results",
-      url: quarterlyPdf2011Q3,
-    },
-    {
-      title: "2011 Q2 Quarterly Report",
-      description: "Second Quarter 2011 Financial Results",
-      url: quarterlyPdf2011Q2,
-    },
-    {
-      title: "2011 Q1 Quarterly Report",
-      description: "First Quarter 2011 Financial Results",
-      url: quarterlyPdf2011Q1,
-    },
-    {
-      title: "2010 Q3 Quarterly Report",
-      description: "Third Quarter 2010 Financial Results",
-      url: quarterlyPdf2010Q3,
-    },
-    {
-      title: "2010 Q2 Quarterly Report",
-      description: "Second Quarter 2010 Financial Results",
-      url: quarterlyPdf2010Q2,
-    },
-    {
-      title: "2010 Q1 Quarterly Report",
-      description: "First Quarter 2010 Financial Results",
-      url: quarterlyPdf2010Q1,
-    },
-    {
-      title: "2009 Q3 Quarterly Report",
-      description: "Third Quarter 2009 Financial Results",
-      url: quarterlyPdf2009Q3,
-    },
   ],
 });
 
+const showPageSizeMenu = ref(false);
+
+onMounted(() => {
+  document.addEventListener("click", handleClickOutside);
+});
+
+onUnmounted(() => {
+  document.removeEventListener("click", handleClickOutside);
+});
 const filteredList = computed(() => {
   if (!searchQuery.value) return state.list;
   const query = searchQuery.value.toLowerCase();
@@ -415,175 +183,505 @@ const filteredList = computed(() => {
   );
 });
 
+// 分页后的列表
+const pagedList = computed(() => {
+  const start = (state.currentPage - 1) * state.pageSize;
+  const end = start + state.pageSize;
+  return filteredList.value.slice(start, end);
+});
+
+// 总页数
+const totalPages = computed(() => {
+  return Math.ceil(state.total / state.pageSize) || 1;
+});
+
+// 显示范围
+const displayRange = computed(() => {
+  if (state.total === 0) return { start: 0, end: 0 };
+  const start = (state.currentPage - 1) * state.pageSize + 1;
+  const end = Math.min(state.currentPage * state.pageSize, state.total);
+  return { start, end };
+});
+
 const handleSearch = () => {
   // 搜索处理逻辑
   // console.log("搜索:", searchQuery.value);
 };
 
-const downloadPdf = (url) => {
-  // 创建一个隐藏的a元素
-  const link = document.createElement("a");
-  link.href = url;
+const downloadPdf = async (pdfResource, filename = "") => {
+  try {
+    // 获取PDF文件
+    const response = await fetch(pdfResource);
+    const blob = await response.blob();
 
-  // 修复文件名提取逻辑
-  let fileName = url.split("/").pop();
-  // 移除可能存在的查询参数
-  if (fileName.includes("?") || fileName.includes("_t=")) {
-    fileName = fileName.split(/[?_]/)[0];
+    // 创建Blob URL
+    const blobUrl = URL.createObjectURL(blob);
+
+    // 创建下载链接
+    const a = document.createElement("a");
+    a.href = blobUrl;
+    a.download = filename || pdfResource.split("/").pop() || "download.pdf";
+
+    // 触发下载
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+
+    // 释放Blob URL
+    URL.revokeObjectURL(blobUrl);
+  } catch (error) {
+    // console.error("下载PDF文件失败:", error);
   }
-  link.download = fileName;
+};
 
-  // 对于移动设备，我们需要特殊处理
-  const isMobile =
-    /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
-      navigator.userAgent
-    );
+// 分页方法
+const goToPage = (page) => {
+  if (page >= 1 && page <= totalPages.value) {
+    state.currentPage = page;
+  }
+};
 
-  if (isMobile) {
-    // 在移动设备上，使用fetch下载文件并直接触发下载，不使用blob URL进行预览
-    fetch(url)
-      .then((response) => response.blob())
-      .then((blob) => {
-        const objectUrl = URL.createObjectURL(blob);
-        link.href = objectUrl;
-        // 确保设置download属性并且不设置target="_blank"以避免预览
-        link.download = fileName;
-        link.target = "_self"; // 避免在新窗口打开
-        document.body.appendChild(link);
-        link.click();
+const goToPrevPage = () => {
+  if (state.currentPage > 1) {
+    state.currentPage--;
+  }
+};
 
-        // 清理
-        setTimeout(() => {
-          document.body.removeChild(link);
-          URL.revokeObjectURL(objectUrl);
-        }, 100);
-      })
-      .catch((error) => {
-        // console.error("下载文件时出错:", error);
-        // 如果fetch失败，尝试直接下载
-        link.href = url;
-        link.download = fileName;
-        link.target = "_self";
-        document.body.appendChild(link);
-        link.click();
-        document.body.removeChild(link);
-      });
+const goToNextPage = () => {
+  if (state.currentPage < totalPages.value) {
+    state.currentPage++;
+  }
+};
+
+const changePageSize = (size) => {
+  state.pageSize = size;
+  state.currentPage = 1;
+};
+
+const handleGoto = () => {
+  const page = parseInt(state.gotoPage);
+  if (page >= 1 && page <= totalPages.value) {
+    state.currentPage = page;
+  }
+};
+
+const togglePageSizeMenu = () => {
+  showPageSizeMenu.value = !showPageSizeMenu.value;
+};
+
+const getVisiblePages = () => {
+  const current = state.currentPage;
+  const total = totalPages.value;
+  const pages = [];
+
+  if (total <= 7) {
+    for (let i = 1; i <= total; i++) {
+      pages.push(i);
+    }
   } else {
-    // 桌面设备上直接点击链接下载
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
+    pages.push(1);
+
+    if (current <= 4) {
+      for (let i = 2; i <= 5; i++) {
+        pages.push(i);
+      }
+      pages.push("...");
+      pages.push(total);
+    } else if (current >= total - 3) {
+      pages.push("...");
+      for (let i = total - 4; i <= total; i++) {
+        pages.push(i);
+      }
+    } else {
+      pages.push("...");
+      for (let i = current - 1; i <= current + 1; i++) {
+        pages.push(i);
+      }
+      pages.push("...");
+      pages.push(total);
+    }
+  }
+
+  return pages;
+};
+
+// 监听同步
+watch(
+  () => state.pageSize,
+  () => {
+    state.currentPage = 1;
+  }
+);
+
+watch(
+  () => state.currentPage,
+  (newPage) => {
+    state.gotoPage = newPage;
+  }
+);
+
+watch(
+  () => filteredList.value,
+  (newList) => {
+    state.total = newList.length;
+    state.currentPage = 1;
+  },
+  { immediate: true }
+);
+
+// 点击外部关闭页面大小选择菜单
+const handleClickOutside = (event) => {
+  if (!event.target.closest || !event.target.closest(".page-size-selector")) {
+    showPageSizeMenu.value = false;
   }
 };
 </script>
 <style scoped lang="scss">
-.page-title {
-  font-size: 85px;
-  font-weight: bold;
-  color: #333;
-  text-align: center;
-  margin-top: 8px;
+.page-container {
+  margin: 0 auto;
+  max-width: 650 * 2.5px; // 由 PostCSS 转换为 vw
+}
+
+.title-section {
+  display: flex;
+  flex-direction: column;
+  gap: 16 * 2.5px;
+  margin-bottom: 32 * 2.5px;
+  margin-top: 43 * 2.5px;
+  padding: 0 16 * 2.5px;
+}
+
+.title-decoration {
+  width: 58 * 2.5px;
+  height: 7 * 2.5px;
+  background: #ff7bac;
+  margin: auto 0;
+  margin-top: 0;
+}
+
+.financials-title {
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 500;
+  font-size: 32 * 2.5px;
+  line-height: 1;
+  letter-spacing: 0.03em;
+  color: #000000;
 }
 
 .search-container {
+  margin-bottom: 20 * 2.5px;
   display: flex;
-  flex-direction: column;
-  gap: 10px;
-  margin-bottom: 20px;
+  align-items: center;
+  gap: 38 * 2.5px;
+  padding: 0 16 * 2.5px;
 }
 
 .search-input {
-  width: 100%;
-  padding: 10px 15px;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  outline: none;
-  transition: border-color 0.3s;
-}
+  flex: none;
+  width: 401 * 2.5px;
+  height: 34 * 2.5px;
+  padding: 7 * 2.5px 12 * 2.5px;
+  border: 1 * 2.5px solid #e0e0e6;
+  border-radius: 3 * 2.5px;
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 400;
+  font-size: 14 * 2.5px;
+  line-height: 1.375em;
+  letter-spacing: 0.03em;
+  color: #455363;
 
-.search-input:focus {
-  border-color: #2979ff;
-  box-shadow: 0 0 0 2px rgba(41, 121, 255, 0.2);
+  &::placeholder {
+    color: #b6b6b6;
+  }
 }
 
 .search-button {
-  width: 100%;
-  padding: 10px 0;
-  background: #ff7bac;
-  color: white;
+  width: 201 * 2.5px;
+  height: 34 * 2.5px;
+  padding: 7 * 2.5px 12 * 2.5px;
+  color: #fff;
+  background-color: #ff7bac;
   border: none;
-  border-radius: 4px;
-  font-weight: 500;
+  border-radius: 3 * 2.5px;
   cursor: pointer;
-  transition: background 0.3s;
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 500;
+  font-size: 14 * 2.5px;
+  line-height: 1.375em;
+  letter-spacing: 0.03em;
 }
 
-.search-button:hover {
-  background: #ff7bac;
+.reports-table {
+  width: 100%;
+  background: #ffffff;
+  margin-bottom: 20 * 2.5px;
 }
 
-.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;
-}
-
-.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;
+.reports-list {
   display: flex;
   flex-direction: column;
+  gap: 16 * 2.5px;
+  background: #fff;
+}
+
+.table-row {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  border-radius: 8 * 2.5px;
+
+  // &:last-child {
+  //   .separator-line {
+  //     display: none;
+  //   }
+  // }
+}
+
+.content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 16 * 2.5px;
+}
+
+.table-row .content {
+  display: flex;
+  flex-direction: row;
   align-items: center;
+  justify-content: space-between;
+  gap: 0;
+  padding: 0;
+  &:hover {
+    background: #fff8fb;
+  }
+}
 
-  .pdf-link {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    text-decoration: none;
-    color: #ff5252;
-    font-size: 40px;
+.file-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
 
-    &:hover {
-      opacity: 0.8;
-    }
+.file-info {
+  display: flex;
+  align-items: center;
+  gap: 16 * 2.5px;
+}
+
+.vertical-line {
+  width: 1 * 2.5px;
+  height: 20 * 2.5px;
+  background: #ff7bac;
+  flex-shrink: 0;
+}
+
+.file-title {
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 500;
+  font-size: 14 * 2.5px;
+  line-height: 1.375em;
+  letter-spacing: 0.03em;
+  color: #000000;
+  margin: 0;
+}
+
+.file-description {
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 400;
+  font-size: 14 * 2.5px;
+  line-height: 1.375em;
+  letter-spacing: 0.03em;
+  color: #455363;
+  margin: 0;
+  padding-left: 16 * 2.5px;
+  margin-top: 8 * 2.5px;
+}
+
+.download-section {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 152 * 2.5px;
+  padding: 4 * 2.5px 16 * 2.5px;
+  min-width: auto;
+  text-align: left;
+}
+
+.download-text {
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 500;
+  font-size: 14 * 2.5px;
+  line-height: 1.375em;
+  letter-spacing: 0.03em;
+  color: #ff7bac;
+  cursor: pointer;
+  margin: 0;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.separator-line {
+  width: 100%;
+  height: 1 * 2.5px;
+  background: repeating-linear-gradient(
+    to right,
+    #e0e0e6 0 * 2.5px,
+    #e0e0e6 4 * 2.5px,
+    transparent 4 * 2.5px,
+    transparent 8 * 2.5px
+  );
+  margin-top: 16 * 2.5px;
+}
+
+// 分页器样式
+.pagination-container {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 21 * 2.5px;
+  padding: 0;
+}
+
+.pagination-info {
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 400;
+  font-size: 16 * 2.5px;
+  line-height: 1.4375em;
+  color: #455363;
+  text-align: right;
+  margin: 16 * 2.5px;
+}
+
+.pagination-buttons {
+  display: flex;
+  align-items: center;
+  gap: 8 * 2.5px;
+}
+
+.page-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28 * 2.5px;
+  height: 28 * 2.5px;
+  border: 1 * 2.5px solid #e0e0e6;
+  border-radius: 3 * 2.5px;
+  background: #ffffff;
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 400;
+  font-size: 14 * 2.5px;
+  line-height: 1.428em;
+  color: #455363;
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  &:hover:not(:disabled) {
+    border-color: #ff7bac;
+    color: #ff7bac;
+  }
+
+  &.active {
+    border-color: #ff7bac;
+    color: #ff7bac;
+    background: #fff0f5;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+}
+
+.page-size-selector {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 18 * 2.5px;
+  padding: 4 * 2.5px 12 * 2.5px;
+  height: 28 * 2.5px;
+  border: 1 * 2.5px solid #e0e0e6;
+  border-radius: 3 * 2.5px;
+  background: #ffffff;
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 400;
+  font-size: 14 * 2.5px;
+  line-height: 1.428em;
+  color: #455363;
+  cursor: pointer;
+
+  &:hover {
+    border-color: #ff7bac;
+  }
+}
+
+.page-size-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  background: #ffffff;
+  border: 1 * 2.5px solid #e0e0e6;
+  border-radius: 3 * 2.5px;
+  box-shadow: 0 2 * 2.5px 8 * 2.5px rgba(0, 0, 0, 0.1);
+  z-index: 1000;
+  margin-top: 2 * 2.5px;
+}
+
+.page-size-option {
+  padding: 8 * 2.5px 12 * 2.5px;
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 400;
+  font-size: 14 * 2.5px;
+  line-height: 1.428em;
+  color: #455363;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+
+  &:hover {
+    background: #fff0f5;
+  }
+
+  &.active {
+    background: #fff0f5;
+    color: #ff7bac;
+  }
+}
+
+.goto-section {
+  display: flex;
+  align-items: center;
+  gap: 8 * 2.5px;
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 400;
+  font-size: 14 * 2.5px;
+  line-height: 1.428em;
+  color: #455363;
+  margin-right: 16 * 2.5px;
+}
+
+.goto-input {
+  width: 60 * 2.5px;
+  height: 28 * 2.5px;
+  padding: 4 * 2.5px 12 * 2.5px;
+  border: 1 * 2.5px solid #e0e0e6;
+  border-radius: 3 * 2.5px;
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 400;
+  font-size: 14 * 2.5px;
+  line-height: 1.428em;
+  color: #455363;
+  text-align: center;
+
+  &:focus {
+    outline: none;
+    border-color: #ff7bac;
   }
 }
 </style>
diff --git a/src/views/historic-stock/size1440/index.vue b/src/views/historic-stock/size1440/index.vue
index dc05e77..7277f5f 100644
--- a/src/views/historic-stock/size1440/index.vue
+++ b/src/views/historic-stock/size1440/index.vue
@@ -677,9 +677,9 @@ const getPageData = async () => {
     background: #fff8fb;
   }
 
-  &:last-child {
-    border-bottom: none;
-  }
+  // &:last-child {
+  //   border-bottom: none;
+  // }
 
   &:nth-child(even) {
     margin: 4px 0;
diff --git a/src/views/historic-stock/size1920/index.vue b/src/views/historic-stock/size1920/index.vue
index ae99b5b..2d979be 100644
--- a/src/views/historic-stock/size1920/index.vue
+++ b/src/views/historic-stock/size1920/index.vue
@@ -676,9 +676,9 @@ const getPageData = async () => {
     background: #fff8fb;
   }
 
-  &:last-child {
-    border-bottom: none;
-  }
+  // &:last-child {
+  //   border-bottom: none;
+  // }
 
   &:nth-child(even) {
     margin: 4px 0;
diff --git a/src/views/press-releases/size1440/index.vue b/src/views/press-releases/size1440/index.vue
index cd0bcc3..40cd3d8 100644
--- a/src/views/press-releases/size1440/index.vue
+++ b/src/views/press-releases/size1440/index.vue
@@ -539,6 +539,7 @@ const handleClickOutside = (event) => {
   display: flex;
   flex-direction: column;
   gap: 4px;
+  background: #fff;
 }
 
 .table-row {
@@ -547,11 +548,11 @@ const handleClickOutside = (event) => {
   position: relative;
   border-radius: 8px;
 
-  &:last-child {
-    .separator-line {
-      display: none;
-    }
-  }
+  // &:last-child {
+  //   .separator-line {
+  //     display: none;
+  //   }
+  // }
 }
 
 .content {
@@ -656,6 +657,7 @@ const handleClickOutside = (event) => {
   display: flex;
   align-items: center;
   justify-content: flex-end;
+  margin-top: 20px;
   margin-bottom: 30px;
   gap: 21px;
 }
diff --git a/src/views/press-releases/size1920/index.vue b/src/views/press-releases/size1920/index.vue
index 29f95ea..618e302 100644
--- a/src/views/press-releases/size1920/index.vue
+++ b/src/views/press-releases/size1920/index.vue
@@ -535,6 +535,7 @@ const handleClickOutside = (event) => {
   display: flex;
   flex-direction: column;
   gap: 4px;
+  background: #fff;
 }
 
 .table-row {
@@ -543,11 +544,11 @@ const handleClickOutside = (event) => {
   position: relative;
   border-radius: 8px;
 
-  &:last-child {
-    .separator-line {
-      display: none;
-    }
-  }
+  // &:last-child {
+  //   .separator-line {
+  //     display: none;
+  //   }
+  // }
 }
 
 .content {
diff --git a/src/views/product-introduction/index.vue b/src/views/product-introduction/index.vue
index 6b97869..973ca46 100644
--- a/src/views/product-introduction/index.vue
+++ b/src/views/product-introduction/index.vue
@@ -3,7 +3,7 @@ import { computed } from "vue";
 import { useWindowSize } from "@vueuse/core";
 
 // import size375 from "./size375/index.vue";
-// import size768 from "./size768/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";
diff --git a/src/views/product-introduction/size768/index.vue b/src/views/product-introduction/size768/index.vue
index e69de29..315dab6 100644
--- a/src/views/product-introduction/size768/index.vue
+++ b/src/views/product-introduction/size768/index.vue
@@ -0,0 +1,619 @@
+<script setup></script>
+
+<template>
+  <div class="page-container">
+    <div class="grid-lines px-fixed">
+      <div class="line solid line-1"></div>
+      <div class="line dashed line-2"></div>
+      <div class="line dashed line-3"></div>
+      <div class="line dashed line-4"></div>
+      <div class="line solid line-5"></div>
+    </div>
+    <section class="hero-section px-fixed relative">
+      <div class="hero-content">
+        <div class="hero-title">
+          More than just a tool——<br />
+          Comprehensive growth solutions, <br />
+          providing a one-stop solution for content creation,<br />
+          publishing, analysis, and monetization
+        </div>
+      </div>
+      <div class="core-value-card px-fixed">
+        <div class="card-content">
+          <div class="card-title">Core Value</div>
+          <div class="card-text">
+            The FIEE-SAAS platform is a one-stop content operation solution
+            tailored for creators in the digital era. The platform utilizes
+            intelligent distribution technology, A1 empowerment tools, and
+            full-chain services,Assist you in efficiently reaching audiences on
+            global mainstream platforms such as TikTok, YouTube, and Instagram,
+            creating a KOL brand effect, unlocking content value, and achieving
+            sustainable growth.
+          </div>
+        </div>
+      </div>
+      <img
+        src="@/assets/image/1440/product-introduction-img2.png"
+        alt="background"
+        class="hero-bg-img"
+      />
+    </section>
+
+    <section class="features-section px-fixed">
+      <div class="section-header">
+        <div class="decorator-bar"></div>
+        <div class="section-title">Product Features</div>
+      </div>
+      <div class="features-list">
+        <div class="feature-item">
+          <div class="feature-title">
+            <div class="vertical-line px-fixed"></div>
+            One-click Synchronous Publishing
+          </div>
+          <div class="feature-description">
+            Synchronize graphic and video content to TikTok, YouTube, and
+            Instagram platforms at once, saving time on repetitive operations.
+          </div>
+        </div>
+        <div class="feature-item">
+          <div class="feature-title">
+            <div class="vertical-line px-fixed"></div>
+            Intelligent Scheduled Publishing
+          </div>
+          <div class="feature-description">
+            Plan the content release time in advance, support batch scheduling,
+            and accurately grasp the optimal release time of each platform.
+          </div>
+        </div>
+        <div class="feature-item">
+          <div class="feature-title">
+            <div class="vertical-line px-fixed"></div>
+            Unified Management of Multiple Accounts
+          </div>
+          <div class="feature-description">
+            Easily manage multiple accounts on one platform without the need for
+            repeated login and switching, improving team collaboration
+            efficiency.
+          </div>
+        </div>
+        <div class="feature-item">
+          <div class="feature-title">
+            <div class="vertical-line px-fixed"></div>
+            Cloud Content Library
+          </div>
+          <div class="feature-description">
+            Safely store and manage all creative materials, access and use them
+            anytime, anywhere, and support quick retrieval and reuse.
+          </div>
+        </div>
+        <div class="feature-item">
+          <div class="feature-title">
+            <div class="vertical-line px-fixed"></div>
+            Basic Data Tracking
+          </div>
+          <div class="feature-description">
+            Visually view the content performance of various platforms,
+            understand core data indicators, and provide a basis for optimizing
+            strategies.
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="solutions-section px-fixed">
+      <div class="section-header">
+        <div class="decorator-bar"></div>
+        <div class="section-title">Value Added Solutions</div>
+      </div>
+      <div class="solutions-content">
+        <div class="solutions-list">
+          <div class="solution-item">
+            <img
+              src="@/assets/image/1440/product-introduction-icon1.png"
+              alt="KOL Brand Promotion"
+              class="solution-icon"
+            />
+            <div class="solution-title">
+              <div class="vertical-line px-fixed"></div>
+              KOL Brand Promotion Services
+            </div>
+            <div class="solution-description">
+              Efficiently connect high-quality business cooperation
+              opportunities and complete the entire process management from
+              order acceptance to publication within the platform.
+            </div>
+          </div>
+          <div class="solution-item">
+            <img
+              src="@/assets/image/1440/product-introduction-icon2.png"
+              alt="Content Creation Support"
+              class="solution-icon"
+            />
+            <div class="solution-title">
+              <div class="vertical-line px-fixed"></div>
+              Professional Content Creation Support
+            </div>
+            <div class="solution-description">
+              Connect professional shooting and post production teams for you,
+              create high-quality "art+story" content, and strengthen IP
+              influence.
+            </div>
+          </div>
+          <div class="solution-item">
+            <img
+              src="@/assets/image/1440/product-introduction-icon3.png"
+              alt="Account Operation"
+              class="solution-icon"
+            />
+            <div class="solution-title">
+              <div class="vertical-line px-fixed"></div>
+              Account Operation and Hosting Services
+            </div>
+            <div class="solution-description">
+              From 0 to 1 account positioning, follower growth strategy to
+              monetization cycle, operation experts provide full cycle running
+              and hosting services.
+            </div>
+          </div>
+        </div>
+        <div class="solution-image-container">
+          <img
+            src="@/assets/image/1440/product-introduction-img1.png"
+            alt="Value Added Solutions"
+            class="solution-image"
+            style="width: 434px"
+          />
+        </div>
+      </div>
+    </section>
+
+    <section class="advantages-section px-fixed">
+      <div class="advantages-content px-fixed">
+        <div class="advantages-header">
+          <div class="decorator-bar"></div>
+          <div class="section-title text-white">Our Advantages</div>
+        </div>
+
+        <div style="width: 50%">
+          <div class="advantages-list">
+            <div class="advantage-item">
+              <div class="advantage-title">
+                <div class="vertical-line px-fixed"></div>
+                Time Saving
+              </div>
+              <div class="advantage-description">
+                Multi platform publishing efficiency improvement, allowing you
+                to focus on content creation.
+              </div>
+            </div>
+
+            <div class="advantage-item">
+              <div class="advantage-title">
+                <div class="vertical-line px-fixed"></div>
+                Safe and Reliable
+              </div>
+              <div class="advantage-description">
+                Enterprise level data encryption and permission control ensure
+                account and content security.
+              </div>
+            </div>
+            <div class="advantage-item">
+              <div class="advantage-title">
+                <div class="vertical-line px-fixed"></div>
+                Maintain Consistency
+              </div>
+              <div class="advantage-description">
+                Ensure that brand information is presented uniformly on all
+                platforms.
+              </div>
+            </div>
+            <div class="advantage-item">
+              <div class="advantage-title">
+                <div class="vertical-line px-fixed"></div>
+                Data Driven
+              </div>
+              <div class="advantage-description">
+                Optimizing Content Strategies Based on Actual Performance.
+              </div>
+            </div>
+            <div class="advantage-item">
+              <div class="advantage-title">
+                <div class="vertical-line px-fixed"></div>
+                Easy to Use
+              </div>
+              <div class="advantage-description">
+                Intuitive interface design, no need for professional technical
+                background.
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="cta-section px-fixed">
+      <img
+        src="@/assets/image/1440/product-introduction-img5.png"
+        alt="background"
+        class="cta-bg-img"
+      />
+      <div class="cta-content">
+        <div class="cta-text">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="60"
+            height="32"
+            viewBox="0 0 60 32"
+            fill="none"
+          >
+            <path
+              d="M42.4968 0.636391C43.3437 -0.21213 44.7165 -0.21213 45.5635 0.636391L59.3648 14.4638C60.2117 15.3123 60.2117 16.6877 59.3648 17.5362L45.5635 31.3636C44.7165 32.2121 43.3437 32.2121 42.4968 31.3636C41.6499 30.5151 41.6499 29.1397 42.4968 28.2912L52.5962 18.1728H2.16868C0.970951 18.1728 0 17.2 0 16C0 14.8 0.970951 13.8272 2.16868 13.8272H52.5962L42.4968 3.70883C41.6499 2.86031 41.6499 1.48491 42.4968 0.636391Z"
+              fill="#FF7BAC"
+            />
+          </svg>
+          <div class="cta-title">
+            Get customized <br />
+            solutions for free
+          </div>
+        </div>
+        <div class="cta-qr-code">
+          <img
+            src="@/assets/image/1440/product-introduction-img6.png"
+            alt="QR Code"
+          />
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<style scoped>
+.page-container {
+  background-color: #fff;
+  font-family: "PingFang SC", sans-serif;
+  margin: 0 auto;
+  position: relative;
+}
+
+.hero-section.px-fixed {
+  text-align: center;
+  position: relative;
+  background-image: url("@/assets/image/1440/product-introduction-img3.png");
+  background-repeat: no-repeat;
+  background-size: 100% auto;
+  background-position: top;
+}
+
+.hero-content {
+  position: relative;
+  z-index: 2;
+}
+
+.hero-title {
+  font-size: 40px;
+  font-weight: 500;
+  line-height: 56px;
+  letter-spacing: 1.2px;
+  padding: 153px 0;
+  color: #000;
+  z-index: 2;
+}
+.hero-bg-img {
+  position: absolute;
+  bottom: -204px;
+  left: 0;
+  width: 100%;
+  z-index: 1;
+}
+.core-value-card.px-fixed {
+  width: 932px;
+  padding: 40px 32px;
+  margin: 0 auto;
+  background-color: #fff;
+  border-radius: 16px;
+  box-shadow: 0px 3px 14px 0px rgba(0, 0, 0, 0.16);
+  text-align: left;
+  z-index: 2;
+  position: relative;
+}
+
+.card-content {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+}
+
+.card-title {
+  font-size: 40px;
+  font-weight: 500;
+  line-height: 56px;
+  letter-spacing: 1.2px;
+}
+
+.card-text {
+  font-size: 16px;
+  line-height: 22px;
+  color: #455363;
+  letter-spacing: 0.48px;
+}
+
+.section-header {
+  margin-bottom: 32px;
+  padding: 0 16px;
+}
+
+.decorator-bar {
+  width: 58px;
+  height: 7px;
+  background-color: #ff7bac;
+  margin-bottom: 16px;
+}
+
+.section-title {
+  font-size: 40px;
+  font-weight: 500;
+  line-height: 56px;
+  letter-spacing: 1.2px;
+  color: #000;
+}
+.features-section.px-fixed {
+  padding-top: 200px;
+  width: 932px;
+  margin: 0 auto;
+}
+.features-list {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+}
+
+.feature-item {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.feature-title {
+  font-size: 24px;
+  font-weight: 500;
+  line-height: 32px;
+  letter-spacing: 1.2px;
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+}
+.feature-description {
+  font-size: 16px;
+  line-height: 22px;
+  color: #455363;
+  letter-spacing: 0.48px;
+  padding: 0 16px;
+  text-align: justify;
+  font-feature-settings: "liga" off, "clig" off;
+}
+
+.solutions-section.px-fixed {
+  padding-top: 80px;
+  width: 932px;
+  margin: 0 auto;
+}
+.solutions-content {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+}
+.solutions-list {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  width: 466px;
+}
+.solution-item {
+  text-align: left;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+.solution-icon {
+  width: 92px;
+  height: 76px;
+  padding-left: 16px;
+}
+.solution-title {
+  font-family: "PingFang SC";
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 32px; /* 133.333% */
+  letter-spacing: 1.2px;
+  display: flex;
+  gap: 16px;
+  align-items: flex-start;
+}
+.solution-description {
+  align-self: stretch;
+  color: #455363;
+  padding: 0 16px;
+
+  text-align: justify;
+  font-feature-settings: "liga" off, "clig" off;
+  /* 正文 */
+  font-family: "PingFang SC";
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 22px; /* 137.5% */
+  letter-spacing: 0.48px;
+}
+.solution-image-container {
+  width: 434px;
+  border-radius: 16px;
+  margin: 0 auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.solution-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 16px;
+}
+
+.advantages-section.px-fixed {
+  margin-top: 80px;
+  padding: 80px 0;
+  background-image: url("@/assets/image/1440/product-introduction-img4.png");
+  background-size: cover;
+  background-position: center;
+  color: #fff;
+  position: relative;
+}
+
+.advantages-content.px-fixed {
+  width: 932px;
+  margin: 0 auto;
+  display: flex;
+  justify-content: space-between;
+  position: relative;
+  z-index: 1;
+}
+
+.advantages-header {
+  width: 466px;
+  padding: 0 16px;
+}
+.advantages-list {
+  width: 466px;
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+}
+.advantage-item {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.advantage-title {
+  font-size: 24px;
+  font-weight: 500;
+  line-height: 32px;
+  letter-spacing: 1.2px;
+  display: flex;
+  gap: 16px;
+  align-items: flex-start;
+}
+.advantage-description {
+  font-size: 16px;
+  line-height: 22px;
+  letter-spacing: 0.48px;
+  opacity: 0.7;
+  padding: 0 16px;
+}
+.text-white {
+  color: #fff;
+}
+
+.cta-section.px-fixed {
+  padding: 60px 0;
+  position: relative;
+  width: 932px;
+  margin: 0 auto;
+  overflow: hidden;
+}
+.cta-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 16px;
+  position: relative;
+  z-index: 1;
+}
+.cta-text {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 188px;
+}
+.cta-arrow {
+  width: 60px;
+  height: 32px;
+}
+.cta-title {
+  font-size: 40px;
+  font-weight: 500;
+  line-height: 56px;
+  letter-spacing: 1.2px;
+}
+.cta-qr-code {
+  width: 188px;
+  height: 188px;
+  background-color: #90ffff;
+  border-radius: 16px;
+  padding: 14px;
+}
+.cta-qr-code img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+.cta-bg-img {
+  position: absolute;
+  top: 80px;
+  left: 355px;
+  width: 530px;
+  height: 268px;
+  opacity: 0.8;
+  z-index: 0;
+}
+.vertical-line.px-fixed {
+  width: 1px;
+  height: 16px;
+  background: #ff7bac;
+  flex-shrink: 0;
+  margin-top: 6px;
+}
+
+.grid-lines.px-fixed {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 932px;
+  height: 100%;
+  pointer-events: none;
+  z-index: 0;
+}
+
+.grid-lines .line {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+}
+
+.grid-lines .line.solid {
+  width: 1px;
+  background-color: rgba(0, 0, 0, 0.08);
+}
+
+.grid-lines .line.dashed {
+  width: 0;
+  border-left: 1px dotted rgba(0, 0, 0, 0.12);
+}
+
+.grid-lines .line-1 {
+  left: 0;
+}
+.grid-lines .line-2 {
+  left: 310px;
+}
+.grid-lines .line-3 {
+  left: 620px;
+}
+.grid-lines .line-4 {
+  left: 930px;
+}
+.grid-lines .line-5 {
+  right: 0;
+}
+</style>