src/components/ScrollRanking.vue

@@ -6,30 +6,6 @@
         :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>
@@ -59,7 +35,7 @@ export default {
     return {
       scrollTimer: null,
       currentPosition: 0,
-      itemHeight: 0,
+      itemHeight: 0, // 存储每个条目的高度
     };
   },
   computed: {
@@ -71,6 +47,7 @@ export default {
     },
   },
   mounted() {
+    // 确保DOM渲染完成后计算高度
     this.$nextTick(() => {
       this.calculateItemHeight();
       if (this.list.length > this.visibleCount) {
@@ -92,10 +69,12 @@ 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`;
       }
     },
@@ -122,6 +101,7 @@ export default {
       }px)`;
       rankingList.style.transition = "transform 0.5s ease";
 
+      // 无缝滚动重置
       if (this.currentPosition >= this.list.length) {
         setTimeout(() => {
           this.currentPosition = 0;
@@ -130,15 +110,6 @@ export default {
         }, 500);
       }
     },
-    // 获取实际索引（处理扩展列表）
-    getRealIndex(index) {
-      return index % this.list.length;
-    },
-    // 判断是否为前三名
-    isTopThree(index) {
-      const realIndex = this.getRealIndex(index);
-      return realIndex < 3;
-    },
   },
 };
 </script>
@@ -159,12 +130,11 @@ export default {
 
 .ranking-item {
   display: flex;
-  align-items: center;
   justify-content: space-between;
-  font-size: 16px;
-  color: rgba(255, 255, 255, 0.9);
+  font-size: 13px;
+  color: rgba(255, 255, 255, 0.8);
   transition: all 0.3s ease;
-  padding: 6px 0;
+  padding: 6px 0; /* 增加内边距使条目高度更合适 */
 
   &:hover {
     color: #fff;
@@ -172,46 +142,14 @@ 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;
-  flex: 1;
-  margin-right: 10px;
+  max-width: 70%;
 }
 
 .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/BigScreen.vue

@@ -38,14 +38,14 @@
             <OpenShare class="component-container" />
           </div>
 
-          <!-- 3. 第三行：数据仓库（内容较多） -->
+          <!-- 3. 第三行：数据仓库（内容较多）+ 数据质量检测（左右布局） -->
           <div class="dashboard-row third-row">
-            <DataWarehouse class="component-container" />
-          </div>
-
-          <!-- 4. 第四行：数据源 -->
-          <div class="dashboard-row fourth-row">
-            <DataQuality class="component-container" />
+            <div class="dashboard-col left-col">
+              <DataWarehouse class="component-container" />
+            </div>
+            <div class="dashboard-col right-col">
+              <DataQuality class="component-container" />
+            </div>
           </div>
         </div>
       </div>
@@ -137,10 +137,22 @@ export default {
 
     // 第一、三行：独占一行（内容较多，需全屏宽度）
     &.first-row,
-    &.second-row,
-    &.third-row {
+    &.second-row {
       width: 100%;
     }
+
+    // 第一行：左右两列布局
+    &.third-row {
+      flex-direction: row;
+      gap: 20px;
+
+      .dashboard-col {
+        flex: 1; // 两列等宽
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+      }
+    }
   }
 
   // 组件容器：统一组件外层样式，避免组件内部样式冲突

src/views/component/OpenShare.vue

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