navbar添加背景色

src/pages.json

@@ -15,20 +15,20 @@
     {
       "path": "pages/index",
       "style": {
-        "navigationBarTitleText": "生产计划",
+        "navigationStyle": "custom",
         "enablePullDownRefresh": true
       }
     },
     {
       "path": "pages/login",
       "style": {
-        "navigationBarTitleText": "登录"
+        "navigationStyle": "custom"
       }
     },
     {
       "path": "pages/work",
       "style": {
-        "navigationBarTitleText": "近三天投料记录",
+        "navigationStyle": "custom",
         "enablePullDownRefresh": true
       }
     },
@@ -36,7 +36,7 @@
     {
       "path": "pages/mine",
       "style": {
-        "navigationBarTitleText": "个人中心"
+        "navigationStyle": "custom"
       }
     },
     {
@@ -60,7 +60,7 @@
     {
       "path": "pages/report",
       "style": {
-        "navigationBarTitleText": "生产报工",
+        "navigationStyle": "custom",
         "enablePullDownRefresh": true
       }
     }
@@ -119,19 +119,19 @@
         {
           "path": "info/index",
           "style": {
-            "navigationBarTitleText": "个人信息"
+            "navigationStyle": "custom"
           }
         },
         {
           "path": "info/edit",
           "style": {
-            "navigationBarTitleText": "编辑资料"
+            "navigationStyle": "custom"
           }
         },
         {
           "path": "pwd/index",
           "style": {
-            "navigationBarTitleText": "修改密码"
+            "navigationStyle": "custom"
           }
         },
         {
@@ -143,7 +143,7 @@
         {
           "path": "help/index",
           "style": {
-            "navigationBarTitleText": "常见问题"
+            "navigationStyle": "custom"
           }
         },
         {

src/pages/index.vue

@@ -1,7 +1,19 @@
 <template>
-  <view >
+  <view>
+    <u-sticky
+        class="sticky"
+        :custom-nav-height="0"
+    >
+      <u-navbar
+          title="生产计划"
+          bg-color="transparent"
+          :auto-back="false"
+          left-icon=""
+          safe-area-inset-top
+          placeholder
+      />
+    </u-sticky>
     <uni-notice-bar show-icon scrollable text="安全生产！有序生产！高效生产！" />
-
     <uni-section title="开工中" type="line" title-color="#18bc37"> </uni-section>
     <el-collapse accordion>
       <el-collapse-item v-for="(item, index) in startList"  :name="item.id">
@@ -219,8 +231,13 @@ function planProgress(plan){
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
-
+.sticky {
+  background: linear-gradient(180deg, #d4e9ff 0%, #f3f9ff 100%);
+  backdrop-filter: blur(27.18px);
+  box-shadow: 0 1px 1px 0 rgba(0, 72, 145, 0.1),
+  0 0.5px 0 0 rgba(0, 0, 0, 0.1);
+}
 .title {
   font-size: 36rpx;
   color: #8f8f94;

src/pages/login.vue

@@ -1,5 +1,18 @@
 <template>
   <view class="normal-login-container">
+    <u-sticky
+        class="sticky"
+        :custom-nav-height="0"
+    >
+      <u-navbar
+          title="登录"
+          bg-color="transparent"
+          :auto-back="false"
+          left-icon=""
+          safe-area-inset-top
+          placeholder
+      />
+    </u-sticky>
     <view class="logo-content align-center justify-center flex">
       <image style="width: 100rpx;height: 100rpx;" :src="globalConfig.appInfo.logo" mode="widthFix">
       </image>
@@ -105,11 +118,16 @@ function loginSuccess(result) {
 
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 page {
   background-color: #ffffff;
 }
-
+.sticky {
+  background: linear-gradient(180deg, #d4e9ff 0%, #f3f9ff 100%);
+  backdrop-filter: blur(27.18px);
+  box-shadow: 0 1px 1px 0 rgba(0, 72, 145, 0.1),
+  0 0.5px 0 0 rgba(0, 0, 0, 0.1);
+}
 .normal-login-container {
   width: 100%;
   min-height: 100vh;

src/pages/mine.vue

@@ -1,5 +1,18 @@
 <template>
   <view class="mine-container" :style="{ height: `${windowHeight}px` }">
+    <u-sticky
+        class="sticky"
+        :custom-nav-height="0"
+    >
+      <u-navbar
+          title="个人中心"
+          bg-color="transparent"
+          :auto-back="false"
+          left-icon=""
+          safe-area-inset-top
+          placeholder
+      />
+    </u-sticky>
     <!--顶部个人信息栏-->
     <view class="header-section">
       <view class="flex padding justify-between">
@@ -171,16 +184,27 @@ function handleBuilding() {
 page {
   background-color: #f5f6f7;
 }
-
+.sticky {
+  background: linear-gradient(180deg, #d4e9ff 0%, #f3f9ff 100%);
+  backdrop-filter: blur(27.18px);
+  box-shadow: 0 1px 1px 0 rgba(0, 72, 145, 0.1),
+  0 0.5px 0 0 rgba(0, 0, 0, 0.1);
+}
 .mine-container {
   width: 100%;
   height: 100%;
 
 
   .header-section {
-    padding: 15px 15px 45px 15px;
+    margin: 10rpx;
-    background-color: #3c96f3;
+    padding: 40rpx 10rpx 80rpx 0;
-    color: white;
+    box-sizing: border-box;
+    background-image: url('src/static/images/icon/background.png');
+    background-position: center center;
+    background-size: 100% 100%;
+    border-radius: 24rpx;
+    overflow: hidden;
+    color: #fff;
 
     .login-tip {
       font-size: 18px;

src/pages/report.vue

@@ -1,5 +1,18 @@
 <template>
 	<view class="container">
+    <u-sticky
+        class="sticky"
+        :custom-nav-height="0"
+    >
+      <u-navbar
+          title="生产报工"
+          bg-color="transparent"
+          :auto-back="false"
+          left-icon=""
+          safe-area-inset-top
+          placeholder
+      />
+    </u-sticky>
     <view class="example">
     <el-tabs v-loading="loading" v-model="activeName" class="demo-tabs" @tab-click="handleTabClick">
       <el-tab-pane label="个人报工" name="first">
@@ -311,6 +324,12 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.sticky {
+  background: linear-gradient(180deg, #d4e9ff 0%, #f3f9ff 100%);
+  backdrop-filter: blur(27.18px);
+  box-shadow: 0 1px 1px 0 rgba(0, 72, 145, 0.1),
+  0 0.5px 0 0 rgba(0, 0, 0, 0.1);
+}
 .example {
   padding: 15px;
   background-color: #fff;

src/pages/work.vue

@@ -1,5 +1,18 @@
 <template>
   <view >
+    <u-sticky
+        class="sticky"
+        :custom-nav-height="0"
+    >
+      <u-navbar
+          title="近三天投料"
+          bg-color="transparent"
+          :auto-back="false"
+          left-icon=""
+          safe-area-inset-top
+          placeholder
+      />
+    </u-sticky>
     <uni-notice-bar show-icon scrollable
                     text="安全生产！有序生产！高效生产！" />
 <!--    已提交-->
@@ -151,5 +164,10 @@ function handleAdd(){
 </script>
 
 <style scoped>
-
+.sticky {
+  background: linear-gradient(180deg, #d4e9ff 0%, #f3f9ff 100%);
+  backdrop-filter: blur(27.18px);
+  box-shadow: 0 1px 1px 0 rgba(0, 72, 145, 0.1),
+  0 0.5px 0 0 rgba(0, 0, 0, 0.1);
+}
 </style>

src/pages_mine/pages/help/index.vue

@@ -1,6 +1,19 @@
 <template>
-  <view class="help-container">
+  <view>
-    <view v-for="(item, findex) in list" :key="findex" :title="item.title" class="list-title">
+    <u-sticky
+        class="sticky"
+        :custom-nav-height="0"
+    >
+      <u-navbar
+          title="常见问题"
+          bg-color="transparent"
+          :auto-back="true"
+          left-icon=""
+          safe-area-inset-top
+          placeholder
+      />
+    </u-sticky>
+    <view v-for="(item, findex) in list" :key="findex" :title="item.title" class="list-title" >
       <view class="text-title">
         <view :class="item.icon"></view>{{ item.title }}
       </view>
@@ -62,21 +75,22 @@
   page {
     background-color: #f8f8f8;
   }
-
+  .sticky {
-  .help-container {
+    background: linear-gradient(180deg, #d4e9ff 0%, #f3f9ff 100%);
-    margin-bottom: 100rpx;
+    backdrop-filter: blur(27.18px);
-    padding: 30rpx;
+    box-shadow: 0 1px 1px 0 rgba(0, 72, 145, 0.1),
+    0 0.5px 0 0 rgba(0, 0, 0, 0.1);
   }
 
   .list-title {
-    margin-bottom: 30rpx;
+    padding: 30rpx;
   }
 
   .childList {
     background: #ffffff;
-    box-shadow: 0px 0px 10rpx rgba(193, 193, 193, 0.2);
+    box-shadow: 0 0 10rpx rgba(193, 193, 193, 0.2);
     border-radius: 16rpx;
-    margin-top: 10rpx;
+    margin-top: 30rpx;
   }
 
   .line {

src/pages_mine/pages/info/edit.vue

@@ -1,5 +1,18 @@
 <template>
   <view class="container">
+    <u-sticky
+        class="sticky"
+        :custom-nav-height="0"
+    >
+      <u-navbar
+          title="编辑资料"
+          bg-color="transparent"
+          :auto-back="false"
+          left-icon=""
+          safe-area-inset-top
+          placeholder
+      />
+    </u-sticky>
     <view class="example">
       <uni-forms ref="form" :model="user" labelWidth="80px">
         <uni-forms-item label="用户昵称" name="nickName">
@@ -100,7 +113,12 @@ export default {
 page {
   background-color: #ffffff;
 }
-
+.sticky {
+  background: linear-gradient(180deg, #d4e9ff 0%, #f3f9ff 100%);
+  backdrop-filter: blur(27.18px);
+  box-shadow: 0 1px 1px 0 rgba(0, 72, 145, 0.1),
+  0 0.5px 0 0 rgba(0, 0, 0, 0.1);
+}
 .example {
   padding: 15px;
   background-color: #fff;

src/pages_mine/pages/info/index.vue

@@ -1,5 +1,18 @@
 <template>
-  <view class="container">
+  <view>
+    <u-sticky
+        class="sticky"
+        :custom-nav-height="0"
+    >
+      <u-navbar
+          title="个人信息"
+          bg-color="transparent"
+          :auto-back="true"
+          left-icon=""
+          safe-area-inset-top
+          placeholder
+      />
+    </u-sticky>
     <uni-list>
       <uni-list-item showExtraIcon="true" :extraIcon="{ type: 'contact' }" title="用户名称" :rightText="user.email" />
       <uni-list-item showExtraIcon="true" :extraIcon="{ type: 'person-filled' }" title="昵称" :rightText="user.nickname" />
@@ -48,8 +61,14 @@ function register(){
 
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 page {
   background-color: #ffffff;
 }
+.sticky {
+  background: linear-gradient(180deg, #d4e9ff 0%, #f3f9ff 100%);
+  backdrop-filter: blur(27.18px);
+  box-shadow: 0 1px 1px 0 rgba(0, 72, 145, 0.1),
+  0 0.5px 0 0 rgba(0, 0, 0, 0.1);
+}
 </style>

src/pages_mine/pages/pwd/index.vue

@@ -1,6 +1,19 @@
 <template>
-  <view class="pwd-retrieve-container">
+  <view>
-    <uni-forms ref="form" :value="user" labelWidth="80px">
+    <u-sticky
+        class="sticky"
+        :custom-nav-height="0"
+    >
+      <u-navbar
+          title="修改密码"
+          bg-color="transparent"
+          :auto-back="false"
+          left-icon=""
+          safe-area-inset-top
+          placeholder
+      />
+    </u-sticky>
+    <uni-forms ref="form" :value="user" labelWidth="80px" class="pwd-retrieve-container">
       <uni-forms-item required name="oldPassword" label="旧密码">
         <uni-easyinput type="password" v-model="user.oldPassword" placeholder="请输入旧密码" />
       </uni-forms-item>
@@ -79,13 +92,18 @@
   }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
-  page {
+page {
     background-color: #ffffff;
   }
+.sticky {
+  background: linear-gradient(180deg, #d4e9ff 0%, #f3f9ff 100%);
+  backdrop-filter: blur(27.18px);
+  box-shadow: 0 1px 1px 0 rgba(0, 72, 145, 0.1),
+  0 0.5px 0 0 rgba(0, 0, 0, 0.1);
+}
+.pwd-retrieve-container {
+  padding: 30rpx
+}
 
-  .pwd-retrieve-container {
-    padding-top: 36rpx;
-    padding: 15px;
-  }
 </style>