Merge branch 'wyfMain-dev'

fix back to top
Merge branch 'main' of https://gitea-inner.fontree.cn/scout666/fiee-official-website
2025-05-23 16:18:02 +08:00 · 2025-05-23 16:09:24 +08:00 · 2025-05-23 15:42:03 +08:00 · 2025-05-23 15:42:02 +08:00 · 2025-05-23 15:41:24 +08:00 · 2025-05-23 15:41:10 +08:00
16 changed files with 683 additions and 591 deletions
--- a/src/assets/file/2023
+++ b/src/assets/file/2023
--- a/src/assets/file/2023
+++ b/src/assets/file/2023
--- a/src/assets/file/2024
+++ b/src/assets/file/2024
--- a/src/assets/file/2025
+++ b/src/assets/file/2025
--- a/src/views/BusinessServices/size1920/index.vue
+++ b/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;
 }
--- a/src/views/BusinessServices/size375/index.vue
+++ b/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;
-  }
+  gap: 1.5rem;
 }

 /* 动画 */
--- a/src/views/CommitteeAppointment/size1920/index.vue
+++ b/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;
 }

--- a/src/views/CommitteeAppointment/size375/index.vue
+++ b/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,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;
-  opacity: 0.9;
+/* 桌面视图 (默认隐藏) */
+.desktop-view {
+  display: none;
 }

-.container {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 0 2rem;
+/* 移动端视图 (默认显示) */
+.mobile-view {
+  display: block;
+  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;
-}
-
-/* 职位徽章设计 */
-.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;
+    color: var(--text-secondary);
  }

  /* 悬停效果 */
@ -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>
--- a/src/views/boarddirectors/size375/index.vue
+++ b/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");
-  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>
--- a/src/views/companyoverview/size375/index.vue
+++ b/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>
--- a/src/views/financialinformation/quarterlyresults/size1920/index.vue
+++ b/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,
    },
  ],
 });
--- a/src/views/financialinformation/quarterlyresults/size375/index.vue
+++ b/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";

  // 对于移动设备，我们需要特殊处理
--- a/src/views/govern/size1920/index.vue
+++ b/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",
    },
  ],
--- a/src/views/historic-stock/size1920/index.vue
+++ b/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();
 });
--- a/src/views/historic-stock/size375/index.vue
+++ b/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();
 });
--- a/src/views/manage/size375/index.vue
+++ b/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>
Author	SHA1	Message	Date
wangyifeng	24be7c61e5	Merge branch 'wyfMain-dev'	2025-05-23 16:18:02 +08:00
张元山	8c0c7bad57	fix back to top	2025-05-23 16:09:24 +08:00
张元山	77cd8fddfd	Merge branch 'main' of https://gitea-inner.fontree.cn/scout666/fiee-official-website	2025-05-23 15:42:03 +08:00
张元山	9e2833cdee	fix file down	2025-05-23 15:42:02 +08:00
liwenhao	3d6ad2475b	Merge branch 'main' of https://gitea-inner.fontree.cn/scout666/fiee-official-website into LiWenHao	2025-05-23 15:41:24 +08:00
liwenhao	bf53ba4e3c	修复pdf预览	2025-05-23 15:41:10 +08:00
张元山	a318455eda	Merge branch 'main' of https://gitea-inner.fontree.cn/scout666/fiee-official-website	2025-05-23 15:37:17 +08:00
张元山	6778e09a30	add quarterlyresults file	2025-05-23 15:37:15 +08:00
liwenhao	c5c22124d7	Merge branch 'main' of https://gitea-inner.fontree.cn/scout666/fiee-official-website into LiWenHao	2025-05-23 15:32:24 +08:00
liwenhao	cc77c4e482	适配H5	2025-05-23 15:32:12 +08:00