From 75a2b30776ecd82a36184ae8956ad5d418ee7765 Mon Sep 17 00:00:00 2001
From: fmk1023 <fmk1023@noreply.gitcode.com>
Date: Thu, 18 Dec 2025 19:47:06 +0800
Subject: [PATCH] =?UTF-8?q?Tcode=E8=BF=90=E8=90=A5=E5=B9=B3=E5=8F=B0?=
 =?UTF-8?q?=E6=94=B9=E9=80=A0=E5=8D=87=E7=BA=A7-=E6=80=81=E5=8A=BF?=
 =?UTF-8?q?=E6=84=9F=E7=9F=A5=E9=A1=B5=E9=9D=A2=E6=A0=B7=E5=BC=8F=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/config/home.ts         |  13 --
 src/views/Jyh/Situation/index.vue | 274 +++++++++++++++---------------
 src/views/Jyh/ecosystem/index.vue | 168 ++++++++++++++----
 src/views/Jyh/security/index.vue  | 143 ++++++++++++----
 4 files changed, 387 insertions(+), 211 deletions(-)

diff --git a/src/router/config/home.ts b/src/router/config/home.ts
index eb55bf3..4037e4b 100644
--- a/src/router/config/home.ts
+++ b/src/router/config/home.ts
@@ -371,19 +371,6 @@ export default [
       asideMenu: 'drawer' // 左侧菜单抽屉模式
     }
   },
