增加部分样式

angular.json

@@ -43,6 +43,9 @@
               },
               {
                 "input": "src/global.scss"
+              },
+              {
+                "input": "src/assets/icon/iconfont.css"
               }
             ],
             "scripts": [],

src/app/home/home.page.html

 <ion-slides @fade id="slideComponent" style="width: 100%;height: 100%;"
             mode="ios" [options]="options" [@toLeft]="toLeft" [@toRight]="toRight" (ionSlideDidChange)="slideOnChange()">
   <ion-slide>
-    <div class="box" style="color: #ffd31a"><app-page-one></app-page-one></div>
+    <div class="box"><app-page-one></app-page-one></div>
   </ion-slide>
   <ion-slide>
-    <div class="box" id="page_two" style="color: #f04141"><app-page-two></app-page-two></div>
+    <div class="box" id="page_two"><app-page-two></app-page-two></div>
   </ion-slide>
   <ion-slide>
-    <div class="box" style="color: #7e57ff"><app-page-three></app-page-three></div>
+    <div class="box"><app-page-three></app-page-three></div>
   </ion-slide>
   <ion-slide>
-    <div class="box" style="color: #cccccc"><app-page-four></app-page-four></div>
+    <div class="box"><app-page-four></app-page-four></div>
   </ion-slide>
 </ion-slides>
 <ion-row class="bottomPart">
-  <ion-col [ngClass]="{'activeBar': active[0]}" (click)="goActive(0)">首页</ion-col>
-  <ion-col class="padLeft" [ngClass]="{'activeBar': active[1]}" (click)="goActive(1)">第二页</ion-col>
-  <ion-col class="padLeft" [ngClass]="{'activeBar': active[2]}" (click)="goActive(2)">第三页</ion-col>
-  <ion-col class="padLeft" [ngClass]="{'activeBar': active[3]}" (click)="goActive(3)">我的</ion-col>
+  <ion-col [ngClass]="{'activeBar': active[0]}" (click)="goActive(0)">
+    <div class="icoPart"><i class="icofo ioshouye"></i></div>
+    首页</ion-col>
+  <ion-col class="padLeft" [ngClass]="{'activeBar': active[1]}" (click)="goActive(1)">
+    <div class="icoPart"><i class="icofo iojiankong"></i></div>
+    监控</ion-col>
+  <ion-col class="padLeft" [ngClass]="{'activeBar': active[2]}" (click)="goActive(2)">
+    <div class="icoPart"><i class="icofo iobaojing"></i></div>
+    报警</ion-col>
+  <ion-col class="padLeft" [ngClass]="{'activeBar': active[3]}" (click)="goActive(3)">
+    <div class="icoPart"><i class="icofo iowode"></i></div>
+    我的</ion-col>
 </ion-row>

src/app/home/home.page.scss

 .bottomPart {
   height: 55px;
-  line-height: 35px;
   text-align: center;
-  border-top: 1px solid #ccc;
-  color: cornflowerblue;
+  color: #1890ff;
   z-index: 999;
+  font-size: 14px;
 }
 
 .padLeft {
-  border-left: 1px solid #cccccc;
 }
 
 .activeBar {
-  background-color: #f25454;
+  background-color: #1890ff;
   color: #ffffff;
+  font-size: 15px;
+  border-top-left-radius: 50px;
+  border-top-right-radius: 50px;
 }
 
 .box {
@@ -24,3 +25,7 @@
 #slideComponent {
   z-index: 10;
 }
+
+.icoPart {
+  font-size: 20px;
+}

src/app/main/page-one/page-one.component.html

