Merge branch 'wyfMain-dev'

src/views/BusinessServices/size1920/index.vue

@@ -114,7 +114,7 @@ const solutions = computed(() => [
 
 <style scoped>
 .home-page {
-  background-image: url("@/assets/image/bg.png");
+  background-image: url("@/assets/image/bg-mobile.png");
   background-size: 100% 100%;
   background-position: center;
   background-repeat: no-repeat;
@@ -244,8 +244,6 @@ const solutions = computed(() => [
   transform: translateX(-50%);
   width: 80%;
   height: 100%;
-  background: url("@/assets/image/abstract-pattern.png") no-repeat
-    center/contain;
   opacity: 0.03;
   z-index: -1;
 }

src/views/BusinessServices/size375/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="home-page">
     <div class="business-page">
-      <!-- 渐变背景标题区 - 增加层次感 -->
+      <!-- 渐变背景标题区 -->
       <section class="hero-section">
         <div class="hero-content container">
           <div class="title-wrapper">
@@ -17,14 +17,13 @@
         </div>
       </section>
 
-      <!-- 业务核心解决方案 - 重新设计布局 -->
+      <!-- 业务核心解决方案 -->
       <main class="container">
-        <!-- 解决方案网格 - 新布局 -->
+        <!-- 解决方案网格 -->
         <div class="solution-grid">
           <!-- 主推解决方案 -->
           <div class="featured-solution">
             <div class="solution-card" :style="{ '--delay': '0s' }">
-              <!-- <div class="card-badge">旗舰方案</div> -->
               <div class="card-header">
                 <div class="decorative-line"></div>
                 <h2 class="card-title">{{ solutions[0].title }}</h2>
@@ -113,53 +112,7 @@ const solutions = computed(() => [
 </script>
 
 <style scoped>
-.home-page {
-  background-image: url("@/assets/image/bg.png");
-  background-size: 100% 100%;
-  background-position: center;
-  background-repeat: no-repeat;
-}
-/* 基础样式 */
-.container {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 0 2rem;
-}
-
-/* 标题区样式 */
-.hero-section {
-  background: linear-gradient(135deg, #f8fbfe 0%, #e6f0ff 100%);
-  padding: 8rem 0 6rem;
-  position: relative;
-  overflow: hidden;
-}
-
-.hero-section::after {
-  content: "";
-  position: absolute;
-  bottom: -50px;
-  left: 0;
-  width: 100%;
-  height: 100px;
-  background: white;
-  transform: skewY(-3deg);
-}
-
-.hero-title {
-  font-size: 3.5rem;
-  color: #2c3e50;
-  margin-bottom: 2rem;
-  animation: slideIn 1s ease;
-}
-
-.hero-description {
-  max-width: 800px;
-  margin: 0 auto;
-  font-size: 1.1rem;
-  line-height: 1.8;
-  color: #5a6d80;
-}
-
+/* 基础变量定义 */
 :root {
   --primary-color: #895bff;
   --primary-light: #a07cff;
@@ -169,27 +122,26 @@ const solutions = computed(() => [
     var(--primary-light) 0%,
     var(--primary-color) 100%
   );
-}
-.home-page {
-  background-image: url("@/assets/image/bg.png");
-  background-size: 100% 100%;
-  background-position: center;
-  background-repeat: no-repeat;
+  --text-primary: #2c0850;
+  --text-secondary: #4a3a6b;
+  --text-light: #6c5ce7;
+  --bg-light: #f9f6ff;
+  --border-radius: 16px;
+  --box-shadow: 0 10px 30px rgba(137, 91, 255, 0.15);
 }
 
+/* 基础样式 */
 .container {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 0 2rem;
+  padding: 0 1.25rem;
 }
 
-/* 标题区 - 紫色渐变 */
+/* 标题区样式 */
 .hero-section {
   background: var(--primary-gradient);
-  padding: 10rem 0 8rem;
+  padding: 6rem 0 4rem;
   position: relative;
   overflow: hidden;
-  color: white;
+  color: #895bff;
 }
 
 .hero-section::before {
@@ -203,26 +155,36 @@ const solutions = computed(() => [
     no-repeat bottom/100% 30%;
 }
 
+.hero-section::after {
+  content: "";
+  position: absolute;
+  bottom: -20px;
+  left: 0;
+  width: 100%;
+  height: 40px;
+  background: white;
+  transform: skewY(-3deg);
+}
+
 .hero-title {
-  font-size: 3.5rem;
-  margin-bottom: 2rem;
+  font-size: clamp(1.8rem, 5vw, 2.5rem);
+  margin-bottom: 1.5rem;
   text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
 .title-decoration {
   position: absolute;
-  bottom: -15px;
+  bottom: -10px;
   left: 0;
-  width: 80%;
-  height: 4px;
+  width: 60%;
+  height: 3px;
   background: rgba(255, 255, 255, 0.5);
   border-radius: 2px;
 }
 
 .hero-description {
-  max-width: 800px;
-  font-size: 1.1rem;
-  line-height: 1.8;
+  font-size: 1rem;
+  line-height: 1.7;
   opacity: 0.9;
 }
 
@@ -230,30 +192,17 @@ const solutions = computed(() => [
 .solution-grid {
   display: flex;
   flex-direction: column;
-  gap: 2.5rem;
-  padding: 5rem 0;
+  gap: 1.5rem;
+  padding: 3rem 0;
   position: relative;
-  z-index: 1;
-}
-
-.solution-grid::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 80%;
-  height: 100%;
-  opacity: 0.03;
-  z-index: -1;
 }
 
 /* 卡片设计 */
 .solution-card {
   background: white;
-  border-radius: 16px;
-  padding: 2.5rem;
-  box-shadow: 0 10px 40px rgba(137, 91, 255, 0.1);
+  border-radius: var(--border-radius);
+  padding: 1.5rem;
+  box-shadow: var(--box-shadow);
   transform: translateY(20px);
   opacity: 0;
   animation: cardEnter 0.6s ease forwards;
@@ -261,7 +210,7 @@ const solutions = computed(() => [
   transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1);
   position: relative;
   overflow: hidden;
-  border: none;
+  border: 1px solid rgba(137, 91, 255, 0.1);
 }
 
 .solution-card::after {
@@ -280,120 +229,64 @@ const solutions = computed(() => [
 }
 
 .solution-card:hover {
-  transform: translateY(-8px);
-  box-shadow: 0 15px 50px rgba(137, 91, 255, 0.2);
+  transform: translateY(-5px);
+  box-shadow: 0 15px 40px rgba(137, 91, 255, 0.2);
 }
 
 .featured-solution .solution-card {
+  background: var(--bg-light);
   border: 1px solid rgba(137, 91, 255, 0.2);
-  background: linear-gradient(135deg, #f9f6ff 0%, #f0e9ff 100%);
-}
-
-.card-badge {
-  position: absolute;
-  top: 20px;
-  right: 20px;
-  background: var(--primary-gradient);
-  color: white;
-  padding: 0.3rem 1.2rem;
-  border-radius: 20px;
-  font-size: 0.8rem;
-  font-weight: 600;
-  box-shadow: 0 4px 12px rgba(137, 91, 255, 0.3);
 }
 
 .decorative-line {
-  width: 50px;
+  width: 40px;
   height: 3px;
   background: var(--primary-gradient);
-  margin-bottom: 1.5rem;
+  margin-bottom: 1rem;
   border-radius: 3px;
   transition: width 0.3s ease;
 }
 
 .solution-card:hover .decorative-line {
-  width: 80px;
+  width: 60px;
 }
 
 .card-title {
-  font-size: 1.6rem;
-  color: #2c0850;
-  margin-bottom: 1.5rem;
+  font-size: 1.3rem;
+  color: var(--text-primary);
+  margin-bottom: 1rem;
   font-weight: 600;
 }
 
 .content-point {
   display: flex;
-  gap: 1.2rem;
-  padding: 1.2rem 0;
+  gap: 0.8rem;
+  padding: 0.8rem 0;
   border-bottom: 1px solid rgba(137, 91, 255, 0.1);
 }
 
+.content-point:last-child {
+  border-bottom: none;
+}
+
 .point-icon {
   color: var(--primary-color);
-  font-size: 1.4rem;
+  font-size: 1.2rem;
   flex-shrink: 0;
   margin-top: 0.1rem;
 }
 
 .point-text {
-  color: #4a3a6b;
-  line-height: 1.7;
-  font-size: 1.05rem;
-}
-
-.card-button {
-  background: var(--primary-gradient);
-  color: white;
-  border: none;
-  padding: 0.8rem 1.8rem;
-  border-radius: 8px;
-  font-weight: 500;
-  margin-top: 1.5rem;
-  cursor: pointer;
-  transition: all 0.3s ease;
-  box-shadow: 0 4px 15px rgba(137, 91, 255, 0.3);
-}
-
-.card-button:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 6px 20px rgba(137, 91, 255, 0.4);
+  color: var(--text-secondary);
+  line-height: 1.6;
+  font-size: 0.95rem;
 }
 
 /* 布局调整 */
 .secondary-solutions {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 2rem;
-}
-
-/* 响应式设计 */
-@media (max-width: 1024px) {
-  .secondary-solutions {
-    grid-template-columns: repeat(2, 1fr);
-  }
-
-  .featured-solution {
-    margin-bottom: 2rem;
-  }
-}
-
-@media (max-width: 768px) {
-  .hero-section {
-    padding: 7rem 0 5rem;
-  }
-
-  .hero-title {
-    font-size: 2.5rem;
-  }
-
-  .secondary-solutions {
-    grid-template-columns: 1fr;
-  }
-
-  .solution-card {
-    padding: 2rem;
-  }
+  grid-template-columns: 1fr;
+  gap: 1.5rem;
 }
 
 /* 动画 */

src/views/CommitteeAppointment/size1920/index.vue

@@ -145,7 +145,10 @@ const getCommitteeRole = (name, committee) => {
 }
 
 .committees-page {
-  background-color: #faf9ff;
+  background-image: url("@/assets/image/bg.png");
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
   min-height: 100vh;
 }
 

src/views/CommitteeAppointment/size375/index.vue

@@ -3,13 +3,86 @@
     <!-- 标题区 -->
     <section class="hero-section">
       <div class="container">
-        <h1>Board Committees</h1>
-        <p>Expertise Oversight and Corporate Governance</p>
+        <h1>Committee Appointments</h1>
       </div>
     </section>
 
-    <!-- 委员会表格 -->
-    <div class="container">
+    <!-- 移动端委员会卡片 -->
+    <div class="container mobile-view">
+      <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"></div>
+            <div>
+              <router-link :to="'/boarddirectors'" class="director-link">
+                {{ director.name }}
+              </router-link>
+              <p class="director-title">{{ director.title }}</p>
+            </div>
+          </div>
+        </div>
+
+        <div class="committee-groups">
+          <!-- 审计委员会 -->
+          <div class="committee-group">
+            <h3 class="committee-name">Audit Committee</h3>
+            <div class="role-badges">
+              <template v-if="getCommitteeRole(director.name, 'Audit')">
+                <div
+                  class="role-badge"
+                  :class="
+                    getCommitteeRole(director.name, 'Audit').toLowerCase()
+                  "
+                ></div>
+              </template>
+            </div>
+          </div>
+
+          <!-- 薪酬委员会 -->
+          <div class="committee-group">
+            <h3 class="committee-name">Compensation Committee</h3>
+            <div class="role-badges">
+              <template v-if="getCommitteeRole(director.name, 'Compensation')">
+                <div
+                  class="role-badge"
+                  :class="
+                    getCommitteeRole(
+                      director.name,
+                      'Compensation'
+                    ).toLowerCase()
+                  "
+                ></div>
+              </template>
+            </div>
+          </div>
+
+          <!-- 提名与公司治理委员会 -->
+          <div class="committee-group">
+            <h3 class="committee-name">
+              Nominating and Corporate Governance Committee
+            </h3>
+            <div class="role-badges">
+              <template v-if="getCommitteeRole(director.name, 'Governance')">
+                <div
+                  class="role-badge"
+                  :class="
+                    getCommitteeRole(director.name, 'Governance').toLowerCase()
+                  "
+                ></div>
+              </template>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 桌面端表格视图 (在大屏幕上显示) -->
+    <div class="container desktop-view">
       <div class="committees-table">
         <!-- 表头 - 委员会名称 -->
         <div class="table-header">
@@ -29,7 +102,7 @@
         <div
           class="table-row"
           v-for="(director, index) in otherDirectors"
-          :key="index"
+          :key="director.name"
         >
           <!-- 董事姓名 -->
           <div class="director-cell">
@@ -39,7 +112,7 @@
                 <router-link :to="'/boarddirectors'" class="director-link">
                   {{ director.name }}
                 </router-link>
-                <!-- <p class="director-title">{{ director.title }}</p> -->
+                <p class="director-title">{{ director.title }}</p>
               </div>
             </div>
           </div>
@@ -54,8 +127,7 @@
                     getCommitteeRole(director.name, 'Audit').toLowerCase()
                   "
                 >
-                  {{ getCommitteeRole(director.name, "Audit") }}
-                  <span class="badge-icon"></span>
+                  <!-- {{ getCommitteeRole(director.name, "Audit") }} -->
                 </div>
               </template>
             </div>
@@ -73,8 +145,7 @@
                     ).toLowerCase()
                   "
                 >
-                  {{ getCommitteeRole(director.name, "Compensation") }}
-                  <span class="badge-icon"></span>
+                  <!-- {{ getCommitteeRole(director.name, "Compensation") }} -->
                 </div>
               </template>
             </div>
@@ -89,8 +160,7 @@
                     getCommitteeRole(director.name, 'Governance').toLowerCase()
                   "
                 >
-                  {{ getCommitteeRole(director.name, "Governance") }}
-                  <span class="badge-icon"></span>
+                  <!-- {{ getCommitteeRole(director.name, "Governance") }} -->
                 </div>
               </template>
             </div>
@@ -115,23 +185,22 @@ const otherDirectors = [
 
 // 模拟数据 - 实际应从API获取
 const committeeRoles = {
-  "Cao Yu": {
-    Audit: "Chair",
-    Compensation: "Member",
-  },
-  "David Lazar": {
-    Audit: "Member",
-    Governance: "Chair",
-  },
+  "Cao Yu": {},
+  "David Lazar": {},
   "Hu Bin": {
     Compensation: "Chair",
     Governance: "Member",
-  },
-  "David Natan": {
     Audit: "Member",
   },
+  "David Natan": {
+    Compensation: "Member",
+    Governance: "Chair",
+    Audit: "Chair",
+  },
   "Chan Oi Fat": {
+    Compensation: "Member",
     Governance: "Member",
+    Audit: "Member",
   },
 };
 
@@ -147,13 +216,28 @@ const getCommitteeRole = (name, committee) => {
   --primary-light: #a07cff;
   --primary-dark: #6a11cb;
   --primary-transparent: rgba(137, 91, 255, 0.1);
+  --bg-light: #f9f6ff;
+  --text-primary: #333;
+  --text-secondary: #666;
+  --border-radius: 12px;
+  --mobile-padding: 16px;
 }
 
+/* 基础样式 */
 .committees-page {
-  background-color: #faf9ff;
+  background-image: url("@/assets/image/bg-mobile.png");
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
   min-height: 100vh;
 }
 
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 var(--mobile-padding);
+}
+
 /* 标题区设计 */
 .hero-section {
   background: linear-gradient(
@@ -161,74 +245,53 @@ const getCommitteeRole = (name, committee) => {
     var(--primary-light) 0%,
     var(--primary) 100%
   );
-  padding: 6rem 2rem;
+  padding: 4rem 2rem;
   text-align: center;
-  color: #895bff;
+  color: #d7c7fe;
 }
 
 .hero-section h1 {
-  font-size: 2.8rem;
+  font-size: clamp(1.8rem, 5vw, 2.5rem);
   margin-bottom: 1rem;
 }
 
-.hero-section p {
-  font-size: 1.2rem;
-  opacity: 0.9;
+/* 桌面视图 (默认隐藏) */
+.desktop-view {
+  display: none;
 }
 
-.container {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 0 2rem;
+/* 移动端视图 (默认显示) */
+.mobile-view {
+  display: block;
+  margin: 3rem 0;
 }
 
-/* 表格设计 */
-.committees-table {
-  margin: 4rem 0;
+/* 董事卡片 */
+.director-card {
   background: white;
-  border-radius: 12px;
+  border-radius: var(--border-radius);
+  margin-bottom: 1.5rem;
+  box-shadow: 0 5px 20px rgba(137, 91, 255, 0.08);
   overflow: hidden;
-  box-shadow: 0 10px 30px rgba(137, 91, 255, 0.08);
+  transform: translateY(20px);
+  opacity: 0;
+  animation: fadeIn 0.5s ease forwards;
+  animation-delay: var(--delay);
 }
 
-.table-header,
-.table-row {
-  display: grid;
-  grid-template-columns: 1.5fr repeat(3, 1fr);
+@keyframes fadeIn {
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.card-header {
+  padding: 1.5rem;
+  background: var(--bg-light);
   border-bottom: 1px solid #f0f0f0;
 }
 
-.table-header {
-  background: #f9f6ff;
-  position: sticky;
-  top: 0;
-  z-index: 2;
-}
-
-.committee-cell {
-  padding: 1.5rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  border-right: 1px solid #f0f0f0;
-}
-
-.committee-cell:last-child {
-  border-right: none;
-}
-
-.committee-cell h3 {
-  color: var(--primary-dark);
-  font-size: 1.1rem;
-  font-weight: 600;
-}
-
-.director-cell {
-  padding: 1.5rem;
-  border-right: 1px solid #f0f0f0;
-}
-
 .director-info {
   display: flex;
   align-items: center;
@@ -236,125 +299,160 @@ const getCommitteeRole = (name, committee) => {
 }
 
 .avatar {
-  width: 50px;
-  height: 50px;
-  border-radius: 50%;
+  width: 48px;
+  height: 48px;
   background: var(--primary-transparent);
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  border-radius: 50%;
+}
+
+.director-link {
   color: var(--primary);
-  font-weight: bold;
-  flex-shrink: 0;
-}
-
-.director-info h4 {
+  text-decoration: none;
   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;
-}
-
-.role-badge.chair {
-  background: rgba(74, 222, 128, 0.15);
-  color: #10b981;
-  border: 1px solid rgba(16, 185, 129, 0.3);
-}
-
-.role-badge.member {
-  background: rgba(96, 165, 250, 0.15);
-  color: #3b82f6;
-  border: 1px solid rgba(59, 130, 246, 0.3);
-}
-
-.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="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>')
-    no-repeat center;
-}
-
-/* 悬停效果 */
-.table-row {
   transition: all 0.3s ease;
 }
 
-.table-row:hover {
-  background: #fdfcff;
-  transform: translateY(-1px);
-  box-shadow: 0 5px 15px rgba(137, 91, 255, 0.05);
+.director-link:hover {
+  color: var(--primary-dark);
+  text-decoration: underline;
 }
 
-/* 响应式设计 */
-@media (max-width: 1024px) {
+.director-title {
+  font-size: 0.9rem;
+  color: var(--text-secondary);
+  margin-top: 0.2rem;
+}
+
+.committee-groups {
+  padding: 1.5rem;
+}
+
+.committee-group {
+  margin-bottom: 1.2rem;
+}
+
+.committee-group:last-child {
+  margin-bottom: 0;
+}
+
+.committee-name {
+  font-size: 1rem;
+  color: var(--primary-dark);
+  margin-bottom: 0.7rem;
+  font-weight: 600;
+}
+
+.role-badges {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.role-badge {
+  padding: 0.4rem 0.8rem;
+  border-radius: 16px;
+  font-size: 0.85rem;
+  font-weight: 500;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 70px;
+}
+
+.chair {
+  background: rgba(137, 91, 255, 0.15);
+  color: var(--primary-dark);
+}
+
+.member {
+  background: rgba(137, 91, 255, 0.08);
+  color: var(--primary);
+}
+
+/* 桌面视图 (在大屏幕上显示) */
+@media (min-width: 768px) {
+  .mobile-view {
+    display: none;
+  }
+
+  .desktop-view {
+    display: block;
+    margin: 4rem 0;
+  }
+
+  /* 表格设计 */
   .committees-table {
-    overflow-x: auto;
+    background: white;
+    border-radius: var(--border-radius);
+    overflow: hidden;
+    box-shadow: 0 10px 30px rgba(137, 91, 255, 0.08);
   }
 
   .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;
+    display: grid;
+    grid-template-columns: 1.5fr repeat(3, 1fr);
+    border-bottom: 1px solid #f0f0f0;
   }
 
-  .hero-section h1 {
-    font-size: 2.2rem;
-  }
-
-  .director-info {
-    flex-direction: column;
-    text-align: center;
-    gap: 0.8rem;
-  }
-
-  .director-cell {
-    padding: 1rem;
+  .table-header {
+    background: var(--bg-light);
+    position: sticky;
+    top: 0;
+    z-index: 2;
   }
 
   .committee-cell {
-    padding: 1rem 0.5rem;
+    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: var(--text-primary);
+    margin-bottom: 0.3rem;
+  }
+
+  .director-title {
+    font-size: 0.85rem;
+    color: var(--text-secondary);
+  }
+
+  /* 悬停效果 */
+  .table-row {
+    transition: all 0.3s ease;
+  }
+
+  .table-row:hover {
+    background: #fdfcff;
+    transform: translateY(-1px);
+    box-shadow: 0 5px 15px rgba(137, 91, 255, 0.05);
   }
 }
-.director-link {
-  color: #895bff;
-  text-decoration: none;
-  transition: color 0.3s ease;
-}
-
-.director-link:hover {
-  color: var(--primary);
-  text-decoration: underline;
-}
 </style>

src/views/boarddirectors/size375/index.vue

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

src/views/companyoverview/size375/index.vue

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

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

@@ -41,8 +41,10 @@
 <script setup>
 import { ref, watch, onMounted, computed, reactive } from "vue";
 import { useI18n } from "vue-i18n";
-import quarterlyPdf from "@/assets/file/2025 Q1 Quarterly Results.pdf";
-
+import quarterlyPdf2025Q1 from "@/assets/file/2025 Q1 Quarterly Results.pdf";
+import annualPdf2024 from "@/assets/file/2024 Annual Report.pdf";
+import quarterlyPdf2023Q1 from "@/assets/file/2023 Q1 Quarterly Results.pdf";
+import quarterlyPdf2023Q2 from "@/assets/file/2023 Q2 Quarterly Results.pdf";
 const { t } = useI18n();
 const searchQuery = ref("");
 
@@ -52,7 +54,22 @@ const state = reactive({
       title: "2025 Q1 Quarterly Results",
       description:
         "Unaudited First Quarter and Full Year 2025 Financial Results",
-      url: quarterlyPdf,
+      url: quarterlyPdf2025Q1,
+    },
+    {
+      title: "2024 Annual Report",
+      description: "Annual Report for the year ended December 31, 2024",
+      url: annualPdf2024,
+    },
+    {
+      title: "2023 Q1 Quarterly Results",
+      description: "First Quarter and Full Year 2023 Financial Results",
+      url: quarterlyPdf2023Q1,
+    },
+    {
+      title: "2023 Q2 Quarterly Results",
+      description: "Second Quarter and Full Year 2023 Financial Results",
+      url: quarterlyPdf2023Q2,
     },
   ],
 });

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

@@ -53,6 +53,10 @@ import { ref, watch, onMounted, computed, reactive } from "vue";
 import { NButton, NInput, NTooltip } from "naive-ui";
 import { useI18n } from "vue-i18n";
 
+import quarterlyPdf2025Q1 from "@/assets/file/2025 Q1 Quarterly Results.pdf";
+import annualPdf2024 from "@/assets/file/2024 Annual Report.pdf";
+import quarterlyPdf2023Q1 from "@/assets/file/2023 Q1 Quarterly Results.pdf";
+import quarterlyPdf2023Q2 from "@/assets/file/2023 Q2 Quarterly Results.pdf";
 const { t } = useI18n();
 const searchQuery = ref("");
 
@@ -62,7 +66,22 @@ const state = reactive({
       title: "2025 Q1 Quarterly Results",
       description:
         "Unaudited First Quarter and Full Year 2025 Financial Results",
-      url: "/src/assets/file/2025 Q1 Quarterly Results.pdf",
+      url: quarterlyPdf2025Q1,
+    },
+    {
+      title: "2024 Annual Report",
+      description: "Annual Report for the year ended December 31, 2024",
+      url: annualPdf2024,
+    },
+    {
+      title: "2023 Q1 Quarterly Results",
+      description: "First Quarter and Full Year 2023 Financial Results",
+      url: quarterlyPdf2023Q1,
+    },
+    {
+      title: "2023 Q2 Quarterly Results",
+      description: "Second Quarter and Full Year 2023 Financial Results",
+      url: quarterlyPdf2023Q2,
     },
   ],
 });
@@ -90,7 +109,14 @@ const handleDownload = (url) => {
   // 创建一个隐藏的a元素
   const link = document.createElement("a");
   link.href = url;
-  link.download = url.split("/").pop(); // 从URL提取文件名
+
+  // 修复文件名提取逻辑
+  let fileName = url.split("/").pop();
+  // 移除可能存在的查询参数
+  if (fileName.includes("?") || fileName.includes("_t=")) {
+    fileName = fileName.split(/[?_]/)[0];
+  }
+  link.download = fileName;
   link.target = "_blank";
 
   // 对于移动设备，我们需要特殊处理

src/views/govern/size1920/index.vue

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

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

@@ -237,12 +237,17 @@ const handlePageSizeChange = (size) => {
 
 // 回到顶部
 const scrollToTop = () => {
-  window.scrollTo({
-    top: 0,
+  // 尝试多种方法
+  // 1. 使用document.body
+  document.body.scrollTop = 0;
+  // 2. 使用document.documentElement (HTML元素)
+  document.documentElement.scrollTop = 0;
+  // 3. 使用scrollIntoView
+  document.querySelector(".historic-data-container").scrollIntoView({
     behavior: "smooth",
+    block: "start",
   });
 };
-
 onMounted(() => {
   getPageDefaultData();
 });

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

@@ -236,12 +236,17 @@ const handlePageSizeChange = (size) => {
 
 // 回到顶部
 const scrollToTop = () => {
-  window.scrollTo({
-    top: 0,
+  // 尝试多种方法
+  // 1. 使用document.body
+  document.body.scrollTop = 0;
+  // 2. 使用document.documentElement (HTML元素)
+  document.documentElement.scrollTop = 0;
+  // 3. 使用scrollIntoView
+  document.querySelector(".historic-data-container").scrollIntoView({
     behavior: "smooth",
+    block: "start",
   });
 };
-
 onMounted(() => {
   getPageDefaultData();
 });

src/views/manage/size375/index.vue

@@ -17,15 +17,16 @@
           <!-- 每个高管卡片 -->
           <div
             v-for="(leader, index) in leadershipTeam"
-            :key="index"
+            :key="leader.name"
             class="leader-card"
-            :style="{ '--delay': index * 0.2 + 's' }"
+            :style="{ '--delay': index * 0.15 + 's' }"
           >
             <!-- 卡片上半部 -->
             <div class="card-profile">
               <div class="avatar-wrapper">
                 <div class="decorative-dot"></div>
                 <div class="initials">{{ getInitials(leader.name) }}</div>
+                <div></div>
               </div>
               <div class="profile-info">
                 <h2 class="leader-name">{{ leader.name }}</h2>
@@ -82,88 +83,89 @@ const getInitials = (name) => {
 </script>
 
 <style scoped>
-.home-page {
-  background-image: url("@/assets/image/bg.png");
-  background-size: 100% 100%;
-  background-position: center;
-  background-repeat: no-repeat;
+/* 基础变量定义 */
+:root {
+  --primary-color: #895bff;
+  --primary-gradient: linear-gradient(135deg, #7a4dff 0%, #895bff 100%);
+  --text-primary: #2c3e50;
+  --text-secondary: #5a6d80;
+  --bg-light: #f9fbfe;
+  --border-radius: 16px;
+  --box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
 }
+
 /* 基础样式 */
 .container {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 0 2rem;
+  padding: 0 1.25rem;
 }
 
 /* 标题区 */
 .leadership-header {
-  background: linear-gradient(135deg, #f9fbfe 0%, #e8f2ff 100%);
-  padding: 6rem 0 4rem;
+  background: linear-gradient(135deg, var(--bg-light) 0%, #e8f2ff 100%);
+  padding: 4rem 0 3rem;
   text-align: center;
+  margin-bottom: 2rem;
 }
 
 .page-title {
-  font-size: 2.5rem;
-  color: #2c3e50;
-  margin-bottom: 1rem;
+  font-size: clamp(1.75rem, 5vw, 2.25rem);
+  color: var(--text-primary);
+  margin-bottom: 0.75rem;
+  line-height: 1.3;
 }
 
 .page-subtitle {
   color: #6b7c93;
-  font-size: 1.1rem;
+  font-size: 1rem;
 }
 
 /* 管理团队网格 */
 .leadership-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
-  gap: 2rem;
-  padding: 4rem 0;
+  grid-template-columns: 1fr;
+  gap: 1.5rem;
+  padding: 2rem 0;
 }
 
 /* 高管卡片 */
 .leader-card {
   background: white;
-  border-radius: 20px;
-  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
+  border-radius: var(--border-radius);
+  box-shadow: var(--box-shadow);
   overflow: hidden;
   transform: translateY(20px);
   opacity: 0;
-  animation: cardEnter 0.6s ease forwards;
+  animation: cardEnter 0.5s ease forwards;
   animation-delay: var(--delay);
   transition: transform 0.3s ease;
 }
 
 .leader-card:hover {
-  transform: translateY(-5px);
+  transform: translateY(-4px);
 }
 
 /* 个人资料区 */
 .card-profile {
-  padding: 2rem;
-  background: linear-gradient(
-    135deg,
-    #7a4dff 0%,
-    #895bff 100%
-  ); /* 主色调接近 #895bff */
+  padding: 1.75rem;
+  background: var(--primary-gradient);
   position: relative;
 }
 
 .avatar-wrapper {
   position: relative;
-  width: 80px;
-  height: 80px;
-  margin-bottom: 1.5rem;
+  width: 65px;
+  height: 65px;
+  margin-bottom: 1.25rem;
 }
 
 .decorative-dot {
   position: absolute;
-  width: 20px;
-  height: 20px;
+  width: 16px;
+  height: 16px;
   background: rgba(255, 255, 255, 0.2);
   border-radius: 50%;
-  top: -10px;
-  right: -10px;
+  top: -8px;
+  right: -8px;
 }
 
 .initials {
@@ -174,9 +176,9 @@ const getInitials = (name) => {
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 1.8rem;
+  font-size: 1.5rem;
   font-weight: bold;
-  color: #895bff;
+  color: var(--primary-color);
 }
 
 .profile-info {
@@ -184,28 +186,33 @@ const getInitials = (name) => {
 }
 
 .leader-name {
-  font-size: 1.6rem;
-  margin-bottom: 0.5rem;
+  font-size: 1.35rem;
+  margin-bottom: 0.35rem;
 }
 
 .leader-position {
-  font-size: 1rem;
+  font-size: 0.95rem;
   opacity: 0.9;
+  color: #895bff;
 }
 
 /* 内容区 */
 .card-content {
-  padding: 2rem;
+  padding: 1.5rem;
 }
 
 .content-section {
-  margin-bottom: 1.5rem;
+  margin-bottom: 1.25rem;
+}
+
+.content-section:last-child {
+  margin-bottom: 0;
 }
 
 .content-section p {
-  color: #5a6d80;
-  line-height: 1.7;
-  font-size: 0.95rem;
+  color: var(--text-secondary);
+  line-height: 1.65;
+  font-size: 0.9rem;
 }
 
 /* 动画 */
@@ -215,15 +222,4 @@ const getInitials = (name) => {
     transform: translateY(0);
   }
 }
-
-/* 响应式 */
-@media (max-width: 768px) {
-  .leadership-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .leader-card {
-    margin: 0 1rem;
-  }
-}
 </style>