-  {
-    path: '/security',
-    name: 'security',
-    component: () => import('@/views/Jyh/security/index.vue'),
-    meta: {
-      title: '全球开源风险态势感知监控中心',
-      reportTitle: 'Community',
-      className: 'w-full min-w-full',
-      hiddenFooter: true,
-      hasMobile: true,
-      asideMenu: 'drawer' // 左侧菜单抽屉模式
-    }
-  },
   {
     path: '/ecosystem',
     name: 'ecosystem',
diff --git a/src/views/Jyh/Situation/index.vue b/src/views/Jyh/Situation/index.vue
index b1d5551..5f715b0 100644
--- a/src/views/Jyh/Situation/index.vue
+++ b/src/views/Jyh/Situation/index.vue
@@ -1,164 +1,166 @@
 <template>
-  <div class="coc-container">
-    <!-- 标题区域 -->
-    <header class="coc-header">
-      <h1>态势感知指挥中心 (COC)</h1>
-      <p class="coc-desc">连接全球风险数据与开源生态价值的双模态视图</p>
+  <div class="situation-main-container">
+    <header class="header-section">
+      <div class="title-wrapper">
+        <h1 class="main-title">态势感知中心</h1>
+        <div class="sub-title-container">
+          <div class="title-line left"></div>
+          <p class="sub-title">连接全球风险数据与开源生态价值的双模态视图</p>
+          <div class="title-line right"></div>
+        </div>
+      </div>
     </header>
 
-    <!-- 演示视频占位区 -->
-    <div class="video-placeholder">
-      <BigScreen />
-    </div>
+    <nav class="tabs-nav">
+      <div
+        v-for="tab in tabs"
+        :key="tab.id"
+        class="tab-item"
+        :class="{ active: activeTab === tab.id }"
+        @click="activeTab = tab.id"
+      >
+        <span class="tab-icon"><i :class="tab.icon"></i></span>
+        <span class="tab-text">{{ tab.label }}</span>
+        <div class="active-bar"></div>
+      </div>
+    </nav>
 
-    <!-- 双屏入口按钮区 -->
-<!--    <div class="screen-entrance">-->
-<!--      <div-->
-<!--        class="entrance-card"-->
-<!--        @click="navigateTo('screen-a')"-->
-<!--      >-->
-<!--        <div class="card-icon">🖥️</div>-->
-<!--        <h3>全球开源风险态势感知监控中心</h3>-->
-<!--      </div>-->
-<!--      <div-->
-<!--        class="entrance-card"-->
-<!--        @click="navigateTo('screen-b')"-->
-<!--      >-->
-<!--        <div class="card-icon">🖥️</div>-->
-<!--        <h3>进入开源生态与贡献价值全景</h3>-->
-<!--      </div><div-->
-<!--        class="entrance-card"-->
-<!--        @click="navigateTo('screen-b')"-->
-<!--      >-->
-<!--        <div class="card-icon">🖥️</div>-->
-<!--        <h3>进入开源生态与贡献价值全景</h3>-->
-<!--      </div>-->
-<!--    </div>-->
+    <main class="content-wrapper">
+      <transition name="fade-scale" mode="out-in">
+        <RiskMonitor v-if="activeTab === 'risk'" />
+        <EcoValuePan v-else-if="activeTab === 'eco'" />
+      </transition>
+    </main>
   </div>
 </template>
 
 <script setup>
-import { useRouter } from 'vue-router'
-import BigScreen from './indexold.vue'
+import { ref } from 'vue';
+import RiskMonitor from '@/views/Jyh/security/index.vue'; // 刚才写的地图大屏
+import EcoValuePan from '@/views/Jyh/ecosystem/index.vue'; // 另一个统计面板
 
+const activeTab = ref('risk');
+
+const tabs = [
+  { id: 'risk', label: '全球开源风险态势感知监控中心', icon: 'fas fa-shield-virus' },
+  { id: 'eco', label: '开源生态与贡献价值全景', icon: 'fas fa-chart-network' }
+];
 </script>
 
-<style scoped>
-/* 全局容器 */
-.coc-container {
+<style lang="scss" scoped>
+.situation-main-container {
   min-height: 100vh;
-  background: #0a0f25;
+  background: #020617; /* 深蓝黑底色 */
   color: #fff;
-  padding: 2rem 4rem;
-  box-sizing: border-box;
-  font-family: "Microsoft YaHei", sans-serif;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
 }
 
-/* 标题区域 */
-.coc-header {
+/* 头部标题样式 */
+.header-section {
   text-align: center;
-  margin-bottom: 3rem;
+  margin-bottom: 30px;
+
+  .main-title {
+    font-size: 2.5rem;
+    font-weight: 800;
+    letter-spacing: 4px;
+    background: linear-gradient(to bottom, #fff 30%, #38bdf8 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    margin-bottom: 10px;
+  }
+
+  .sub-title-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 20px;
+
+    .sub-title {
+      font-size: 1rem;
+      color: #94a3b8;
+      text-transform: uppercase;
+      letter-spacing: 2px;
+    }
+
+    .title-line {
+      width: 100px;
+      height: 1px;
+      background: linear-gradient(to right, transparent, #38bdf8, transparent);
+      &.left { transform: rotate(0deg); }
+      &.right { transform: rotate(0deg); }
+    }
+  }
 }
 
-.coc-header h1 {
-  font-size: 2.8rem;
-  margin: 0 0 1rem;
-  color: #38bdf8;
-}
-
-.coc-desc {
-  font-size: 1.2rem;
-  color: rgba(255, 255, 255, 0.8);
-  margin: 0;
-}
-
-/* 视频占位区 */
-.video-placeholder {
-  width: 90%;
-  height: 850px;
-  margin: 0 auto 4rem;
-  /*border: 2px dashed #475569;*/
-  border-radius: 8px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  background: rgba(15, 23, 42, 0.8);
-}
-
-.video-icon {
-  font-size: 4rem;
-  margin-bottom: 1rem;
-}
-
-.video-placeholder p {
-  font-size: 1.1rem;
-  color: rgba(255, 255, 255, 0.7);
-}
-
-/* 双屏入口区 */
-.screen-entrance {
+/* 科技 Tabs 样式 */
+.tabs-nav {
   display: flex;
   justify-content: center;
-  gap: 4rem;
-  flex-wrap: wrap;
+  gap: 40px;
+  margin-bottom: 20px;
+  border-bottom: 1px solid rgba(56, 189, 248, 0.1);
+
+  .tab-item {
+    position: relative;
+    padding: 15px 30px;
+    cursor: pointer;
+    transition: all 0.3s;
+    color: #64748b;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+
+    &:hover {
+      color: #38bdf8;
+    }
+
+    &.active {
+      color: #fff;
+      text-shadow: 0 0 10px rgba(56, 189, 248, 0.5);
+
+      .active-bar {
+        width: 100%;
+        opacity: 1;
+      }
+    }
+
+    .active-bar {
+      position: absolute;
+      bottom: -1px;
+      left: 0;
+      width: 0;
+      height: 3px;
+      background: #38bdf8;
+      box-shadow: 0 0 15px #38bdf8;
+      transition: all 0.4s ease;
+      opacity: 0;
+    }
+
+    .tab-text {
+      font-weight: 600;
+      font-size: 1.1rem;
+    }
+  }
 }
 
-/* 入口卡片 */
-.entrance-card {
-  width: 350px;
-  height: 200px;
-  background: linear-gradient(135deg, #1e293b, #0f172a);
-  border-radius: 12px;
-  border: 1px solid #38bdf8;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  transition: all 0.3s ease;
-  box-shadow: 0 0 20px rgba(56, 189, 248, 0.2);
+.content-wrapper {
+  flex: 1;
+  position: relative;
 }
 
-.entrance-card:hover {
-  transform: translateY(-5px);
-  box-shadow: 0 0 30px rgba(56, 189, 248, 0.4);
-  border-color: #60a5fa;
+/* 切换动画 */
+.fade-scale-enter-active, .fade-scale-leave-active {
+  transition: all 0.4s ease;
 }
-
-.card-icon {
-  font-size: 3rem;
-  margin-bottom: 1rem;
+.fade-scale-enter-from {
+  opacity: 0;
+  transform: scale(0.98);
 }
-
-.entrance-card h3 {
-  font-size: 1.4rem;
-  margin: 0;
-  color: #f8fafc;
-}
-
-/* 响应式适配 */
-@media (max-width: 768px) {
-  .coc-container {
-    padding: 1.5rem 2rem;
-  }
-
-  .coc-header h1 {
-    font-size: 2rem;
-  }
-
-  .video-placeholder {
-    width: 100%;
-    height: 200px;
-  }
-
-  .screen-entrance {
-    gap: 2rem;
-  }
-
-  .entrance-card {
-    width: 100%;
-    max-width: 300px;
-  }
+.fade-scale-leave-to {
+  opacity: 0;
+  transform: scale(1.02);
 }
 </style>
diff --git a/src/views/Jyh/ecosystem/index.vue b/src/views/Jyh/ecosystem/index.vue
index c7bc718..15e60bd 100644
--- a/src/views/Jyh/ecosystem/index.vue
+++ b/src/views/Jyh/ecosystem/index.vue
@@ -8,9 +8,9 @@
         <div class="index-module__NV_5cW__floatingElement"></div>
       </div>
       <div class="index-module__NV_5cW__titleSection">
-        <div class="index-module__NV_5cW__titleContainer">
-          <h1 class="index-module__NV_5cW__title">开源生态与贡献价值全景</h1>
-        </div>
+<!--        <div class="index-module__NV_5cW__titleContainer">-->
+<!--          <h1 class="index-module__NV_5cW__title">开源生态与贡献价值全景</h1>-->
+<!--        </div>-->
         <!--        <div class="index-module__NV_5cW__subtitle">-->
         <!--          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"-->
         <!--               stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"-->
@@ -23,25 +23,25 @@
         <!--          <span>汇聚武汉开源力量，共建城市开源生态</span>-->
         <!--        </div>-->
         <!-- 武汉4项核心开源数据统计 -->
-        <div class="index-module__NV_5cW__statsBar">
-          <div class="index-module__NV_5cW__stat">
-            <span class="index-module__NV_5cW__statNumber">200万 +</span>
-            <span class="index-module__NV_5cW__statLabel">活跃开发者</span>
+        <div class="stats-glass-bar">
+          <div class="stat-node">
+            <span class="stat-value">200万+</span>
+            <span class="stat-desc">活跃开发者</span>
           </div>
-          <div class="index-module__NV_5cW__statDivider"></div>
-          <div class="index-module__NV_5cW__stat">
-            <span class="index-module__NV_5cW__statNumber">300万 +</span>
-            <span class="index-module__NV_5cW__statLabel">开源项目</span>
+          <div class="stat-separator"></div>
+          <div class="stat-node">
+            <span class="stat-value">300万+</span>
+            <span class="stat-desc">开源项目</span>
           </div>
-          <div class="index-module__NV_5cW__statDivider"></div>
-          <div class="index-module__NV_5cW__stat">
-            <span class="index-module__NV_5cW__statNumber">500 +</span>
-            <span class="index-module__NV_5cW__statLabel">开源企业</span>
+          <div class="stat-separator"></div>
+          <div class="stat-node">
+            <span class="stat-value">500+</span>
+            <span class="stat-desc">开源企业</span>
           </div>
-          <div class="index-module__NV_5cW__statDivider"></div>
-          <div class="index-module__NV_5cW__stat">
-            <span class="index-module__NV_5cW__statNumber">2800亿</span>
-            <span class="index-module__NV_5cW__statLabel">产业估值</span>
+          <div class="stat-separator"></div>
+          <div class="stat-node">
+            <span class="stat-value">2800亿</span>
+            <span class="stat-desc">产业估值</span>
           </div>
         </div>
       </div>
@@ -51,17 +51,17 @@
     <div class="index-module__NV_5cW__content">
       <!-- ECharts图表区域 -->
       <div class="index-module__NV_5cW__chartsSection">
-        <div class="index-module__NV_5cW__sectionHeader">
-          <h2 class="index-module__NV_5cW__sectionTitle">
-            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
-              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
-              class="lucide lucide-chart-pie" aria-hidden="true">
-              <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
-              <circle cx="12" cy="10" r="3"></circle>
-            </svg>
-            <span>开源生态与贡献价值全景数据可视化</span>
-          </h2>
-        </div>
+<!--        <div class="index-module__NV_5cW__sectionHeader">-->
+<!--          <h2 class="index-module__NV_5cW__sectionTitle">-->
+<!--            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"-->
+<!--              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"-->
+<!--              class="lucide lucide-chart-pie" aria-hidden="true">-->
+<!--              <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>-->
+<!--              <circle cx="12" cy="10" r="3"></circle>-->
+<!--            </svg>-->
+<!--            <span>开源生态与贡献价值全景数据可视化</span>-->
+<!--          </h2>-->
+<!--        </div>-->
 
         <!-- 图表网格布局：新增多个模块 -->
         <div class="index-module__NV_5cW__chartsGrid">
@@ -2361,7 +2361,7 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .index-module__NV_5cW__container {
-  background: linear-gradient(to bottom right, #faf5ff, #60a5fa);
+  //background: linear-gradient(to bottom right, #faf5ff, #60a5fa);
   min-height: 100vh;
   padding: 2rem 1rem;
   position: relative;
@@ -4158,4 +4158,110 @@ onMounted(() => {
     }
   }
 }
+
+.stats-glass-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  /* 布局控制：撑满容器并增加内边距 */
+  width: 100%;
+  padding: 2rem 4rem;
+  margin: 2rem 0;
+
+  /* 深色玻璃拟态背景 */
+  background: rgba(255, 255, 255, 0.02);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+
+  /* 极细微的边框勾勒 */
+  border-radius: 1rem;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+
+  /* 外阴影与内发光，增加悬浮感 */
+  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3),
+  inset 0 0 20px rgba(255, 255, 255, 0.02);
+
+  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+
+  &:hover {
+    border-color: rgba(56, 189, 248, 0.4);
+    background: rgba(255, 255, 255, 0.04);
+    transform: translateY(-2px);
+  }
+}
+
+.stat-node {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.75rem;
+  transition: transform 0.3s ease;
+
+  &:hover {
+    transform: scale(1.05);
+    .stat-value {
+      text-shadow: 0 0 25px rgba(56, 189, 248, 0.8);
+    }
+  }
+}
+
+.stat-value {
+  /* 科技感亮蓝渐变 */
+  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
+  font-size: 2.25rem;
+  font-weight: 800;
+  background: linear-gradient(180deg, #fff 0%, #38bdf8 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+
+  /* 基础发光效果 */
+  filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.3));
+  letter-spacing: -1px;
+}
+
+.stat-desc {
+  /* 在黑底上使用半透明白色，更有高级感 */
+  color: rgba(255, 255, 255, 0.6);
+  font-size: 0.875rem;
+  font-weight: 500;
+  letter-spacing: 0.1rem;
+  text-transform: uppercase;
+}
+
+.stat-separator {
+  /* 渐隐分割线 */
+  width: 1px;
+  height: 3rem;
+  background: linear-gradient(
+      to bottom,
+      rgba(255, 255, 255, 0),
+      rgba(255, 255, 255, 0.2),
+      rgba(255, 255, 255, 0)
+  );
+  margin: 0 1rem;
+}
+
+/* 响应式适配 */
+@media (max-width: 1024px) {
+  .stats-glass-bar {
+    padding: 2rem;
+  }
+  .stat-value {
+    font-size: 1.75rem;
+  }
+}
+
+@media (max-width: 768px) {
+  .stats-glass-bar {
+    flex-direction: column;
+    gap: 2rem;
+  }
+  .stat-separator {
+    width: 50%;
+    height: 1px;
+    background: linear-gradient(to right, transparent, rgba(255,255,255,0.2), transparent);
+  }
+}
 </style>
diff --git a/src/views/Jyh/security/index.vue b/src/views/Jyh/security/index.vue
index a99febd..7692edf 100644
--- a/src/views/Jyh/security/index.vue
+++ b/src/views/Jyh/security/index.vue
@@ -8,9 +8,9 @@
         <div class="index-module__NV_5cW__floatingElement"></div>
       </div>
       <div class="index-module__NV_5cW__titleSection">
-        <div class="index-module__NV_5cW__titleContainer">
-          <h1 class="index-module__NV_5cW__title">全球开源风险态势感知监控中心</h1>
-        </div>
+<!--        <div class="index-module__NV_5cW__titleContainer">-->
+<!--          <h1 class="index-module__NV_5cW__title">全球开源风险态势感知监控中心</h1>-->
+<!--        </div>-->
 <!--        <div class="index-module__NV_5cW__subtitle">-->
 <!--          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"-->
 <!--               stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"-->
@@ -23,25 +23,25 @@
 <!--          <span>汇聚武汉开源力量，共建城市开源生态</span>-->
 <!--        </div>-->
         <!-- 武汉4项核心开源数据统计 -->
-        <div class="index-module__NV_5cW__statsBar">
-          <div class="index-module__NV_5cW__stat">
-            <span class="index-module__NV_5cW__statNumber">120+</span>
-            <span class="index-module__NV_5cW__statLabel">开源企业</span>
+        <div class="stats-bar-container">
+          <div class="stat-item">
+            <span class="stat-number">120+</span>
+            <span class="stat-label">开源企业</span>
           </div>
-          <div class="index-module__NV_5cW__statDivider"></div>
-          <div class="index-module__NV_5cW__stat">
-            <span class="index-module__NV_5cW__statNumber">32+</span>
-            <span class="index-module__NV_5cW__statLabel">高校参与</span>
+          <div class="stat-divider"></div>
+          <div class="stat-item">
+            <span class="stat-number">32+</span>
+            <span class="stat-label">高校参与</span>
           </div>
-          <div class="index-module__NV_5cW__statDivider"></div>
-          <div class="index-module__NV_5cW__stat">
-            <span class="index-module__NV_5cW__statNumber">300+</span>
-            <span class="index-module__NV_5cW__statLabel">社区活动</span>
+          <div class="stat-divider"></div>
+          <div class="stat-item">
+            <span class="stat-number">300+</span>
+            <span class="stat-label">社区活动</span>
           </div>
-          <div class="index-module__NV_5cW__statDivider"></div>
-          <div class="index-module__NV_5cW__stat">
-            <span class="index-module__NV_5cW__statNumber">200+</span>
-            <span class="index-module__NV_5cW__statLabel">开源项目</span>
+          <div class="stat-divider"></div>
+          <div class="stat-item">
+            <span class="stat-number">200+</span>
+            <span class="stat-label">开源项目</span>
           </div>
         </div>
       </div>
@@ -51,17 +51,17 @@
     <div class="index-module__NV_5cW__content">
       <!-- ECharts图表区域 -->
       <div class="index-module__NV_5cW__chartsSection">
-        <div class="index-module__NV_5cW__sectionHeader">
-          <h2 class="index-module__NV_5cW__sectionTitle">
-            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
-                 stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
-                 class="lucide lucide-chart-pie" aria-hidden="true">
-              <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
-              <circle cx="12" cy="10" r="3"></circle>
-            </svg>
-            <span>全球开源风险态势感知监控中心数据可视化</span>
-          </h2>
-        </div>
+<!--        <div class="index-module__NV_5cW__sectionHeader">-->
+<!--          <h2 class="index-module__NV_5cW__sectionTitle">-->
+<!--            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"-->
+<!--                 stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"-->
+<!--                 class="lucide lucide-chart-pie" aria-hidden="true">-->
+<!--              <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>-->
+<!--              <circle cx="12" cy="10" r="3"></circle>-->
+<!--            </svg>-->
+<!--            <span>全球开源风险态势感知监控中心数据可视化</span>-->
+<!--          </h2>-->
+<!--        </div>-->
 
         <!-- 图表网格布局：新增多个模块 -->
         <div class="index-module__NV_5cW__chartsGrid">
@@ -1355,7 +1355,7 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .index-module__NV_5cW__container {
-  background: linear-gradient(to bottom right, #faf5ff, #60a5fa);
+  background: #020617;
   min-height: 100vh;
   padding: 2rem 1rem;
   position: relative;
@@ -2024,4 +2024,85 @@ onMounted(() => {
 .chartCard__actionBtn--active:hover {
   background-color: #2563eb;
 }
+
+.stats-bar-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-around; // 平均分布
+  flex-wrap: wrap;
+
+  // 宽度与边距优化
+  width: 100%;
+  max-width: 1400px; // 设置一个较大的上限适配超大屏，或设为 100%
+  margin: 1.5rem auto;
+  padding: 1.5rem 3rem;
+
+  // 背景设计：深色玻璃拟态
+  background: rgba(255, 255, 255, 0.03);
+  backdrop-filter: blur(15px);
+  border-radius: 1.5rem;
+
+  // 关键：针对黑底增加微弱的白边勾勒，增加精致感
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4),
+  inset 0 0 10px rgba(255, 255, 255, 0.02);
+
+  transition: all 0.4s ease;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.05);
+    border-color: rgba(56, 189, 248, 0.3); // 悬停时边框微亮（天蓝色）
+  }
+}
+
+.stat-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1;
+  min-width: 120px;
+  gap: 0.5rem;
+}
+
+.stat-number {
+  // 数字发光效果
+  color: #60a5fa; // 保持你偏好的蓝色
+  font-size: 2rem; // 略微放大
+  font-weight: 800;
+  line-height: 1;
+  text-shadow: 0 0 15px rgba(96, 165, 250, 0.4); // 核心：增加数字呼吸感
+  letter-spacing: -1px;
+}
+
+.stat-label {
+  // 标签颜色改为高亮白/浅灰，在黑底上才清晰
+  color: rgba(255, 255, 255, 0.7);
+  font-size: 0.95rem;
+  font-weight: 500;
+  letter-spacing: 0.05em;
+}
+
+.stat-divider {
+  // 分割线改为渐变，避免生硬
+  height: 2.5rem;
+  width: 1px;
+  background: linear-gradient(
+      to bottom,
+      transparent,
+      rgba(255, 255, 255, 0.15),
+      transparent
+  );
+
+  @media (max-width: 768px) {
+    display: none; // 移动端隐藏分割线
+  }
+}
+
+// 移动端适配
+@media (max-width: 640px) {
+  .stats-bar-container {
+    padding: 1.5rem 1rem;
+    gap: 1.5rem;
+  }
+}
 </style>