From e85ef5ff6fc4fb0a893d9a3a9f7751c05b95d52d Mon Sep 17 00:00:00 2001
From: yanran200730 <yanran200830@163.com>
Date: Thu, 21 Jul 2022 13:58:28 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=A7=E5=B1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 project/dv/apps/AppPdDv.vue | 275 ++++++++++++++++++++++++++++++++++++
 1 file changed, 275 insertions(+)
 create mode 100644 project/dv/apps/AppPdDv.vue

diff --git a/project/dv/apps/AppPdDv.vue b/project/dv/apps/AppPdDv.vue
new file mode 100644
index 00000000..ca829c0a
--- /dev/null
+++ b/project/dv/apps/AppPdDv.vue
@@ -0,0 +1,275 @@
+<template>
+  <div class="AppPdDv">
+    <div class="left">
+      <div class="appPdDv-title">企微数据库</div>
+      <div class="tab">
+        <div class="tab-item" :class="[leftIndex === 0 ? 'active' : '']">居民统计</div>
+        <div class="tab-item" :class="[leftIndex === 1 ? 'active' : '']">会话统计</div>
+      </div>
+      <div class="tab-content">
+        <div class="tab-content__item">
+          <div class="item">
+            <div class="title">居民好友统计</div>
+            <div class="item-top">
+              <div class="item-top__item">
+                <h2>居民好友</h2>
+                <div class="bottom">
+                  <span>9</span>
+                  <img src="https://cdn.cunwuyun.cn/dvcp/dv/pddv/bottom.png" />
+                </div>
+              </div>
+              <div class="item-top__item">
+                <h2>昨日新增</h2>
+                <div class="bottom">
+                  <span>9</span>
+                  <img src="https://cdn.cunwuyun.cn/dvcp/dv/pddv/bottom.png" />
+                </div>
+              </div>
+              <div class="item-top__item">
+                <h2>昨日流失</h2>
+                <div class="bottom">
+                  <span>9</span>
+                  <img src="https://cdn.cunwuyun.cn/dvcp/dv/pddv/bottom.png" />
+                </div>
+              </div>
+            </div>
+            <div class="chart1"></div>
+          </div>
+          <div class="item">
+            <div class="title">居民群统计</div>
+            <div class="item-top">
+              <div class="item-top__item">
+                <h2>居民群</h2>
+                <div class="bottom">
+                  <span>9</span>
+                  <img src="https://cdn.cunwuyun.cn/dvcp/dv/pddv/bottom.png" />
+                </div>
+              </div>
+              <div class="item-top__item">
+                <h2>群成员</h2>
+                <div class="bottom">
+                  <span>9</span>
+                  <img src="https://cdn.cunwuyun.cn/dvcp/dv/pddv/bottom.png" />
+                </div>
+              </div>
+              <div class="item-top__item">
+                <h2>昨日新增</h2>
+                <div class="bottom">
+                  <span>9</span>
+                  <img src="https://cdn.cunwuyun.cn/dvcp/dv/pddv/bottom.png" />
+                </div>
+              </div>
+              <div class="item-top__item">
+                <h2>昨日流失</h2>
+                <div class="bottom">
+                  <span>9</span>
+                  <img src="https://cdn.cunwuyun.cn/dvcp/dv/pddv/bottom.png" />
+                </div>
+              </div>
+            </div>
+            <div class="chart2"></div>
+          </div>
+          <div class="item">
+            <div class="title">标签人群</div>
+            <div class="item-bottom">
+              <div class="item-bottom__item">
+                <h2>居民群</h2>
+                <span>245</span>
+              </div>
+              <div class="item-bottom__item">
+                <h2>群成员</h2>
+                <span>245</span>
+              </div>
+              <div class="item-bottom__item">
+                <h2>昨日新增</h2>
+                <span>245</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="middle">
+      <div class="top"></div>
+      <div class="bottom">
+        <div class="bottom-title">
+          <img src="https://cdn.cunwuyun.cn/dvcp/dv/pddv/icon.png" />
+          <h2>网格动态</h2>
+        </div>
+        <div class="bottom-list">
+          <div class="item" v-for="(item, index) in 3" :key="index">
+            <i>07/19 09:45</i>
+            <span>书院社区-张三</span>
+            <em>添加居民"</em>
+            <p>蓝天白云</p>
+            <em>"为好友</em>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="appPdDv-title">网格信息</div>
+      <div class="right-item">
+        <div class="title">"星"网格</div>
+        <div class="item-wrapper">
+          <div class="item-top__item">
+            <h2>925</h2>
+            <p>微网格长</p>
+          </div>
+          <div class="item-top__item">
+            <h2>925</h2>
+            <p>微网格长</p>
+          </div>
+          <div class="item-top__item">
+            <h2>925</h2>
+            <p>微网格长</p>
+          </div>
+          <div class="item-top__item">
+            <h2>925</h2>
+            <p>微网格长</p>
+          </div>
+        </div>
+      </div>
+      <div class="right-item">
+        <div class="title">居民群统计</div>
+        <div class="item-table">
+          <div class="item-table__header">
+            <span>居民群</span>
+            <span>群主</span>
+            <span>群人数</span>
+          </div>
+          <div class="item-table__body">
+            <div class="item-table__item" v-for="(item, index) in 4" :key="index">
+              <span>XX网格居民群</span>
+              <span>王磊</span>
+              <span>150</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="right-item">
+        <div class="title">积分排行</div>
+        <div class="item-wrapper">
+          <div class="tab">
+            <h2 :class="[rightIndex === '0' ? 'active' : '']">累计积分榜</h2>
+            <h2 :class="[rightIndex === '1' ? 'active' : '']">上周积分榜</h2>
+          </div>
+          <div class="tab-content">
+            <div class="tab-item" v-for="(item, index) in 5" :key="index">
+              <img src="https://cdn.cunwuyun.cn/dvcp/dv/pddv/bottom.png" />
+              <div class="middel">
+                <div class="top">
+                  <h2>王磊</h2>
+                  <span>网格长</span>
+                </div>
+                <p></p>
+              </div>
+              <i>433</i>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'AppPdDv',
+
+    label: '微网实格',
+
+    data () {
+      return {
+        leftIndex: 0,
+        rightIndex: 0
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .AppPdDv {
+    display: flex;
+    height: 100%;
+    background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/bg.png);
+    background-size: 100% 100%;
+
+    * {
+      box-sizing: border-box;
+    }
+
+    .appPdDv-title {
+      position: absolute;
+      top: 0;
+      left: 10px;
+      z-index: 1;
+      width: 146px;
+      height: 40px;
+      line-height: 40px;
+      padding-left: 10px;
+      font-family: YouSheBiaoTiHei;
+      color: #FFFFFF;
+      font-weight: bold;
+      transform: translateY(-50%);
+      background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/b-title__bg.png);
+      background-size: 100% 100%;
+    }
+
+    .title {
+      width: 154px;
+      height: 42px;
+      padding: 4px 0 0 34px;
+      color: #fff;
+      font-size: 16px;
+      background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/title.png);
+      background-size: 100% 100%;
+    }
+
+    & > .left {
+      position: relative;
+      width: 360px;
+      height: 100%;
+      padding: 36px 12px 12px;
+      box-shadow: inset 0px 0px 5px 0px #D5E6FF;
+      border-radius: 8px;
+      border: 1px solid #030D1C;
+
+      .tab {
+        display: flex;
+        align-items: center;
+        height: 32px;
+        margin-bottom: 15px;
+        border: 1px solid #0E6EB5;
+
+        div {
+          flex: 1;
+          line-height: 32px;
+          text-align: center;
+          color: #fff;
+          font-size: 14px;
+          cursor: pointer;
+          user-select: none;
+
+          &.active {
+            background: #0F93B8;
+          }
+        }
+      }
+    }
+
+    & > .middle {
+      flex: 1;
+      height: 100%;
+      margin: 0 16px;
+    }
+
+    & > .right {
+      width: 360px;
+      height: 100%;
+      box-shadow: inset 0px 0px 5px 0px #D5E6FF;
+      border-radius: 8px;
+      border: 1px solid #030D1C;
+    }
+  }
+</style>