修改header部[返回]按钮

src/app/alarm/alarm.page.html

-<div class="mainCon" style="overflow-y: hidden">
-    <Navbar [leftContent]="icon"
-            (onLeftClick)="onLeftClick()"
-            style="background-color: #28c9bd;position: fixed;top: 0;width: 100%;z-index: 2;"
-    >报警信息
-    </Navbar>
+<ion-header>
+    <ion-toolbar color="secondary">
+        <ion-buttons slot="start">
+            <ion-back-button text="" defaultHref="/index"></ion-back-button>
+        </ion-buttons>
+        <ion-title class="ion-tittle">报警信息</ion-title>
+    </ion-toolbar>
+</ion-header>
 
+<ion-content>
+    <div class="mainCon" style="overflow-y: hidden">
         <SegmentedControl class="nav-title" [values]="['今日报警信息', '近一周报警信息']"
                           (onChange)="choose($event)"
         ></SegmentedControl>
@@ -12,14 +16,15 @@
         <div class="alarmCon" style="overflow-y: hidden">
             <v-refresh [list]="data" *ngIf="itemExit;else other_content"></v-refresh>
         </div>
-</div>
-<ng-template #icon>
+    </div>
+    <ng-template #icon>
         <span class="vo v-back"></span>
-</ng-template>
+    </ng-template>
 
-<ng-template #other_content>
+    <ng-template #other_content>
         <div class="empty-content">
             <i class="vo v-shebeiguanli1"></i><br><br>
             <span class="empty">没有报警信息</span>
         </div>
-</ng-template>
+    </ng-template>
+</ion-content>

src/app/alarm/alarm.page.scss

@@ -47,3 +47,10 @@
   height: 100%;
   overflow-y: auto;
 }
+
+.ion-tittle {
+  text-align: center;
+  padding-left: 0px;
+  font-weight: lighter;
+  font-size: large
+}

src/app/alarm/alarm.page.ts

@@ -98,8 +98,4 @@ export class AlarmPage implements OnInit {
         }
     }
 
-    onLeftClick() {
-        this.tf.transfer({url: '/index'});
-    }
-
 }

src/app/east/east.page.html

-<div class="mainCon" style="" [@EnterLeave]>
-        <Navbar [leftContent]="icon"
-                (onLeftClick)="onLeftClick()"
-                [rightContent]="r"
-                style="background-color: #28c9bd;position: fixed;top: 0;width: 100%;z-index: 2;"
-        >
-            {{fieldRegionName}}控制
-        </Navbar>
-        <ng-template #r>
-            <span (click)="pullToRefresh()">刷新</span>
-        </ng-template>
+<ion-header mode="ios" translucent="false">
+    <ion-toolbar color="secondary">
+        <ion-buttons slot="start">
+            <ion-back-button text="" defaultHref="/index"></ion-back-button>
+        </ion-buttons>
+        <ion-title class="ion-tittle">{{fieldRegionName}}控制</ion-title>
+        <ion-buttons slot="end">
+            <ion-button style="font-size: medium">刷新</ion-button>
+        </ion-buttons>
+    </ion-toolbar>
+</ion-header>
+<ion-content>
+    <div class="mainCon" style="" [@EnterLeave]>
         <ion-content style="padding-top: 45px ;margin-bottom:45px ;position:relative;overflow-y:auto;">
             <div class="topPart">
                 <ListItem multipleLine *ngIf="yewei || yewei === 0">
@@ -71,7 +73,7 @@
             </div>
             <ion-button color="danger" expand="full" (click)="unlock()" *ngIf="alarmMsg.locked">现设备运行时间过长点击解锁</ion-button>
         </ion-content>
-</div>
+    </div>
         <ng-template #icon>
             <span class="vo v-back"></span>
         </ng-template>
@@ -83,4 +85,5 @@
             <v-switch [value]="value[1]" [disabled]="nanLoading || value[0]" (click)="toggleNb(1)"
                       [loading]="beiLoading"></v-switch>
         </ng-template>
-<v-loading-bump style="z-index: 9999; color: red" [remain]="comm.remain" *ngIf="comm.isLoading"></v-loading-bump>
+    <v-loading-bump style="z-index: 9999; color: red" [remain]="comm.remain" *ngIf="comm.isLoading"></v-loading-bump>
+</ion-content>

