From cc1514d3c4ed52693e0510ef8f3d4f28ccfd2849 Mon Sep 17 00:00:00 2001
From: fmk1023 <fmk1023@noreply.gitcode.com>
Date: Wed, 7 Jan 2026 14:05:28 +0800
Subject: [PATCH] =?UTF-8?q?=E6=80=81=E5=8A=BF=E6=84=9F=E7=9F=A5=E5=B9=B3?=
 =?UTF-8?q?=E5=8F=B0-=E6=AD=A6=E6=B1=89=E5=B8=82=E5=BC=80=E6=BA=90?=
 =?UTF-8?q?=E7=94=9F=E6=80=81=E5=BB=BA=E8=AE=BE=E9=A1=B5=E9=9D=A2=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9=EF=BC=8C=E5=A2=9E=E5=8A=A0=E6=AD=A6=E6=B1=89=E5=BC=80?=
 =?UTF-8?q?=E6=BA=90=E9=A1=B9=E7=9B=AE=E5=88=97=E8=A1=A8=E3=80=81=E4=B8=AD?=
 =?UTF-8?q?=E5=9B=BD=E5=9F=8E=E5=B8=82=E5=BC=80=E6=BA=90=E9=A1=B9=E7=9B=AE?=
 =?UTF-8?q?=E6=95=B0=E9=87=8F=E5=AF=B9=E6=AF=94=E3=80=81=E5=BC=80=E6=BA=90?=
 =?UTF-8?q?=E5=88=9B=E6=96=B0=E8=81=94=E7=9B=9F=E4=BC=98=E7=A7=80=E9=A1=B9?=
 =?UTF-8?q?=E7=9B=AE=E3=80=81=E5=9F=8E=E5=B8=82=E5=BC=80=E6=BA=90=E4=BA=BA?=
 =?UTF-8?q?=E6=89=8D=E6=95=B0=E9=87=8F=E5=AF=B9=E6=AF=94=E3=80=81=E5=9F=8E?=
 =?UTF-8?q?=E5=B8=82=E7=A4=BE=E5=8C=BA=E6=95=B0=E9=87=8F=E5=AF=B9=E6=AF=94?=
 =?UTF-8?q?=E3=80=81=E9=87=8D=E7=82=B9=E5=9F=8E=E5=B8=82=E9=AB=98=E6=A0=A1?=
 =?UTF-8?q?=E5=BC=80=E6=BA=90=E7=A4=BE=E5=9B=A2=E6=95=B0=E9=87=8F=E3=80=81?=
 =?UTF-8?q?=E5=90=84=E7=9C=81=E5=B8=82=E5=BC=80=E6=BA=90=E7=9B=B8=E5=85=B3?=
 =?UTF-8?q?=E6=94=BF=E7=AD=96=E5=8F=91=E5=B8=83=E6=95=B0=E9=87=8F=E3=80=81?=
 =?UTF-8?q?=E5=BC=80=E6=94=BE=E5=8E=9F=E5=AD=90=E6=A0=A1=E5=9B=AD=E8=A1=8C?=
 =?UTF-8?q?=C2=B7=E5=9F=8E=E5=B8=82=E6=B4=BB=E5=8A=A8=E5=9C=BA=E6=AC=A1?=
 =?UTF-8?q?=E3=80=81=E5=85=A8=E5=9B=BD=E9=87=8D=E7=82=B9=E5=9F=8E=E5=B8=82?=
 =?UTF-8?q?=E5=BC=80=E6=BA=90=E9=95=9C=E5=83=8F=E7=AB=99/=E8=8A=82?=
 =?UTF-8?q?=E7=82=B9=E6=95=B0=E9=87=8F=E5=AF=B9=E6=AF=94=E7=AD=89=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE=E5=8F=AF=E8=A7=86=E5=8C=96=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/imgs/logo/logo-kfyzjjh.png |  Bin 0 -> 7782 bytes
 src/views/Jyh/Community/StatsBar.vue  |   10 +-
 src/views/Jyh/Community/index.vue     | 2120 +++++++++++--------------
 3 files changed, 950 insertions(+), 1180 deletions(-)
 create mode 100644 src/assets/imgs/logo/logo-kfyzjjh.png

diff --git a/src/assets/imgs/logo/logo-kfyzjjh.png b/src/assets/imgs/logo/logo-kfyzjjh.png
new file mode 100644
index 0000000000000000000000000000000000000000..c3f0e158cc3b73c14132152adf0dabb00548c11d
GIT binary patch
literal 7782
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

literal 0
HcmV?d00001

diff --git a/src/views/Jyh/Community/StatsBar.vue b/src/views/Jyh/Community/StatsBar.vue
index 18ea38b..0fb03b7 100644
--- a/src/views/Jyh/Community/StatsBar.vue
+++ b/src/views/Jyh/Community/StatsBar.vue
@@ -6,18 +6,18 @@
     </div>
     <div class="stat-separator"></div>
     <div class="stat-node">
-      <span class="stat-value">30+</span>
-      <span class="stat-desc">高校参与</span>
+      <span class="stat-value">--</span>
+      <span class="stat-desc">武汉开源社区数量</span>
     </div>
     <div class="stat-separator"></div>
     <div class="stat-node">
-      <span class="stat-value">120+</span>
-      <span class="stat-desc">社区活动</span>
+      <span class="stat-value">--</span>
+      <span class="stat-desc">武汉开源开发者数量</span>
     </div>
     <div class="stat-separator"></div>
     <div class="stat-node">
       <span class="stat-value">200+</span>
-      <span class="stat-desc">开源项目</span>
+      <span class="stat-desc">武汉开源项目数量</span>
     </div>
   </div>
 </template>
diff --git a/src/views/Jyh/Community/index.vue b/src/views/Jyh/Community/index.vue
index da349bd..720f9ee 100644
--- a/src/views/Jyh/Community/index.vue
+++ b/src/views/Jyh/Community/index.vue
@@ -1,214 +1,285 @@
 <template>
   <div class="index-module__NV_5cW__container">
-    <!-- 头部区域：标题、副标题、武汉核心数据统计 -->
     <div class="index-module__NV_5cW__header">
-      <div class="index-module__NV_5cW__floatingElements">
-        <div class="index-module__NV_5cW__floatingElement"></div>
-        <div class="index-module__NV_5cW__floatingElement"></div>
-        <div class="index-module__NV_5cW__floatingElement"></div>
-      </div>
       <div class="index-module__NV_5cW__titleSection">
-
-        <div class="text-center max-w-4xl mx-auto">
-          <div class="flex items-center justify-center mb-5">
-            <div class="title-arrow-left"></div>
-
-            <h2 class="text-[32px] md:text-[40px] font-bold text-white px-5 tracking-[0.05em] leading-tight">
+        <div class="text-center max-w-4xl mx-auto header-content">
+          <div class="flex items-center justify-center mb-4 header-title-row">
+            <div class="title-decoration left"></div>
+            <h2 class="main-title">
               开源 · 武汉
             </h2>
-
-            <div class="title-arrow-right"></div>
+            <div class="title-decoration right"></div>
           </div>
-
-          <p class="text-[#888888] text-base md:text-lg leading-relaxed max-w-3xl mx-auto">
+          <p class="sub-title">
             汇聚武汉开源力量，共建城市开源生态
           </p>
         </div>
-
         <StatsBar />
       </div>
     </div>
 
-    <!-- 内容区域：ECharts图表模块 + 项目列表 -->
     <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>
+                 class="lucide lucide-activity" aria-hidden="true">
+              <path d="M22 12h-4l-3 9L9 3l-3 9H2"/>
             </svg>
             <span>武汉开源生态数据可视化</span>
           </h2>
         </div>
 
-        <!-- 图表网格布局：新增多个模块 -->
         <div class="index-module__NV_5cW__chartsGrid">
-          <!-- 1. 武汉优秀开源项目（列表展示）-->
+
           <div class="index-module__NV_5cW__chartCard list-card">
-            <h3 class="chartCard__title">武汉优秀开源项目</h3>
-            <!-- 新增：ref + 鼠标事件 -->
+            <h3 class="chartCard__title">武汉开源项目列表</h3>
             <div class="chartCard__container list-container"
                  ref="scrollContainer1"
                  @mouseenter="pauseScroll(1)"
                  @mouseleave="resumeScroll(1)">
               <div class="project-list">
-                <div class="project-item" v-for="(item, index) in excellentProjects" :key="index">
-                  <span class="project-rank">{{ index + 1 }}</span>
+                <div class="project-item" v-for="(item, index) in githubProjects" :key="index">
+                  <div class="project-rank-wrapper">
+                    <span class="project-rank">{{ index + 1 }}</span>
+                  </div>
                   <div class="project-info">
                     <span class="project-name">{{ item.name }}</span>
                     <span class="project-desc">{{ item.desc }}</span>
                   </div>
-                  <span class="project-org">{{ item.org }}</span>
+                  <div class="project-meta">
+                    <span class="project-stars">★ {{ item.stars }}</span>
+                  </div>
                 </div>
               </div>
             </div>
+            <div class="source-footer">
+              <span class="source-label">数据来源：</span>
+              <div class="source-content">
+                <svg class="source-icon" viewBox="0 0 98 96" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.128 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="#333"/></svg>
+                <span class="source-name">GitHub</span>
+              </div>
+            </div>
           </div>
 
-          <!-- 2. 高校开源参与分布（饼图）-->
           <div class="index-module__NV_5cW__chartCard">
-            <h3 class="chartCard__title">高校开源参与分布</h3>
+            <h3 class="chartCard__title">中国城市开源项目数量对比</h3>
             <div class="chartCard__container">
-              <div class="num-empty" v-if="isEmpty.university"></div>
-              <div v-else id="universityChart" class="chart"></div>
+              <div v-if="isEmpty.cityProject" class="num-empty"></div>
+              <div v-else id="cityProjectChart" class="chart"></div>
+            </div>
+            <div class="source-footer">
+              <span class="source-label">数据来源：</span>
+              <div class="source-content">
+                <svg class="source-icon" viewBox="0 0 98 96" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.128 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="#333"/></svg>
+                <span class="source-name">GitHub</span>
+              </div>
             </div>
           </div>
 
-          <!-- 3. 开源社区区域分布（柱状图）-->
-          <div class="index-module__NV_5cW__chartCard">
-            <h3 class="chartCard__title">开源社区区域分布</h3>
-            <div class="chartCard__container">
-              <div class="num-empty" v-if="isEmpty.community"></div>
-              <div v-else id="communityChart" class="chart"></div>
-            </div>
-          </div>
-
-          <!-- 4. OSS Compass开源项目排行（横向柱状图）-->
-          <div class="index-module__NV_5cW__chartCard">
-            <h3 class="chartCard__title">OSS Compass 开源项目排行</h3>
-            <div class="chartCard__container">
-              <div class="num-empty" v-if="isEmpty.ossCompass"></div>
-              <div v-else id="ossCompassChart" class="chart"></div>
-            </div>
-          </div>
-
-          <!-- 5. 武汉开源开发者排行榜（横向柱状图）-->
-          <div class="index-module__NV_5cW__chartCard">
-            <h3 class="chartCard__title">武汉开源开发者排行榜</h3>
-            <div class="chartCard__container">
-              <div class="num-empty" v-if="isEmpty.developer"></div>
-              <div v-else id="developerChart" class="chart"></div>
-            </div>
-          </div>
-
-          <!-- 6. 2025武汉市优秀开源软件项目（列表）-->
           <div class="index-module__NV_5cW__chartCard list-card">
