From 4a1422164862525f9386bf6b2fe406a13a12ce57 Mon Sep 17 00:00:00 2001
From: wangqiyang <wqy00163@163.com>
Date: Fri, 31 Jul 2026 22:42:30 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=B0=8F=E5=B1=8F=E7=9B=91?=
 =?UTF-8?q?=E6=8E=A7=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Monitoring/index.vue | 110 ++++++++++++++++++---------------
 1 file changed, 61 insertions(+), 49 deletions(-)

diff --git a/src/views/Monitoring/index.vue b/src/views/Monitoring/index.vue
index 95c34ba..5b4dfe7 100644
--- a/src/views/Monitoring/index.vue
+++ b/src/views/Monitoring/index.vue
@@ -658,15 +658,18 @@ onUnmounted(() => {
     width: 100%;
     height: 100%;
     overflow: hidden;
-    padding: 10px 20px;
+    padding: 8px 20px 52px;
     box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
 }
 
 .header-status {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 15px;
+    flex-shrink: 0;
+    margin-bottom: 8px;
     color: rgba(255, 255, 255, 0.9);
 }
 
@@ -677,7 +680,7 @@ onUnmounted(() => {
 }
 
 .page-title h1 {
-    font-size: 30px;
+    font-size: 26px;
     font-weight: bold;
     margin: 0;
     color: #ffffff;
@@ -694,9 +697,10 @@ onUnmounted(() => {
 .control-content {
     display: flex;
     width: 100%;
-    gap: 30px;
+    gap: 20px;
     box-sizing: border-box;
-    height: calc(100% - 110px);
+    flex: 1;
+    min-height: 0;
 }
 
 .power-section {
@@ -705,15 +709,17 @@ onUnmounted(() => {
     flex-direction: column;
     justify-content: space-between;
     /* width: 500px; */
-    gap: 8px;
+    gap: 6px;
     height: 100%;
+    min-height: 0;
     overflow: hidden;
 }
 
 .power-params {
     display: flex;
     justify-content: space-between;
-    gap: 10px;
+    gap: 8px;
+    flex-shrink: 0;
 }
 
 .phase-card,
@@ -746,16 +752,16 @@ onUnmounted(() => {
 .param-list {
     display: flex;
     flex-direction: column;
-    padding: 5px 10px;
+    padding: 4px 8px;
     flex: 1;
-    gap: 5px;
+    gap: 3px;
     justify-content: space-between;
 }
 
 .param-item {
     display: flex;
     justify-content: space-between;
-    font-size: 12px;
+    font-size: 11px;
 }
 
 .param-label {
@@ -773,7 +779,7 @@ onUnmounted(() => {
     background: rgba(255, 255, 255, 0.08);
     border: 1px solid rgba(255, 255, 255, 0.2);
     border-radius: 8px;
-    padding: 6px 12px;
+    padding: 5px 10px;
     color: #fff;
     flex-shrink: 0;
 }
@@ -786,28 +792,27 @@ onUnmounted(() => {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    gap: 16px;
+    gap: 10px;
     cursor: pointer;
 }
 
 .fault-title {
     display: flex;
     align-items: center;
-    gap: 8px;
-    font-size: 15px;
+    gap: 6px;
+    font-size: 14px;
     font-weight: 600;
 }
 
 .fault-count {
-    padding: 1px 6px;
+    padding: 1px 5px;
     border-radius: 10px;
-    font-size: 12px;
+    font-size: 11px;
     color: #ffd4d4;
     background: rgba(220, 53, 69, 0.18);
 }
 
 .fault-subtitle {
-    margin-top: 4px;
     font-size: 12px;
     color: rgba(255, 255, 255, 0.68);
 }
@@ -815,13 +820,14 @@ onUnmounted(() => {
 .fault-actions {
     display: flex;
     align-items: center;
-    gap: 8px;
+    gap: 6px;
     flex-shrink: 0;
 }
 
 .fault-toggle-button {
     flex-shrink: 0;
-    height: 30px;
+    height: 26px;
+    padding: 0 8px;
     border-radius: 6px;
     border: 1px solid rgba(255, 255, 255, 0.2);
     color: #fff;
@@ -830,7 +836,8 @@ onUnmounted(() => {
 
 .fault-refresh-button {
     flex-shrink: 0;
-    height: 30px;
+    height: 26px;
+    padding: 0 8px;
     border-radius: 6px;
     border: none;
     color: #fff;
@@ -839,16 +846,16 @@ onUnmounted(() => {
 
 .fault-list {
     position: absolute;
-    top: calc(100% + 6px);
+    top: auto;
+    bottom: calc(100% + 5px);
     left: 0;
     right: 0;
     z-index: 30;
     display: grid;
     grid-template-columns: repeat(5, minmax(0, 1fr));
-    grid-template-rows: repeat(2, 24px);
-    gap: 6px;
-    max-height: 66px;
-    padding: 6px 12px;
+    grid-template-rows: repeat(2, 21px);
+    gap: 4px;
+    padding: 5px 10px;
     overflow: hidden;
     box-sizing: border-box;
     border-radius: 8px;
@@ -860,10 +867,10 @@ onUnmounted(() => {
 .fault-item {
     display: flex;
     align-items: center;
-    gap: 5px;
-    min-height: 24px;
+    gap: 4px;
+    min-height: 21px;
     min-width: 0;
-    padding: 3px 6px;
+    padding: 2px 5px;
     border-radius: 6px;
     background: rgba(220, 53, 69, 0.16);
     border: 1px solid rgba(255, 120, 120, 0.35);
@@ -871,7 +878,7 @@ onUnmounted(() => {
 
 .fault-loop {
     flex-shrink: 0;
-    font-size: 11px;
+    font-size: 10px;
     color: #ffd4d4;
 }
 
@@ -880,14 +887,14 @@ onUnmounted(() => {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    font-size: 12px;
+    font-size: 11px;
     font-weight: 600;
     color: #fff;
 }
 
 .fault-more {
     justify-content: center;
-    font-size: 12px;
+    font-size: 11px;
     font-weight: 600;
     color: #ffd4d4;
 }
@@ -895,15 +902,19 @@ onUnmounted(() => {
 .circuit-section {
     display: flex;
     flex-direction: column;
-    gap: 8px;
-    flex-shrink: 0;
+    gap: 6px;
+    flex: 1 1 auto;
+    min-height: 0;
 }
 
 .circuit-grid {
     display: grid;
     grid-template-columns: repeat(5, minmax(0, 1fr));
-    gap: 8px;
-    font-size: 11px;
+    grid-template-rows: repeat(2, minmax(0, 1fr));
+    gap: 6px;
+    height: 100%;
+    min-height: 0;
+    font-size: 10px;
 
     .circuitStatus {
         color: #fff;
@@ -912,7 +923,7 @@ onUnmounted(() => {
         .line {
             width: 100%;
             display: flex;
-            margin-top: 5px;
+            margin-top: 3px;
             justify-content: space-between;
 
             .line_item {
@@ -934,9 +945,10 @@ onUnmounted(() => {
     display: flex;
     flex-direction: column;
     align-items: center;
-    // gap: 10px;
+    justify-content: center;
     min-width: 0;
-    padding: 6px;
+    min-height: 0;
+    padding: 4px 5px;
     border-radius: 8px;
     background: rgba(255, 255, 255, 0.05);
     border: 1px solid rgba(255, 255, 255, 0.12);
@@ -946,7 +958,7 @@ onUnmounted(() => {
     background: rgba(255, 255, 255, 0.08);
     border: 1px solid rgba(255, 255, 255, 0.2);
     border-radius: 8px;
-    padding: 5px 6px;
+    padding: 3px 5px;
     color: rgba(255, 255, 255, 0.7);
     text-align: center;
     width: 100%;
@@ -988,22 +1000,22 @@ onUnmounted(() => {
 .dimming-section {
     display: flex;
     flex-direction: column;
-    gap: 8px;
-    font-size: 12px;
+    gap: 5px;
+    font-size: 11px;
     flex-shrink: 0;
 }
 
 .dimming-grid {
     display: grid;
     grid-template-columns: repeat(5, minmax(0, 1fr));
-    gap: 8px;
+    gap: 5px 8px;
 }
 
 .dimming-item {
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: 8px;
+    gap: 4px;
     min-width: 0;
 }
 
@@ -1016,7 +1028,7 @@ onUnmounted(() => {
     background: rgba(255, 255, 255, 0.08);
     border: 1px solid rgba(255, 255, 255, 0.2);
     border-radius: 8px;
-    padding: 6px;
+    padding: 4px 6px;
     color: rgba(255, 255, 255, 0.7);
     font-weight: bold;
     text-align: center;
@@ -1038,8 +1050,8 @@ onUnmounted(() => {
     align-items: center;
     border-top: 1px solid #eee;
     width: 100vw;
-    padding: 0 30px;
-    height: 50px;
+    padding: 0 24px;
+    height: 44px;
     position: fixed;
     bottom: 0;
     left: 0;
@@ -1060,9 +1072,9 @@ onUnmounted(() => {
     .back-button,
     .restart-button {
         width: 100%;
-        height: 38px;
-        border-radius: 19px;
-        font-size: 16px;
+        height: 34px;
+        border-radius: 17px;
+        font-size: 15px;
         font-weight: 500;
         transition: all 0.3s ease;
     }