feat:仪表盘居中显示

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

@@ -327,7 +327,7 @@ async function mockDataUpdate() {
           downLimit: speedLimits.value.downLimit
         }
       };
-console.log(baseData.value[1].description)
+      console.log(baseData.value[1].description)
       // 更新速率限制显示
       if (response.rateLimitEnable) {
         speedLimits.value = {
@@ -550,29 +550,50 @@ const getDeviceCount = (subTitle?: string, clientNumEnable?: boolean): string =>
 }
 
 .info-section {
-  margin-bottom: 6px;
+  margin-bottom: 12px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
 .section-title {
   font-size: 14px;
   font-weight: 500;
   color: #fff;
-  margin-bottom: 4px;
+  margin-bottom: 8px;
   padding-left: 6px;
-  border-left: 3px solid #fff;
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.section-title::before {
+  content: '';
+  display: inline-block;
+  width: 3px;
+  height: 14px;
+  background-color: #fff;
+  margin-right: 8px;
+  border-radius: 2px;
 }
 
 .info-group {
   background: rgba(255, 255, 255, 0.05);
   border-radius: 8px;
   padding: 6px 8px;
+  width: 80%;
+  margin: 0 auto;
 }
 
 .info-item {
   display: flex;
+  flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  padding: 4px 0;
+  padding: 8px 0;
+  max-width: 300px;
+  margin: 0 auto;
 }
 
 .info-item:not(:last-child) {
@@ -585,7 +606,7 @@ const getDeviceCount = (subTitle?: string, clientNumEnable?: boolean): string =>
 }
 
 .info-value {
-  font-size: 13px;
+  font-size: 14px;
   font-weight: 500;
 }
 
@@ -604,22 +625,31 @@ const getDeviceCount = (subTitle?: string, clientNumEnable?: boolean): string =>
     padding-right: 2px;
   }
 
-  .info-section {
-    margin-bottom: 4px;
-  }
-
   .section-title {
     font-size: 14px;
-    margin-bottom: 4px;
+    margin-bottom: 6px;
-    padding-left: 6px;
+  }
+
+  .info-section {
+    margin-bottom: 8px;
   }
 
   .info-group {
-    padding: 6px 8px;
+    width: 90%;
   }
 
   .info-item {
-    padding: 4px 0;
+    padding: 6px 0;
+    max-width: 250px;
+  }
+
+  .info-label {
+    font-size: 12px;
+    margin-bottom: 3px;
+  }
+
+  .info-value {
+    font-size: 14px;
   }
 
   .left-section {
@@ -645,16 +675,6 @@ const getDeviceCount = (subTitle?: string, clientNumEnable?: boolean): string =>
     font-size: 16px;
     margin-top: 2px;
   }
-
-  .info-label {
-    font-size: 12px;
-    white-space: nowrap;
-  }
-
-  .info-value {
-    font-size: 13px;
-    word-break: break-all;
-  }
 }
 
 /* 超小屏幕优化 */
@@ -692,28 +712,33 @@ const getDeviceCount = (subTitle?: string, clientNumEnable?: boolean): string =>
 
   .section-title {
     font-size: 13px;
-    margin-bottom: 3px;
+    margin-bottom: 4px;
-    padding-left: 4px;
   }
 
   .info-group {
-    padding: 4px 6px;
+    width: 95%;
   }
 
   .info-item {
-    padding: 3px 0;
+    padding: 4px 0;
+    max-width: 200px;
   }
 
   .info-label {
     font-size: 11px;
+    margin-bottom: 2px;
   }
 
   .info-value {
-    font-size: 12px;
+    font-size: 13px;
   }
 
   .right-section {
     padding-right: 1px;
   }
+
+  .info-section {
+    margin-bottom: 6px;
+  }
 }
 </style>