-<ion-slides style="width: 100%;height: 200px;"
-            mode="ios" [options]="options">
-  <ion-slide>
-    <div class="inBox" style="color: #ffd31a"><h1>这是首页轮播图1</h1></div>
-  </ion-slide>
-  <ion-slide>
-    <div class="inBox" style="color: #f04141"><h1>这是首页轮播图2</h1></div>
-  </ion-slide>
-  <ion-slide>
-    <div class="inBox" style="color: #7e57ff"><h1>这是首页轮播图3</h1></div>
-  </ion-slide>
-  <ion-slide>
-    <div class="inBox" style="color: #cccccc"><h1>这是首页轮播图4</h1></div>
-  </ion-slide>
-</ion-slides>
+<div class="mainContent">
+    <ion-slides #slide style="width: 100%;height: 200px;"
+                mode="ios" [options]="options" (ionSlideTouchEnd)="slideDidChange()">
+        <ion-slide class="slideCon" *ngFor="let one of imgs">
+            <div class="inBox">
+                <img [src]="'../../../assets/imgs/' + one">
+            </div>
+        </ion-slide>
+        <!--<ion-slide>-->
+            <!--<div class="inBox">-->
+                <!--<img src="../../../assets/imgs/2.png">-->
+            <!--</div>-->
+        <!--</ion-slide>-->
+        <!--<ion-slide>-->
+            <!--<div class="inBox">-->
+                <!--<img src="../../../assets/imgs/3.png">-->
+            <!--</div>-->
+        <!--</ion-slide>-->
+        <!--<ion-slide>-->
+            <!--<div class="inBox">-->
+                <!--<img src="../../../assets/imgs/4.png">-->
+            <!--</div>-->
+        <!--</ion-slide>-->
+    </ion-slides>
+    <div class="partCard">
+        <div class="partTitle">
+            <i class="icofo iostate"></i>
+            <label>设备状态</label>
+        </div>
+        <div class="partCon">
+            <div class="item" *ngFor="let one of items">
+                <div class="top">
+                    {{one.name}}
+                </div>
+                <div [class]="'bottom ' + one.color">
+                    <div class="left">
+                        <i [class]="'icofo ' + one.icon"></i>
+                    </div>
+                    <div class="right">{{one.num}}</div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="partCard">
+        <div class="partTitle">
+            <i class="icofo ioxihuan1"></i>
+            <label>关注列表</label>
+        </div>
+        <div class="partCon">
+            <div class="list" *ngFor="let one of list">
+                <div class="top">
+                    <div class="left">
+                        <div class="title">
+                            设备名称:
+                        </div>
+                        <div class="name">
+                            {{one.name}}
+                        </div>
+                    </div>
+                    <div class="right">
+                        {{one.time | date: 'yyyy-MM-dd HH:mm:ss'}}
+                    </div>
+                </div>
+                <div class="middle">
+                    <div class="one" *ngFor="let two of params">
+                        <div class="label">{{two.label}}</div>
+                        <div class="value">{{one[two.value]}}</div>
+                    </div>
+                </div>
+                <div class="bottom">
+                    <div [class]="one.online === 1 ? 'tag online' : 'tag offline'">
+                        {{one.online === 1 ? '在线' : '离线'}}
+                    </div>
+                    <div class="tag error" *ngIf="one.error === 1">
+                        故障
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

src/app/main/page-one/page-one.component.scss

+.item {
+  width: calc(25% - 6px);
+  display: inline-block;
+  margin: 2px;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+
+  .top {
+    font-size: 15px;
+    border-bottom: 1px solid #cccccc;
+    height: 30px;
+    line-height: 30px;
+  }
+
+  .left {
+    border-right: 1px solid #cccc;
+  }
+
+  .left, .right {
+    display: inline-block;
+    width: 50%;
+    line-height: 30px;
+  }
+}
+
+.zi {
+  color: #DA45FF;
+}
+
+.lv {
+  color: #009966;
+}
+
+.hong {
+  color: #ff0000;
+}
+
+.hui {
+  color: #cccccc;
+}
+
+.error {
+  background-color: #ff0000;
+  color: #ffffff;
+}
+
+.online {
+  background-color: #009966;
+  color: #ffffff;
+}
+
+.offline {
+  background-color: #cccccc;
+  color: #888888;
+}
+
+.list {
+  font-size: 14px;
+
+  .top {
+    text-align: left;
+    position: relative;
+    border-bottom: 1px solid #cccc;
+    line-height: 25px;
+
+    .left {
+      .title, .name {
+        display: inline-block;
+        padding: 0 5px;
+      }
+    }
+
+    .right {
+      display: inline-block;
+      position: absolute;
+      right: 5px;
+      bottom: 0;
+    }
+  }
+
+  .middle {
+    .one {
+      width: 33%;
+      display: inline-block;
+      line-height: 30px;
+    }
+  }
+
+  .bottom {
+    border-bottom: 1px solid #ccc;
+    text-align: left;
+    padding-bottom: 3px;
+
+    .tag {
+      text-align: center;
+      display: inline-block;
+      margin: 0 3px;
+      width: 40px;
+      line-height: 20px;
+      height: 20px;
+      border-radius: 10px;
+    }
+  }
+}

