增加部分样式

32737ec8 · van.chen · f279db0d · 32737ec8 · 32737ec8 · 32737ec8
Commit 32737ec8 authored Mar 29, 2019 by van.chen
15 changed files
--- a/angular.json
+++ b/angular.json
@@ -43,6 +43,9 @@
              },
              {
                "input": "src/global.scss"
+              },
+              {
+                "input": "src/assets/icon/iconfont.css"
              }
            ],
            "scripts": [],

--- a/src/app/home/home.page.html
+++ b/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 [ngClass]="{'activeBar': active[0]}" (click)="goActive(0)">
-  <ion-col class="padLeft" [ngClass]="{'activeBar': active[1]}" (click)="goActive(1)">第二页</ion-col>
+    <div class="icoPart"><i class="icofo ioshouye"></i></div>
-  <ion-col class="padLeft" [ngClass]="{'activeBar': active[2]}" (click)="goActive(2)">第三页</ion-col>
+    首页</ion-col>
-  <ion-col class="padLeft" [ngClass]="{'activeBar': active[3]}" (click)="goActive(3)">我的</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>
--- a/src/app/home/home.page.scss
+++ b/src/app/home/home.page.scss
 .bottomPart {
  height: 55px;
-  line-height: 35px;
  text-align: center;
-  border-top: 1px solid #ccc;
+  color: #1890ff;
-  color: cornflowerblue;
  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;
+}
--- a/src/app/main/page-one/page-one.component.html
+++ b/src/app/main/page-one/page-one.component.html
-<ion-slides style="width: 100%;height: 200px;"
+<div class="mainContent">
-            mode="ios" [options]="options">
+    <ion-slides #slide style="width: 100%;height: 200px;"
-  <ion-slide>
+                mode="ios" [options]="options" (ionSlideTouchEnd)="slideDidChange()">
-    <div class="inBox" style="color: #ffd31a"><h1>这是首页轮播图1</h1></div>
+        <ion-slide class="slideCon" *ngFor="let one of imgs">
-  </ion-slide>
+            <div class="inBox">
-  <ion-slide>
+                <img [src]="'../../../assets/imgs/' + one">
-    <div class="inBox" style="color: #f04141"><h1>这是首页轮播图2</h1></div>
+            </div>
-  </ion-slide>
+        </ion-slide>
-  <ion-slide>
+        <!--<ion-slide>-->
-    <div class="inBox" style="color: #7e57ff"><h1>这是首页轮播图3</h1></div>
+            <!--<div class="inBox">-->
-  </ion-slide>
+                <!--<img src="../../../assets/imgs/2.png">-->
-  <ion-slide>
+            <!--</div>-->
-    <div class="inBox" style="color: #cccccc"><h1>这是首页轮播图4</h1></div>
+        <!--</ion-slide>-->
-  </ion-slide>
+        <!--<ion-slide>-->
-</ion-slides>
+            <!--<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>
--- a/src/app/main/page-one/page-one.component.scss
+++ b/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;
+    }
+  }
+}
--- a/src/app/main/page-one/page-one.component.ts
+++ b/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',
+    selector: 'app-page-one',
-  templateUrl: './page-one.component.html',
+    templateUrl: './page-one.component.html',
-  styleUrls: ['./page-one.component.scss'],
+    styleUrls: ['./page-one.component.scss'],
 })
 export class PageOneComponent implements OnInit {
-  options = {
+    @ViewChild('slide') slide;
-    speed: 1000,
+    options = {
-    allowTouchMove: true
+        speed: 1000,
-  };
+        allowTouchMove: true,
-  constructor() { }
+        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();
+    }
 }
