diff --git a/src/assets/image/content/bg_27.png b/src/assets/image/content/bg_27.png
new file mode 100644
index 0000000..7ea3fa9
Binary files /dev/null and b/src/assets/image/content/bg_27.png differ
diff --git a/src/assets/image/content/bg_29.png b/src/assets/image/content/bg_29.png
new file mode 100644
index 0000000..40d648a
Binary files /dev/null and b/src/assets/image/content/bg_29.png differ
diff --git a/src/assets/image/content/icon-link.png b/src/assets/image/content/icon-link.png
new file mode 100644
index 0000000..f4917e6
Binary files /dev/null and b/src/assets/image/content/icon-link.png differ
diff --git a/src/views/CommitteeAppointment/size1440/index.vue b/src/views/CommitteeAppointment/size1440/index.vue
index 525db27..f5520b7 100644
--- a/src/views/CommitteeAppointment/size1440/index.vue
+++ b/src/views/CommitteeAppointment/size1440/index.vue
@@ -1,118 +1,161 @@
 <template>
-  <div class="committees-page">
+  <div class="committees-page relative overflow-hidden z-[11] bg-[#ffffff]">
+    <div class="fixed bottom-0 z-[] bg-[#ffffff]">
+      <img
+        src="@/assets/image/content/bg_27.png"
+        class="w-[100vw] h-[611PX] relative"
+        alt=""
+      />
+    </div>
+    <div
+      class="fixed h-[100vh] left-[50%] translate-x-[-50%] z-[1]"
+      style="width: 900px; pointer-events: none; mix-blend-mode: multiply"
+    >
+      <img src="@/assets/image/content/line.png" class="w-[100%]" alt="" />
+      <img
+        src="@/assets/image/content/bg_25.png"
+        class="w-[100vw] h-[611PX] relative"
+        alt=""
+      />
+    </div>
     <!-- 标题区 -->
-
-    <div class="title mb-[50px] text-center">
+    <div class="title w-[900PX] mx-auto pl-[15PX] mb-[50px] text-left">
       <h1 style="font-size: 40px; margin-top: 60px">Committee Composition</h1>
     </div>
-
-    <!-- 委员会表格 -->
-    <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'"
-                  style="font-size: 18px"
-                  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()]: true,
-                    chair: getCommitteeRole(director.name, 'Audit') === 'Chair',
-                  }"
-                >
-                  {{ getCommitteeRole(director.name, "Audit") }}
-                </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()]: true,
-                    chair:
-                      getCommitteeRole(director.name, 'Compensation') ===
-                      'Chair',
-                  }"
-                >
-                  {{ getCommitteeRole(director.name, "Compensation") }}
-                </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()]: true,
-                    chair:
-                      getCommitteeRole(director.name, 'Governance') === 'Chair',
-                  }"
-                >
-                  {{ getCommitteeRole(director.name, "Governance") }}
-                </div>
-              </template>
-            </div>
-          </div>
-        </div>
-      </div>
+    <div
+      class="w-[900PX] mx-auto overflow-hidden p-[10PX] relative z-99"
+      style="
+        border-radius: 16px;
+        background: #fff;
+        box-shadow: 0 3px 14px 0 rgba(0, 0, 0, 0.16);
+      "
+    >
+      <n-data-table
+        :columns="columns"
+        :data="data"
+        virtual-scroll-y
+        :bordered="false"
+        :bottom-bordered="false"
+        :scrollbar-props="{
+          trigger: 'none',
+        }"
+      />
     </div>
   </div>
 </template>
 
-<script setup>
+<script setup lang="jsx">
+import { NDataTable } from "naive-ui";
+
+const columns = [
+  {
+    title: "",
+    key: "name",
+    minWidth: 200,
+    fixed: "left",
+    align: "center",
+    className: "name",
+
+    render(row) {
+      return (
+        <router-link
+          to="/boarddirectors"
+          style={{ fontSize: "18px" }}
+          class="director-link text-[#ff7bac] font-bold"
+        >
+          {row.name}
+        </router-link>
+      );
+    },
+  },
+  {
+    key: "auditCommittee",
+    align: "center",
+    minWidth: 200,
+    className: "auditCommittee",
+    title() {
+      return <h3>Audit Committee</h3>;
+    },
+    render(row) {
+      return (
+        <div style={{ borderLeft: "1px dashed #E7E7E7" }}>
+          <row.auditCommittee />
+        </div>
+      );
+    },
+  },
+  {
+    title() {
+      return <h3>Compensation Committee</h3>;
+    },
+    align: "center",
+    key: "compensationCommittee",
+    className: "compensationCommittee",
+    minWidth: 200,
+    render(row) {
+      return (
+        <div style={{ borderLeft: "1px dashed #E7E7E7" }}>
+          <row.compensationCommittee />
+        </div>
+      );
+    },
+  },
+  {
+    title() {
+      return <h3>Nominating and Corporate Governance Committee</h3>;
+    },
+    key: "governanceCommittee",
+    align: "center",
+    minWidth: 200,
+    className: "governanceCommittee",
+    render(row) {
+      return (
+        <div style={{ borderLeft: "1px dashed #E7E7E7" }}>
+          <row.governanceCommittee />
+        </div>
+      );
+    },
+  },
+];
+const data = [
+  {
+    name: "Hu Bin",
+    auditCommittee() {
+      return <div class="text-[#5C6976]">Member</div>;
+    },
+    compensationCommittee() {
+      return <div class="text-[#5C6976]">Member</div>;
+    },
+    governanceCommittee() {
+      return <div class="text-[#5C6976]">Member</div>;
+    },
+  },
+  {
+    name: "David Natan",
+    auditCommittee() {
+      return <div class="text-[#6CC7DC]">Chair</div>;
+    },
+    compensationCommittee() {
+      return <div class="text-[#5C6976]">Member</div>;
+    },
+    governanceCommittee() {
+      return <div class="text-[#5C6976]">Member</div>;
+    },
+  },
+  {
+    name: "Chan Oi Fat",
+    auditCommittee() {
+      return <div class="text-[#5C6976]">Member</div>;
+    },
+    compensationCommittee() {
+      return <div class="text-[#6CC7DC]">Chair</div>;
+    },
+    governanceCommittee() {
+      return <div class="text-[#6CC7DC]">Chair</div>;
+    },
+  },
+];
+
 const otherDirectors = [
   // {
   //   name: "Cao Yu",
@@ -150,31 +193,52 @@ const getCommitteeRole = (name, committee) => {
 };
 </script>
 
-<style scoped>
+<style></style>
+<style scoped lang="scss">
+:deep(
+    .n-data-table
+      .n-data-table-tr:not(.n-data-table-tr--summary):hover
+      > .n-data-table-td
+  ) {
+  background-color: #f8f8f8 !important;
+}
+:deep(.n-data-table-th) {
+  background: #fff0f5 !important;
+  &:first-child {
+    border-top-left-radius: 16px;
+    border-bottom-left-radius: 16px;
+  }
+  &:last-child {
+    border-top-right-radius: 16px;
+    border-bottom-right-radius: 16px;
+  }
+}
+:deep(.n-data-table-thead) {
+  background-color: none;
+}
+:deep(.n-data-table-td) {
+  border: none;
+}
+:deep(.n-data-table-th) {
+  border: none;
+}
+:deep(.n-data-table-tr) {
+  > td {
+    &:first-child {
+      border-top-left-radius: 16px;
+      border-bottom-left-radius: 16px;
+    }
+    &:last-child {
+      border-top-right-radius: 16px;
+      border-bottom-right-radius: 16px;
+    }
+  }
+}
+
+/* 紫色主题变量 */
 .role-badge.chair {
   color: #00baff;
 }
-.title h1 {
-  position: relative;
-
-  &::after {
-    content: "";
-    position: absolute;
-    bottom: -14px;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 80px;
-    height: 3px;
-    background: #ff7bac;
-    border-radius: 3px;
-    transition: width 0.3s ease;
-  }
-
-  &:hover::after {
-    width: 120px;
-  }
-}
-/* 紫色主题变量 */
 :root {
   --primary: #895bff;
   --primary-light: #a07cff;
@@ -188,7 +252,25 @@ const getCommitteeRole = (name, committee) => {
   background-repeat: no-repeat;
   min-height: 100vh;
 }
+.title h1 {
+  position: relative;
 
+  &::after {
+    content: "";
+    position: absolute;
+    left: 0;
+    width: 60px;
+    top: -5px;
+    height: 5px;
+    background: #ff7bac;
+    // border-radius: 3px;
+    transition: width 0.3s ease;
+  }
+
+  &:hover::after {
+    width: 120px;
+  }
+}
 /* 标题区设计 */
 .hero-section {
   background: linear-gradient(
diff --git a/src/views/CommitteeAppointment/size1920/index.vue b/src/views/CommitteeAppointment/size1920/index.vue
index b226510..f5520b7 100644
--- a/src/views/CommitteeAppointment/size1920/index.vue
+++ b/src/views/CommitteeAppointment/size1920/index.vue
@@ -1,114 +1,45 @@
 <template>
-  <div class="committees-page">
+  <div class="committees-page relative overflow-hidden z-[11] bg-[#ffffff]">
+    <div class="fixed bottom-0 z-[] bg-[#ffffff]">
+      <img
+        src="@/assets/image/content/bg_27.png"
+        class="w-[100vw] h-[611PX] relative"
+        alt=""
+      />
+    </div>
+    <div
+      class="fixed h-[100vh] left-[50%] translate-x-[-50%] z-[1]"
+      style="width: 900px; pointer-events: none; mix-blend-mode: multiply"
+    >
+      <img src="@/assets/image/content/line.png" class="w-[100%]" alt="" />
+      <img
+        src="@/assets/image/content/bg_25.png"
+        class="w-[100vw] h-[611PX] relative"
+        alt=""
+      />
+    </div>
     <!-- 标题区 -->
-    <div class="title mb-[50px] text-center">
+    <div class="title w-[900PX] mx-auto pl-[15PX] mb-[50px] text-left">
       <h1 style="font-size: 40px; margin-top: 60px">Committee Composition</h1>
     </div>
-    <div class="w-[900PX] mx-auto">
-      <n-data-table :columns="columns" :data="data" virtual-scroll-y />
-    </div>
-
-    <!-- 委员会表格 -->
-    <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'"
-                  style="font-size: 18px"
-                  class="director-link"
-                >
-                  {{ director.name }}
-                </router-link>
-              </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()]: true,
-                    chair: getCommitteeRole(director.name, 'Audit') === 'Chair',
-                  }"
-                >
-                  {{ getCommitteeRole(director.name, "Audit") }}
-                </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()]: true,
-                    chair:
-                      getCommitteeRole(director.name, 'Compensation') ===
-                      'Chair',
-                  }"
-                >
-                  {{ getCommitteeRole(director.name, "Compensation") }}
-                </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()]: true,
-                    chair:
-                      getCommitteeRole(director.name, 'Governance') === 'Chair',
-                  }"
-                >
-                  {{ getCommitteeRole(director.name, "Governance") }}
-                </div>
-              </template>
-            </div>
-          </div>
-        </div>
-      </div>
+    <div
+      class="w-[900PX] mx-auto overflow-hidden p-[10PX] relative z-99"
+      style="
+        border-radius: 16px;
+        background: #fff;
+        box-shadow: 0 3px 14px 0 rgba(0, 0, 0, 0.16);
+      "
+    >
+      <n-data-table
+        :columns="columns"
+        :data="data"
+        virtual-scroll-y
+        :bordered="false"
+        :bottom-bordered="false"
+        :scrollbar-props="{
+          trigger: 'none',
+        }"
+      />
     </div>
   </div>
 </template>
@@ -116,54 +47,115 @@
 <script setup lang="jsx">
 import { NDataTable } from "naive-ui";
 
