大屏

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;
             }
           }
         }