styles:优化首页设备数量统计图表为栅格布局

@@ -213,34 +213,38 @@
         style="color: #666; width: 50%"
         title="设备数量统计"
       >
-        <div class="flex container ml-4">
-          <div class="mr-4 flex chart-top">
+        <a-row type="flex" justify="space-between" align="middle">
+          <a-col :span="12">
             <PieChartDeviceSub
               v-if="seriesData.length > 0"
               :legendData="legendData"
               :seriesData="seriesData"
               :isCircle="false"
-            />
-          </div>
-          <div class="ml-20 flex justify-evenly right-text">
-            <div class="text flex items-center">
-              <span class="left-icon-d-color"></span>
-              直连设备：
-              <span class="bold-text">{{ growCardList?.deviceInfo?.directConnection ?? 0 }}</span
-              >个
-            </div>
-            <div class="text flex items-center">
-              <span class="left-icon-g-color"></span>
-              网关设备： <span class="bold-text">{{ growCardList?.deviceInfo?.gateWay ?? 0 }}</span
-              >个
-            </div>
-            <div class="text flex items-center">
-              <span class="left-icon-s-color"></span>
-              网关子设备：<span class="bold-text">{{ growCardList?.deviceInfo?.sensor ?? 0 }}</span
-              >个
-            </div>
-          </div>
-        </div>
+          /></a-col>
+          <a-col :span="12">
+            <a-row type="flex" justify="space-between" align="middle" style="row-gap: 30px">
+              <a-col :offset="8" class="flex items-center">
+                <span class="left-icon-d-color"></span>
+                直连设备：
+                <span class="bold-text">{{ growCardList?.deviceInfo?.directConnection ?? 0 }}</span
+                >个</a-col
+              >
+              <a-col :offset="8" class="flex items-center">
+                <span class="left-icon-g-color"></span>
+                网关设备：
+                <span class="bold-text">{{ growCardList?.deviceInfo?.gateWay ?? 0 }}</span
+                >个</a-col
+              >
+              <a-col :offset="8" class="flex items-center">
+                <span class="left-icon-s-color"></span>
+                网关子设备：<span class="bold-text">{{
+                  growCardList?.deviceInfo?.sensor ?? 0
+                }}</span
+                >个</a-col
+              >
+            </a-row>
+          </a-col>
+        </a-row>
       </Card>
       <Card
         size="small"
@@ -248,33 +252,37 @@
         style="color: #666; width: 50%"
         title="设备状态统计"
       >
-        <div class="flex container ml-4">
-          <div class="mr-4 flex chart-top-status">
-            <PieChartDeviceStatus
-              v-if="seriesStatusData.length > 0"
-              :seriesStatusData="seriesStatusData"
-            />
-            <div class="empty-box" v-else><Empty :image="Empty.PRESENTED_IMAGE_SIMPLE" /></div>
-          </div>
-          <div class="ml-20 flex justify-evenly right-text">
-            <div class="text flex items-center">
-              <span class="right-icon-d-color"></span>
-              待激活设备：
-              <span class="bold-text">{{ growCardList?.deviceInfo?.inActive ?? 0 }}</span
-              >个
+        <a-row type="flex" justify="space-between" align="middle">
+          <a-col :span="12">
+            <div>
+              <PieChartDeviceStatus
+                v-if="seriesStatusData.length > 0"
+                :seriesStatusData="seriesStatusData"
+              />
+              <div class="empty-box" v-else><Empty :image="Empty.PRESENTED_IMAGE_SIMPLE" /></div>
             </div>
-            <div class="text flex items-center">
-              <span class="right-icon-g-color"></span>
-              在线设备：<span class="bold-text">{{ growCardList?.deviceInfo?.onLine ?? 0 }}</span
-              >个
-            </div>
-            <div class="text flex items-center">
-              <span class="right-icon-s-color"></span>
-              离线设备：<span class="bold-text">{{ growCardList?.deviceInfo?.offLine ?? 0 }}</span
-              >个
-            </div>
-          </div>
-        </div>
+          </a-col>
+          <a-col :span="12">
+            <a-row type="flex" justify="space-between" align="middle" style="row-gap: 30px">
+              <a-col :offset="8" class="flex items-center">
+                <span class="right-icon-d-color"></span>
+                待激活设备：
+                <span class="bold-text">{{ growCardList?.deviceInfo?.inActive ?? 0 }}</span
+                >个</a-col
+              >
+              <a-col :offset="8" class="flex items-center">
+                <span class="right-icon-g-color"></span>
+                在线设备：<span class="bold-text">{{ growCardList?.deviceInfo?.onLine ?? 0 }}</span
+                >个</a-col
+              >
+              <a-col :offset="8" class="flex items-center">
+                <span class="right-icon-s-color"></span>
+                离线设备：<span class="bold-text">{{ growCardList?.deviceInfo?.offLine ?? 0 }}</span
+                >个</a-col
+              >
+            </a-row>
+          </a-col>
+        </a-row>
       </Card>
     </div>
   </div>
@@ -340,13 +348,6 @@
   });
 </script>
 <style lang="less">
-  .right-text {
-    width: 40%;
-    flex-direction: column;
-    height: 240px;
-    margin: 10px 0 10px 50px;
-  }
-
   .text {
     color: #333;
     display: flex;
@@ -357,39 +358,23 @@
     font-weight: bold;
   }
 
-  .chart-top {
-    width: 60%;
-    height: 300px;
-    align-items: center;
-    margin-top: -30px;
-  }
-
-  .container {
-    width: 100%;
-  }
-
-  .chart-top-status {
-    width: 100%;
-    height: 300px;
-    align-items: center;
-    margin-top: -40px;
-  }
-
   .base-left-icon-color {
     border-radius: 50%;
-    width: 10px;
-    height: 10px;
+    width: 0.75rem;
+    height: 0.75rem;
+    display: block;
     position: relative;
-    right: 10px;
+    right: 0.5rem;
   }
+
   .left-icon-d-color :extend(.base-left-icon-color) {
-    background-color: #5c7bd9;
+    background-color: #5c7bd9 !important;
   }
   .left-icon-g-color :extend(.base-left-icon-color) {
-    background-color: #91cc75;
+    background-color: #91cc75 !important;
   }
   .left-icon-s-color :extend(.base-left-icon-color) {
-    background-color: #fac859;
+    background-color: #fac859 !important;
   }
   .right-icon-d-color :extend(.base-left-icon-color) {
     background-color: #5c7bd9;