修改状态监控页面的顶部挂件大小自适应缩放；

src/views/StatusMonitoring.vue

@@ -81,19 +81,19 @@
             <div class="top-charts-bar" v-if="currentView !== 'list-mode'">
                 <!-- 总览Tab -->
                 <template v-if="activeLeftTab === 'overview'">
-                    <div class="top-chart-box" style="width: 300px; height: 160px;">
+                    <div class="top-chart-box overview-chart-box">
                         <OnlineStatusTabs />
                     </div>
-                    <div class="top-chart-box" style="width: 300px; height: 160px;">
+                    <div class="top-chart-box overview-chart-box">
                         <DeviceStatusTabs />
                     </div>
                 </template>
                 <!-- 路口Tab -->
                 <template v-if="activeLeftTab === 'crossing'">
-                    <div class="top-chart-box" style="width: 228px; height: 124px;">
+                    <div class="top-chart-box crossing-chart-box">
                         <RingDonutChart v-if="crossingTopCharts.onlineChart" v-bind="crossingTopCharts.onlineChart" />
                     </div>
-                    <div class="top-chart-box" style="width: 228px; height: 124px;">
+                    <div class="top-chart-box crossing-chart-box">
                         <RingDonutChart v-if="crossingTopCharts.faultChart" v-bind="crossingTopCharts.faultChart" />
                     </div>
                 </template>
@@ -571,7 +571,7 @@ export default {
 .top-charts-bar {
     display: flex;
     justify-content: center;
-    gap: 20px;
+    gap: clamp(10px, 1.04vw, 20px);
     pointer-events: none;
 }
 .top-chart-box {
@@ -580,9 +580,21 @@ export default {
     background: radial-gradient(circle at 20% 0%, rgba(40,120,200,0.5) 0%, rgba(20,60,130,0.7) 70%);
     box-shadow: inset 0px 0px 0.625rem 0px rgba(88, 146, 255, 0.4), inset 1.25rem 0px 1.875rem -0.625rem rgba(88, 146, 255, 0.15);
     border: 1px solid rgba(255, 255, 255, 0.15);
-    border-radius: 12px;
+    border-radius: clamp(6px, 0.625vw, 12px);
     overflow: hidden;
 }
+/* --- 总览Tab图表尺寸适配 (原 300x160) --- */
+.overview-chart-box {
+    /* clamp(最小值, 理想值(1920下比例), 最大值) */
+    width: clamp(200px, 15.625vw, 300px);
+    height: clamp(106px, 8.333vw, 160px);
+}
+
+/* --- 路口Tab图表尺寸适配 (原 228x124) --- */
+.crossing-chart-box {
+    width: clamp(152px, 11.875vw, 228px);
+    height: clamp(82px, 6.458vw, 124px);
+}
 ::v-deep .list-mode-panel {
     position: absolute;
     inset: 0;