完善首页数据看板样式

src/views/index.vue

@@ -2772,6 +2772,21 @@ export default {
       background: rgba(24, 144, 255, 0.3);
       border-radius: 2px;
     }
+    
+    // 左侧最后一个卡片扩展填充剩余空间
+    .panel-card:last-child {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      min-height: 0;
+      
+      .panel-content {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        min-height: 0;
+      }
+    }
   }
   
   // 中央地图区域
@@ -2799,6 +2814,21 @@ export default {
       background: rgba(24, 144, 255, 0.3);
       border-radius: 2px;
     }
+    
+    // 右侧最后一个卡片扩展填充剩余空间
+    .panel-card:last-child {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      min-height: 0;
+      
+      .panel-content {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        min-height: 0;
+      }
+    }
   }
 }
 
@@ -2809,11 +2839,12 @@ export default {
   border-radius: 8px;
   overflow: hidden;
   backdrop-filter: blur(10px);
+  flex-shrink: 0;
   
   .panel-header {
     background: rgba(24, 144, 255, 0.1);
     border-bottom: 1px solid rgba(24, 144, 255, 0.3);
-    padding: 10px 16px;
+    padding: 12px 16px;
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -2859,8 +2890,8 @@ export default {
 .chart-legend-mini {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 8px;
-  margin-top: 10px;
+  gap: 6px 8px;
+  margin-top: 12px;
   
   .legend-item-mini {
     display: flex;
@@ -2868,6 +2899,7 @@ export default {
     gap: 6px;
     font-size: 11px;
     color: rgba(255, 255, 255, 0.85);
+    line-height: 1.4;
     
     .legend-dot {
       width: 8px;
@@ -2877,9 +2909,8 @@ export default {
     }
     
     .legend-text {
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
+      flex: 1;
+      word-break: break-all;
     }
   }
 }
@@ -2888,8 +2919,8 @@ export default {
 .device-stats-mini {
   display: flex;
   justify-content: space-around;
-  margin-top: 10px;
-  padding-top: 10px;
+  margin-top: 12px;
+  padding-top: 12px;
   border-top: 1px solid rgba(24, 144, 255, 0.2);
   
   .stat-item {
@@ -2921,30 +2952,39 @@ export default {
 .env-grid-mini {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 10px;
+  grid-template-rows: 1fr 1fr;
+  gap: 12px;
+  flex: 1;
+  min-height: 0;
   
   .env-item {
     background: rgba(24, 144, 255, 0.05);
     border: 1px solid rgba(24, 144, 255, 0.2);
     border-radius: 6px;
-    padding: 10px;
+    padding: 12px;
     text-align: center;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
     
     .env-name {
       font-size: 11px;
       color: rgba(255, 255, 255, 0.65);
-      margin-bottom: 4px;
+      margin-bottom: 6px;
+      flex-shrink: 0;
     }
     
     .env-value-text {
       font-size: 14px;
       font-weight: 600;
       color: #1890ff;
-      margin-bottom: 6px;
+      margin-bottom: 8px;
+      flex-shrink: 0;
     }
     
     .env-chart-mini {
-      height: 40px;
+      flex: 1;
+      min-height: 40px;
       width: 100%;
     }
   }
@@ -2952,7 +2992,7 @@ export default {
 
 // ============ 告警列表 ============
 .alert-list-mini {
-  max-height: 320px;
+  max-height: 300px;
   overflow-y: auto;
   
   &::-webkit-scrollbar {
@@ -2968,7 +3008,7 @@ export default {
     display: flex;
     align-items: center;
     gap: 10px;
-    padding: 10px;
+    padding: 12px 8px;
     border-bottom: 1px solid rgba(24, 144, 255, 0.1);
     transition: background-color 0.2s;
     
@@ -3070,7 +3110,7 @@ export default {
   .map-header {
     background: rgba(24, 144, 255, 0.1);
     border-bottom: 1px solid rgba(24, 144, 255, 0.3);
-    padding: 10px 16px;
+    padding: 12px 16px;
     
     .map-title {
       font-size: 14px;
@@ -3191,9 +3231,12 @@ export default {
   display: flex;
   flex-direction: column;
   gap: 12px;
+  flex: 1;
+  min-height: 0;
   
   .task-chart-container {
-    height: 140px;
+    flex: 1;
+    min-height: 140px;
     width: 100%;
     
     #taskProgressChart {
@@ -3206,6 +3249,7 @@ export default {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 8px;
+    flex-shrink: 0;
     
     .task-stat-item {
       text-align: center;