-            <h3 class="chartCard__title">2025武汉市优秀开源软件项目</h3>
-            <!-- 新增：ref + 鼠标事件 -->
+            <div class="flex justify-center pb-2">
+              <div class="language-tab" @click="switchTab">
+                <span :class="{ active: activeTab === 0 }">开源创新联盟优秀项目</span>
+                <span :class="{ active: activeTab === 1 }">武汉优秀开源项目</span>
+              </div>
+            </div>
+
             <div class="chartCard__container list-container"
                  ref="scrollContainer2"
                  @mouseenter="pauseScroll(2)"
                  @mouseleave="resumeScroll(2)">
               <div class="project-list">
-                <div class="project-item" v-for="(item, index) in excellentProjects2025" :key="index">
-                  <span class="project-rank">{{ index + 1 }}</span>
+                <div class="project-item" v-for="(item, index) in currentProjectList" :key="index">
+                  <div class="project-rank-wrapper">
+                    <span class="project-rank" :class="{'rank-new': activeTab === 1}">{{ index + 1 }}</span>
+                  </div>
                   <div class="project-info">
                     <span class="project-name">{{ item.name }}</span>
                     <span class="project-desc">{{ item.desc }}</span>
                   </div>
-                  <span class="project-org">{{ item.org }}</span>
+                  <span class="project-org-tag">{{ item.org }}</span>
                 </div>
               </div>
             </div>
+            <div class="source-footer">
+              <span class="source-label">数据来源：</span>
+              <div class="source-content">
+                <div class="source-logo-text">Gov</div>
+                <span class="source-name">武汉市经信局/软件协会</span>
+              </div>
+            </div>
           </div>
 
-          <!-- 7. 武汉市语言与技术竞争趋势（折线图，2020-2024）-->
-          <div class="index-module__NV_5cW__chartCard chartCard__wide">
-            <h3 class="chartCard__title">武汉市编程语言占比趋势（2020-2024）</h3>
+          <div class="index-module__NV_5cW__chartCard">
+            <h3 class="chartCard__title">城市开源人才数量对比</h3>
             <div class="chartCard__container">
-              <div class="num-empty" v-if="isEmpty.languageTech"></div>
-              <div v-else id="languageTechChart" class="chart"></div>
+              <div v-if="isEmpty.talent" class="num-empty"></div>
+              <div v-else id="talentChart" class="chart"></div>
+            </div>
+            <div class="source-footer">
+              <span class="source-label">数据来源：</span>
+              <div class="source-content">
+                <img src="@/assets/imgs/logo/gitcode-ico.png" class="source-logo-circle" />
+                <span class="source-name">GitCode</span>
+              </div>
             </div>
           </div>
+
+          <div class="index-module__NV_5cW__chartCard list-card">
+            <h3 class="chartCard__title">武汉明星开发者贡献榜</h3>
+            <div class="chartCard__container list-container"
+                 ref="developerScrollRef"
+                 @mouseenter="pauseDeveloperScroll"
+                 @mouseleave="resumeDeveloperScroll">
+              <div class="developer-list">
+                <div class="developer-item" v-for="(name, index) in developerNames" :key="index">
+<!--                  <div class="dev-rank" :class="'rank-' + (index + 1)">{{ index + 1 }}</div>-->
+
+                  <div class="dev-avatar" :style="{ background: getAvatarBg(index) }">
+                    {{ name.charAt(0) }}
+                  </div>
+
+                  <div class="dev-info">
+                    <div class="dev-name">{{ name }}</div>
+                    <div class="dev-tag">核心贡献者</div>
+                  </div>
+
+                  <div class="dev-medal">
+                    <svg v-if="index < 3" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="#f59e0b" stroke="none"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
+                    <span v-else class="dev-score">活跃</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="source-footer">
+              <span class="source-label">数据来源：</span>
+              <div class="source-content">
+                <div class="source-logo-circle" style="background: #102e64;"></div>
+                <span class="source-name">华科开放原子俱乐部</span>
+              </div>
+            </div>
+          </div>
+
+          <div class="index-module__NV_5cW__chartCard">
+            <div class="flex justify-center pb-2">
+              <div class="language-tab" @click="switchCommunityTab">
+                <span :class="{ active: activeCommunityTab === 0 }">城市社区数量排行</span>
+                <span :class="{ active: activeCommunityTab === 1 }">武汉知名开源社区</span>
+              </div>
+            </div>
+
+            <div class="chartCard__container">
+              <div v-if="activeCommunityTab === 0" id="communityRankChart" class="chart"></div>
+
+              <div v-else class="list-container"
+                   ref="communityScrollRef"
+                   @mouseenter="pauseCommunityScroll"
+                   @mouseleave="resumeCommunityScroll">
+                <div class="community-scroll-list">
+                  <div class="community-item" v-for="(item, index) in wuhanCommunities" :key="index">
+                    <div class="community-logo">
+                      {{ item.name.charAt(0) }}
+                    </div>
+                    <div class="community-info">
+                      <div class="community-top">
+                        <span class="community-name">{{ item.name }}</span>
+                        <span class="community-tag">{{ item.type }}</span>
+                      </div>
+                      <p class="community-slogan">{{ item.slogan }}</p>
+                    </div>
+                    <div class="community-status">
+                      <span class="status-dot"></span>
+                      活跃
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="source-footer">
+              <span class="source-label">数据来源：</span>
+              <div class="source-content">
+                <div class="source-logo-circle" style="background: #102e64;"></div>
+                <span class="source-name">华科开放原子俱乐部</span>
+              </div>
+            </div>
+          </div>
+
+          <div class="index-module__NV_5cW__chartCard">
+            <h3 class="chartCard__title">重点城市高校开源社团数量</h3>
+            <div class="chartCard__container">
+              <div v-if="isEmpty.club" class="num-empty"></div>
+              <div v-else id="clubChart" class="chart"></div>
+            </div>
+            <div class="source-footer">
+              <span class="source-label">数据来源：</span>
+              <div class="source-content">
+                <div class="source-logo-circle" style="background: #102e64;"></div>
+                <span class="source-name">华科开放原子俱乐部</span>
+              </div>
+            </div>
+          </div>
+
+          <div class="index-module__NV_5cW__chartCard">
+            <h3 class="chartCard__title">各省市开源相关政策发布数量</h3>
+            <div class="chartCard__container">
+              <div v-if="isEmpty.policy" class="num-empty"></div>
+              <div v-else id="policyChart" class="chart"></div>
+            </div>
+            <div class="source-footer">
+              <span class="source-label">数据来源：</span>
+              <div class="source-content">
+                <img src="@/assets/imgs/logo/logo-kfyzjjh.png" class="source-logo-circle" />
+                <span class="source-name">开放原子开源基金会</span>
+              </div>
+            </div>
+          </div>
+
+          <div class="index-module__NV_5cW__chartCard">
+            <h3 class="chartCard__title">开放原子校园行·城市活动场次</h3>
+            <div class="chartCard__container">
+              <div v-if="isEmpty.campus" class="num-empty"></div>
+              <div v-else id="campusChart" class="chart"></div>
+            </div>
+            <div class="source-footer">
+              <span class="source-label">数据来源：</span>
+              <div class="source-content">
+                <img src="@/assets/imgs/logo/logo-kfyzjjh.png" class="source-logo-circle" />
+                <span class="source-name">开放原子开源基金会</span>
+              </div>
+            </div>
+          </div>
+
+          <div class="index-module__NV_5cW__chartCard chartCard__wide">
+            <h3 class="chartCard__title">全国重点城市开源镜像站/节点数量对比</h3>
+            <div class="chartCard__container">
+              <div v-if="isEmpty.mirrors" class="num-empty"></div>
+              <div v-else id="mirrorChart" class="chart"></div>
+            </div>
+            <div class="source-footer">
+              <span class="source-label">数据来源：</span>
+              <div class="source-content">
+                <div class="source-logo-circle" style="background: #102e64;"></div>
+                <span class="source-name">华科开放原子俱乐部</span>
+              </div>
+            </div>
+          </div>
+
         </div>
       </div>
 
-      <!-- 加入武汉开源社区行动区 -->
       <div class="index-module__NV_5cW__actionSection">
         <div class="index-module__NV_5cW__actionBackground"></div>
         <div class="index-module__NV_5cW__actionContent">
           <div class="index-module__NV_5cW__actionIcon">
-            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none"
-                 stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
-                 class="lucide lucide-sparkles" aria-hidden="true">
-              <path
-                d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"></path>
-              <path d="M20 3v4"></path>
-              <path d="M22 5h-4"></path>
-              <path d="M4 17v2"></path>
-              <path d="M5 18H3"></path>
-            </svg>
+            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-rocket"><path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"/><path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"/><path d="M9 12H4s.55-3.03 2-4c1.62-1.1 4-1 4-1s.25 2.25 1 4c.45 1.04 1 2 2 3h-5z"/></svg>
           </div>
           <h3 class="index-module__NV_5cW__actionTitle">加入武汉开源社区</h3>
-          <p class="index-module__NV_5cW__actionDescription">
-            与武汉本地开发者、企业、高校携手共建开源生态，共享开源成果，参与社区活动与项目协作
-          </p>
-          <div class="index-module__NV_5cW__actionFeatures">
-            <div class="index-module__NV_5cW__feature">
-              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
-                   stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
-                   class="lucide lucide-users" aria-hidden="true">
-                <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
-                <path d="M16 3.128a4 4 0 0 1 0 7.744"></path>
-                <path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
-                <circle cx="9" cy="7" r="4"></circle>
-              </svg>
-              <span>本地技术交流</span>
-            </div>
-            <div class="index-module__NV_5cW__feature">
-              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
-                   stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
-                   class="lucide lucide-building2" aria-hidden="true">
-                <path d="M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z"></path>
-                <path d="M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2"></path>
-                <path d="M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2"></path>
-                <path d="M10 6h4"></path>
-                <path d="M10 10h4"></path>
-                <path d="M10 14h4"></path>
-                <path d="M10 18h4"></path>
-              </svg>
-              <span>企业项目协作</span>
-            </div>
-            <div class="index-module__NV_5cW__feature">
-              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
-                   stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
-                   class="lucide lucide-graduation-cap" aria-hidden="true">
-                <path d="M22 10v6M2 10l10-5 10 5-10 5z"></path>
-                <path d="M6 12v5c3 3 9 3 12 0v-5"></path>
-              </svg>
-              <span>高校产学研对接</span>
-            </div>
-          </div>
-          <button type="button"
-                  class="ant-btn css-aa1tt5 ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-lg index-module__NV_5cW__createButton">
-            <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"
-                 class="lucide lucide-user-plus" aria-hidden="true">
-              <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
-              <circle cx="9" cy="7" r="4"></circle>
-              <path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
-              <path d="M16 3.12a4 4 0 0 1 0 7.76"></path>
-            </svg>
-            <span>加入武汉开源社区</span>
-            <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"
-                 class="lucide lucide-arrow-right" aria-hidden="true">
-              <path d="M5 12h14"></path>
-              <path d="m12 5 7 7-7 7"></path>
-            </svg>
+          <p class="index-module__NV_5cW__actionDescription">与武汉本地开发者、企业、高校携手共建开源生态</p>
+          <button type="button" class="action-btn">
+            <span>加入我们</span>
           </button>
         </div>
       </div>
