feat: ab屏 样式优化

src/assets/css/screen.scss

@@ -29,7 +29,7 @@ $title-hd: halfH(109);
 }
 .border{
     border: 1px solid rgba(0, 123, 211, 0.2);
-    border-radius: halfW(5);
+    border-radius: var(--radius);
 }
 .w-full{
     width: 100%;

src/assets/css/theme.scss

@@ -22,6 +22,8 @@ $gap-padding: halfW(8);
   --content-bg: #0c1425;
   --primary: #007bd3;
   --page-bg: #070d19;
+  
+  --radius: 4px;
 
   scrollbar-width: none; /* firefox */
   -ms-overflow-style: none; /* IE 10+ */

src/views/hui-jia/a1-screen/index.vue

@@ -1,3 +1,10 @@
+<!--
+ * @Author: wjc
+ * @Date: 2025-11-25 10:30:54
+ * @LastEditors: wjc
+ * @LastEditTime: 2025-12-11 09:13:57
+ * @Description: 
+-->
 <template>
     <div class="screen">
       <Title />
@@ -44,12 +51,12 @@ export default {
 @import '@/assets/css/screen.scss';
 
 .screen-content{
-  width: 100%;
-  height: 100%;
-  height: calc(100% - $title-hd);
+  width: calc(100% - halfW(8) * 2);
+  height: calc(100% - $title-hd - halfH(8));
   display: flex;
   flex-direction: column;
   gap: halfW(16);
+  padding: 0 halfW(8) halfW(8) halfW(8);
   .screen-top{
     width: 100%;
     flex: 1 1 0%;

src/views/hui-jia/a2-screen/index.vue

@@ -45,9 +45,9 @@ export default {
 @import '@/assets/css/screen.scss';
 
 .screen-content{
-  width: 100%;
-  height: 100%;
-  height: calc(100% - $title-hd);
+  width: calc(100% - halfW(8) * 2);
+  height: calc(100% - $title-hd - halfH(8));
+  padding: 0 halfW(8) halfW(8) halfW(8);
   display: flex;
   flex-direction: row;
   gap: halfW(16);

src/views/hui-jia/a3-screen/index.vue

@@ -2,7 +2,7 @@
  * @Author: wjc
  * @Date: 2025-11-19 16:09:12
  * @LastEditors: wjc
- * @LastEditTime: 2025-12-02 16:32:55
+ * @LastEditTime: 2025-12-11 09:44:37
  * @Description: 
 -->
 <template>
@@ -49,8 +49,9 @@
   @import "@/assets/css/screen.scss";
   $gap-padding: halfW(8);
   .b2-screen {
-    height: 100vh;
-    width: 100vw;
+    width: calc(100vw - halfW(8) * 2);
+    height: calc(100vh - halfH(8));
+    padding: 0 halfW(8) halfW(8) halfW(8);
     background: var(--page-bg);
   }
   .b2-screen-content {

src/views/hui-jia/a4-screen/index.vue

@@ -144,8 +144,9 @@
 
   $gap-padding: halfW(8);
   .b1-screen {
-    height: 100vh;
-    width: 100vw;
+    width: calc(100vw - halfW(8) * 2);
+    height: calc(100vh - halfH(8));
+    padding: halfW(8);
     background: var(--page-bg);
   }
   .b1-screen-content {

src/views/hui-jia/b1-screen/index.vue

@@ -2,7 +2,7 @@
  * @Author: wjc
  * @Date: 2025-11-19 16:09:12
  * @LastEditors: wjc
- * @LastEditTime: 2025-12-02 16:36:59
+ * @LastEditTime: 2025-12-11 10:01:57
  * @Description: 
 -->
 <template>
@@ -64,8 +64,9 @@ export default {
   @import "@/assets/css/screen.scss";
   $gap-padding: halfW(8);
   .b2-screen {
-    height: 100vh;
-    width: 100vw;
+    width: calc(100vw - halfW(8) * 2);
+    height: calc(100vh - halfH(8));
+    padding: 0  halfW(8) halfW(8);
     background: var(--page-bg);
     .logo {
       text-align: right;

src/views/hui-jia/b2-screen/index.vue

@@ -187,7 +187,7 @@
     align-items: center;
     gap: halfW(16);
     .item-1 {
-      width: calc(25% - $gap-padding - $gap-padding);
+      width: calc(25% - $gap-padding);
       height: calc(64% - $gap-padding - $gap-padding);
     }
     .middle-wrap {
@@ -217,7 +217,7 @@
     .right-wrap {
       display: flex;
       flex-direction: column;
-      width: calc(25% - $gap-padding - $gap-padding);
+      width: calc(25% - $gap-padding);
       height: calc(64% - $gap-padding);
       gap: calc($gap-padding * 2);
       .total-container {
@@ -232,7 +232,7 @@
       justify-content: space-around;
       gap: halfW(16);
       width: calc(
-        100% - $gap-padding - $gap-padding - $gap-padding - $gap-padding
+        100% - $gap-padding - $gap-padding - $gap-padding
       );
       height: calc(36% - $gap-padding);
       .now-year-container {

src/views/hui-jia/components/card/index.vue

@@ -1,3 +1,10 @@
+<!--
+ * @Author: wjc
+ * @Date: 2025-12-01 17:22:12
+ * @LastEditors: wjc
+ * @LastEditTime: 2025-12-11 09:11:06
+ * @Description: 
+-->
 <template>
     <div class="card">
         <div class="card-header">
@@ -39,13 +46,14 @@ export default {
     width: 100%;
     height: 100%;
     box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.4);
-    border-radius: 5px;
+    border-radius: var(--radius);
     background: linear-gradient(180deg, rgba(14,22,41,1) 0%,rgba(14,22,41,0.6) 100%);
     .card-header{
       color: rgba(185, 227, 244, 1);
       font-size: halfW(16);
       padding:  halfH(4) halfW(10);
       background: var(--title-bg);
+      border-radius: var(--radius);
       .title{
         display: inline-block;
         vertical-align: middle;

src/views/hui-jia/components/hardware.vue

@@ -176,15 +176,17 @@
             },
           },
           grid: {
-            left: "1%",
-            right: "1%",
+            left: "4%",
+            right: "4%",
             top: "5%",
             bottom: "2%",
             containLabel: true,
           },
           xAxis: {
             type: "category",
-            data: this.electricState.monthStatisticsList.map((item) => item.staData),
+            data: this.electricState.monthStatisticsList.map(
+              (item) => item.staData
+            ),
             axisLine: {
               lineStyle: {
                 color: "rgba(160, 179, 214, 0.3)",
@@ -234,7 +236,9 @@
             {
               name: "用电量",
               type: "bar",
-              data: this.electricState.monthStatisticsList.map((item) => item.count),
+              data: this.electricState.monthStatisticsList.map(
+                (item) => item.count
+              ),
               barWidth: "30%",
               itemStyle: {
                 color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [
@@ -284,15 +288,17 @@
             },
           },
           grid: {
-            left: "1%",
-            right: "1%",
+            left: "4%",
+            right: "4%",
             top: "2%",
             bottom: "5%",
             containLabel: true,
           },
           xAxis: {
             type: "category",
-            data: this.waterState.monthStatisticsList.map((item) => item.staData),
+            data: this.waterState.monthStatisticsList.map(
+              (item) => item.staData
+            ),
             axisLine: {
               lineStyle: {
                 color: "rgba(160, 179, 214, 0.3)",
@@ -344,7 +350,9 @@
             {
               name: "用水量",
               type: "bar",
-              data: this.waterState.monthStatisticsList.map((item) => item.count),
+              data: this.waterState.monthStatisticsList.map(
+                (item) => item.count
+              ),
               barWidth: "30%",
               itemStyle: {
                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
@@ -420,7 +428,7 @@
     gap: halfW(20);
     justify-content: space-between;
     border: 1px solid rgba(64, 158, 255, 0.1);
-    border-radius: halfW(6);
+    border-radius: var(--radius);
     padding: halfH(16) halfW(10);
   }
 
@@ -444,13 +452,15 @@
 
   .data-cards {
     flex: 1;
-    display: flex;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: repeat(2, 1fr);
     align-items: center;
     justify-content: space-between;
     flex-wrap: wrap;
     background: var(--title-bg);
     border: 1px solid rgba(64, 158, 255, 0.1);
-    border-radius: halfW(4);
+    border-radius: var(--radius);
   }
 
   .data-card {
@@ -458,11 +468,10 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    border-right: 1px solid rgba(64, 158, 255, 0.3);
     text-align: right;
     padding: halfH(10) halfW(10);
-    &:last-child {
-      border-right: none;
+    &:nth-child(odd) {
+      border-right: 1px solid rgba(64, 158, 255, 0.3);
     }
   }
 

src/views/hui-jia/components/implementary/ing.vue

@@ -104,9 +104,23 @@
 <style lang="scss" scoped>
   @import "@/assets/css/theme.scss";
 
+  :root {
+    ::-webkit-scrollbar {
+      width: 0;
+    }
+
+    ::-webkit-scrollbar-track {
+      width: 0;
+    }
+
+    ::-webkit-scrollbar-thumb {
+      width: 0;
+    }
+  }
+
   .implementing-container {
     background: var(--content-bg);
-    border-radius: halfW(4);
+    border-radius: var(--radius);
     display: flex;
     flex-direction: column;
   }
@@ -116,7 +130,7 @@
     font-size: halfW(14);
     color: var(--title-primary);
     padding: halfH(4) halfW(10);
-    border-radius: halfW(4);
+    border-radius: var(--radius);
     display: flex;
     align-items: center;
   }
@@ -156,7 +170,7 @@
       font-weight: 500;
       width: halfW(80);
       padding: halfH(2) 0px;
-      border-radius: halfW(4);
+      border-radius: var(--radius);
     }
 
     .project-info {

src/views/hui-jia/components/implementary/now-year.vue

@@ -210,14 +210,14 @@
 
   .now-year-container {
     background: var(--content-bg);
-    border-radius: halfW(4);
+    border-radius: var(--radius);
     display: flex;
     flex-direction: column;
   }
 
   .now-year-title {
     font-size: halfW(16);
-    border-radius: halfW(4);
+    border-radius: var(--radius);
     color: var(--title-primary);
     background: var(--title-bg);
     padding: halfH(4) halfW(10);

src/views/hui-jia/components/implementary/total.vue

@@ -6,36 +6,51 @@
     </div>
     <div class="total-grid">
       <div class="total-item">
+        <img src="@/assets/images/jgxx.png" class="title-icon" />
         <div class="total-label">城市总数</div>
         <div class="total-value">{{ data.cities | formatNumber }}</div>
       </div>
       <div class="total-item">
+        <img src="@/assets/images/glgd.png" class="title-icon" />
         <div class="total-label">企业总数</div>
         <div class="total-value">{{ data.customers }}</div>
       </div>
       <div class="total-item">
+        <img src="@/assets/images/ewm.png" class="title-icon" />
         <div class="total-label">合同总数</div>
         <div class="total-value">{{ data.contracts | formatNumber }}</div>
       </div>
       <div class="total-item">
+        <img src="@/assets/images/jytj.png" class="title-icon" />
         <div class="total-label">履约次数</div>
         <div class="total-value">{{ data.perform_times | formatNumber }}</div>
       </div>
       <div class="total-item">
+        <img
+          src="@/assets/images/zhxggd.png"
+          class="title-icon fuwu-title-icon"
+        />
         <div class="total-label">服务时长</div>
         <div class="total-value">{{ data.service_time | formatNumber }}</div>
       </div>
       <div class="total-item">
+        <img src="@/assets/images/gwxx.png" class="title-icon" />
         <div class="total-label">项目总数</div>
         <div class="total-value">{{ data.residences | formatNumber }}</div>
       </div>
       <div class="total-item">
+        <img src="@/assets/images/ryzb.png" class="title-icon" />
         <div class="total-label">签约户数</div>
-        <div class="total-value">{{ data.contracted_households | formatNumber }}</div>
+        <div class="total-value">
+          {{ data.contracted_households | formatNumber }}
+        </div>
       </div>
       <div class="total-item">
+        <img src="@/assets/images/zhnmj.png" class="title-icon" />
         <div class="total-label">实施户数</div>
-        <div class="total-value">{{ data.actual_households | formatNumber }}</div>
+        <div class="total-value">
+          {{ data.actual_households | formatNumber }}
+        </div>
       </div>
     </div>
   </div>
@@ -58,8 +73,7 @@
     computed: {
       ...mapState(["entCode", "communityId"]),
     },
-    methods: {
-    },
+    methods: {},
   }
 </script>
 
@@ -68,7 +82,7 @@
 
   .total-container {
     background: var(--content-bg);
-    border-radius: halfW(4);
+    border-radius: var(--radius);
     position: relative;
     overflow: hidden;
 
@@ -96,6 +110,16 @@
       flex: 1 1 0%;
       background: var(--content-bg);
       text-align: center;
+      .title-icon {
+        width: halfW(24);
+        height: halfW(24);
+        margin-right: 0;
+        margin-bottom: 6px;
+      }
+      .fuwu-title-icon {
+        width: halfW(20);
+        height: halfW(20);
+      }
 
       .total-label {
         font-size: halfW(14);

src/views/hui-jia/components/market.vue

@@ -288,7 +288,7 @@
 
   .market-container {
     background: #0d1629;
-    border-radius: halfW(4);
+    border-radius: var(--radius);
     height: 100%;
     display: flex;
     flex-direction: column;
@@ -296,7 +296,7 @@
   }
 
   .market-title {
-    border-radius: halfW(4);
+    border-radius: var(--radius);
     background: var(--title-bg);
     padding: halfH(4) halfW(10);
     font-size: halfW(16);

src/views/hui-jia/components/resident/index.vue

@@ -283,7 +283,7 @@ export default {
     width: 100%;
     height: calc(45%);
     text-align: center;
-    border-radius: 5px;
+    border-radius: var(--radius);
     background-color: rgba(17, 28, 48, 1);
     border: 1px solid rgba(0, 123, 211, 0.2);
     align-items: center;

src/views/hui-jia/components/smart.vue

@@ -196,13 +196,13 @@
 
   .smart-door {
     background: var(--content-bg);
-    border-radius: halfW(4);
+    border-radius: var(--radius);
     height: 100%;
   }
 
   .module-title {
     display: flex;
-    border-radius: halfW(4);
+    border-radius: var(--radius);
     font-size: halfW(16);
     align-items: center;
     color: var(--title-primary);
@@ -217,7 +217,7 @@
     margin: halfH(20) halfW(10);
     background: var(--title-bg);
     border: 1px solid rgba(64, 158, 255, 0.1);
-    border-radius: halfW(4);
+    border-radius: var(--radius);
   }
 
   .data-card {

src/views/hui-jia/components/work-card.vue

@@ -121,7 +121,7 @@ export default {
 
 .work-card-container {
   background: var(--content-bg);
-  border-radius: halfW(4);
+  border-radius: var(--radius);
   height: 100%;
   width: 100%;
   display: flex;
@@ -130,7 +130,7 @@ export default {
   .title {
     font-size: halfW(16);
     display: flex;
-    border-radius: halfW(4);
+    border-radius: var(--radius);
     align-items: center;
     color: var(--title-primary);
     background: var(--title-bg);
@@ -149,20 +149,21 @@ export default {
 }
 
 .work-card-item {
+  flex: 1 1 0%;
   background: var(--title-bg);
-  border-radius: halfW(4);
+  border-radius: var(--radius);
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   align-items: center;
+  padding: halfW(20);
 }
 
 .card-header {
   display: flex;
   align-items: center;
-  margin-bottom: halfH(10);
-  padding: halfH(4) halfW(10);
   background: var(--title-bg);
+  margin-bottom: halfH(10);
 
   .iconfont {
     font-size: halfH(24);
@@ -181,7 +182,6 @@ export default {
 .card-content {
   display: flex;
   align-items: center;
-  padding: halfH(20) halfW(20);
 
   .card-subtitle {
     font-size: halfW(14);