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%
   );
-}
+  --text-primary: #2c0850;
-.home-page {
+  --text-secondary: #4a3a6b;
-  background-image: url("@/assets/image/bg.png");
+  --text-light: #6c5ce7;
-  background-size: 100% 100%;
+  --bg-light: #f9f6ff;
-  background-position: center;
+  --border-radius: 16px;
-  background-repeat: no-repeat;
+  --box-shadow: 0 10px 30px rgba(137, 91, 255, 0.15);
 }
 
+/* 基础样式 */
 .container {
-  max-width: 1280px;
+  padding: 0 1.25rem;
-  margin: 0 auto;
-  padding: 0 2rem;
 }
 
-/* 标题区 - 紫色渐变 */
+/* 标题区样式 */
 .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;
+  font-size: clamp(1.8rem, 5vw, 2.5rem);
-  margin-bottom: 2rem;
+  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%;
+  width: 60%;
-  height: 4px;
+  height: 3px;
   background: rgba(255, 255, 255, 0.5);
   border-radius: 2px;
 }
 
 .hero-description {
-  max-width: 800px;
+  font-size: 1rem;
-  font-size: 1.1rem;
+  line-height: 1.7;
-  line-height: 1.8;
   opacity: 0.9;
 }
 
@@ -230,30 +192,17 @@ const solutions = computed(() => [
 .solution-grid {
   display: flex;
   flex-direction: column;
-  gap: 2.5rem;
+  gap: 1.5rem;
-  padding: 5rem 0;
+  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;
+  border-radius: var(--border-radius);
-  padding: 2.5rem;
+  padding: 1.5rem;
-  box-shadow: 0 10px 40px rgba(137, 91, 255, 0.1);
+  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);
+  transform: translateY(-5px);
-  box-shadow: 0 15px 50px rgba(137, 91, 255, 0.2);
+  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;
+  font-size: 1.3rem;
-  color: #2c0850;
+  color: var(--text-primary);
-  margin-bottom: 1.5rem;
+  margin-bottom: 1rem;
   font-weight: 600;
 }
 
 .content-point {
   display: flex;
-  gap: 1.2rem;
+  gap: 0.8rem;
-  padding: 1.2rem 0;
+  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;
+  color: var(--text-secondary);
-  line-height: 1.7;
+  line-height: 1.6;
-  font-size: 1.05rem;
+  font-size: 0.95rem;
-}
-
-.card-button {
-  background: var(--primary-gradient);
-  color: white;
-  border: none;
-  padding: 0.8rem 1.8rem;
-  border-radius: 8px;
-  font-weight: 500;
-  margin-top: 1.5rem;
-  cursor: pointer;
-  transition: all 0.3s ease;
-  box-shadow: 0 4px 15px rgba(137, 91, 255, 0.3);
-}
-
-.card-button:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 6px 20px rgba(137, 91, 255, 0.4);
 }
 
 /* 布局调整 */
 .secondary-solutions {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 2rem;
-}
-
-/* 响应式设计 */
-@media (max-width: 1024px) {
-  .secondary-solutions {
-    grid-template-columns: repeat(2, 1fr);
-  }
-
-  .featured-solution {
-    margin-bottom: 2rem;
-  }
-}
-
-@media (max-width: 768px) {
-  .hero-section {
-    padding: 7rem 0 5rem;
-  }
-
-  .hero-title {
-    font-size: 2.5rem;
-  }
-
-  .secondary-solutions {
   grid-template-columns: 1fr;
-  }
+  gap: 1.5rem;
-
-  .solution-card {
-    padding: 2rem;
-  }
 }
 
 /* 动画 */

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>
+        <h1>Committee Appointments</h1>
-        <p>Expertise Oversight and Corporate Governance</p>
       </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") }}
+                  <!-- {{ getCommitteeRole(director.name, "Audit") }} -->
-                  <span class="badge-icon"></span>
                 </div>
               </template>
             </div>
@@ -73,8 +145,7 @@
                     ).toLowerCase()
                   "
                 >
-                  {{ getCommitteeRole(director.name, "Compensation") }}
+                  <!-- {{ getCommitteeRole(director.name, "Compensation") }} -->
-                  <span class="badge-icon"></span>
                 </div>
               </template>
             </div>
@@ -89,8 +160,7 @@
                     getCommitteeRole(director.name, 'Governance').toLowerCase()
                   "
                 >
-                  {{ getCommitteeRole(director.name, "Governance") }}
+                  <!-- {{ getCommitteeRole(director.name, "Governance") }} -->
-                  <span class="badge-icon"></span>
                 </div>
               </template>
             </div>