@@ -217,538 +288,451 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref, nextTick, watch, onUnmounted } from 'vue';
+import { onMounted, ref, nextTick, watch, onUnmounted, computed } from 'vue';
 import * as echarts from 'echarts';
 import { usePageResize } from '@/utils/hooks/usePageResize';
 import StatsBar from './StatsBar.vue'
 
-// 页面尺寸响应式
 const { widthType } = usePageResize();
 
-// 1. 武汉优秀开源项目数据
+// ================= 数据定义 =================
+const githubProjects = ref([
+  { name: 'DWSurvey', desc: '基于Vue+SpringBoot的问卷系统', stars: '3.2k' },
+  { name: 'Eova', desc: '快速开发平台', stars: '2.8k' },
+  { name: 'ClickVisual', desc: '日志分析平台', stars: '2.5k' },
+  { name: 'Meta2d.js', desc: '2D可视化引擎', stars: '2.1k' },
+  { name: 'Deepin Wine', desc: '在Linux运行Windows应用', stars: '6.5k' },
+  { name: 'GoFrame', desc: 'Go语言企业级开发框架', stars: '11k' },
+  { name: 'MindSpore', desc: '全场景AI计算框架(武汉所)', stars: '18k' },
+  { name: 'IoTDB', desc: '物联网时序数据库', stars: '4.2k' }
+]);
+
+const activeTab = ref(0);
+
 const excellentProjects = ref([
-  { name: '调问（DWSurvey）', desc: '问卷表单', org: '极推科技（武汉）有限公司' },
-  { name: 'Eova', desc: '低代码开发平台', org: '武汉简码科技有限公司' },
-  { name: 'ClickVisual', desc: '轻量级日志查询、分析、报警可视化平台', org: '武汉初心科技有限公司' },
-  { name: 'meta2d.js', desc: '2D图元组成的可视化引擎', org: '武汉乐吾乐科技有限责任公司' },
-  { name: 'Juno', desc: '分布式微服务管理系统', org: '武汉斗鱼鱼乐网络科技有限公司' },
-  { name: 'Opentalent 开源北极星', desc: '开源人才评价系统', org: '湖北大学' },
-  { name: 'fountain', desc: '仓颉编程语言实现的JAVA Spring框架的国产替代', org: '江汉大学' },
-  { name: 'deepin', desc: '深度操作系统', org: '武汉深之度科技有限公司' },
-  { name: 'RustSBI', desc: '安全引导程序', org: '华中科技大学' },
-  { name: 'NextDenovo', desc: '高效且精确的长读长纠错与组装工具', org: '武汉希望组生物科技有限公司' }
+  { "name": "调问（DWSurvey）", "desc": "开源问卷表单系统", "org": "极推科技" },
+  { "name": "Eova", "desc": "低代码开发平台", "org": "武汉简码" },
+  { "name": "ClickVisual", "desc": "可视化日志分析告警平台", "org": "武汉初心" },
+  { "name": "Meta2d.js", "desc": "2D图元可视化引擎", "org": "乐吾乐科技" },
+  { "name": "Juno", "desc": "分布式微服务管理系统", "org": "武汉斗鱼" },
+  { "name": "Opentalent", "desc": "开源人才评价系统", "org": "湖北大学" },
+  { "name": "Fountain", "desc": "仓颉语言版 Spring 框架替代", "org": "江汉大学" },
+  { "name": "deepin", "desc": "深度桌面操作系统", "org": "深之度" },
+  { "name": "RustSBI", "desc": "RISC-V 安全引导程序", "org": "华中科技大学" },
+  { "name": "NextDenovo", "desc": "长读长序列组装工具", "org": "武汉希望组" }
+]);
+const chinaExcellentProjects = ref([
+  {
+    "name": "Deepin 深度操作系统",
+    "desc": "国内领先的国产 Linux 发行版，旨在为全球用户提供美观易用、安全可靠的操作系统体验，是国产软件生态的核心。",
+    "org": "武汉深之度"
+  },
+  {
+    "name": "Jupiter 微服务治理框架",
+    "desc": "由斗鱼研发并开源的面向治理的微服务框架，支持多数据源、多注册中心，适用于高并发场景。",
+    "org": "武汉斗鱼"
+  },
+  {
+    "name": "RustSBI 安全引导程序",
+    "desc": "基于 Rust 语言开发的 RISC-V 指令集体系结构安全引导程序，提供更高内存安全性。",
+    "org": "华中科技大学"
+  },
+  {
+    "name": "芯片开源 EDA 研发",
+    "desc": "致力于国产电子设计自动化工具开源化，解决芯片设计环节中的关键技术难题。",
+    "org": "华中科技大学"
+  },
+  {
+    "name": "LuoJiaSET 框架与 LuoJiaSET 样本库",
+    "desc": "专注于智能遥感影像解译，提供海量遥感样本数据集和深度学习框架。",
+    "org": "武汉大学"
+  },
+  {
+    "name": "鲲鹏安全库 (Kunpengsecl)",
+    "desc": "基于鲲鹏处理器的机密计算和受信任执行环境安全开发库，支撑云计算与隐私计算。",
+    "org": "武汉大学"
+  },
+  {
+    "name": "柚坛工具箱 (Uotan Toolbox)",
+    "desc": "针对 Android 发烧友开发的图形化综合工具箱，集成刷机、系统优化等多种功能。",
+    "org": "武昌理工学院"
+  },
+  {
+    "name": "凹语言 (Wa Language)",
+    "desc": "国内首个针对 WebAssembly 设计的通用编程语言，兼具 Web 灵活性与原生运行速度。",
+    "org": "武汉凹语言"
+  },
+  {
+    "name": "OpenHIS 开源医疗系统",
+    "desc": "开源的医院信息系统，旨在通过标准化、模块化方式赋能基层医疗机构数字化升级。",
+    "org": "武汉新致新源"
+  },
+  {
+    "name": "NextDenovo",
+    "desc": "高效且精确的长读长序列纠错和组装工具，主要用于基因组测序领域。",
+    "org": "武汉希望组生物科技有限公司"
+  }
 ]);
 
