调整layout

src/app/envCtrl/env-add-model/env-add-model.page.html

@@ -16,47 +16,48 @@
         <div class="top-line">
         </div>
     </div>
-    <div style="max-height: calc(100% - 100px);overflow-y:auto;" class="parentDiv">
+    <div style="max-height: calc(100% - 130px);overflow-y:auto;" class="parentDiv">
         <ion-item-sliding *ngFor="let allCfg of controlConfig">
             <ion-item class="fanItem">
                 <ion-grid>
                     <ion-row style="width: 100%">
-                        <ion-col size="auto" style="font-size: 13px;">
-                            <ion-item class="fanItem" lines="none">
-                                <ion-label style="width:80px">模式名</ion-label>
+                        <ion-col size="auto" style="font-size: 13px;" class="sliding-col">
+                            <ion-item class="fanItem sliding-item" lines="none">
+                                <ion-label style="width:80px" class="font-content">模式名</ion-label>
                                 <ion-input class="inputText" [(ngModel)]="allCfg.config.name" style="width:80px;"></ion-input>
                             </ion-item>
                         </ion-col>
-                        <ion-col size="auto" style="font-size: 13px;">
-                            <ion-item class="fanItem" lines="none">
-                                <ion-label style="width:80px">间隔时间</ion-label>
-                                <ion-input class="inputText" style="width:50px;" [(ngModel)]="allCfg.config.interval"></ion-input>
-                                <ion-label>秒</ion-label>
+                        <ion-col size="auto" style="font-size: 13px;" class="sliding-col">
+                            <ion-item class="fanItem sliding-item" lines="none">
+                                <ion-label style="width:80px" class="font-content">设置温度</ion-label>
+                                <ion-input class="inputText" style="width:50px;" [(ngModel)]="allCfg.config.T" (ionFocus)="tempHaveTouch($event)"></ion-input>
+                                <ion-label class="font-smaller">℃</ion-label>
+
                             </ion-item>
                         </ion-col>
                     </ion-row>
                     <ion-row style="width: 100%">
-                        <ion-col size="auto" style="font-size: 13px;">
-                            <ion-item class="fanItem" lines="none">
-                                <ion-label style="width:80px">设置温度</ion-label>
-                                <ion-input class="inputText" style="width:50px;" [(ngModel)]="allCfg.config.T" (ionFocus)="tempHaveTouch($event)"></ion-input>
-                                <ion-label>℃</ion-label>
+                        <ion-col size="auto" style="font-size: 13px;" class="sliding-col">
+                            <ion-item class="fanItem sliding-item" lines="none">
+                                <ion-label style="width:80px" class="font-content">间隔时间</ion-label>
+                                <ion-input class="inputText" style="width:50px;" [(ngModel)]="allCfg.config.interval"></ion-input>
+                                <ion-label class="font-smaller">秒</ion-label>
                             </ion-item>
                         </ion-col>
                     </ion-row>
                     <ion-row style="width: 100%">
-                        <ion-col size="auto" style="font-size: 13px;">
-                            <ion-item class="fanItem" lines="none">
-                                <ion-label style="width:80px">A区喷淋时间</ion-label>
+                        <ion-col size="auto" style="font-size: 13px;" class="sliding-col">
+                            <ion-item class="fanItem sliding-item" lines="none">
+                                <ion-label style="width:80px" class="font-content">A区喷淋时间</ion-label>
                                 <ion-input class="inputText" style="width:50px;" [(ngModel)]="allCfg.config.A"></ion-input>
-                                <ion-label>秒</ion-label>
+                                <ion-label class="font-smaller">秒</ion-label>
                             </ion-item>
                         </ion-col>
-                        <ion-col size="auto" style="font-size: 13px;">
-                            <ion-item class="fanItem" lines="none">
-                                <ion-label style="width:80px">B区喷淋时间</ion-label>
+                        <ion-col size="auto" style="font-size: 13px;" class="sliding-col">
+                            <ion-item class="fanItem sliding-item" lines="none">
+                                <ion-label style="width:80px" class="font-content">B区喷淋时间</ion-label>
                                 <ion-input class="inputText" style="width:50px;" [(ngModel)]="allCfg.config.B"></ion-input>
-                                <ion-label>秒</ion-label>
+                                <ion-label class="font-smaller">秒</ion-label>
                             </ion-item>
                         </ion-col>
                     </ion-row>
@@ -74,7 +75,7 @@
 
     </div>
     <div style="text-align: center; width:100%; position: absolute; bottom: 10px;">
-        <ion-button (click)="goBack()" class="btn" color="light" slot="start" style="margin-right: 20px;">取消</ion-button>
-        <ion-button (click)="saveModels()" class="btn" color="secondary" slot="end">确认</ion-button>
+        <ion-button (click)="goBack()" class="btn btn-large" color="light" slot="start" style="margin-right: 20px;">取消</ion-button>
+        <ion-button (click)="saveModels()" class="btn btn-large" color="secondary" slot="end">确认</ion-button>
     </div>
 </ion-content>

src/app/envCtrl/env-add-model/env-add-model.page.scss

@@ -5,7 +5,7 @@
 
 .fanItem{
   font-size: 13px;
-  --padding-start: 5px;
+  --padding-start: 15px;
 }
 
 .addIcon {
@@ -49,3 +49,18 @@
   margin: 15px 1% 14px 1%;;
   float: left;
 }
+
+.sliding-item {
+  --inner-padding-top: 0px;
+  --inner-padding-bottom: 0px;
+  --padding-top: 0px;
+  --padding-bottom: 0px;
+  --min-height: 30px;
+}
+
+.sliding-col {
+  font-size: 13px;
+  flex: 0 0 auto;
+  width: auto;
+  --ion-grid-column-padding: 0px;
+}

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

@@ -53,19 +53,19 @@
       </div>
       <div style="width: 40%; padding-right: 15px;">
         <div class="note" style="margin-bottom: 5px;">
-          <div style="width:85%; display:inline-block">
+          <div style="width:80%; display:inline-block">
             <span class="font-note" style="text-align: right; padding-right:5px;">未解决数</span>
           </div>
-          <div style="width:15%; display:inline-block;">
+          <div style="width:20%; display:inline-block;">
             <span class="main-color" style="font-size: 13px" *ngIf="isTroubleDis">{{detailInfo.devErr}}</span>
             <span class="main-color" style="font-size: 13px" *ngIf="isAlarmDis">{{detailInfo.alarm}}</span>
           </div>
         </div>
         <div class="note">