src/app/main/page-one/page-one.component.ts

-import { Component, OnInit } from '@angular/core';
+import {Component, OnInit, ViewChild} from '@angular/core';
 
 @Component({
-  selector: 'app-page-one',
-  templateUrl: './page-one.component.html',
-  styleUrls: ['./page-one.component.scss'],
+    selector: 'app-page-one',
+    templateUrl: './page-one.component.html',
+    styleUrls: ['./page-one.component.scss'],
 })
 export class PageOneComponent implements OnInit {
 
-  options = {
-    speed: 1000,
-    allowTouchMove: true
-  };
-  constructor() { }
+    @ViewChild('slide') slide;
+    options = {
+        speed: 1000,
+        allowTouchMove: true,
+        effect: 'flip',
+        autoplay: {
+            delay: 2000,
+        },
+        loop: true,
+        spaceBetween: 0
+    };
+    items = [{
+        name: '总数',
+        icon: 'iozongshu',
+        num: 20,
+        color: 'zi'
+    }, {
+        name: '在线',
+        icon: 'iodui',
+        num: 12,
+        color: 'lv'
+    }, {
+        name: '故障',
+        icon: 'iogantan',
+        num: 3,
+        color: 'hong'
+    }, {
+        name: '离线',
+        icon: 'iolixian',
+        num: 5,
+        color: 'hui'
+    }];
 
-  ngOnInit() {}
+    list = [{
+        name: '设备一',
+        time: new Date().getTime(),
+        temp: '20℃',
+        humid: '25%rH',
+        press: '1003kpa',
+        online: 1,
+        error: 1
+    }, {
+        name: '设备二',
+        time: new Date().getTime() - 24 * 3600 * 1000,
+        temp: '21℃',
+        humid: '29%rH',
+        press: '1005kpa',
+        online: 0,
+        error: 1
+    }, {
+        name: '设备三',
+        time: new Date().getTime() + 24 * 3600 * 1000,
+        temp: '25℃',
+        humid: '22%rH',
+        press: '1010kpa',
+        online: 1,
+        error: 0
+    }, {
+        name: '设备三',
+        time: new Date().getTime() + 24 * 3600 * 1000,
+        temp: '25℃',
+        humid: '22%rH',
+        press: '1010kpa',
+        online: 1,
+        error: 0
+    }, {
+        name: '设备三',
+        time: new Date().getTime() + 24 * 3600 * 1000,
+        temp: '25℃',
+        humid: '22%rH',
+        press: '1010kpa',
+        online: 1,
+        error: 0
+    }, {
+        name: '设备三',
+        time: new Date().getTime() + 24 * 3600 * 1000,
+        temp: '25℃',
+        humid: '22%rH',
+        press: '1010kpa',
+        online: 1,
+        error: 0
+    }, {
+        name: '设备三',
+        time: new Date().getTime() + 24 * 3600 * 1000,
+        temp: '25℃',
+        humid: '22%rH',
+        press: '1010kpa',
+        online: 1,
+        error: 0
+    }, {
+        name: '设备三',
+        time: new Date().getTime() + 24 * 3600 * 1000,
+        temp: '25℃',
+        humid: '22%rH',
+        press: '1010kpa',
+        online: 1,
+        error: 0
+    }];
+
+    imgs = ['1.png', '2.png', '3.png', '4.png'];
+
+    params = [{label: '温度', value: 'temp'},
+        {label: '湿度', value: 'humid'},
+        {label: '压力', value: 'press'}];
+
+    constructor() {
+    }
+
+    ngOnInit() {
+    }
+
+    slideDidChange() {
+        console.log('111');
+        this.slide.startAutoplay();
+    }
 
 }

