数据开放样式优化

src/components/ScrollRanking.vue

@@ -6,6 +6,30 @@
         :key="index"
         class="ranking-item"
       >
+        <!-- 计算实际排名（处理扩展列表的情况） -->
+        <div class="rank-item">
+          <template v-if="isTopThree(index)">
+            <img
+              v-if="getRealIndex(index) === 0"
+              src="@/assets/first.png"
+              alt="第一名"
+              class="rank-image"
+            />
+            <img
+              v-if="getRealIndex(index) === 1"
+              src="@/assets/second.png"
+              alt="第二名"
+              class="rank-image"
+            />
+            <img
+              v-else-if="getRealIndex(index) === 2"
+              src="@/assets/third.png"
+              alt="第三名"
+              class="rank-image"
+            />
+          </template>
+          <div v-else class="rank-number">{{ getRealIndex(index) + 1 }}</div>
+        </div>
         <span class="item-name">{{ item.name }}</span>
         <span class="item-count">{{ item.count }}</span>
       </li>
@@ -35,7 +59,7 @@ export default {
     return {
       scrollTimer: null,
       currentPosition: 0,
-      itemHeight: 0, // 存储每个条目的高度
+      itemHeight: 0,
     };
   },
   computed: {
@@ -47,7 +71,6 @@ export default {
     },
   },
   mounted() {
-    // 确保DOM渲染完成后计算高度
     this.$nextTick(() => {
       this.calculateItemHeight();
       if (this.list.length > this.visibleCount) {
@@ -69,12 +92,10 @@ export default {
     }
   },
   methods: {
-    // 计算每个条目的高度
     calculateItemHeight() {
       const firstItem = this.$refs.rankingList?.querySelector(".ranking-item");
       if (firstItem) {
         this.itemHeight = firstItem.offsetHeight;
-        // 设置容器高度为可见条目总高度
         this.$el.style.height = `${this.itemHeight * this.visibleCount}px`;
       }
     },
@@ -101,7 +122,6 @@ export default {
       }px)`;
       rankingList.style.transition = "transform 0.5s ease";
 
-      // 无缝滚动重置
       if (this.currentPosition >= this.list.length) {
         setTimeout(() => {
           this.currentPosition = 0;
@@ -110,6 +130,15 @@ export default {
         }, 500);
       }
     },
+    // 获取实际索引（处理扩展列表）
+    getRealIndex(index) {
+      return index % this.list.length;
+    },
+    // 判断是否为前三名
+    isTopThree(index) {
+      const realIndex = this.getRealIndex(index);
+      return realIndex < 3;
+    },
   },
 };
 </script>
@@ -130,11 +159,12 @@ export default {
 
 .ranking-item {
   display: flex;
+  align-items: center;
   justify-content: space-between;
-  font-size: 13px;
+  font-size: 16px;
-  color: rgba(255, 255, 255, 0.8);
+  color: rgba(255, 255, 255, 0.9);
   transition: all 0.3s ease;
-  padding: 6px 0; /* 增加内边距使条目高度更合适 */
+  padding: 6px 0;
 
   &:hover {
     color: #fff;
@@ -142,14 +172,46 @@ export default {
   }
 }
 
+.rank-item {
+  margin-right: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.rank-image {
+  width: 16px;
+  height: 16px;
+  object-fit: contain;
+}
+
+.rank-number {
+  width: 16px;
+  height: 16px;
+  border-radius: 3px;
+  background-color: rgba(74, 144, 226, 0.3);
+  color: #fff;
+  font-size: 11px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: bold;
+}
+
 .item-name {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  max-width: 70%;
+  flex: 1;
+  margin-right: 10px;
 }
 
 .item-count {
   font-weight: 500;
+  min-width: 40px;
+  text-align: right;
+  background: #17f5f8;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
 }
 </style>

src/views/component/OpenShare.vue

@@ -29,7 +29,7 @@
           </div>
           <div class="stat-item">
             <span class="stat-label">调用异常接口数</span>
-            <span class="stat-value">1</span>
+            <span class="stat-value abnormal">1</span>
           </div>
         </div>
       </div>
@@ -201,34 +201,33 @@ export default {
 .share-stats {
   display: flex;
   flex-direction: column;
-  gap: 15px;
   width: 100%;
 }
 
 .stat-item {
   display: flex;
   justify-content: space-between;
-  background: rgba(74, 144, 226, 0.1);
+  align-items: center;
-  padding: 12px 10px;
+  padding: 10px;
   border-radius: 8px;
   transition: all 0.3s ease;
 
-  &:hover {
-    background: rgba(74, 144, 226, 0.2);
-    box-shadow: 0 0 10px rgba(74, 144, 226, 0.3);
-  }
-
   .stat-label {
-    font-size: 13px;
+    font-size: 16px;
-    color: rgba(255, 255, 255, 0.7);
+    color: rgba(255, 255, 255, 0.9);
     display: block;
-    margin-bottom: 6px;
   }
 
   .stat-value {
-    font-size: 18px;
+    font-size: 32px;
     font-weight: bold;
-    background: linear-gradient(to top, #4a90e2, #fff);
+    background: #17f5f8;
+    font-style: italic;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+  .abnormal {
+    background: #dd7149;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
   }
@@ -236,21 +235,15 @@ export default {
 
 // 图表项样式
 .chart-item {
-  background: rgba(74, 144, 226, 0.1);
+  padding: 10px;
-  padding: 12px 10px;
   border-radius: 8px;
   transition: all 0.3s ease;
   width: 100%;
   display: flex;
   flex-direction: column;
 
-  &:hover {
-    background: rgba(74, 144, 226, 0.2);
-    box-shadow: 0 0 10px rgba(74, 144, 226, 0.3);
-  }
-
   .chart-title {
-    font-size: 14px;
+    font-size: 18px;
     color: #fff;
     margin-bottom: 10px;
     text-shadow: 0 0 3px rgba(74, 144, 226, 0.5);