-          <div style="width:85%; display:inline-block">
+          <div style="width:80%; display:inline-block">
             <span class="font-note" style="text-align: right; padding-right:5px;">总数</span>
           </div>
-          <div style="width:15%; display:inline-block;">
+          <div style="width:20%; display:inline-block;">
             <span class="main-color" style="font-size: 13px" *ngIf="isTroubleDis">{{detailInfo.devErrTotal}}</span>
             <span class="main-color" style="font-size: 13px" *ngIf="isAlarmDis">{{detailInfo.alarmTotal}}</span>
           </div>

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

@@ -11,12 +11,12 @@
 
   <div style="width:100%; background-color: unset">
     <div style="width: 100%">
-      <div style="width:20%; display: inline-block; float: left; padding-top: 8px; padding-left: 20px;">
+      <div style="width:20%; display: inline-block; float: left; padding-top: 13px; padding-left: 20px;">
         <span class="font-sub-title" style="display: inline-block;  ">选择日期</span>
       </div>
       <div style="width:60%; text-align: left;padding-left: 20px; display: inline-block;">
-        <div style=" padding-right: 5px; display: inline-block;">
-          <ion-datetime displayFormat="YYYY-MM-DD" cancelText="取消" doneText="确认" [(ngModel)]="today" class="font-input" style="display: inline-block;"></ion-datetime>
+        <div style=" padding-right: 5px; display: inline-block; padding-top:10px; padding-bottom: 10px">
+          <ion-datetime displayFormat="YYYY-MM-DD" cancelText="取消" doneText="确认" [(ngModel)]="today" class="font-input dateTime" style="display: inline-block;"></ion-datetime>
         </div>
         <!--<div style="float:left; display: inline-block;">-->
           <!--&lt;!&ndash;<img src="../../assets/img/calendar-small.png" style="width: 25px !important; display: inline-block;">&ndash;&gt;-->

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

@@ -89,3 +89,10 @@
 .saveBtn {
   width: 100%;
 }
+
+.dateTime {
+  border: 1px solid lightgray;
+  border-radius: 3px;
+  text-align: center;
+  padding: 5px 10px 0px 10px;
+}

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

@@ -112,44 +112,45 @@
           <ion-icon name="arrow-down" color="secondary" mode="ios" slot="end" class="iconOpen" *ngIf="isOpenShower && isShowerDisplay" (click)="openItem('showerCfg')"></ion-icon>
         </div>
       </div>
-      <div class="item-content-div font-content" style="height: unset" *ngIf="isOpenShower && isShowerDisplay" @shrink @stretch>
+      <div class="item-content-div font-content" style="height: unset; padding-top: unset;" *ngIf="isOpenShower && isShowerDisplay" @shrink @stretch>
         <ion-item-sliding *ngFor="let allCfg of shower.controlConfig">
           <ion-item class="fanItem">
             <ion-grid class="sliding-grid">
               <ion-row style="width: 100%">
-                <ion-col size="auto" style="font-size: 13px;" class="sliding-col">
-                  <ion-item class="fanItem" lines="none">
+                <ion-col size="auto" style="font-size: 13px;margin-top:5px;" class="sliding-col">
+                  <ion-item class="fanItem sliding-item" lines="none">
                     <ion-label style="width:80px" class="font-content">模式名</ion-label>
-                    <ion-input class="inputText font-input" [(ngModel)]="allCfg.config.name" style="width:100px;"></ion-input>
+                    <ion-input class="inputText font-input" [(ngModel)]="allCfg.config.name" style="width:80px;"></ion-input>
                   </ion-item>
                 </ion-col>
                 <ion-col size="auto" style="font-size: 13px;" class="sliding-col">
-                  <ion-item class="fanItem" lines="none">
-                    <ion-label style="width:80px" class="font-content">间隔时间</ion-label>
-                    <ion-input class="inputText font-input" style="width:50px;" [(ngModel)]="allCfg.config.interval"></ion-input>
-                    <ion-label class="font-smaller">秒</ion-label>
+                  <ion-item class="fanItem sliding-item" lines="none">
+                    <ion-label style="width:80px" class="font-content">设置温度</ion-label>
+                    <ion-input class="inputText font-input" style="width:50px;" [(ngModel)]="allCfg.config.T" (ionFocus)="tempHaveTouch($event)"></ion-input>
+                    <ion-label class="font-smaller">℃</ion-label>
+
                   </ion-item>
                 </ion-col>
               </ion-row>
               <ion-row style="width: 100%">
                 <ion-col size="auto" style="font-size: 13px;" class="sliding-col">
-                  <ion-item class="fanItem" lines="none">
-                    <ion-label style="width:80px" class="font-content">设置温度</ion-label>
-                    <ion-input class="inputText font-input" style="width:50px;" [(ngModel)]="allCfg.config.T" (ionFocus)="tempHaveTouch($event)"></ion-input>
-                    <ion-label class="font-smaller">℃</ion-label>
+                  <ion-item class="fanItem sliding-item" lines="none">
+                    <ion-label style="width:80px" class="font-content">间隔时间</ion-label>
+                    <ion-input class="inputText font-input" style="width:50px;" [(ngModel)]="allCfg.config.interval"></ion-input>
+                    <ion-label class="font-smaller">秒</ion-label>
                   </ion-item>
                 </ion-col>
               </ion-row>
               <ion-row style="width: 100%">
                 <ion-col size="auto" style="font-size: 13px;" class="sliding-col">
-                  <ion-item class="fanItem" lines="none">
+                  <ion-item class="fanItem sliding-item" lines="none">
                     <ion-label style="width:80px" class="font-content">A区喷淋时间</ion-label>
                     <ion-input class="inputText font-input" style="width:50px;" [(ngModel)]="allCfg.config.A"></ion-input>
                     <ion-label class="font-smaller">秒</ion-label>
                   </ion-item>
                 </ion-col>
                 <ion-col size="auto" style="font-size: 13px;" class="sliding-col">
-                  <ion-item class="fanItem" lines="none" style="margin-bottom: 5px">
+                  <ion-item class="fanItem sliding-item" lines="none" style="margin-bottom: 5px">
                     <ion-label style="width:80px" class="font-content">B区喷淋时间</ion-label>
                     <ion-input class="inputText font-input" style="width:50px;" [(ngModel)]="allCfg.config.B"></ion-input>
                     <ion-label class="font-smaller">秒</ion-label>