src/app/main/page-two/page-two.component.html

-<p>
-  page-two works!
-</p>
-<ion-button mode="ios" color="primary" expand="full" class="loginBtn" (click)="toDetail()">Detail</ion-button>
+<div class="mainContent" style="text-align: left">
+  <ion-searchbar placeholder="请输入设备名称" mode="ios" clearIcon="close-circle"
+                 (ionBlur)="historyShow()" (ionFocus)="historyShow()"></ion-searchbar>
+</div>

src/app/main/page-two/page-two.component.ts

@@ -14,13 +14,7 @@ export class PageTwoComponent implements OnInit {
     ngOnInit() {
     }
 
-    toDetail() {
-        this.tf.transfer({
-            from: 'app-home',
-            to: 'app-page-detail',
-            url: '/main/detail',
-            query: '',
-            hash: ''
-        });
+    historyShow() {
+
     }
 }

src/assets/icon/iconfont.css

+@font-face {font-family: "icofo";
+  src: url('iconfont.eot?t=1553842525715'); /* IE9 */
+  src: url('iconfont.eot?t=1553842525715#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
+  url('iconfont.woff?t=1553842525715') format('woff'),
+  url('iconfont.ttf?t=1553842525715') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
+  url('iconfont.svg?t=1553842525715#icofo') format('svg'); /* iOS 4.1- */
+}
+
+.icofo {
+  font-family: "icofo" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.iofanhui:before {
+  content: "\e6c3";
+}
+
+.iolixian:before {
+  content: "\e786";
+}
+
+.ioxihuan1:before {
+  content: "\e609";
+}
+
+.iojiankong:before {
+  content: "\e61b";
+}
+
+.ioxihuan:before {
+  content: "\e613";
+}
+
+.ioshaixuan:before {
+  content: "\e648";
+}
+
+.iozongshu:before {
+  content: "\e638";
+}
+
+.iowode:before {
+  content: "\e69b";
+}
+
+.iobaojing:before {
+  content: "\e677";
+}
+
+.ioshouye:before {
+  content: "\e607";
+}
+
+.iostate:before {
+  content: "\e655";
+}
+
+.iogantan:before {
+  content: "\e76e";
+}
+
+.iosearch:before {
+  content: "\e615";
+}
+
+.iodui:before {
+  content: "\e644";
+}
+

src/global.scss

@@ -8,9 +8,39 @@
 @import '~@ionic/angular/css/text-alignment.css';
 @import '~@ionic/angular/css/text-transformation.css';
 @import '~@ionic/angular/css/flex-utils.css';
-
+$themeColor: #1890ff;
 .msgToast, .btnToast {
   --background: rgba(0, 0, 0, 0.7);
   --color: #ffffff;
   text-align: center;
 }
+.partCard {
+  padding: 5px 10px 0 10px;
+  .partTitle {
+    text-align: left;
+    font-size: 16px;
+    padding: 5px;
+    border-bottom: 2px solid $themeColor;
+    color: $themeColor;
+    label {
+      padding-left: 8px;
+    }
+  }
+  .partCon {
+    padding: 5px 0 0 0;
+  }
+}
+
+.mainContent {
+  height: 100%;
+  overflow-y: auto;
+}
+
+.inBox {
+  width: 100%;
+  height: 100%;
+  img {
+    width: 100% !important;
+    height: 100%;
+  }
+}

src/theme/variables.scss

@@ -2,10 +2,11 @@
 // http://ionicframework.com/docs/theming/
 
 /** Ionic CSS Variables **/
+$themeColor: #1890ff;
 :root {
   /** primary **/
-  --ion-color-primary: #3880ff;
-  --ion-color-primary-rgb: 56, 128, 255;
+  --ion-color-primary: $themeColor;
+  --ion-color-primary-rgb: 24, 144, 255;
   --ion-color-primary-contrast: #ffffff;
   --ion-color-primary-contrast-rgb: 255, 255, 255;
   --ion-color-primary-shade: #3171e0;