feat:仪表盘占比修改

src/views/home/modules/header-banner.vue

@@ -481,19 +481,19 @@ const getDeviceCount = (subTitle?: string, clientNumEnable?: boolean): string =>
 .card-wrapper {
   margin-bottom: 16px;
   background: linear-gradient(180deg, #4284f5 0%, #0c47a7 100%);
-  padding: 16px 12px;
+  padding: 16px 12px 16px 8px;
   color: #fff;
 }
 
 .dashboard-layout {
   display: flex;
-  gap: 12px;
+  gap: 4px;
 }
 
 /* 左侧部分样式 */
 .left-section {
   flex: 0 0 auto;
-  width: 200px;
+  width: 160px;
   display: flex;
   align-items: center;
   justify-content: flex-start;
@@ -507,16 +507,16 @@ const getDeviceCount = (subTitle?: string, clientNumEnable?: boolean): string =>
   align-items: center;
   justify-content: center;
   width: 100%;
-  margin-left: -20px;
+  margin-left: -15px;
 }
 
 .gauge-chart {
-  width: 200px;
-  height: 200px;
+  width: 160px;
+  height: 160px;
 }
 
 .gauge-info {
-  margin-top: -16px;
+  margin-top: -12px;
 }
 
 .gauge-title {
@@ -525,7 +525,7 @@ const getDeviceCount = (subTitle?: string, clientNumEnable?: boolean): string =>
 }
 
 .gauge-value {
-  font-size: 18px;
+  font-size: 16px;
   font-weight: bold;
   margin-top: 2px;
 }
@@ -536,11 +536,12 @@ const getDeviceCount = (subTitle?: string, clientNumEnable?: boolean): string =>
   display: flex;
   flex-direction: column;
   justify-content: center;
-  gap: 6px;
+  gap: 4px;
+  padding-right: 4px;
 }
 
 .info-section {
-  margin-bottom: 8px;
+  margin-bottom: 6px;
 }
 
 .section-title {
@@ -582,19 +583,20 @@ const getDeviceCount = (subTitle?: string, clientNumEnable?: boolean): string =>
 /* 移动端适配 */
 @media screen and (max-width: 768px) {
   .card-wrapper {
-    padding: 16px 12px;
+    padding: 16px 8px 16px 6px;
   }
 
   .dashboard-layout {
-    gap: 12px;
+    gap: 4px;
   }
 
   .right-section {
-    gap: 6px;
+    gap: 4px;
+    padding-right: 2px;
   }
 
   .info-section {
-    margin-bottom: 8px;
+    margin-bottom: 4px;
   }
 
   .section-title {
@@ -612,26 +614,26 @@ const getDeviceCount = (subTitle?: string, clientNumEnable?: boolean): string =>
   }
 
   .left-section {
-    width: 140px;
+    width: 120px;
     min-height: 180px;
   }
 
   .gauge-container {
-    width: 140px;
-    margin-left: -15px;
+    width: 120px;
+    margin-left: -10px;
   }
 
   .gauge-chart {
-    width: 140px;
-    height: 140px;
+    width: 120px;
+    height: 120px;
   }
 
   .gauge-info {
-    margin-top: -16px;
+    margin-top: -12px;
   }
 
   .gauge-value {
-    font-size: 18px;
+    font-size: 16px;
     margin-top: 2px;
   }
 
@@ -649,26 +651,26 @@ const getDeviceCount = (subTitle?: string, clientNumEnable?: boolean): string =>
 /* 超小屏幕优化 */
 @media screen and (max-width: 375px) {
   .card-wrapper {
-    padding: 10px 8px;
+    padding: 10px 6px 10px 4px;
   }
 
   .dashboard-layout {
-    gap: 6px;
+    gap: 4px;
   }
 
   .left-section {
-    width: 120px;
+    width: 100px;
     min-height: 160px;
   }
 
   .gauge-container {
-    width: 120px;
-    margin-left: -10px;
+    width: 100px;
+    margin-left: -8px;
   }
 
   .gauge-chart {
-    width: 120px;
-    height: 120px;
+    width: 100px;
+    height: 100px;
   }
 
   .gauge-info {
@@ -700,5 +702,9 @@ const getDeviceCount = (subTitle?: string, clientNumEnable?: boolean): string =>
   .info-value {
     font-size: 12px;
   }
+
+  .right-section {
+    padding-right: 1px;
+  }
 }
 </style>