tab式样微调

config.xml

 <?xml version='1.0' encoding='utf-8'?>
-<widget id="com.witium.muchang.test" version="2.9.6.6.7" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
+<widget id="com.witium.muchang.test" version="2.9.6.6.8" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
     <name>牧场云</name>
     <description>test</description>
     <author email="frank.feng@witium.com" href="http://muchang.witium.com/">Van.chen - frank.feng</author>

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

@@ -30,18 +30,18 @@
 </ion-header>
 <ion-content color="light">
   <ion-router-outlet></ion-router-outlet>
-    <ion-tabs #tabs>
-        <ion-tab-bar slot="top" mode="ios" style="--border: 0px;">
-            <ion-tab-button tab="fan" class="tabSelected ion-segment-button">
+    <ion-tabs>
+        <ion-tab-bar slot="top" mode="ios" style="--border: 0px;height: 30px;" color="light-gray">
+            <ion-tab-button tab="fan" class="tabBtn ion-segment-button">
                 <ion-label>风机</ion-label>
             </ion-tab-button>
-            <ion-tab-button tab="shower" class="tabSelected ion-segment-button" [routerLink]="showerLink">  <!--[rootParams]="fieldRegionNo"-->
+            <ion-tab-button tab="shower" class="tabBtn ion-segment-button" [routerLink]="showerLink">  <!--[rootParams]="fieldRegionNo"-->
                 <ion-label>喷淋</ion-label>
             </ion-tab-button>
-            <ion-tab-button tab="light" class="tabSelected ion-segment-button" [routerLink]="lightLink">
+            <ion-tab-button tab="light" class="tabBtn ion-segment-button" [routerLink]="lightLink">
                 <ion-label>照明</ion-label>
             </ion-tab-button>
-            <ion-tab-button tab="waterchannel" class="tabSelected ion-segment-button" [routerLink]="waterchannelLink">
+            <ion-tab-button tab="waterchannel" class="tabBtn ion-segment-button" [routerLink]="waterchannelLink">
                 <ion-label>水槽</ion-label>
             </ion-tab-button>
         </ion-tab-bar>

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

@@ -57,10 +57,14 @@
 .warmColor4 {
   color: #b22222;
 }
-.tabSelected {
+.tabBtn {
   // --background-focused: #62C7CC;
-  --color-selected: #62C7CC;
+  // --color-selected: #62C7CC;
   // --background: #62C7CC;
+  border-top-left-radius: 5px;
+  border-top-right-radius: 6px;
+  border-right: 3px solid #f0f0f0;
+  height: 30px;
 }
 
 .inHouseDiv {
@@ -78,3 +82,17 @@
   height: 35px;
   vertical-align: middle;
 }
+
+.tab-selected{
+
+  color: #ffffff !important;
+  background-color: #62C7CC;
+
+}
+
+.tab-unselected{
+
+  color: #cecece !important;
+  background-color: #dedede;
+
+}

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

@@ -3,7 +3,7 @@
     <ion-buttons slot="start" >
       <ion-back-button  mode="ios" defaultHref="/index" text=""></ion-back-button>
     </ion-buttons>
-    <ion-searchbar mode="ios" color="light" (ionInput)="getItems($event)" debounce="1000" style="height: 40px;" placeholder="输入名称进行搜索"></ion-searchbar>
+    <ion-searchbar mode="ios" color="light" autocomplete="on" (ionInput)="getItems($event)" debounce="1000" style="height: 40px;" placeholder="输入名称进行搜索"></ion-searchbar>
   </ion-toolbar>
   <!--<ion-slides style="width: 100%; height: 125px;" mode="ios"-->
               <!--[options]="lunbo" #slide (ionSlideTouchEnd)="slideDidChange()">-->

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

-<router-outlet name='tabs' (activate)='onActivate($event)'></router-outlet>
+<router-outlet name='tabs'></router-outlet>
 <ion-content>
   <ion-tabs>
     <ion-tab-bar slot="bottom" >

src/theme/variables.scss

@@ -103,6 +103,14 @@
   --ion-color-gray-contrast-rgb: 0,0,0;
   --ion-color-gray-shade: #e0e0e0;
   --ion-color-gray-tint: #ffffff;
+
+  /** light gray **/
+  --ion-color-light-gray: #dedee387;
+  --ion-color-light-gray-rgb: 239,239,244;
+  --ion-color-light-gray-contrast: #000000;
+  --ion-color-light-gray-contrast-rgb: 0,0,0;
+  --ion-color-light-gray-shade: #dedee3;
+  --ion-color-light-gray-tint: #ffffff;
 }
 
 .ion-color-white {
@@ -122,3 +130,12 @@
   --ion-color-shade: var(--ion-color-gray-shade);
   --ion-color-tint: var(--ion-color-gray-tint);
 }
+
+.ion-color-light-gray {
+  --ion-color-base: var(--ion-color-light-gray);
+  --ion-color-base-rgb: var(--ion-color-light-gray-rgb);
+  --ion-color-contrast: var(--ion-color-light-gray-contrast);
+  --ion-color-contrast-rgb: var(--ion-color-light-gray-contrast-rgb);
+  --ion-color-shade: var(--ion-color-light-gray-shade);
+  --ion-color-tint: var(--ion-color-light-gray-tint);
+}