package.json

@@ -23,7 +23,7 @@
     "vue-count-to": "^1.0.13",
     "vue-router": "^3.0.3",
     "vue-seamless-scroll": "^1.1.17",
-    "vue-tianditu": "2.7.6",
+    "vue-tianditu": "^2.7.6",
     "vuex": "^3.0.1"
   },
   "devDependencies": {

src/assets/css/mixin.scss

@@ -60,125 +60,3 @@
 @mixin boxShadow() {
   box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1);
 }
-
-// 天地图
-@mixin tiandituPointer {
-  .tdt-map-container {
-    .tdt-label {
-      background: transparent;
-      box-shadow: none;
-      border: none;
-      color: #2f61a6ff;
-      font-size: 12px;
-      padding: 0;
-      margin-left: 4px;
-      font-weight: 600;
-    }
-  }
-}
-
-@mixin initTianditu() {
-  .tdt-map-container {
-    width: 100%;
-    height: 100%;
-    .tdt-infowindow-content-wrapper {
-      padding: 0;
-      border-radius: 4px;
-      width: 100%;
-      height: 100%;
-      background: transparent;
-      .tdt-infowindow-content {
-        margin: 0;
-        padding: 2px;
-        width: 100% !important;
-        height: 100%;
-        .map-mark-container {
-          display: flex;
-          justify-content: space-between;
-          width: halfW(400);
-          height: halfH(90);
-          min-height: 80px;
-          border-radius: 6px;
-          // position: absolute;
-          overflow: hidden;
-          cursor: pointer;
-        
-          &.blue {
-            background: rgba(50, 129, 219, 0.6);
-            border: 1px solid rgba(50, 136, 233, 1);
-          }
-        
-          &.yellow {
-            background: rgba(230, 188, 116, 0.6);
-            border: 1px solid rgba(233, 175, 50, 1);
-          }
-        
-          &.green {
-            background: rgba(45, 158, 12, 0.6);
-            border: 1px solid rgba(45, 158, 12, 1);
-          }
-        
-          .left-side {
-            height: 100%;
-            width: halfW(76);
-            position: relative;
-        
-            &.blue {
-              background: #3281db;
-            }
-        
-            &.yellow {
-              background: #e4a537;
-            }
-        
-            &.green {
-              background: #2d9e0c;
-            }
-        
-            img {
-              position: absolute;
-              top: 50%;
-              left: 50%;
-              transform: translate(-50%, -50%);
-            }
-          }
-        
-          .right-side {
-            flex: 1;
-            padding: halfH(20) halfW(20);
-            .name-info {
-              display: flex;
-              justify-content: space-between;
-              align-items: flex-start;
-            }
-        
-            &-name {
-              width: 90%;
-              font-size: 18px;
-              font-weight: bold;
-              color: rgba(235, 244, 255, 1);
-            }
-        
-            &-local {
-              font-size: 16px;
-              font-weight: 400;
-              color: rgba(235, 244, 255, 1);
-              margin-top: halfH(10);
-            }
-        
-            &-time {
-              width: 10%;
-              text-align: right;
-              font-size: 14px;
-              font-weight: 400;
-              color: rgba(235, 244, 255, 1);
-            }
-          }
-        }
-      }
-    }
-    .tdt-infowindow-tip-container {
-      display: none;
-    }
-  }
-}

src/assets/css/screen.scss

@@ -1,18 +1,25 @@
 @import "./function.scss";
+@import "@/assets/css/theme.scss";
+
+// $gap-padding: halfW(8);
+$title-hd: halfH(109);
 .display-flex{
     display: flex;
 }
 .flex-1{
     flex: 1;
 }
