态势感知平台-武汉市开源建设生态页面增加鸿蒙生态数据可视化模块展示

src/views/Jyh/Community/components/HarmonyEcoCharts.vue

@@ -177,32 +177,42 @@
                ref="scrollContainerUni"
                @mouseenter="pauseScroll('uni')"
                @mouseleave="resumeScroll('uni')">
-            <div class="project-list">
-              <div class="project-item" v-for="(item, index) in [...uniContributors, ...uniContributors]" :key="index">
-                <div class="project-rank-wrapper">
-        <span class="project-rank" :style="(index % uniContributors.length) < 3 ? 'background:#10B981; box-shadow: 0 0 8px rgba(16,185,129,0.4)' : 'background:#334155'">
-          {{ (index % uniContributors.length) + 1 }}
-        </span>
+
+            <div class="developer-list">
+              <div class="developer-item" v-for="(item, index) in [...uniContributors, ...uniContributors]" :key="index">
+                <div class="dev-avatar" :style="{ background: getAvatarBg(index) }">
+                  {{ item.authorName.charAt(0).toUpperCase() }}
                 </div>
 
-                <div class="project-info">
-                  <div class="info-top-row">
-                    <span class="author-name">{{ item.authorName }}</span>
-                    <span class="university-tag">{{ item.university }}</span>
+                <div class="dev-info">
+                  <div class="dev-name-row">
+                    <span class="dev-name">{{ item.authorName }}</span>
+                    <span class="dev-employer-tag">{{ item.university }}</span>
+                    <span class="author-email">{{ item.authorEmail }}</span>
+                  </div>
+                  <div class="dev-stats">
+                    <span class="stat-add">++{{ item.additions }}</span>
+                    <span class="stat-sep">/</span>
+                    <span class="stat-del">--{{ item.deletions }}</span>
+                  </div>
                 </div>
                 <div class="info-bottom-row">
                   <span class="repo-name">@{{ item.repo }}</span>
                   <span class="commit-message" :title="item.detailMessage">{{ item.detailMessage }}</span>
                 </div>
-                </div>
 
-                <div class="project-meta">
-                  <div class="change-stats">
-                    <span style="color: #10B981">新增：+{{ item.additions }}</span>
-                    <span style="color: #F43F5E; margin-left: 8px">减少：-{{ item.deletions }}</span>
-                    <span style="color: #0194ff; margin-left: 8px">修改：{{ item.changeNum }}</span>
-                  </div>
+                <div class="dev-medal">
                   <div class="author-email">{{ item.authorEmail }}</div>
+                  <div class="score-container">
+                    <span class="score-label">总修改</span>
+                    <span class="score-val" :class="{ 'top-three': (index % hmDevelopers.length) < 3 }">
+                      {{ item.changeNum }}
+                    </span>
+                  </div>
+                  <svg v-if="(index % hmDevelopers.length) < 3" class="medal-icon" viewBox="0 0 24 24">
+                    <path fill="#f59e0b"
+                          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>
                 </div>
               </div>
             </div>
@@ -1190,60 +1200,9 @@ onUnmounted(() => {
 
 
 /*高校鸿蒙贡献榜*/
-.list-container {
-  overflow: hidden;
-  height: 100%;
-
-  .project-item {
-    display: flex;
-    align-items: center;
-    padding: 14px 16px;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
-    transition: background 0.2s ease;
-
-    &:hover {
-      background: rgba(255, 255, 255, 0.05);
-    }
-
-    .project-rank-wrapper {
-      margin-right: 14px;
-      .project-rank {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 22px;
-        height: 22px;
-        border-radius: 4px;
-        color: #FFFFFF;
-        font-size: 12px;
-        font-weight: bold;
-      }
-    }
-
-    .project-info {
-      flex: 1;
-      min-width: 0;
-
-      .info-top-row {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        margin-bottom: 4px;
-
-        .author-name {
-          font-size: 15px;
-          font-weight: 600;
-          color: #000; // 姓名最亮
-        }
-
-        .university-tag {
-          font-size: 11px;
-          color: #10B981;
-          background: rgba(16, 185, 129, 0.15);
-          border: 1px solid rgba(16, 185, 129, 0.4);
-          padding: 0 6px;
-          border-radius: 10px;
-        }
+.author-email {
+  font-size: 14px;
+  color: #64748B; // 邮箱最暗
 }
 
 .info-bottom-row {
@@ -1265,24 +1224,4 @@ onUnmounted(() => {
     text-overflow: ellipsis;
   }
 }
-    }
-
-    .project-meta {
-      text-align: right;
-      margin-left: 12px;
-      flex-shrink: 0;
-
-      .change-stats {
-        font-size: 14px;
-        //font-weight: bold;
-        margin-bottom: 2px;
-      }
-
-      .author-email {
-        font-size: 14px;
-        color: #64748B; // 邮箱最暗
-      }
-    }
-  }
-}
 </style>