wip: b1/b2 屏幕视频

src/assets/css/theme.scss

@@ -22,7 +22,7 @@ $left-width: 220px;
   --primary: #007bd3;
 }
 .title-icon {
-  width: 28px;
-  height: 28px;
-  margin-right: 8px;
+  width: halfW(28);
+  height: halfW(28);
+  margin-right: halfW(8);
 }

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

@@ -58,7 +58,7 @@
         <img src="@/assets/images/zhnmj.png" class="title-icon" />
         <div>
           <div class="device-count">8921</div>
-          <div class="device-name">智能水表</div>
+          <div class="water-device-name">智能水表</div>
         </div>
       </div>
       <div class="data-cards">
@@ -66,28 +66,28 @@
           <div class="data-label">年度用水</div>
           <div>
             <div class="data-value">89321</div>
-            <div class="data-unit">m³</div>
+            <div class="water-data-unit">m³</div>
           </div>
         </div>
         <div class="data-card">
           <div class="data-label">月均用水</div>
           <div>
             <div class="data-value">9212</div>
-            <div class="data-unit">m³</div>
+            <div class="water-data-unit">m³</div>
           </div>
         </div>
         <div class="data-card">
           <div class="data-label">日均用水</div>
           <div>
             <div class="data-value">921</div>
-            <div class="data-unit">m³</div>
+            <div class="water-data-unit">m³</div>
           </div>
         </div>
         <div class="data-card">
           <div class="data-label">开关次数</div>
           <div>
             <div class="data-value">887</div>
-            <div class="data-unit">近12个月</div>
+            <div class="water-data-unit">近12个月</div>
           </div>
         </div>
       </div>
@@ -402,7 +402,7 @@
     justify-content: space-between;
     border: 1px solid rgba(64, 158, 255, 0.1);
     border-radius: halfW(6);
-    padding: halfH(16) halfW(16);
+    padding: halfH(16) halfW(10);
   }
 
   .device-name {
@@ -410,6 +410,11 @@
     font-size: halfW(14);
     font-weight: 500;
   }
+  .water-device-name {
+    color: #3ab3e3;
+    font-size: halfW(14);
+    font-weight: 500;
+  }
 
   .device-count {
     color: #fff;
@@ -436,7 +441,7 @@
     align-items: center;
     border-right: 1px solid rgba(64, 158, 255, 0.3);
     text-align: right;
-    padding: halfH(10) halfW(20);
+    padding: halfH(10) halfW(10);
     &:last-child {
       border-right: none;
     }
@@ -459,6 +464,10 @@
     color: #fea373;
     font-size: halfW(14);
   }