src/app/east/east.page.scss

@@ -44,3 +44,10 @@
 .topPart{
   padding-top: 45px;
 }
+
+.ion-tittle {
+  text-align: center;
+  padding-left: 0px;
+  font-weight: lighter;
+  font-size: large
+}

src/app/east/east.page.ts

@@ -281,11 +281,6 @@ export class EastPage implements OnInit {
         }]);
     }
 
-    onLeftClick() {
-        // this.tf.transfer({url: '/home'});
-        this.nav.navigateBack('/home');
-    }
-
     getData(time) {
         if (time) {
             this.load.toLoad('加载中...', false);

src/app/envCtrl/env-detail/env-detail.page.html

-<ion-header mode="ios" color="light" translucent="false" style="background-color: #F0F0F0">
-  <ion-toolbar>
+<ion-header mode="ios" translucent="false" style="background-color: #F0F0F0">
+  <ion-toolbar color="secondary">
     <ion-buttons slot="start">
-      <ion-back-button></ion-back-button>
+      <ion-back-button text="" ></ion-back-button>
     </ion-buttons>
     <ion-title mode="ios" class="title">{{fieldRegionName}}详情页</ion-title>
   </ion-toolbar>

src/app/envCtrl/env-detail/env-detail.page.scss

@@ -5,7 +5,9 @@
 
 .title{
   text-align: center;
-  padding-left: 0px
+  padding-left: 0px;
+  font-weight: lighter;
+  font-size: large
 }
 
 .home-bar{

src/app/envCtrl/env-home/env-home.page.html

-<ion-header style="background-color: #F3F4F4;">
-  <!--<div class="topIcon" (click)="toIndex()">-->
-    <!--<i class="vo v-back"></i>-->
-  <!--</div>-->
-  <!--<div class="topSearch">-->
-    <!--<SearchBar [placeholder]="'点击此处进行搜索'" [(ngModel)]="searchText"-->
-               <!--(onCancel)="searchText ='';toggleFocus(false);"-->
-               <!--[setFocus]="false" (onFocus)="toggleFocus(true)" (onBlur)="toggleFocus(false)"-->
-               <!--(onClear)="searchText ='';toggleFocus(false);"></SearchBar>-->
-  <!--</div>-->
+<ion-header mode="ios">
   <ion-toolbar>
-    <ion-button slot="start" size ="small" color="light"  (click)="goTo()">Home</ion-button>
+    <ion-buttons slot="start">
+      <ion-back-button color="secondary" defaultHref="/index" text=""></ion-back-button>
+    </ion-buttons>
     <ion-searchbar></ion-searchbar>
   </ion-toolbar>
-  <!--<ion-slides  mode="ios"-->
-              <!--[options]="lunbo" (ionSlideTouchEnd)="slideDidChange()">-->
-    <!--<ion-slide class="slideCon" *ngFor="let one of imgs">-->
-        <!--<img [src]="'../../../assets/lunbo/' + one">-->
-    <!--</ion-slide>-->
-  <!--</ion-slides>-->
 </ion-header>
-
 <ion-content color='light'>
   <h1 style="
             font-size: 16px;

src/app/envCtrl/env-home/env-home.page.ts

@@ -190,8 +190,7 @@ export class EnvHomePage implements OnInit {
         //this.nav.navigateRoot(one.url + query);
     }
 
-    getData()
-    {
+    getData() {
 
     }
 
@@ -203,12 +202,4 @@ export class EnvHomePage implements OnInit {
     toggleFocus(a){
 
     }
-
-    goTo(){
-        // console.log('+goTo');
-        const query = '/index';
-        this.nav.navigateRoot(query);
-        // console.log('-goTo');
-    }
-
 }

src/app/envCtrl/tabs/tabs.page.html

 <router-outlet name='tabs' (activate)='onActivate($event)'></router-outlet>
-<ion-tabs>
+<ion-content>
+  <ion-tabs>
     <ion-tab-bar slot="bottom">
 
       <ion-tab-button tab="tab-home" selected="true">
@@ -28,4 +29,5 @@
       </ion-tab-button>
 
     </ion-tab-bar>
-</ion-tabs>
+  </ion-tabs>
+</ion-content>

src/app/home/home.page.html

 
 <!--<div class="mainCon">-->
     <ion-header>
-        <div class="topIcon" (click)="toIndex()">
-            <i class="vo v-back"></i>
-        </div>
+        <ion-toolbar color="gray">
+            <ion-buttons slot="start">
+                <ion-back-button text="" defaultHref="/index" color="secondary"></ion-back-button>
+            </ion-buttons>
             <div class="topSearch">
                 <SearchBar [placeholder]="'点击此处进行搜索'" [(ngModel)]="searchText"
                            (onCancel)="searchText ='';toggleFocus(false);"
                            [setFocus]="false" (onFocus)="toggleFocus(true)" (onBlur)="toggleFocus(false)"
                            (onClear)="searchText ='';toggleFocus(false);"></SearchBar>
             </div>
+        </ion-toolbar>
+
         <v-search *ngIf="ifFocus" [(value)]="searchText"></v-search>
         <ion-slides style="width: 100%;height: 125px;" mode="ios"
                     [options]="lunbo" #slide (ionSlideTouchEnd)="slideDidChange()">

src/app/home/home.page.scss

@@ -109,8 +109,8 @@
   display: inline-block;
   width: calc(100% - 30px);
   vertical-align: top;
-  background-color: #28c9bd
-
+  // background-color: #28c9bd;
+  padding-left: 5px;
 }
 
 .listview{

src/app/home/home.page.ts

@@ -114,15 +114,7 @@ export class HomePage implements OnInit, OnDestroy {
         // });
         console.log(one.url + query);
         this.nav.navigateForward(one.url + query);
-        //this.nav.navigateRoot(one.url + query);
-    }
-
-    toIndex() {
-        if (this.ifFocus) {
-            this.ifFocus = false;
-        } else {
-            this.tf.transfer({url: '/index'});
-        }
+        // this.nav.navigateRoot(one.url + query);
     }
 
     pullToRefresh(event) {

src/app/mine/mine.page.html

-<div class="mainContent" style="padding-top: 45px">
-  <Navbar [leftContent]="icon"
-          (onLeftClick)="onLeftClick()"
-          style="background-color: #28c9bd;position: fixed;top: 0;width: 100%;z-index: 2;"
-  >
-    个人中心
-  </Navbar>
+<ion-header>
+  <ion-toolbar color="secondary">
+    <ion-buttons slot="start">
+      <ion-back-button text="" defaultHref="/index"></ion-back-button>
+    </ion-buttons>
+    <ion-title class="ion-tittle">个人中心</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content>
+  <div class="mainContent">
     <div class="topBar">
       <div class="top">
         <div class="imgPart">
@@ -36,8 +39,9 @@
     <div style="position: fixed;bottom: 20px;display: inline-block;width: 100%;text-align: center;color: #666666;font-size: 14px;">
       版本信息: v2.9.1
     </div>
-</div>
+  </div>
 
-<ng-template #icon>
+  <ng-template #icon>
     <span class="vo v-back"></span>
-</ng-template>
+  </ng-template>
+</ion-content>

src/app/mine/mine.page.scss

@@ -82,3 +82,11 @@
     }
   }
 }
+
+.ion-tittle {
+  text-align: center;
+  padding-left: 0px;
+  font-weight: lighter;
+  font-size: large
+}
+

src/app/mine/mine.page.ts

@@ -41,7 +41,4 @@ export class MinePage implements OnInit {
         }]);
     }
 
