消息通知

2022-05-31 10:04:46 +08:00
parent df834df92e
commit ca379e97fb
4 changed files with 449 additions and 0 deletions
--- a/src/project/police/AppMessageNotification/SelectUser.vue
+++ b/src/project/police/AppMessageNotification/SelectUser.vue
@@ -0,0 +1,144 @@
+<template>
+  <section class="SelectUser">
+
+    <div class="select-content">
+      <div class="area-flex">
+        <p class="title">地区</p>
+        <AiAreaPicker v-model="areaId" :name.sync="areaName">
+          <div flex>
+            <AiMore v-model="areaName" icon="arrow-down"/>
+          </div>
+        </AiAreaPicker>
+      </div>
+      <div class="type-content">
+        <p class="title">选择标签</p>
+        <div class="type-list">
+          <p>重点人群</p>
+          <div class="list">
+            <div class="item active">残疾人</div>
+            <div class="item">务工人员</div>
+          </div>
+          <p>重点人群</p>
+          <div class="list">
+            <div class="item active">残疾人</div>
+            <div class="item">务工人员</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="bg-144"></div>
+    <div class="footer">
+      <div class="confirm">确定</div>
+    </div>
+  </section>
+</template>
+<script>
+import {mapState} from 'vuex'
+
+export default {
+  name: "SelectUser",
+  data() {
+    return {
+      value: '',
+      areaId: '',
+      areaName: ''
+    }
+  },
+  computed: {...mapState(['user'])},
+  methods: {
+   
+  },
+  onShow() {
+    document.title = '人员选择'
+  },
+  created() {
+    this.areaId = this.user.areaId
+    this.areaName = this.user.areaName
+  },
+}
+</script>
+<style lang="scss" scoped>
+.SelectUser {
+  .select-content{
+    background-color: #fff;
+    .area-flex{
+      display: flex;
+      justify-content: space-between;
+      padding: 34px 32px;
+      line-height: 44px;
+      border-bottom: 1px solid #ddd;
+    }
+    .title{
+      line-height: 44px;
+      margin-bottom: 16px;
+      font-size: 32px;
+      color: #666;
+    }
+    .local-icon{
+      width: 32px;
+      height: 32px;
+      margin-right: 4px;
+    }
+    .AiAreaPicker{
+      margin-bottom: 24px;
+    }
+    .type-content{
+      padding: 34px 32px;
+    }
+    .type-list{
+      padding-left: 16px;
+      margin-top: 32px;
+      p{
+        line-height: 44px;
+        margin-bottom: 24px;
+        font-size: 30px;
+        color: #666;
+      }
+      .list{
+        overflow: hidden;
+        margin-bottom: 32px;
+        .item{
+          width: 150px;
+          line-height: 68px;
+          float: left;
+          text-align: center;
+          border-radius: 34px;
+          border: 1px solid #ddd;
+          margin: 0 16px 16px 0;
+          font-size: 30px;
+        }
+        .active{
+          background-color: #3192F4;
+          border: 1px solid #3192F4;
+          color: #fff;
+        }
+      }
+    }
+  }
+  .bg-144{
+    height: 144px;
+  }
+  .footer {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 112px;
+    line-height: 112px;
+    background: #fff;
+    display: flex;
+    font-size: 36px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    .confirm {
+      color: #fff;
+      background: #1365dd;
+    }
+    div {
+      flex: 1;
+      text-align: center;
+      color: #333;
+    }
+  }
+  
+}
+</style>