@@ -115,23 +185,22 @@ const otherDirectors = [
 
 // 模拟数据 - 实际应从API获取
 const committeeRoles = {
-  "Cao Yu": {
+  "Cao Yu": {},
-    Audit: "Chair",
+  "David Lazar": {},
-    Compensation: "Member",
-  },
-  "David Lazar": {
-    Audit: "Member",
-    Governance: "Chair",
-  },
   "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,32 +245,146 @@ 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;
+.desktop-view {
-  opacity: 0.9;
+  display: none;
 }
 
-.container {
+/* 移动端视图 (默认显示) */
-  max-width: 1200px;
+.mobile-view {
-  margin: 0 auto;
+  display: block;
-  padding: 0 2rem;
+  margin: 3rem 0;
+}
+
+/* 董事卡片 */
+.director-card {
+  background: white;
+  border-radius: var(--border-radius);
+  margin-bottom: 1.5rem;
+  box-shadow: 0 5px 20px rgba(137, 91, 255, 0.08);
+  overflow: hidden;
+  transform: translateY(20px);
+  opacity: 0;
+  animation: fadeIn 0.5s ease forwards;
+  animation-delay: var(--delay);
+}
+
+@keyframes fadeIn {
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.card-header {
+  padding: 1.5rem;
+  background: var(--bg-light);
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.director-info {
+  display: flex;
+  align-items: center;
+  gap: 1.2rem;
+}
+
+.avatar {
+  width: 48px;
+  height: 48px;
+  background: var(--primary-transparent);
+  border-radius: 50%;
+}
+
+.director-link {
+  color: var(--primary);
+  text-decoration: none;
+  font-size: 1.1rem;
+  font-weight: 500;
+  transition: all 0.3s ease;
+}
+
+.director-link:hover {
+  color: var(--primary-dark);
+  text-decoration: underline;
+}
+
+.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 {
-  margin: 4rem 0;
     background: white;
-  border-radius: 12px;
+    border-radius: var(--border-radius);
     overflow: hidden;
     box-shadow: 0 10px 30px rgba(137, 91, 255, 0.08);
   }
@@ -199,7 +397,7 @@ const getCommitteeRole = (name, committee) => {
   }
 
   .table-header {
-  background: #f9f6ff;
+    background: var(--bg-light);
     position: sticky;
     top: 0;
     z-index: 2;
@@ -235,68 +433,15 @@ const getCommitteeRole = (name, committee) => {
     gap: 1.2rem;
   }
 
-.avatar {
-  width: 50px;
-  height: 50px;
-  border-radius: 50%;
-  background: var(--primary-transparent);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--primary);
-  font-weight: bold;
-  flex-shrink: 0;
-}
-
   .director-info h4 {
     font-size: 1.1rem;
-  color: #333;
+    color: var(--text-primary);
     margin-bottom: 0.3rem;
   }
 
   .director-title {
     font-size: 0.85rem;
-  color: #666;
+    color: var(--text-secondary);
-}
-
-/* 职位徽章设计 */
-.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;
   }
 
   /* 悬停效果 */
@@ -309,52 +454,5 @@ const getCommitteeRole = (name, committee) => {
     transform: translateY(-1px);
     box-shadow: 0 5px 15px rgba(137, 91, 255, 0.05);
   }
-
-/* 响应式设计 */
-@media (max-width: 1024px) {
-  .committees-table {
-    overflow-x: auto;
-  }
-
-  .table-header,
-  .table-row {
-    grid-template-columns: 250px repeat(3, 200px);
-    width: max-content;
-    min-width: 100%;
-  }
-}
-
-@media (max-width: 768px) {
-  .hero-section {
-    padding: 4rem 1rem;
-  }
-
-  .hero-section h1 {
-    font-size: 2.2rem;
-  }
-
-  .director-info {
-    flex-direction: column;
-    text-align: center;
-    gap: 0.8rem;
-  }
-
-  .director-cell {
-    padding: 1rem;
-  }
-
-  .committee-cell {
-    padding: 1rem 0.5rem;
-  }
-}
-.director-link {
-  color: #895bff;
-  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
         >
+          <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>
@@ -56,39 +59,40 @@ const otherDirectors = [
 </script>
 
 <style scoped>
-.home-page {
+/* 基础变量定义 */
-  background-image: url("@/assets/image/bg-mobile.png");
+:root {
-  background-size: cover;
+  --primary-color: #895bff;
-  background-position: center;
+  --text-primary: #1a1a1a;
-  background-repeat: no-repeat;
+  --text-secondary: #4a4a4a;
-  min-height: 100vh;
+  --text-light: #666;
+  --border-color: #f0f0f0;
+  --mobile-padding: 16px;
+  --section-spacing: 32px;
 }
 
 .directors-page {
-  width: 100%;
   margin: 0 auto;
-  padding: 40px 20px;
+  padding: 40px var(--mobile-padding);
-  box-sizing: border-box;
 }
 
 .page-title {
   text-align: center;
-  margin-bottom: 20px;
+  margin-bottom: 12px;
-  font-weight: 600;
+  font-weight: 500;
-  color: #1a1a1a;
+  color: var(--text-primary);
-  font-size: 28px;
+  font-size: clamp(1.5rem, 5vw, 2rem);
 }
 
 .directors-list {
   display: flex;
   flex-direction: column;
-  gap: 40px;
+  gap: var(--section-spacing);
-  margin-top: 30px;
+  margin-top: 32px;
 }
 
 .director-item {
-  padding-bottom: 40px;
+  padding-bottom: var(--section-spacing);
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  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;
+  margin-bottom: 0;
-  font-size: 24px;
+  font-size: clamp(1.25rem, 4vw, 1.75rem);
-  font-weight: 600;
+  font-weight: 500;
-  color: #1a1a1a;
+  color: var(--text-primary);
-  line-height: 1.3;
 }
 
 .director-title {
-  font-size: 18px;
+  font-size: clamp(0.95rem, 3vw, 1.1rem);
-  color: #555;
+  color: var(--text-light);
   display: block;
-  margin-bottom: 20px;
+  margin-bottom: 16px;
-  line-height: 1.4;
 }
 
 .divider {
-  margin: 20px 0;
+  margin: 12px 0;
-  background-color: rgba(0, 0, 0, 0.1);
+  background-color: var(--border-color);
 }
 
 .director-bio {
-  line-height: 1.8;
+  line-height: 1.7;
-  color: #333;
+  color: var(--text-secondary);
-  font-size: 16px;
+  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">
+      <section class="company-overview content-section">
-        <n-h2 class="section-title">{{
+        <h2 class="section-title">
-          $t("COMPANYOVERVIEW.INTRO_TITLE")
+          {{ $t("COMPANYOVERVIEW.TITLETWO.TITLE") }}
-        }}</n-h2>
+        </h2>
-        <n-p class="section-content">{{
+        <div class="content-block">
-          $t("COMPANYOVERVIEW.TITLETWO.CONTENT")
+          <p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENT") }}</p>
-        }}</n-p>
+          <p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTWO") }}</p>
-        <n-p class="section-content">{{
+          <p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTHREE") }}</p>
-          $t("COMPANYOVERVIEW.TITLETWO.CONTENTTWO")
+        </div>
-        }}</n-p>
-        <n-p class="section-content">{{
-          $t("COMPANYOVERVIEW.TITLETWO.CONTENTTHREE")
-        }}</n-p>
       </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 content-section">
-      <section class="section timeline-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;
+.content-section {
-  padding: 0 20px;
+  padding: 0 16px;
-  color: var(--text-color);
+  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;
+  margin-bottom: 48px;
-  border-radius: 8px;
+  border-radius: 0 0 16px 16px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
 }
 
 .hero-title {
-  font-size: 3.5rem;
+  font-size: clamp(2rem, 6vw, 3.5rem);
-  margin-bottom: 20px;
+  margin-bottom: 16px;
   font-weight: 700;
+  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
 }
 
-.hero-subtitle {
+/* 公司简介部分 */
-  font-size: 1.5rem;
+.company-overview.content-section {
-  opacity: 0.9;
+  margin-top: -24px;
-}
+  background-color: white;
-
+  border-radius: 16px;
-/* 通用部分样式 */
+  padding: 32px 24px;
-.section {
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
-  margin-bottom: 80px;
-}
-
-.section-title {
-  font-size: 2.2rem;
-  margin-bottom: 30px;
   position: relative;
-  display: inline-block;
+  z-index: 10;
 }
 
-.section-title:after {
+.content-block p {
-  content: "";
+  margin-bottom: 16px;
-  position: absolute;
-  bottom: -10px;
-  left: 0;
-  width: 60px;
-  height: 4px;
-  background: linear-gradient(to right, #1a2a6c, #fdbb2d);
-  border-radius: 2px;
-}
-
-.section-content {
-  font-size: 1.1rem;
   line-height: 1.8;
-  margin-bottom: 20px;
+  text-align: justify;
-  color: var(--text-color-secondary);
 }
 
 /* 使命愿景卡片 */
-.mission-section {
-  margin: 80px 0;
-}
-
 .mission-cards {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  grid-template-columns: 1fr;
-  gap: 30px;
+  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);
+  transform: translateY(-3px);
-  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
 }
 
 .card-title {
-  font-size: 1.5rem;
+  font-size: 1.3rem;
-  margin-bottom: 20px;
+  margin-bottom: 16px;
-  color: #895bff;
+  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;
+  padding-left: 36px;
-  margin-top: 50px;
+  margin-top: 32px;
 }
 
 .timeline:before {
   content: "";
   position: absolute;
   top: 0;
-  left: 20px;
+  left: 16px;
   height: 100%;
-  width: 4px;
+  width: 2px;
-  background: linear-gradient(to bottom, #895bff, #fdbb2d);
+  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;
+  width: 32px;
-  height: 40px;
+  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;
+  font-size: 1.2rem;
-  margin-bottom: 15px;
+  margin-bottom: 12px;
-  color: #1a2a6c;
+  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;
+  background: var(--bg-color);
-  padding: 60px;
+  padding: 32px 24px;
-  border-radius: 12px;
+  border-radius: 16px;
-  margin: 80px 0;
+  margin-top: 48px;
 }
 
 .achievement-stats {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  grid-template-columns: repeat(2, 1fr);
-  gap: 30px;
+  gap: 16px;
-  margin-top: 50px;
+  margin-top: 32px;
 }
 
 .stat-item {
   text-align: center;
-  padding: 30px 20px;
+  padding: 24px 16px;
   background: white;
-  border-radius: 8px;
+  border-radius: 12px;
-  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
+  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;
+  font-size: 1.8rem;
-  color: #1a2a6c;
+  color: var(--primary-color);
-  margin-bottom: 10px;
+  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) {
+@media (min-width: 768px) {
-  .hero-title {
+  .content-section {
-    font-size: 2.5rem;
+    padding: 0 32px;
+    margin-bottom: 64px;
   }
 
-  .hero-subtitle {
+  .hero-section {
-    font-size: 1.2rem;
+    padding: 120px 32px;
+    margin-bottom: 64px;
   }
 
-  .section-title {
+  .company-overview.content-section {
-    font-size: 1.8rem;
+    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;
+    left: -50px;
-    width: 30px;
+    width: 40px;
-    height: 30px;
+    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");
+:root {
-  background-size: 100% 100%;
+  --primary-color: #895bff;
-  background-position: center;
+  --primary-gradient: linear-gradient(135deg, #7a4dff 0%, #895bff 100%);
-  background-repeat: no-repeat;
+  --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;
+  padding: 0 1.25rem;
-  margin: 0 auto;
-  padding: 0 2rem;
 }
 
 /* 标题区 */
 .leadership-header {
-  background: linear-gradient(135deg, #f9fbfe 0%, #e8f2ff 100%);
+  background: linear-gradient(135deg, var(--bg-light) 0%, #e8f2ff 100%);
-  padding: 6rem 0 4rem;
+  padding: 4rem 0 3rem;
   text-align: center;
+  margin-bottom: 2rem;
 }
 
 .page-title {
-  font-size: 2.5rem;
+  font-size: clamp(1.75rem, 5vw, 2.25rem);
-  color: #2c3e50;
+  color: var(--text-primary);
-  margin-bottom: 1rem;
+  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));
+  grid-template-columns: 1fr;
-  gap: 2rem;
+  gap: 1.5rem;
-  padding: 4rem 0;
+  padding: 2rem 0;
 }
 
 /* 高管卡片 */
 .leader-card {
   background: white;
-  border-radius: 20px;
+  border-radius: var(--border-radius);
-  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
+  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;
+  padding: 1.75rem;
-  background: linear-gradient(
+  background: var(--primary-gradient);
-    135deg,
-    #7a4dff 0%,
-    #895bff 100%
-  ); /* 主色调接近 #895bff */
   position: relative;
 }
 
 .avatar-wrapper {
   position: relative;
-  width: 80px;
+  width: 65px;
-  height: 80px;
+  height: 65px;
-  margin-bottom: 1.5rem;
+  margin-bottom: 1.25rem;
 }
 
 .decorative-dot {
   position: absolute;
-  width: 20px;
+  width: 16px;
-  height: 20px;
+  height: 16px;
   background: rgba(255, 255, 255, 0.2);
   border-radius: 50%;
-  top: -10px;
+  top: -8px;
-  right: -10px;
+  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;
+  font-size: 1.35rem;
-  margin-bottom: 0.5rem;
+  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;
+  color: var(--text-secondary);
-  line-height: 1.7;
+  line-height: 1.65;
-  font-size: 0.95rem;
+  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>