特殊人群

src/project/weiyang/AppSpecialPeople/AppSpecialPeople.vue

@@ -1,24 +1,35 @@
 <template>
   <div class="AppSpecialPeople">
     <template v-if="hasGridPermit">
-      <div class="tab-select">
+      <u-navbar back-icon-color="#000" title="特殊人群" title-color="#000" title-width="300" title-size="32" 
-        <div class="item" :class="tabIndex == index ? 'active' : ''" v-for="(item, index) in tabs" :key="index"
+        :title-bold="true" :background="backgroundNavbar" :is-fixed="true" height="44"></u-navbar>
-             @click="tabClick(index)">{{ item }}<span></span></div>
+      <div class="header-content-bg">
+        <img src="https://cdn.sinoecare.com/i/2024/07/12/6690a1303d423.png" alt="">
       </div>
-      <div class="area-select">
+      <div class="top-tabs">
+        <u-tabs :list="tabs" :is-scroll="false" :current="tabIndex" height="96" bg-color="#fff" inactive-color="#222"
+          active-color="#1D2229" :bar-style="barStyle"  font-size="34" @change="tabClick"></u-tabs>
         <div class="select-content">
+          <!-- <div class="search-input">
+            <img src="./img/search-icon.png" alt=""/>
+            <u-input type="text" placeholder="请输入姓名" placeholder-style="color:#999;font-size:13px;" height="18"
+              v-model="search.name" @confirm="getUserList" :clearable="false" maxlength="6"/>
+          </div> -->
+          <div class="search-input" v-if="tabIndex">
+            <u-search placeholder="请输入姓名" v-model="search.name" :show-action="false" bg-color="#F4F5FA" search-icon-color="#F4F5FA" 
+              color="#666" height="72" @search="(page1.current = 1), getList()" ></u-search>
+          </div>
           <div class="area-content fill">
             <AiPagePicker type="gird" @select="handleGridSelect">
               <AiMore v-model="gridName" placeholder="选择网格"/>
             </AiPagePicker>
           </div>
-          <div class="search-input" v-if="tabIndex">
-            <img src="./img/search-icon.png" alt=""/>
-            <u-input type="text" placeholder="请输入姓名" placeholder-style="color:#999;font-size:13px;" height="18"
-                     v-model="search.name" @confirm="getUserList" :clearable="false" maxlength="6"/>
-          </div>
         </div>
       </div>
+      <!-- <div class="tab-select">
+        <div class="item" :class="tabIndex == index ? 'active' : ''" v-for="(item, index) in tabs" :key="index"
+             @click="tabClick(index)">{{ item }}<span></span></div>
+      </div> -->
       <div v-if="!tabIndex">
         <div class="info-content">
           <div class="title">特殊人群</div>
@@ -83,17 +94,37 @@ import {mapState} from "vuex";
 export default {
   name: 'AppSpecialPeople',
   appName: '特殊人群',
+  customNavigation: true,
   data() {
     return {
       areaName: '',
-      tabs: ['统计信息', '人员信息'],
+      tabs: [
+        {
+          name: "统计信息",
+        },
+        {
+          name: "人员信息",
+        },
+      ],
+      // tabs: ['统计信息', '人员信息'],
       tabIndex: 0,
       addressArea: '',
       statisticsList: [],
       statisticsListMon: [],
       userList: [],
       gridName: "",
-      search: {name: ''}
+      search: {name: ''},
+      backgroundNavbar: {
+        background: 'url(https://cdn.sinoecare.com/i/2024/07/12/6690a1309c7d3.png) no-repeat',
+        backgroundSize: 'cover',
+      },
+      barStyle: {
+        'width': '20px',
+        'height': '4px',
+        'border-radius': '3px',
+        'bottom': '-4px',
+        'background': '#026AF2'
+      },
     }
   },
   computed: {
@@ -105,18 +136,23 @@ export default {
       return this.user.girdInfos2G && this.user.girdInfos2G.length
     },
   },
-  created() {
+  onLoad() {
-    this.$dict.load('appSpecialTypeFive')
-  },
-  onShow() {
     if (this.hasGridPermit) {
       if (!this.search.girdId) {
         this.search.girdId = this.user.girdId
         this.gridName = this.user.girdName
       }
-      this.getDatas()
+      this.$dict.load('appSpecialTypeFive').then(() => {
+        this.getDatas()
+      })
     }
   },
+  onShow() {
+    uni.setNavigationBarColor({
+      frontColor: 'black',
+      backgroundColor: '#ffffff'
+    })
+  },
   methods: {
     getDatas() {
       this.getStatistic()
@@ -222,95 +258,52 @@ export default {
 <style lang="scss" scoped>
 .AppSpecialPeople {
   min-height: 100%;
-
+  .header-content-bg {
-  .tab-select {
     width: 100%;
-    height: 96px;
+    position: relative;
-    line-height: 96px;
+    img {
-    background: #3975c6;
+      width: 100%;
-    display: flex;
+      height: 592px;
-
+      position: absolute;
-    .item {
+      z-index: -1;
-      flex: 1;
-      text-align: center;
-      font-size: 28px;
-      font-family: PingFangSC-Regular, PingFang SC;
-      color: #cddcf0;
-    }
-
-    .active {
-      font-family: PingFangSC-Medium, PingFang SC;
-      font-weight: 500;
-      position: relative;
-      color: #fff;
-
-      span {
-        width: 48px;
-        height: 4px;
-        background: #fff;
-        position: absolute;
-        bottom: 14px;
-        left: 50%;
-        margin-left: -24px;
-      }
     }
   }
-
+  .top-tabs {
-  .area-select {
+    padding: 32px;
-    width: 100%;
-    background: #fff;
-    padding-left: 32px;
     box-sizing: border-box;
-
+    ::v-deep .u-tabs {
+      border-top-left-radius: 16px;
+      border-top-right-radius: 16px;
+    }
     .select-content {
       width: 100%;
-      padding: 24px 32px 24px 0;
+      padding: 0 32px;
-      border-bottom: 1px solid #d8dde6;
-      display: flex;
-      justify-content: space-between;
-      font-family: PingFangSC-Regular, PingFang SC;
-      color: #333;
-      line-height: 44px;
       box-sizing: border-box;
-
+      background-color: #fff;
-      .area-content {
+      border-bottom-left-radius: 16px;
-        line-height: 64px;
+      border-bottom-right-radius: 16px;
-
-        img {
-          width: 42px;
-          vertical-align: middle;
-          margin-right: 16px;
-        }
-
-        .u-icon {
-          margin-left: 6px;
-        }
-      }
-
       .search-input {
-        width: 402px;
+        width: 100%;
-        height: 64px;
+        padding: 28px 0;
-        background: #f5f5f5;
+      }
-        border-radius: 32px;
+      .area-content {
-        padding: 14px 32px 14px 64px;
+        width: 100%;
+        padding: 26px 32px;
         box-sizing: border-box;
-        position: relative;
+        font-family: PingFangSC-Regular;
-
+        font-size: 32px;
-        img {
+        color: #222;
-          width: 32px;
+        ::v-deep u-icon, 
-          height: 32px;
+        ::v-deep .u-icon {
-          margin-right: 12px;
+          width: 100%;
-          position: absolute;
-          top: 18px;
-          left: 24px;
         }
-
+        ::v-deep .u-icon__label {
-        ::v-deep .u-input {
           display: inline-block;
-          width: 240px;
+          width: calc(100% - 32px);
-          font-size: 26px;
         }
       }
+
+      
     }
   }