--- a/src/app/main/page-two/page-two.component.html
+++ b/src/app/main/page-two/page-two.component.html
-<p>
+<div class="mainContent" style="text-align: left">
-  page-two works!
+  <ion-searchbar placeholder="请输入设备名称" mode="ios" clearIcon="close-circle"
-</p>
+                 (ionBlur)="historyShow()" (ionFocus)="historyShow()"></ion-searchbar>
-<ion-button mode="ios" color="primary" expand="full" class="loginBtn" (click)="toDetail()">Detail</ion-button>
+</div>
--- a/src/app/main/page-two/page-two.component.ts
+++ b/src/app/main/page-two/page-two.component.ts
@@ -14,13 +14,7 @@ export class PageTwoComponent implements OnInit {
    ngOnInit() {
    }
-    toDetail() {
+    historyShow() {
-        this.tf.transfer({
-            from: 'app-home',
-            to: 'app-page-detail',
-            url: '/main/detail',
-            query: '',
-            hash: ''
-        });
    }
 }
--- a/src/assets/icon/iconfont.css
+++ b/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";
+}
--- a/src/assets/icon/iconfont.eot
+++ b/src/assets/icon/iconfont.eot
--- a/src/assets/icon/iconfont.svg
+++ b/src/assets/icon/iconfont.svg
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<!--
+2013-9-30: Created.
+-->
+<svg>
+<metadata>
+Created by iconfont
+</metadata>
+<defs>
+<font id="icofo" horiz-adv-x="1024" >
+  <font-face
+    font-family="icofo"
+    font-weight="500"
+    font-stretch="normal"
+    units-per-em="1024"
+    ascent="896"
+    descent="-128"
+  />
+    <missing-glyph />
+    <glyph glyph-name="fanhui" unicode="&#59075;" d="M407.19181657 564.53261631l0 207.50511368-363.26838666-363.1802104 363.26838666-363.33420786 0 212.82422906c259.42330694 0 441.09041087-83.00825563 570.77350036-264.66418204C926.12288087 253.17124536999995 770.44902571 512.5386658699999 407.19181657 564.53261631"  horiz-adv-x="1024" />
+    <glyph glyph-name="lixian" unicode="&#59270;" d="M759.53749653 501.262704l141.95303574 68.37650133 47.31986133-48.3502624-141.95958507-68.38305066L759.53749653 501.262704zM664.91087147 597.97632747l189.27289706 193.41414933 47.30676374-48.3502624L712.2176352 549.6129664 664.91087147 597.97632747zM570.27878933 694.67685333l66.90949014 145.08462614 47.32641066-48.3710016-66.9367776-145.06388694L570.27878933 694.67685333zM642.04666347 93.19329706999997l37.527776-45.70986027c27.13644267-27.6549184 70.90775147-27.51847787 97.82588906 0.3754848l73.4390016 75.54783147c26.9181376 27.8251968 26.70638187 73.09844587-0.396224 100.61692266l-37.6107328 45.72295787c-19.2075936 19.55579093-46.862512 29.5585408-71.01690453 21.21381973l-76.1961984 78.8911776c53.9312384 55.6645824 141.69325227 55.91672533 195.83624747 0.63417707l86.76545066-95.87424c54.21176107-55.3982496 54.4770016-145.4328224 0.5665024-201.16617173L826.74060693-52.75800106999998C772.89123307-108.29378347 685.17615467-108.61360000000002 630.88362133-53.276475730000016l-86.73816213 95.88188053c-54.14299413 55.46701653-54.38858773 145.4328224-0.62762773 201.09085653l76.43524266-77.3292032C613.68880213 142.58050987000001 623.7122912 111.92280213000004 642.04666347 93.19329706999997zM404.99655467 605.44127787c7.710544 24.30502293-1.74644267 52.1444096-20.5654528 71.37165013l-28.20723094 46.24907413c-26.7882464 27.19756907-69.78238827 27.068768-96.1951488-0.32745813l-71.94579306-74.3133152c-26.4476896-27.38203627-26.330896-71.43386773 0.2794304-98.69256213l28.20723093-46.32329814 56.38826453-39.9848032c17.88357227-18.22522027-9.11642987 11.76993173 13.65390614 18.18374187l74.401728-76.38066667c-52.92921707-54.7029472-138.9840832-54.9485408-192.24730774-0.57305173l-76.38066666 95.4452704c-53.35163733 54.37549013-53.56339413 142.74439253-0.59379094 197.37202453L211.58240533 821.441296c53.02418027 54.573056 139.14781227 54.95509013 192.2822368 0.6418176l76.57823254-95.6286464c53.18790827-54.2521472 53.37237653-142.75094187 0.4911872-197.3305472L404.99655467 605.44127787zM224.21900907 267.78188693000004l-141.95303574-68.38305066-47.31986133 48.35681173 141.95958507 68.38305067L224.21900907 267.78188693000004zM318.84563413 183.52694827000005L129.57928533-9.90794027000004l-47.313312 48.3502624 189.27289707 193.43488854L318.84563413 183.52694827000005zM413.47771627 86.8067744l-63.55304534-145.07043627-47.29912213 48.35681174 63.51811627 145.0780768L413.47771627 86.8067744z"  horiz-adv-x="1024" />
+    <glyph glyph-name="xihuan1" unicode="&#58889;" d="M936.038 750.874c-109.38 118.519-286.737 118.519-396.083 0l-27.9296-30.2763-27.9467 30.2763c-109.363 118.519-286.703 118.519-396.066 0-109.38-118.511-109.38-310.647 0-429.158l27.9296-30.2507 396.083-365.414 396.066 365.414 27.9467 30.2507C1045.4 440.226 1045.4 632.363 936.038 750.874L936.038 750.874Z"  horiz-adv-x="1024" />
+    <glyph glyph-name="jiankong" unicode="&#58907;" d="M1024.512 194.55999999999995c-2.56-5.12-5.632-10.24-7.68-15.872-19.968-53.248-64-86.016-120.832-86.528-256-0.512-511.488-0.512-767.488 0-56.832 0-100.864 33.28-120.832 86.528-2.048 5.632-5.12 10.24-7.68 15.872v496.64c21.504 66.048 64.512 104.96 136.704 104.96 250.368 0 500.736 0.512 751.104 0 68.608 0 107.52-29.696 132.096-95.744 1.024-3.072 3.072-6.144 4.608-9.216v-496.64z m-511.488 537.6h-371.2c-56.832 0-77.312-20.48-77.824-76.8-0.512-140.8-0.512-281.6 0-421.888 0-56.832 20.48-76.8 77.312-76.8h741.888c55.808 0 76.288 20.48 76.288 75.776 0.512 141.312 0.512 283.136 0 424.448 0 54.784-21.504 75.776-76.288 75.776-122.88-0.512-246.272-0.512-370.176-0.512zM193.536-97.79200000000003v60.928h190.464v62.976h255.488v-60.928h191.488v-62.976h-637.44zM574.464 220.67200000000003h-123.904v381.952h123.904v-381.952zM830.976 474.624v-252.416h-124.416v252.416h124.416zM318.464 220.67200000000003H195.072v189.44h123.392v-189.44z"  horiz-adv-x="1024" />
+    <glyph glyph-name="xihuan" unicode="&#58899;" d="M511.952-61.511999999999944a30.848 30.848 0 0 0-21.872 9.064L79.624 357.99199999999996c-106.16 106.16-106.16 278.896-0.016 385.024l6.752 6.768c51.464 51.416 119.832 79.72 192.56 79.72s141.096-28.304 192.512-79.72l40.512-40.488 40.496 40.488c51.392 51.416 119.76 79.72 192.504 79.72 72.752 0 141.12-28.304 192.528-79.72l6.8-6.8c51.424-51.392 79.76-119.752 79.728-192.504 0-72.712-28.304-141.08-79.728-192.496l-410.456-410.448a30.832 30.832 0 0 0-21.864-9.048zM278.92 767.64c-56.208 0-109.048-21.872-148.784-61.6l-6.752-6.768C41.336 617.256 41.344 483.784 123.368 401.736l388.584-388.568 388.584 388.568c39.728 39.728 61.6 92.56 61.6 148.752 0 56.224-21.872 109.032-61.6 148.728l-6.8 6.832c-39.728 39.728-92.56 61.6-148.792 61.6-56.216 0-109.024-21.872-148.752-61.6l-62.376-62.352a30.928 30.928 0 0 0-43.744 0l-62.384 62.328c-39.72 39.744-92.56 61.616-148.768 61.616z"  horiz-adv-x="1024" />
+    <glyph glyph-name="shaixuan" unicode="&#58952;" d="M900.3614811 845.17925888c14.56355555 0 24.27259221-9.70903666 24.27259335-24.27259221v-43.69066667c0-4.8545189-2.42725888-12.13629667-4.8545189-14.56355555L599.38133333 468.95407445c-24.27259221-21.84533333-38.83614777-55.82696334-38.83614776-89.80859335v-436.90666667L475.59111111-4.361481099999992c-7.28177778 4.8545189-12.13629667 12.13629667-12.13629668 19.41807331v364.08888889c0 33.98163001-14.56355555 65.536-38.83614776 89.80859335L104.22044445 762.65244445C101.79318557 767.50696334 99.36592555 772.3614811 99.36592555 777.216V820.90666667c0 12.13629667 9.70903666 24.27259221 24.27259335 24.27259221h776.7229622m0 48.54518557H123.6385189C82.37511111 893.72444445 50.82074112 862.17007445 50.82074112 820.90666667v-43.69066667c0-19.41807445 7.28177778-36.40888889 19.41807331-48.54518557L390.63703666 432.54518557c14.56355555-14.56355555 24.27259221-33.98163001 24.27259335-53.39970447v-361.66162887c0-24.27259221 12.13629667-48.54518557 33.98162887-60.68148224l123.79022222-75.24503666c2.42725888-7.28177778 7.28177778-7.28177778 12.13629668-7.28177778 12.13629667 0 24.27259221 9.70903666 24.27259221 24.27259222V379.1454811c0 19.41807445 9.70903666 38.83614777 24.27259335 53.39970447L953.76118557 728.6708144300001c12.13629667 14.56355555 19.41807445 31.55436999 19.41807331 48.54518557V820.90666667c0 41.26340779-31.55436999 72.81777778-72.81777778 72.81777778z"  horiz-adv-x="1024" />
+    <glyph glyph-name="zongshu" unicode="&#58936;" d="M998.28682903 409.17189215C998.28440178 670.0440083 787.49392592 882.48016592 525.34992592 882.79935052V385.21362963h473.17841541c0.36530252 8.49540741-0.2415123 16.23715082-0.2415123 23.95826252zM506.13816889-58.069447110000056c-232.99140267-0.00970903-422.01421748 188.53008118-422.00572207 421.52027022C84.12637867 577.5399443 243.78785185 754.00290608 450.10488889 781.28165925v60.0795212C209.80622222 813.7256201499999 24.4983277 610.15988148 24.4983277 363.10129778c0-265.9244563 215.64863525-480.81214578 481.56702341-480.8170003C749.78645333-117.70963437 951.2429037 63.60177778000002 983.171072 299.04592591999995H922.8985837c-31.43786192-202.67614815-206.02697955-357.12022755-416.76041481-357.11537303z"  horiz-adv-x="1024" />
+    <glyph glyph-name="wode" unicode="&#59035;" d="M545.901727 902.34913734a300.183426 300.183426 0 0 1-185.834452-536.106341A552.015159 552.015159 0 0 1 0.625237-65.44889765999994a48.629576 48.629576 0 0 1 40.154136-55.576659 49.602168 49.602168 0 0 1 7.850203-0.625237 48.629576 48.629576 0 0 1 47.795926 40.779373 453.088707 453.088707 0 0 0 449.545696 382.089526A300.391839 300.391839 0 0 1 545.901727 902.34913734z m0-503.802409a203.41057 203.41057 0 1 0 203.41057 203.41057 203.618982 203.618982 0 0 0-203.41057-203.41057zM1091.178216-65.44889765999994A551.459393 551.459393 0 0 1 833.649876 317.75216134000004a48.629576 48.629576 0 1 1-50.57476-82.670279 454.686536 454.686536 0 0 0 212.441777-315.953303 48.629576 48.629576 0 0 1 47.795926-40.779373 49.602168 49.602168 0 0 1 7.780732 0.625237 48.629576 48.629576 0 0 1 40.084665 55.576659z"  horiz-adv-x="1091" />
+    <glyph glyph-name="baojing" unicode="&#58999;" d="M831.937316 70.58178299999997H191.059745a40.117532 40.117532 0 0 0-40.117531 40.117531V362.436827a361.057786 361.057786 0 1 0 721.112634 0v-251.737513a40.117532 40.117532 0 0 0-40.117532-40.117531z m-600.760039 80.235063h560.642508V362.436827c0 154.452498-125.367287 280.822723-280.822723 280.822722S231.177277 517.8922620000001 231.177277 362.436827zM872.054848-128H151.945152a94.2762 94.2762 0 0 0 0 188.5524h720.109696a94.2762 94.2762 0 0 0 0-188.5524zM151.945152-19.682664000000045a14.041136 14.041136 0 0 1 0-28.082272h720.109696a14.041136 14.041136 0 0 1 0 28.082272zM512 737.535749a40.117532 40.117532 0 0 0-40.117532 40.117532V855.882468a40.117532 40.117532 0 0 0 80.235064 0v-78.229187a40.117532 40.117532 0 0 0-40.117532-40.117532zM701.555338 700.427032a40.117532 40.117532 0 0 0-35.10284 59.17336l37.108716 69.202742a40.38331 40.38331 0 1 0 71.208619-38.111655l-37.108716-69.202742a40.117532 40.117532 0 0 0-36.105779-21.061705zM841.966699 582.0803129999999a40.117532 40.117532 0 0 0-29.08521 67.196866l53.155729 57.167483a40.117532 40.117532 0 0 0 59.17336-54.158668l-53.15573-57.167483a40.117532 40.117532 0 0 0-30.088149-13.038198zM323.4476 700.427032a40.117532 40.117532 0 0 0-35.10284 21.061705l-37.108717 69.202742a40.38331 40.38331 0 0 0 71.208619 38.111655l37.108717-69.202742a40.117532 40.117532 0 0 0-35.10284-59.17336zM182.033301 582.0803129999999a40.117532 40.117532 0 0 0-29.085211 13.038198l-53.15573 57.167483a40.117532 40.117532 0 0 0 59.17336 54.158668l53.15573-57.167483a40.117532 40.117532 0 0 0-29.085211-67.196866zM438.785504 169.87267399999996a40.117532 40.117532 0 0 0-28.082272 68.199804l134.393732 135.39667H381.618022a40.117532 40.117532 0 0 0-28.082273 68.199804l153.44956 153.449559a40.423428 40.423428 0 0 0 57.167482-57.167483l-85.249755-85.249755h162.476004a40.117532 40.117532 0 0 0 28.082272-68.199804L466.867777 181.90793299999996a40.117532 40.117532 0 0 0-28.082273-12.035259z"  horiz-adv-x="1024" />
+    <glyph glyph-name="shouye" unicode="&#58887;" d="M1005.190301 391.147686l-437.137399 443.90889-29.34313 30.095518c-6.771492 6.771492-15.800147 10.533431-24.828802 10.533431-9.781043 0-18.809699-3.76194-24.828802-10.533431L22.571639 391.900073C1.504776 370.833211-4.514328 339.23291700000004 6.771492 311.39456299999995c11.285819-27.085966 38.371785-45.143277 67.714915-45.143277h48.152829v-373.936811h783.235856V265.49889800000005h48.905217c19.562087 0 37.619398 7.52388 51.16238 21.066862 27.085966 29.34313 27.085966 75.238795-0.752388 104.581926z m-428.861131-416.822925H449.927994V208.31741399999999h127.153564v-233.992653z m246.783247 373.936811v-373.936811H649.310801V236.15576799999997c0 12.038207-4.514328 24.076414-12.790595 32.352682-8.276267 8.276267-20.314475 13.542983-32.352682 13.542983H422.842028c-12.038207 0-23.324026-5.266716-32.352682-13.542983-8.276267-8.276267-13.542983-20.314475-12.790595-32.352682v-261.831007H203.144747V348.261572H94.048494l419.080088 424.346804 26.333578-27.085966 392.74651-398.013226-109.096253 0.752388z m0 0"  horiz-adv-x="1026" />
+    <glyph glyph-name="state" unicode="&#58965;" d="M1015.89902222 696.24263111c0 68.73998222-64.66218667 124.66403555-143.88792889 124.66403556H151.98890667c-79.80828445 0-143.88792889-55.92405333-143.88792889-124.66403556v-623.90272c0-68.73998222 64.66218667-124.66403555 143.88792889-124.66403556h720.02218666c79.80828445 0 143.88792889 55.92405333 143.88792889 124.66403556V696.24263111z m-914.59128889 32.03982222c13.39847111 11.65084445 32.03982222 18.64135111 51.26371556 18.05880889h720.02218666c39.61287111 0 72.23523555-16.31118222 72.23523556-50.68117333v-280.78535111h-57.08913778l-61.74947555 53.59388444c-13.98101333 12.23338667-36.70016 12.23338667-50.68117333 0-4.07779555-3.49525333-6.99050667-7.57304889-8.73813334-12.23338667l-44.27320889-115.92590222L616.8576 522.64504889c-8.73813333 15.14609778-30.29219555 21.55406222-48.35100445 13.98101333-8.15559111-3.49525333-13.98101333-9.32067555-17.47626666-16.31118222l-104.8576-227.19146667-115.34336 349.52533334c-5.24288 16.31118222-25.63185778 26.2144-44.27320889 21.55406222-9.90321778-2.33016889-18.05880889-8.15559111-22.13660445-16.31118222l-133.9847111-232.43434667H80.91875555V684.59178667c-1.16508445 16.31118222 6.99050667 32.03982222 20.38897778 43.69066666z m825.46232889-696.13795555c-8.73813333-8.73813333-35.53507555-11.06830222-54.75896889-11.06830223H151.98890667c-19.22389333 0-37.28270222 6.40796445-51.26371556 18.0588089s-20.97152 27.37948445-20.97152 44.27320888v269.13450667h72.23523556c13.39847111 0 26.2144 6.40796445 32.03982222 17.47626667l102.52743111 177.67537778 118.83861333-360.01109334c4.07779555-12.81592889 17.47626667-22.13660445 32.62236445-22.71914666h1.74762667c14.56355555 0 27.96202667 7.57304889 33.20490666 19.80643555L587.73048889 432.93354667l108.35285333-187.57859556c8.73813333-15.14609778 30.29219555-21.55406222 48.35100445-13.98101333 8.73813333 3.49525333 15.14609778 9.90321778 18.05880888 18.05880889l53.59388445 139.22759111 30.87473778-26.79694223c6.99050667-5.82542222 15.72864-9.32067555 25.63185777-9.32067555h71.65269334v-269.13450667c0-16.31118222-11.06830222-46.02083555-16.31118222-50.68117333l-1.16508445-0.58254222z"  horiz-adv-x="1024" />
+    <glyph glyph-name="gantan" unicode="&#59246;" d="M512 896C229.376 896 0 666.624 0 384s229.376-512 512-512 512 229.376 512 512S794.624 896 512 896z m0-819.2c-29.184 0-52.224 23.552-52.224 52.224 0 29.184 23.552 52.224 52.224 52.224 29.184 0 52.224-23.552 52.224-52.224S541.184 76.79999999999995 512 76.79999999999995z m56.832 584.192l-10.752-372.736c-0.512-19.456-20.48-34.816-44.032-34.816h-8.192c-23.552 0-43.52 15.36-44.032 34.816L450.56 660.992c-1.024 29.696 23.04 54.784 53.76 54.784h10.752c30.72 0 54.784-25.088 53.76-54.784z"  horiz-adv-x="1024" />
+    <glyph glyph-name="search" unicode="&#58901;" d="M650.75148231 196.29131889999996l48.24309305 48.24309305 321.62061653-321.62061768-48.24309191-48.2430919zM400.22193949 824.85812907c44.5747712 0 87.67129714-8.75575865 128.37988806-25.92614173 39.23034681-16.60182755 74.48080384-40.36745785 104.84168136-70.72833536 30.36087751-30.36087751 54.12650781-65.61133341 70.72833536-104.84168135 17.17038421-40.59488029 25.92614173-83.80511801 25.92614172-128.37988807s-8.75575865-87.67129714-25.92614172-128.37988807C687.45630493 327.48555833 663.69067463 292.2351013 633.32979712 261.87422492999997c-30.36087751-30.36087751-65.61133341-54.12650781-104.84168021-70.72833536-40.59488029-17.17038421-83.80511801-25.92614173-128.37988921-25.92614287S312.4369317 173.97550535000005 271.72833963 191.14588957c-39.23034681 16.60182755-74.48080384 40.36745785-104.84168022 70.72833536-30.36087751 30.36087751-54.12650781 65.61133341-70.72833536 104.84168021-17.17038421 40.59488029-25.92614173 83.80511801-25.92614286 128.37988807s8.75575865 87.67129714 25.92614286 128.37988921c16.60182755 39.23034681 40.36745785 74.48080384 70.72833536 104.84168021s65.61133341 54.12650781 104.84168022 70.72833536c40.70859207 17.05667243 83.91882866 25.81243107 128.49359986 25.81243108m0 68.2266897c-219.80365369 0-397.98902557-178.18537187-397.98902557-397.98902556s178.18537187-397.98902557 397.98902557-397.98902556 397.98902557 178.18537187 397.98902556 397.98902556-178.18537187 397.98902557-397.98902556 397.98902556z"  horiz-adv-x="1024" />
+    <glyph glyph-name="dui" unicode="&#58948;" d="M512 896C229.229 896 0 666.77 0 384s229.229-512 512-512c282.77 0 512 229.23 512 512S794.77 896 512 896zM388.256 108.08000000000004L140.769 355.568l56.864 56.863 190.623-190.623L826.368 659.92l56.862-56.864L388.256 108.08000000000004z"  horiz-adv-x="1024" />
+  </font>
+</defs></svg>
--- a/src/assets/icon/iconfont.ttf
+++ b/src/assets/icon/iconfont.ttf
--- a/src/assets/icon/iconfont.woff
+++ b/src/assets/icon/iconfont.woff
--- a/src/global.scss
+++ b/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%;
+  }
+}
--- a/src/theme/variables.scss
+++ b/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: $themeColor;
-  --ion-color-primary-rgb: 56, 128, 255;
+  --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;