From db431af91649fa1d55fb2265b2edda5db9c1d033 Mon Sep 17 00:00:00 2001
From: yanran200730 <yanran200830@163.com>
Date: Wed, 7 Sep 2022 14:33:19 +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/AppXyDv.vue | 91 +++++++++++++++----------------------
 1 file changed, 36 insertions(+), 55 deletions(-)

diff --git a/project/dv/apps/AppXyDv.vue b/project/dv/apps/AppXyDv.vue
index 6e140eef..cb1c852e 100644
--- a/project/dv/apps/AppXyDv.vue
+++ b/project/dv/apps/AppXyDv.vue
@@ -37,6 +37,24 @@
           <div class="item">
             <div class="title">各局统计</div>
             <div class="item-top jmq">
+              <div class="header">
+                <span>居民群</span>
+                <span>公安局</span>
+                <span>群成员</span>
+              </div>
+              <div class="item-top__list">
+                <div class="item" v-for="(item, index) in 10" :key="index">
+                  <div class="left">
+                    <span>65</span>
+                    <div style="width: 50%"></div>
+                  </div>
+                  <h2>兴义</h2>
+                  <div class="right">
+                    <div style="width: 50%"></div>
+                    <span>32144</span>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
         </div>
@@ -879,70 +897,33 @@
       }
 
       .jmq {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        margin-bottom: 10px;
-
-        .item-top__item {
+        .header {
           display: flex;
           align-items: center;
-          justify-content: center;
-          flex-direction: column;
-          width: 78px;
-          height: 52px;
-          line-height: 1;
-          background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/jmq1.png);
-          background-size: 100% 100%;
+          justify-content: space-between;
+          height: 40px;
+          padding: 0 25px;
+          background: rgba(14,110,181,0.10);
+          border: 1px solid #0E6EB5;
 
-          h2 {
-            margin-bottom: 4px;
-            color: #2AB7D1;
-            font-size: 12px;
+          span {
+            color: #fff;
+            font-size: 15px;
           }
+        }
 
-          &:nth-of-type(2) {
-            background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/jmq2.png);
-            background-size: 100% 100%;
+        .item-top__list {
+          height: 400px;
+          overflow-y: auto;
 
-            h2 {
-              color: #2AB7D1;
-            }
-          }
-
-          &:nth-of-type(3) {
-            background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/jmq3.png);
-            background-size: 100% 100%;
-
-            h2 {
-              color: #5ADA92;
-            }
-          }
-
-          &:nth-of-type(4) {
-            background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/jmq4.png);
-            background-size: 100% 100%;
-
-            h2 {
-              color: #FF5655;
-            }
-          }
-
-          .bottom {
+          .item {
             display: flex;
             align-items: center;
+            justify-content: space-between;
+            padding: 10px 0;
 
-            span {
-              margin-right: 2px;
-              font-size: 14px;
-              color: #fff;
-              font-weight: bold;
-              font-style: oblique;
-            }
-
-            img {
-              position: relative;
-              top: 2px;
+            div {
+              flex: 1;
             }
           }
         }