fix: ab 样式优化

src/assets/css/theme.scss

@@ -16,6 +16,8 @@ $left-width: 220px;
 $gap-padding: halfW(8);
 
 :root {
+  cursor: none !important;
+  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
   --title-bg: #111c31;
   --title-primary: #b9e3f4;
   --title-secondary: #a1a1a1;

src/components/clock.vue

@@ -0,0 +1,107 @@
+<!--
+ * @Author: wjc
+ * @Date: 2024-04-29 17:56:36
+ * @LastEditors: wjc
+ * @LastEditTime: 2025-12-12 15:22:31
+ * @Description: 数字时钟组件（Vue2 纯 JS 版本）
+-->
+<template>
+  <div class="digital-clock">
+    <span class="date">{{ date }}</span>
+    <span class="digit">{{ hours }}</span>
+    <span class="colon">:</span>
+    <span class="digit">{{ minutes }}</span>
+    <span class="colon">:</span>
+    <span class="digit">{{ seconds }}</span>
+  </div>
+</template>
+
+<script>
+  import dayjs from "dayjs"
+
+  export default {
+    name: "Clock",
+    data() {
+      return {
+        hours: "", // 小时（响应式）
+        minutes: "", // 分钟（响应式）
+        seconds: "", // 秒数（响应式）
+        prevTime: 0, // 上一次更新的时间戳
+        myReq: null, // requestAnimationFrame 标识
+      }
+    },
+    computed: {
+      date() {
+        return dayjs().format("YYYY-MM-DD")
+      },
+    },
+    methods: {
+      // 补零方法（数字小于10时前面加0）
+      padZero(value) {
+        return value < 10 ? `0${value}` : value.toString()
+      },
+      // 更新时间核心逻辑
+      updateTime() {
+        const date = new Date()
+        this.hours = this.padZero(date.getHours())
+        this.minutes = this.padZero(date.getMinutes())
+        this.seconds = this.padZero(date.getSeconds())
+      },
+      // 高性能时钟刷新（基于requestAnimationFrame，替代setInterval）
+      updateClock() {
+        const currentTime = performance.now()
+        const deltaTime = currentTime - this.prevTime
+
+        // 每1000ms（1秒）仅更新一次，避免高频无效渲染
+        if (deltaTime >= 1000) {
+          this.updateTime()
+          this.prevTime = currentTime
+        }
+
+        // 循环调用requestAnimationFrame（跟随浏览器帧率）
+        this.myReq = requestAnimationFrame(this.updateClock)
+      },
+    },
+    // Vue2 生命周期钩子
+    beforeMount() {
+      // 初始化时间（组件挂载前先渲染一次）
+      this.updateTime()
+    },
+    mounted() {
+      // 初始化时间戳，启动时钟刷新循环
+      this.prevTime = performance.now()
+      this.updateClock()
+    },
+    beforeDestroy() {
+      // 组件销毁时取消动画帧，避免内存泄漏
+      if (this.myReq) {
+        cancelAnimationFrame(this.myReq)
+      }
+    },
+  }
+</script>
+
+<style scoped lang="scss">
+  @import "@/assets/css/theme.scss";
+
+  .digital-clock {
+    font-weight: 500;
+    color: #818181;
+    font-size: halfW(18);
+    width: max-content;
+    text-align: center;
+    padding: 0 halfW(8);
+    .date {
+      margin-right: halfW(10);
+    }
+    .digit {
+      display: inline-block;
+      width: 1.6em;
+    }
+
+    .colon {
+      display: inline-block;
+      width: 4px;
+    }
+  }
+</style>

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

@@ -2,7 +2,7 @@
  * @Author: wjc
  * @Date: 2025-11-25 10:30:54
  * @LastEditors: wjc
- * @LastEditTime: 2025-12-11 09:13:57
+ * @LastEditTime: 2025-12-12 10:51:14
  * @Description: 
 -->
 <template>

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

@@ -2,12 +2,12 @@
  * @Author: wjc
  * @Date: 2025-11-19 16:09:12
  * @LastEditors: wjc
- * @LastEditTime: 2025-12-11 17:05:21
+ * @LastEditTime: 2025-12-12 09:57:09
  * @Description: 
 -->
 <template>
-  <div class="b2-screen">
-    <div class="b2-screen-content">
+  <div class="a3-screen">
+    <div class="a3-screen-content">
       <div class="left-wrap">
         <Hardware />
       </div>
@@ -48,13 +48,13 @@
   @import "@/assets/css/theme.scss";
   @import "@/assets/css/screen.scss";
   $gap-padding: halfW(8);
-  .b2-screen {
+  .a3-screen {
     width: calc(100vw - halfW(8) * 2);
-    height: calc(100vh - halfH(8));
-    padding: 0 halfW(8) halfW(8) halfW(8);
+    height: calc(100vh - halfH(8) * 2);
+    padding: halfW(8) halfW(8) halfW(8) halfW(8);
     background: var(--page-bg);
   }
-  .b2-screen-content {
+  .a3-screen-content {
     height: 100%;
     width: 100%;
     display: flex;

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

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

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

@@ -2,12 +2,13 @@
  * @Author: wjc
  * @Date: 2025-11-19 16:09:12
  * @LastEditors: wjc
- * @LastEditTime: 2025-12-11 17:08:09
+ * @LastEditTime: 2025-12-12 15:19:48
  * @Description: 
 -->
 <template>
   <div class="b2-screen">
     <div class="logo">
+      <Clock />
       <img src="@/assets/images/hjkj1.png" class="logo-img" />
     </div>
     <div class="b2-screen-content">
@@ -41,6 +42,8 @@
 </template>
 
 <script>
+  import Clock from "@/components/clock.vue"
+
   import Smart from "../components/smart.vue"
   import Hardware from "../components/hardware.vue"
   import WorkCard from "../components/work-card.vue"
@@ -52,6 +55,7 @@
   export default {
     name: "B1Screen",
     components: {
+      Clock,
       Smart,
       Hardware,
       WorkCard,
@@ -73,8 +77,12 @@
     padding: 0 halfW(8) halfW(8);
     background: var(--page-bg);
     .logo {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
       text-align: right;
       padding: halfH(10) 0;
+      margin-right: halfW(-8);
       .logo-img {
         height: halfH(64);
       }
@@ -154,10 +162,11 @@
         width: 100%;
         height: calc(20% - $gap-padding);
         ::v-deep .work-card {
-          padding: halfH(20) halfW(20);
+          padding: halfH(10) halfW(10);
           .work-card-item {
             align-self: stretch;
             justify-content: center;
+            padding: halfH(10) halfW(20);
           }
         }
       }

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

@@ -2,6 +2,7 @@
   <div class="b1-screen">
     <div class="logo">
       <img src="@/assets/images/hjkj2.png" class="logo-img" />
+      <Clock />
     </div>
     <div class="b1-screen-content">
       <div class="item-1">
@@ -29,6 +30,7 @@
 </template>
 
 <script>
+  import Clock from "@/components/clock.vue"
   import implementationTotal from "../components/implementary/total.vue"
   import implementationIng from "../components/implementary/ing.vue"
   import implementationNowYear from "../components/implementary/now-year.vue"
@@ -43,6 +45,7 @@
   export default {
     name: "B1Screen",
     components: {
+      Clock,
       implementationTotal,
       implementationIng,
       implementationNowYear,
@@ -63,7 +66,7 @@
               this_month: 0,
             },
             followup: {
-              // 新增企业
+              // 跟进企业
               last_month: 0,
               this_month: 0,
             },
@@ -171,6 +174,9 @@
     width: 100vw;
     background: var(--page-bg);
     .logo {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
       text-align: left;
       padding: halfH(10) 0;
       .logo-img {
@@ -222,6 +228,15 @@
       gap: calc($gap-padding * 2);
       .total-container {
         height: calc(50%);
+        ::v-deep .total-grid {
+          .total-item {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            align-self: stretch;
+          }
+        }
       }
       .market-container {
         height: calc(50%);

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

@@ -2,7 +2,7 @@
  * @Author: wjc
  * @Date: 2025-12-01 17:22:12
  * @LastEditors: wjc
- * @LastEditTime: 2025-12-11 09:11:06
+ * @LastEditTime: 2025-12-12 15:38:59
  * @Description: 
 -->
 <template>
@@ -13,6 +13,7 @@
               <span class="title">{{ title }}</span>
               <span v-if="subTitle" class="sub-title">（{{subTitle}}）</span>
             </div>
+            <div v-if="unit" class="unit">{{ unit }}</div>
         </div>
         <div class="card-body">
           <slot></slot>
@@ -32,6 +33,10 @@ export default {
       type: String,
       default: ''
     },
+    unit: {
+      type: String,
+      default: ''
+    },
     icon: {
       type: String,
       default: ''
@@ -49,6 +54,9 @@ export default {
     border-radius: var(--radius);
     background: linear-gradient(180deg, rgba(14,22,41,1) 0%,rgba(14,22,41,0.6) 100%);
     .card-header{
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
       color: rgba(185, 227, 244, 1);
       font-size: halfW(16);
       padding:  halfH(4) halfW(10);
@@ -67,6 +75,10 @@ export default {
       .sub-title{
         font-size: halfW(12);
       }
+      .unit {
+        font-size: halfW(12);
+        color: #818181;
+      }
     }
     .card-body{
       padding: halfH(16) halfW(10);

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

@@ -11,7 +11,7 @@
       <div class="device-info">
         <img src="@/assets/images/dblxzhb.png" class="title-icon" />
         <div>
-          <div class="device-count">{{ electricState.deviceCount }}</div>
+          <div class="device-count">{{ electricState.deviceCount | formatNumber }}</div>
           <div class="device-name">智能电表</div>
         </div>
       </div>
@@ -19,28 +19,28 @@
         <div class="data-card">
           <div class="data-label">年度用电</div>
           <div>
-            <div class="data-value">{{ electricState.annualUsage }}</div>
+            <div class="data-value">{{ electricState.annualUsage | formatNumber }}</div>
             <div class="data-unit">kW·h</div>
           </div>
         </div>
         <div class="data-card">
           <div class="data-label">月均用电</div>
           <div>
-            <div class="data-value">{{ electricState.monthlyAvgUsage }}</div>
+            <div class="data-value">{{ electricState.monthlyAvgUsage | formatNumber }}</div>
             <div class="data-unit">kW·h</div>
           </div>
         </div>
         <div class="data-card">
           <div class="data-label">日均用电</div>
           <div>
-            <div class="data-value">{{ electricState.dailyAvgUsage }}</div>
+            <div class="data-value">{{ electricState.dailyAvgUsage | formatNumber }}</div>
             <div class="data-unit">kW·h</div>
           </div>
         </div>
         <div class="data-card">
           <div class="data-label">开关次数</div>
           <div>
-            <div class="data-value">{{ electricState.switchCount }}</div>
+            <div class="data-value">{{ electricState.switchCount | formatNumber }}</div>
             <div class="data-unit">近12个月</div>
           </div>
         </div>
@@ -57,7 +57,7 @@
       <div class="device-info">
         <img src="@/assets/images/zhnmj.png" class="title-icon" />
         <div>
-          <div class="device-count">{{ waterState.deviceCount }}</div>
+          <div class="device-count">{{ waterState.deviceCount | formatNumber }}</div>
           <div class="water-device-name">智能水表</div>
         </div>
       </div>
@@ -65,28 +65,28 @@
         <div class="data-card">
           <div class="data-label">年度用水</div>
           <div>
-            <div class="data-value">{{ waterState.annualUsage }}</div>
+            <div class="data-value">{{ waterState.annualUsage | formatNumber }}</div>
             <div class="water-data-unit">m³</div>
           </div>
         </div>
         <div class="data-card">
           <div class="data-label">月均用水</div>
           <div>
-            <div class="data-value">{{ waterState.monthlyAvgUsage }}</div>
+            <div class="data-value">{{ waterState.monthlyAvgUsage | formatNumber }}</div>
             <div class="water-data-unit">m³</div>
           </div>
         </div>
         <div class="data-card">
           <div class="data-label">日均用水</div>
           <div>
-            <div class="data-value">{{ waterState.dailyAvgUsage }}</div>
+            <div class="data-value">{{ waterState.dailyAvgUsage | formatNumber }}</div>
             <div class="water-data-unit">m³</div>
           </div>
         </div>
         <div class="data-card">
           <div class="data-label">开关次数</div>
           <div>
-            <div class="data-value">{{ waterState.switchCount }}</div>
+            <div class="data-value">{{ waterState.switchCount | formatNumber }}</div>
             <div class="water-data-unit">近12个月</div>
           </div>
         </div>
@@ -189,7 +189,7 @@
             ),
             axisLine: {
               lineStyle: {
-                color: "rgba(160, 179, 214, 0.3)",
+                color: "rgba(160, 179, 214, 0.1)",
                 type: "dashed",
               },
             },
@@ -205,7 +205,7 @@
               show: true,
               // 将坐标轴内的线设置为虚线
               lineStyle: {
-                color: "rgba(160, 179, 214, 0.3)",
+                color: "rgba(160, 179, 214, 0.1)",
                 type: "dashed",
               },
             },
@@ -318,7 +318,7 @@
               show: true,
               // 将坐标轴内的线设置为虚线
               lineStyle: {
-                color: "rgba(160, 179, 214, 0.3)",
+                color: "rgba(160, 179, 214, 0.1)",
                 type: "dashed",
               },
             },
@@ -426,6 +426,7 @@
     display: flex;
     align-items: center;
     gap: halfW(20);
+    width: 25%;
     justify-content: space-between;
     border: 1px solid rgba(64, 158, 255, 0.1);
     border-radius: var(--radius);
@@ -469,7 +470,7 @@
     justify-content: space-between;
     align-items: center;
     text-align: right;
-    padding: halfH(10) halfW(10);
+    padding: halfH(10) halfW(20);
     &:nth-child(odd) {
       border-right: 1px solid rgba(64, 158, 255, 0.3);
     }
@@ -477,7 +478,7 @@
 
   .data-label {
     color: var(--primary);
-    font-size: halfW(16);
+    font-size: halfW(14);
     font-weight: 500;
   }
 

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

@@ -89,7 +89,8 @@
       ...mapState(["entCode", "communityId"]),
       optionScroll() {
         return {
-          step: 0.5,
+          singleHeight: 60,
+          waitTime: 5000
         }
       },
     },

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

@@ -7,50 +7,50 @@
     <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 class="total-label">城市总数</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 class="total-label">企业总数</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 class="total-label">合同总数</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 class="total-label">履约次数</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 class="total-label">服务时长 (天)</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 class="total-label">项目总数</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-label">签约户数</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-label">实施户数</div>
       </div>
     </div>
   </div>
@@ -122,14 +122,14 @@
         width: halfW(20);
         height: halfW(20);
       }
-
+      
       .total-label {
         font-size: halfW(14);
         color: #a0b3d6;
-        margin-bottom: halfH(8);
       }
-
+      
       .total-value {
+        margin: halfH(10) 0;
         font-size: halfW(18);
         font-weight: bold;
         color: #ffffff;

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

@@ -35,9 +35,9 @@
         chartData: {
           categories: [
             "新增户数",
-            "新增项目",
             "新增合同",
-            "新增联系人",
+            "新增项目",
+            "新联系人",
             "跟进企业",
             "新增企业",
           ],
@@ -84,12 +84,52 @@
 
         const lastMonthData = Object.keys(this.data)
           .map((key, index) => {
+            // 新增企业
+            if (key == "customer") {
+              return -42
+            }
+            // 跟进企业
+            if (key == "followup") {
+              return -86
+            }
+            // 新增联系人
+            if (key == "contact") {
+              return -230
+            }
+            // 新增合同
+            if (key == "contract") {
+              return -76
+            }
+            // 新增项目
+            if (key == "residence") {
+              return -197
+            }
             return -this.data[key].last_month
           })
           .reverse()
 
         const thisMonthData = Object.keys(this.data)
           .map((key, index) => {
+            // 新增企业
+            if (key == "customer") {
+              return 19
+            }
+            // 跟进企业
+            if (key == "followup") {
+              return 68
+            }
+            // 新增联系人
+            if (key == "contact") {
+              return 161
+            }
+            // 新增合同
+            if (key == "contract") {
+              return 46
+            }
+            // 新增项目
+            if (key == "residence") {
+              return 150
+            }
             return this.data[key].this_month
           })
           .reverse()
@@ -321,14 +361,16 @@
     width: 100%;
     height: 100%;
     .chart {
-      width: 40%;
+      width: 43%;
       height: 100%;
       background: var(--content-bg);
+      border-radius: var(--radius);
     }
     .chart2 {
-      width: 60%;
+      width: 57%;
       height: 100%;
       background: var(--content-bg);
+      border-radius: var(--radius);
     }
   }
 </style>

src/views/hui-jia/components/online-pay-day/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <Card :title="title" :subTitle="subTitle" :icon="icon" class="online-pay-day">
+    <Card :title="title" :subTitle="subTitle" :icon="icon" unit="单位(%)" class="online-pay-day">
       <div class="info margin-r-20" v-if="showInfo">
         <div class="text">
           <p class="p1">线上缴费</p>
@@ -179,10 +179,9 @@ export default {
           splitLine: {
             show: true,
             lineStyle: {
-              color: '#fff',
-              opacity: 0.3,
-              cap: 'round',
-              type: [5, 10]
+              color: "rgba(160, 179, 214, 0.1)",
+              type: "dashed",
+              width: 1,
             }
           },
           max: function (value) { // x轴左侧留白
@@ -216,10 +215,9 @@ export default {
             splitLine: {
               show: true,
               lineStyle: {
-                color: '#fff',
-                opacity: 0.3,
-                cap: 'round',
-                type: 'dashed',
+                color: "rgba(160, 179, 214, 0.1)",
+                type: "dashed",
+                width: 1,
                 dashOffset: 5
               }
             }

src/views/hui-jia/components/online-pay-week/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <Card :title="title" :subTitle="subTitle" :icon="icon" class="online-pay-week">
+    <Card :title="title" :subTitle="subTitle" :icon="icon" unit="单位(%)" class="online-pay-week">
       <div class="info margin-r-20" v-if="showInfo">
         <div class="title">
           <p class="p1">线上缴费</p>
@@ -178,9 +178,8 @@ export default {
           splitLine: {
             show: true,
             lineStyle: {
-              color: '#fff',
-              opacity: 0.3,
-              cap: 'round',
+              color: "rgba(160, 179, 214, 0.1)",
+              width: 1,
               type: [5, 10]
             }
           },
@@ -215,10 +214,9 @@ export default {
             splitLine: {
               show: true,
               lineStyle: {
-                color: '#fff',
-                opacity: 0.3,
-                cap: 'round',
-                type: 'dashed',
+                color: "rgba(160, 179, 214, 0.1)",
+                type: "dashed",
+                width: 1,
                 dashOffset: 5
               }
             }

src/views/hui-jia/components/online-pay/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <Card :title="title" :subTitle="subTitle" :icon="icon" class="online-pay">
+    <Card :title="title" :subTitle="subTitle" :icon="icon" unit="单位(万元)" class="online-pay">
       <div class="total display-flex" v-if="showTitle">
         <div class="img">
           <img src="./images/icon-total.png" alt="" class="icon">
@@ -138,8 +138,9 @@ export default {
           splitLine: {
             show: true,
             lineStyle: {
-              color: '#fff',
-              opacity: 0.3,
+              color: "rgba(160, 179, 214, 0.1)",
+              type: "dashed",
+              width: 1,
               cap: 'round',
               type: [5, 10]
             }
@@ -175,10 +176,9 @@ export default {
             splitLine: {
               show: true,
               lineStyle: {
-                color: '#fff',
-                opacity: 0.3,
-                cap: 'round',
-                type: 'dashed',
+                color: "rgba(160, 179, 214, 0.1)",
+                type: "dashed",
+                width: 1,
                 dashOffset: 5
               }
             }

src/views/hui-jia/components/online-water/index.vue

@@ -5,8 +5,8 @@
         <img src="./images/icon-total.png" alt="" class="icon">
       </div>
       <div class="info">
-        <p class="title">线上流水总额</p>
         <p class="num">{{ onlineWaterInfo.allSum | formatNumber }}</p>
+        <p class="title">线上流水总额</p>
       </div>
     </div>
     <div class="con-center display-flex">
@@ -16,8 +16,8 @@
             <img src="./images/icon-once.png" alt="" class="icon">
           </div>
           <div class="info flex-1">
-            <p class="title">单笔缴费金额</p>
             <p class="num">{{ onlineWaterInfo.recentAveAmount || 0 }}</p>
+            <p class="title">单笔缴费金额</p>
             <p class="desc">(近12个月平均值)</p>
           </div>
         </div>
@@ -33,8 +33,8 @@
             <img src="./images/icon-month.png" alt="" class="icon">
           </div>
           <div class="info flex-1">
-            <p class="title">月在线缴费次数</p>
             <p class="num">{{ onlineWaterInfo.avgMonPayCnt || 0 }}</p>
+            <p class="title">月在线缴费次数</p>
             <p class="desc">(近12个月平均值)</p>
           </div>
         </div>
@@ -131,7 +131,7 @@ export default {
       }
       .num{
         font-size: halfW(20);
-        margin-top: halfH(10);
+        margin-bottom: halfH(10);
         font-weight: 600;
         color: #9BE3E0;
       }

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

@@ -6,8 +6,8 @@
         </div>
         <div class="num display-flex flex-1">
           <div v-for="item in residentData" :key="item.title" class="resident-item flex-1">
-            <div class="title">{{ item.title }}</div>
             <div class="value">{{ item.value | formatNumber }}</div>
+            <div class="title">{{ item.title }}</div>
           </div>
         </div>
       </div>
@@ -16,8 +16,8 @@
           <div class="icon margin-t-30">
             <img :src="item.icon" alt="" class="img">
           </div>
-          <div class="title">{{ item.title }}</div>
           <div class="value">{{ item.value | formatNumber }}</div>
+          <div class="title">{{ item.title }}</div>
         </div>
       </div>
     </Card>
@@ -272,11 +272,11 @@ export default {
     .title{
       font-size: halfW(16);
       color: #82D1F6;
+      margin-top: halfH(10);
     }
     .value{
       font-size: halfW(20);
       color: #FFFFFF;
-      margin-top: halfH(10);
     }
   }
   .operate{
@@ -298,11 +298,11 @@ export default {
       height: halfW(40);
     }
     .title{
-      font-size: halfW(20);
+      font-size: halfW(16);
       color: #82D1F6;
-      margin: halfH(20) 0;
     }
     .value{
+      margin: halfH(20) 0;
       font-size: halfW(20);
       color: #FFFFFF;
     }

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

@@ -9,17 +9,17 @@
     <!-- 数据卡片 -->
     <div class="data-cards">
       <div class="data-card">
-        <div class="data-value">{{ state.count }}</div>
+        <div class="data-value">{{ state.count | formatNumber }}</div>
         <div class="data-label">门禁设备</div>
       </div>
 
       <div class="data-card">
-        <div class="data-value">{{ state.accessControlProjectCount }}</div>
+        <div class="data-value">{{ state.accessControlProjectCount | formatNumber }}</div>
         <div class="data-label">开通项目</div>
       </div>
 
       <div class="data-card">
-        <div class="data-value">{{ state.openCount }}</div>
+        <div class="data-value">{{ state.openCount | formatNumber}}</div>
         <div class="data-label">出入次数</div>
       </div>
     </div>
@@ -106,7 +106,7 @@
             left: "3%",
             right: "4%",
             bottom: "10%",
-            top: "20%",
+            top: "34%",
             containLabel: true,
           },
           xAxis: {
@@ -128,7 +128,7 @@
               show: true,
               // 将坐标轴内的线设置为虚线
               lineStyle: {
-                color: "rgba(160, 179, 214, 0.3)",
+                color: "rgba(160, 179, 214, 0.1)",
                 type: "dashed",
               },
             },
@@ -148,7 +148,7 @@
             splitLine: {
               // 将坐标轴内的线设置为虚线
               lineStyle: {
-                color: "rgba(160, 179, 214, 0.3)",
+                color: "rgba(160, 179, 214, 0.1)",
                 type: "dashed",
               },
             },

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

@@ -5,8 +5,8 @@
           <div class="icon">
             <img :src="item.icon" alt="" class="img">
           </div>
-          <div class="text">{{ item.title }}</div>
           <div class="value">{{ item.value | formatNumber }}</div>
+          <div class="text">{{ item.title }}</div>
         </div>
       </div>
     </Card>
@@ -113,11 +113,11 @@ export default {
   .text{
     font-size: halfW(16);
     color: #9BDAFF;
-    margin: halfH(16) 0;
   }
   .value{
     font-size: halfW(20);
     color: #fff;
+    margin: halfH(16) 0;
   }
 }
 

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

@@ -11,10 +11,10 @@
           <span class="card-title">数电票业务</span>
         </div>
         <div class="card-content">
-          <div class="card-subtitle">已开发票数</div>
           <div class="card-value">
             {{ formatNumber(state.issuedInvoiceCount) }}
           </div>
+          <div class="card-subtitle">已开发票数</div>
         </div>
       </div>
       <div class="work-card-item">
@@ -23,10 +23,10 @@
           <span class="card-title">道闸系统</span>
         </div>
         <div class="card-content">
-          <div class="card-subtitle">设备数量</div>
           <div class="card-value">
             {{ formatNumber(state.gateDeviceCount) }}
           </div>
+          <div class="card-subtitle">设备数量</div>
         </div>
       </div>
       <div class="work-card-item">
@@ -35,8 +35,8 @@
           <span class="card-title">智慧二维码</span>
         </div>
         <div class="card-content">
-          <div class="card-subtitle">配置数量</div>
           <div class="card-value">{{ formatNumber(state.qrCount) }}</div>
+          <div class="card-subtitle">配置数量</div>
         </div>
       </div>
       <div class="work-card-item">
@@ -45,8 +45,8 @@
           <span class="card-title">短信业务</span>
         </div>
         <div class="card-content">
-          <div class="card-subtitle">销售数量</div>
           <div class="card-value">{{ formatNumber(state.smsSalesQty) }}</div>
+          <div class="card-subtitle">销售数量</div>
         </div>
       </div>
       <div class="work-card-item">
@@ -55,10 +55,10 @@
           <span class="card-title">房屋租售</span>
         </div>
         <div class="card-content">
-          <div class="card-subtitle">发布资产数</div>
           <div class="card-value">
             {{ formatNumber(state.rentalPublishCount) }}
           </div>
+          <div class="card-subtitle">发布资产数</div>
         </div>
       </div>
       <div class="work-card-item">
@@ -67,10 +67,10 @@
           <span class="card-title">业委会</span>
         </div>
         <div class="card-content">
-          <div class="card-subtitle">开通数量</div>
           <div class="card-value">
             {{ formatNumber(state.ownerCommitteeOpenCount) }}
           </div>
+          <div class="card-subtitle">开通数量</div>
         </div>
       </div>
     </div>
@@ -161,27 +161,25 @@ export default {
 
 .card-header {
   display: flex;
+  flex-direction: column;
   align-items: center;
   background: var(--title-bg);
-  margin-bottom: halfH(10);
-
-  .iconfont {
-    font-size: halfH(24);
-    margin-right: halfW(10);
-    // 根据不同图标使用不同颜色
-    color: var(--primary-color, #409eff);
+  margin-bottom: halfH(20);
+  .title-icon {
+    margin-right: 0;
   }
-
   .card-title {
-    font-size: halfW(16);
+    font-size: halfW(14);
     font-weight: 500;
     color: var(--title-primary);
+    margin-top: halfH(10);
   }
 }
 
 .card-content {
   display: flex;
   align-items: center;
+  flex-direction: column;
 
   .card-subtitle {
     font-size: halfW(14);
@@ -189,11 +187,11 @@ export default {
   }
 
   .card-value {
-    margin-left: halfW(12);
     font-size: halfW(20);
     font-weight: 500;
     color: #fff;
     letter-spacing: 1px;
+    margin-bottom: halfH(10);
   }
 }
 </style>