From 9dee7d17eb64a3a5ea827e92d69648cad0f8f9db Mon Sep 17 00:00:00 2001
From: zhongzm <zhongzm@agt.com>
Date: Wed, 22 Jan 2025 21:12:43 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E4=BB=AA=E8=A1=A8=E7=9B=98=E5=8D=A0?=
 =?UTF-8?q?=E6=AF=94=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/home/modules/header-banner.vue | 62 +++++++++++++-----------
 1 file changed, 34 insertions(+), 28 deletions(-)

diff --git a/src/views/home/modules/header-banner.vue b/src/views/home/modules/header-banner.vue
index e222542..537119a 100644
--- a/src/views/home/modules/header-banner.vue
+++ b/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>