-
 const columns = [
   {
     title: "",
     key: "name",
     minWidth: 200,
     fixed: "left",
-  },
-  {
-    // title: "Audit Committee",
-    key: "age",
-    minWidth: 200,
-    title(){
-      return  <h3>Audit Committee</h3>;
-    }
-  },
-  {
-    title(){
-      return  <h3>Compensation Committee</h3>;
+    align: "center",
+    className: "name",
+
+    render(row) {
+      return (
+        <router-link
+          to="/boarddirectors"
+          style={{ fontSize: "18px" }}
+          class="director-link text-[#ff7bac] font-bold"
+        >
+          {row.name}
+        </router-link>
+      );
     },
-    key: "age",
-    minWidth: 200,
   },
   {
-    title(){
-      return  <h3>Nominating and Corporate Governance Committee</h3>;
-    },
-    key: "age",
+    key: "auditCommittee",
+    align: "center",
     minWidth: 200,
+    className: "auditCommittee",
+    title() {
+      return <h3>Audit Committee</h3>;
+    },
+    render(row) {
+      return (
+        <div style={{ borderLeft: "1px dashed #E7E7E7" }}>
+          <row.auditCommittee />
+        </div>
+      );
+    },
+  },
+  {
+    title() {
+      return <h3>Compensation Committee</h3>;
+    },
+    align: "center",
+    key: "compensationCommittee",
+    className: "compensationCommittee",
+    minWidth: 200,
+    render(row) {
+      return (
+        <div style={{ borderLeft: "1px dashed #E7E7E7" }}>
+          <row.compensationCommittee />
+        </div>
+      );
+    },
+  },
+  {
+    title() {
+      return <h3>Nominating and Corporate Governance Committee</h3>;
+    },
+    key: "governanceCommittee",
+    align: "center",
+    minWidth: 200,
+    className: "governanceCommittee",
+    render(row) {
+      return (
+        <div style={{ borderLeft: "1px dashed #E7E7E7" }}>
+          <row.governanceCommittee />
+        </div>
+      );
+    },
   },
 ];
-
-let scrollX = 0;
-
 const data = [
   {
-    name: "Cao Yu",
-    age: 32,
-    address: "London, Park Lane no. 1",
+    name: "Hu Bin",
+    auditCommittee() {
+      return <div class="text-[#5C6976]">Member</div>;
+    },
+    compensationCommittee() {
+      return <div class="text-[#5C6976]">Member</div>;
+    },
+    governanceCommittee() {
+      return <div class="text-[#5C6976]">Member</div>;
+    },
   },
   {
-    name: "Cao Yu",
-    age: 32,
-    address: "London, Park Lane no. 1",
+    name: "David Natan",
+    auditCommittee() {
+      return <div class="text-[#6CC7DC]">Chair</div>;
+    },
+    compensationCommittee() {
+      return <div class="text-[#5C6976]">Member</div>;
+    },
+    governanceCommittee() {
+      return <div class="text-[#5C6976]">Member</div>;
+    },
+  },
+  {
+    name: "Chan Oi Fat",
+    auditCommittee() {
+      return <div class="text-[#5C6976]">Member</div>;
+    },
+    compensationCommittee() {
+      return <div class="text-[#6CC7DC]">Chair</div>;
+    },
+    governanceCommittee() {
+      return <div class="text-[#6CC7DC]">Chair</div>;
+    },
   },
 ];
 
-const heightForRow = () => 48;
 const otherDirectors = [
   // {
   //   name: "Cao Yu",
@@ -201,14 +193,46 @@ const getCommitteeRole = (name, committee) => {
 };
 </script>
 
-<style>
-th {
-  /* background: pink !important; */
+<style></style>
+<style scoped lang="scss">
+:deep(
+    .n-data-table
+      .n-data-table-tr:not(.n-data-table-tr--summary):hover
+      > .n-data-table-td
+  ) {
+  background-color: #f8f8f8 !important;
 }
-</style>
-<style scoped>
 :deep(.n-data-table-th) {
-  background: #FFF0F5 !important;
+  background: #fff0f5 !important;
+  &:first-child {
+    border-top-left-radius: 16px;
+    border-bottom-left-radius: 16px;
+  }
+  &:last-child {
+    border-top-right-radius: 16px;
+    border-bottom-right-radius: 16px;
+  }
+}
+:deep(.n-data-table-thead) {
+  background-color: none;
+}
+:deep(.n-data-table-td) {
+  border: none;
+}
+:deep(.n-data-table-th) {
+  border: none;
+}
+:deep(.n-data-table-tr) {
+  > td {
+    &:first-child {
+      border-top-left-radius: 16px;
+      border-bottom-left-radius: 16px;
+    }
+    &:last-child {
+      border-top-right-radius: 16px;
+      border-bottom-right-radius: 16px;
+    }
+  }
 }
 
 /* 紫色主题变量 */
@@ -234,13 +258,12 @@ th {
   &::after {
     content: "";
     position: absolute;
-    bottom: -14px;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 80px;
-    height: 3px;
+    left: 0;
+    width: 60px;
+    top: -5px;
+    height: 5px;
     background: #ff7bac;
-    border-radius: 3px;
+    // border-radius: 3px;
     transition: width 0.3s ease;
   }
 
diff --git a/src/views/CommitteeAppointment/size375/index.vue b/src/views/CommitteeAppointment/size375/index.vue
index d98e5ba..ffc1e03 100644
--- a/src/views/CommitteeAppointment/size375/index.vue
+++ b/src/views/CommitteeAppointment/size375/index.vue
@@ -1,45 +1,455 @@
 <template>
-  <n-data-table
-    :columns="columns"
-    :data="data"
-    :max-height="250"
-    virtual-scroll
-    virtual-scroll-x
-    :scroll-x="scrollX"
-    :min-row-height="48"
-    :height-for-row="heightForRow"
-    virtual-scroll-header
-    :header-height="48"
-  />
+  <div class="committees-page relative overflow-hidden z-[11] bg-[#ffffff]">
+    <div class="fixed bottom-0 z-[] bg-[#ffffff]">
+      <img
+        src="@/assets/image/content/bg_27.png"
+        class="w-[100vw] h-[611PX] relative"
+        alt=""
+      />
+    </div>
+    <div
+      class="fixed h-[100vh] left-[50%] translate-x-[-50%] z-[1]"
+      style="width: 343px; pointer-events: none; mix-blend-mode: multiply"
+    >
+      <img src="@/assets/image/content/line.png" class="w-[100%]" alt="" />
+      <img
+        src="@/assets/image/content/bg_25.png"
+        class="w-[100vw] h-[611PX] relative"
+        alt=""
+      />
+    </div>
+    <!-- 标题区 -->
+    <div class="title w-[343PX] mx-auto pl-[15PX] mb-[50px] text-leftPX] mx-auto pl-[15PX] mb-[50px] text-left">
+      <h1 style="font-size: 24px; margin-top: 60px">Committee Composition</h1>
+    </div>
+    <div
+      class="w-[343PX] mx-auto overflow-hidden p-[10PX] relative z-99"
+      style="
+        border-radius: 16px;
+        background: #fff;
+        box-shadow: 0 3px 14px 0 rgba(0, 0, 0, 0.16);
+      "
+    >
+      <n-data-table
+        :columns="columns"
+        :data="data"
+        virtual-scroll-y
+        :bordered="false"
+        :bottom-bordered="false"
+        :scrollbar-props="{
+          trigger: 'none'
+        }"
+      />
+    </div>
+  </div>
 </template>
 
-<script setup>
+<script setup lang="jsx">
 import { NDataTable } from "naive-ui";
 
+const columns = [
+  {
+    title: "",
+    key: "name",
+    minWidth: 100,
+    fixed: "left",
+    align: "center",
+    className: "name",
 
-const columns = [];
+    render(row) {
+      return (
+        <router-link
+          to="/boarddirectors"
+          style={{ fontSize: "18px" }}
+          class="director-link text-[#ff7bac] font-bold"
+        >
+          {row.name}
+        </router-link>
+      );
+    },
+  },
+  {
+    key: "auditCommittee",
+    align: "center",
+    minWidth: 200,
+    className: "auditCommittee",
+    title() {
+      return <h3>Audit Committee</h3>;
+    },
+    render(row) {
+      return (
+        <div style={{ borderLeft: "1px dashed #E7E7E7" }}>
+          <row.auditCommittee />
+        </div>
+      );
+    },
+  },
+  {
+    title() {
+      return <h3>Compensation Committee</h3>;
+    },
+    align: "center",
+    key: "compensationCommittee",
+    className: "compensationCommittee",
+    minWidth: 200,
+    render(row) {
+      return (
+        <div style={{ borderLeft: "1px dashed #E7E7E7" }}>
+          <row.compensationCommittee />
+        </div>
+      );
+    },
+  },
+  {
+    title() {
+      return <h3>Nominating and Corporate Governance Committee</h3>;
+    },
+    key: "governanceCommittee",
+    align: "center",
+    minWidth: 200,
+    className: "governanceCommittee",
+    render(row) {
+      return (
+        <div style={{ borderLeft: "1px dashed #E7E7E7" }}>
+          <row.governanceCommittee />
+        </div>
+      );
+    },
+  },
+];
+const data = [
+  {
+    name: "Hu Bin",
+    auditCommittee() {
+      return <div class="text-[#5C6976]">Member</div>;
+    },
+    compensationCommittee() {
+      return <div class="text-[#5C6976]">Member</div>;
+    },
+    governanceCommittee() {
+      return <div class="text-[#5C6976]">Member</div>;
+    },
+  },
+  {
+    name: "David Natan",
+    auditCommittee() {
+      return <div class="text-[#6CC7DC]">Chair</div>;
+    },
+    compensationCommittee() {
+      return <div class="text-[#5C6976]">Member</div>;
+    },
+    governanceCommittee() {
+      return <div class="text-[#5C6976]">Member</div>;
+    },
+  },
+  {
+    name: "Chan Oi Fat",
+    auditCommittee() {
+      return <div class="text-[#5C6976]">Member</div>;
+    },
+    compensationCommittee() {
+      return <div class="text-[#6CC7DC]">Chair</div>;
+    },
+    governanceCommittee() {
+      return <div class="text-[#6CC7DC]">Chair</div>;
+    },
+  },
+];
 
-let scrollX = 0;
+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" },
+];
 
-for (let i = 0; i < 1e3; ++i) {
-  scrollX += 100;
-  columns.push({
-    title: `Col ${i}`,
-    width: 100,
-    key: i,
-    fixed: i <= 1 ? "" : i > 997 ? "" : void 0,
-    render(_, rowIndex) {
-      return `${i}-${rowIndex}`;
+// Updated committee roles according to requirements
+const committeeRoles = {
+  "Cao Yu": {},
+  "David Lazar": {},
+  "Hu Bin": {
+    Audit: "Member",
+    Compensation: "Member",
+    Governance: "Member",
+  },
+  "David Natan": {
+    Audit: "Chair",
+    Compensation: "Member",
+    Governance: "Member",
+  },
+  "Chan Oi Fat": {
+    Audit: "Member",
+    Compensation: "Chair",
+    Governance: "Chair",
+  },
+};
+
+const getCommitteeRole = (name, committee) => {
+  return committeeRoles[name]?.[committee] || null;
+};
+</script>
+
+<style></style>
+<style scoped lang="scss">
+:deep(
+    .n-data-table
+      .n-data-table-tr:not(.n-data-table-tr--summary):hover
+      > .n-data-table-td
+  ) {
+  background-color: #f8f8f8 !important;
+}
+:deep(.n-data-table-th) {
+  background: #fff0f5 !important;
+  &:first-child {
+    border-top-left-radius: 16px;
+    border-bottom-left-radius: 16px;
+  }
+  &:last-child {
+    border-top-right-radius: 16px;
+    border-bottom-right-radius: 16px;
+  }
+}
+:deep(.n-data-table-thead) {
+  background-color: none;
+}
+:deep(.n-data-table-td) {
+  border: none;
+}
+:deep(.n-data-table-th) {
+  border: none;
+}
+:deep(.n-data-table-tr) {
+  > td {
+    &:first-child {
+      border-top-left-radius: 16px;
+      border-bottom-left-radius: 16px;
     }
-  });
+    &:last-child {
+      border-top-right-radius: 16px;
+      border-bottom-right-radius: 16px;
+    }
+  }
 }
 
-const data = Array.from({ length: 1e3 }).map((_, index) => ({
-  key: index,
-  name: `Edward King ${index}`,
-  age: 32,
-  address: `London, Park Lane no. ${index}`
-}));
+/* 紫色主题变量 */
+.role-badge.chair {
+  color: #00baff;
+}
+:root {
+  --primary: #895bff;
+  --primary-light: #a07cff;
+  --primary-dark: #6a11cb;
+  --primary-transparent: rgba(255, 123, 172, 0.1);
+}
 
-const heightForRow = () => 48;
-</script>
\ No newline at end of file
+.committees-page {
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+  min-height: 100vh;
+}
+.title h1 {
+  position: relative;
+
+  &::after {
+    content: "";
+    position: absolute;
+    left: 0;
+    width: 60PX;
+    top: -5PX;
+    height: 5PX
+    ;
+    background: #ff7bac;
+    // border-radius: 3px;
+    transition: width 0.3s ease;
+  }
+
+  &:hover::after {
+    width: 120px;
+  }
+}
+/* 标题区设计 */
+.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(255, 123, 172, 0.08);
+}
+
+.table-header,
+.table-row {
+  display: grid;
+  grid-template-columns: 1.5fr repeat(3, 1fr);
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.table-header {
+  background: #fff0f6;
+  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(255, 123, 172, 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: #ff7bac;
+  font-size: 18px;
+  font-weight: bold;
+  text-decoration: none;
+  transition: color 0.3s ease;
+}
+
+.director-link:hover {
+  color: var(--primary);
+  text-decoration: underline;
+}
+</style>
diff --git a/src/views/CommitteeAppointment/size768/index.vue b/src/views/CommitteeAppointment/size768/index.vue
index 28acbd0..278c87f 100644
--- a/src/views/CommitteeAppointment/size768/index.vue
+++ b/src/views/CommitteeAppointment/size768/index.vue
@@ -1,71 +1,161 @@
 <template>
-  <div class="board-members-page">
-    <!-- 页面头部 -->
-    <div class="title mb-[50px] text-center">
-      <h1 style="font-size: 40px; margin-top: 60px">Committee Composition</h1>
+  <div class="committees-page relative overflow-hidden z-[11] bg-[#ffffff]">
+    <div class="fixed bottom-0 z-[] bg-[#ffffff]">
+      <img
+        src="@/assets/image/content/bg_27.png"
+        class="w-[100vw] h-[611PX] relative"
+        alt=""
+      />
     </div>
-    <!-- 移动端视图 -->
-    <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="committee-position">
-                  <div
-                    class="role-badge"
-                    :class="
-                      getCommitteeRole(director.name, committee).toLowerCase()
-                    "
-                  >
-                    <span>{{ getCommitteeShortName(committee) }}</span>
-                  </div>
-                  <div style="font-size: 16px" class="role-title">
-                    {{ getCommitteeRole(director.name, committee) }}
-                  </div>
-                </div>
-              </template>
-            </div>
-          </div>
-        </div>
-      </div>
+    <div
+      class="fixed h-[100vh] left-[50%] translate-x-[-50%] z-[1]"
+      style="width: 618px; pointer-events: none; mix-blend-mode: multiply"
+    >
+      <img src="@/assets/image/content/line.png" class="w-[100%]" alt="" />
+      <img
+        src="@/assets/image/content/bg_25.png"
+        class="w-[100vw] h-[611PX] relative"
+        alt=""
+      />
+    </div>
+    <!-- 标题区 -->
+    <div class="title w-[618PX] mx-auto pl-[15PX] mb-[50px] text-left">
+      <h1 style="font-size: 32px; margin-top: 60px">Committee Composition</h1>
+    </div>
+    <div
+      class="w-[618PX] mx-auto overflow-hidden p-[10PX] relative z-99"
+      style="
+        border-radius: 16px;
+        background: #fff;
+        box-shadow: 0 3px 14px 0 rgba(0, 0, 0, 0.16);
+      "
+    >
+      <n-data-table
+        :columns="columns"
+        :data="data"
+        virtual-scroll-y
+        :bordered="false"
+        :bottom-bordered="false"
+        :scrollbar-props="{
+          trigger: 'none'
+        }"
+      />
     </div>
   </div>
 </template>
 
-<script setup>
-import { ref, computed } from "vue";
+<script setup lang="jsx">
+import { NDataTable } from "naive-ui";
+
+const columns = [
+  {
+    title: "",
+    key: "name",
+    minWidth: 200,
+    fixed: "left",
+    align: "center",
+    className: "name",
+
+    render(row) {
+      return (
+        <router-link
+          to="/boarddirectors"
+          style={{ fontSize: "18px" }}
+          class="director-link text-[#ff7bac] font-bold"
+        >
+          {row.name}
+        </router-link>
+      );
+    },
+  },
+  {
+    key: "auditCommittee",
+    align: "center",
+    minWidth: 200,
+    className: "auditCommittee",
+    title() {
+      return <h3>Audit Committee</h3>;
+    },
+    render(row) {
+      return (
+        <div style={{ borderLeft: "1px dashed #E7E7E7" }}>
+          <row.auditCommittee />
+        </div>
+      );
+    },
+  },
+  {
+    title() {
+      return <h3>Compensation Committee</h3>;
+    },
+    align: "center",
+    key: "compensationCommittee",
+    className: "compensationCommittee",
+    minWidth: 200,
+    render(row) {
+      return (
+        <div style={{ borderLeft: "1px dashed #E7E7E7" }}>
+          <row.compensationCommittee />
+        </div>
+      );
+    },
+  },
+  {
+    title() {
+      return <h3>Nominating and Corporate Governance Committee</h3>;
+    },
+    key: "governanceCommittee",
+    align: "center",
+    minWidth: 200,
+    className: "governanceCommittee",
+    render(row) {
+      return (
+        <div style={{ borderLeft: "1px dashed #E7E7E7" }}>
+          <row.governanceCommittee />
+        </div>
+      );
+    },
+  },
+];
+const data = [
+  {
+    name: "Hu Bin",
+    auditCommittee() {
+      return <div class="text-[#5C6976]">Member</div>;
+    },
+    compensationCommittee() {
+      return <div class="text-[#5C6976]">Member</div>;
+    },
+    governanceCommittee() {
+      return <div class="text-[#5C6976]">Member</div>;
+    },
+  },
+  {
+    name: "David Natan",
+    auditCommittee() {
+      return <div class="text-[#6CC7DC]">Chair</div>;
+    },
+    compensationCommittee() {
+      return <div class="text-[#5C6976]">Member</div>;
+    },
+    governanceCommittee() {
+      return <div class="text-[#5C6976]">Member</div>;
+    },
+  },
+  {
+    name: "Chan Oi Fat",
+    auditCommittee() {
+      return <div class="text-[#5C6976]">Member</div>;
+    },
+    compensationCommittee() {
+      return <div class="text-[#6CC7DC]">Chair</div>;
+    },
+    governanceCommittee() {
+      return <div class="text-[#6CC7DC]">Chair</div>;
+    },
+  },
+];
 
-// 董事会成员数据
 const otherDirectors = [
   // {
   //   name: "Cao Yu",
@@ -77,7 +167,7 @@ const otherDirectors = [
   { name: "Chan Oi Fat", title: "Director" },
 ];
 
-// 委员会角色数据 - 现在包含职位类型 (Chair/Member)
+// Updated committee roles according to requirements
 const committeeRoles = {
   "Cao Yu": {},
   "David Lazar": {},
@@ -98,77 +188,69 @@ const committeeRoles = {
   },
 };
 
-// 委员会完整名称
-const committeeFullNames = {
-  Audit: "Audit Committee",
-  Compensation: "Compensation Committee",
-  Governance: "Nominating and Corporate Governance Committee",
-};
-
-// 获取委员会列表
-const getCommittees = (name) => {
-  return Object.keys(committeeRoles[name] || {});
-};
-
-// 获取委员会角色 (Chair/Member)
 const getCommitteeRole = (name, committee) => {
-  return committeeRoles[name]?.[committee] || "";
-};
-
-// 获取委员会简称
-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();
+  return committeeRoles[name]?.[committee] || null;
 };
 </script>
 
-<style scoped>
-/* 添加这些样式来显示职位类型 */
-.committee-position {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  margin-bottom: 8px;
-}
-
-.role-title {
-  font-size: 12px;
-  color: #666;
-  margin-top: 4px;
-  text-transform: capitalize;
-}
-
-/* 保持原有的角色徽章样式 */
-.role-badge {
-  padding: 6px 12px;
-  border-radius: 20px;
-  font-size: 14px;
-  font-weight: 500;
-  display: inline-flex;
-  align-items: center;
+<style></style>
+<style scoped lang="scss">
+:deep(
+    .n-data-table
+      .n-data-table-tr:not(.n-data-table-tr--summary):hover
+      > .n-data-table-td
+  ) {
+  background-color: #f8f8f8 !important;
+}
+:deep(.n-data-table-th) {
+  background: #fff0f5 !important;
+  &:first-child {
+    border-top-left-radius: 16px;
+    border-bottom-left-radius: 16px;
+  }
+  &:last-child {
+    border-top-right-radius: 16px;
+    border-bottom-right-radius: 16px;
+  }
+}
+:deep(.n-data-table-thead) {
+  background-color: none;
+}
+:deep(.n-data-table-td) {
+  border: none;
+}
+:deep(.n-data-table-th) {
+  border: none;
+}
+:deep(.n-data-table-tr) {
+  > td {
+    &:first-child {
+      border-top-left-radius: 16px;
+      border-bottom-left-radius: 16px;
+    }
+    &:last-child {
+      border-top-right-radius: 16px;
+      border-bottom-right-radius: 16px;
+    }
+  }
 }
 
+/* 紫色主题变量 */
 .role-badge.chair {
-  background-color: #fcecf2;
-  color: #ff7bac;
+  color: #00baff;
+}
+:root {
+  --primary: #895bff;
+  --primary-light: #a07cff;
+  --primary-dark: #6a11cb;
+  --primary-transparent: rgba(255, 123, 172, 0.1);
 }
 
-.role-badge.member {
-  background-color: #f0f0f0;
-  color: #555;
+.committees-page {
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+  min-height: 100vh;
 }
 .title h1 {
   position: relative;
@@ -176,13 +258,13 @@ const getInitials = (name) => {
   &::after {
     content: "";
     position: absolute;
-    bottom: -14px;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 80px;
-    height: 3px;
+    left: 0;
+    width: 60PX;
+    top: -5PX;
+    height: 5PX
+    ;
     background: #ff7bac;
-    border-radius: 3px;
+    // border-radius: 3px;
     transition: width 0.3s ease;
   }
 
@@ -190,143 +272,184 @@ const getInitials = (name) => {
     width: 120px;
   }
 }
-/* 基础变量 */
-: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-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;
+  padding: 6rem 2rem;
   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;
+.hero-section h1 {
+  font-size: 2.8rem;
+  margin-bottom: 1rem;
 }
 
-.page-subtitle {
-  font-size: clamp(1rem, 3vw, 1.25rem);
+.hero-section p {
+  font-size: 1.2rem;
   opacity: 0.9;
 }
 
-/* 董事卡片 */
-.director-card {
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 2rem;
+}
+
+/* 表格设计 */
+.committees-table {
+  margin: 4rem 0;
   background: white;
-  border-radius: var(--border-radius);
-  margin-bottom: 1.5rem;
-  box-shadow: 0 5px 20px rgba(255, 123, 172, 0.08);
+  border-radius: 12px;
   overflow: hidden;
-  transform: translateY(20px);
-  opacity: 0;
-  animation: fadeIn 0.5s ease forwards;
-  animation-delay: var(--delay);
+  box-shadow: 0 10px 30px rgba(255, 123, 172, 0.08);
 }
 
-@keyframes fadeIn {
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.card-header {
-  color: #ff7bac;
-  padding: 1.25rem;
-  background: var(--bg-light);
+.table-header,
+.table-row {
+  display: grid;
+  grid-template-columns: 1.5fr repeat(3, 1fr);
   border-bottom: 1px solid #f0f0f0;
 }
 
+.table-header {
+  background: #fff0f6;
+  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: 1rem;
+  gap: 1.2rem;
 }
 
-.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-info h4 {
+  font-size: 1.1rem;
+  color: #333;
+  margin-bottom: 0.3rem;
 }
 
 .director-title {
-  font-size: 0.9rem;
-  color: var(--text-secondary);
-  line-height: 1.3;
-}
-
-/* 委员会职位 */
-.committee-groups {
-  padding: 1.25rem;
+  font-size: 0.85rem;
+  color: #666;
 }
 
+/* 职位徽章设计 */
 .role-badges {
   display: flex;
-  flex-wrap: wrap;
-  gap: 0.5rem;
+  flex-direction: column;
+  gap: 0.8rem;
 }
 
 .role-badge {
-  padding: 0.35rem 0.75rem;
-  border-radius: 16px;
-  font-size: 0.8rem;
+  padding: 0.5rem 1rem;
+  border-radius: 20px;
+  font-size: 0.85rem;
   font-weight: 500;
+  position: relative;
   display: inline-flex;
   align-items: center;
-  gap: 0.35rem;
-  background: rgba(255, 123, 172, 0.08);
-  color: var(--primary);
+  justify-content: center;
+  min-width: 80px;
 }
 
-.committee-name {
-  font-size: 0.75rem;
-  opacity: 0.8;
+.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(255, 123, 172, 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: #ff7bac;
+  font-size: 18px;
+  font-weight: bold;
+  text-decoration: none;
+  transition: color 0.3s ease;
+}
+
+.director-link:hover {
+  color: var(--primary);
+  text-decoration: underline;
 }
 </style>
diff --git a/src/views/financialinformation/annualreports/size1440/index.vue b/src/views/financialinformation/annualreports/size1440/index.vue
index 711288e..b7c1b94 100644
--- a/src/views/financialinformation/annualreports/size1440/index.vue
+++ b/src/views/financialinformation/annualreports/size1440/index.vue
@@ -1,30 +1,60 @@
 <template>
-  <div class="page-container">
-    <div class="financials-container">
+  <div class="page-container relative overflow-hidden z-[11] bg-[#ffffff]">
+    <div
+      class="fixed h-[100vh] left-[50%] translate-x-[-50%] z-[1]"
+      style="width: 900px; pointer-events: none; mix-blend-mode: multiply"
+    >
+      <img src="@/assets/image/content/line.png" class="w-[100%]" alt="" />
+    </div>
+    <div class="fixed z-[-1] top-[50%] translate-y-[-50%]">
+      <img
+        src="@/assets/image/content/bg_29.png"
+        class="w-[100vw] h-[445PX]"
+        alt=""
+      />
+    </div>
+    <div class="financials-container w-[900PX] relative z-99">
       <!-- 标题 -->
-      <div class="financials-title">
+      <div class="financials-title text-left font-bold text-[40PX] ml-[20PX]">
         {{ t("financialinformation.secfilings.title") }}
       </div>
 
       <!-- 公司财务概览 -->
       <section class="section">
-        <div class="section-title">
+        <div class="section-title font-bold pl-[20PX] text-[20PX]">
           {{ t("financialinformation.secfilings.overview.title") }}
         </div>
         <p
-          class="overview-text"
+          class="overview-text pl-[20PX] text-[#455363] text-[16PX]"
           v-html="t('financialinformation.secfilings.overview.desc')"
         ></p>
       </section>
 
       <!-- 年度报告 -->
       <section class="section">
-        <div class="section-title">
+        <div class="section-title font-bold pl-[20PX] text-[20PX]">
           {{ t("financialinformation.secfilings.annual_reports.title") }}
         </div>
+        <div
+          class="w-[900PX] overflow-auto p-[10PX] bg-[#fff]"
+          style="
+            border-radius: 16px;
+            background: #fff;
+            box-shadow: 0 3px 14px 0 rgba(0, 0, 0, 0.16);
+          "
+        >
+          <n-data-table
+            :columns="columns"
+            :data="annualReports"
+            :bordered="false"
+            :scrollbar-props="{
+              trigger: 'none',
+            }"
+          />
+        </div>
 
         <!-- 报告表格 -->
-        <div class="reports-table">
+        <div class="reports-table" v-if="0">
           <div class="table-header">
             <div class="column file-name">
               {{
@@ -59,43 +89,70 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="jsx">
 import { ref } from "vue";
 import { useI18n } from "vue-i18n";
+import { NSelect, NDataTable, NPagination, NButton, NIcon } from "naive-ui";
+import fileLink from "@/assets/image/content/icon-link.png";
+
+const columns = [
+  {
+    // title: "File Name",
+    dataIndex: "fileName",
+    key: "fileName",
+    title() {
+      return <div class="font-bold">File Name</div>;
+    },
+    render: (row) => {
+      return (
+        <div style={{ borderRight: "1px dashed #E7E7E7" }}>{row.fileName}</div>
+      );
+    },
+  },
+  {
+    // title: "Date",
+    dataIndex: "date",
+    key: "date",
+    title() {
+      return <div class="font-bold">Date</div>;
+    },
+    render: (row) => {
+      return (
+        <div style={{ borderRight: "1px dashed #E7E7E7" }}>{row.date}</div>
+      );
+    },
+  },
+  {
+    // title: "view",
+    align: "center",
+    title() {
+      return <div class="font-bold">View</div>;
+    },
+    dataIndex: "download",
+    key: "download",
+    align: "center",
+    render: (row) => {
+      return (
+        <div>
+          <a href={row.downloadUrl} class="download-link">
+            {/* {t("financialinformation.secfilings.annual_reports.view")} */}
+            <img src={fileLink} alt="" class="w-[24PX] h-[24PX]" />
+          </a>
+        </div>
+      );
+    },
+  },
+];
 
 const { t } = useI18n();
 // 年度报告数据
 const annualReports = ref([
-  {
-    fileName: "2024 Annual Report Amendment No.2",
-    date: "August 20, 2025",
-    downloadUrl:
-      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912625006571/fieeinc_10ka.htm",
-  },
-  {
-    fileName: "2024 Annual Report Amendment No.1",
-    date: "April 30, 2025",
-    downloadUrl:
-      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912625003214/fieeinc_10ka.htm",
-  },
   {
     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 Amendment",
-    date: "July 28, 2025",
-    downloadUrl:
-      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912625005429/fieeinc_10ka.htm",
-  },
-  {
-    fileName: "2023 Annual Report Amendment No.1",
-    date: "April 29, 2024",
-    downloadUrl:
-      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912624002836/miniminc_10ka.htm",
-  },
   {
     fileName: "2023 Annual Report",
     date: "April 12, 2024",
@@ -108,48 +165,24 @@ const annualReports = ref([
     downloadUrl:
       "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000149315223010335/form10-k.htm",
   },
-  {
-    fileName: "2021 Annual Report Amendment No.1",
-    date: "August 19, 2022",
-    downloadUrl:
-      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000149315222023610/form10ka.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 Amendment No.1",
-    date: "April 29, 2021",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000114036121015017/brhc10023805_10ka.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 Amendment No.1",
-    date: " April 29, 2020",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495420004635/zmtp_10ka.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 Amendment No.1",
-    date: "April 30, 2019",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495419005031/zmtp_10ka.htm",
-  },
   {
     fileName: "2018 Annual Report",
     date: "April 1, 2019",
@@ -214,36 +247,89 @@ const annualReports = ref([
 </script>
 
 <style scoped lang="scss">
+:deep(
+    .n-data-table
+      .n-data-table-tr:not(.n-data-table-tr--summary):hover
+      > .n-data-table-td
+  ) {
+  background-color: #fff8fb !important;
+}
+:deep(.n-data-table-th) {
+  background: #fff0f5 !important;
+  &:first-child {
+    border-top-left-radius: 8px;
+    border-bottom-left-radius: 8px;
+  }
+  &:last-child {
+    border-top-right-radius: 8px;
+    border-bottom-right-radius: 8px;
+  }
+}
+:deep(.n-data-table-thead) {
+  background-color: none;
+}
+:deep(.n-data-table-td) {
+  border: none;
+}
+:deep(.n-data-table-th) {
+  border: none;
+}
+:deep(.n-data-table-tr) {
+  > td {
+    &:first-child {
+      border-top-left-radius: 8px;
+      border-bottom-left-radius: 8px;
+    }
+    &:last-child {
+      border-top-right-radius: 8px;
+      border-bottom-right-radius: 8px;
+    }
+  }
+}
+
 .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;
+  // max-width: 1200px;
   margin: 0 auto;
-  padding: 20px;
+  padding-bottom: 60PX;
+  // padding: 20px;
 }
 
 .financials-title {
-  font-size: 40px;
-  text-align: center;
+  // font-size: 40px;
+  // text-align: center;
   margin-bottom: 60px;
+  margin-top: 60PX
+  ;
   color: #333;
+  position: relative;
+}
+.financials-title::before {
+  content: "";
+  position: absolute;
+  top: -5PX;
+  bottom: -10px;
+  width: 60PX;
+  height: 5PX;
+  background-color: #FF7BAC;
 }
 
 .section {
-  margin-bottom: 60px;
+  // margin-bottom: 60px;
 }
 
 .section-title {
-  font-size: 18px;
   margin-bottom: 20px;
   color: #333;
 }
 
 .overview-text {
-  font-size: 16px;
+  // font-size: 16px;
   line-height: 1.6;
   color: #333;
   margin-bottom: 30px;
diff --git a/src/views/financialinformation/annualreports/size1920/index.vue b/src/views/financialinformation/annualreports/size1920/index.vue
index 2144535..b7c1b94 100644
--- a/src/views/financialinformation/annualreports/size1920/index.vue
+++ b/src/views/financialinformation/annualreports/size1920/index.vue
@@ -1,30 +1,60 @@
 <template>
-  <div class="page-container">
-    <div class="financials-container">
+  <div class="page-container relative overflow-hidden z-[11] bg-[#ffffff]">
+    <div
+      class="fixed h-[100vh] left-[50%] translate-x-[-50%] z-[1]"
+      style="width: 900px; pointer-events: none; mix-blend-mode: multiply"
+    >
+      <img src="@/assets/image/content/line.png" class="w-[100%]" alt="" />
+    </div>
+    <div class="fixed z-[-1] top-[50%] translate-y-[-50%]">
+      <img
+        src="@/assets/image/content/bg_29.png"
+        class="w-[100vw] h-[445PX]"
+        alt=""
+      />
+    </div>
+    <div class="financials-container w-[900PX] relative z-99">
       <!-- 标题 -->
-      <div class="financials-title">
+      <div class="financials-title text-left font-bold text-[40PX] ml-[20PX]">
         {{ t("financialinformation.secfilings.title") }}
       </div>
 
       <!-- 公司财务概览 -->
       <section class="section">
-        <div class="section-title">
+        <div class="section-title font-bold pl-[20PX] text-[20PX]">
           {{ t("financialinformation.secfilings.overview.title") }}
         </div>
         <p
-          class="overview-text"
+          class="overview-text pl-[20PX] text-[#455363] text-[16PX]"
           v-html="t('financialinformation.secfilings.overview.desc')"
         ></p>
       </section>
 
       <!-- 年度报告 -->
       <section class="section">
-        <div class="section-title">
+        <div class="section-title font-bold pl-[20PX] text-[20PX]">
           {{ t("financialinformation.secfilings.annual_reports.title") }}
         </div>
+        <div
+          class="w-[900PX] overflow-auto p-[10PX] bg-[#fff]"
+          style="
+            border-radius: 16px;
+            background: #fff;
+            box-shadow: 0 3px 14px 0 rgba(0, 0, 0, 0.16);
+          "
+        >
+          <n-data-table
+            :columns="columns"
+            :data="annualReports"
+            :bordered="false"
+            :scrollbar-props="{
+              trigger: 'none',
+            }"
+          />
+        </div>
 
         <!-- 报告表格 -->
-        <div class="reports-table">
+        <div class="reports-table" v-if="0">
           <div class="table-header">
             <div class="column file-name">
               {{
@@ -59,9 +89,60 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="jsx">
 import { ref } from "vue";
 import { useI18n } from "vue-i18n";
+import { NSelect, NDataTable, NPagination, NButton, NIcon } from "naive-ui";
+import fileLink from "@/assets/image/content/icon-link.png";
+
+const columns = [
+  {
+    // title: "File Name",
+    dataIndex: "fileName",
+    key: "fileName",
+    title() {
+      return <div class="font-bold">File Name</div>;
+    },
+    render: (row) => {
+      return (
+        <div style={{ borderRight: "1px dashed #E7E7E7" }}>{row.fileName}</div>
+      );
+    },
+  },
+  {
+    // title: "Date",
+    dataIndex: "date",
+    key: "date",
+    title() {
+      return <div class="font-bold">Date</div>;
+    },
+    render: (row) => {
+      return (
+        <div style={{ borderRight: "1px dashed #E7E7E7" }}>{row.date}</div>
+      );
+    },
+  },
+  {
+    // title: "view",
+    align: "center",
+    title() {
+      return <div class="font-bold">View</div>;
+    },
+    dataIndex: "download",
+    key: "download",
+    align: "center",
+    render: (row) => {
+      return (
+        <div>
+          <a href={row.downloadUrl} class="download-link">
+            {/* {t("financialinformation.secfilings.annual_reports.view")} */}
+            <img src={fileLink} alt="" class="w-[24PX] h-[24PX]" />
+          </a>
+        </div>
+      );
+    },
+  },
+];
 
 const { t } = useI18n();
 // 年度报告数据
@@ -166,37 +247,89 @@ const annualReports = ref([
 </script>
 
 <style scoped lang="scss">
+:deep(
+    .n-data-table
+      .n-data-table-tr:not(.n-data-table-tr--summary):hover
+      > .n-data-table-td
+  ) {
+  background-color: #fff8fb !important;
+}
+:deep(.n-data-table-th) {
+  background: #fff0f5 !important;
+  &:first-child {
+    border-top-left-radius: 8px;
+    border-bottom-left-radius: 8px;
+  }
+  &:last-child {
+    border-top-right-radius: 8px;
+    border-bottom-right-radius: 8px;
+  }
+}
+:deep(.n-data-table-thead) {
+  background-color: none;
+}
+:deep(.n-data-table-td) {
+  border: none;
+}
+:deep(.n-data-table-th) {
+  border: none;
+}
+:deep(.n-data-table-tr) {
+  > td {
+    &:first-child {
+      border-top-left-radius: 8px;
+      border-bottom-left-radius: 8px;
+    }
+    &:last-child {
+      border-top-right-radius: 8px;
+      border-bottom-right-radius: 8px;
+    }
+  }
+}
+
 .page-container {
-  background-image: url("@/assets/image/bg.png");
+  // background-image: url("@/assets/image/bg.png");
   background-size: 100% 100%;
   background-position: center;
   background-repeat: no-repeat;
 }
 .financials-container {
-  max-width: 1200px;
+  // max-width: 1200px;
   margin: 0 auto;
-  padding: 20px;
+  padding-bottom: 60PX;
+  // padding: 20px;
 }
 
 .financials-title {
-  font-size: 40px;
-  text-align: center;
+  // font-size: 40px;
+  // text-align: center;
   margin-bottom: 60px;
+  margin-top: 60PX
+  ;
   color: #333;
+  position: relative;
+}
+.financials-title::before {
+  content: "";
+  position: absolute;
+  top: -5PX;
+  bottom: -10px;
+  width: 60PX;
+  height: 5PX;
+  background-color: #FF7BAC;
 }
 
 .section {
-  margin-bottom: 60px;
+  // margin-bottom: 60px;
 }
 
 .section-title {
-  font-size: 18px;
   margin-bottom: 20px;
   color: #333;
 }
 
 .overview-text {
-  font-size: 16px;
+  // font-size: 16px;
   line-height: 1.6;
   color: #333;
   margin-bottom: 30px;
diff --git a/src/views/financialinformation/annualreports/size375/index.vue b/src/views/financialinformation/annualreports/size375/index.vue
index 0697cea..ce0ee94 100644
--- a/src/views/financialinformation/annualreports/size375/index.vue
+++ b/src/views/financialinformation/annualreports/size375/index.vue
@@ -1,30 +1,60 @@
 <template>
-  <div class="page-container">
-    <div class="financials-container">
+  <div class="page-container relative overflow-hidden z-[11] bg-[#ffffff]">
+    <div
+      class="fixed h-[100vh] left-[50%] translate-x-[-50%] z-[1]"
+      style="width: 318px; pointer-events: none; mix-blend-mode: multiply"
+    >
+      <img src="@/assets/image/content/line.png" class="w-[100%]" alt="" />
+    </div>
+    <div class="fixed z-[-1] top-[50%] translate-y-[-50%]">
+      <img
+        src="@/assets/image/content/bg_29.png"
+        class="w-[100vw] h-[445PX]"
+        alt=""
+      />
+    </div>
+    <div class="financials-container w-[318PX] relative z-99">
       <!-- 标题 -->
-      <div class="financials-title">
+      <div class="financials-title text-left font-bold text-[40PX] ml-[20PX]">
         {{ t("financialinformation.secfilings.title") }}
       </div>
 
       <!-- 公司财务概览 -->
       <section class="section">
-        <div class="section-title">
+        <div class="section-title font-bold pl-[20PX] text-[20PX]">
           {{ t("financialinformation.secfilings.overview.title") }}
         </div>
         <p
-          class="overview-text"
+          class="overview-text pl-[20PX] text-[#455363] text-[14PX]"
           v-html="t('financialinformation.secfilings.overview.desc')"
         ></p>
       </section>
 
       <!-- 年度报告 -->
       <section class="section">
-        <div class="section-title">
+        <div class="section-title font-bold pl-[20PX] text-[20PX]">
           {{ t("financialinformation.secfilings.annual_reports.title") }}
         </div>
+        <div
+          class="w-[318PX] overflow-auto p-[10PX] bg-[#fff]"
+          style="
+            border-radius: 16px;
+            background: #fff;
+            box-shadow: 0 3px 14px 0 rgba(0, 0, 0, 0.16);
+          "
+        >
+          <n-data-table
+            :columns="columns"
+            :data="annualReports"
+            :bordered="false"
+            :scrollbar-props="{
+              trigger: 'none',
+            }"
+          />
+        </div>
 
         <!-- 报告表格 -->
-        <div class="reports-table">
+        <div class="reports-table" v-if="0">
           <div class="table-header">
             <div class="column file-name">
               {{
@@ -59,44 +89,73 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="jsx">
 import { ref } from "vue";
 import { useI18n } from "vue-i18n";
+import { NSelect, NDataTable, NPagination, NButton, NIcon } from "naive-ui";
+import fileLink from "@/assets/image/content/icon-link.png";
+
+const columns = [
+  {
+    // title: "File Name",
+    dataIndex: "fileName",
+    key: "fileName",
+    minWidth: 150,
+    title() {
+      return <div class="font-bold">File Name</div>;
+    },
+    render: (row) => {
+      return (
+        <div style={{ borderRight: "1px dashed #E7E7E7" }}>{row.fileName}</div>
+      );
+    },
+  },
+  {
+    // title: "Date",
+    dataIndex: "date",
+    key: "date",
+    minWidth: 150,
+    title() {
+      return <div class="font-bold">Date</div>;
+    },
+    render: (row) => {
+      return (
+        <div style={{ borderRight: "1px dashed #E7E7E7" }}>{row.date}</div>
+      );
+    },
+  },
+  {
+    // title: "view",
+    align: "center",
+    title() {
+      return <div class="font-bold">View</div>;
+    },
+    dataIndex: "download",
+    key: "download",
+    align: "center",
+    minWidth: 100,
+    render: (row) => {
+      return (
+        <div>
+          <a href={row.downloadUrl} class="download-link">
+            {/* {t("financialinformation.secfilings.annual_reports.view")} */}
+            <img src={fileLink} alt="" class="w-[24PX] h-[24PX]" />
+          </a>
+        </div>
+      );
+    },
+  },
+];
 
 const { t } = useI18n();
-
 // 年度报告数据
 const annualReports = ref([
-  {
-    fileName: "2024 Annual Report Amendment No.2",
-    date: "August 20, 2025",
-    downloadUrl:
-      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912625006571/fieeinc_10ka.htm",
-  },
-  {
-    fileName: "2024 Annual Report Amendment No.1",
-    date: "April 30, 2025",
-    downloadUrl:
-      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912625003214/fieeinc_10ka.htm",
-  },
   {
     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 Amendment",
-    date: "July 28, 2025",
-    downloadUrl:
-      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912625005429/fieeinc_10ka.htm",
-  },
-  {
-    fileName: "2023 Annual Report Amendment No.1",
-    date: "April 29, 2024",
-    downloadUrl:
-      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912624002836/miniminc_10ka.htm",
-  },
   {
     fileName: "2023 Annual Report",
     date: "April 12, 2024",
@@ -109,48 +168,24 @@ const annualReports = ref([
     downloadUrl:
       "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000149315223010335/form10-k.htm",
   },
-  {
-    fileName: "2021 Annual Report Amendment No.1",
-    date: "August 19, 2022",
-    downloadUrl:
-      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000149315222023610/form10ka.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 Amendment No.1",
-    date: "April 29, 2021",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000114036121015017/brhc10023805_10ka.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 Amendment No.1",
-    date: " April 29, 2020",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495420004635/zmtp_10ka.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 Amendment No.1",
-    date: "April 30, 2019",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495419005031/zmtp_10ka.htm",
-  },
   {
     fileName: "2018 Annual Report",
     date: "April 1, 2019",
@@ -215,37 +250,89 @@ const annualReports = ref([
 </script>
 
 <style scoped lang="scss">
+:deep(
+    .n-data-table
+      .n-data-table-tr:not(.n-data-table-tr--summary):hover
+      > .n-data-table-td
+  ) {
+  background-color: #fff8fb !important;
+}
+:deep(.n-data-table-th) {
+  background: #fff0f5 !important;
+  &:first-child {
+    border-top-left-radius: 8px;
+    border-bottom-left-radius: 8px;
+  }
+  &:last-child {
+    border-top-right-radius: 8px;
+    border-bottom-right-radius: 8px;
+  }
+}
+:deep(.n-data-table-thead) {
+  background-color: none;
+}
+:deep(.n-data-table-td) {
+  border: none;
+}
+:deep(.n-data-table-th) {
+  border: none;
+}
+:deep(.n-data-table-tr) {
+  > td {
+    &:first-child {
+      border-top-left-radius: 8px;
+      border-bottom-left-radius: 8px;
+    }
+    &:last-child {
+      border-top-right-radius: 8px;
+      border-bottom-right-radius: 8px;
+    }
+  }
+}
+
 .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: 80px;
+  padding-bottom: 60PX;
+  // padding: 20px;
 }
 
 .financials-title {
-  font-size: 113px;
-  font-weight: 600;
-  text-align: center;
+  // font-size: 40px;
+  // text-align: center;
   margin-bottom: 60px;
+  margin-top: 60PX
+  ;
   color: #333;
+  position: relative;
+}
+.financials-title::before {
+  content: "";
+  position: absolute;
+  top: -5PX;
+  bottom: -10px;
+  width: 60PX;
+  height: 5PX;
+  background-color: #FF7BAC;
 }
 
 .section {
-  margin-bottom: 60px;
+  // margin-bottom: 60px;
 }
 
 .section-title {
-  font-size: 92px;
-  font-weight: 600;
   margin-bottom: 20px;
   color: #333;
 }
 
 .overview-text {
-  font-size: 72px;
+  // font-size: 16px;
   line-height: 1.6;
   color: #333;
   margin-bottom: 30px;
@@ -282,7 +369,7 @@ const annualReports = ref([
 
 .table-row {
   display: flex;
-  padding: 45px 0;
+  padding: 15px 0;
   border-bottom: 1px solid #eee;
   align-items: center;
   justify-content: space-between;
@@ -293,13 +380,16 @@ const annualReports = ref([
 }
 .column {
   &.file-name {
-    width: 35%;
+    width: 25%;
   }
   &.date {
-    width: 35%;
+    width: 25%;
   }
+
   &.download {
-    margin-right: 100px;
+    width: 25%;
+    text-align: right;
+    margin-right: 50px;
   }
 }
 
@@ -318,7 +408,7 @@ const annualReports = ref([
 }
 
 .sec-text {
-  font-size: 72px;
+  font-size: 16px;
   line-height: 1.6;
 }
 
@@ -331,3 +421,4 @@ const annualReports = ref([
   }
 }
 </style>
+
diff --git a/src/views/financialinformation/annualreports/size768/index.vue b/src/views/financialinformation/annualreports/size768/index.vue
index 054978b..d073e4d 100644
--- a/src/views/financialinformation/annualreports/size768/index.vue
+++ b/src/views/financialinformation/annualreports/size768/index.vue
@@ -1,30 +1,60 @@
 <template>
-  <div class="page-container">
-    <div class="financials-container">
+  <div class="page-container relative overflow-hidden z-[11] bg-[#ffffff]">
+    <div
+      class="fixed h-[100vh] left-[50%] translate-x-[-50%] z-[1]"
+      style="width: 618px; pointer-events: none; mix-blend-mode: multiply"
+    >
+      <img src="@/assets/image/content/line.png" class="w-[100%]" alt="" />
+    </div>
+    <div class="fixed z-[-1] top-[50%] translate-y-[-50%]">
+      <img
+        src="@/assets/image/content/bg_29.png"
+        class="w-[100vw] h-[445PX]"
+        alt=""
+      />
+    </div>
+    <div class="financials-container w-[618PX] relative z-99">
       <!-- 标题 -->
-      <div class="financials-title">
+      <div class="financials-title text-left font-bold text-[40PX] ml-[20PX]">
         {{ t("financialinformation.secfilings.title") }}
       </div>
 
       <!-- 公司财务概览 -->
       <section class="section">
-        <div class="section-title">
+        <div class="section-title font-bold pl-[20PX] text-[20PX]">
           {{ t("financialinformation.secfilings.overview.title") }}
         </div>
         <p
-          class="overview-text"
+          class="overview-text pl-[20PX] text-[#455363] text-[14PX]"
           v-html="t('financialinformation.secfilings.overview.desc')"
         ></p>
       </section>
 
       <!-- 年度报告 -->
       <section class="section">
-        <div class="section-title">
+        <div class="section-title font-bold pl-[20PX] text-[20PX]">
           {{ t("financialinformation.secfilings.annual_reports.title") }}
         </div>
+        <div
+          class="w-[618PX] overflow-auto p-[10PX] bg-[#fff]"
+          style="
+            border-radius: 16px;
+            background: #fff;
+            box-shadow: 0 3px 14px 0 rgba(0, 0, 0, 0.16);
+          "
+        >
+          <n-data-table
+            :columns="columns"
+            :data="annualReports"
+            :bordered="false"
+            :scrollbar-props="{
+              trigger: 'none',
+            }"
+          />
+        </div>
 
         <!-- 报告表格 -->
-        <div class="reports-table">
+        <div class="reports-table" v-if="0">
           <div class="table-header">
             <div class="column file-name">
               {{
@@ -59,43 +89,70 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="jsx">
 import { ref } from "vue";
 import { useI18n } from "vue-i18n";
+import { NSelect, NDataTable, NPagination, NButton, NIcon } from "naive-ui";
+import fileLink from "@/assets/image/content/icon-link.png";
+
+const columns = [
+  {
+    // title: "File Name",
+    dataIndex: "fileName",
+    key: "fileName",
+    title() {
+      return <div class="font-bold">File Name</div>;
+    },
+    render: (row) => {
+      return (
+        <div style={{ borderRight: "1px dashed #E7E7E7" }}>{row.fileName}</div>
+      );
+    },
+  },
+  {
+    // title: "Date",
+    dataIndex: "date",
+    key: "date",
+    title() {
+      return <div class="font-bold">Date</div>;
+    },
+    render: (row) => {
+      return (
+        <div style={{ borderRight: "1px dashed #E7E7E7" }}>{row.date}</div>
+      );
+    },
+  },
+  {
+    // title: "view",
+    align: "center",
+    title() {
+      return <div class="font-bold">View</div>;
+    },
+    dataIndex: "download",
+    key: "download",
+    align: "center",
+    render: (row) => {
+      return (
+        <div>
+          <a href={row.downloadUrl} class="download-link">
+            {/* {t("financialinformation.secfilings.annual_reports.view")} */}
+            <img src={fileLink} alt="" class="w-[24PX] h-[24PX]" />
+          </a>
+        </div>
+      );
+    },
+  },
+];
 
 const { t } = useI18n();
 // 年度报告数据
 const annualReports = ref([
-  {
-    fileName: "2024 Annual Report Amendment No.2",
-    date: "August 20, 2025",
-    downloadUrl:
-      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912625006571/fieeinc_10ka.htm",
-  },
-  {
-    fileName: "2024 Annual Report Amendment No.1",
-    date: "April 30, 2025",
-    downloadUrl:
-      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912625003214/fieeinc_10ka.htm",
-  },
   {
     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 Amendment",
-    date: "July 28, 2025",
-    downloadUrl:
-      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912625005429/fieeinc_10ka.htm",
-  },
-  {
-    fileName: "2023 Annual Report Amendment No.1",
-    date: "April 29, 2024",
-    downloadUrl:
-      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912624002836/miniminc_10ka.htm",
-  },
   {
     fileName: "2023 Annual Report",
     date: "April 12, 2024",
@@ -108,48 +165,24 @@ const annualReports = ref([
     downloadUrl:
       "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000149315223010335/form10-k.htm",
   },
-  {
-    fileName: "2021 Annual Report Amendment No.1",
-    date: "August 19, 2022",
-    downloadUrl:
-      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000149315222023610/form10ka.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 Amendment No.1",
-    date: "April 29, 2021",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000114036121015017/brhc10023805_10ka.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 Amendment No.1",
-    date: " April 29, 2020",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495420004635/zmtp_10ka.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 Amendment No.1",
-    date: "April 30, 2019",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495419005031/zmtp_10ka.htm",
-  },
   {
     fileName: "2018 Annual Report",
     date: "April 1, 2019",
@@ -214,36 +247,89 @@ const annualReports = ref([
 </script>
 
 <style scoped lang="scss">
+:deep(
+    .n-data-table
+      .n-data-table-tr:not(.n-data-table-tr--summary):hover
+      > .n-data-table-td
+  ) {
+  background-color: #fff8fb !important;
+}
+:deep(.n-data-table-th) {
+  background: #fff0f5 !important;
+  &:first-child {
+    border-top-left-radius: 8px;
+    border-bottom-left-radius: 8px;
+  }
+  &:last-child {
+    border-top-right-radius: 8px;
+    border-bottom-right-radius: 8px;
+  }
+}
+:deep(.n-data-table-thead) {
+  background-color: none;
+}
+:deep(.n-data-table-td) {
+  border: none;
+}
+:deep(.n-data-table-th) {
+  border: none;
+}
+:deep(.n-data-table-tr) {
+  > td {
+    &:first-child {
+      border-top-left-radius: 8px;
+      border-bottom-left-radius: 8px;
+    }
+    &:last-child {
+      border-top-right-radius: 8px;
+      border-bottom-right-radius: 8px;
+    }
+  }
+}
+
 .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);
+  // max-width: 1200px;
   margin: 0 auto;
-  padding: 20px;
+  padding-bottom: 60PX;
+  // padding: 20px;
 }
 
 .financials-title {
-  font-size: 85px;
-  text-align: center;
+  // font-size: 40px;
+  // text-align: center;
   margin-bottom: 60px;
+  margin-top: 60PX
+  ;
   color: #333;
+  position: relative;
+}
+.financials-title::before {
+  content: "";
+  position: absolute;
+  top: -5PX;
+  bottom: -10px;
+  width: 60PX;
+  height: 5PX;
+  background-color: #FF7BAC;
 }
 
 .section {
-  margin-bottom: 60px;
+  // margin-bottom: 60px;
 }
 
 .section-title {
-  font-size: 50px;
   margin-bottom: 20px;
   color: #333;
 }
 
 .overview-text {
-  font-size: 40px;
+  // font-size: 16px;
   line-height: 1.6;
   color: #333;
   margin-bottom: 30px;
@@ -319,7 +405,7 @@ const annualReports = ref([
 }
 
 .sec-text {
-  font-size: 40px;
+  font-size: 16px;
   line-height: 1.6;
 }
 
@@ -332,3 +418,4 @@ const annualReports = ref([
   }
 }
 </style>
+
diff --git a/src/views/financialinformation/secfilings/size1440/index.vue b/src/views/financialinformation/secfilings/size1440/index.vue
index f1a7617..9d00eb6 100644
--- a/src/views/financialinformation/secfilings/size1440/index.vue
+++ b/src/views/financialinformation/secfilings/size1440/index.vue
@@ -1,36 +1,56 @@
 <template>
-  <div class="page-container">
-    <div class="sec-filings-container">
+  <div class="page-container relative overflow-hidden z-[11] bg-[#ffffff]">
+    <div
+      class="fixed h-[100vh] left-[50%] translate-x-[-50%] z-[1]"
+      style="width: 900px; pointer-events: none; mix-blend-mode: multiply"
+    >
+      <img src="@/assets/image/content/line.png" class="w-[100%]" alt="" />
+    </div>
+    <div class="fixed z-[-1] top-[50%] translate-y-[-50%]">
+      <img
+        src="@/assets/image/content/bg_29.png"
+        class="w-[100vw] h-[445PX]"
+        alt=""
+      />
+    </div>
+    <div class="sec-filings-container relative z-10 !w-[900PX] !p-0 !pb-[60PX]">
       <!-- 标题 -->
-      <div class="page-title">SEC Filings</div>
+      <div class="page-title ml-[30PX] mt-[50PX]">SEC Filings</div>
 
       <!-- 筛选器 -->
-      <div class="filters">
-        <div class="filter-group">
+      <div class="filters flex px-[30PX]">
+        <div class="filter-group flex-1 flex">
           <label class="filter-label">Filing year</label>
           <n-select
             v-model:value="state.selectedYear"
             :options="state.yearOptions"
             placeholder="- Any -"
-            style="width: 150px"
+            style="flex: 1"
             clearable
             @update:value="handleYearChange"
           />
         </div>
 
-        <div class="filter-group">
+        <div class="filter-group flex-1 flex">
           <label class="filter-label">Items per page:</label>
           <n-select
             v-model:value="state.pageSize"
             :options="state.pageSizeOptions"
-            style="width: 150px"
+            style="flex: 1"
             @update:value="handlePageSizeChange"
           />
         </div>
       </div>
 
       <!-- 表格 -->
-      <div class="table-container">
+      <div
+        class="table-container p-[16PX]"
+        style="
+          border-radius: 16px;
+          background: #fff;
+          box-shadow: 0 3px 14px 0 rgba(0, 0, 0, 0.16);
+        "
+      >
         <n-data-table
           :columns="columns"
           :loading="state.tableLoading"
@@ -41,38 +61,40 @@
           :row-key="(row) => row.idx"
           @update:sorter="handleSort"
         />
+      </div>
 
-        <!-- 分页器 -->
-        <div class="pagination-container">
-          <n-pagination
-            v-model:page="state.currentPage"
-            v-model:page-size="state.pageSize"
-            show-size-picker
-            show-quick-jumper
-            :item-count="state.total"
-            :page-sizes="[10, 25, 50]"
-            @update:page="handlePageChange"
-            @update:page-size="handlePageSizeChange"
-          >
-            <template #prev>
-              <span>‹ Previous</span>
-            </template>
-            <template #next>
-              <span>Next ›</span>
-            </template>
-          </n-pagination>
-
-          <div class="pagination-info">
-            Displaying {{ startIndex }} - {{ endIndex }} of
-            {{ state.total }} results
-          </div>
+      <!-- 分页器 -->
+      <div
+        class="pagination-container flex items-center justify-center mt-[15PX]"
+      >
+        <div class="pagination-info text-[#455363] mr-[15PX]">
+          Displaying {{ startIndex }} - {{ endIndex }} of
+          {{ state.total }} results
         </div>
+        <n-pagination
+          v-model:page="state.currentPage"
+          v-model:page-size="state.pageSize"
+          show-size-picker
+          show-quick-jumper
+          :item-count="state.total"
+          :page-sizes="[10, 25, 50]"
+          @update:page="handlePageChange"
+          @update:page-size="handlePageSizeChange"
+        >
+          <!-- <template #prev>
+            <span>‹ Previous</span>
+          </template>
+          <template #next>
+            <span>Next ›</span>
+          </template> -->
+        </n-pagination>
       </div>
     </div>
   </div>
 </template>
-<script setup>
-import { reactive, computed, h, onMounted } from "vue";
+
+<script setup lang="jsx">
+import { reactive, computed, h, onMounted, render } from "vue";
 import { NSelect, NDataTable, NPagination, NButton, NIcon } from "naive-ui";
 import { useI18n } from "vue-i18n";
 import { useRouter } from "vue-router";
@@ -82,7 +104,7 @@ const router = useRouter();
 import pdfFile from "@/assets/image/icon/icon-pdf.png";
 import wordFile from "@/assets/image/icon/icon-word.png";
 import excelFile from "@/assets/image/icon/icon-excel.png";
-import fileLink from "@/assets/image/icon/icon-link.png";
+import fileLink from "@/assets/image/content/icon-link.png";
 // 使用 reactive 管理所有状态
 const state = reactive({
   selectedYear: null,
@@ -249,20 +271,25 @@ const columns = [
     key: "filing_date",
     sorter: "default",
     width: 150,
+    render: (row) => (
+      <div style={{ borderRight: "1px dashed #E7E7E7" }}>{row.filing_date}</div>
+    ),
   },
   {
     title: "Form",
     key: "form",
-    width: 120,
+    width: 150,
+    align: "left",
     render: (row) => {
       return h(
-        "a",
+        "div",
         {
           href: "javascript:void(0)",
           style: {
-            color: "#0078d7",
+            color: "#FF7BAC",
             textDecoration: "none",
             cursor: "pointer",
+            borderRight: "1px dashed #E7E7E7",
           },
           onClick: (e) => {
             e.preventDefault();
@@ -287,9 +314,12 @@ const columns = [
   {
     title: "Description",
     key: "description",
-    ellipsis: {
-      tooltip: true,
-    },
+    // ellipsis: {
+    //   tooltip: true,
+    // },
+    render: (row) => (
+      <div style={{ borderRight: "1px dashed #E7E7E7" }}>{row.description}</div>
+    ),
   },
   {
     title: "View",
@@ -311,7 +341,7 @@ const columns = [
                 {
                   href: "javascript:void(0)",
                   style: {
-                    color: "#0078d7",
+                    color: "#FF7BAC",
                     textDecoration: "none",
                     fontSize: "12px",
                   },
@@ -469,27 +499,86 @@ const handleViewDocument = (val, type) => {
   );
 };
 </script>
+<!-- <style lang="scss">
+tr {
+  td {
+    &:not(:first-child) {
+      border-left: 1px dashed #0078d7 !important;
+    }
+  }
+}
+</style> -->
 
 <style scoped lang="scss">
+:deep(
+    .n-data-table
+      .n-data-table-tr:not(.n-data-table-tr--summary):hover
+      > .n-data-table-td
+  ) {
+  background-color: #fff8fb !important;
+}
+:deep(.n-data-table-th) {
+  background: #fff0f5 !important;
+  &:first-child {
+    border-top-left-radius: 8px;
+    border-bottom-left-radius: 8px;
+  }
+  &:last-child {
+    border-top-right-radius: 8px;
+    border-bottom-right-radius: 8px;
+  }
+}
+:deep(.n-data-table-thead) {
+  background-color: none;
+}
+:deep(.n-data-table-td) {
+  border: none;
+}
+:deep(.n-data-table-th) {
+  border: none;
+}
+:deep(.n-data-table-tr) {
+  > td {
+    &:first-child {
+      border-top-left-radius: 8px;
+      border-bottom-left-radius: 8px;
+    }
+    &:last-child {
+      border-top-right-radius: 8px;
+      border-bottom-right-radius: 8px;
+    }
+  }
+}
+
 .page-container {
   background-size: 100% 100%;
   background-position: center;
   background-repeat: no-repeat;
   min-height: 100vh;
-  padding: 20px;
+  // padding: 20px;
 }
 
 .sec-filings-container {
-  max-width: 1200px;
+  width: 900px;
   margin: 0 auto;
   padding: 40px;
 }
 
 .page-title {
-  font-size: 40px;
+  font-size: 32px;
   font-weight: bold;
   color: #333;
   margin-bottom: 40px;
+  position: relative;
+  &::before {
+    position: absolute;
+    content: "";
+    width: 60px;
+    top: -10px;
+    height: 4px;
+    background-color: #ff7bac;
+    left: 0;
+  }
 }
 
 .filters {
@@ -501,47 +590,16 @@ const handleViewDocument = (val, type) => {
 
 .filter-group {
   display: flex;
-  flex-direction: column;
+  // flex-direction: column;
+  align-items: center;
   gap: 8px;
 }
 
 .filter-label {
-  font-size: 18px;
-  color: #333;
+  font-size: 14PX;
+  color: #000;
   font-weight: 500;
-}
-
-.table-container {
-  .n-data-table {
-    --n-th-color: #f5f5f5;
-    --n-th-text-color: #333;
-    --n-td-color: #fff;
-    --n-border-color: #e0e0e0;
-  }
-}
-
-.pagination-container {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-top: 20px;
-  padding: 20px 0;
-}
-
-.pagination-info {
-  font-size: 16px;
-  color: #666;
-}
-
-:deep(.n-data-table-th) {
-  background-color: #9e9e9e !important;
-  color: white !important;
-  font-weight: bold;
-  text-align: left;
-}
-
-:deep(.n-data-table-td) {
-  border-bottom: 1px solid #e0e0e0;
+  margin-right: 10px;
 }
 
 :deep(.n-data-table-tr:hover .n-data-table-td) {
@@ -549,31 +607,31 @@ const handleViewDocument = (val, type) => {
 }
 
 :deep(.n-select) {
-  .n-base-selection {
-    border: 1px solid #ccc;
-    border-radius: 4px;
-  }
+  // .n-base-selection {
+  //   border: 1px solid #ccc;
+  //   border-radius: 4px;
+  // }
 }
 
-:deep(.n-pagination) {
-  .n-pagination-item {
-    border: 1px solid #ccc;
+// :deep(.n-pagination) {
+//   .n-pagination-item {
+//     border: 1px solid #ccc;
 
-    &.n-pagination-item--active {
-      background-color: #969696;
-      border-color: #969696;
-      color: white;
-    }
-  }
+//     &.n-pagination-item--active {
+//       background-color: #969696;
+//       border-color: #969696;
+//       color: white;
+//     }
+//   }
 
-  .n-pagination-quick-jumper {
-    font-size: 16px;
-  }
+//   .n-pagination-quick-jumper {
+//     font-size: 14px;
+//   }
 
-  .n-pagination-sizes {
-    font-size: 16px;
-  }
-}
+//   .n-pagination-sizes {
+//     font-size: 14px;
+//   }
+// }
 :deep(.n-base-loading__icon) {
   color: #ff7bac;
 }
diff --git a/src/views/financialinformation/secfilings/size1920/index.vue b/src/views/financialinformation/secfilings/size1920/index.vue
index 07fb7eb..9d00eb6 100644
--- a/src/views/financialinformation/secfilings/size1920/index.vue
+++ b/src/views/financialinformation/secfilings/size1920/index.vue
@@ -1,36 +1,56 @@
 <template>
-  <div class="page-container">
-    <div class="sec-filings-container">
+  <div class="page-container relative overflow-hidden z-[11] bg-[#ffffff]">
+    <div
+      class="fixed h-[100vh] left-[50%] translate-x-[-50%] z-[1]"
+      style="width: 900px; pointer-events: none; mix-blend-mode: multiply"
+    >
+      <img src="@/assets/image/content/line.png" class="w-[100%]" alt="" />
+    </div>
+    <div class="fixed z-[-1] top-[50%] translate-y-[-50%]">
+      <img
+        src="@/assets/image/content/bg_29.png"
+        class="w-[100vw] h-[445PX]"
+        alt=""
+      />
+    </div>
+    <div class="sec-filings-container relative z-10 !w-[900PX] !p-0 !pb-[60PX]">
       <!-- 标题 -->
-      <div class="page-title">SEC Filings</div>
+      <div class="page-title ml-[30PX] mt-[50PX]">SEC Filings</div>
 
       <!-- 筛选器 -->
-      <div class="filters">
-        <div class="filter-group">
+      <div class="filters flex px-[30PX]">
+        <div class="filter-group flex-1 flex">
           <label class="filter-label">Filing year</label>
           <n-select
             v-model:value="state.selectedYear"
             :options="state.yearOptions"
             placeholder="- Any -"
-            style="width: 150px"
+            style="flex: 1"
             clearable
             @update:value="handleYearChange"
           />
         </div>
 
-        <div class="filter-group">
+        <div class="filter-group flex-1 flex">
           <label class="filter-label">Items per page:</label>
           <n-select
             v-model:value="state.pageSize"
             :options="state.pageSizeOptions"
-            style="width: 150px"
+            style="flex: 1"
             @update:value="handlePageSizeChange"
           />
         </div>
       </div>
 
       <!-- 表格 -->
-      <div class="table-container">
+      <div
+        class="table-container p-[16PX]"
+        style="
+          border-radius: 16px;
+          background: #fff;
+          box-shadow: 0 3px 14px 0 rgba(0, 0, 0, 0.16);
+        "
+      >
         <n-data-table
           :columns="columns"
           :loading="state.tableLoading"
@@ -41,39 +61,40 @@
           :row-key="(row) => row.idx"
           @update:sorter="handleSort"
         />
+      </div>
 
-        <!-- 分页器 -->
-        <div class="pagination-container">
-          <n-pagination
-            v-model:page="state.currentPage"
-            v-model:page-size="state.pageSize"
-            show-size-picker
-            show-quick-jumper
-            :item-count="state.total"
-            :page-sizes="[10, 25, 50]"
-            @update:page="handlePageChange"
-            @update:page-size="handlePageSizeChange"
-          >
-            <template #prev>
-              <span>‹ Previous</span>
-            </template>
-            <template #next>
-              <span>Next ›</span>
-            </template>
-          </n-pagination>
-
-          <div class="pagination-info">
-            Displaying {{ startIndex }} - {{ endIndex }} of
-            {{ state.total }} results
-          </div>
+      <!-- 分页器 -->
+      <div
+        class="pagination-container flex items-center justify-center mt-[15PX]"
+      >
+        <div class="pagination-info text-[#455363] mr-[15PX]">
+          Displaying {{ startIndex }} - {{ endIndex }} of
+          {{ state.total }} results
         </div>
+        <n-pagination
+          v-model:page="state.currentPage"
+          v-model:page-size="state.pageSize"
+          show-size-picker
+          show-quick-jumper
+          :item-count="state.total"
+          :page-sizes="[10, 25, 50]"
+          @update:page="handlePageChange"
+          @update:page-size="handlePageSizeChange"
+        >
+          <!-- <template #prev>
+            <span>‹ Previous</span>
+          </template>
+          <template #next>
+            <span>Next ›</span>
+          </template> -->
+        </n-pagination>
       </div>
     </div>
   </div>
 </template>
 
-<script setup>
-import { reactive, computed, h, onMounted } from "vue";
+<script setup lang="jsx">
+import { reactive, computed, h, onMounted, render } from "vue";
 import { NSelect, NDataTable, NPagination, NButton, NIcon } from "naive-ui";
 import { useI18n } from "vue-i18n";
 import { useRouter } from "vue-router";
@@ -83,7 +104,7 @@ const router = useRouter();
 import pdfFile from "@/assets/image/icon/icon-pdf.png";
 import wordFile from "@/assets/image/icon/icon-word.png";
 import excelFile from "@/assets/image/icon/icon-excel.png";
-import fileLink from "@/assets/image/icon/icon-link.png";
+import fileLink from "@/assets/image/content/icon-link.png";
 // 使用 reactive 管理所有状态
 const state = reactive({
   selectedYear: null,
@@ -250,20 +271,25 @@ const columns = [
     key: "filing_date",
     sorter: "default",
     width: 150,
+    render: (row) => (
+      <div style={{ borderRight: "1px dashed #E7E7E7" }}>{row.filing_date}</div>
+    ),
   },
   {
     title: "Form",
     key: "form",
-    width: 120,
+    width: 150,
+    align: "left",
     render: (row) => {
       return h(
-        "a",
+        "div",
         {
           href: "javascript:void(0)",
           style: {
-            color: "#0078d7",
+            color: "#FF7BAC",
             textDecoration: "none",
             cursor: "pointer",
+            borderRight: "1px dashed #E7E7E7",
           },
           onClick: (e) => {
             e.preventDefault();
@@ -288,9 +314,12 @@ const columns = [
   {
     title: "Description",
     key: "description",
-    ellipsis: {
-      tooltip: true,
-    },
+    // ellipsis: {
+    //   tooltip: true,
+    // },
+    render: (row) => (
+      <div style={{ borderRight: "1px dashed #E7E7E7" }}>{row.description}</div>
+    ),
   },
   {
     title: "View",
@@ -312,7 +341,7 @@ const columns = [
                 {
                   href: "javascript:void(0)",
                   style: {
-                    color: "#0078d7",
+                    color: "#FF7BAC",
                     textDecoration: "none",
                     fontSize: "12px",
                   },
@@ -470,18 +499,67 @@ const handleViewDocument = (val, type) => {
   );
 };
 </script>
+<!-- <style lang="scss">
+tr {
+  td {
+    &:not(:first-child) {
+      border-left: 1px dashed #0078d7 !important;
+    }
+  }
+}
+</style> -->
 
 <style scoped lang="scss">
+:deep(
+    .n-data-table
+      .n-data-table-tr:not(.n-data-table-tr--summary):hover
+      > .n-data-table-td
+  ) {
+  background-color: #fff8fb !important;
+}
+:deep(.n-data-table-th) {
+  background: #fff0f5 !important;
+  &:first-child {
+    border-top-left-radius: 8px;
+    border-bottom-left-radius: 8px;
+  }
+  &:last-child {
+    border-top-right-radius: 8px;
+    border-bottom-right-radius: 8px;
+  }
+}
+:deep(.n-data-table-thead) {
+  background-color: none;
+}
+:deep(.n-data-table-td) {
+  border: none;
+}
+:deep(.n-data-table-th) {
+  border: none;
+}
+:deep(.n-data-table-tr) {
+  > td {
+    &:first-child {
+      border-top-left-radius: 8px;
+      border-bottom-left-radius: 8px;
+    }
+    &:last-child {
+      border-top-right-radius: 8px;
+      border-bottom-right-radius: 8px;
+    }
+  }
+}
+
 .page-container {
   background-size: 100% 100%;
   background-position: center;
   background-repeat: no-repeat;
   min-height: 100vh;
-  padding: 20px;
+  // padding: 20px;
 }
 
 .sec-filings-container {
-  max-width: 1200px;
+  width: 900px;
   margin: 0 auto;
   padding: 40px;
 }
@@ -491,6 +569,16 @@ const handleViewDocument = (val, type) => {
   font-weight: bold;
   color: #333;
   margin-bottom: 40px;
+  position: relative;
+  &::before {
+    position: absolute;
+    content: "";
+    width: 60px;
+    top: -10px;
+    height: 4px;
+    background-color: #ff7bac;
+    left: 0;
+  }
 }
 
 .filters {
@@ -502,47 +590,16 @@ const handleViewDocument = (val, type) => {
 
 .filter-group {
   display: flex;
-  flex-direction: column;
+  // flex-direction: column;
+  align-items: center;
   gap: 8px;
 }
 
 .filter-label {
-  font-size: 14px;
-  color: #333;
+  font-size: 14PX;
+  color: #000;
   font-weight: 500;
-}
-
-.table-container {
-  .n-data-table {
-    --n-th-color: #f5f5f5;
-    --n-th-text-color: #333;
-    --n-td-color: #fff;
-    --n-border-color: #e0e0e0;
-  }
-}
-
-.pagination-container {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-top: 20px;
-  padding: 20px 0;
-}
-
-.pagination-info {
-  font-size: 14px;
-  color: #666;
-}
-
-:deep(.n-data-table-th) {
-  background-color: #9e9e9e !important;
-  color: white !important;
-  font-weight: bold;
-  text-align: left;
-}
-
-:deep(.n-data-table-td) {
-  border-bottom: 1px solid #e0e0e0;
+  margin-right: 10px;
 }
 
 :deep(.n-data-table-tr:hover .n-data-table-td) {
@@ -550,31 +607,31 @@ const handleViewDocument = (val, type) => {
 }
 
 :deep(.n-select) {
-  .n-base-selection {
-    border: 1px solid #ccc;
-    border-radius: 4px;
-  }
+  // .n-base-selection {
+  //   border: 1px solid #ccc;
+  //   border-radius: 4px;
+  // }
 }
 
-:deep(.n-pagination) {
-  .n-pagination-item {
-    border: 1px solid #ccc;
+// :deep(.n-pagination) {
+//   .n-pagination-item {
+//     border: 1px solid #ccc;
 
-    &.n-pagination-item--active {
-      background-color: #969696;
-      border-color: #969696;
-      color: white;
-    }
-  }
+//     &.n-pagination-item--active {
+//       background-color: #969696;
+//       border-color: #969696;
+//       color: white;
+//     }
+//   }
 
-  .n-pagination-quick-jumper {
-    font-size: 14px;
-  }
+//   .n-pagination-quick-jumper {
+//     font-size: 14px;
+//   }
 
-  .n-pagination-sizes {
-    font-size: 14px;
-  }
-}
+//   .n-pagination-sizes {
+//     font-size: 14px;
+//   }
+// }
 :deep(.n-base-loading__icon) {
   color: #ff7bac;
 }
diff --git a/src/views/financialinformation/secfilings/size375/index.vue b/src/views/financialinformation/secfilings/size375/index.vue
index a2e7a0e..9d32b4c 100644
--- a/src/views/financialinformation/secfilings/size375/index.vue
+++ b/src/views/financialinformation/secfilings/size375/index.vue
@@ -1,79 +1,104 @@
 <template>
-  <div class="page-container">
-    <div class="sec-filings-container">
+  <div class="page-container relative overflow-hidden z-[11] bg-[#ffffff]">
+    <div
+      class="fixed h-[100vh] left-[50%] translate-x-[-50%] z-[1]"
+      style="width: 311px; pointer-events: none; mix-blend-mode: multiply"
+    >
+      <img src="@/assets/image/content/line.png" class="w-[100%]" alt="" />
+    </div>
+    <div class="fixed z-[-1] top-[50%] translate-y-[-50%]">
+      <img
+        src="@/assets/image/content/bg_29.png"
+        class="w-[100vw] h-[445PX]"
+        alt=""
+      />
+    </div>
+    <div class="sec-filings-container relative z-10 !w-[311PX] !p-0 !pb-[60PX]">
       <!-- 标题 -->
-      <div class="page-title">SEC Filings</div>
+      <div class="page-title ml-[30PX] mt-[50PX]">SEC Filings</div>
 
       <!-- 筛选器 -->
-      <div class="filters">
-        <div class="filter-group">
+      <div class="filters flex px-[30PX] flex-col">
+        <div class="filter-group flex-1 flex justify-between">
           <label class="filter-label">Filing year</label>
           <n-select
             v-model:value="state.selectedYear"
             :options="state.yearOptions"
             placeholder="- Any -"
-            style="width: 150px"
+            style="flex: 1;max-width: 250px;"
             clearable
             @update:value="handleYearChange"
           />
         </div>
 
-        <div class="filter-group">
-          <label class="filter-label">Items per page:</label>
+        <div class="filter-group flex-1 flex justify-between">
+          <label class="filter-label">Items per page</label>
           <n-select
             v-model:value="state.pageSize"
             :options="state.pageSizeOptions"
-            style="width: 150px"
+            style="flex: 1;max-width: 250px;"
             @update:value="handlePageSizeChange"
           />
         </div>
       </div>
 
       <!-- 表格 -->
-      <div class="table-container">
+      <div
+        class="table-container p-[16PX]"
+        style="
+          border-radius: 16px;
+          background: #fff;
+          box-shadow: 0 3px 14px 0 rgba(0, 0, 0, 0.16);
+        "
+      >
         <n-data-table
           :columns="columns"
           :loading="state.tableLoading"
           :data="state.tableData"
           :pagination="false"
-          :row-key="(row) => row.idx"
-          @update:sorter="handleSort"
           :bordered="false"
-          :single-line="false"
-          :scroll-x="600"
+          :size="'medium'"
+          :row-key="(row) => row.idx"
+          :scrollbar-props="{
+            trigger: 'none'
+          }"
+          @update:sorter="handleSort"
         />
+      </div>
 
-        <!-- 分页器 -->
-        <div class="pagination-container mt-[40px]">
-          <n-pagination
-            v-model:page="state.currentPage"
-            v-model:page-size="state.pageSize"
-            show-size-picker
-            :item-count="state.total"
-            :page-sizes="[10, 25, 50]"
-            @update:page="handlePageChange"
-            @update:page-size="handlePageSizeChange"
-          >
-            <template #prev>
-              <span>‹</span>
-            </template>
-            <template #next>
-              <span> ›</span>
-            </template>
-          </n-pagination>
-
-          <div class="pagination-info mt-[40px]">
-            Displaying {{ startIndex }} - {{ endIndex }} of
-            {{ state.total }} results
-          </div>
+      <!-- 分页器 -->
+      <div
+        class="w-[300PX] pagination-container flex flex-col items-end justify-center mt-[15PX]"
+      >
+        <n-pagination
+          v-model:page="state.currentPage"
+          v-model:page-size="state.pageSize"
+          show-size-picker
+          :item-count="state.total"
+          :page-sizes="[10, 25, 50]"
+          :page-slot="3"
+          @update:page="handlePageChange"
+          @update:page-size="handlePageSizeChange"
+        >
+      
+          <!-- <template #prev>
+            <span>‹ Previous</span>
+          </template>
+          <template #next>
+            <span>Next ›</span>
+          </template> -->
+        </n-pagination>
+        <div class="pagination-info text-[#455363] mr-[15PX] mt-[10PX]">
+          Displaying {{ startIndex }} - {{ endIndex }} of
+          {{ state.total }} results
         </div>
       </div>
     </div>
   </div>
 </template>
 
-<script setup>
-import { reactive, computed, h, onMounted } from "vue";
+<script setup lang="jsx">
+import { reactive, computed, h, onMounted, render } from "vue";
 import { NSelect, NDataTable, NPagination, NButton, NIcon } from "naive-ui";
 import { useI18n } from "vue-i18n";
 import { useRouter } from "vue-router";
@@ -83,7 +108,7 @@ const router = useRouter();
 import pdfFile from "@/assets/image/icon/icon-pdf.png";
 import wordFile from "@/assets/image/icon/icon-word.png";
 import excelFile from "@/assets/image/icon/icon-excel.png";
-import fileLink from "@/assets/image/icon/icon-link.png";
+import fileLink from "@/assets/image/content/icon-link.png";
 // 使用 reactive 管理所有状态
 const state = reactive({
   selectedYear: null,
@@ -250,20 +275,25 @@ const columns = [
     key: "filing_date",
     sorter: "default",
     width: 150,
+    render: (row) => (
+      <div style={{ borderRight: "1px dashed #E7E7E7" }}>{row.filing_date}</div>
+    ),
   },
   {
     title: "Form",
     key: "form",
-    width: 120,
+    width: 150,
+    align: "left",
     render: (row) => {
       return h(
-        "a",
+        "div",
         {
           href: "javascript:void(0)",
           style: {
-            color: "#0078d7",
+            color: "#FF7BAC",
             textDecoration: "none",
             cursor: "pointer",
+            borderRight: "1px dashed #E7E7E7",
           },
           onClick: (e) => {
             e.preventDefault();
@@ -288,9 +318,13 @@ const columns = [
   {
     title: "Description",
     key: "description",
-    ellipsis: {
-      tooltip: true,
-    },
+    minWidth: 200,
+    // ellipsis: {
+    //   tooltip: true,
+    // },
+    render: (row) => (
+      <div style={{ borderRight: "1px dashed #E7E7E7" }}>{row.description}</div>
+    ),
   },
   {
     title: "View",
@@ -312,7 +346,7 @@ const columns = [
                 {
                   href: "javascript:void(0)",
                   style: {
-                    color: "#0078d7",
+                    color: "#FF7BAC",
                     textDecoration: "none",
                     fontSize: "12px",
                   },
@@ -470,79 +504,107 @@ const handleViewDocument = (val, type) => {
   );
 };
 </script>
+<!-- <style lang="scss">
+tr {
+  td {
+    &:not(:first-child) {
+      border-left: 1px dashed #0078d7 !important;
+    }
+  }
+}
+</style> -->
 
 <style scoped lang="scss">
+:deep(
+    .n-data-table
+      .n-data-table-tr:not(.n-data-table-tr--summary):hover
+      > .n-data-table-td
+  ) {
+  background-color: #fff8fb !important;
+}
+:deep(.n-data-table-th) {
+  background: #fff0f5 !important;
+  &:first-child {
+    border-top-left-radius: 8px;
+    border-bottom-left-radius: 8px;
+  }
+  &:last-child {
+    border-top-right-radius: 8px;
+    border-bottom-right-radius: 8px;
+  }
+}
+:deep(.n-data-table-thead) {
+  background-color: none;
+}
+:deep(.n-data-table-td) {
+  border: none;
+}
+:deep(.n-data-table-th) {
+  border: none;
+}
+:deep(.n-data-table-tr) {
+  > td {
+    &:first-child {
+      border-top-left-radius: 8px;
+      border-bottom-left-radius: 8px;
+    }
+    &:last-child {
+      border-top-right-radius: 8px;
+      border-bottom-right-radius: 8px;
+    }
+  }
+}
+
 .page-container {
   background-size: 100% 100%;
   background-position: center;
   background-repeat: no-repeat;
   min-height: 100vh;
-  padding: 20px;
+  // padding: 20px;
 }
 
 .sec-filings-container {
+  width: 900px;
   margin: 0 auto;
-  padding: 80px;
+  padding: 40px;
 }
 
 .page-title {
-  font-size: 113px;
+  font-size: 24PX;
   font-weight: bold;
   color: #333;
   margin-bottom: 40px;
+  position: relative;
+  &::before {
+    position: absolute;
+    content: "";
+    width: 60PX;
+    top: -10PX;
+    height: 4PX;
+    background-color: #ff7bac;
+    left: 0;
+  }
 }
 
 .filters {
   display: flex;
   gap: 40px;
   margin-bottom: 30px;
-  align-items: end;
+  // align-items: end;
 }
 
 .filter-group {
   display: flex;
-  flex-direction: column;
-  gap: 26px;
+  // flex-direction: column;
+  align-items: center;
+  gap: 8px;
 }
 
 .filter-label {
-  font-size: 92px;
-  color: #333;
+  font-size: 14PX;
+  color: #000;
   font-weight: 500;
-}
-
-.table-container {
-  .n-data-table {
-    --n-th-color: #f5f5f5;
-    --n-th-text-color: #333;
-    --n-td-color: #fff;
-    --n-border-color: #e0e0e0;
-  }
-}
-
-.pagination-container {
-  display: flex;
-  flex-wrap: wrap; // 添加这行
-  justify-content: space-between;
-  align-items: center;
-  margin-top: 60px;
-  padding: 20px 0;
-}
-
-.pagination-info {
-  font-size: 72px;
-  color: #666;
-}
-
-:deep(.n-data-table-th) {
-  background-color: #9e9e9e !important;
-  color: white !important;
-  font-weight: bold;
-  text-align: left;
-}
-
-:deep(.n-data-table-td) {
-  border-bottom: 1px solid #e0e0e0;
+  margin-right: 10px;
 }
 
 :deep(.n-data-table-tr:hover .n-data-table-td) {
@@ -550,31 +612,31 @@ const handleViewDocument = (val, type) => {
 }
 
 :deep(.n-select) {
-  .n-base-selection {
-    border: 1px solid #ccc;
-    border-radius: 4px;
-  }
+  // .n-base-selection {
+  //   border: 1px solid #ccc;
+  //   border-radius: 4px;
+  // }
 }
 
-:deep(.n-pagination) {
-  .n-pagination-item {
-    border: 1px solid #ccc;
+// :deep(.n-pagination) {
+//   .n-pagination-item {
+//     border: 1px solid #ccc;
 
-    &.n-pagination-item--active {
-      background-color: #969696;
-      border-color: #969696;
-      color: white;
-    }
-  }
+//     &.n-pagination-item--active {
+//       background-color: #969696;
+//       border-color: #969696;
+//       color: white;
+//     }
+//   }
 
-  .n-pagination-quick-jumper {
-    font-size: 72px;
-  }
+//   .n-pagination-quick-jumper {
+//     font-size: 14px;
+//   }
 
-  .n-pagination-sizes {
-    font-size: 72px;
-  }
-}
+//   .n-pagination-sizes {
+//     font-size: 14px;
+//   }
+// }
 :deep(.n-base-loading__icon) {
   color: #ff7bac;
 }
diff --git a/src/views/financialinformation/secfilings/size768/index.vue b/src/views/financialinformation/secfilings/size768/index.vue
index 9721be2..9e446ce 100644
--- a/src/views/financialinformation/secfilings/size768/index.vue
+++ b/src/views/financialinformation/secfilings/size768/index.vue
@@ -1,36 +1,56 @@
 <template>
-  <div class="page-container">
-    <div class="sec-filings-container">
+  <div class="page-container relative overflow-hidden z-[11] bg-[#ffffff]">
+    <div
+      class="fixed h-[100vh] left-[50%] translate-x-[-50%] z-[1]"
+      style="width: 618px; pointer-events: none; mix-blend-mode: multiply"
+    >
+      <img src="@/assets/image/content/line.png" class="w-[100%]" alt="" />
+    </div>
+    <div class="fixed z-[-1] top-[50%] translate-y-[-50%]">
+      <img
+        src="@/assets/image/content/bg_29.png"
+        class="w-[100vw] h-[445PX]"
+        alt=""
+      />
+    </div>
+    <div class="sec-filings-container relative z-10 !w-[618PX] !p-0 !pb-[60PX]">
       <!-- 标题 -->
-      <div class="page-title">SEC Filings</div>
+      <div class="page-title ml-[30PX] mt-[50PX]">SEC Filings</div>
 
       <!-- 筛选器 -->
-      <div class="filters">
-        <div class="filter-group">
+      <div class="filters flex px-[30PX] flex-col">
+        <div class="filter-group flex-1 flex justify-between">
           <label class="filter-label">Filing year</label>
           <n-select
             v-model:value="state.selectedYear"
             :options="state.yearOptions"
             placeholder="- Any -"
-            style="width: 150px"
+            style="flex: 1;max-width: 250px;"
             clearable
             @update:value="handleYearChange"
           />
         </div>
 
-        <div class="filter-group">
+        <div class="filter-group flex-1 flex justify-between">
           <label class="filter-label">Items per page:</label>
           <n-select
             v-model:value="state.pageSize"
             :options="state.pageSizeOptions"
-            style="width: 150px"
+            style="flex: 1;max-width: 250px;"
             @update:value="handlePageSizeChange"
           />
         </div>
       </div>
 
       <!-- 表格 -->
-      <div class="table-container">
+      <div
+        class="table-container p-[16PX]"
+        style="
+          border-radius: 16px;
+          background: #fff;
+          box-shadow: 0 3px 14px 0 rgba(0, 0, 0, 0.16);
+        "
+      >
         <n-data-table
           :columns="columns"
           :loading="state.tableLoading"
@@ -41,40 +61,41 @@
           :row-key="(row) => row.idx"
           @update:sorter="handleSort"
         />
+      </div>
 
-        <!-- 分页器 -->
-        <div class="pagination-container">
-          <n-pagination
-            class="w-full"
-            v-model:page="state.currentPage"
-            v-model:page-size="state.pageSize"
-            show-size-picker
-            show-quick-jumper
-            :item-count="state.total"
-            :page-sizes="[10, 25, 50]"
-            @update:page="handlePageChange"
-            @update:page-size="handlePageSizeChange"
-          >
-            <template #prev>
-              <span>‹ Previous</span>
-            </template>
-            <template #next>
-              <span>Next ›</span>
-            </template>
-          </n-pagination>
-
-          <div class="pagination-info w-full mt-[20px]">
-            Displaying {{ startIndex }} - {{ endIndex }} of
-            {{ state.total }} results
-          </div>
+      <!-- 分页器 -->
+      <div
+        class="pagination-container flex flex-col items-end justify-center mt-[15PX]"
+      >
+        <n-pagination
+          v-model:page="state.currentPage"
+          v-model:page-size="state.pageSize"
+          show-size-picker
+          show-quick-jumper
+          :item-count="state.total"
+          :page-sizes="[10, 25, 50]"
+          @update:page="handlePageChange"
+          @update:page-size="handlePageSizeChange"
+        >
+      
+          <!-- <template #prev>
+            <span>‹ Previous</span>
+          </template>
+          <template #next>
+            <span>Next ›</span>
+          </template> -->
+        </n-pagination>
+        <div class="pagination-info text-[#455363] mr-[15PX] mt-[10PX]">
+          Displaying {{ startIndex }} - {{ endIndex }} of
+          {{ state.total }} results
         </div>
       </div>
     </div>
   </div>
 </template>
 
-<script setup>
-import { reactive, computed, h, onMounted } from "vue";
+<script setup lang="jsx">
+import { reactive, computed, h, onMounted, render } from "vue";
 import { NSelect, NDataTable, NPagination, NButton, NIcon } from "naive-ui";
 import { useI18n } from "vue-i18n";
 import { useRouter } from "vue-router";
@@ -84,7 +105,7 @@ const router = useRouter();
 import pdfFile from "@/assets/image/icon/icon-pdf.png";
 import wordFile from "@/assets/image/icon/icon-word.png";
 import excelFile from "@/assets/image/icon/icon-excel.png";
-import fileLink from "@/assets/image/icon/icon-link.png";
+import fileLink from "@/assets/image/content/icon-link.png";
 // 使用 reactive 管理所有状态
 const state = reactive({
   selectedYear: null,
@@ -251,20 +272,25 @@ const columns = [
     key: "filing_date",
     sorter: "default",
     width: 150,
+    render: (row) => (
+      <div style={{ borderRight: "1px dashed #E7E7E7" }}>{row.filing_date}</div>
+    ),
   },
   {
     title: "Form",
     key: "form",
-    width: 120,
+    width: 150,
+    align: "left",
     render: (row) => {
       return h(
-        "a",
+        "div",
         {
           href: "javascript:void(0)",
           style: {
-            color: "#0078d7",
+            color: "#FF7BAC",
             textDecoration: "none",
             cursor: "pointer",
+            borderRight: "1px dashed #E7E7E7",
           },
           onClick: (e) => {
             e.preventDefault();
@@ -289,9 +315,12 @@ const columns = [
   {
     title: "Description",
     key: "description",
-    ellipsis: {
-      tooltip: true,
-    },
+    // ellipsis: {
+    //   tooltip: true,
+    // },
+    render: (row) => (
+      <div style={{ borderRight: "1px dashed #E7E7E7" }}>{row.description}</div>
+    ),
   },
   {
     title: "View",
@@ -313,7 +342,7 @@ const columns = [
                 {
                   href: "javascript:void(0)",
                   style: {
-                    color: "#0078d7",
+                    color: "#FF7BAC",
                     textDecoration: "none",
                     fontSize: "12px",
                   },
@@ -471,80 +500,107 @@ const handleViewDocument = (val, type) => {
   );
 };
 </script>
+<!-- <style lang="scss">
+tr {
+  td {
+    &:not(:first-child) {
+      border-left: 1px dashed #0078d7 !important;
+    }
+  }
+}
+</style> -->
 
 <style scoped lang="scss">
+:deep(
+    .n-data-table
+      .n-data-table-tr:not(.n-data-table-tr--summary):hover
+      > .n-data-table-td
+  ) {
+  background-color: #fff8fb !important;
+}
+:deep(.n-data-table-th) {
+  background: #fff0f5 !important;
+  &:first-child {
+    border-top-left-radius: 8px;
+    border-bottom-left-radius: 8px;
+  }
+  &:last-child {
+    border-top-right-radius: 8px;
+    border-bottom-right-radius: 8px;
+  }
+}
+:deep(.n-data-table-thead) {
+  background-color: none;
+}
+:deep(.n-data-table-td) {
+  border: none;
+}
+:deep(.n-data-table-th) {
+  border: none;
+}
+:deep(.n-data-table-tr) {
+  > td {
+    &:first-child {
+      border-top-left-radius: 8px;
+      border-bottom-left-radius: 8px;
+    }
+    &:last-child {
+      border-top-right-radius: 8px;
+      border-bottom-right-radius: 8px;
+    }
+  }
+}
+
 .page-container {
   background-size: 100% 100%;
   background-position: center;
   background-repeat: no-repeat;
   min-height: 100vh;
-  padding: 20px;
+  // padding: 20px;
 }
 
 .sec-filings-container {
-  max-width: calc(100% - 300px);
+  width: 900px;
   margin: 0 auto;
-  padding: 20px;
+  padding: 40px;
 }
 
 .page-title {
-  font-size: 85px;
+  font-size: 32px;
   font-weight: bold;
   color: #333;
   margin-bottom: 40px;
+  position: relative;
+  &::before {
+    position: absolute;
+    content: "";
+    width: 60PX;
+    top: -10PX;
+    height: 4PX;
+    background-color: #ff7bac;
+    left: 0;
+  }
 }
 
 .filters {
   display: flex;
   gap: 40px;
   margin-bottom: 30px;
-  align-items: end;
+  // align-items: end;
 }
 
 .filter-group {
   display: flex;
-  flex-direction: column;
+  // flex-direction: column;
+  align-items: center;
   gap: 8px;
 }
 
 .filter-label {
-  font-size: 50px;
-  color: #333;
+  font-size: 14PX;
+  color: #000;
   font-weight: 500;
-}
-
-.table-container {
-  .n-data-table {
-    --n-th-color: #f5f5f5;
-    --n-th-text-color: #333;
-    --n-td-color: #fff;
-    --n-border-color: #e0e0e0;
-  }
-}
-
-.pagination-container {
-  display: flex;
-  flex-wrap: wrap; // 添加这行
-  justify-content: space-between;
-  align-items: center;
-  margin-top: 20px;
-  padding: 20px 0;
-}
-
-.pagination-info {
-  font-size: 40px;
-  color: #666;
-}
-
-:deep(.n-data-table-th) {
-  background-color: #9e9e9e !important;
-  color: white !important;
-  font-weight: bold;
-  text-align: left;
-}
-
-:deep(.n-data-table-td) {
-  border-bottom: 1px solid #e0e0e0;
+  margin-right: 10px;
 }
 
 :deep(.n-data-table-tr:hover .n-data-table-td) {
@@ -552,31 +608,31 @@ const handleViewDocument = (val, type) => {
 }
 
 :deep(.n-select) {
-  .n-base-selection {
-    border: 1px solid #ccc;
-    border-radius: 4px;
-  }
+  // .n-base-selection {
+  //   border: 1px solid #ccc;
+  //   border-radius: 4px;
+  // }
 }
 
-:deep(.n-pagination) {
-  .n-pagination-item {
-    border: 1px solid #ccc;
+// :deep(.n-pagination) {
+//   .n-pagination-item {
+//     border: 1px solid #ccc;
 
-    &.n-pagination-item--active {
-      background-color: #969696;
-      border-color: #969696;
-      color: white;
-    }
-  }
+//     &.n-pagination-item--active {
+//       background-color: #969696;
+//       border-color: #969696;
+//       color: white;
+//     }
+//   }
 
-  .n-pagination-quick-jumper {
-    font-size: 40px;
-  }
+//   .n-pagination-quick-jumper {
+//     font-size: 14px;
+//   }
 
-  .n-pagination-sizes {
-    font-size: 40px;
-  }
-}
+//   .n-pagination-sizes {
+//     font-size: 14px;
+//   }
+// }
 :deep(.n-base-loading__icon) {
   color: #ff7bac;
 }
diff --git a/src/views/govern/size1440/index.vue b/src/views/govern/size1440/index.vue
index fa01cf5..5cd66f1 100644
--- a/src/views/govern/size1440/index.vue
+++ b/src/views/govern/size1440/index.vue
@@ -1,51 +1,48 @@
 <template>
-  <div class="title mb-[50px] text-center">
-    <h1 style="font-size: 40px; margin-top: 60px">Governance</h1>
-  </div>
-
-  <div
-    style="padding: 30px 150px"
-    class="grid grid-cols-1 md:grid-cols-2 gap-8"
-  >
+  <div class="relative overflow-hidden z-[11] bg-[#ffffff]">
+    <div class="fixed bottom-0 z-[] bg-[#ffffff]">
+      <img
+        src="@/assets/image/content/bg_27.png"
+        class="w-[100vw] h-[611PX] relative"
+        alt=""
+      />
+    </div>
     <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"
+      class="fixed h-[100vh] left-[50%] translate-x-[-50%] z-[1]"
+      style="width: 900px; pointer-events: none; mix-blend-mode: multiply"
     >
+      <img src="@/assets/image/content/line.png" class="w-[100%]" alt="" />
+      <img
+        src="@/assets/image/content/bg_25.png"
+        class="w-[100vw] h-[611PX] relative"
+        alt=""
+      />
+    </div>
+    <div class="w-[900PX] mx-auto relative z-11">
+      <div class="title mb-[50px] text-center text-left">
+        <h1 style="font-size: 40px; margin-top: 60px">Governance</h1>
+      </div>
       <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 back-line">
-        <div class="flex items-center mb-6 max-h-[3.5rem]">
+        v-for="(item, index) in state.list"
+        :key="index"
+        class="py-[8PX] px-[1PX] overflow-hidden border-0 border-b-[1px] border-[#E6EAEE] border-dashed"
+      >
+        <div
+          class="flex justify-between items-center hover:bg-[#FFF8FB] min-h-[1px] h-[48PX]"
+        >
           <div
-            class="bg-[#ff7bac] p-3 rounded-lg shadow-md mr-6 transform hover:rotate-6 transition-transform duration-300 governance-icon"
+            class="border-content text-[16PX] pl-[10PX] font-[500]"
           >
-            <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>
             <n-tooltip
               trigger="hover"
               :disabled="!item.showTooltip"
               width="trigger"
             >
               <template #trigger>
-                <h1
+                <div
                   :ref="(el) => setTitleRef(el, index)"
                   style="
-                    font-size: 18px;
+                    font-size: 16px;
                     word-break: break-word;
                     display: -webkit-box;
                     -webkit-line-clamp: 2;
@@ -56,7 +53,7 @@
                   class=""
                 >
                   {{ item.title }}
-                </h1>
+                </div>
                 <!-- <text> {{ item.date }}</text> -->
               </template>
               <div slot="content">
@@ -64,21 +61,17 @@
               </div>
             </n-tooltip>
           </div>
-        </div>
-        <div class="mt-auto">
-          <a
-            class="inline-flex items-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-[#ff7bac] hover:bg-[#ff7bac] transition-all duration-300 transform hover:scale-105 shadow-md"
-            target="_blank"
-            style="font-size: 16px; cursor: pointer"
+          <div
+            class="flex items-center pr-[10PX] cursor-pointer"
             @click="handleViewDocument(item)"
           >
-            View Document
+            <view class="text-[16PX] text-[#FF7BAC]">View Document</view>
             <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"
+              stroke="#FF7BAC"
             >
               <path
                 stroke-linecap="round"
@@ -87,7 +80,7 @@
                 d="M9 5l7 7-7 7"
               />
             </svg>
-          </a>
+          </div>
         </div>
       </div>
     </div>
@@ -207,21 +200,32 @@ const handleViewDocument = (item) => {
 </script>
 
 <style scoped lang="scss">
+.border-content{
+  position: relative;
+  &::before {
+    content: "";
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    left: 0;
+    width: 1PX;
+    height: 20PX;
+    background: #FF7BAC;
+  }
+}
+
 /* 标题样式 */
 .title h1 {
   position: relative;
+  margin-left: 15PX;
 
   &::after {
     content: "";
     position: absolute;
-    bottom: -14px;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 80px;
-    height: 3px;
+    left: 0;
+    width: 60PX;
+    height: 5PX;
     background: #ff7bac;
-    border-radius: 3px;
-    transition: width 0.3s ease;
   }
 
   &:hover::after {
@@ -252,7 +256,7 @@ const handleViewDocument = (item) => {
     rgba(255, 123, 172, 0.1) 0%,
     rgba(0, 0, 0, 0) 50%
   );
-  opacity: 0;
+  opacity: 0; 
   transition: opacity 0.3s ease;
 }
 
diff --git a/src/views/govern/size1920/index.vue b/src/views/govern/size1920/index.vue
index fa01cf5..1805d8a 100644
--- a/src/views/govern/size1920/index.vue
+++ b/src/views/govern/size1920/index.vue
@@ -1,51 +1,48 @@
 <template>
-  <div class="title mb-[50px] text-center">
-    <h1 style="font-size: 40px; margin-top: 60px">Governance</h1>
-  </div>
-
-  <div
-    style="padding: 30px 150px"
-    class="grid grid-cols-1 md:grid-cols-2 gap-8"
-  >
+  <div class="relative overflow-hidden z-[11] bg-[#ffffff]">
+    <div class="fixed bottom-0 z-[] bg-[#ffffff]">
+      <img
+        src="@/assets/image/content/bg_27.png"
+        class="w-[100vw] h-[611PX] relative"
+        alt=""
+      />
+    </div>
     <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"
+      class="fixed h-[100vh] left-[50%] translate-x-[-50%] z-[1]"
+      style="width: 900px; pointer-events: none; mix-blend-mode: multiply"
     >
+      <img src="@/assets/image/content/line.png" class="w-[100%]" alt="" />
+      <img
+        src="@/assets/image/content/bg_25.png"
+        class="w-[100vw] h-[611PX] relative"
+        alt=""
+      />
+    </div>
+    <div class="w-[900PX] mx-auto relative z-11">
+      <div class="title mb-[50px] text-center text-left">
+        <h1 style="font-size: 40px; margin-top: 60px">Governance</h1>
+      </div>
       <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 back-line">
-        <div class="flex items-center mb-6 max-h-[3.5rem]">
+        v-for="(item, index) in state.list"
+        :key="index"
+        class="py-[8PX] px-[1PX] overflow-hidden border-0 border-b-[1px] border-[#E6EAEE] border-dashed"
+      >
+        <div
+          class="flex justify-between items-center hover:bg-[#FFF8FB] min-h-[1px] h-[48PX]"
+        >
           <div
-            class="bg-[#ff7bac] p-3 rounded-lg shadow-md mr-6 transform hover:rotate-6 transition-transform duration-300 governance-icon"
+            class="border-content text-[16PX] pl-[10PX] font-[500]"
           >
-            <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>
             <n-tooltip
               trigger="hover"
               :disabled="!item.showTooltip"
               width="trigger"
             >
               <template #trigger>
-                <h1
+                <div
                   :ref="(el) => setTitleRef(el, index)"
                   style="
-                    font-size: 18px;
+                    font-size: 16px;
                     word-break: break-word;
                     display: -webkit-box;
                     -webkit-line-clamp: 2;
@@ -56,7 +53,7 @@
                   class=""
                 >
                   {{ item.title }}
-                </h1>
+                </div>
                 <!-- <text> {{ item.date }}</text> -->
               </template>
               <div slot="content">
@@ -64,21 +61,17 @@
               </div>
             </n-tooltip>
           </div>
-        </div>
-        <div class="mt-auto">
-          <a
-            class="inline-flex items-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-[#ff7bac] hover:bg-[#ff7bac] transition-all duration-300 transform hover:scale-105 shadow-md"
-            target="_blank"
-            style="font-size: 16px; cursor: pointer"
+          <div
+            class="flex items-center pr-[10PX] cursor-pointer"
             @click="handleViewDocument(item)"
           >
-            View Document
+            <view class="text-[16PX] text-[#FF7BAC]">View Document</view>
             <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"
+              stroke="#FF7BAC"
             >
               <path
                 stroke-linecap="round"
@@ -87,7 +80,7 @@
                 d="M9 5l7 7-7 7"
               />
             </svg>
-          </a>
+          </div>
         </div>
       </div>
     </div>
@@ -207,21 +200,32 @@ const handleViewDocument = (item) => {
 </script>
 
 <style scoped lang="scss">
+.border-content{
+  position: relative;
+  &::before {
+    content: "";
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    left: 0;
+    width: 1PX;
+    height: 20PX;
+    background: #FF7BAC;
+  }
+}
+
 /* 标题样式 */
 .title h1 {
   position: relative;
+  margin-left: 15PX;
 
   &::after {
     content: "";
     position: absolute;
-    bottom: -14px;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 80px;
-    height: 3px;
+    left: 0;
+    width: 60PX;
+    height: 5PX;
     background: #ff7bac;
-    border-radius: 3px;
-    transition: width 0.3s ease;
   }
 
   &:hover::after {
diff --git a/src/views/govern/size375/index.vue b/src/views/govern/size375/index.vue
index 61ef656..2bea52e 100644
--- a/src/views/govern/size375/index.vue
+++ b/src/views/govern/size375/index.vue
@@ -1,48 +1,48 @@
 <template>
-  <div class="title mb-[50px] text-center">
-    <h1 style="font-size: 40px; margin-top: 60px">Governance</h1>
-  </div>
-
-  <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+  <div class="relative overflow-hidden z-[11] bg-[#ffffff]">
+    <div class="fixed bottom-0 z-[] bg-[#ffffff]">
+      <img
+        src="@/assets/image/content/bg_27.png"
+        class="w-[100vw] h-[611PX] relative"
+        alt=""
+      />
+    </div>
     <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"
+      class="fixed h-[100vh] left-[50%] translate-x-[-50%] z-[1]"
+      style="width: 327px; pointer-events: none; mix-blend-mode: multiply"
     >
+      <img src="@/assets/image/content/line.png" class="w-[100%]" alt="" />
+      <img
+        src="@/assets/image/content/bg_25.png"
+        class="w-[100vw] h-[611PX] relative"
+        alt=""
+      />
+    </div>
+    <div class="w-[327PX] mx-auto relative z-11">
+      <div class="title mb-[50px] text-center text-left">
+        <h1 style="font-size: 24px; margin-top: 60px">Governance</h1>
+      </div>
       <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 back-line">
-        <div class="flex items-center mb-6 max-h-[3.5rem]">
+        v-for="(item, index) in state.list"
+        :key="index"
+        class="py-[8PX] px-[1PX] overflow-hidden border-0 border-b-[1px] border-[#E6EAEE] border-dashed"
+      >
+        <div
+          class="flex justify-between items-center hover:bg-[#FFF8FB] min-h-[1px] h-[48PX]"
+        >
           <div
-            class="bg-[#ff7bac] p-3 rounded-lg shadow-md mr-6 transform hover:rotate-6 transition-transform duration-300 governance-icon"
+            class="border-content text-[16PX] pl-[10PX] font-[500]"
           >
-            <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>
             <n-tooltip
-              trigger="click"
+              trigger="hover"
               :disabled="!item.showTooltip"
               width="trigger"
             >
               <template #trigger>
-                <h1
+                <div
                   :ref="(el) => setTitleRef(el, index)"
-                  class="text-2xl font-medium text-gray-800"
                   style="
+                    font-size: 16px;
                     word-break: break-word;
                     display: -webkit-box;
                     -webkit-line-clamp: 2;
@@ -50,9 +50,10 @@
                     overflow: hidden;
                     text-overflow: ellipsis;
                   "
+                  class=""
                 >
                   {{ item.title }}
-                </h1>
+                </div>
                 <!-- <text> {{ item.date }}</text> -->
               </template>
               <div slot="content">
@@ -60,21 +61,16 @@
               </div>
             </n-tooltip>
           </div>
-        </div>
-        <div class="mt-auto">
-          <a
-            class="inline-flex items-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-[#ff7bac] hover:bg-[#ff7bac] transition-all duration-300 transform hover:scale-105 shadow-md"
-            target="_blank"
-            style="cursor: pointer"
+          <div
+            class="flex items-center pr-[10PX] cursor-pointer"
             @click="handleViewDocument(item)"
           >
-            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"
+              stroke="#FF7BAC"
             >
               <path
                 stroke-linecap="round"
@@ -83,7 +79,7 @@
                 d="M9 5l7 7-7 7"
               />
             </svg>
-          </a>
+          </div>
         </div>
       </div>
     </div>
@@ -203,21 +199,32 @@ const handleViewDocument = (item) => {
 </script>
 
 <style scoped lang="scss">
+.border-content{
+  position: relative;
+  &::before {
+    content: "";
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    left: 0;
+    width: 1PX;
+    height: 20PX;
+    background: #FF7BAC;
+  }
+}
+
 /* 标题样式 */
 .title h1 {
   position: relative;
+  margin-left: 15PX;
 
   &::after {
     content: "";
     position: absolute;
-    bottom: -14px;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 80px;
-    height: 3px;
+    left: 0;
+    width: 60PX;
+    height: 5PX;
     background: #ff7bac;
-    border-radius: 3px;
-    transition: width 0.3s ease;
   }
 
   &:hover::after {
@@ -229,6 +236,7 @@ const handleViewDocument = (item) => {
 .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(255, 123, 172, 0.3) !important;
@@ -271,3 +279,4 @@ const handleViewDocument = (item) => {
   background: linear-gradient(to right, #fff0f6, #ffffff);
 }
 </style>
+ 
\ No newline at end of file
diff --git a/src/views/govern/size768/index.vue b/src/views/govern/size768/index.vue
index 7a44320..cc09b64 100644
--- a/src/views/govern/size768/index.vue
+++ b/src/views/govern/size768/index.vue
@@ -1,48 +1,48 @@
 <template>
-  <div class="title mb-[50px] text-center">
-    <h1 style="font-size: 40px; margin-top: 60px">Governance</h1>
-  </div>
-
-  <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+  <div class="relative overflow-hidden z-[11] bg-[#ffffff]">
+    <div class="fixed bottom-0 z-[] bg-[#ffffff]">
+      <img
+        src="@/assets/image/content/bg_27.png"
+        class="w-[100vw] h-[611PX] relative"
+        alt=""
+      />
+    </div>
     <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"
+      class="fixed h-[100vh] left-[50%] translate-x-[-50%] z-[1]"
+      style="width: 618px; pointer-events: none; mix-blend-mode: multiply"
     >
+      <img src="@/assets/image/content/line.png" class="w-[100%]" alt="" />
+      <img
+        src="@/assets/image/content/bg_25.png"
+        class="w-[100vw] h-[611PX] relative"
+        alt=""
+      />
+    </div>
+    <div class="w-[618PX] mx-auto relative z-11">
+      <div class="title mb-[50px] text-center text-left">
+        <h1 style="font-size: 40px; margin-top: 60px">Governance</h1>
+      </div>
       <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 back-line">
-        <div class="flex items-center mb-6 max-h-[3.5rem]">
+        v-for="(item, index) in state.list"
+        :key="index"
+        class="py-[8PX] px-[1PX] overflow-hidden border-0 border-b-[1px] border-[#E6EAEE] border-dashed"
+      >
+        <div
+          class="flex justify-between items-center hover:bg-[#FFF8FB] min-h-[1px] h-[48PX]"
+        >
           <div
-            class="bg-[#ff7bac] p-3 rounded-lg shadow-md mr-6 transform hover:rotate-6 transition-transform duration-300 governance-icon"
+            class="border-content text-[16PX] pl-[10PX] font-[500]"
           >
-            <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>
             <n-tooltip
-              trigger="click"
+              trigger="hover"
               :disabled="!item.showTooltip"
               width="trigger"
             >
               <template #trigger>
-                <h1
+                <div
                   :ref="(el) => setTitleRef(el, index)"
-                  class="text-2xl font-medium text-gray-800"
                   style="
+                    font-size: 16px;
                     word-break: break-word;
                     display: -webkit-box;
                     -webkit-line-clamp: 2;
@@ -50,9 +50,10 @@
                     overflow: hidden;
                     text-overflow: ellipsis;
                   "
+                  class=""
                 >
                   {{ item.title }}
-                </h1>
+                </div>
                 <!-- <text> {{ item.date }}</text> -->
               </template>
               <div slot="content">
@@ -60,21 +61,17 @@
               </div>
             </n-tooltip>
           </div>
-        </div>
-        <div class="mt-auto">
-          <a
-            class="inline-flex items-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-[#ff7bac] hover:bg-[#ff7bac] transition-all duration-300 transform hover:scale-105 shadow-md"
-            target="_blank"
-            style="cursor: pointer"
+          <div
+            class="flex items-center pr-[10PX] cursor-pointer"
             @click="handleViewDocument(item)"
           >
-            View Document
+            <view class="text-[16PX] text-[#FF7BAC] flex-shrink-0">View Document</view>
             <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"
+              stroke="#FF7BAC"
             >
               <path
                 stroke-linecap="round"
@@ -83,7 +80,7 @@
                 d="M9 5l7 7-7 7"
               />
             </svg>
-          </a>
+          </div>
         </div>
       </div>
     </div>
@@ -203,21 +200,32 @@ const handleViewDocument = (item) => {
 </script>
 
 <style scoped lang="scss">
+.border-content{
+  position: relative;
+  &::before {
+    content: "";
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    left: 0;
+    width: 1PX;
+    height: 20PX;
+    background: #FF7BAC;
+  }
+}
+
 /* 标题样式 */
 .title h1 {
   position: relative;
+  margin-left: 15PX;
 
   &::after {
     content: "";
     position: absolute;
-    bottom: -14px;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 80px;
-    height: 3px;
+    left: 0;
+    width: 60PX;
+    height: 5PX;
     background: #ff7bac;
-    border-radius: 3px;
-    transition: width 0.3s ease;
   }
 
   &:hover::after {