index页面修改,alarm页面修改

src/app/east/east.page.ts

@@ -142,7 +142,8 @@ export class EastPage implements OnInit {
         this.api.app.getLiquidLevelData([{fieldRegionNo: this.fieldRegionNo}, (data) => {
             if (data.liquidLevel) {
                 this.yewei = Number(data.liquidLevel);
-                this.proc = (Number(data.liquidLevel) / (Number(data.liquidLevelMax) * 1.5)) * 100;
+                this.proc = (Number(data.liquidLevel) / (Number(data.liquidLevelMax) * 1.5)) > 1
+                    ? 100 : (Number(data.liquidLevel) / (Number(data.liquidLevelMax) * 1.5)) * 100;
                 this.color = Number(data.liquidLevel) > Number(data.liquidLevelMax) ||
                 Number(data.liquidLevel) < Number(data.liquidLevelMin) ? 'red' : '';
             }

src/app/index/index.page.html

 <div class="mainCon" style="background: url('../../assets/bg/index.png') 100% 100%;background-size: cover;">
     <div class="mainTop">
         <div class="imgTop">
-            <img style="width: auto !important;" src="../../assets/icon/cow.png">
+            <img style="width: auto !important;" src="../../assets/img/cow.png">
         </div>
         <div style="font-size: 35px;line-height: 55px;height: 20%;border-bottom: 2px solid #ccc;width: 65%;display: inline-block;margin-bottom: 3%;">
             Welcome!
@@ -11,15 +11,10 @@
     </div>
     <div class="mainContent">
         <div class="contentPart">
-            <div class="leftPart" (click)="goTo('home')">
-                <div class="left_inner"></div>
-            </div>
-            <div class="rightPart" (click)="goTo('row')">
-                <div class="right_inner"></div>
-            </div>
-            <div class="centerPart" (click)="goTo('alarm')">
-                <div class="center_inner"></div>
-            </div>
+            <div class="leftOnPart" (click)="goTo('home')"></div>
+            <div class="rightOnPart " (click)="goTo('row')"></div>
+            <div class="leftUnderPart" (click)="goTo('alarm')"></div>
+            <div class="rightUnderPart" (click)="goTo('mine')"></div>
         </div>
     </div>
 </div>

src/app/index/index.page.scss

@@ -21,41 +21,41 @@
   position: relative;
 }
 
-.leftPart {
-  background: url("../../assets/index/left.png");
-  background-size: 110% 100%;
-  height: 100%;
-  width: calc(50% - 0.5px);
-  margin-right: 1px;
-  display: inline-block;
-  border-radius: 65px 0 0 65px;
+.leftOnPart {
+  background: url("../../assets/index/1.png") center;
+  position: absolute;
+  top: 0;
+  left: 0;
 }
 
-.rightPart {
-  background: url("../../assets/index/right.png");
-  height: 100%;
-  width: calc(50% - 0.5px);
-  background-size: 100% 100%;
-  margin-left: -10px;
-  display: inline-block;
-  border-radius: 0 65px 65px 0;
+.rightOnPart {
+  background: url("../../assets/index/2.png") center;
+  position: absolute;
+  top: 0;
+  left: 50%;
 }
 
-.rightPart:active, .leftPart:active {
-  transform:rotateY(180deg);
-  transition: 0.5s all;
+.leftUnderPart {
+  background: url("../../assets/index/3.png") center;
+  position: absolute;
+  top: 50%;
+  left: 0;
 }
 
-.centerPart {
-  background: url("../../assets/index/center.png") center;
-  background-size: 110%;
+.rightUnderPart {
+  background: url("../../assets/index/4.png") center;
   position: absolute;
-  top: calc(50% - 75px);
-  height: 150px;
-  width: 150px;
-  left: calc(50% - 75px);
-  border-radius: 100%;
-}
-.centerPart:active {
-  background-color: #ff9933;
+  top: 50%;
+  left: 50%;
+}
+
+.leftOnPart, .rightOnPart, .leftUnderPart, .rightUnderPart {
+  background-size: 100% 100%;
+  height: 50%;
+  width: 50%;
+}
+
+.leftOnPart:active, .rightOnPart:active, .leftUnderPart:active, .rightUnderPart:active {
+  transform:rotateY(180deg);
+  transition: 0.6s all;
 }

src/app/index/index.page.ts

@@ -13,7 +13,9 @@ export class IndexPage implements OnInit {
   ngOnInit() {}
 
   goTo(e) {
-    this.tf.transfer({url: '/' + e});
+    setTimeout(() => {
+      this.tf.transfer({url: '/' + e});
+    }, 300);
   }
 
 }

src/app/mine/mine.page.html

@@ -2,7 +2,7 @@
   <div class="topBar">
     <div class="top">
       <div class="imgPart">
-        <img style="height: 100%" src="../../../assets/icon/favicon.png">
+        <img style="height: 100%;border-radius: 100%" src="../../../assets/img/none.png">
       </div>
       <div class="topRight">
         <div class="rightTop">{{user.userName}}</div>
@@ -25,6 +25,6 @@
     </div>
   </div>
   <div class="bottomBtn">
-    <ion-button mode="ios" color="primary" expand="block" class="button" (click)="loginOut()">退出登录</ion-button>
+    <div Button class="button" (click)="loginOut()" [type]="'primary'" style="letter-spacing: 2px">退出登录</div>
   </div>
 </div>

src/app/mine/mine.page.scss

@@ -6,7 +6,7 @@
 .topBar {
   height: 25%;
   padding-top: 15%;
-  background-color: lavender;
+  background-color: rgba(40, 201, 189, 0.6);
 
   .top {
     padding: 5% 8%;
@@ -35,7 +35,7 @@
 
 .middleCon {
   .line {
-    border-bottom: 2px solid #1890ff;
+    border-bottom: 2px solid #28c9bd;
     padding: 8% 25px 0 25px;
 
     .label {
@@ -60,8 +60,9 @@
   .button {
     padding: 0;
     margin: 0;
-    border-radius: 0;
-    background-color: #1890ff;
+    background-color: #28c9bd;
+    border-radius: 5px;
+    border: 1px solid #28c9bd;
   }
 }