@@ -158,6 +159,8 @@
               </ion-row>
             </ion-grid>
           </ion-item>
+
+
           <ion-item-options side="end">
             <!--<ion-button color='danger' expand="full" style="width:15%;height:90%" (click)="deleteShowerModel(cfg)">删除</ion-button>-->
             <div style="text-content: center; background-color: lightgray;">
@@ -184,13 +187,13 @@
           <ion-icon name="arrow-down" color="secondary" mode="ios" slot="end" class="iconOpen" *ngIf="isOpenLight && isLightDisplay" (click)="openItem('lightCfg')"></ion-icon>
         </div>
       </div>
-      <div class="item-content-div font-content" style="height: auto" *ngIf="isOpenLight && isLightDisplay" @shrink @stretch >
+      <div class="item-content-div font-content" style="height: auto; padding-top: unset;" *ngIf="isOpenLight && isLightDisplay" @shrink @stretch >
         <ion-item-sliding *ngFor="let allCfg of light.controlConfig" lines="none">
           <ion-item class="fanItem">
             <ion-grid class="sliding-grid">
               <ion-row style="width: 100%">
-                <ion-col size="auto" style="font-size: 13px;" class="sliding-col">
-                  <ion-item class="fanItem" lines="none">
+                <ion-col size="auto" style="font-size: 13px;margin-top:5px;" class="sliding-col">
+                  <ion-item class="fanItem sliding-item" lines="none">
                     <ion-label style="width:80px" class="font-content">模式名</ion-label>
                     <ion-input class="inputText font-input" style="width:80px;" [(ngModel)]="allCfg.config.name"></ion-input>
                   </ion-item>
@@ -198,14 +201,14 @@
               </ion-row>
               <ion-row style="width: 100%">
                 <ion-col size="auto" style="font-size: 13px;" class="sliding-col">
-                  <ion-item class="fanItem" lines="none">
+                  <ion-item class="fanItem sliding-item" lines="none">
                     <ion-label style="width:80px" class="font-content">日期范围</ion-label>
                     <!--<ion-input placeholder={{cfg.startTime}} (ionFocus)="tempHaveTouch()" style="width:50px;"></ion-input>-->
                     <ion-datetime class="inputDateTime timepicker font-input" [(ngModel)]="allCfg.config.startDate" displayFormat="MM-DD" cancelText="取消" doneText="确认"></ion-datetime>
                   </ion-item>
                 </ion-col>
                 <ion-col size="auto" style="font-size: 13px;" class="sliding-col">
-                  <ion-item class="fanItem" lines="none">
+                  <ion-item class="fanItem sliding-item" lines="none">
                     <ion-label style="width:15px" class="font-content">~</ion-label>
                     <!--<ion-input placeholder={{cfg.endTime}} (ionFocus)="tempHaveTouch()" style="width:50px;"></ion-input>-->
                     <ion-datetime class="inputDateTime timepicker font-input" [(ngModel)]="allCfg.config.stopDate" displayFormat="MM-DD" cancelText="取消" doneText="确认"></ion-datetime>
@@ -214,14 +217,14 @@
               </ion-row>
               <ion-row style="width: 100%">
                 <ion-col size="auto" style="font-size: 13px;" class="sliding-col">
-                  <ion-item class="fanItem"  lines="none">
+                  <ion-item class="fanItem sliding-item"  lines="none">
                     <ion-label style="width:80px" class="font-content">开灯时间</ion-label>
                     <ion-datetime class="inputDateTime timepicker font-input" [(ngModel)]="allCfg.config.on" displayFormat="HH:mm" cancelText="取消" doneText="确认"></ion-datetime>
                     <!--<ion-input style="width:50px;" [(ngModel)]="cfg.on" (ionFocus)="tempHaveTouch()"></ion-input>-->
                   </ion-item>
                 </ion-col>
-                <ion-col size="auto" style="font-size: 13px;" class="sliding-col">
-                  <ion-item class="fanItem"  lines="none">
+                <ion-col size="auto" style="font-size: 13px;margin-bottom:10px;" class="sliding-col">
+                  <ion-item class="fanItem sliding-item"  lines="none">
                     <ion-label style="width:80px" class="font-content">关灯时间</ion-label>
                     <ion-datetime class="inputDateTime timepicker font-input" [(ngModel)]="allCfg.config.off" displayFormat="HH:mm" cancelText="取消" doneText="确认"></ion-datetime>
                     <!--<ion-input style="width:50px;" [(ngModel)]="cfg.off"  (ionFocus)="tempHaveTouch()"></ion-input>-->
@@ -251,7 +254,7 @@
           <ion-icon name="arrow-down" color="secondary" mode="ios" slot="end" class="iconOpen" *ngIf="isOpenWaterChannel" (click)="openItem('waterChannelCfg')"></ion-icon>
         </div>
       </div>
-      <div class="item-content-div font-content" style="height: auto" *ngIf="isOpenWaterChannel" @shrink @stretch >
+      <div class="item-content-div font-content" style="height: auto;padding-top: unset;" *ngIf="isOpenWaterChannel" @shrink @stretch >
         <ion-item class="fanItem" lines="none">
           <ion-grid class="sliding-grid">
             <ion-row style="width: 100%">
@@ -376,7 +379,7 @@
         <ion-item class="fanItem" lines="none">
           <ion-grid class="sliding-grid">
             <ion-row>
-              <ion-item lines="none" class="thiItem font-smaller">计算公式 0.81* 温度 +（0.99*温度-14.3）* 湿度+46.3</ion-item>
+              <ion-item lines="none" class="thiItem font-smaller">计算公式 0.81* 温度 +(0.99*温度-14.3)* 湿度+46.3</ion-item>
             </ion-row>
             <ion-row>
               <ion-item lines="none" class="thiItem font-content">等级临界值</ion-item>

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

@@ -155,8 +155,14 @@
   --inner-padding-bottom: 0px;
   --padding-top: 0px;
   --padding-bottom: 0px;
+  --min-height: 30px;
+}
+
+.sliding-div {
+  margin-top:10px;
 }
 
 .input-tb-text {
   color: black;
 }
+

src/app/envCtrl/env-change-model/env-change-model.page.html

@@ -16,45 +16,45 @@
         <div class="top-line">
         </div>
     </div>
