群发居民群

src/project/saas/AppPropagandaStatistics/groupSendResident.vue

@@ -1,5 +1,25 @@
 <template>
-  <div class="groupSendResident"></div>
+  <div class="groupSendResident">
+    <AiTopFixed>
+      <div class="search">
+        <div class="searchBox">
+          <u-search placeholder="请输入任务名称" v-model="name" :show-action="false"></u-search>
+        </div>
+        <div class="filterBtn">筛选</div>
+      </div>
+    </AiTopFixed>
+    <div class="resident_list">
+      <div class="card">
+        <div class="card_title">
+          <div class="card_left">晴风小区志愿者活动</div>
+          <div class="card_right"><span></span>进行中</div>
+        </div>
+        <div>创建时间：<span>2022-07-12</span></div>
+        <div>共需<span class="num">56</span>名成员完成群发，目前已完成<span class="num">65%</span></div>
+        <div>创建部门：市委/宣传部/一组</div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -7,10 +27,13 @@ export default {
   data() {
     return {
       current: 1,
+      name: ''
     }
   },
   methods: {},
-  onShow() {},
+  onShow() {
+    document.title = '群发居民群'
+  },
   onReachBottom() {
     this.current ++
   },
@@ -18,5 +41,53 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.groupSendResident {}
+.groupSendResident {
+  .search {
+    display: flex;
+    height: 80px;
+    align-items: center;
+    justify-content: space-between;
+
+    .searchBox {
+      width: 562px;
+    }
+    .filterBtn {
+      width: calc( 100% - 562px);
+    }
+  }
+  .resident_list {
+    padding: 24px 32px 20px 32px;
+    box-sizing: border-box;
+    .card {
+      background: #FFF;
+      border-radius: 16px;
+      padding: 30px;
+      & > div {
+        padding: 10px 0;
+      }
+      .num {
+        color: #3AA0FF;
+      }
+      .card_title {
+        display: flex;
+        justify-content: space-between;
+        .card_left {
+          font-size: 32px;
+          color: #000000;
+          font-weight: 600;
+        }
+        .card_right {
+          span {
+            display: inline-block;
+            width: 16px;
+            height: 16px;
+            background: #3399FF;
+            border-radius: 50%;
+            margin-right: 10px;
+          }
+        }
+      }
+    }
+  }
+}
 </style>