-// 2. 2025武汉市优秀开源软件项目
-const excellentProjects2025 = ref([
-  { name: '调问（DWSurvey）', desc: '问卷表单', org: '极推科技（武汉）有限公司' },
-  { name: 'Eova', desc: '低代码开发平台', org: '武汉简码科技有限公司' },
-  { name: 'ClickVisual', desc: '轻量级日志查询、分析、报警可视化平台', org: '武汉初心科技有限公司' },
-  { name: 'meta2d.js', desc: '2D图元组成的可视化引擎', org: '武汉乐吾乐科技有限责任公司' },
-  { name: 'Juno', desc: '分布式微服务管理系统', org: '武汉斗鱼鱼乐网络科技有限公司' },
-  { name: 'Opentalent 开源北极星', desc: '开源人才评价系统', org: '湖北大学' },
-  { name: 'fountain', desc: '仓颉编程语言实现的JAVA Spring框架的国产替代', org: '江汉大学' }
+// 城市社区数量
+const cityCommunityData = {
+  xAxis: ['北京', '上海', '深圳', '杭州', '武汉', '成都'],
+  data: [42, 38, 35, 28, 22, 18]
+};
+
+// 武汉知名社区数据
+const wuhanCommunities = ref([
+  { name: 'Deepin (深度)', type: '操作系统', slogan: '最大的国产桌面操作系统开源社区' },
+  { name: 'OpenHarmony 武汉', type: '万物互联', slogan: '华科/武大等高校深度参与的终端操作系统' },
+  { name: 'MindSpore 武汉', type: '人工智能', slogan: '昇思全场景AI框架武汉开发者社区' },
+  { name: 'IoTDB 社区', type: '工业物联网', slogan: '源自清华在汉广泛应用的工业时序数据库' },
+  { name: 'GoFrame 社区', type: '后端开发', slogan: '模块化、全栈式、模块化的Go语言开发框架' },
+  { name: '飞桨 (PaddlePaddle)', type: '深度学习', slogan: '百度武汉开源生态开发者汇聚地' },
+  { name: '极狐 GitLab 武汉', type: 'DevOps', slogan: '开源信息基础设施与协同开发平台' }
 ]);
 
-// 3. 图表数据定义（已更新为新数据）
+const activeCommunityTab = ref(0);
+const communityScrollRef = ref<HTMLElement | null>(null);
+let communityTimer: NodeJS.Timeout | null = null;
+
+const switchCommunityTab = () => {
+  if (activeCommunityTab.value === 1) {
+    activeCommunityTab.value = 0
+    nextTick(() => initCommunityRankChart());
+    pauseCommunityScroll();
+  } else {
+    activeCommunityTab.value = 1
+    nextTick(() => startCommunityScroll());
+  }
+};
+
+const startCommunityScroll = () => {
+  const container = communityScrollRef.value;
+  if (!container) return;
+  const list = container.querySelector('.community-scroll-list') as HTMLElement;
+  if (!list || list.scrollHeight <= container.clientHeight) return;
+
+  if (communityTimer) clearInterval(communityTimer);
+  communityTimer = setInterval(() => {
+    container.scrollTop += 1;
+    if (container.scrollTop >= (list.scrollHeight - container.clientHeight)) {
+      container.scrollTop = 0;
+    }
+  }, 45);
+};
+const pauseCommunityScroll = () => communityTimer && clearInterval(communityTimer);
+const resumeCommunityScroll = () => activeCommunityTab.value === 1 && startCommunityScroll();
+
+const currentProjectList = computed(() => {
+  return activeTab.value === 0 ? chinaExcellentProjects.value : excellentProjects.value;
+});
+
+const switchTab = (index: number) => {
+  if(activeTab.value===1) {
+    activeTab.value = 0
+  } else {
+    activeTab.value = 1
+  }
+  nextTick(() => {
+    if (scrollContainer2.value) scrollContainer2.value.scrollTop = 0;
+    pauseScroll(2);
+    resumeScroll(2);
+  });
+};
+
 const chartData = ref({
-  // 高校开源参与分布（新的占比数据）
-  university: [
-    { value: 28, name: '华中科技大学' },
-    { value: 25, name: '武汉大学' },
-    { value: 13, name: '江汉大学' },
-    { value: 9, name: '湖北大学' },
-    { value: 7, name: '武汉理工大学' },
-    { value: 6, name: '华中师范大学' },
-    { value: 6, name: '武汉科技大学' },
-    { value: 5, name: '湖北工业大学' },
-    { value: 1, name: '其他' }
-  ],
-  // 开源社区区域分布（行政区+社区数量）
-  community: {
-    xAxis: ['洪山区', '武昌区', '东湖高新区', '江夏区', '东西湖区', '青山区'],
-    data: [22, 11, 9, 5, 2, 1]
+  cityProject: {
+    xAxis: ['北京', '上海', '深圳', '杭州', '武汉', '成都', '广州'],
+    data: [12500, 11200, 9800, 8500, 6200, 5800, 5400]
   },
-  // OSS Compass开源项目排行（保留原有数据）
-  ossCompass: {
-    yAxis: [
-      'openharmony/docs',
-      'mindspore/mindspore',
-      'openharmony/arkui_ace_engine',
-      'apache/doris',
-      'openharmony/interface_sdk-js',
-      'anolis-challenge/activity-school',
-      'PaddlePaddle/Paddle',
-      'StarRocks/starrocks',
-      'openharmony/xts_acts',
-      'ant-design/ant-design'
-    ],
-    data: [91.55, 67.35, 62.07, 48.82, 44.06, 39.77, 39.55, 34.2, 30.39, 30.37],
-    // 完整分数数据（用于tooltip）
-    fullData: [
-      { openRank: '91.55 | 30.86', quality: '92.06 | 8.905', wxb: '70.69 | -14.8', score: '84.77 | 8.32' },
-      { openRank: '67.35 | 27.41', quality: '96.92 | 7.17', wxb: '98.915 | 7.1', score: '87.73 | 13.89' },
-      { openRank: '62.07 | 17.98', quality: '71.69 | 2.885', wxb: '76.06 | 10.9', score: '69.94 | 10.59' },
-      { openRank: '48.82 | 10.14', quality: '67.26 | 0.573', wxb: '30.5 | 7.3', score: '48.86 | 6.00' },
-      { openRank: '44.06 | 11.49', quality: '32.5 | 3.14', wxb: '67.55 | 16.7', score: '48.04 | 10.44' },
-      { openRank: '39.77 | 37.64', quality: '31.05 | 0.215', wxb: '24.798 | -18.9', score: '31.87 | 6.32' },
-      { openRank: '39.55 | 7.25', quality: '68.55 | -2.937', wxb: '68.26 | -17.3', score: '58.79 | -4.33' },
-      { openRank: '34.2 | 2.08', quality: '49.07 | -0.877', wxb: '47.07 | 9.9', score: '43.45 | 3.70' },
-      { openRank: '30.39 | 10.97', quality: '29.8 | 5.633', wxb: '27.045 | 4.3', score: '29.08 | 6.97' },
-      { openRank: '30.37 | 8.57', quality: '37.1 | 4.295', wxb: '35.097 | 6.8', score: '34.19 | 6.55' }
-    ]
+  talent: {
+    xAxis: ['北京', '深圳', '上海', '杭州', '武汉', '南京'],
+    data: [45000, 38000, 36000, 28000, 22000, 15000]
   },
-  // 武汉开源开发者排行榜（新的15位开发者总分数据）
-  developer: {
-    yAxis: [
-      '白纯骢', '陆红旭', '蔡冬亮', '张继德', '蒋周奇',
-      '张天雄', '阮文俊', '李奇', '李成刚', '陈鹏轩',
-      '陈天宇', '彭友顺', '杨帆', '江彬', '韩凡宇'
-    ],
-    data: [92, 88, 85, 83, 81, 79, 77, 75, 74, 73, 72, 70, 68, 65, 63]
+  communityRank: {
+    xAxis: ['Deepin', 'OpenHarmony', 'MindSpore', 'IoTDB', 'GoFrame'],
+    data: [95, 92, 88, 76, 72]
   },
-  // 武汉市编程语言占比趋势（2020-2024）
-  languageTech: {
-    xAxis: ['2020', '2021', '2022', '2023', '2024'],
-    series: [
-      { name: 'JavaScript', data: [15.50, 17.00, 18.50, 19.80, 20.50] },
-      { name: 'Python', data: [18.00, 18.50, 17.80, 16.50, 15.20] },
-      { name: 'Java', data: [10.00, 11.50, 12.80, 13.50, 14.00] },
-      { name: 'TypeScript', data: [16.50, 14.80, 12.50, 10.20, 8.50] },
-      { name: 'C#', data: [6.50, 6.80, 7.20, 7.50, 7.80] },
-      { name: 'PHP', data: [4.20, 5.00, 5.80, 6.50, 7.00] },
-      { name: 'C++', data: [5.50, 5.80, 6.00, 6.30, 6.50] },
-      { name: 'Go', data: [6.00, 5.60, 5.30, 4.80, 4.20] },
-      { name: 'Rust', data: [5.00, 4.50, 3.80, 3.20, 2.80] },
-      { name: 'Kotlin', data: [3.50, 3.20, 3.00, 2.80, 2.50] }
-    ]
+  club: {
+    xAxis: ['北京', '武汉', '上海', '西安', '南京'],
+    data: [28, 24, 20, 18, 15]
+  },
+  policy: {
+    xAxis: ['北京', '上海', '广东', '江苏', '湖北', '浙江'],
+    data: [12, 10, 9, 8, 7, 6]
+  },
+  campus: {
+    xAxis: ['武汉', '北京', '成都', '深圳', '西安'],
+    data: [35, 32, 25, 20, 18]
+  },
+  mirrors: {
+    xAxis: ['清华TUNA', '中科大', '阿里', '华为', '华科HUST', '网易', '腾讯'],
+    data: [520, 480, 450, 420, 380, 300, 280]
   }
 });
 
-// 空数据标识
-const isEmpty = ref({
-  university: false,
-  community: false,
-  ossCompass: false,
-  developer: false,
-  languageTech: false
-});
+// 数据定义
+const developerNames = ['白纯骢', '陆红旭', '蔡冬亮', '张继德', '蒋周奇', '张天雄', '阮文俊', '李奇', '陈鹏轩', '杨帆'];
 
-// 图表实例存储（用于resize时销毁重绘）
-const chartInstances = ref<{ [key: string]: echarts.ECharts | null }>({
-  universityChart: null,
-  communityChart: null,
-  ossCompassChart: null,
-  developerChart: null,
-  languageTechChart: null
-});
+const developerScrollRef = ref<HTMLElement | null>(null);
+let developerTimer: NodeJS.Timeout | null = null;
 
-// ===================== 新增：列表自动滚动逻辑 =====================
-// 1. 定义滚动容器的ref
-const scrollContainer1 = ref<HTMLDivElement | null>(null); // 第一个列表容器
-const scrollContainer2 = ref<HTMLDivElement | null>(null); // 第二个列表容器
-
-// 2. 存储定时器（键：1/2，值：定时器ID）
-const scrollTimers: { [key: number]: NodeJS.Timeout | null } = {
-  1: null,
-  2: null
+// 自动生成头像背景色
+const getAvatarBg = (index: number) => {
+  const colors = ['#6366f1', '#8b5cf6', '#ec4899', '#f43f5e', '#f59e0b', '#10b981', '#06b6d4', '#3b82f6'];
+  return colors[index % colors.length];
 };
 
-// 3. 滚动配置
-const scrollStep = 1; // 每次滚动的步长（像素，越小越流畅）
-const scrollInterval = 20; // 滚动间隔（毫秒，越小越流畅）
-
-// 4. 通用自动滚动函数
-const autoScroll = (containerKey: number) => {
-  // 获取对应容器
-  const container = containerKey === 1 ? scrollContainer1.value : scrollContainer2.value;
+// 滚动逻辑
+const startDeveloperScroll = () => {
+  const container = developerScrollRef.value;
   if (!container) return;
+  const list = container.querySelector('.developer-list') as HTMLElement;
+  if (!list || list.scrollHeight <= container.clientHeight) return;
 
-  // 获取列表内容元素（project-list）
-  const projectList = container.querySelector('.project-list') as HTMLDivElement;
-  if (!projectList) return;
-
-  // 若内容高度 ≤ 容器高度，不执行滚动
-  if (projectList.scrollHeight <= container.clientHeight) {
-    // 清除现有定时器
-    if (scrollTimers[containerKey]) {
-      clearInterval(scrollTimers[containerKey]!);
-      scrollTimers[containerKey] = null;
+  if (developerTimer) clearInterval(developerTimer);
+  developerTimer = setInterval(() => {
+    container.scrollTop += 1;
+    if (container.scrollTop >= (list.scrollHeight - container.clientHeight)) {
+      container.scrollTop = 0;
     }
+  }, 40);
+};
+
+const pauseDeveloperScroll = () => developerTimer && clearInterval(developerTimer);
+const resumeDeveloperScroll = () => startDeveloperScroll();
+
+const isEmpty = ref({
+  cityProject: false, talent: false, developer: false, communityRank: false,
+  club: false, policy: false, campus: false, mirrors: false
+});
+
+const chartInstances = ref<{[key: string]: echarts.ECharts | null}>({});
+const scrollContainer1 = ref<HTMLDivElement | null>(null);
+const scrollContainer2 = ref<HTMLDivElement | null>(null);
+const scrollTimers: { [key: number]: NodeJS.Timeout | null } = { 1: null, 2: null };
+
+const autoScroll = (key: number) => {
+  const container = key === 1 ? scrollContainer1.value : scrollContainer2.value;
+  if (!container) return;
+  const list = container.querySelector('.project-list') as HTMLDivElement;
+  if (!list || list.scrollHeight <= container.clientHeight) {
+    if (scrollTimers[key]) clearInterval(scrollTimers[key]!);
     return;
   }
-
-  // 清除现有定时器（避免重复）
-  if (scrollTimers[containerKey]) {
-    clearInterval(scrollTimers[containerKey]!);
-  }
-
-  // 启动定时器滚动
-  scrollTimers[containerKey] = setInterval(() => {
-    // 向下滚动步长
-    container.scrollTop += scrollStep;
-
-    // 滚动到底部时，重置为0（循环滚动）
-    // 加1是为了兼容像素精度问题
-    if (projectList.scrollHeight - container.scrollTop <= container.clientHeight + 1) {
-      container.scrollTop = 0; // 直接重置（也可以用平滑滚动：container.scrollTo({ top: 0, behavior: 'smooth' })）
+  if (scrollTimers[key]) clearInterval(scrollTimers[key]!);
+  scrollTimers[key] = setInterval(() => {
+    container.scrollTop += 1;
+    if (list.scrollHeight - container.scrollTop <= container.clientHeight + 1) {
+      container.scrollTop = 0;
     }
-  }, scrollInterval);
+  }, 40);
 };
 
-// 5. 暂停滚动
-const pauseScroll = (containerKey: number) => {
-  if (scrollTimers[containerKey]) {
-    clearInterval(scrollTimers[containerKey]!);
-    scrollTimers[containerKey] = null;
-  }
-};
+const pauseScroll = (key: number) => { if (scrollTimers[key]) clearInterval(scrollTimers[key]!); };
+const resumeScroll = (key: number) => autoScroll(key);
 
-// 6. 恢复滚动
-const resumeScroll = (containerKey: number) => {
-  autoScroll(containerKey);
-};
+// ================= 图表初始化=================
 
-// 7. 组件卸载时清除所有定时器
-onUnmounted(() => {
-  Object.keys(scrollTimers).forEach(key => {
-    const k = Number(key);
-    if (scrollTimers[k]) {
-      clearInterval(scrollTimers[k]!);
-      scrollTimers[k] = null;
-    }
-  });
-});
-// ===================== 新增结束 =====================
-
-// 初始化高校参与分布饼图
-const initUniversityChart = () => {
-  const el = document.getElementById('universityChart');
-  if (!el) return;
-
-  if (chartInstances.value.universityChart) {
-    chartInstances.value.universityChart.dispose();
-  }
+const commonGrid = { left: '3%', right: '4%', bottom: '15px', top: '15%', containLabel: true };
+const colorPalette = ['#3b82f6', '#06b6d4', '#8b5cf6', '#ec4899', '#f59e0b']; // 蓝, 青, 紫, 粉, 橙
 
+const initCityProjectChart = () => {
+  const el = document.getElementById('cityProjectChart');
+  if(!el) return;
   const myChart = echarts.init(el);
-  chartInstances.value.universityChart = myChart;
-
+  chartInstances.value.cityProject = myChart;
   myChart.setOption({
-    tooltip: {
-      trigger: 'item',
-      formatter: (params: any) => `${params.name}: ${params.value}%`
-    },
-    legend: {
-      bottom: '0',
-      textStyle: { fontSize: 10 }, // 缩小图例字体，适配更多高校
-      itemWidth: 10,
-      itemHeight: 10,
-      type: 'scroll' // 开启图例滚动，避免溢出
-    },
-    series: [
-      {
-        name: '参与度',
-        type: 'pie',
-        radius: ['40%', '70%'],
-        data: chartData.value.university,
-        label: {
-          show: true,
-          formatter: '{b}: {c}%',
-          fontSize: 9 // 缩小标签字体，适配更多高校
-        },
-        color: [
-          '#3b82f6', '#8b5cf6', '#ec4899', '#10b981', '#f59e0b',
-          '#6366f1', '#14b8a6', '#f43f5e', '#94a3b8' // 新增颜色，匹配9个分类
-        ]
-      }
-    ],
-    grid: { left: 0, bottom: 0, top: 0, right: 0 }
+    tooltip: { trigger: 'axis', valueFormatter: (value: any) => value + ' 个' },
+    grid: commonGrid,
+    xAxis: { type: 'category', data: chartData.value.cityProject.xAxis, axisLabel: { color: '#666', fontSize: 11 } },
+    yAxis: { type: 'value',name: '单位：个', splitLine: { lineStyle: { type: 'dashed', color: '#eee' } } },
+    series: [{
+      type: 'bar', data: chartData.value.cityProject.data, barWidth: '50%',
+      itemStyle: { borderRadius: [4, 4, 0, 0], color: new echarts.graphic.LinearGradient(0,0,0,1,[{offset:0,color:'#4F46E5'},{offset:1,color:'#818CF8'}]) }
+    }]
   });
 };
 
-// 初始化社区区域分布柱状图
-const initCommunityChart = () => {
-  const el = document.getElementById('communityChart');
-  if (!el) return;
-
-  if (chartInstances.value.communityChart) {
-    chartInstances.value.communityChart.dispose();
-  }
-
+const initTalentChart = () => {
+  const el = document.getElementById('talentChart');
+  if(!el) return;
   const myChart = echarts.init(el);
-  chartInstances.value.communityChart = myChart;
-
+  chartInstances.value.talent = myChart;
   myChart.setOption({
-    tooltip: {
-      trigger: 'axis',
-      axisPointer: { type: 'shadow' },
-      formatter: (params: any) => `${params[0].name}: ${params[0].value}个`
-    },
-    grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
-    xAxis: {
-      type: 'category',
-      data: chartData.value.community.xAxis,
-      axisLabel: { fontSize: 12 }
-    },
-    yAxis: {
-      type: 'value',
-      name: '社区数量',
-      nameTextStyle: { fontSize: 12 },
-      axisLabel: { fontSize: 12 },
-      min: 0 // 强制y轴从0开始，更直观
-    },
-    series: [
-      {
-        name: '开源社区数量',
-        type: 'bar',
-        data: chartData.value.community.data,
-        itemStyle: {
-          color: (params: any) => {
-            const colorList = ['#3b82f6', '#8b5cf6', '#ec4899', '#10b981', '#f59e0b', '#6366f1'];
-            return colorList[params.dataIndex];
-          }
-        }
-      }
-    ]
+    tooltip: { trigger: 'axis', valueFormatter: (value: any) => value + ' 人' },
+    grid: commonGrid,
+    xAxis: { type: 'category', data: chartData.value.talent.xAxis, axisLabel: { color: '#666' } },
+    yAxis: { type: 'value',name: '单位：人', splitLine: { lineStyle: { type: 'dashed', color: '#eee' } } },
+    series: [{
+      type: 'bar', data: chartData.value.talent.data, barWidth: '50%',
+      itemStyle: { borderRadius: [4, 4, 0, 0], color: '#F97316' } // 橙色
+    }]
   });
 };
 
-// 初始化OSS Compass开源项目排行（横向柱状图）
-const initOssCompassChart = () => {
-  const el = document.getElementById('ossCompassChart');
-  if (!el) return;
-
-  if (chartInstances.value.ossCompassChart) {
-    chartInstances.value.ossCompassChart.dispose();
-  }
-
-  const myChart = echarts.init(el);
-  chartInstances.value.ossCompassChart = myChart;
-
-  myChart.setOption({
-    tooltip: {
-      trigger: 'axis',
-      axisPointer: { type: 'shadow' },
-      formatter: (params: any) => {
-        const index = params[0].dataIndex;
-        const data = chartData.value.ossCompass.fullData[index];
-        return `
-          <div>${params[0].name}</div>
-          <div>OpenRank: ${data.openRank}</div>
-          <div>代码内生质量: ${data.quality}</div>
-          <div>WXB分数: ${data.wxb}</div>
-          <div>综合分数: ${data.score}</div>
-        `;
-      }
-    },
-    grid: { left: '15%', right: '4%', bottom: '3%', top: '3%', containLabel: true },
-    xAxis: {
-      type: 'value',
-      name: 'OpenRank总分',
-      nameTextStyle: { fontSize: 12 },
-      axisLabel: { fontSize: 12 }
-    },
-    yAxis: {
-      type: 'category',
-      data: chartData.value.ossCompass.yAxis,
-      axisLabel: { fontSize: 10, overflow: 'truncate', width: 120 }
-    },
-    series: [
-      {
-        name: 'OpenRank总分',
-        type: 'bar',
-        data: chartData.value.ossCompass.data,
-        itemStyle: { color: '#2951E0' },
-        label: {
-          show: true,
-          position: 'right',
-          formatter: '{c}',
-          fontSize: 10
-        },
-        areaStyle: {
-          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
-            { offset: 0, color: 'rgba(41, 81, 224, 0.24)' },
-            { offset: 1, color: 'rgba(41, 81, 224, 0.04)' }
-          ])
-        }
-      }
-    ]
-  });
-};
-
-// 初始化武汉开源开发者排行榜（横向柱状图）
 const initDeveloperChart = () => {
   const el = document.getElementById('developerChart');
-  if (!el) return;
-
-  if (chartInstances.value.developerChart) {
-    chartInstances.value.developerChart.dispose();
-  }
-
+  if(!el) return;
   const myChart = echarts.init(el);
-  chartInstances.value.developerChart = myChart;
-
+  chartInstances.value.developer = myChart;
   myChart.setOption({
-    tooltip: {
-      trigger: 'axis',
-      axisPointer: { type: 'shadow' },
-      formatter: (params: any) => `${params[0].name}: ${params[0].value}贡献值`
-    },
-    grid: { left: '10%', right: '4%', bottom: '3%', top: '3%', containLabel: true },
-    xAxis: {
-      type: 'value',
-      name: '贡献值',
-      nameTextStyle: { fontSize: 12 },
-      axisLabel: { fontSize: 12 },
-      min: 0 // 强制y轴从0开始
-    },
-    yAxis: {
-      type: 'category',
-      data: chartData.value.developer.yAxis,
-      axisLabel: { fontSize: 11 } // 缩小字体，适配15个开发者
-    },
-    series: [
-      {
-        name: '贡献值',
-        type: 'bar',
-        data: chartData.value.developer.data,
-        itemStyle: { color: '#8b5cf6' },
-        label: {
-          show: true,
-          position: 'right',
-          formatter: '{c}',
-          fontSize: 11 // 缩小标签字体
-        },
-        areaStyle: {
-          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
-            { offset: 0, color: 'rgba(139, 92, 246, 0.24)' },
-            { offset: 1, color: 'rgba(139, 92, 246, 0.04)' }
-          ])
-        }
-      }
-    ]
+    tooltip: { trigger: 'axis', valueFormatter: (value: any) => value + ' 贡献分' },
+    grid: { left: '3%', right: '5%', bottom: '15px', top: '5%', containLabel: true },
+    xAxis: { type: 'value', show: false }, // 隐藏x轴
+    yAxis: { type: 'category', data: chartData.value.developer.yAxis.reverse(), axisLine: {show: false}, axisTick: {show: false}, axisLabel: { color: '#333', fontWeight: 500 } },
+    series: [{
+      type: 'bar', data: chartData.value.developer.data.reverse(), barWidth: 16,
+      itemStyle: { color: new echarts.graphic.LinearGradient(1,0,0,0,[{offset:0,color:'#7C3AED'},{offset:1,color:'#C4B5FD'}]), borderRadius: [0, 8, 8, 0] },
+      label: { show: false } // **修改点：隐藏具体分数**
+    }]
   });
 };
 
-// 初始化武汉市编程语言占比趋势（折线图）
-const initLanguageTechChart = () => {
-  const el = document.getElementById('languageTechChart');
-  if (!el) return;
-
-  if (chartInstances.value.languageTechChart) {
-    chartInstances.value.languageTechChart.dispose();
-  }
-
+const initCommunityRankChart = () => {
+  const el = document.getElementById('communityRankChart');
+  if(!el) return;
   const myChart = echarts.init(el);
-  chartInstances.value.languageTechChart = myChart;
-
-  // 定义系列颜色（10个颜色，匹配10种语言）
-  const colorList = [
-    '#3b82f6', '#10b981', '#f59e0b', '#ec4899', '#8b5cf6',
-    '#6366f1', '#14b8a6', '#f43f5e', '#94a3b8', '#475569'
-  ];
-  const series = chartData.value.languageTech.series.map((item, index) => ({
-    name: item.name,
-    type: 'line',
-    data: item.data,
-    symbol: 'circle',
-    symbolSize: 6,
-    lineStyle: { color: colorList[index], width: 2 },
-    itemStyle: { color: colorList[index] },
-    areaStyle: {
-      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-        { offset: 0, color: `${colorList[index]}33` },
-        { offset: 1, color: `${colorList[index]}08` }
-      ])
-    },
-    // 隐藏部分系列的图例，避免拥挤（可选，根据需求调整）
-    // legendHoverLink: index < 5 // 只显示前5个语言的图例交互
-  }));
-
   myChart.setOption({
-    tooltip: {
-      trigger: 'axis',
-      formatter: (params: any) => {
-        let res = `<div>${params[0].axisValue}</div>`;
-        params.forEach((p: any) => {
-          res += `<div>${p.seriesName}: ${p.value}%</div>`;
-        });
-        return res;
-      }
-    },
-    legend: {
-      top: 0,
-      textStyle: { fontSize: 10 },
-      type: 'scroll' // 开启图例滚动，适配10种语言
-    },
-    grid: { left: '3%', right: '4%', bottom: '3%', top: '15%', containLabel: true },
-    xAxis: {
-      type: 'category',
-      data: chartData.value.languageTech.xAxis,
-      axisLabel: { fontSize: 12 }
-    },
-    yAxis: {
-      type: 'value',
-      name: '占比（%）',
-      nameTextStyle: { fontSize: 12 },
-      axisLabel: {
-        fontSize: 12,
-        formatter: '{value}%' // 显示百分比符号
-      },
-      min: 0,
-      max: 25 // 限制y轴最大值，更直观
-    },
-    series
+    tooltip: { trigger: 'axis', valueFormatter: (val: any) => val + ' 个' },
+    grid: { left: '3%', right: '4%', bottom: '15px', top: '22%', containLabel: true },
+    xAxis: { type: 'category', data: ['北京', '上海', '深圳', '杭州', '武汉', '成都'], axisLabel: { color: '#666' } },
+    yAxis: { type: 'value', name: '单位：个', nameTextStyle: { color: '#999' } },
+    series: [{
+      type: 'bar',
+      data: [42, 38, 35, 28, 22, 18],
+      barWidth: '40%',
+      itemStyle: { borderRadius: [4, 4, 0, 0], color: '#3b82f6' }
+    }]
+  });
+};
+
+const initClubChart = () => {
+  const el = document.getElementById('clubChart');
+  if(!el) return;
+  const myChart = echarts.init(el);
+  chartInstances.value.club = myChart;
+  myChart.setOption({
+    tooltip: { trigger: 'axis', valueFormatter: (value: any) => value + ' 个' },
+    grid: commonGrid,
+    xAxis: { type: 'category', data: chartData.value.club.xAxis, axisLabel: { color: '#666' } },
+    yAxis: { type: 'value',name: '单位：个', splitLine: { lineStyle: { type: 'dashed', color: '#eee' } } },
+    series: [{
+      type: 'line', data: chartData.value.club.data,
+      smooth: true, symbolSize: 8,
+      lineStyle: { width: 3, color: '#F59E0B' },
+      itemStyle: { color: '#F59E0B', borderColor: '#fff', borderWidth: 2 },
+      areaStyle: { opacity: 0.15, color: '#F59E0B' }
+    }]
+  });
+};
+
+const initPolicyChart = () => {
+  const el = document.getElementById('policyChart');
+  if(!el) return;
+  const myChart = echarts.init(el);
+  chartInstances.value.policy = myChart;
+  myChart.setOption({
+    tooltip: { trigger: 'axis', valueFormatter: (value: any) => value + ' 条' },
+    grid: commonGrid,
+    xAxis: { type: 'category', data: chartData.value.policy.xAxis, axisLabel: { color: '#666' } },
+    yAxis: { type: 'value', name: '单位：条',splitLine: { lineStyle: { type: 'dashed', color: '#eee' } } },
+    series: [{
+      type: 'bar', data: chartData.value.policy.data, barWidth: '45%',
+      itemStyle: { borderRadius: [4, 4, 0, 0], color: '#2563EB' } // 蓝色
+    }]
+  });
+};
+
+const initCampusChart = () => {
+  const el = document.getElementById('campusChart');
+  if(!el) return;
+  const myChart = echarts.init(el);
+  chartInstances.value.campus = myChart;
+  // **修改点：去掉三角形pictorialBar，改为美观的圆角柱状图**
+  myChart.setOption({
+    tooltip: { trigger: 'axis', valueFormatter: (value: any) => value + ' 场' },
+    grid: commonGrid,
+    xAxis: { type: 'category', data: chartData.value.campus.xAxis, axisLabel: { color: '#666' } },
+    yAxis: { type: 'value',name: '单位：场次', splitLine: { lineStyle: { type: 'dashed', color: '#eee' } } },
+    series: [{
+      type: 'bar',
+      data: chartData.value.campus.data,
+      barWidth: '35%',
+      itemStyle: {
+        borderRadius: [8, 8, 0, 0], // 圆角
+        // 活力洋红色渐变
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          { offset: 0, color: '#EC4899' },
+          { offset: 1, color: '#F472B6' }
+        ])
+      }
+    }]
+  });
+};
+
+const initMirrorChart = () => {
+  const el = document.getElementById('mirrorChart');
+  if(!el) return;
+  const myChart = echarts.init(el);
+  chartInstances.value.mirrors = myChart;
+  myChart.setOption({
+    tooltip: { trigger: 'axis', valueFormatter: (value: any) => value + ' 个节点' },
+    grid: { left: '3%', right: '3%', bottom: '15px', top: '15%', containLabel: true },
+    xAxis: { type: 'category', data: chartData.value.mirrors.xAxis, axisLabel: { color: '#666' } },
+    yAxis: { type: 'value',name: '单位：个', splitLine: { lineStyle: { type: 'dashed', color: '#eee' } } },
+    series: [{
+      type: 'bar', data: chartData.value.mirrors.data,
+      barWidth: 30,
+      itemStyle: {
+        borderRadius: [4, 4, 0, 0],
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          { offset: 0, color: '#0EA5E9' },
+          { offset: 1, color: '#38BDF8' }
+        ])
+      }
+    }]
   });
 };
 
-// 统一初始化图表
 const initCharts = () => {
-  // 空数据判断
-  isEmpty.value = {
-    university: chartData.value.university.length === 0,
-    community: chartData.value.community.data.every(item => item === 0),
-    ossCompass: chartData.value.ossCompass.data.every(item => item === 0),
-    developer: chartData.value.developer.data.every(item => item === 0),
-    languageTech: chartData.value.languageTech.series.every(s => s.data.every(d => d === 0))
-  };
-
-  // 初始化各图表
-  if (!isEmpty.value.university) nextTick(() => initUniversityChart());
-  if (!isEmpty.value.community) nextTick(() => initCommunityChart());
-  if (!isEmpty.value.ossCompass) nextTick(() => initOssCompassChart());
-  if (!isEmpty.value.developer) nextTick(() => initDeveloperChart());
-  if (!isEmpty.value.languageTech) nextTick(() => initLanguageTechChart());
+  nextTick(() => {
+    initCityProjectChart(); initTalentChart(); initDeveloperChart();
+    initCommunityRankChart(); initClubChart(); initPolicyChart();
+    initCampusChart(); initMirrorChart();
+  });
 };
 
-// 页面resize时重绘图表
-watch(widthType, () => {
-  initCharts();
-  // 重新启动滚动（防止resize后滚动失效）
-  autoScroll(1);
-  autoScroll(2);
-});
+const init = () => {
+  nextTick(() => {
+    initCityProjectChart(); initTalentChart(); initDeveloperChart();
+    initCommunityRankChart(); initClubChart(); initPolicyChart();
+    initCampusChart(); initMirrorChart();
 
-// 挂载时初始化
-onMounted(() => {
-  setTimeout(() => {
-    initCharts();
-    // 启动列表自动滚动
-    autoScroll(1);
-    autoScroll(2);
-  }, 100);
-});
+    autoScroll(1); autoScroll(2);startCommunityScroll();startDeveloperScroll();
+  });
+}
+const unInit = () => {
+  Object.values(scrollTimers).forEach(t => t && clearInterval(t));
+  pauseDeveloperScroll();
+  pauseCommunityScroll();
+}
+
+watch(widthType, () => { init() });
+onMounted(() => { init() });
+onUnmounted(() => { unInit() });
 </script>
 
 <style lang="scss" scoped>
 .index-module__NV_5cW__container {
-  //background: linear-gradient(to bottom right, #faf5ff, #60a5fa);
   min-height: 100vh;
+  //background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%); /* 深蓝到深紫背景 */
   padding: 2rem 1rem;
-  position: relative;
-  overflow-x: hidden;
+  font-family: 'Inter', system-ui, -apple-system, sans-serif;
+  color: #fff;
 }
 
+/* 头部样式 */
 .index-module__NV_5cW__header {
   width: 1400px;
   text-align: center;
@@ -757,648 +741,434 @@ onMounted(() => {
   margin: 0 auto 3rem;
 }
 
-.index-module__NV_5cW__floatingElements {
-  pointer-events: none;
-  opacity: 0.3;
-  position: absolute;
-  inset: 0;
-  overflow: hidden;
-}
-
-.index-module__NV_5cW__floatingElement {
-  background: linear-gradient(135deg, #3b82f60d, #9333ea0d);
-  border-radius: 50%;
-  width: 120px;
-  height: 120px;
-  animation: 30s linear infinite index-module__NV_5cW__float;
-  position: absolute;
-}
-
-.index-module__NV_5cW__floatingElement:first-child {
-  animation-delay: 0s;
-  top: 10%;
-  left: 10%;
-}
-
-.index-module__NV_5cW__floatingElement:nth-child(2) {
-  animation-delay: -7s;
-  top: 60%;
-  right: 10%;
-}
-
-.index-module__NV_5cW__floatingElement:nth-child(3) {
-  animation-delay: -14s;
-  bottom: 20%;
-  left: 50%;
-}
-
-@keyframes index-module__NV_5cW__float {
-  0% {
-    transform: translateY(0) rotate(0);
-  }
-
-  33% {
-    transform: translateY(-20px) rotate(120deg);
-  }
-
-  66% {
-    transform: translateY(10px) rotate(240deg);
-  }
-
-  to {
-    transform: translateY(0) rotate(360deg);
-  }
-}
-
-.index-module__NV_5cW__titleSection {
-  color: #333;
-  z-index: 2;
-  flex-direction: column;
-  align-items: center;
-  gap: 1rem;
-  display: flex;
+.header-content {
   position: relative;
+  z-index: 10;
+  margin-bottom: 24px;
 }
 
-.index-module__NV_5cW__titleContainer {
-  flex-wrap: wrap;
-  justify-content: center;
-  align-items: center;
-  gap: 1rem;
-  display: flex;
-  width: 100%; // 宽度100%
+.header-title-row {
+  gap: 1.5rem;
 }
 
-.index-module__NV_5cW__title {
-  background: #333;
-  -webkit-text-fill-color: transparent;
-  letter-spacing: -0.02em;
-  white-space: nowrap;
-  -webkit-background-clip: text;
-  background-clip: text;
-  margin: 0;
-  font-size: 2.8rem;
-  font-weight: 700;
-}
-
-.index-module__NV_5cW__titleBadge {
+.main-title {
+  font-size: 3rem;
+  font-weight: 800;
   color: #fff;
-  letter-spacing: 0.05em;
-  white-space: nowrap;
-  background: #60a5fa;
-  border-radius: 1.5rem;
-  padding: 0.4rem 1rem;
-  font-size: 1rem;
-  font-weight: 600;
-  box-shadow: 0 2px 10px #3b82f64d;
+  letter-spacing: 2px;
+  background: linear-gradient(to right, #fff, #93c5fd);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  text-shadow: 0 0 30px rgba(59, 130, 246, 0.5);
 }
 
-.index-module__NV_5cW__subtitle {
-  color: #666;
-  text-align: center;
-  align-items: center;
-  gap: 0.5rem;
-  max-width: 800px; // 加宽副标题最大宽度
+.sub-title {
+  color: #94a3b8;
   font-size: 1.1rem;
-  font-weight: 400;
-  display: flex;
-  width: 100%; // 宽度100%
-  justify-content: center; // 居中
+  font-weight: 300;
+  letter-spacing: 1px;
 }
 
-// 加宽数据统计栏：移除max-width限制，调整为100%宽度，适配大屏
-.index-module__NV_5cW__statsBar {
-  -webkit-backdrop-filter: blur(10px);
-  backdrop-filter: blur(10px);
-  background: #ffffff1a;
-  border: 1px solid #fff3;
-  border-radius: 1.5rem;
-  align-items: center;
-  gap: 2rem; // 增加间距，更舒展
-  width: 100%; // 宽度100%
-  max-width: 100%; // 移除最大宽度限制
-  margin-top: 0.75rem;
-  padding: 1rem 2rem; // 增加内边距
-  display: flex;
-  justify-content: center; // 居中分布
-  flex-wrap: wrap; // 移动端自动换行
+.title-decoration {
+  width: 60px; height: 2px;
+  background: linear-gradient(90deg, transparent, #60a5fa);
+}
+.title-decoration.right {
+  background: linear-gradient(90deg, #60a5fa, transparent);
 }
 
-.index-module__NV_5cW__stat {
-  flex-direction: column;
-  align-items: center;
-  gap: 0.25rem;
-  display: flex;
-  flex: 1; // 平均分配宽度
-  min-width: 80px; // 最小宽度，防止挤压
-}
-
-.index-module__NV_5cW__statNumber {
-  color: #60a5fa;
-  font-size: 1.5rem;
-  font-weight: 700;
-}
-
-.index-module__NV_5cW__statLabel {
-  color: #333;
-  font-size: 0.875rem;
-  font-weight: 500;
-}
-
-.index-module__NV_5cW__statDivider {
-  background: #fff3;
-  width: 1px;
-  height: 2rem;
-}
-
-.index-module__NV_5cW__content {
-  max-width: 1400px; /* 加宽容器，适配更多图表 */
-  margin: 0 auto;
-  padding: 0 1rem;
-}
-
-/* 图表区域样式（适配示例的num-empty） */
-.index-module__NV_5cW__chartsSection {
-  margin-bottom: 3rem;
+/* 标题栏图表 Icon */
+.index-module__NV_5cW__sectionHeader {
+  display: flex; justify-content: flex-start; margin-bottom: 1.5rem;
+  max-width: 1400px; margin: 0 auto 1.5rem auto; padding: 0 0.5rem;
+}
+.index-module__NV_5cW__sectionTitle {
+  display: flex; align-items: center; gap: 0.8rem; font-size: 1.4rem; font-weight: 600; color: #fff;
 }
 
+/* 网格系统 */
 .index-module__NV_5cW__chartsGrid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); /* 调整列宽，适配列表 */
+  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
   gap: 1.5rem;
-  padding: 0;
+  max-width: 1400px;
+  margin: 0 auto;
 }
 
+/* 卡片玻璃拟态美化 */
 .index-module__NV_5cW__chartCard {
-  -webkit-backdrop-filter: blur(10px);
-  backdrop-filter: blur(10px);
-  background: #ffffffe6;
-  border: 1px solid #ffffff4d;
-  border-radius: 1rem;
-  padding: 1.5rem;
-  box-shadow: 0 4px 16px #00000014;
-  transition: all 0.3s;
-}
-
-/* 列表卡片特殊样式 */
-.index-module__NV_5cW__chartCard.list-card {
-  padding: 1.5rem;
+  background: rgba(255, 255, 255, 0.95); /* 高不透明度白底，保证图表清晰 */
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 16px;
+  padding: 1.25rem;
+  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.3);
+  display: flex;
+  flex-direction: column;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  position: relative;
+  overflow: hidden;
 }
 
 .index-module__NV_5cW__chartCard:hover {
-  border-color: #3b82f64d;
-  transform: translateY(-4px);
-  box-shadow: 0 8px 24px #0000001f;
+  transform: translateY(-5px);
+  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.4);
 }
 
-.chartCard__wide {
-  grid-column: 1 / -1; /* 跨列显示 */
-}
+.chartCard__wide { grid-column: 1 / -1; }
 
 .chartCard__title {
-  color: #333;
-  font-size: 1.1rem;
-  font-weight: 600;
-  margin: 0 0 1rem 0;
+  font-size: 1.05rem;
+  font-weight: 700;
+  color: #1e293b;
+  margin-bottom: 1rem;
   text-align: center;
+  position: relative;
+  z-index: 1;
 }
 
 .chartCard__container {
-  width: 100%;
-  height: 300px; /* 图表高度 */
-  position: relative;
+  width: 100%; height: 300px; position: relative;
 }
 
-/* 列表容器样式：隐藏原生滚动条（可选，视觉更美观） */
-.chartCard__container.list-container {
-  height: auto;
-  max-height: 300px; /* 限制列表高度，超出滚动 */
-  overflow-y: auto;
-  padding: 0 0.5rem;
-  /* 隐藏滚动条 */
-  scrollbar-width: none; /* Firefox */
-  -ms-overflow-style: none; /* IE/Edge */
-}
-
-/* 隐藏webkit内核浏览器的滚动条 */
-.chartCard__container.list-container::-webkit-scrollbar {
-  display: none;
-}
-
-/* 项目列表样式 */
-.project-list {
-  display: flex;
-  flex-direction: column;
-  gap: 0.8rem;
+/* 列表样式优化 */
+.list-container {
+  height: 300px; overflow-y: hidden;
+  padding: 0 4px;
 }
+.project-list { display: flex; flex-direction: column; gap: 0.6rem; padding-bottom: 1rem; }
 
 .project-item {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  padding: 0.8rem;
-  background: #f8f9fa;
-  border-radius: 0.5rem;
-  border-left: 3px solid #2951E0;
+  display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem;
+  background: #f8fafc; border-radius: 8px; border: 1px solid #e2e8f0;
   transition: all 0.2s;
 }
-
-/* 鼠标悬停项目项时的样式（可选） */
 .project-item:hover {
-  background: #f0f4ff;
-  transform: translateX(2px);
+  background: #fff; border-color: #3b82f6; box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
 }
 
+.project-rank-wrapper {
+  width: 24px; display: flex; justify-content: center;
+}
 .project-rank {
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-  background: #2951E0;
-  color: #fff;
+  width: 20px; height: 20px; border-radius: 6px;
+  background: #cbd5e1; color: #fff;
+  display: flex; align-items: center; justify-content: center;
+  font-size: 11px; font-weight: 700;
+}
+/* 前三名高亮 */
+.project-item:nth-child(1) .project-rank { background: linear-gradient(135deg, #fbbf24, #d97706); }
+.project-item:nth-child(2) .project-rank { background: linear-gradient(135deg, #94a3b8, #64748b); }
+.project-item:nth-child(3) .project-rank { background: linear-gradient(135deg, #dba789, #b07d62); }
+.project-rank.rank-new { background: linear-gradient(135deg, #f43f5e, #e11d48) !important; }
+
+.project-info { flex: 1; display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
+.project-name { font-size: 13px; font-weight: 700; color: #333; }
+.project-desc { font-size: 11px; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.project-stars { font-size: 11px; font-weight: 600; color: #f59e0b; background: #fffbeb; padding: 2px 6px; border-radius: 4px; }
+.project-org-tag { font-size: 11px; color: #3b82f6; background: #eff6ff; padding: 2px 6px; border-radius: 4px; white-space: nowrap; }
+
+/* Tabs 美化 */
+.tabs-header {
+  display: flex; justify-content: center; gap: 4px;
+  background: #f1f5f9; padding: 4px; border-radius: 8px;
+  margin: 0 auto 0.8rem auto; width: fit-content;
+}
+.tab-pill {
+  font-size: 12px; padding: 4px 12px; cursor: pointer; border-radius: 6px;
+  color: #64748b; font-weight: 500; transition: all 0.2s;
+}
+.tab-pill.active {
+  background: #fff; color: #3b82f6; font-weight: 600;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+}
+
+/* 来源 Footer 样式 (修改版：数据来源：Icon + Text) */
+.source-footer {
+  margin-top: auto;
+  padding-top: 0.75rem;
+  border-top: 1px solid #f1f5f9;
   display: flex;
   align-items: center;
-  justify-content: center;
-  font-size: 12px;
-  font-weight: 600;
-  flex-shrink: 0;
+  justify-content: flex-end; /* 右对齐 */
+  font-size: 11px;
 }
 
-.project-info {
-  flex: 1;
+.source-label {
+  color: #94a3b8; /* 浅灰色标签 */
+  margin-right: 4px;
+}
+
+.source-content {
   display: flex;
-  flex-direction: column;
-  gap: 0.2rem;
+  align-items: center;
+  gap: 6px;
 }
 
-.project-name {
-  font-size: 14px;
+.source-icon { width: 14px; height: 14px; opacity: 0.8; }
+.source-logo-circle { width: 14px; height: 14px; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,0.1); }
+.source-logo-text { font-size: 9px; font-weight: bold; background: #333; color: #fff; padding: 0 3px; border-radius: 2px; }
+.source-name { color: #475569; font-weight: 500; } /* 深一点的灰色文字 */
+
+
+/* 行动区域 */
+.index-module__NV_5cW__actionSection {
+  max-width: 1400px; margin: 2rem auto 0;
+  text-align: center; border-radius: 24px; padding: 3rem;
+  background: rgba(30, 41, 59, 0.6); /* 深色背景 */
+  border: 1px solid rgba(255,255,255,0.1);
+  backdrop-filter: blur(12px);
+  position: relative; overflow: hidden;
+}
+.index-module__NV_5cW__actionBackground {
+  position: absolute; inset: 0;
+  background: radial-gradient(circle at top right, rgba(59, 130, 246, 0.15), transparent 40%);
+  z-index: 1;
+}
+.index-module__NV_5cW__actionContent { position: relative; z-index: 2; }
+.index-module__NV_5cW__actionIcon {
+  color: #60a5fa; background: rgba(59, 130, 246, 0.1);
+  border-radius: 50%; width: 3.5rem; height: 3.5rem; margin: 0 auto 1.5rem;
+  display: flex; justify-content: center; align-items: center;
+}
+.index-module__NV_5cW__actionTitle { font-size: 1.8rem; font-weight: 700; color: #fff; margin-bottom: 0.5rem; }
+.index-module__NV_5cW__actionDescription { color: #cbd5e1; margin-bottom: 1.5rem; }
+.action-btn {
+  background: linear-gradient(135deg, #3b82f6, #6366f1);
+  border: none; color: white; padding: 0.8rem 2.5rem; border-radius: 50px;
+  font-weight: 600; cursor: pointer; font-size: 1rem;
+  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
+  transition: all 0.3s;
+}
+.action-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(59, 130, 246, 0.5); }
+
+/* 工具类 */
+.chart { width: 100%; height: 100%; }
+.num-empty { height: 2px; width: 50%; background: #ddd; margin: 50% auto; }
+
+.language-tab {
+  display: flex;
+  gap: 0.5rem;
+  background: linear-gradient(135deg, #f0f4ff, #faf5ff);
+  border-radius: 1rem;
+  padding: 0.3rem;
+  cursor: pointer;
+  user-select: none;
+  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
+  border: 1px solid rgba(59, 130, 246, 0.1);
+  transition: all 0.3s;
+}
+
+.language-tab:hover {
+  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
+  border-color: rgba(59, 130, 246, 0.2);
+}
+
+.language-tab span {
+  padding: 0.45rem 1.2rem;
+  border-radius: 0.75rem;
+  font-size: 0.875rem;
   font-weight: 600;
-  color: #333;
-}
-
-.project-desc {
-  font-size: 12px;
   color: #666;
-  font-style: italic;
-}
-
-.project-org {
-  font-size: 12px;
-  color: #888;
-  flex-shrink: 0;
-  white-space: nowrap;
-  max-width: 150px;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
   overflow: hidden;
-  text-overflow: ellipsis;
 }
 
-/* 与示例一致的空数据样式 */
-.num-empty {
-  height: 10px;
-  border-top: 2px solid #2951E0;
-  width: 100%;
-  background: linear-gradient(180deg, rgba(41, 81, 224, 0.12) 0%, rgba(41, 81, 224, 0.04) 100%);
+.language-tab span::before {
+  content: '';
   position: absolute;
   top: 50%;
-  left: 0;
-  transform: translateY(-50%);
+  left: 50%;
+  width: 0;
+  height: 0;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.3);
+  transform: translate(-50%, -50%);
+  transition: width 0.6s, height 0.6s;
 }
 
-.chart {
+.language-tab span:hover::before {
   width: 100%;
   height: 100%;
 }
 
-.index-module__NV_5cW__sectionHeader {
-  flex-wrap: wrap;
-  justify-content: center;
-  align-items: center;
-  gap: 1rem;
-  margin-bottom: 2rem;
-  display: flex;
-  position: relative;
-}
-
-.index-module__NV_5cW__sectionTitle {
-  //color: #333;
-  text-align: center;
-  justify-content: center;
-  align-items: center;
-  gap: 0.75rem;
-  width: 100%;
-  margin: 0;
-  font-size: 1.5rem;
-  font-weight: 600;
-  display: flex;
-}
-
-.index-module__NV_5cW__actionSection {
-  text-align: center;
-  -webkit-backdrop-filter: blur(10px);
-  backdrop-filter: blur(10px);
-  background: #ffffffe6;
-  border: 1px solid #ffffff4d;
-  border-radius: 1.5rem;
-  margin: 0;
-  padding: 2.5rem 2rem;
-  position: relative;
-  overflow: hidden;
-  box-shadow: 0 8px 24px #00000014;
-}
-
-.index-module__NV_5cW__actionBackground {
-  z-index: 1;
-  background: linear-gradient(135deg, #3b82f60d 0%, #9333ea0d 100%);
-  position: absolute;
-  inset: 0;
-}
-
-.index-module__NV_5cW__actionContent {
-  z-index: 2;
-  max-width: 600px;
-  margin: 0 auto;
-  position: relative;
-}
-
-.index-module__NV_5cW__actionIcon {
-  color: #fff;
+.language-tab span.active {
   background: linear-gradient(135deg, #3b82f6, #8b5cf6);
-  border-radius: 50%;
+  color: #fff;
+  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
+  transform: translateY(-1px);
+}
+
+.language-tab span.active::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent);
+  border-radius: 0.75rem;
+}
+
+.community-scroll-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding-bottom: 20px;
+}
+
+.community-item {
+  display: flex;
+  align-items: center;
+  padding: 12px;
+  background: #f8fafc;
+  border-radius: 10px;
+  border: 1px solid #eef2f6;
+  transition: all 0.3s ease;
+}
+
+.community-item:hover {
+  background: #ffffff;
+  border-color: #3b82f6;
+  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.08);
+}
+
+.community-logo {
+  width: 40px;
+  height: 40px;
+  background: linear-gradient(135deg, #3b82f6, #6366f1);
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
   justify-content: center;
-  align-items: center;
-  width: 3rem;
-  height: 3rem;
-  margin: 0 auto 1.5rem;
-  display: flex;
-  box-shadow: 0 4px 12px #3b82f633;
+  color: white;
+  font-weight: bold;
+  font-size: 18px;
+  margin-right: 12px;
+  flex-shrink: 0;
 }
 
-.index-module__NV_5cW__actionTitle {
-  background: linear-gradient(135deg, #1e293b 0%, #3b82f6 100%);
-  -webkit-text-fill-color: transparent;
-  -webkit-background-clip: text;
-  background-clip: text;
-  margin-bottom: 1rem;
-  font-size: 2rem;
-  font-weight: 700;
-  line-height: 1.2;
-}
-
-.index-module__NV_5cW__actionDescription {
-  color: #64748b;
-  margin-bottom: 2rem;
-  font-size: 1rem;
-  font-weight: 400;
-  line-height: 1.5;
-}
-
-.index-module__NV_5cW__actionFeatures {
-  flex-wrap: wrap;
-  justify-content: center;
-  gap: 1.5rem;
-  margin-bottom: 2rem;
-  display: flex;
-}
-
-.index-module__NV_5cW__feature {
-  color: #3b82f6;
-  background: #3b82f614;
-  border: 1px solid #3b82f626;
-  border-radius: 1.5rem;
-  align-items: center;
-  gap: 0.4rem;
-  padding: 0.5rem 1rem;
-  font-size: 0.85rem;
-  font-weight: 500;
-  display: flex;
-}
-
-.index-module__NV_5cW__createButton {
-  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
-  border: none;
-  border-radius: 1.5rem;
-  align-items: center;
-  gap: 0.5rem;
-  height: auto;
-  margin: 0 auto;
-  padding: 0.75rem 2rem;
-  font-size: 1rem;
-  font-weight: 600;
-  transition: all 0.3s;
-  display: flex;
-  box-shadow: 0 4px 12px #3b82f64d;
-}
-
-.index-module__NV_5cW__createButton:hover {
-  background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
-  transform: translateY(-2px);
-  box-shadow: 0 6px 18px #3b82f666;
-}
-
-/* 响应式适配 */
-@media (max-width: 768px) {
-  .index-module__NV_5cW__titleContainer {
-    text-align: center;
-    flex-direction: column;
-    gap: 0.5rem;
-  }
-
-  .index-module__NV_5cW__title {
-    font-size: 2.5rem;
-  }
-
-  .index-module__NV_5cW__titleBadge {
-    padding: 0.4rem 1.2rem;
-    font-size: 1rem;
-  }
-
-  .index-module__NV_5cW__container {
-    padding: 1rem;
-  }
-
-  .index-module__NV_5cW__header {
-    margin-bottom: 2rem;
-    padding: 1.5rem 1rem;
-  }
-
-  // 移动端数据统计栏调整
-  .index-module__NV_5cW__statsBar {
-    gap: 1rem;
-    padding: 0.8rem 1rem;
-    flex-wrap: wrap;
-  }
-
-  .index-module__NV_5cW__stat {
-    flex: 1 1 60px;
-    min-width: 60px;
-  }
-
-  .index-module__NV_5cW__statNumber {
-    font-size: 1.1rem;
-  }
-
-  .index-module__NV_5cW__statLabel {
-    white-space: nowrap;
-    font-size: 0.7rem;
-  }
-
-  .index-module__NV_5cW__statDivider {
-    width: 1px;
-    height: 1.2rem;
-  }
-
-  .index-module__NV_5cW__sectionTitle {
-    text-align: left;
-    flex: 1;
-    justify-content: flex-start;
-    gap: 0.5rem;
-    font-size: 1.3rem;
-  }
-
-  .index-module__NV_5cW__actionSection {
-    border-radius: 1rem;
-    margin: 0;
-    padding: 2rem 1.5rem;
-  }
-
-  .index-module__NV_5cW__actionTitle {
-    font-size: 1.6rem;
-  }
-
-  .index-module__NV_5cW__actionFeatures {
-    flex-direction: column;
-    align-items: center;
-    gap: 1rem;
-  }
-
-  .index-module__NV_5cW__createButton {
-    padding: 0.65rem 1.5rem;
-    font-size: 0.95rem;
-  }
-
-  .chartCard__container {
-    height: 250px; /* 移动端图表高度调整 */
-  }
-
-  /* 移动端列表样式调整 */
-  .project-item {
-    flex-wrap: wrap;
-    gap: 0.5rem;
-  }
-
-  .project-org {
-    width: 100%;
-    max-width: 100%;
-    margin-top: 0.2rem;
-  }
-
-  // 移动端标题区域调整
-  .index-module__NV_5cW__titleSection {
-    padding: 0 1rem;
-    max-width: 100%;
-  }
-}
-
-@media (max-width: 480px) {
-  .index-module__NV_5cW__title {
-    font-size: 1.8rem;
-  }
-
-  .index-module__NV_5cW__actionSection {
-    padding: 1.5rem 1rem;
-  }
-
-  .index-module__NV_5cW__statsBar {
-    gap: 0.6rem;
-    padding: 0.6rem 0.8rem;
-  }
-
-  .index-module__NV_5cW__statNumber {
-    font-size: 1rem;
-  }
-
-  .index-module__NV_5cW__statLabel {
-    font-size: 0.65rem;
-  }
-
-  .index-module__NV_5cW__sectionTitle {
-    gap: 0.4rem;
-    font-size: 1.2rem;
-  }
-
-  .chartCard__container {
-    height: 200px; /* 小屏移动端图表高度调整 */
-  }
-
-  .index-module__NV_5cW__chartsGrid {
-    grid-template-columns: 1fr;
-  }
-
-  /* 小屏列表高度调整 */
-  .chartCard__container.list-container {
-    max-height: 300px;
-  }
-}
-
-
-/* 绘制标题左侧红色箭头（尖端指向文字） */
-.title-arrow-left {
-  width: 0;
-  height: 0;
-  border-top: 9px solid transparent;
-  border-bottom: 9px solid transparent;
-  border-left: 12px solid #C8161D; /* 使用标准的实验室红色值 */
-}
-
-/* 绘制标题右侧红色箭头（尖端指向文字） */
-.title-arrow-right {
-  width: 0;
-  height: 0;
-  border-top: 9px solid transparent;
-  border-bottom: 9px solid transparent;
-  border-right: 12px solid #C8161D;
-}
-
-/* 字体美化：确保标题厚重稳重 */
-h2 {
-  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
-}
-
-/* 针对标签内文字的微调 */
-span {
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-}
-
-.more-btn {
-  display: inline-block;
-  background-color: #C8161D; /* 品牌红 */
-  color: #ffffff;
-  font-size: 14px;
-  font-weight: 600;
-  padding: 10px 38px;
-  border-radius: 6px;
-  letter-spacing: 0.5px;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  box-shadow: 0 4px 12px rgba(200, 22, 29, 0.15);
-
-  &:hover {
-    background-color: #a31218;
-    transform: translateY(-2px);
-    box-shadow: 0 6px 18px rgba(200, 22, 29, 0.25);
-  }
-}
-
-/* 文本截断 */
-.line-clamp-2 {
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
+.community-info {
+  flex: 1;
   overflow: hidden;
 }
 
-/* 字体优化 */
-h3, .more-btn {
-  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Microsoft YaHei", sans-serif;
+.community-top {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 4px;
 }
 
+.community-name {
+  font-weight: 700;
+  font-size: 14px;
+  color: #1e293b;
+}
+
+.community-tag {
+  font-size: 10px;
+  padding: 1px 6px;
+  background: #e0f2fe;
+  color: #0369a1;
+  border-radius: 4px;
+}
+
+.community-slogan {
+  font-size: 12px;
+  color: #64748b;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.community-status {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 11px;
+  color: #10b981;
+  background: #ecfdf5;
+  padding: 2px 8px;
+  border-radius: 20px;
+  font-weight: 500;
+}
+
+.developer-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 4px 2px 20px 2px;
+}
+
+.developer-item {
+  display: flex;
+  align-items: center;
+  padding: 10px 12px;
+  background: #ffffff;
+  border: 1px solid #f1f5f9;
+  border-radius: 12px;
+  transition: all 0.2s ease;
+}
+
+.developer-item:hover {
+  transform: scale(1.02);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+  border-color: #e2e8f0;
+}
+
+/* 排名样式 */
+.dev-rank {
+  width: 24px;
+  font-weight: 800;
+  font-style: italic;
+  color: #94a3b8;
+  font-size: 14px;
+}
+.dev-rank.rank-1 { color: #fbbf24; font-size: 18px; }
+.dev-rank.rank-2 { color: #94a3b8; font-size: 16px; }
+.dev-rank.rank-3 { color: #b45309; font-size: 15px; }
+
+/* 头像占位 */
+.dev-avatar {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-weight: bold;
+  font-size: 16px;
+  margin-right: 12px;
+  box-shadow: inset 0 -2px 4px rgba(0,0,0,0.1);
+}
+
+.dev-info {
+  flex: 1;
+}
+
+.dev-name {
+  font-size: 14px;
+  font-weight: 700;
+  color: #1e293b;
+}
+
+.dev-tag {
+  font-size: 11px;
+  color: #64748b;
+}
+
+.dev-score {
+  font-size: 11px;
+  color: #10b981;
+  background: #f0fdf4;
+  padding: 2px 8px;
+  border-radius: 10px;
+}
+
+@media (max-width: 768px) {
+  .main-title { font-size: 2rem; }
+  .index-module__NV_5cW__chartsGrid { grid-template-columns: 1fr; }
+}
 </style>