-    <div style="max-height: calc(100% - 100px);overflow-y:auto;" class="parentDiv">
+    <div style="max-height: calc(100% - 130px);overflow-y:auto;" class="parentDiv">
         <ion-item-sliding *ngFor="let allCfg of controlConfig" >
             <ion-item class="fanItem">
                 <ion-grid>
                     <ion-row style="width: 100%">
-                        <ion-col size="auto" style="font-size: 13px;">
-                            <ion-item class="fanItem" lines="none">
-                                <ion-label style="width:80px">模式名</ion-label>
+                        <ion-col size="auto" style="font-size: 13px;" class="sliding-col">
+                            <ion-item class="fanItem sliding-item" lines="none">
+                                <ion-label style="width:80px" class="font-content">模式名</ion-label>
                                 <ion-input class="inputText" style="width:80px;" [(ngModel)]="allCfg.config.name"></ion-input>
                             </ion-item>
                         </ion-col>
                     </ion-row>
                     <ion-row style="width: 100%">
-                        <ion-col size="auto" style="font-size: 13px;">
-                            <ion-item class="fanItem"  lines="none">
-                                <ion-label style="width:80px">日期范围</ion-label>
+                        <ion-col size="auto" style="font-size: 13px;" class="sliding-col">
+                            <ion-item class="fanItem sliding-item"  lines="none">
+                                <ion-label style="width:80px" class="font-content">日期范围</ion-label>
                                 <!--<ion-input placeholder={{cfg.startTime}} (ionFocus)="tempHaveTouch()" style="width:50px;"></ion-input>-->
                                 <ion-datetime class="inputDateTime timepicker" [(ngModel)]="allCfg.config.startDate" displayFormat="MM-DD" cancelText="取消" doneText="确认"></ion-datetime>
                             </ion-item>
                         </ion-col>
-                        <ion-col size="auto" style="font-size: 13px;">
-                            <ion-item class="fanItem"  lines="none">
-                                <ion-label style="width:15px">~</ion-label>
+                        <ion-col size="auto" style="font-size: 13px;" class="sliding-col">
+                            <ion-item class="fanItem sliding-item"  lines="none" style="--padding-start:0px;">
+                                <ion-label style="width:10px" class="font-content">~</ion-label>
                                 <!--<ion-input placeholder={{cfg.endTime}} (ionFocus)="tempHaveTouch()" style="width:50px;"></ion-input>-->
                                 <ion-datetime class="inputDateTime timepicker" [(ngModel)]="allCfg.config.stopDate" displayFormat="MM-DD" cancelText="取消" doneText="确认"></ion-datetime>
                             </ion-item>
                         </ion-col>
                     </ion-row>
                     <ion-row style="width: 100%">
-                        <ion-col size="auto" style="font-size: 13px;">
-                            <ion-item class="fanItem"  lines="none">
-                                <ion-label style="width:80px">开灯时间</ion-label>
+                        <ion-col size="auto" style="font-size: 13px;" class="sliding-col">
+                            <ion-item class="fanItem sliding-item"  lines="none">
+                                <ion-label style="width:80px" class="font-content">开灯时间</ion-label>
                                 <ion-datetime class="inputDateTime timepicker" [(ngModel)]="allCfg.config.on" displayFormat="HH:mm" cancelText="取消" doneText="确认"></ion-datetime>
                                 <!--<ion-input style="width:50px;" [(ngModel)]="cfg.on" (ionFocus)="tempHaveTouch()"></ion-input>-->
                             </ion-item>
                         </ion-col>
-                        <ion-col size="auto" style="font-size: 13px;">
-                            <ion-item class="fanItem"  lines="none">
-                                <ion-label style="width:80px">关灯时间</ion-label>
+                        <ion-col size="auto" style="font-size: 13px;" class="sliding-col">
+                            <ion-item class="fanItem sliding-item" lines="none">
+                                <ion-label style="width:80px" class="font-content">关灯时间</ion-label>
                                 <ion-datetime class="inputDateTime timepicker" [(ngModel)]="allCfg.config.off" displayFormat="HH:mm" cancelText="取消" doneText="确认"></ion-datetime>
                                 <!--<ion-input style="width:50px;" [(ngModel)]="cfg.off"  (ionFocus)="tempHaveTouch()"></ion-input>-->
                             </ion-item>
@@ -74,7 +74,7 @@
         </ion-item>
     </div>
     <div style="text-align: center; width:100%; position: absolute; bottom: 10px;">
-        <ion-button (click)="goBack()" class="btn" color="light" slot="start" style="margin-right: 20px;">取消</ion-button>
-        <ion-button (click)="saveModels()" class="btn" color="secondary" slot="end">确认</ion-button>
+        <ion-button (click)="goBack()" class="btn btn-large" color="light" slot="start" style="margin-right: 20px;">取消</ion-button>
+        <ion-button (click)="saveModels()" class="btn btn-large" color="secondary" slot="end">确认</ion-button>
     </div>
 </ion-content>

src/app/envCtrl/env-change-model/env-change-model.page.scss

@@ -5,7 +5,7 @@
 
 .fanItem{
   font-size: 13px;
-  --padding-start: 5px;
+  --padding-start: 15px;
 }
 
 .timepicker{
@@ -53,3 +53,18 @@
   margin: 15px 1% 14px 1%;;
   float: left;
 }
+
+.sliding-item {
+  --inner-padding-top: 0px;
+  --inner-padding-bottom: 0px;
+  --padding-top: 0px;
+  --padding-bottom: 0px;
+  --min-height: 30px;
+}
+
+.sliding-col {
+  font-size: 13px;
+  flex: 0 0 auto;
+  width: auto;
+  --ion-grid-column-padding: 0px;
+}

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

@@ -31,7 +31,7 @@
 <ion-content color="light">
   <ion-router-outlet></ion-router-outlet>
     <ion-tabs>
-        <ion-tab-bar slot="top" mode="ios">
+        <ion-tab-bar slot="top" mode="ios" style="--border: 0px;">
             <ion-tab-button tab="fan" class="tabSelected ion-segment-button">
                 <ion-label>风机</ion-label>
             </ion-tab-button>

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

@@ -68,6 +68,7 @@
   height: 35px;
   padding-right: 10px;
   text-align: right;
