特殊人群

src/project/weiyang/AppSpecialPeople/AppSpecialPeople.vue

@@ -6,7 +6,7 @@
       <div class="header-content-bg">
         <img src="https://cdn.sinoecare.com/i/2024/07/12/6690a1303d423.png" alt="">
       </div>
-      <div :class="!tabIndex ? 'top-tabs border-r' : 'top-tabs'" :style="{'top': `${statusBarHeight+50}px`}">
+      <div :class="!tabIndex ? 'top-tabs border-r' : 'top-tabs'" :style="{'top': `${statusBarHeight+44}px`}">
         <u-tabs :list="tabs" :is-scroll="false" :current="tabIndex" height="96" inactive-color="#222"
           active-color="#1D2229" :bar-style="barStyle"  font-size="34" @change="tabClick"></u-tabs>
         <div class="select-content">
@@ -79,6 +79,7 @@
             <p class="text" v-if="!item.value.length">{{ '暂无' + item.label + '信息' }}</p>
           </div>
         </div>
+        <AiEmpty v-if="!userList.length"/>
         <div class="footer" @click="toAdd">
           <div class="btn">新增特殊人群信息</div>
         </div>
@@ -136,7 +137,7 @@ export default {
       return this.user.girdInfos2G && this.user.girdInfos2G.length
     },
   },
-  onLoad() {
+  onShow() {
     if (this.hasGridPermit) {
       if (!this.search.girdId) {
         this.search.girdId = this.user.girdId
@@ -146,8 +147,6 @@ export default {
         this.getDatas()
       })
     }
-  },
-  onShow() {
     uni.setNavigationBarColor({
       frontColor: 'black',
       backgroundColor: '#ffffff'
@@ -260,12 +259,11 @@ export default {
   min-height: 100%;
   .header-content-bg {
     width: 100%;
-    position: relative;
+    position: fixed;
+    z-index: -1;
     img {
       width: 100%;
       height: 592px;
-      position: absolute;
-      z-index: -1;
     }
   }
   
@@ -319,7 +317,7 @@ export default {
   }
 
   .statistic-content {
-    padding: 216px 0 32px 0;
+    padding: 200px 0 32px 0;
   }
 
   .info-content {

src/project/weiyang/AppSpecialPeople/add.vue

@@ -1,7 +1,12 @@
 <template>
   <div class="add">
-    <div class="pad-l32">
+    <u-navbar back-icon-color="#000" :title="isEdit ? '编辑人员' : '新增人员'" title-color="#000" title-width="300" title-size="32" 
-      <div class="item" v-if="!isEdit">
+      :title-bold="true" :background="backgroundNavbar" :is-fixed="true" height="44" z-index="999"></u-navbar>
+    <div class="header-content-bg">
+      <img src="https://cdn.sinoecare.com/i/2024/07/12/6690a1303d423.png" alt="">
+    </div>
+    <div class="add-content">
+      <div class="item border-t-none" v-if="!isEdit">
         <span class="label"><span class="tips">*</span>类型</span>
         <div class="value" @click="showType=true">
           <AiMore v-model="appName"/>
@@ -185,6 +190,7 @@
 import {mapActions, mapState} from 'vuex'
 
 export default {
+  customNavigation: true,
   data() {
     return {
       appId: '',
@@ -203,7 +209,11 @@ export default {
       selectShow: false,
       id: '',
       appId: '',
-      query: {}
+      query: {},
+      backgroundNavbar: {
+        background: 'url(https://cdn.sinoecare.com/i/2024/07/12/6690a1309c7d3.png) no-repeat',
+        backgroundSize: 'cover',
+      },
     }
   },
   computed: {
@@ -221,17 +231,6 @@ export default {
     this.appId = e.appId || ''
     this.query = {...e} 
   },
-  onShow() {
-    if (this.isEdit) {
-      uni.setNavigationBarTitle({
-        title: '编辑人员',
-      })
-    } else {
-      uni.setNavigationBarTitle({
-        title: '新增人员',
-      })
-    }
-  },
   methods: {
     // ...mapActions(['selectEnterpriseContact']),
     handleSelectUser(fieldDbName) {
@@ -525,7 +524,22 @@ export default {
 <style lang="scss" scoped>
 .add {
   padding-bottom: 112px;
+  .header-content-bg {
+    width: 100%;
+    position: fixed;
+    z-index: -1;
+    img {
+      width: 100%;
+      height: 592px;
+    }
+  }
 
+  .add-content {
+    background-color: #fff;
+    border-radius: 16px;
+    width: calc(100% - 64px);
+    margin: 0 0 252px 32px;
+  }
   .title {
     width: 100%;
     height: 96px;
@@ -557,10 +571,9 @@ export default {
   }
 
   .item {
-    width: 100%;
+    width: calc(100% - 32px);
+    margin-left: 32px;
     padding: 34px 32px 34px 0;
-    background: #FFFFFF;
-    border-bottom: 1px solid #D8DDE6;
     display: flex;
     justify-content: space-between;
     font-size: 32px;
@@ -569,7 +582,7 @@ export default {
     line-height: 44px;
     box-sizing: border-box;
     position: relative;
-
+    border-top: 1px solid #D8DDE6;
     .value {
       .u-icon {
         margin-left: 16px;
@@ -581,6 +594,10 @@ export default {
     }
   }
 
+  .border-t-none {
+    border-top: none;
+  }
+
   .color-999 {
     color: #999;
   }
@@ -588,30 +605,30 @@ export default {
   .tips {
     display: inline-block;
     width: 16px;
-    height: 44px;
     font-size: 32px;
     font-family: PingFangSC-Regular, PingFang SC;
     color: #F46;
-    line-height: 44px;
+    position: absolute;
+    top: 34px;
+    left: -16px;
   }
 
   .textarea {
-    width: 100%;
+    width: calc(100% - 64px);
+    margin-left: 32px;
     padding: 34px 32px 34px 0;
-    background: #FFFFFF;
+    border-top: 1px solid #D8DDE6;
-    border-bottom: 1px solid #D8DDE6;
-
     .label {
       display: inline-block;
       font-size: 32px;
       font-family: PingFangSC-Regular, PingFang SC;
       color: #333;
       line-height: 44px;
-      margin-bottom: 8px;
+      margin-bottom: 16px;
     }
 
     .value {
-      padding: 0 16px;
+      // padding: 0 16px;
     }
   }
 
@@ -632,30 +649,20 @@ export default {
     position: fixed;
     bottom: 0;
     left: 0;
-    z-index: 99;
+    background-color: #F4F5FA;
-  }
+    padding: 64px 64px 68px 64px;
-
+    z-index: 9;
     .btn {
-    width: 100%;
+      width: calc(100% - 128px);
-    height: 112px;
+      line-height: 88px;
-    line-height: 112px;
+      background: #026AF2;
-    text-align: center;
+      border-radius: 44px;
-    background: #1365DD;
+      font-family: PingFangSC-Medium;
-    font-size: 32px;
-    font-family: PingFangSC-Medium, PingFang SC;
       font-weight: 500;
+      font-size: 34px;
       color: #FFF;
+      text-align: center;
     }
-
-  .line-bg {
-    width: 100%;
-    height: 16px;
-    background: #F5F5F5;
-  }
-
-  .pad-l32 {
-    padding-left: 32px;
-    background-color: #fff;
   }
 }
 </style>