+  .water-data-unit {
+    color: #3ab3e3;
+    font-size: halfW(14);
+  }
 
   /* 修改为两个图表容器 */
   .charts-container {

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

@@ -184,18 +184,18 @@
 
   .implementing-container {
     background: var(--content-bg);
-    border-radius: 4px;
+    border-radius: halfW(4);
     display: flex;
     flex-direction: column;
   }
 
   .implementing-title {
     background: var(--title-bg);
-    font-size: 18px;
+    font-size: halfW(18);
     font-weight: 500;
     color: var(--title-primary);
-    padding: 4px 10px;
-    border-radius: 4px;
+    padding: halfH(4) halfW(10);
+    border-radius: halfW(4);
     display: flex;
     align-items: center;
   }
@@ -203,8 +203,8 @@
   .implementing-list {
     flex: 1;
     overflow-y: auto;
-    padding: 0px 10px;
-    height: calc(100% - 36px);
+    padding: 0px halfW(10);
+    height: calc(100% - halfH(36));
   }
 
   .implementing-item {
@@ -223,37 +223,37 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    gap: 20px;
+    gap: halfW(16);
     .item-date {
       color: var(--title-secondary);
-      font-size: 14px;
-      margin-right: 16px;
+      font-size: halfW(14);
+      margin-right: halfW(16);
     }
 
     .item-city {
       color: var(--title-primary);
-      font-size: 14px;
+      font-size: halfW(14);
       font-weight: 500;
-      padding: 2px 8px;
-      border-radius: 4px;
+      padding: halfH(2) halfW(8);
+      border-radius: halfW(4);
     }
 
     .project-info {
       flex: 1;
-      min-width: 200px;
-      margin-right: 20px;
+      min-width: halfW(200);
+      margin-right: halfW(20);
 
       .project-name {
         flex: 0 0 1;
         color: var(--title-primary);
-        font-size: 14px;
-        margin-bottom: 4px;
+        font-size: halfW(14);
+        margin-bottom: halfH(4);
         font-weight: 400;
       }
 
       .company-name {
         color: var(--title-secondary);
-        font-size: 14px;
+        font-size: halfW(14);
       }
     }
 
@@ -261,7 +261,7 @@
       display: flex;
       align-items: center;
       flex-wrap: wrap;
-      gap: 20px;
+      gap: halfW(20);
     }
 
     .stat-item {
@@ -274,36 +274,36 @@
       }
       .stat-value {
         color: #fff;
-        font-size: 16px;
+        font-size: halfW(16);
         font-weight: 500;
-        margin-right: 4px;
+        margin-right: halfW(4);
       }
 
       .stat-label {
         color: #fff;
-        font-size: 14px;
+        font-size: halfW(14);
       }
 
       .progress-wrapper {
         display: flex;
         align-items: center;
-        gap: 8px;
+        gap: halfW(8);
         .progress-text {
           color: #40d9ac;
-          font-size: 14px;
+          font-size: halfW(14);
           font-weight: 500;
-          min-width: 35px;
+          min-width: halfW(35);
         }
       }
 
       .service-content {
         color: #ffffff;
-        font-size: 14px;
+        font-size: halfW(14);
       }
 
       .period {
         color: #a0b3d6;
-        font-size: 14px;
+        font-size: halfW(14);
       }
     }
     .service-item {

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

@@ -1,7 +1,7 @@
 <template>
   <div class="now-year-container">
     <div class="now-year-title">
-      <img src="@/assets/images/shb.png" class="title-icon" />
+      <img src="@/assets/images/qst.png" class="title-icon" />
       实施服务（今年数据）
     </div>
     <div id="nowYearChart" class="chart"></div>
@@ -236,18 +236,18 @@
 
   .now-year-container {
     background: var(--content-bg);
-    border-radius: 4px;
+    border-radius: halfW(4);
     display: flex;
     flex-direction: column;
   }
 
   .now-year-title {
-    font-size: 18px;
+    font-size: halfW(18);
     font-weight: 500;
-    border-radius: 4px;
+    border-radius: halfW(4);
     color: var(--title-primary);
     background: var(--title-bg);
-    padding: 4px 10px;
+    padding: halfH(4) halfW(10);
     display: flex;
     align-items: center;
   }

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

@@ -120,28 +120,28 @@
 
   .total-container {
     background: var(--content-bg);
-    border-radius: 4px;
+    border-radius: halfW(4);
     position: relative;
     overflow: hidden;
 
     .total-title {
-      padding:  4px 10px;
+      padding:  halfH(4) halfW(10);
       display: flex;
       align-items: center;
-      font-size: 18px;
+      font-size: halfW(18);
       font-weight: 500;
       color: var(--title-primary);
       background: var(--title-bg);
-      margin-bottom: 20px;
+      margin-bottom: halfH(20);
     }
 
     .total-grid {
-      padding: 10px 10px;
+      padding: halfH(10) halfW(10);
       display: grid;
       grid-template-columns: repeat(2, 1fr);
       grid-template-rows: repeat(4, 1fr);
-      gap: 16px;
-      height: calc(100% - 84px);
+      gap: halfH(16);
+      height: calc(100% - halfH(84));
       align-items: center;
     }
 
@@ -151,13 +151,13 @@
       text-align: center;
 
       .total-label {
-        font-size: 14px;
+        font-size: halfW(14);
         color: #a0b3d6;
-        margin-bottom: 8px;
+        margin-bottom: halfH(8);
       }
 
       .total-value {
-        font-size: 28px;
+        font-size: halfW(28);
         font-weight: bold;
         color: #ffffff;
       }

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

@@ -256,7 +256,7 @@
 
   .market-container {
     background: #0d1629;
-    border-radius: 4px;
+    border-radius: halfW(4);
     height: 100%;
     display: flex;
     flex-direction: column;
@@ -264,10 +264,10 @@
   }
 
   .market-title {
-    border-radius: 4px;
+    border-radius: halfW(4);
     background: var(--title-bg);
-    padding: 4px 10px;
-    font-size: 18px;
+    padding: halfH(4) halfW(10);
+    font-size: halfW(18);
     font-weight: 500;
     color: var(--title-primary);
     display: flex;
@@ -277,8 +277,8 @@
     display: flex;
     justify-content: space-around;
     align-items: center;
-    padding: 10px 20px;
-    font-size: 14px;
+    padding: halfH(10) halfW(20);
+    font-size: halfW(14);
     font-weight: 500;
     color: #fff;
     border-bottom: 1px solid rgba(64, 158, 255, 0.2);

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

@@ -9,27 +9,18 @@
     <!-- 数据卡片 -->
     <div class="data-cards">
       <div class="data-card">
-        <div class="data-info">
-          <i class="iconfont icon-door"></i>
-          <div class="data-label">门禁设备</div>
-        </div>
         <div class="data-value">{{ doorDevices }}</div>
+        <div class="data-label">门禁设备</div>
       </div>
 
       <div class="data-card">
-        <div class="data-info">
-          <i class="iconfont icon-project"></i>
-          <div class="data-label">开通项目</div>
-        </div>
         <div class="data-value">{{ activeProjects }}</div>
+        <div class="data-label">开通项目</div>
       </div>
 
       <div class="data-card">
-        <div class="data-info">
-          <i class="iconfont icon-access"></i>
-          <div class="data-label">出入次数</div>
-        </div>
         <div class="data-value">{{ accessTimes }}</div>
+        <div class="data-label">出入次数</div>
       </div>
     </div>
 
@@ -192,35 +183,37 @@
 
   .smart-door {
     background: var(--content-bg);
-    border-radius: 4px;
+    border-radius: halfW(4);
     height: 100%;
   }
 
   .module-title {
     display: flex;
-    border-radius: 4px;
+    border-radius: halfW(4);
     align-items: center;
     color: var(--title-primary);
     background: var(--title-bg);
-    padding: 4px 10px;
+    padding: halfH(4) halfW(10);
   }
 
   .data-cards {
     display: flex;
-    gap: 16px;
+    gap: halfW(12);
     flex-wrap: nowrap;
-    margin: 20px 10px;
+    margin: halfH(20) halfW(10);
     background: var(--title-bg);
     border: 1px solid rgba(64, 158, 255, 0.1);
-    border-radius: 4px;
+    border-radius: halfW(4);
   }
 
   .data-card {
     flex: 1;
-    padding: 6px 10px;
+    padding: halfH(10) halfW(6);
     display: flex;
+    flex-direction: column;
     justify-content: space-between;
     align-items: center;
+    gap: halfW(10);
     &:nth-child(1) {
       border-right: 1px solid rgba(64, 158, 255, 0.1);
     }
@@ -228,34 +221,16 @@
       border-right: 1px solid rgba(64, 158, 255, 0.1);
     }
 
-    .iconfont {
-      width: 24px;
-      height: 24px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      background: linear-gradient(135deg, #2196f3 0%, #64b5f6 100%);
-      border-radius: 6px;
-      font-size: 20px;
-      color: #ffffff;
-    }
-
-    .data-info {
-      display: flex;
-      gap: 12px;
-      align-items: center;
-    }
-
     .data-label {
-      font-size: 14px;
+      font-weight: 500;
+      font-size: halfW(14);
       color: var(--primary);
-      margin-bottom: 4px;
     }
 
     .data-value {
-      font-size: 24px;
-      font-weight: 600;
-      color: var(--title-primary, #ffffff);
+      font-size: halfW(18);
+      font-weight: 500;
+      color: #fff;
     }
   }
 
@@ -263,22 +238,21 @@
     flex: 1;
     display: flex;
     flex-direction: column;
-    padding: 10px;
-    height: calc(100% - 200px);
+    padding: halfH(10);
+    height: calc(100% - halfH(200));
   }
 
   .chart-title {
     position: absolute;
-    font-size: 14px;
+    font-size: halfW(14);
     font-weight: 500;
     color: #fff;
-    margin-top: 10px;
+    margin-top: halfH(10);
   }
 
   .traffic-chart {
     flex: 1;
     width: 100%;
-    // height: 100%;
-    min-height: 250px;
+    // min-height: halfH(250);
   }
 </style>

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

@@ -7,7 +7,7 @@
     <div class="work-card">
       <div class="work-card-item" v-for="item in dataList" :key="item.title">
         <div class="card-header">
-          <img src="@/assets/images/fwzj.png" class="title-icon" />
+          <img :src="item.icon" class="title-icon" />
           <span class="card-title">{{ item.title }}</span>
         </div>
         <div class="card-content">
@@ -20,6 +20,13 @@
 </template>
 
 <script>
+  import ewm from "@/assets/images/ewm.png"
+  import ryzb from "@/assets/images/ryzb.png"
+  import gwxx from "@/assets/images/gwxx.png"
+  import jgxx from "@/assets/images/jgxx.png"
+  import glgd from "@/assets/images/glgd.png"
+  import zhxggd from "@/assets/images/zhxggd.png"
+
   export default {
     name: "WorkCard",
     props: {
@@ -44,31 +51,37 @@
             title: "数电票业务",
             subtitle: "已开发票数",
             value: 345345,
+            icon: jgxx,
           },
           {
             title: "道闸系统",
             subtitle: "设备数量",
             value: 453,
+            icon: glgd,
           },
           {
             title: "智慧二维码",
             subtitle: "配置数量",
             value: 45,
+            icon: ewm,
           },
           {
             title: "短信业务",
             subtitle: "销售数量",
             value: 3456,
+            icon: zhxggd,
           },
           {
             title: "房屋租售",
             subtitle: "发布资产数",
             value: 887,
+            icon: gwxx,
           },
           {
             title: "业委会",
             subtitle: "开通数量",
             value: 34,
+            icon: ryzb,
           },
         ],
       }
@@ -90,32 +103,32 @@
   @import "@/assets/css/theme.scss";
   .work-card-container {
     background: var(--content-bg);
-    border-radius: 4px;
+    border-radius: halfW(4);
     height: 100%;
     width: 100%;
     display: flex;
     flex-direction: column;
     .title {
       display: flex;
-      border-radius: 4px;
+      border-radius: halfW(4);
       align-items: center;
       color: var(--title-primary);
       background: var(--title-bg);
-      padding: 4px 10px;
+      padding: halfH(4) halfW(10);
     }
   }
   .work-card {
     flex: 1 1 0%;
-    padding: 0px 20px;
+    padding: 0px halfW(20);
     display: flex;
     align-items: center;
     justify-content: space-between;
-    gap: 10px;
+    gap: halfW(10);
   }
 
   .work-card-item {
     background: var(--title-bg);
-    border-radius: 4px;
+    border-radius: halfW(4);
     display: flex;
     flex-direction: column;
     justify-content: space-between;
@@ -124,19 +137,19 @@
   .card-header {
     display: flex;
     align-items: center;
-    margin-bottom: 16px;
-    padding: 4px 10px;
+    margin-bottom: halfH(10);
+    padding: halfH(4) halfW(10);
     background: var(--title-bg);
 
     .iconfont {
-      font-size: 24px;
-      margin-right: 10px;
+      font-size: halfH(24);
+      margin-right: halfW(10);
       // 根据不同图标使用不同颜色
       color: var(--primary-color, #409eff);
     }
 
     .card-title {
-      font-size: 16px;
+      font-size: halfW(16);
       font-weight: 500;
       color: var(--title-primary);
     }
@@ -144,16 +157,16 @@
 
   .card-content {
     display: flex;
-    align-items: flex-end;
-    padding: 20px;
+    align-items: center;
+    padding: halfH(20) halfW(20);
     .card-subtitle {
-      font-size: 14px;
+      font-size: halfW(14);
       color: #82d1f6;
     }
 
     .card-value {
-      margin-left: 12px;
-      font-size: 18px;
+      margin-left: halfW(12);
+      font-size: halfW(18);
       font-weight: 600;
       color: #fff;
       letter-spacing: 1px;