-.margin-l-30{
-    margin-left: halfW(30);
+.margin-tg-20{
+    margin: halfH(20) 0;
 }
-.margin-r-30{
-    margin-right: halfW(30);
-}
-.margin-t-30{
-    margin-top: halfH(30);
+// .margin-l-30{
+//     margin-left: halfW(30);
+// }
+// .margin-r-30{
+//     margin-right: halfW(30);
+// }
+.margin-t-20{
+    margin-top: halfH(20);
 }
 .margin-r-20{
     margin-right: halfW(20);
@@ -24,18 +31,39 @@
     border: 1px solid rgba(0, 123, 211, 0.2);
     border-radius: halfW(5);
 }
-.map-con{
+.w-full{
     width: 100%;
-    height: halfH(838);
 }
+// .map-con{
+//     width: 100%;
+//     height: halfH(838);
+// }
 .screen{
-    width: 100%;
-    height: 100%;
-    background: #070D19;
+    width: 100vw;
+    height: 100vh;
+    background: var(--page-bg);
     .screen-content{
-       margin: 0 halfW(30);
+      //  margin: 0 halfW(30);
     }
 }
+ .user .card-body{
+    display: flex;
+    align-items: center;
+  }
+  .community-type .card-body, .resident .card-body{
+    display: flex;
+    align-items: center;
+    align-content: end;
+    flex-wrap: wrap;
+    gap: halfW(50);
+  }
+  .b1-community-type.community-type .card-body, .b1-resident.resident .card-body{
+    display: flex;
+    align-items: center;
+    align-content: center;
+    flex-wrap: wrap;
+    margin-top: 0;
+  }
 .tdt-map-container {
     .tdt-label {
       background: transparent;

src/assets/css/theme.scss

@@ -14,6 +14,8 @@ $divider-color: #f1f1f1;
 // 菜单宽度
 $left-width: 220px;
 
+$gap-padding: halfW(8);
+
 :root {
   --title-bg: #111c31;
   --title-primary: #b9e3f4;

src/route/index.js

@@ -7,7 +7,7 @@
  */
 import Vue from 'vue'
 import Router from 'vue-router'
-import _import from './_import'
+// import _import from './_import'
 import whiteList from './white-list'
 import { filtersPermisList } from './permis-list'
 import store from '@/store'
@@ -18,24 +18,6 @@ const router = new Router({
   // mode: 'history',
   base: '/screen/',
   routes: [
-    {
-      path: '/a1-screen',
-      component: _import('a1-screen'),
-      meta: {
-        title: 'a1屏',
-        hideInMenu: false,
-        icon: ''
-      }
-    },
-    {
-      path: '/a2-screen',
-      component: _import('a2-screen'),
-      meta: {
-        title: 'a2屏',
-        hideInMenu: false,
-        icon: ''
-      }
-    },
     ...whiteList
   ]
 })

src/route/white-list.js

@@ -5,7 +5,7 @@
  * @LastEditTime: 2025-11-19 16:16:33
  * @Description: 白名单菜单
  */
-import _import from "./_import"
+import _import from './_import'
 /**
  * title 菜单名称
  * hideInMenu 是否隐藏菜单，默认显示
@@ -14,77 +14,93 @@ import _import from "./_import"
 
 export default [
   {
-    path: "",
-    redirect: "login",
+    path: '',
+    redirect: 'login'
   },
   {
-    path: "/",
-    redirect: "login",
+    path: '/',
+    redirect: 'login'
   },
   {
-    path: "/index",
-    component: _import("index"),
+    path: '/index',
+    component: _import('index'),
     meta: {
-      title: "首页",
+      title: '首页',
       hideInMenu: false,
-      icon: "",
-    },
+      icon: ''
+    }
   },
   {
-    path: "/total-sum",
-    component: _import("total-sum"),
+    path: '/total-sum',
+    component: _import('total-sum'),
     meta: {
-      title: "总金额统计",
+      title: '总金额统计',
       hideInMenu: false,
-      icon: "",
-    },
+      icon: ''
+    }
   },
   {
-    path: "/hui-jia",
+    path: '/hui-jia',
     component: () => import('@/components/main/index.vue'),
     meta: {
-      title: "绘家科技",
-      hideInMenu: false,
+      title: '绘家科技',
+      hideInMenu: false
     },
     children: [
       {
-        path: "b1",
-        component: () => import("@/views/hui-jia/b1-screen/index.vue"),
+        path: 'b1',
+        component: () => import('@/views/hui-jia/b1-screen/index.vue'),
+        meta: {
+          title: '绘家科技',
+          hideInMenu: false
+        }
+      },
+      {
+        path: 'b2',
+        component: () => import('@/views/hui-jia/b2-screen/index.vue'),
         meta: {
-          title: "绘家科技",
-          hideInMenu: false,
-        },
+          title: '绘家科技',
+          hideInMenu: false
+        }
       },
       {
-        path: "b2",
-        component: () => import("@/views/hui-jia/b2-screen/index.vue"),
+        path: 'a1',
+        component: () => import('@/views/hui-jia/a1-screen/index.vue'),
         meta: {
-          title: "绘家科技",
-          hideInMenu: false,
-        },
+          title: '绘家科技',
+          hideInMenu: false
+        }
       },
-    ],
+      {
+        path: 'a2',
+        component: () => import('@/views/hui-jia/a2-screen/index.vue'),
+        meta: {
+          title: '绘家科技',
+          hideInMenu: false
+        }
+      }
+    ]
   },
   {
-    path: "/login",
-    component: _import("login"),
+    path: '/login',
+    component: _import('login'),
     meta: {
-      title: "登录",
+      title: '登录',
       hideInMenu: false,
-      icon: "",
-    },
+      icon: ''
+    }
   },
   {
-    path: "/no-login",
-    component: _import("no-login"),
+    path: '/no-login',
+    component: _import('no-login'),
     meta: {
-      title: "没有登录权限",
+      title: '没有登录权限',
       hideInMenu: false,
-      icon: "",
-    },
+      icon: ''
+    }
   },
   {
-    path: "*",
-    component: _import("not-found"),
-  },
+    path: '*',
+    component: _import('not-found')
+  }
 ]

src/views/a1-screen/index.vue

@@ -1,40 +0,0 @@
-<template>
-    <div class="screen">
-      <Title />
-      <div class="screen-content">
-        <div class="display-flex">
-          <OnlineWater class="online-water" />
-          <OnlinePay class="margin-l-30 flex-1" />
-        </div>
-        <div class="display-flex margin-t-30">
-          <OnlinePayWeek class="flex-1" />
-          <OnlinePayDay class="flex-1 margin-l-30" />
-        </div>
-      </div>
-    </div>
-</template>
-<script>
-import Title from '@/views/components/title'
-import OnlineWater from '../components/online-water'
-import OnlinePay from '../components/online-pay'
-import OnlinePayWeek from '../components/online-pay-week'
-import OnlinePayDay from '../components/online-pay-day'
-
-export default {
-  name: 'A1Screen',
-  components: {
-    Title,
-    OnlineWater,
-    OnlinePay,
-    OnlinePayWeek,
-    OnlinePayDay
-  }
-}
-</script>
-<style lang="scss">
-@import '@/assets/css/function.scss';
-@import '@/assets/css/screen.scss';
-.online-water.card{
-  width: halfW(690);
-}
-</style>

src/views/a2-screen/index.vue

@@ -1,45 +0,0 @@
-<template>
-  <div class="screen">
-    <Title />
-    <div class="screen-content display-flex">
-       <div class="screen-l margin-r-30">
-        <CommunityMap class="community-map" />
-       </div>
-       <div class="screen-r flex-1">
-          <User />
-          <div class="display-flex margin-t-30">
-            <Resident class="margin-r-30"/>
-            <CommunityType />
-          </div>
-       </div>
-    </div>
-  </div>
-</template>
-<script>
-import Title from '@/views/components/title'
-import CommunityType from '@/views/components/community-type'
-import Resident from '@/views/components/resident'
-import User from '@/views/components/user'
-import CommunityMap from '@/views/components/community-map'
-
-export default {
-  name: 'A2Screen',
-  components: {
-    Title,
-    CommunityType,
-    Resident,
-    User,
-    CommunityMap
-
-  }
-}
-</script>
-<style lang="scss">
-@import '@/assets/css/function.scss';
-@import '@/assets/css/screen.scss';
-
-.screen-l{
-  width: halfW(710);
-}
-
-</style>

src/views/components/resident/index.vue

@@ -1,238 +0,0 @@
-<template>
-    <Card :title="title" :icon="icon" class="resident">
-      <div class="display-flex">
-        <div class="gauge margin-r-30">
-          <div ref="dom" class="hfw-gauge"></div>
-        </div>
-        <div class="num display-flex flex-1">
-          <div v-for="item in residentData" :key="item.title" class="resident-item flex-1">
-            <div class="content">
-              <div class="title">{{ item.title }}</div>
-              <div class="value">{{ item.value }}</div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="operate display-flex">
-        <div v-for="item in operateData" :key="item.title" class="operate-item flex-1">
-          <div class="icon margin-t-30">
-            <img :src="item.icon" alt="" class="img">
-          </div>
-          <div class="content">
-            <div class="title">{{ item.title }}</div>
-            <div class="value">{{ item.value }}</div>
-          </div>
-        </div>
-      </div>
-    </Card>
-  </template>
-<script>
-import * as echarts from 'echarts'
-import Card from '@/views/components/card'
-import icon from './images/icon-title.png'
-import iconReport from './images/icon-report.png'
-import iconQrcode from './images/icon-qrcode.png'
-import iconPay from './images/icon-pay.png'
-
-export default {
-  name: 'Resident',
-  components: {
-    Card
-  },
-  data () {
-    return {
-      title: '用户信息',
-      icon: icon,
-      residentData: [
-        {
-          title: '公众号关注数',
-          value: 1000
-        },
-        {
-          title: '绘服务绑定数',
-          value: 1000
-        },
-        {
-          title: '日活跃数（近1月）',
-          value: 1000
-        }
-      ],
-      operateData: [
-        {
-          title: '绘服务缴费次数',
-          value: 1000,
-          icon: iconPay
-        },
-        {
-          title: '绘服务扫码次数',
-          value: 1000,
-          icon: iconQrcode
-        },
-        {
-          title: '绘服务报事次数',
-          value: 1000,
-          icon: iconReport
-        }
-      ],
-      colorArr: ['#182744', '#82D1F6', '#02338C']
-    }
-  },
-  mounted () {
-    this.initChart()
-  },
-  methods: {
-    initChart () {
-      const myChart = echarts.init(this.$refs.dom)
-      const option = {
-        name: '仪表盘',
-        grid: {
-          top: '0px',
-          bottom: '5px',
-          left: '0px',
-          right: '0px'
-        },
-        title: {
-          show: true,
-          text: [`{titleBg|关注率}`],
-          left: 'center',
-          bottom: '0',
-          textStyle: {
-            rich: {
-              titleBg: {
-                backgroundColor: '#14223C',
-                borderRadius: 4,
-                height: 26,
-                width: 70,
-                color: '#00CAFF',
-                fontSize: 16
-              }
-            }
-          }
-        },
-        series: [
-          {
-            type: 'gauge',
-            radius: '100%',
-            name: '绘服务',
-            axisLine: {
-              show: true,
-              lineStyle: {
-                width: 15,
-                color: [
-                  [
-                    0,
-                    new echarts.graphic.LinearGradient(0, 1, 0, 0, [
-                      {
-                        offset: 0,
-                        color: this.colorArr[1]
-                      },
-                      {
-                        offset: 1,
-                        color: this.colorArr[2]
-                      }
-                    ])
-                  ],
-                  [
-                    1, this.colorArr[0]
-                  ]
-                ]
-              }
-            },
-            splitLine: {
-              show: false
-            },
-            axisTick: {
-              show: false
-            },
-            axisLabel: {
-              show: false
-            },
-            pointer: {
-              show: false
-            },
-            title: {
-              offsetCenter: [0, '25%'],
-              fontSize: 14,
-              fontFamily: 'Microsoft YaHei',
-              fontWeight: '400',
-              color: '#5774A2'
-            },
-            detail: {
-              formatter: '{value}%',
-              offsetCenter: [0, '-10%'],
-              fontSize: 22,
-              fontFamily: 'DS-Digital',
-              fontWeight: 'bold',
-              color: '#00D2ED'
-            },
-            data: [{ value: 75, name: '绘服务' }]
-          }
-        ]
-      }
-      myChart.setOption(option)
-    }
-  }
-}
-</script>
-<style lang="scss">
-@import '@/assets/css/function.scss';
-@import '@/assets/css/screen.scss';
-
-.resident{
-  .gauge{
-    width: halfW(220);
-    padding-top: halfH(30);
-    .hfw-gauge{
-      width: halfW(193);
-      height: halfH(193);
-    }
-  }
-  .num{
-    flex-direction: column;
-    text-align: center;
-    line-height: halfH(35);
-    padding-left: halfW(30);
-    .title{
-      font-size: halfH(14);
-      color: #82D1F6;
-      text-align: left;
-    }
-    .value{
-      font-size: halfH(20);
-      color: #FFFFFF;
-      margin-left: halfW(50);
-    }
-  }
-  .operate{
-    height: halfH(215);
-    text-align: center;
-    border-radius: 5px;
-    background-color: rgba(17, 28, 48, 1);
-    border: 1px solid rgba(0, 123, 211, 0.2);
-    padding: halfH(20) 0;
-    line-height: halfH(40);
-    margin-top: halfH(60);
-    .operate-item{
-      border-right: 1px solid rgba(0, 123, 211, 0.2);
-    }
-    .operate-item:last-child{
-      border-right: none;
-    }
-    .img{
-      width: halfW(48);
-      height: halfH(48);
-    }
-    .content{
-      margin-top: halfH(25);
-    }
-    .title{
-      font-size: halfH(20);
-      color: #82D1F6;
-    }
-    .value{
-      font-size: halfH(20);
-      color: #FFFFFF;
-    }
-  }
-}
-</style>

src/views/components/title/index.vue

@@ -1,24 +0,0 @@
-<template>
-    <div class="title">
-        <img src="../../../assets/images/hjkj-logo.png" alt="绘家科技" class="img" />
-    </div>
-</template>
-<script>
-export default {
-  name: 'Title'
-}
-</script>
-<style scoped lang="scss">
-@import "@/assets/css/screen.scss";
-@import "@/assets/css/function.scss";
-@import "@/assets/css/mixin.scss";
-.title{
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    .img{
-        width: halfW(350);
-    }
-
-}
-</style>

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

@@ -0,0 +1,82 @@
+<template>
+    <div class="screen">
+      <Title />
+      <div class="screen-content">
+        <div class="screen-top">
+          <div class="item-l">
+            <OnlineWater />
+          </div>
+          <div class="item-r">
+            <OnlinePay />
+          </div>
+        </div>
+        <div class="screen-bottom">
+          <div class="item-l">
+            <OnlinePayWeek />
+          </div>
+          <div class="item-r">
+            <OnlinePayDay />
+          </div>
+        </div>
+      </div>
+    </div>
+</template>
+<script>
+import Title from '@/views/hui-jia/components/title'
+import OnlineWater from '../components/online-water'
+import OnlinePay from '../components/online-pay'
+import OnlinePayWeek from '../components/online-pay-week'
+import OnlinePayDay from '../components/online-pay-day'
+
+export default {
+  name: 'A1Screen',
+  components: {
+    Title,
+    OnlineWater,
+    OnlinePay,
+    OnlinePayWeek,
+    OnlinePayDay
+  }
+}
+</script>
+<style lang="scss">
+@import '@/assets/css/function.scss';
+@import '@/assets/css/screen.scss';
+
+.screen-content{
+  width: 100%;
+  height: 100%;
+  height: calc(100% - $title-hd);
+  display: flex;
+  flex-direction: column;
+  gap: halfW(16);
+  .screen-top{
+    width: 100%;
+    flex: 1 1 0%;
+    display: flex;
+    gap: halfW(16);
+    .item-l{
+      flex: 1 1 0%;
+      // background-color: red;
+    }
+    .item-r{
+      flex: 2 1 0%;
+      // background-color: green;
+    }
+  }
+  .screen-bottom{
+    width: 100%;
+    flex: 1 1 0%;
+    display: flex;
+    gap: halfW(16);
+    .item-l{
+      flex: 1 1 0%;
+      // background-color: blue;
+    }
+    .item-r{
+      flex: 1 1 0%;
+      // background-color: yellow;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,86 @@
+<template>
+  <div class="screen">
+    <Title />
+    <div class="screen-content">
+      <div class="screen-l">
+        <CommunityMap class="community-map" />
+      </div>
+      <div class="screen-r">
+          <div class="screen-r-top">
+            <User />
+          </div>
+          <div class="screen-r-bottom">
+            <div class="item-l">
+              <Resident />
+            </div>
+            <div class="item-r">
+              <CommunityType />
+            </div>
+          </div>
+       </div>
+    </div>
+  </div>
+</template>
+<script>
+import Title from '@/views/hui-jia/components/title'
+import CommunityType from '@/views/hui-jia/components/community-type'
+import Resident from '@/views/hui-jia/components/resident'
+import User from '@/views/hui-jia/components/user'
+import CommunityMap from '@/views/hui-jia/components/community-map'
+
+export default {
+  name: 'A2Screen',
+  components: {
+    Title,
+    CommunityType,
+    Resident,
+    User,
+    CommunityMap
+
+  }
+}
+</script>
+<style lang="scss">
+@import '@/assets/css/function.scss';
+@import '@/assets/css/screen.scss';
+
+.screen-content{
+  width: 100%;
+  height: 100%;
+  height: calc(100% - $title-hd);
+  display: flex;
+  gap: halfW(16);
+  .screen-l{
+    width: calc(35%);
+    // flex: 1 1 0%;
+    // background-color: red;
+  }
+  .screen-r{
+    width: calc(65%);
+    // flex: 2 1 0%;
+    display: flex;
+    flex-direction: column;
+    gap: halfH(16);
+    .screen-r-top{
+      flex: 1 1 0%;
+      // width: 100%;
+      // height: calc(20% - halfH(16));
+      // background-color: yellow;
+    }
+    .screen-r-bottom{
+      flex: 2 1 0%;
+      display: flex;
+      gap: halfW(16);
+      .item-l{
+        flex: 1 1 0%;
+        // background-color: blue;
+      }
+      .item-r{
+        flex: 1 1 0%;
+        // background-color: orange;
+      }
+    }
+  }
+}
+
+</style>

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

@@ -4,11 +4,19 @@
       <img src="@/assets/images/hjkj1.png" class="logo-img" />
     </div>
     <div class="b1-screen-content">
-      <div style="color: #fff" class="item-1">1</div>
+      <div class="item-1">
+        <CommunityMap />
+      </div>
       <div class="middle-wrap">
-        <div style="color: #fff" class="item-2">2</div>
-        <div style="color: #fff" class="item-3">3</div>
-        <div style="color: #fff" class="item-4">4</div>
+        <div class="item-2">
+          <User />>
+        </div>
+        <div class="item-3">
+          <Resident :showOperate="false" class="b1-resident" />
+        </div>
+        <div class="item-4">
+          <CommunityType :showBar="false" class="b1-community-type" />
+        </div>
       </div>
       <div class="right-wrap">
         <Market />
@@ -23,20 +31,28 @@
 </template>
 
 <script>
-  import implementationTotal from "../components/implementary/total.vue"
-  import implementationIng from "../components/implementary/ing.vue"
-  import implementationNowYear from "../components/implementary/now-year.vue"
-  import Market from "../components/market.vue"
+import implementationTotal from '../components/implementary/total.vue'
+import implementationIng from '../components/implementary/ing.vue'
+import implementationNowYear from '../components/implementary/now-year.vue'
+import Market from '../components/market.vue'
+import CommunityMap from '../components/community-map'
+import CommunityType from '../components/community-type'
+import Resident from '../components/resident'
+import User from '../components/user'
 
-  export default {
-    name: "B1Screen",
-    components: {
-      implementationTotal,
-      implementationIng,
-      implementationNowYear,
-      Market,
-    },
+export default {
+  name: 'B1Screen',
+  components: {
+    implementationTotal,
+    implementationIng,
+    implementationNowYear,
+    Market,
+    CommunityMap,
+    CommunityType,
+    Resident,
+    User
   }
+}
 </script>
 
 <style lang="scss" scoped>
@@ -65,7 +81,7 @@
     .item-1 {
       width: calc(25% - $gap-padding);
       height: calc(64% - $gap-padding);
-      background: #f5f5f5;
+      // background: #f5f5f5;
     }
     .middle-wrap {
       width: calc(50% - $gap-padding - $gap-padding);
@@ -77,20 +93,20 @@
       .item-2 {
         flex: 0 0 100%;
         width: 100%;
-        height: calc(50% - $gap-padding);
-        background: #f5f5f5;
+        height: calc(35% - $gap-padding);
+        // background: #f5f5f5;
       }
       .item-3 {
-        background: green;
+        // background: green;
         flex: 0 0 calc(50% - $gap-padding);
         width: calc(50% - $gap-padding);
-        height: calc(50% - $gap-padding);
+        height: calc(65% - $gap-padding);
       }
       .item-4 {
         flex: 0 0 calc(50% - $gap-padding);
         width: calc(50% - $gap-padding);
-        height: calc(50% - $gap-padding);
-        background: green;
+        height: calc(65% - $gap-padding);
+        // background: green;
       }
     }
     .right-wrap {

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

@@ -3,7 +3,7 @@
  * @Date: 2025-11-19 16:09:12
  * @LastEditors: wjc
  * @LastEditTime: 2025-11-20 10:58:02
- * @Description: 
+ * @Description:
 -->
 <template>
   <div class="b2-screen">
@@ -12,15 +12,21 @@
     </div>
     <div class="b2-screen-content">
       <div class="left-wrap">
-        <div style="color: #fff" class="item-1">1</div>
+        <OnlineWater :showOnlineInfo="true" />
         <Smart />
       </div>
       <div class="middle-wrap">
         <div class="top">
           <div class="top-left">
-            <div style="color: #fff" class="item-2">2</div>
-            <div style="color: #fff" class="item-3">3</div>
-            <div style="color: #fff" class="item-4">4</div>
+            <div class="item-2">
+              <OnlinePay :showLegend="false" :showTitle="false" :showOnlineInfo="true" />
+            </div>
+            <div class="item-3">
+              <OnlinePayWeek :showMarkPoint="false" :showInfo="false" />
+            </div>
+            <div class="item-4">
+              <OnlinePayDay :showMarkPoint="false" :showInfo="false" />
+            </div>
           </div>
           <Hardware />
         </div>
@@ -31,23 +37,31 @@
 </template>
 
 <script>
-  import Smart from "../components/smart.vue"
-  import Hardware from "../components/hardware.vue"
-  import WorkCard from "../components/work-card.vue"
+import Smart from '../components/smart.vue'
+import Hardware from '../components/hardware.vue'
+import WorkCard from '../components/work-card.vue'
+import OnlineWater from '../components/online-water'
+import OnlinePay from '../components/online-pay'
+import OnlinePayWeek from '../components/online-pay-week'
+import OnlinePayDay from '../components/online-pay-day'
 
-  export default {
-    name: "B1Screen",
-    components: {
-      Smart,
-      Hardware,
-      WorkCard,
-    },
+export default {
+  name: 'B1Screen',
+  components: {
+    Smart,
+    Hardware,
+    WorkCard,
+    OnlineWater,
+    OnlinePay,
+    OnlinePayWeek,
+    OnlinePayDay
   }
+}
 </script>
 
 <style lang="scss" scoped>
   @import "@/assets/css/theme.scss";
-
+  @import "@/assets/css/screen.scss";
   $gap-padding: halfW(8);
   .b2-screen {
     height: 100vh;
@@ -78,6 +92,10 @@
         height: calc(50% - $gap-padding);
         background: #f5f5f5;
       }
+      .online-water {
+        width: 100%;
+        height: calc(50% - $gap-padding);
+      }
       .smart-door {
         width: 100%;
         height: calc(50% - $gap-padding);
@@ -95,27 +113,31 @@
         display: flex;
         gap: calc($gap-padding * 2);
         width: 100%;
-        height: calc(75% - $gap-padding);
+        height: calc(80% - $gap-padding);
         .top-left {
           display: flex;
           flex-direction: column;
           width: 50%;
           height: 100%;
           gap: halfW(16);
-          .item-2 {
+          .item-2{
             flex: 1 1 0%;
             width: 100%;
-            background: #f5f5f5;
+            // max-height: halfH(200);
+            // background: #f5f5f5;
           }
           .item-3 {
             flex: 1 1 0%;
-            background: green;
+            // background: green;
             width: 100%;
+            // max-height: halfH(200);
           }
           .item-4 {
             flex: 1 1 0%;
             width: 100%;
-            background: green;
+
+            // max-height: halfH(200);
+            // background: green;
           }
         }
         .hardware-data {
@@ -125,7 +147,7 @@
       }
       .work-card-container {
         width: 100%;
-        height: calc(25% - $gap-padding);
+        height: calc(20% - $gap-padding);
       }
     }
   }

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

@@ -3,10 +3,9 @@
         <div class="card-header">
             <div class="card-lf">
               <img :src="icon" alt="icon" class="icon"/>
-              <span>{{ title }}</span>
+              <span class="title">{{ title }}</span>
               <span v-if="subTitle" class="sub-title">（{{subTitle}}）</span>
             </div>
-            <div class="card-rg"></div>
         </div>
         <div class="card-body">
           <slot></slot>
@@ -35,7 +34,7 @@ export default {
 </script>
 <style scoped lang="scss">
 @import '@/assets/css/function.scss';
-
+@import '@/assets/css/theme.scss';
 .card {
     width: 100%;
     height: 100%;
@@ -43,26 +42,28 @@ export default {
     border-radius: 5px;
     background: linear-gradient(180deg, rgba(14,22,41,1) 0%,rgba(14,22,41,0.6) 100%);
     .card-header{
-      height: halfH(40);
       color: rgba(185, 227, 244, 1);
-      font-size: halfW(14);
-      line-height: halfH(40);
-      padding: 0 halfW(20);
-      background: #111C30;
+      font-size: halfW(16);
+      padding:  halfH(6) halfW(10);
+      background: var(--title-bg);
+      .title{
+        display: inline-block;
+        vertical-align: middle;
+      }
       .icon{
         width: halfW(24);
         height: halfH(24);
         vertical-align: middle;
-        margin-right: halfW(13);
-        margin-top: halfH(-4);
+        margin-right: halfW(8);
       }
       .sub-title{
         font-size: halfW(12);
       }
     }
     .card-body{
-      padding: halfH(30) halfW(30);
+      padding: halfH(16) halfW(10);
       box-sizing: border-box;
+      height: calc(100% - halfH(12) - halfH(16) - halfH(10));
     }
 }
 </style>

src/views/components/community-map/components/map-list.vue → src/views/hui-jia/components/community-map/components/map-list.vue

@@ -96,8 +96,10 @@ export default {
   @import "@/assets/css/mixin.scss";
 .map-list-container {
   position: absolute;
-  height: halfH(482);
-  width: halfW(330);
+  width: 50%;
+  height: 50%;
+  // height: halfH(482);
+  // width: halfW(330);
   border-radius: 6px;
   background:rgba(10,25,43,0.6);
   border:1px solid rgba(19,51,88,1);

src/views/components/community-map/index.vue → src/views/hui-jia/components/community-map/index.vue

@@ -44,7 +44,7 @@
 <script>
 import provincePosition from './province-positon'
 // import { screen } from '@/api'
-import Card from '@/views/components/card'
+import Card from '@/views/hui-jia/components/card'
 import icon from './images/icon-title.png'
 import MapList from './components/map-list.vue'
 export default {
@@ -150,9 +150,9 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-  @import "@/assets/css/theme.scss";
-  @import "@/assets/css/mixin.scss";
+@import '@/assets/css/screen.scss';
   .map-con {
+    height: 100%;
     position: relative;
   }
 </style>

src/views/components/community-type/components/bar.vue → src/views/hui-jia/components/community-type/components/bar.vue

@@ -65,7 +65,7 @@ export default {
               cap: 'round'
             }
           },
-          boundaryGap: false,
+          boundaryGap: true,
           axisTick: {
             alignWithLabel: true,
             length: 7,

src/views/components/community-type/components/three-pie.vue → src/views/hui-jia/components/community-type/components/three-pie.vue

@@ -347,6 +347,6 @@ export default {
 
 .charts {
   height: halfH(260);
-  top: halfH(-30);
+  // top: halfH(-30);
 }
 </style>

src/views/components/community-type/index.vue → src/views/hui-jia/components/community-type/index.vue

@@ -1,12 +1,12 @@
 <template>
     <Card :title="title" :icon="icon" class="community-type">
-      <ThreePie :value="value" :legendIcons="legendIcons"></ThreePie>
-      <Bar :value="value"></Bar>
+      <ThreePie :value="value" :legendIcons="legendIcons" class="w-full"></ThreePie>
+      <Bar :value="value" v-if="showBar" class="w-full"></Bar>
     </Card>
   </template>
 <script>
 // import echarts from 'echarts'
-import Card from '@/views/components/card'
+import Card from '@/views/hui-jia/components/card'
 import icon from './images/icon-title.png'
 import ThreePie from './components/three-pie.vue'
 import iconZz from './images/icon-zz.png'
@@ -21,6 +21,12 @@ export default {
     ThreePie,
     Bar
   },
+  props: {
+    showBar: {
+      type: Boolean,
+      default: true
+    }
+  },
   data () {
     return {
       title: '项目类型',

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

@@ -1,9 +1,9 @@
 <template>
     <Card :title="title" :subTitle="subTitle" :icon="icon" class="online-pay-day">
-      <div class="info margin-r-20">
-        <div class="title">
+      <div class="info margin-r-20" v-if="showInfo">
+        <div class="text">
           <p class="p1">线上缴费</p>
-          <p class="p2">日热度统计</p>
+          <p class="p2 margin-tg-20">日热度统计</p>
           <p class="p3">(近12月日平均)</p>
         </div>
         <div class="legend">
@@ -11,7 +11,7 @@
             <span class="legend1-color"></span>
             <span>时段缴费</span>
           </p>
-          <p class="legend2">
+          <p class="legend2 margin-tg-20">
             <span class="legend2-color"></span>
             <span>时段占比</span>
           </p>
@@ -21,13 +21,13 @@
           </p>
         </div>
       </div>
-      <div ref="onlinePayDayBar" class="online-pay-day-bar"></div>
+      <div ref="onlinePayDayBar" class="online-pay-day-bar flex-1"></div>
     </Card>
   </template>
 <script>
 import * as echarts from 'echarts'
 // import { getBigNumberWithUint } from '@/libs/tools.js'
-import Card from '@/views/components/card'
+import Card from '@/views/hui-jia/components/card'
 import icon from './images/icon-title.png'
 
 export default {
@@ -35,6 +35,16 @@ export default {
   components: {
     Card
   },
+  props: {
+    showMarkPoint: {
+      type: Boolean,
+      default: () => true
+    },
+    showInfo: {
+      type: Boolean,
+      default: () => true
+    }
+  },
   data () {
     return {
       title: '线上缴费日热度',
@@ -113,7 +123,7 @@ export default {
           show: false
         },
         grid: {
-          top: '40px',
+          top: this.showMarkPoint ? '10%' : '6%',
           bottom: '0px',
           left: '0px',
           right: '0px',
@@ -137,7 +147,7 @@ export default {
               cap: 'round'
             }
           },
-          boundaryGap: false,
+          boundaryGap: true,
           axisTick: {
             alignWithLabel: true,
             length: 7,
@@ -226,17 +236,20 @@ export default {
               borderWidth: 3
             },
             lineStyle: {
-              opacity: 0
+              // opacity: 0
+              color: '#3D7BF8',
+              width: 2
             },
             markPoint: {
-              symbol: 'path://m 0,0 h 48 a 5 5 0 0 1 4 4 v 20 a 5 5 0 0 1 -4 4 h -18 l -5,5 l -5,-5 h -18 a 5 5 0 0 1 -4 -4 v -20 a 5 5 0 0 1 4 -4 z', // 带下箭头的圆角矩形
+              // symbol: 'none',
+              symbol: this.showMarkPoint ? 'path://m 0,0 h 48 a 5 5 0 0 1 4 4 v 20 a 5 5 0 0 1 -4 4 h -18 l -5,5 l -5,-5 h -18 a 5 5 0 0 1 -4 -4 v -20 a 5 5 0 0 1 4 -4 z' : 'none', // 带下箭头的圆角矩形
               symbolSize: function (val) {
-                return [textSize(val, '14px').width + 20, 35] // 设置宽高
+                return [textSize(val, '14px').width + 20, 55] // 设置宽高
               },
               itemStyle: {
                 color: '#262BB3' // %值的背景颜色
               },
-              symbolOffset: ['0', '-70%'], // 相对位置
+              symbolOffset: ['0', '-40%'], // 相对位置
               symbolKeepAspect: true, // 是否保持宽高比
               label: {
                 position: 'insideTop',
@@ -289,7 +302,7 @@ export default {
 @import '@/assets/css/function.scss';
 .online-pay-day-bar {
   width: 100%;
-  height: halfH(350);
+  // height: halfH(350);
 }
 .online-pay-day {
   .card-body{
@@ -323,7 +336,7 @@ export default {
   }
   .info{
       width: halfW(160);
-      height: halfH(350);
+      // height: calc(100% - halfH(60));
       border: 1px solid rgba(0, 123, 211, 0.2);
       border-radius: halfW(5) halfH(5);
       display: flex;
@@ -341,13 +354,13 @@ export default {
         color: #9FA5B7;
       }
     }
-    .title,.legend{
+    .text,.legend{
       padding: halfH(30) halfW(16);
     }
-    .title{
+    .text{
       // height: halfH(125);
       flex: 1;
-      line-height: halfH(40);
+      // line-height: halfH(40);
 
     }
     .legend{
@@ -355,7 +368,7 @@ export default {
       background: #111C30;
       font-size: halfW(14);
       flex: 1;
-      line-height: halfH(40);
+      // line-height: halfH(40);
       .legend1-color, .legend2-color{
         display: inline-block;
         width: halfW(20);

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

@@ -1,9 +1,9 @@
 <template>
     <Card :title="title" :subTitle="subTitle" :icon="icon" class="online-pay-week">
-      <div class="info margin-r-20">
+      <div class="info margin-r-20" v-if="showInfo">
         <div class="title">
           <p class="p1">线上缴费</p>
-          <p class="p2">周热度统计</p>
+          <p class="p2 margin-tg-20">周热度统计</p>
           <p class="p3">(近12月周平均)</p>
         </div>
         <div class="legend">
@@ -11,7 +11,7 @@
             <span class="legend1-color"></span>
             <span>日线上缴费</span>
           </p>
-          <p class="legend2">
+          <p class="legend2 margin-tg-20">
             <span class="legend2-color"></span>
             <span>日占比</span>
           </p>
@@ -21,13 +21,12 @@
           </p>
         </div>
       </div>
-      <div ref="onlinePayWeekBar" class="online-pay-week-bar"></div>
+      <div ref="onlinePayWeekBar" class="online-pay-week-bar flex-1"></div>
     </Card>
   </template>
 <script>
 import * as echarts from 'echarts'
-// import { getBigNumberWithUint } from '@/libs/tools.js'
-import Card from '@/views/components/card'
+import Card from '@/views/hui-jia/components/card'
 import icon from './images/icon-title.png'
 
 export default {
@@ -35,6 +34,16 @@ export default {
   components: {
     Card
   },
+  props: {
+    showMarkPoint: {
+      type: Boolean,
+      default: () => true
+    },
+    showInfo: {
+      type: Boolean,
+      default: () => true
+    }
+  },
   data () {
     return {
       title: '线上缴费周热度',
@@ -60,7 +69,7 @@ export default {
     initChart () {
       const myChart = echarts.init(this.$refs.onlinePayWeekBar)
       const xAxisData = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
-      const seriesData = [5, 20, 36, 10, 10, 20, 40]
+      const seriesData = [10, 20, 36, 10, 10, 20, 40]
       let all = seriesData.reduce((total, num) => {
         return Number(total) + Number(num)
       })
@@ -113,7 +122,7 @@ export default {
           show: false
         },
         grid: {
-          top: '40px',
+          top: this.showMarkPoint ? '10%' : '6%',
           bottom: '0px',
           left: '0px',
           right: '0px',
@@ -137,7 +146,7 @@ export default {
               cap: 'round'
             }
           },
-          boundaryGap: false,
+          boundaryGap: true,
           axisTick: {
             alignWithLabel: true,
             length: 7,
@@ -226,17 +235,20 @@ export default {
               borderWidth: 3
             },
             lineStyle: {
-              opacity: 0
+              // opacity: 0
+              color: '#3D7BF8',
+              width: 2
             },
             markPoint: {
-              symbol: 'path://m 0,0 h 48 a 5 5 0 0 1 4 4 v 20 a 5 5 0 0 1 -4 4 h -18 l -5,5 l -5,-5 h -18 a 5 5 0 0 1 -4 -4 v -20 a 5 5 0 0 1 4 -4 z', // 带下箭头的圆角矩形
+              // symbol: 'none',
+              symbol: this.showMarkPoint ? 'path://m 0,0 h 48 a 5 5 0 0 1 4 4 v 20 a 5 5 0 0 1 -4 4 h -18 l -5,5 l -5,-5 h -18 a 5 5 0 0 1 -4 -4 v -20 a 5 5 0 0 1 4 -4 z' : 'none', // 带下箭头的圆角矩形
               symbolSize: function (val) {
-                return [textSize(val, '14px').width + 20, 35] // 设置宽高
+                return [textSize(val, '14px').width + 20, 55] // 设置宽高
               },
               itemStyle: {
-                color: '#262BB3' // 背景颜色
+                color: '#262BB3' // %值的背景颜色
               },
-              symbolOffset: ['0', '-70%'], // 相对位置
+              symbolOffset: ['0', '-30%'], // 相对位置
               symbolKeepAspect: true, // 是否保持宽高比
               label: {
                 position: 'insideTop',
@@ -266,9 +278,8 @@ export default {
             data: lineData
           },
           {
-            name: '线上流水',
             type: 'bar',
-            barWidth: '23%',
+            barWidth: '25%',
             labelLine: {
               show: false
             },
@@ -290,14 +301,14 @@ export default {
 @import '@/assets/css/function.scss';
 .online-pay-week-bar {
   width: 100%;
-  height: halfH(350);
+  // height: halfH(350);
 }
 .online-pay-week {
   .card-body{
     display: flex;
     .info{
       width: halfW(160);
-      height: halfH(350);
+      // height: calc(100% - halfH(60));
       border: 1px solid rgba(0, 123, 211, 0.2);
       border-radius: halfW(5) halfH(5);
       display: flex;
@@ -321,7 +332,7 @@ export default {
     .title{
       // height: halfH(125);
       flex: 1;
-      line-height: halfH(40);
+      // line-height: halfH(40);
 
     }
     .legend{
@@ -329,7 +340,7 @@ export default {
       background: #111C30;
       font-size: halfW(14);
       flex: 1;
-      line-height: halfH(40);
+      // line-height: halfH(40);
       .legend1-color, .legend2-color{
         display: inline-block;
         width: halfW(20);

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

@@ -1,6 +1,6 @@
 <template>
     <Card :title="title" :subTitle="subTitle" :icon="icon" class="online-pay">
-      <div class="total display-flex">
+      <div class="total display-flex" v-if="showTitle">
         <div class="img">
           <img src="./images/icon-total.png" alt="" class="icon">
         </div>
@@ -8,13 +8,15 @@
           总缴费（近12个月）：￥234554
         </div>
       </div>
-      <div ref="onlinePayBar" class="online-pay-bar"></div>
+      <div class="bar-con">
+        <div ref="onlinePayBar" class="online-pay-bar"></div>
+      </div>
     </Card>
   </template>
 <script>
 import * as echarts from 'echarts'
 // import { getBigNumberWithUint } from '@/libs/tools.js'
-import Card from '@/views/components/card'
+import Card from '@/views/hui-jia/components/card'
 import icon from './images/icon-title.png'
 
 export default {
@@ -22,6 +24,16 @@ export default {
   components: {
     Card
   },
+  props: {
+    showLegend: {
+      type: Boolean,
+      default: true
+    },
+    showTitle: {
+      type: Boolean,
+      default: true
+    }
+  },
   data () {
     return {
       title: '线上缴费统计',
@@ -56,6 +68,7 @@ export default {
       const option = {
         tooltip: {},
         legend: {
+          show: this.showLegend,
           right: '0',
           top: '20px',
           textStyle: {
@@ -63,7 +76,7 @@ export default {
           }
         },
         grid: {
-          top: '80px',
+          top: this.showLegend ? '80px' : '5%',
           bottom: '0px',
           left: '0px',
           right: '0px',
@@ -87,7 +100,7 @@ export default {
               cap: 'round'
             }
           },
-          boundaryGap: false,
+          boundaryGap: true,
           axisTick: {
             alignWithLabel: true,
             length: 7,
@@ -189,17 +202,26 @@ export default {
 </script>
 <style lang="scss">
 @import '@/assets/css/function.scss';
-.online-pay-bar {
+@import '@/assets/css/screen.scss';
+.bar-con{
+  display: flex;
+  flex-direction: column;
+  height: 100%;
   width: 100%;
-  height: halfH(363);
+  .online-pay-bar {
+    flex: 1;
+    width: 100%;
+    height: 100%;
+  }
 }
 .online-pay {
+
   .total{
+    position: absolute;
     height: halfH(24);
     line-height: halfH(24);
     padding: halfH(18) halfW(18);
     color: #fff;
-    float: left;
     font-size: halfW(14);
     border-radius: 5px;
     background-color: rgba(17, 28, 48, 1);

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

@@ -9,13 +9,13 @@
         <p class="num">34656444444.55</p>
       </div>
     </div>
-    <div class="con-bottom display-flex">
+    <div class="con-center display-flex">
       <div class="con-item flex-1 border">
         <div class="top display-flex">
           <div class="img">
             <img src="./images/icon-once.png" alt="" class="icon">
           </div>
-          <div class="flex-1">
+          <div class="info flex-1">
             <p class="title">单笔缴费金额</p>
             <p class="num">344.55</p>
             <p class="desc">(近12个月平均值)</p>
@@ -32,7 +32,7 @@
           <div class="img">
             <img src="./images/icon-month.png" alt="" class="icon">
           </div>
-          <div class="flex-1">
+          <div class="info flex-1">
             <p class="title">月在线缴费次数</p>
             <p class="num">346564</p>
             <p class="desc">(近12个月平均值)</p>
@@ -44,10 +44,24 @@
         </div>
       </div>
     </div>
+    <div class="con-footer display-flex border" v-if="showOnlineInfo">
+      <div class="info display-flex">
+        <div class="img">
+          <img src="./images/icon-total.png" alt="" class="icon">
+        </div>
+        <div class="text">
+          <p class="title">线上总缴费</p>
+          <p class="desc">(近12个月)</p>
+        </div>
+      </div>
+      <div class="num">
+        34656444444.55
+      </div>
+    </div>
   </Card>
 </template>
 <script>
-import Card from '@/views/components/card'
+import Card from '@/views/hui-jia/components/card'
 import icon from './images/icon-title.png'
 
 export default {
@@ -55,6 +69,12 @@ export default {
   components: {
     Card
   },
+  props: {
+    showOnlineInfo: {
+      type: Boolean,
+      default: false
+    }
+  },
   data () {
     return {
       title: '线上流水数据',
@@ -63,14 +83,21 @@ export default {
   }
 }
 </script>
-<style lang="scss">
+<style lang="scss" scoped>
 @import '@/assets/css/function.scss';
+@import '@/assets/css/screen.scss';
+
 .online-water {
+  ::v-deep .card-body{
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    align-content: center;
+  }
   .img{
-    width: halfW(70);
-    height: halfH(70);
-    margin-right: halfW(27);
-    padding: halfH(14) halfW(14);
+    width: halfW(50);
+    height: halfH(50);
+    padding: halfH(10) halfW(10);
     box-sizing: border-box;
     background: #12223C;
     border-radius: 50%;
@@ -80,68 +107,93 @@ export default {
     }
   }
   .con-top{
-    padding: halfH(20) halfW(30);
+    flex: 1;
+    width: 100%;
+    padding: halfH(24) halfW(20);
     background: #0E1629;
     .info{
+      margin-left: halfW(20);
       .title{
-        font-size: halfW(18);
-        line-height: halfH(24);
+        font-size: halfW(16);
         color: #82D1F6;
       }
       .num{
-        font-size: halfW(48);
-        line-height: halfH(48);
+        font-size: halfW(20);
+        margin-top: halfH(10);
         color: #9BE3E0;
       }
     }
   }
-  .con-bottom{
-    margin-top: halfH(30) ;
+  .con-center{
+    width: 100%;
+    margin-top: halfH(20) ;
     .con-item{
-      // padding: halfH(30) halfW(30);
       box-sizing: border-box;
       &:first-child{
-        margin-right: halfW(30);
+        margin-right: halfW(20);
       }
       .top{
-        padding: halfH(30) halfW(30);
-        .title{
-          font-size: halfW(20);
-          line-height: halfH(22);
-          color: #82D1F6;
-          margin-bottom: halfH(8);
-        }
-        .num{
-          font-size: halfW(28);
-          line-height: halfH(38);
-          color: #F6F7FC;
-          margin-bottom: halfH(8);
-        }
-        .desc{
-          font-size: halfW(14);
-          line-height: halfH(16);
-          color: #9FA5B7;
+        padding: halfH(24) halfW(20);
+        .info{
+          margin-left: halfW(20);
+          .title{
+            font-size: halfW(14);
+            color: #82D1F6;
+            margin-bottom: halfH(8);
+          }
+          .num{
+            color: #F6F7FC;
+            margin-bottom: halfH(8);
+          }
+          .desc{
+            font-size: halfW(12);
+            color: #9FA5B7;
+          }
         }
       }
       .bottom{
         justify-content: space-between;
         align-items: center;
-        height: halfH(3);
-        line-height: halfH(63);
         background: #111C30;
-        padding: halfH(30) halfW(30);
+        padding: halfH(16) halfW(20);
         .title{
           font-size: halfW(14);
-          line-height: halfH(20);
           color: #9FA5B7;
         }
         .num{
-          font-size: halfW(20);
-          line-height: halfH(24);
+          font-size: halfW(18);
           color: #F6F7FC;
         }
       }
     }
   }
+  .con-footer{
+    width: 100%;
+    margin-top: halfH(20);
+    padding: halfH(24) halfW(20);
+    background: #0E1629;
+    justify-content: space-between;
+    .info{
+      .text{
+        margin-left: halfW(20);
+        .title{
+          font-size: halfW(16);
+          margin-top: halfH(6);
+          color: #82D1F6;
+        }
+        .desc{
+          font-size: halfW(12);
+          margin-top: halfH(8);
+          color: #9FA5B7;
+        }
+      }
+
+    }
+    .num{
+        font-size: halfW(20);
+        margin-top: halfH(14);
+        color: #fff;
+      }
+  }
 }
 </style>

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

@@ -0,0 +1,272 @@
+<template>
+    <Card :title="title" :icon="icon" class="resident">
+      <div class="display-flex w-full">
+        <div class="gauge margin-r-30">
+          <div ref="dom" class="hfw-gauge"></div>
+        </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 }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="operate display-flex w-full" v-if="showOperate">
+        <div v-for="item in operateData" :key="item.title" class="operate-item flex-1">
+          <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 }}</div>
+        </div>
+      </div>
+    </Card>
+  </template>
+<script>
+import * as echarts from 'echarts'
+import Card from '@/views/hui-jia/components/card'
+import icon from './images/icon-title.png'
+import iconReport from './images/icon-report.png'
+import iconQrcode from './images/icon-qrcode.png'
+import iconPay from './images/icon-pay.png'
+
+export default {
+  name: 'Resident',
+  components: {
+    Card
+  },
+  props: {
+    showOperate: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data () {
+    return {
+      title: '用户信息',
+      icon: icon,
+      residentData: [
+        {
+          title: '公众号关注数',
+          value: 1000
+        },
+        {
+          title: '绘服务绑定数',
+          value: 1000
+        },
+        {
+          title: '日活跃数（近1月）',
+          value: 1000
+        }
+      ],
+      operateData: [
+        {
+          title: '绘服务缴费次数',
+          value: 1000,
+          icon: iconPay
+        },
+        {
+          title: '绘服务扫码次数',
+          value: 1000,
+          icon: iconQrcode
+        },
+        {
+          title: '绘服务报事次数',
+          value: 1000,
+          icon: iconReport
+        }
+      ],
+      colorArr: ['#182744', '#82D1F6', '#02338C']
+    }
+  },
+  mounted () {
+    this.initChart()
+  },
+  methods: {
+    initChart () {
+      const myChart = echarts.init(this.$refs.dom)
+      const option = {
+        title: {
+          show: true,
+          text: [`{titleBg|关注率}`],
+          left: 'center',
+          bottom: '0',
+          textStyle: {
+            rich: {
+              titleBg: {
+                backgroundColor: '#14223C',
+                borderRadius: 4,
+                height: 26,
+                width: 70,
+                color: '#00CAFF',
+                fontSize: 14
+              }
+            }
+          }
+        },
+        angleAxis: {
+          show: false,
+          max: 100 * 360 / 270, // -45度到225度，二者偏移值是270度除360度
+          type: 'value',
+          startAngle: 225, // 极坐标初始角度
+          splitLine: {
+            show: false
+          }
+        },
+        barMaxWidth: 16, // 圆环宽度
+        radiusAxis: {
+          show: false,
+          type: 'category'
+        },
+        // 圆环位置和大小
+        polar: {
+          center: ['50%', '50%'],
+          radius: '170'
+        },
+        series: [{
+          type: 'bar',
+          data: [{ // 上层圆环，显示数据
+            value: 75,
+            itemStyle: {
+              color: { // 图形渐变颜色方法，四个数字分别代表，右，下，左，上，offset表示0%到100%
+                type: 'linear',
+                x: 0,
+                y: 0,
+                x2: 1, // 从左到右 0-1
+                y2: 0,
+                colorStops: [{
+                  offset: 0,
+                  color: this.colorArr[1]
+                }, {
+                  offset: 1,
+                  color: this.colorArr[2]
+                }]
+              }
+            }
+          }],
+          // barGap: '-100%', // 柱间距离,上下两层圆环重合
+          coordinateSystem: 'polar',
+          roundCap: true // 顶端圆角从 v4.5.0 开始支持
+          // z: 2 // 圆环层级，同zindex
+        },
+        { // 下层圆环，显示最大值
+          type: 'bar',
+          data: [{
+            value: 100,
+            itemStyle: {
+              color: this.colorArr[0]
+            }
+          }],
+          barGap: '-100%',
+          coordinateSystem: 'polar',
+          roundCap: true,
+          z: 1
+        },
+        // 仪表盘
+        {
+          name: '关注率',
+          type: 'gauge',
+          axisLine: {
+            show: false
+          },
+          splitLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            show: false
+          },
+          splitLabel: {
+            show: false
+          },
+          pointer: {
+            show: false
+          },
+          title: {
+            offsetCenter: [0, '45%'],
+            fontSize: 14,
+            fontFamily: 'Microsoft YaHei',
+            fontWeight: '400',
+            color: '#5774A2'
+          },
+          detail: {
+            formatter: '{value}%',
+            offsetCenter: [0, '-10%'],
+            fontSize: 22,
+            fontFamily: 'DS-Digital',
+            fontWeight: 'bold',
+            color: '#00D2ED'
+          },
+          data: [{
+            value: 75,
+            name: '绘服务'
+            // name: 75 + '\n' + '{a|' + '首要污染物：PM10' + '}'
+          }]
+        }
+        ]
+      }
+      myChart.setOption(option)
+    }
+  }
+}
+</script>
+<style lang="scss">
+@import '@/assets/css/function.scss';
+@import '@/assets/css/screen.scss';
+
+.resident{
+  .gauge{
+    width: 50%;
+    .hfw-gauge{
+      width: halfW(220);
+      height: halfH(220);
+      margin: 0 auto;
+    }
+  }
+  .num{
+    flex-direction: column;
+    text-align: center;
+    padding-left: halfW(10);
+    .title{
+      font-size: halfH(16);
+      color: #82D1F6;
+      text-align: left;
+    }
+    .value{
+      font-size: halfH(20);
+      color: #FFFFFF;
+      margin-top: halfH(10);
+    }
+  }
+  .operate{
+    width: 100%;
+    height: calc(45%);
+    text-align: center;
+    border-radius: 5px;
+    background-color: rgba(17, 28, 48, 1);
+    border: 1px solid rgba(0, 123, 211, 0.2);
+    align-items: center;
+    .operate-item{
+      border-right: 1px solid rgba(0, 123, 211, 0.2);
+    }
+    .operate-item:last-child{
+      border-right: none;
+    }
+    .img{
+      width: halfW(46);
+      height: halfH(46);
+    }
+    .title{
+      font-size: halfH(20);
+      color: #82D1F6;
+      margin: halfH(20) 0;
+    }
+    .value{
+      font-size: halfH(20);
+      color: #FFFFFF;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,21 @@
+<template>
+    <div class="title">
+        <img src="@/assets/images/hjkj-logo.png" alt="绘家科技" class="img" />
+    </div>
+</template>
+<script>
+export default {
+  name: 'Title'
+}
+</script>
+<style scoped lang="scss">
+@import "@/assets/css/screen.scss";
+.title{
+  text-align: center;
+  height: $title-hd;
+  .img{
+    width: halfW(346);
+    height: 100%;
+  }
+}
+</style>

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

@@ -1,20 +1,18 @@
 <template>
     <Card :title="title" :icon="icon" class="user">
-      <div class="display-flex margin-t-10">
+      <div class="content display-flex">
         <div v-for="item in userData" :key="item.title" class="user-item flex-1">
           <div class="icon">
             <img :src="item.icon" alt="" class="img">
           </div>
-          <div class="content">
-            <div class="title">{{ item.title }}</div>
-            <div class="value">{{ item.value }}</div>
-          </div>
+          <div class="title">{{ item.title }}</div>
+          <div class="value">{{ item.value }}</div>
         </div>
       </div>
     </Card>
   </template>
 <script>
-import Card from '@/views/components/card'
+import Card from '@/views/hui-jia/components/card'
 import icon from './images/icon-title.png'
 import iconPark from './images/icon-park.png'
 import iconCommunity from './images/icon-community.png'
@@ -73,23 +71,23 @@ export default {
 @import '@/assets/css/function.scss';
 @import '@/assets/css/screen.scss';
 
-.user.card{
-  height: halfH(270);
-}
 .user{
-  align-items: center;
+  .content{
+    width: 100%;
+  }
   .user-item{
     text-align: center;
-    line-height: halfH(50);
+    // line-height: halfH(50);
   }
   .img{
-    width: halfW(44);
-    height: halfH(44);
+    width: halfW(40);
+    height: halfH(40);
     object-fit: cover;
   }
   .title{
     font-size: halfH(18);
     color: #9BDAFF;
+    margin: halfH(16) 0;
   }
   .value{
     font-size: halfH(28);

yarn.lock

@@ -9396,7 +9396,7 @@ vue-template-es2015-compiler@^1.9.0:
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
   integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==
 
-vue-tianditu@2.7.6:
+vue-tianditu@^2.7.6:
   version "2.7.6"
   resolved "https://registry.npmmirror.com/vue-tianditu/-/vue-tianditu-2.7.6.tgz#c48425c49306300cae9664182dd170c626a38371"
   integrity sha512-Yvcxg0IAgGB3ZY8zlC5ayjo9f85fa8PFTaifguTNpri76g67GO9toaRWMjBKi39yYHMBADaT3P6bEkJx87X8MQ==