-    onLeftClick() {
-        this.tf.transfer({url: '/index'});
-    }
 }

src/app/other/other.page.html

-<div class="mainCon" style="padding-top: 45px;" [@EnterLeave]>
-    <Navbar [leftContent]="icon"
-            (onLeftClick)="onLeftClick()"
-            [rightContent]="r"
-            style="background-color: #28c9bd;position: fixed;top: 0;width: 100%;z-index: 2;"
-    >
-        {{fieldRegionName}}控制
-    </Navbar>
-    <ng-template #r>
-        <span (click)="pullToRefresh()">刷新</span>
-    </ng-template>
+<ion-header mode="ios" translucent="false">
+    <ion-toolbar color="secondary">
+        <ion-buttons slot="start">
+            <ion-back-button text="" defaultHref="/home"></ion-back-button>
+        </ion-buttons>
+        <ion-title calss="ion-tittle">{{fieldRegionName}}控制</ion-title>
+        <ion-buttons slot="end">
+            <ion-button style="font-size: medium" (click)="pullToRefresh()">刷新</ion-button>
+        </ion-buttons>
+    </ion-toolbar>
+</ion-header>
+
+<ion-content>
+    <div class="mainCon" style="padding-top: 45px;" [@EnterLeave]>
         <div class="topPart">
             <ListItem multipleLine *ngIf="yewei || yewei === 0">
                 当前液位:
