homepage 用了ion-list

src/app/home/home.page.html

@@ -30,27 +30,51 @@
                     <i class="vo v-no-signal"></i>
                     <div class="in">网络连接失败</div>
                 </div>
-                <div class="item" *ngFor="let item of items" (click)="toControl(item)">
-                    <div>
-                        <div class="top">{{item.name}}
-                            <div class="right">{{item.time | date: 'yyyy-MM-dd HH:mm:ss'}}</div>
-                        </div>
-                        <div class="content">
-                            <div class="left">
-                                <img [src]="'../../assets/img/' + item.img">
+                    <!-- The list directive is great, but be sure to also checkout the collection repeat directive when scrolling through large lists -->
+                    <ion-list mode="ios">
+                        <ion-item *ngFor="let item of items" (click)="toControl(item)">
+                            <div class="item">
+                                <div class="top">{{item.name}}
+                                    <div class="right">{{item.time | date: 'yyyy-MM-dd HH:mm:ss'}}</div>
+                                </div>
+                                <div class="content">
+                                    <div class="left">
+                                        <img [src]="'../../assets/img/' + item.img">
+                                    </div>
+                                    <div class="rightCon">
+                                        <div class="block1" *ngIf="item.yewei || item.yewei === 0">池体液位: &nbsp;&nbsp;{{item.yewei}} m</div>
+                                        <div class="block2" *ngIf="item.temp || item.temp === 0">液体温度: &nbsp;&nbsp;{{item.temp}} ℃</div>
+                                        <div class="block2">运行状态: &nbsp;&nbsp;{{item.state ? '工作中' : '未运行'}} </div>
+                                    </div>
+                                </div>
+                                <div class="bottom">
+                                    <div [ngClass]="{'sucCir': item.state, 'errCir': !item.state}"></div>&nbsp;
+                                    <span style="font-size: 13px">{{item.online ? '在线' : '离线'}}</span>
+                                </div>
                             </div>
-                            <div class="rightCon">
-                                <div class="block1" *ngIf="item.yewei || item.yewei === 0">池体液位: &nbsp;&nbsp;{{item.yewei}} m</div>
-                                <div class="block2" *ngIf="item.temp || item.temp === 0">液体温度: &nbsp;&nbsp;{{item.temp}} ℃</div>
-                                <div class="block2">运行状态: &nbsp;&nbsp;{{item.state ? '工作中' : '未运行'}} </div>
-                            </div>
-                        </div>
-                        <div class="bottom">
-                            <div [ngClass]="{'sucCir': item.state, 'errCir': !item.state}"></div>&nbsp;
-                            <span style="font-size: 13px">{{item.online ? '在线' : '离线'}}</span>
-                        </div>
-                    </div>
-                </div>
+                        </ion-item>
+                    </ion-list>
+                <!--<div class="item" *ngFor="let item of items" (click)="toControl(item)">-->
+                    <!--<div>-->
+                        <!--<div class="top">{{item.name}}-->
+                            <!--<div class="right">{{item.time | date: 'yyyy-MM-dd HH:mm:ss'}}</div>-->
+                        <!--</div>-->
+                        <!--<div class="content">-->
+                            <!--<div class="left">-->
+                                <!--<img [src]="'../../assets/img/' + item.img">-->
+                            <!--</div>-->
+                            <!--<div class="rightCon">-->
+                                <!--<div class="block1" *ngIf="item.yewei || item.yewei === 0">池体液位: &nbsp;&nbsp;{{item.yewei}} m</div>-->
+                                <!--<div class="block2" *ngIf="item.temp || item.temp === 0">液体温度: &nbsp;&nbsp;{{item.temp}} ℃</div>-->
+                                <!--<div class="block2">运行状态: &nbsp;&nbsp;{{item.state ? '工作中' : '未运行'}} </div>-->
+                            <!--</div>-->
+                        <!--</div>-->
+                        <!--<div class="bottom">-->
+                            <!--<div [ngClass]="{'sucCir': item.state, 'errCir': !item.state}"></div>&nbsp;-->
+                            <!--<span style="font-size: 13px">{{item.online ? '在线' : '离线'}}</span>-->
+                        <!--</div>-->
+                    <!--</div>-->
+                <!--</div>-->
             </div>
         </div>
     </div>

src/app/home/home.page.scss

@@ -25,9 +25,10 @@
 
 .item {
   margin-bottom: 10px;
-  padding: 3px 10px 0px;
+  padding: 3px 3px 0px;
   background-color: #ffffff;
   display:block;
+  width: calc(100%);
 }
 
 .top {
@@ -51,7 +52,7 @@
 }
 
 .rightCon {
-  width: calc(100% - 110px);
+  width: calc(50%);
   line-height: 25px;
   vertical-align: top;
   display: inline-block;

src/environments/environment.ts

@@ -4,7 +4,7 @@
 
 export const environment = {
   // production: false,
-  // url: 'http://pasture.witium.com.cn/api', // 对外访问测试网地址
+  url: 'http://pasture.witium.com.cn/api', // 对外访问测试网地址
   // url: 'http://cloud-test.witium.com:8096', // 测试
   // url: 'http://172.16.1.53:8097', // cy
   // url: 'http://172.16.1.52:8096', // zz
@@ -12,7 +12,7 @@ export const environment = {
   // mqttUrl: '172.16.1.24',
   // mqttUrl: '120.27.235.39'
   production: true,
-  url: 'http://pasture.witium.com/api', // 对外访问测试网地址
+  // url: 'http://pasture.witium.com/api', // 对外访问测试网地址
   // url: 'http://172.16.1.13:8096', // 测试
   mqttUrl: '120.27.235.39'
 };