+  padding-bottom:5px;
 }
 
 .inHouseLabel {

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

@@ -18,55 +18,26 @@
     <div echarts [options]="chartOption" class="demo-chart"></div>
     <h1 class="main-title">近8个小时环境参数表</h1>
     <div class="div-table">
-      <!--<ngx-datatable class="material" [rows]="tableRows" [columnMode]="'force'" [scrollbarH]="true" [scrollbarV]="true" style="text-align: center; font-size:14px">-->
-        <!--<ngx-datatable-column name="时间" prop="ts" [width]="80">-->
-        <!--</ngx-datatable-column>-->
-        <!--<ngx-datatable-column name="热应激" prop="thi" [width]="80">-->
-        <!--</ngx-datatable-column>-->
-        <!--<ngx-datatable-column name="温度" prop="temp" [width]="80">-->
-        <!--</ngx-datatable-column>-->
-        <!--<ngx-datatable-column name="湿度" prop="humi" [width]="80">-->
-        <!--</ngx-datatable-column>-->
-        <!--<ngx-datatable-column name="氨气浓度" prop="NH3" [width]="90">-->
-        <!--</ngx-datatable-column>-->
-      <!--</ngx-datatable>-->
-      <!--<ngx-datatable class="material"-->
-                     <!--[rows]="tableRows"-->
-                     <!--[columnMode]="'force'"-->
-                     <!--[scrollbarH]="true"-->
-                     <!--[scrollbarV]="true"-->
-                     <!--[headerHeight]="60"-->
-                     <!--[rowHeight]="'auto'"-->
-                     <!--style="text-align: center; font-size:14px">-->
-        <!--<ngx-datatable-column name="时间" prop="ts" [width]="70">-->
-        <!--</ngx-datatable-column>-->
-        <!--<ngx-datatable-column name="热应激" prop="thi" [width]="80">-->
-        <!--</ngx-datatable-column>-->
-        <!--<ngx-datatable-column [name]="'温度 <br>℃'" prop="temp" [width]="60">-->
-        <!--</ngx-datatable-column>-->
-        <!--<ngx-datatable-column [name]="'湿度 <br>% RH'" prop="humi" [width]="60">-->
-        <!--</ngx-datatable-column>-->
-        <!--<ngx-datatable-column [name]="'氨气浓度 <br>ppm'" prop="NH3" [width]="90">-->
-        <!--</ngx-datatable-column>-->
-      <!--</ngx-datatable>-->
+
       <ngx-datatable class="material"
+                     [messages]="{emptyMessage: '<br>暂无数据'}"
                      [rows]="tableRows"
                      [columnMode]="ColumnMode.force"
                      [scrollbarH]="true"
                      [scrollbarV]="true"
-                     [headerHeight]="50"
+                     [headerHeight]="48"
                      [rowClass]="getRowClass"
                      [cssClasses]="'font-content'"
                      style="text-align: center; background-color: #ffffff;" class="font-content">
-        <ngx-datatable-column name="时间" prop="ts" [width]="70" [headerClass]="getHeaderClass">
+        <ngx-datatable-column name="时间" prop="ts" [width]="70">
         </ngx-datatable-column>
-        <ngx-datatable-column name="热应激" prop="thi" [width]="70" [headerClass]="getHeaderClass">
+        <ngx-datatable-column name="热应激" prop="thi" [width]="70">
         </ngx-datatable-column>
-        <ngx-datatable-column name="温度<br>℃" prop="temp" [width]="60" [headerClass]="getHeaderClass">
+        <ngx-datatable-column name="温度<br>℃" prop="temp" [width]="60">
         </ngx-datatable-column>
-        <ngx-datatable-column name="湿度<br>% RH" prop="humi" [width]="60" [headerClass]="getHeaderClass">
+        <ngx-datatable-column name="湿度<br>% RH" prop="humi" [width]="60">
         </ngx-datatable-column>
-        <ngx-datatable-column name="氨气浓度<br>ppm" prop="NH3" [width]="90" [headerClass]="getHeaderClass">
+        <ngx-datatable-column name="氨气浓度<br>ppm" prop="NH3" [width]="90">
         </ngx-datatable-column>
       </ngx-datatable>
     </div>

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

@@ -36,10 +36,10 @@
 }
 
 .demo-chart {
-  width: 96%;
+  width: 94%;
   height: 230px;
-  margin-left: 2%;
-  margin-right: 2%;
+  margin-left: 3%;
+  margin-right: 3%;
   margin-bottom: 15px;
 }
 
@@ -59,9 +59,9 @@
 }
 
 .div-table {
-  width: 96%;
-  margin-left: 2%;
-  margin-right: 2%;
+  width: 94%;
+  margin-left: 3%;
+  margin-right: 3%;
   margin-bottom: 10px;
 }
 

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