@@ -54,19 +57,20 @@
                 </ion-item>
             </ion-list>
         </div>
-</div>
-<ng-template #icon>
+    </div>
+    <ng-template #icon>
         <span class="vo v-back"></span>
-</ng-template>
+    </ng-template>
 
 
-<!--<div class="popBox123" style="z-index: 9999;-->
+    <!--<div class="popBox123" style="z-index: 9999;-->
         <!--position: absolute;-->
         <!--top: 40%;-->
         <!--width: 500px;-->
         <!--background-color: #ffffff;">-->
 
         <!--<div class="content-frank">正在向设备发起指令,预计还有  15 秒</div>-->
-<!--</div>-->
+    <!--</div>-->
 
-<v-loading-bump style="z-index: 9999; color: red" [remain]="comm.remain" *ngIf="comm.isLoading"></v-loading-bump>
+    <v-loading-bump style="z-index: 9999; color: red" [remain]="comm.remain" *ngIf="comm.isLoading"></v-loading-bump>
+</ion-content>

src/app/other/other.page.scss

@@ -37,3 +37,10 @@
   height: 100%;
   background-color: white;
 }
+
+.ion-tittle {
+  text-align: center;
+  padding-left: 0px;
+  font-weight: lighter;
+  font-size: large
+}

src/app/other/other.page.ts

@@ -177,10 +177,6 @@ export class OtherPage implements OnInit {
 
     }
 
-    onLeftClick() {
-        this.tf.transfer({url: '/home'});
-    }
-
     initAllBtn() {
         if (this.fieldRegionGroup === '发酵池控制组') {
             this.allBtns = [];

src/theme/variables.scss

@@ -12,7 +12,8 @@
   --ion-color-primary-tint: #4c8dff;
 
   /** secondary **/
-  --ion-color-secondary: #0cd1e8;
+  // --ion-color-secondary: #0cd1e8;
+  --ion-color-secondary: #28c9bd;
   --ion-color-secondary-rgb: 12, 209, 232;
   --ion-color-secondary-contrast: #ffffff;
   --ion-color-secondary-contrast-rgb: 255, 255, 255;
@@ -82,6 +83,14 @@
   --ion-color-white-contrast-rgb: 0,0,0;
   --ion-color-white-shade: #e0e0e0;
   --ion-color-white-tint: #ffffff;
+
+  /** light gray **/
+  --ion-color-gray: #efeff4;
+  --ion-color-gray-rgb: 239,239,244;
+  --ion-color-gray-contrast: #000000;
+  --ion-color-gray-contrast-rgb: 0,0,0;
+  --ion-color-gray-shade: #e0e0e0;
+  --ion-color-gray-tint: #ffffff;
 }
 
 .ion-color-white {
@@ -92,3 +101,12 @@
   --ion-color-shade: var(--ion-color-white-shade);
   --ion-color-tint: var(--ion-color-white-tint);
 }
+
+.ion-color-gray {
+  --ion-color-base: var(--ion-color-gray);
+  --ion-color-base-rgb: var(--ion-color-gray-rgb);
+  --ion-color-contrast: var(--ion-color-gray-contrast);
+  --ion-color-contrast-rgb: var(--ion-color-gray-contrast-rgb);
+  --ion-color-shade: var(--ion-color-gray-shade);
+  --ion-color-tint: var(--ion-color-gray-tint);
+}