From a7285d3df5ad00b1403b688829fb107876b3ea4d Mon Sep 17 00:00:00 2001
From: yanran200730 <yanran200830@163.com>
Date: Fri, 1 Jul 2022 17:02:37 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BD=91=E6=A0=BC=E7=BB=9F=E8=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../AppMerchanStatistics.vue                  | 295 ++++++++++++++++++
 1 file changed, 295 insertions(+)

diff --git a/src/project/xicheng/AppMerchanStatistics/AppMerchanStatistics.vue b/src/project/xicheng/AppMerchanStatistics/AppMerchanStatistics.vue
index e69de29b..5e2478d4 100644
--- a/src/project/xicheng/AppMerchanStatistics/AppMerchanStatistics.vue
+++ b/src/project/xicheng/AppMerchanStatistics/AppMerchanStatistics.vue
@@ -0,0 +1,295 @@
+<template>
+  <div class="grid">
+    <div class="gird-wrapper">
+      <div class="gird-item">
+        <h2>一级网格</h2>
+        <div class="gird-item__wrapper level1" @click="isShowStreet = true">
+          <h3>中山门街道</h3>
+        </div>
+      </div>
+      <div class="gird-item">
+        <h2>二级网格</h2>
+        <div class="gird-item__wrapper level2">
+          <div class="grid-item__item" v-for="(item, index) in 10" :key="index">群策巷社区</div>
+        </div>
+      </div>
+      <div class="gird-item">
+        <h2>三级网格</h2>
+        <div class="gird-item__wrapper level3" @click="isShowVillage = true">
+          <h3>专属网格</h3>
+          <p>（12个）</p>
+        </div>
+      </div>
+    </div>
+    <u-popup v-model="isShowStreet" :closeable="false" border-radius="16" height="60%" mode="bottom">
+    <div class="street-dialog">
+      <scroll-view scroll-y class="street-wrapper">
+        <h2 class="title">数据统计</h2>
+        <div class="street-item__wrapper">
+          <div class="street-item" v-for="(item, index) in 40" :key="index">
+            <div class="left">
+              <i></i>
+              <h2>网格数</h2>
+            </div>
+            <span>12</span>
+          </div>
+        </div>
+      </scroll-view>
+    </div>
+    </u-popup>
+    <u-popup v-model="isShowVillage" :closeable="false" border-radius="16" height="60%" mode="bottom">
+      <div class="street-dialog">
+        <scroll-view scroll-y class="street-wrapper">
+          <h2 class="title">数据统计</h2>
+          <div class="street-item__wrapper">
+            <div class="street-item" v-for="(item, index) in 9" :key="index">
+              <div class="left">
+                <i></i>
+                <h2>网格数</h2>
+              </div>
+              <span>12</span>
+            </div>
+          </div>
+          <h2 class="title">网格列表</h2>
+          <div class="street-item__wrapper">
+            <div class="street-item" style="justify-content: center" v-for="(item, index) in 9" :key="index">
+              <span>群策巷社区</span>
+            </div>
+          </div>
+        </scroll-view>
+      </div>
+    </u-popup>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'grid',
+
+    appName: '网格统计',
+
+    data () {
+      return {
+        isShowStreet: false,
+        isShowVillage: false
+      }
+    },
+
+    onLoad () {
+
+    },
+
+    methods: {
+
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .grid {
+    min-height: 100vh;
+    padding: 32px 0;
+    background: #fff;
+    box-sizing: border-box;
+
+    * {
+      box-sizing: border-box;
+    }
+
+    .street-dialog {
+      height: 100%;
+      padding: 0 32px 30px;
+
+      .street-wrapper {
+        .title {
+          height: 100px;
+          line-height: 100px;
+          width: 128px;
+          font-size: 32px;
+          font-weight: 600;
+          color: #262B36;
+        }
+
+        .street-item__wrapper {
+          display: flex;
+          flex-wrap: wrap;
+          height: 100%;
+        }
+
+        .street-item {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          width: calc((100% - 30px) / 2);
+          height: 80px;
+          margin-bottom: 16px;
+          padding: 0 32px;
+          background: #F3F5F7;
+
+          &:nth-of-type(2n - 1) {
+            margin-right: 30px;
+          }
+
+          .left {
+            display: flex;
+            align-items: center;
+
+            i {
+              width: 8px;
+              height: 8px;
+              margin-right: 16px;
+              border-radius: 50%;
+              background: #1365DD;
+            }
+
+            h2 {
+              color: #666666;
+              font-size: 26px;
+            }
+          }
+
+          span {
+            font-size: 28px;
+            color: #333;
+            font-weight: 600;
+          }
+        }
+      }
+    }
+
+    .gird-item {
+      position: relative;
+      margin: 0 16px 80px;
+      padding: 16px;
+      border: 2px dashed #CCCCCC;
+
+      &::after {
+        position: absolute;
+        bottom: 0;
+        left: 50%;
+        z-index: 11;
+        width: 2px;
+        height: 80px;
+        background: #666666;
+        transform: translate(-50%, 100%);
+        content: ' ';
+      }
+
+      &::before {
+        position: absolute;
+        bottom: -80px;
+        left: 50%;
+        z-index: 11;
+        border: 14px solid transparent;
+        border-top: 14px solid #666666;
+        transform: translate(-50%, 50%);
+        content: ' ';
+      }
+
+      &:last-child::after, &:last-child::before {
+        display: none;
+      }
+
+      .level1 {
+        position: relative;
+        text-align: center;
+        height: 80px;
+        line-height: 80px;
+        background: #1365DD;
+        color: #fff;
+        font-size: 32px;
+
+        &:active {
+          opacity: 0.6;
+        }
+
+        image {
+          position: absolute;
+          top: 50%;
+          right: 16px;
+          z-index: 1;
+          width: 32px;
+          height: 32px;
+          transform: translateY(-50%);
+        }
+
+        h3 {
+          font-weight: normal;
+        }
+      }
+
+      .level3 {
+        display: flex;
+        position: relative;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        text-align: center;
+        height: 96px;
+        background: #E8EFFB;
+        color: #fff;
+        font-size: 28px;
+
+        &:active {
+          opacity: 0.6;
+        }
+
+        h3 {
+          color: #1365DD;
+        }
+
+        p {
+          color: #CCCCCC;
+          font-size: 24px;
+        }
+
+        image {
+          position: absolute;
+          top: 50%;
+          right: 16px;
+          z-index: 1;
+          width: 32px;
+          height: 32px;
+          transform: translateY(-50%);
+        }
+
+        h3 {
+          font-weight: normal;
+        }
+      }
+
+      .level2 {
+        display: flex;
+        flex-wrap: wrap;
+
+        .grid-item__item {
+          width: calc((100% - 16px) / 2);
+          height: 80px;
+          line-height: 80px;
+          margin-bottom: 8px;
+          padding: 0 10px;
+          color: #3B3F59;
+          font-size: 28px;
+          font-weight: 600;
+          text-align: center;
+          background: #F3F5F7;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+
+          &:nth-of-type(2n - 1) {
+            margin-right: 8px;
+          }
+        }
+      }
+
+      & > h2 {
+        margin-bottom: 16px;
+        text-align: center;
+        color: #ccc;
+        font-size: 26px;
+        font-weight: normal;
+      }
+    }
+  }
+</style>