From aadd12c53b0eba6ca92ca773bbe25d323936e31f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8A=B1=E6=9C=89=E6=B8=85=E9=A6=99=E6=9C=88=E6=9C=89?=
 =?UTF-8?q?=E9=98=B4?= <185154740@qq.com>
Date: Thu, 13 Jan 2022 10:12:49 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=9F=E8=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apps/AppGridManagement/Statistics.vue | 194 ++++++++++++++++++++++
 1 file changed, 194 insertions(+)

diff --git a/src/apps/AppGridManagement/Statistics.vue b/src/apps/AppGridManagement/Statistics.vue
index e69de29b..8f0d58bb 100644
--- a/src/apps/AppGridManagement/Statistics.vue
+++ b/src/apps/AppGridManagement/Statistics.vue
@@ -0,0 +1,194 @@
+<template>
+  <div class="Statistics">
+    <div class="top">
+      <div class="left">
+        <img src="./components/img/gird-icon.png" alt="" />
+        <div class="girdNmae">南湖街道网格一</div>
+        <u-icon name="arrow-down" color="#666"></u-icon>
+      </div>
+
+      <div class="right">网格配置</div>
+    </div>
+
+    <div class="middle">
+      <div class="girdPeople">网格内人员情况</div>
+
+      <div class="card">
+        <div class="box">
+          <span class="count">5</span>
+          <span class="girdCount">网格长</span>
+        </div>
+
+        <div class="box">
+          <span class="count">5</span>
+          <span class="girdCount">网格员</span>
+        </div>
+
+        <div class="box">
+          <span class="count">5</span>
+          <span class="girdCount">责任家庭数</span>
+        </div>
+
+        <div class="box">
+          <span class="count">5</span>
+          <span class="girdCount">家庭成员数</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="bottom">
+      <div class="girdMsg">网格信息</div>
+
+      <div class="girdCont">
+        <div class="boxes">
+          <span class="boxesLeft">网格名称</span>
+
+          <span class="boxesRight">南湖街道基础网络一</span>
+        </div>
+
+        <div class="boxes">
+          <span class="boxesLeft">网格类型</span>
+
+          <span class="boxesRight">一级网络</span>
+        </div>
+
+        <div class="boxes">
+          <span class="boxesLeft">网格层级</span>
+
+          <span class="boxesRight">街道</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Statistics',
+  components: {},
+  props: {
+    dict: Object,
+    instance: Function,
+    params: Object,
+  },
+  data() {
+    return {}
+  },
+  computed: {},
+  watch: {},
+  onLoad() {},
+  onShow() {},
+  methods: {},
+}
+</script>
+
+<style scoped lang="scss">
+uni-page-body {
+  height: 100%;
+}
+.Statistics {
+  height: 100%;
+  background: #f3f7f8;
+  padding: 0 30px;
+  padding-top: 30px;
+  box-sizing: border-box;
+  .top {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 24px 32px;
+    background: #fff;
+    border-radius: 16px;
+    .left {
+      display: flex;
+      align-items: center;
+      img {
+        width: 32px;
+        height: 32px;
+      }
+      .girdNmae {
+        margin-left: 20px;
+        font-size: 34px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #333333;
+      }
+      .u-icon {
+        margin-left: 8px;
+      }
+    }
+    .right {
+      font-size: 28px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #3f8df5;
+    }
+  }
+
+  .middle {
+    background: #ffffff;
+    border-radius: 16px;
+    margin-top: 32px;
+    padding: 32px 0 60px 0;
+    .girdPeople {
+      padding: 0 0 56px 24px;
+      font-size: 32px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      color: #333333;
+    }
+    .card {
+      display: flex;
+      justify-content: space-around;
+      .box {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        .count {
+          font-size: 64px;
+          font-family: DINAlternate-Bold, DINAlternate;
+          font-weight: bold;
+          color: #3b424a;
+        }
+        .girdCount {
+          margin-top: 8px;
+          font-size: 28px;
+          font-family: PingFangSC-Regular, PingFang SC;
+          font-weight: 400;
+          color: #999999;
+        }
+      }
+    }
+  }
+
+  .bottom {
+    background: #ffffff;
+    border-radius: 16px;
+    margin-top: 32px;
+    padding: 0 24px 64px 24px;
+    .girdMsg {
+      padding: 32px 0;
+      font-size: 32px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      color: #333333;
+    }
+    .girdCont {
+      .boxes {
+        padding: 24px 0 30px 0;
+        box-shadow: inset 0px -1px 0px 0px #d8dde6;
+        .boxesLeft {
+          font-size: 30px;
+          font-family: PingFang-SC-Heavy, PingFang-SC;
+          font-weight: 800;
+          color: #333333;
+        }
+        .boxesRight {
+          margin-left: 40px;
+          font-size: 28px;
+          font-family: PingFangSC-Regular, PingFang SC;
+          color: #666666;
+        }
+      }
+    }
+  }
+}
+</style>