@@ -120,28 +120,100 @@ export class EnvHistoryPage implements OnInit {
             legend: {
                 data: ['温度', '湿度', '热应激']
             },
-            visualMap: [
-                {show: false, type: 'continuous', seriesIndex: 0, min: 0, max: 400},
-                {show: false, type: 'continuous', seriesIndex: 1, dimension: 0, min: 0, max: 400}],
+            // visualMap: [
+            //     {show: false, type: 'continuous', seriesIndex: 0, min: 0, max: 400},
+            //     {show: false, type: 'continuous', seriesIndex: 1, dimension: 0, min: 0, max: 400}],
             xAxis: {
                 name: '', type: 'category',
                 data: times,
+                axisLine: {
+                    lineStyle: {
+                        color: 'rgba(136,136,136, 1)', // X轴的宽度和颜色
+                        width: 1,
+                    }
+                },
             },
             yAxis: [
-                {name: '温度(℃)', type: 'value', splitLine: {show: false}},
-                {name: '湿度(%)', type: 'value', max: 100, splitLine: {show: false}}
+                {
+                    name: '温度(℃)',
+                    type: 'value',
+                    splitLine: {show: false},
+                    position: 'left',
+                    axisLine: {
+                        lineStyle: {
+                            width: 2,
+                            color: 'rgba(97, 199, 204, 0.8)', // y轴的轴线的宽度和颜色
+                        }
+                    },
+                },
+                {
+                    name: '湿度(%)',
+                    type: 'value',
+                    max: 100,
+                    splitLine: {show: false},
+                    position: 'right',
+                    axisLine: {
+                        lineStyle: {
+                            width: 2,
+                            color: 'rgba(22, 95, 175, 0.8)', // y轴的轴线的宽度和颜色 #2598D6
+                        }
+                    }
+                }
+                // {
+                //     name: '热应激',
+                //     type: 'value',
+                //     min: 0,
+                //     max: 5,
+                //     splitLine: {show: false},
+                //     position: 'right',
+                //     offset: -20,
+                //     axisLine: {
+                //         lineStyle: {
+                //             width: 0,
+                //             color: 'rgba(239, 184, 39,0.5)', // y轴的轴线的宽度和颜色
+                //         }
+                //     }
+                // },
             ],
             series: [
-                {name: '温度', data: temp, type: 'line'},
-                {name: '湿度', data: humi, yAxisIndex: 1, type: 'line'},
-                {name: '热应激', data: thi, yAxisIndex: 1, type: 'line'}
+                {
+                    name: '温度',
+                    data: temp,
+                    type: 'line',
+                    itemStyle: {
+                        normal: {
+                            color: 'rgba(97, 199, 204, 0.8)', // '#D71F8B' rgba(215, 31, 139, 0.8)
+                        }
+                    },
+                },
+                {
+                    name: '湿度',
+                    data: humi,
+                    yAxisIndex: 1,
+                    type: 'line',
+                    itemStyle: {
+                        normal: {
+                            color: 'rgba(22, 95, 175, 0.8)', // rgba(37, 152, 214,0.5)
+                        }
+                    },
+                },
+                {
+                    name: '热应激',
+                    data: thi,
+                    yAxisIndex: 1,
+                    type: 'line',
+                    itemStyle: {
+                        normal: {
+                            color: '#EFB827',
+                        }
+                    },
+                }
             ]
         };
     }
 
     paintTable(param) {
         this.tableRows = [];
-
         param.map((item, index) => {
             this.tableRows.push({
                 id: index + 1,

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

@@ -50,7 +50,7 @@
           <div style="width:60%; float:left; padding-top: 4px;">
             <span style="text-align: center" class="font-sub-title">{{item.fieldRegionName}}</span><span style="text-align: center; font-size:12px; padding-left:10px; color:red;" *ngIf="item.operationModel === 4">(部分设备处于现控状态)</span>
           </div>
-          <div style="width:25%; float:left; padding-top: 4px; text-align:right;">
+          <div style="width:25%; float:left; padding-top: 2px; text-align:right;">
             <img *ngIf="item.alarm" src="../../../assets/img/alarm-small.png" style="display: inline-block; width:25px !important">
           </div>
         </div>

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

 <router-outlet name='tabs' (activate)='onActivate($event)'></router-outlet>
 <ion-content>
   <ion-tabs>
-    <ion-tab-bar slot="bottom" colo="secondary">
+    <ion-tab-bar slot="bottom" >
 
-      <ion-tab-button tab="tab-home" selected="true" color="">
+      <ion-tab-button tab="tab-home" selected="true" class="tab-btn-color">
         <ion-label>首页</ion-label>
         <ion-icon name="home"></ion-icon>
       </ion-tab-button>
@@ -13,18 +13,18 @@
         <!--<ion-icon name="settings"></ion-icon>-->
       <!--</ion-tab-button>-->
 
-      <ion-tab-button tab="tab-anal">
+      <ion-tab-button tab="tab-anal" class="tab-btn-color">
         <ion-label>分析</ion-label>
         <ion-icon name="stats"></ion-icon>
       </ion-tab-button>
 
-      <ion-tab-button tab="tab-alarm">
+      <ion-tab-button tab="tab-alarm" class="tab-btn-color">
         <ion-label>告警</ion-label>
         <ion-icon name="hammer"></ion-icon>
         <ion-badge color="danger" *ngIf="totalAlert > 0">{{totalAlert}}</ion-badge>
       </ion-tab-button>
 
-      <ion-tab-button tab="tab-cfg">
+      <ion-tab-button tab="tab-cfg" class="tab-btn-color">
         <ion-label>配置</ion-label>
         <ion-icon name="construct"></ion-icon>
       </ion-tab-button>

src/global.scss

@@ -209,7 +209,7 @@ img {
 
 .light-color {
   // color: #828282;
-  // background-color: rgba(119, 249, 254, 0.8);
+  background-color: rgba(225,255,255, 0.8);
 }
 
 .spinnerColor {
@@ -247,7 +247,7 @@ img {
 
 .env-detail-content {
   padding: 5px;
-  margin: 5px;
+  margin: 8px 5px 5px 5px;
   background-color: #ffffff;
   border-radius: 5px;
 }
@@ -334,3 +334,34 @@ img {
 .ion-segment-button {
   font-size: 15px;
 }
+
+.btn-large {
+  height: 35px;
+}
+
+
+.ngx-datatable .datatable-header {
+  display: block;
+  overflow: hidden;
+  background-color: #424242;
+  color: #ffffff;
+  height: unset !important;
+}
+
+.ngx-datatable .datatable-body-cell {
+  border-right: 1px solid #ffffff;
+  border-bottom: 1px solid #ffffff;
+}
+
+.ngx-datatable .datatable-header .datatable-header-cell {
+  position: relative;
+  display: inline-block;
+  border-right: 1px solid #ffffff;
+  border-bottom: 1px solid #ffffff;
+
+}
+
+.tab-btn-color {
+  // --color:#62C7CC;
+  --color-selected: #62C7CC;
+}

src/theme/ngx-datatable/bootstrap.css

+/*
+bootstrap table theme
+*/
+.ngx-datatable.bootstrap {
+  box-shadow: none;
+  font-size: 13px; }
+  .ngx-datatable.bootstrap .datatable-header {
+    height: unset !important; }
+    .ngx-datatable.bootstrap .datatable-header .datatable-header-cell {
+      vertical-align: bottom;
+      padding: 0.75rem;
+      border-bottom: 1px solid #d1d4d7; }
+      .ngx-datatable.bootstrap .datatable-header .datatable-header-cell .datatable-header-cell-label {
+        line-height: 24px; }
+  .ngx-datatable.bootstrap .datatable-body .datatable-body-row {
+    vertical-align: top;
+    border-top: 1px solid #d1d4d7; }
+    .ngx-datatable.bootstrap .datatable-body .datatable-body-row.datatable-row-even {
+      background-color: rgba(0, 0, 0, 0.05); }
+    .ngx-datatable.bootstrap .datatable-body .datatable-body-row.active {
+      background-color: #1483ff;
+      color: #FFF; }
+    .ngx-datatable.bootstrap .datatable-body .datatable-body-row .datatable-body-cell {
+      padding: 0.75rem;
+      text-align: left;
+      vertical-align: top; }
+  .ngx-datatable.bootstrap .datatable-body .empty-row {
+    position: relative;
+    padding: 0.75rem 1.25rem;
+    margin-bottom: 0; }
+  .ngx-datatable.bootstrap .datatable-footer {
+    background: #424242;
+    color: #ededed;
+    margin-top: -1px; }
+    .ngx-datatable.bootstrap .datatable-footer .page-count {
+      line-height: 50px;
+      height: 50px;
+      padding: 0 1.2rem; }
+    .ngx-datatable.bootstrap .datatable-footer .datatable-pager {
+      margin: 0 10px;
+      vertical-align: top; }
+      .ngx-datatable.bootstrap .datatable-footer .datatable-pager ul li {
+        margin: 10px 0px; }
+        .ngx-datatable.bootstrap .datatable-footer .datatable-pager ul li:not(.disabled).active a, .ngx-datatable.bootstrap .datatable-footer .datatable-pager ul li:not(.disabled):hover a {
+          background-color: #545454;
+          font-weight: bold; }
+      .ngx-datatable.bootstrap .datatable-footer .datatable-pager a {
+        height: 22px;
+        min-width: 24px;
+        line-height: 22px;
+        padding: 0;
+        border-radius: 3px;
+        margin: 0 3px;
+        text-align: center;
+        vertical-align: top;
+        text-decoration: none;
+        vertical-align: bottom;
+        color: #ededed; }
+      .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-left,
+      .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-skip,
+      .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-right,
+      .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-prev {
+        font-size: 18px;
+        line-height: 27px;
+        padding: 0 3px; }
+  .ngx-datatable.bootstrap .datatable-summary-row .datatable-body-row .datatable-body-cell {
+    font-weight: bold; }

src/theme/ngx-datatable/dark.css

+.ngx-datatable.dark {
+  box-shadow: none;
+  background: #1b1e27;
+  border: 1px solid #2f3646;
+  color: #fff;
+  font-size: 13px; }
+  .ngx-datatable.dark .datatable-header {
+    background: #181b24;
+    color: #72809b; }
+    .ngx-datatable.dark .datatable-header .datatable-header-cell {
+      text-align: left;
+      padding: .5rem 1.2rem;
+      font-weight: bold; }
+      .ngx-datatable.dark .datatable-header .datatable-header-cell .datatable-header-cell-label {
+        line-height: 24px; }
+  .ngx-datatable.dark .datatable-body {
+    background: #1a1e28; }
+    .ngx-datatable.dark .datatable-body .datatable-body-row {
+      border-top: 1px solid #2f3646; }
+      .ngx-datatable.dark .datatable-body .datatable-body-row .datatable-body-cell {
+        text-align: left;
+        padding: .5rem 1.2rem;
+        vertical-align: top; }
+      .ngx-datatable.dark .datatable-body .datatable-body-row:hover {
+        background: #171b24;
+        transition-property: background;
+        transition-duration: .3s;
+        transition-timing-function: linear; }
+      .ngx-datatable.dark .datatable-body .datatable-body-row:focus {
+        background-color: #232837; }
+      .ngx-datatable.dark .datatable-body .datatable-body-row.active {
+        background-color: #1483ff;
+        color: #FFF; }
+  .ngx-datatable.dark .datatable-footer {
+    background: #232837;
+    color: #72809b;
+    margin-top: -1px; }
+    .ngx-datatable.dark .datatable-footer .page-count {
+      line-height: 50px;
+      height: 50px;
+      padding: 0 1.2rem; }
+    .ngx-datatable.dark .datatable-footer .datatable-pager {
+      margin: 0 10px;
+      vertical-align: top; }
+      .ngx-datatable.dark .datatable-footer .datatable-pager ul li {
+        margin: 10px 0px; }
+        .ngx-datatable.dark .datatable-footer .datatable-pager ul li:not(.disabled).active a,
+        .ngx-datatable.dark .datatable-footer .datatable-pager ul li:not(.disabled):hover a {
+          background-color: #455066;
+          font-weight: bold; }
+      .ngx-datatable.dark .datatable-footer .datatable-pager a {
+        height: 22px;
+        min-width: 24px;
+        line-height: 22px;
+        padding: 0;
+        border-radius: 3px;
+        margin: 0 3px;
+        text-align: center;
+        vertical-align: top;
+        text-decoration: none;
+        vertical-align: bottom;
+        color: #72809b; }
+      .ngx-datatable.dark .datatable-footer .datatable-pager .datatable-icon-left,
+      .ngx-datatable.dark .datatable-footer .datatable-pager .datatable-icon-skip,
+      .ngx-datatable.dark .datatable-footer .datatable-pager .datatable-icon-right,
+      .ngx-datatable.dark .datatable-footer .datatable-pager .datatable-icon-prev {
+        font-size: 18px;
+        line-height: 27px;
+        padding: 0 3px; }
+  .ngx-datatable.dark .datatable-summary-row .datatable-body-row {
+    background-color: #14171f; }
+    .ngx-datatable.dark .datatable-summary-row .datatable-body-row:hover {
+      background-color: #14171f; }
+    .ngx-datatable.dark .datatable-summary-row .datatable-body-row .datatable-body-cell {
+      font-weight: bold; }

src/theme/ngx-datatable/index.css

+/**
+ * ngx-datatable v"15.0.2" (https://github.com/swimlane/ngx-datatable)
+ * Copyright 2019
+ * Licensed under MIT
+ */
+.ngx-datatable {
+  display: block;
+  overflow: hidden;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  position: relative;
+  -webkit-transform: translate3d(0, 0, 0);
+  /**
+   * Vertical Scrolling Adjustments
+   */
+  /**
+   * Horizontal Scrolling Adjustments
+   */
+  /**
+   * Fixed Header Height Adjustments
+   */
+  /**
+   * Fixed row height adjustments
+   */
+  /**
+   * Shared Styles
+   */
+  /**
+   * Header Styles
+   */
+  /**
+   * Body Styles
+   */
+  /**
+   * Footer Styles
+   */ }
+  .ngx-datatable [hidden] {
+    display: none !important; }
+  .ngx-datatable *, .ngx-datatable *:before, .ngx-datatable *:after {
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box; }
+  .ngx-datatable.scroll-vertical .datatable-body {
+    overflow-y: auto; }
+  .ngx-datatable.scroll-vertical.virtualized .datatable-body .datatable-row-wrapper {
+    position: absolute; }
+  .ngx-datatable.scroll-horz .datatable-body {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch; }
+  .ngx-datatable.fixed-header .datatable-header .datatable-header-inner {
+    white-space: nowrap; }
+    .ngx-datatable.fixed-header .datatable-header .datatable-header-inner .datatable-header-cell {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis; }
+  .ngx-datatable.fixed-row .datatable-scroll {
+    white-space: nowrap; }
+    .ngx-datatable.fixed-row .datatable-scroll .datatable-body-row {
+      white-space: nowrap; }
+      .ngx-datatable.fixed-row .datatable-scroll .datatable-body-row .datatable-body-cell {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis; }
+      .ngx-datatable.fixed-row .datatable-scroll .datatable-body-row .datatable-body-group-cell {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis; }
+  .ngx-datatable .datatable-body-row,
+  .ngx-datatable .datatable-row-center,
+  .ngx-datatable .datatable-header-inner {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: row;
+            flex-direction: row;
+    -ms-flex-flow: row;
+    -o-flex-flow: row;
+    flex-flow: row; }
+  .ngx-datatable .datatable-body-cell,
+  .ngx-datatable .datatable-header-cell {
+    overflow-x: hidden;
+    vertical-align: top;
+    display: inline-block;
+    line-height: 1.625; }
+    .ngx-datatable .datatable-body-cell:focus,
+    .ngx-datatable .datatable-header-cell:focus {
+      outline: none; }
+  .ngx-datatable .datatable-row-left,
+  .ngx-datatable .datatable-row-right {
+    z-index: 9; }
+  .ngx-datatable .datatable-row-left,
+  .ngx-datatable .datatable-row-center,
+  .ngx-datatable .datatable-row-group,
+  .ngx-datatable .datatable-row-right {
+    position: relative; }
+  .ngx-datatable .datatable-header {
+    display: block;
+    overflow: hidden; }
+    .ngx-datatable .datatable-header .datatable-header-inner {
+      -webkit-box-align: stretch;
+          -ms-flex-align: stretch;
+              align-items: stretch;
+      -webkit-align-items: stretch; }
+    .ngx-datatable .datatable-header .datatable-header-cell {
+      position: relative;
+      display: inline-block; }
+      .ngx-datatable .datatable-header .datatable-header-cell.sortable .datatable-header-cell-wrapper {
+        cursor: pointer; }
+      .ngx-datatable .datatable-header .datatable-header-cell.longpress .datatable-header-cell-wrapper {
+        cursor: move; }
+      .ngx-datatable .datatable-header .datatable-header-cell .sort-btn {
+        line-height: 100%;
+        vertical-align: middle;
+        display: inline-block;
+        cursor: pointer; }
+      .ngx-datatable .datatable-header .datatable-header-cell .resize-handle, .ngx-datatable .datatable-header .datatable-header-cell .resize-handle--not-resizable {
+        display: inline-block;
+        position: absolute;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        width: 5px;
+        padding: 0 4px;
+        visibility: hidden; }
+      .ngx-datatable .datatable-header .datatable-header-cell .resize-handle {
+        cursor: ew-resize; }
+      .ngx-datatable .datatable-header .datatable-header-cell.resizeable:hover .resize-handle {
+        visibility: visible; }
+      .ngx-datatable .datatable-header .datatable-header-cell:hover .resize-handle--not-resizable {
+        visibility: visible; }
+      .ngx-datatable .datatable-header .datatable-header-cell .targetMarker {
+        position: absolute;
+        top: 0;
+        bottom: 0; }
+        .ngx-datatable .datatable-header .datatable-header-cell .targetMarker.dragFromLeft {
+          right: 0; }
+        .ngx-datatable .datatable-header .datatable-header-cell .targetMarker.dragFromRight {
+          left: 0; }
+      .ngx-datatable .datatable-header .datatable-header-cell .datatable-header-cell-template-wrap {
+        height: inherit; }
+  .ngx-datatable .datatable-body {
+    position: relative;
+    z-index: 10;
+    display: block; }
+    .ngx-datatable .datatable-body .datatable-scroll {
+      display: inline-block; }
+    .ngx-datatable .datatable-body .datatable-row-detail {
+      overflow-y: hidden; }
+    .ngx-datatable .datatable-body .datatable-row-wrapper {
+      display: -webkit-box;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-box-orient: vertical;
+      -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+      flex-direction: column; }
+    .ngx-datatable .datatable-body .datatable-body-row {
+      outline: none; }
+      .ngx-datatable .datatable-body .datatable-body-row > div {
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex; }
+  .ngx-datatable .datatable-footer {
+    display: block;
+    width: 100%; }
+    .ngx-datatable .datatable-footer .datatable-footer-inner {
+      display: -webkit-box;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-box-align: center;
+          -ms-flex-align: center;
+              align-items: center;
+      width: 100%; }
+    .ngx-datatable .datatable-footer .selected-count .page-count {
+      -webkit-box-flex: 1;
+          -ms-flex: 1 1 40%;
+              flex: 1 1 40%; }
+    .ngx-datatable .datatable-footer .selected-count .datatable-pager {
+      -webkit-box-flex: 1;
+          -ms-flex: 1 1 60%;
+              flex: 1 1 60%; }
+    .ngx-datatable .datatable-footer .page-count {
+      -webkit-box-flex: 1;
+          -ms-flex: 1 1 20%;
+              flex: 1 1 20%; }
+    .ngx-datatable .datatable-footer .datatable-pager {
+      -webkit-box-flex: 1;
+          -ms-flex: 1 1 80%;
+              flex: 1 1 80%;
+      text-align: right; }
+      .ngx-datatable .datatable-footer .datatable-pager .pager,
+      .ngx-datatable .datatable-footer .datatable-pager .pager li {
+        padding: 0;
+        margin: 0;
+        display: inline-block;
+        list-style: none; }
+      .ngx-datatable .datatable-footer .datatable-pager .pager li, .ngx-datatable .datatable-footer .datatable-pager .pager li a {
+        outline: none; }
+      .ngx-datatable .datatable-footer .datatable-pager .pager li a {
+        cursor: pointer;
+        display: inline-block; }
+      .ngx-datatable .datatable-footer .datatable-pager .pager li.disabled a {
+        cursor: not-allowed; }
+
+/*# sourceMappingURL=index.map*/
\ No newline at end of file