diff --git a/projects/IoTCenter/wwwroot/images/device.png b/projects/IoTCenter/wwwroot/images/device.png
new file mode 100644
index 00000000..e7dbf0f9
Binary files /dev/null and b/projects/IoTCenter/wwwroot/images/device.png differ
diff --git a/projects/IoTCenter/wwwroot/images/light.png b/projects/IoTCenter/wwwroot/images/light.png
index 6bdb5379..f7767dc9 100644
Binary files a/projects/IoTCenter/wwwroot/images/light.png and b/projects/IoTCenter/wwwroot/images/light.png differ
diff --git a/projects/IoTCenter/wwwroot/images/node.png b/projects/IoTCenter/wwwroot/images/node.png
new file mode 100644
index 00000000..5305b9ff
Binary files /dev/null and b/projects/IoTCenter/wwwroot/images/node.png differ
diff --git a/projects/WebApp/wwwroot/css/app.css b/projects/WebApp/wwwroot/css/app.css
index b2572f08..5e74fcbf 100644
--- a/projects/WebApp/wwwroot/css/app.css
+++ b/projects/WebApp/wwwroot/css/app.css
@@ -767,16 +767,21 @@ img {
 
 .ir table,.ir .table {
     border-collapse: separate;
-    margin: 15px auto;
-    padding: 15px;
+    margin: 5px auto;
+    padding: 5px;
     border: 2px solid #ddd;
     border-radius: 15px;
 }
 
     .ir table td {
-        padding: 5px;
+        padding: 2px;
         text-align: center;
     }
     .ir .table button{
-        margin:5px;
-    }
\ No newline at end of file
+        margin:2px;
+    }
+.weui-grid__icon {
+    width: 48px;
+    height: 48px;
+    margin: 0 auto;
+}
\ No newline at end of file
diff --git a/projects/WebApp/wwwroot/js/iot.js b/projects/WebApp/wwwroot/js/iot.js
index e9eb896e..72608416 100644
--- a/projects/WebApp/wwwroot/js/iot.js
+++ b/projects/WebApp/wwwroot/js/iot.js
@@ -22,7 +22,7 @@ function getDeviceDataUnit(device, name) {
 function getDeviceData(device, name) {
     var data = Enumerable.from(device.data).where(o => o.name === name).firstOrDefault();
     if (data) {
-        return data['value'] + data['unit'];
+        return data['value'] + data['unit'] ? ' ' + data['unit']:'';
     }
     return null;
 }
diff --git a/projects/WebApp/wwwroot/pages/home.html b/projects/WebApp/wwwroot/pages/home.html
index 959c5f49..cbd187b6 100644
--- a/projects/WebApp/wwwroot/pages/home.html
+++ b/projects/WebApp/wwwroot/pages/home.html
@@ -4,22 +4,20 @@
             <h2>消息</h2>
         </div>
         <div class="weui-tab__content">
-            <div class="col-md-12 my-2">物联网</div>
-            <div class="col-md-12">
-                <div class="row">
-                    <router-link to="/pages/iot/products" class="col-md-2 col-sm-3 col-4 p-1">
-                        <div class="weui-grid__icon">
-                            <i class="ion ion-md-laptop weui-tabbar__icon"></i>
-                        </div>
-                        <p class="weui-grid__label">设备</p>
-                    </router-link>
-                    <router-link to="/pages/iot/nodes" class="col-md-2 col-sm-3 col-4 p-1">
-                        <div class="weui-grid__icon">
-                            <i class="ion ion-md-share weui-tabbar__icon"></i>
-                        </div>
-                        <p class="weui-grid__label">智慧教室</p>
-                    </router-link>
-                </div>
+            <div class="row p-3">物联网</div>
+            <div class="row">
+                <router-link to="/pages/iot/products" class="col-md-2 col-sm-3 col-4 p-3">
+                    <div class="weui-grid__icon">
+                        <img src="/IoTCenter/images/device.png"/>
+                    </div>
+                    <p class="weui-grid__label">设备</p>
+                </router-link>
+                <router-link to="/pages/iot/nodes" class="col-md-2 col-sm-3 col-4 p-3">
+                    <div class="weui-grid__icon">
+                        <img src="/IoTCenter/images/node.png" />
+                    </div>
+                    <p class="weui-grid__label">智慧教室</p>
+                </router-link>
             </div>
         </div>
         <div class="weui-tab__content">
diff --git a/projects/WebApp/wwwroot/pages/iot/device/humiture.html b/projects/WebApp/wwwroot/pages/iot/device/humiture.html
index a15204c7..a91ffbd7 100644
--- a/projects/WebApp/wwwroot/pages/iot/device/humiture.html
+++ b/projects/WebApp/wwwroot/pages/iot/device/humiture.html
@@ -1,38 +1,38 @@
 <template>
-    <div class="card">
+    <div class="card" style="box-sizing:border-box;height:150px;margin:10px;">
         <div class="card-header">
             {{device.displayName}}
             <span class="float-right text-success" v-if="device.isOnline"><i class="ion ion-ios-wifi"></i></span>
             <span class="float-right text-danger" v-else><i class="ion ion-ios-wifi"></i></span>
         </div>
         <div class="card-body">
-            <div class="row media" style="height:100px;">
+            <div class="row" style="height:100%;width:300px;margin: 0 auto;">
                 <div class="col col-md-4 col-sm-4 align-self-center">
                     <img class="mh-100" src="/IoTCenter/images/humiture.png" />
                 </div>
                 <div class="col col-md-8 col-sm-8 align-self-center">
-                    <div class="row" style="height:50px;line-height:28px;">
+                    <div class="row" style="height:25px;line-height:25px;">
                         <span>
                             温度：
-                            <span class="text-success mx-2" style="font-size:28px;" v-if="getDeviceDataDescription(device,'温度')==='适中'">
+                            <span class="text-success mx-2" style="font-size:20px;" v-if="getDeviceDataDescription(device,'温度')==='适中'">
                                 {{getDeviceDataDescription(device,'温度')}}
                             </span>
-                            <span v-else class="text-danger" style="font-size:28px;">
+                            <span v-else class="text-danger" style="font-size:20px;">
                                 {{getDeviceDataDescription(device,'温度')}}
                             </span>
                             {{getDeviceData(device,'温度')}}
                         </span>
                     </div>
-                    <div class="row" style="height:50px;line-height:28px;">
+                    <div class="row" style="height:25px;line-height:20px;">
                         <span>
                             湿度：
-                            <span class="text-success" style="font-size:28px;" v-if="getDeviceDataDescription(device,'湿度')==='适中'">
+                            <span class="text-success" style="font-size:20px;" v-if="getDeviceDataDescription(device,'湿度')==='适中'">
                                 {{getDeviceDataDescription(device,'湿度')}}
                             </span>
-                            <span v-else class="text-danger mx-2" style="font-size:28px;">
+                            <span v-else class="text-danger mx-2" style="font-size:20px;">
                                 {{getDeviceDataDescription(device,'湿度')}}
                             </span>
-                            {{getDeviceData(device,'温度')}}
+                            {{getDeviceData(device,'湿度')}}
                         </span>
                     </div>
                 </div>
diff --git a/projects/WebApp/wwwroot/pages/iot/device/ir.html b/projects/WebApp/wwwroot/pages/iot/device/ir.html
index eac2737c..8c63e5c3 100644
--- a/projects/WebApp/wwwroot/pages/iot/device/ir.html
+++ b/projects/WebApp/wwwroot/pages/iot/device/ir.html
@@ -5,7 +5,7 @@
             <span class="float-right text-success" v-if="device.isOnline"><i class="ion ion-ios-wifi"></i></span>
             <span class="float-right text-danger" v-else><i class="ion ion-ios-wifi"></i></span>
         </div>
-        <div class="card-body">
+        <div class="card-body" style="padding-top:0;">
             <div class="weui-tab">
                 <div class="weui-navbar">
                     <a href="javascript:;" class="weui-tabbar__item">
@@ -23,7 +23,6 @@
                 </div>
                 <div class="weui-tab__panel media ir">
                     <div class="weui-tab__content">
-                        <div>{{code}}={{power.value}}+{{pattern.value}}+{{direction.value}}+{{wind.value}}+{{temperature.value}}</div>
                         <table>
                             <tr>
                                 <td>
@@ -70,10 +69,10 @@
                         <table>
                             <tr>
                                 <td>
-                                    <button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="2" v-on:click="tv($event)">AV</button>
+                                    <button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="1" v-on:click="tv($event)">电源</button>
                                 </td>
                                 <td>
-                                    <button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="1" v-on:click="tv($event)">电源</button>
+                                    <button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="2" v-on:click="tv($event)">AV</button>
                                 </td>
                                 <td>
                                     <button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="15" v-on:click="tv($event)">静音</button>
@@ -114,12 +113,15 @@
                             </tr>
                             <tr>
                                 <td>
+                                    <button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="13" v-on:click="tv($event)">返回</button>
                                 </td>
                                 <td>
                                     <button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="0" v-on:click="tv($event)">0</button>
                                 </td>
                                 <td>
+                                    <button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="14" v-on:click="tv($event)">退出</button>
                                 </td>
+
                             </tr>
                             <tr>
                                 <td>
@@ -181,7 +183,17 @@
                                 <td>
                                     <button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="25" v-on:click="tv($event)">↓</button>
                                 </td>
-
+                            </tr>
+                            <tr>
+                                <td>
+                                    <button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="26" v-on:click="tv($event)">快退</button>
+                                </td>
+                                <td>
+                                    <button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="28" v-on:click="tv($event)">播放</button>
+                                </td>
+                                <td>
+                                    <button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="28" v-on:click="tv($event)">快进</button>
+                                </td>
                             </tr>
                         </table>
                     </div>
@@ -189,11 +201,9 @@
                         <table>
                             <tr>
                                 <td>
-                                    <button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="2" v-on:click="tv($event)">关</button>
-                                </td>
-                                <td>
-                                    <button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="1" v-on:click="tv($event)">开</button>
+                                    <button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="1" v-on:click="tv($event)">电源</button>
                                 </td>
+                                <td></td>
                                 <td>
                                     <button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="15" v-on:click="tv($event)">静音</button>
                                 </td>
@@ -233,11 +243,13 @@
                             </tr>
                             <tr>
                                 <td>
+                                    <button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="13" v-on:click="tv($event)">返回</button>
                                 </td>
                                 <td>
                                     <button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="0" v-on:click="tv($event)">0</button>
                                 </td>
                                 <td>
+                                    <button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="14" v-on:click="tv($event)">退出</button>
                                 </td>
                             </tr>
                             <tr>
@@ -300,7 +312,17 @@
                                 <td>
                                     <button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="25" v-on:click="tv($event)">↓</button>
                                 </td>
-
+                            </tr>
+                            <tr>
+                                <td>
+                                    <button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="26" v-on:click="tv($event)">快退</button>
+                                </td>
+                                <td>
+                                    <button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="28" v-on:click="tv($event)">播放</button>
+                                </td>
+                                <td>
+                                    <button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="28" v-on:click="tv($event)">快进</button>
+                                </td>
                             </tr>
                         </table>
                     </div>
diff --git a/projects/WebApp/wwwroot/pages/iot/device/light.html b/projects/WebApp/wwwroot/pages/iot/device/light.html
index 558cc95c..aaaa1630 100644
--- a/projects/WebApp/wwwroot/pages/iot/device/light.html
+++ b/projects/WebApp/wwwroot/pages/iot/device/light.html
@@ -1,14 +1,14 @@
 <template>
-    <div class="card">
+    <div class="card" style="box-sizing:border-box;height:150px;margin:10px;">
         <div class="card-header">
             {{device.displayName}}
             <span class="float-right text-success" v-if="device.isOnline"><i class="ion ion-ios-wifi"></i></span>
             <span class="float-right text-danger" v-else><i class="ion ion-ios-wifi"></i></span>
         </div>
         <div class="card-body">
-            <div class="row media" style="height:100px;">
+            <div class="row" style="height:100%;width:300px;margin: 0 auto;">
                 <div class="col col-md-4 col-sm-4 align-self-center">
-                    <img class="mh-100" src="/IoTCenter/images/light.png" style="width:48px;" />
+                    <img class="mh-100" src="/IoTCenter/images/light.png" />
                 </div>
                 <div class="col col-md-8 col-sm-8 align-self-center">
                     <div class="row" style="line-height:28px;">
diff --git a/projects/WebApp/wwwroot/pages/iot/device/person.html b/projects/WebApp/wwwroot/pages/iot/device/person.html
index f191bd8b..22895abc 100644
--- a/projects/WebApp/wwwroot/pages/iot/device/person.html
+++ b/projects/WebApp/wwwroot/pages/iot/device/person.html
@@ -1,14 +1,14 @@
 <template>
-    <div class="card">
+    <div class="card" style="box-sizing:border-box;height:150px;margin:10px;">
         <div class="card-header">
             {{device.displayName}}
             <span class="float-right text-success" v-if="device.isOnline"><i class="ion ion-ios-wifi"></i></span>
             <span class="float-right text-danger" v-else><i class="ion ion-ios-wifi"></i></span>
         </div>
         <div class="card-body">
-            <div class="row media" style="height:100px;">
+            <div class="row" style="height:100%;width:300px;margin: 0 auto;">
                 <div class="col col-md-4 col-sm-4 align-self-center">
-                    <img class="mh-100" src="/IoTCenter/images/smoke.png" style="width:48px;" />
+                    <img class="mh-100" src="/IoTCenter/images/person.png" style="width:48px;" />
                 </div>
                 <div class="col col-md-8 col-sm-8 align-self-center">
                     <div class="row" style="line-height:28px;">
diff --git a/projects/WebApp/wwwroot/pages/iot/device/smoke.html b/projects/WebApp/wwwroot/pages/iot/device/smoke.html
index f191bd8b..8f36252c 100644
--- a/projects/WebApp/wwwroot/pages/iot/device/smoke.html
+++ b/projects/WebApp/wwwroot/pages/iot/device/smoke.html
@@ -1,12 +1,12 @@
 <template>
-    <div class="card">
+    <div class="card" style="box-sizing:border-box;height:150px;margin:10px;">
         <div class="card-header">
             {{device.displayName}}
             <span class="float-right text-success" v-if="device.isOnline"><i class="ion ion-ios-wifi"></i></span>
             <span class="float-right text-danger" v-else><i class="ion ion-ios-wifi"></i></span>
         </div>
         <div class="card-body">
-            <div class="row media" style="height:100px;">
+            <div class="row" style="height:100%;width:300px;margin: 0 auto;">
                 <div class="col col-md-4 col-sm-4 align-self-center">
                     <img class="mh-100" src="/IoTCenter/images/smoke.png" style="width:48px;" />
                 </div>
diff --git a/projects/WebApp/wwwroot/pages/iot/node.html b/projects/WebApp/wwwroot/pages/iot/node.html
index d78748e6..d5783b7f 100644
--- a/projects/WebApp/wwwroot/pages/iot/node.html
+++ b/projects/WebApp/wwwroot/pages/iot/node.html
@@ -19,138 +19,20 @@
     <div class="col col-md-12 my-2 px-3">环境</div>
     <div class="row">
         <!--光强检测器-->
-        <div class="col col-md-2 col-sm-3 col-4 " v-for="device in getDevices('光强检测器')">
-            <div class="card">
-                <div class="card-header">
-                    {{device.displayName}}
-                    <span class="float-right text-success" v-if="device.isOnline"><i class="ion ion-ios-wifi"></i></span>
-                    <span class="float-right text-danger" v-else><i class="ion ion-ios-wifi"></i></span>
-                </div>
-                <div class="card-body">
-                    <div class="row media" style="height:100px;">
-                        <div class="col col-md-4 col-sm-4 align-self-center">
-                            <img class="mh-100" src="/IoTCenter/images/light.png" style="width:48px;" />
-                        </div>
-                        <div class="col col-md-8 col-sm-8 align-self-center">
-                            <div class="row" style="line-height:28px;">
-                                <span>
-                                    光照度：
-                                    <span class="text-success" style="font-size:28px;" v-if="getDeviceDataAttr(device.number,'光照度','description')==='适中'">
-                                        {{getDeviceDataAttr(device.number,'光照度','description')}}
-                                    </span>
-                                    <span v-else class="text-danger mx-2" style="font-size:28px;">
-                                        {{getDeviceDataAttr(device.number,'光照度','description')}}
-                                    </span>
-                                    {{getDeviceDataAttr(device.number,'光照度','value')}}{{ getDeviceDataAttr(device.number,'光照度','unit')}}
-                                </span>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
+        <div v-for="device in getDevices('光强检测器')" class="col" style="min-width:320px;">
+            <iot-light v-bind:device="device"></iot-light>
         </div>
         <!--温湿度传感器-->
-        <div class="col col-md-2 col-sm-3 col-4 " v-for="device in getDevices('温湿度传感器')">
-            <div class="card">
-                <div class="card-header">
-                    {{device.displayName}}
-                    <span class="float-right text-success" v-if="device.isOnline"><i class="ion ion-ios-wifi"></i></span>
-                    <span class="float-right text-danger" v-else><i class="ion ion-ios-wifi"></i></span>
-                </div>
-                <div class="card-body">
-                    <div class="row media" style="height:100px;">
-                        <div class="col col-md-4 col-sm-4 align-self-center">
-                            <img class="mh-100" src="/IoTCenter/images/humiture.png" />
-                        </div>
-                        <div class="col col-md-8 col-sm-8 align-self-center">
-                            <div class="row" style="height:50px;line-height:28px;">
-                                <span>
-                                    温度：
-                                    <span class="text-success mx-2" style="font-size:28px;" v-if="getDeviceDataAttr(device.number,'温度','description')==='适中'">
-                                        {{getDeviceDataAttr(device.number,'温度','description')}}
-                                    </span>
-                                    <span v-else class="text-danger" style="font-size:28px;">
-                                        {{getDeviceDataAttr(device.number,'温度','description')}}
-                                    </span>
-                                    {{getDeviceDataAttr(device.number,'温度','value')}}{{ getDeviceDataAttr(device.number,'温度','unit')}}
-                                </span>
-                            </div>
-                            <div class="row" style="height:50px;line-height:28px;">
-                                <span>
-                                    湿度：
-                                    <span class="text-success" style="font-size:28px;" v-if="getDeviceDataAttr(device.number,'湿度','description')==='适中'">
-                                        {{getDeviceDataAttr(device.number,'湿度','description')}}
-                                    </span>
-                                    <span v-else class="text-danger mx-2" style="font-size:28px;">
-                                        {{getDeviceDataAttr(device.number,'湿度','description')}}
-                                    </span>
-                                    {{getDeviceDataAttr(device.number,'湿度','value')}}{{ getDeviceDataAttr(device.number,'湿度','unit')}}
-                                </span>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
+        <div v-for="device in getDevices('温湿度传感器')" class="col"  style="min-width:320px;">
+            <iot-humiture v-bind:device="device"></iot-humiture>
         </div>
         <!--烟雾报警器-->
-        <div class="col col-md-2 col-sm-3 col-4 " v-for="device in getDevices('烟雾报警器')">
-            <div class="card">
-                <div class="card-header">
-                    {{device.displayName}}
-                    <span class="float-right text-success" v-if="device.isOnline"><i class="ion ion-ios-wifi"></i></span>
-                    <span class="float-right text-danger" v-else><i class="ion ion-ios-wifi"></i></span>
-                </div>
-                <div class="card-body">
-                    <div class="row media" style="height:100px;">
-                        <div class="col col-md-4 col-sm-4 align-self-center">
-                            <img class="mh-100" src="/IoTCenter/images/smoke.png" style="width:48px;" />
-                        </div>
-                        <div class="col col-md-8 col-sm-8 align-self-center">
-                            <div class="row" style="line-height:28px;">
-                                <span>
-                                    状态：
-                                    <span class="text-success" style="font-size:28px;" v-if="getDeviceDataAttr(device.number,'状态','value')==='正常'">
-                                        {{getDeviceDataAttr(device.number,'状态','value')}}
-                                    </span>
-                                    <span v-else class="text-danger mx-2" style="font-size:28px;">
-                                        {{getDeviceDataAttr(device.number,'状态','value')}}
-                                    </span>
-                                </span>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
+        <div v-for="device in getDevices('烟雾报警器')" class="col"  style="min-width:320px;">
+            <iot-smoke v-bind:device="device"></iot-smoke>
         </div>
         <!--人体感应器-->
-        <div class="col col-md-2 col-sm-3 col-4 " v-for="device in getDevices('人体感应器')">
-            <div class="card">
-                <div class="card-header">
-                    {{device.displayName}}
-                    <span class="float-right text-success" v-if="device.isOnline"><i class="ion ion-ios-wifi"></i></span>
-                    <span class="float-right text-danger" v-else><i class="ion ion-ios-wifi"></i></span>
-                </div>
-                <div class="card-body">
-                    <div class="row media" style="height:100px;">
-                        <div class="col col-md-4 col-sm-4 align-self-center">
-                            <img class="mh-100" src="/IoTCenter/images/person.png" style="width:48px;" />
-                        </div>
-                        <div class="col col-md-8 col-sm-8 align-self-center">
-                            <div class="row" style="line-height:28px;">
-                                <span>
-                                    状态：
-                                    <span class="text-success" style="font-size:28px;" v-if="getDeviceDataAttr(device.number,'状态','value')==='正常'">
-                                        {{getDeviceDataAttr(device.number,'状态','value')}}
-                                    </span>
-                                    <span v-else class="text-danger mx-2" style="font-size:28px;">
-                                        {{getDeviceDataAttr(device.number,'状态','value')}}
-                                    </span>
-                                </span>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
+        <div v-for="device in getDevices('人体感应器')" class="col"  style="min-width:320px;">
+            <iot-person v-bind:device="device"></iot-person>
         </div>
     </div>
     <!--电器-->
diff --git a/projects/WebApp/wwwroot/pages/iot/nodes.html b/projects/WebApp/wwwroot/pages/iot/nodes.html
index 7a0f467e..026eb221 100644
--- a/projects/WebApp/wwwroot/pages/iot/nodes.html
+++ b/projects/WebApp/wwwroot/pages/iot/nodes.html
@@ -4,14 +4,12 @@
             <mt-button icon="back">back</mt-button>
         </router-link>
     </mt-header>
-    <div class="col-md-12">
-        <div class="row">
-            <router-link v-for="node in nodes" :to="{path:'/pages/iot/node',query:{number:node.number}}" class="col-md-2 col-sm-3 col-4 m-2">
-                <div class="weui-grid__icon">
-                    <img :src="'/IoTCenter'+node.image" />
-                </div>
-                <p class="weui-grid__label">{{node.name}}（{{node.count}}）</p>
-            </router-link>
-        </div>
+    <div class="row">
+        <router-link v-for="node in nodes" :to="{path:'/pages/iot/node',query:{number:node.number}}" class="col-md-2 col-sm-3 col-4 p-3">
+            <div class="weui-grid__icon">
+                <img :src="'/IoTCenter'+node.image" />
+            </div>
+            <p class="weui-grid__label">{{node.name}}（{{node.count}}）</p>
+        </router-link>
     </div>
 </div>
\ No newline at end of file
diff --git a/projects/WebApp/wwwroot/pages/iot/product.html b/projects/WebApp/wwwroot/pages/iot/product.html
index 902e4649..7aa9decc 100644
--- a/projects/WebApp/wwwroot/pages/iot/product.html
+++ b/projects/WebApp/wwwroot/pages/iot/product.html
@@ -4,16 +4,12 @@
             <mt-button icon="back">back</mt-button>
         </router-link>
     </mt-header>
-    <div class="col-md-12">
-        <div class="row">
-            <template v-if="product">
-                <router-link v-for="device in product.devices" :to="{path:'/pages/iot/device',query:{number:device.number}}" class="col-lg-3 col-md-4 col-sm-6 p-5">
-                    <div class="weui-grid__icon">
-                        <img :src="'/IoTCenter'+product.image" />
-                    </div>
-                    <p class="weui-grid__label">{{device.displayName}}</p>
-                </router-link>
-            </template>
-        </div>
+    <div class="row">
+        <router-link v-if="product" v-for="device in product.devices" :to="{path:'/pages/iot/device',query:{number:device.number}}" class="col-lg-3 col-md-4 col-sm-6 p-3">
+            <div class="weui-grid__icon">
+                <img :src="'/IoTCenter'+product.image" />
+            </div>
+            <p class="weui-grid__label">{{device.displayName}}</p>
+        </router-link>
     </div>
 </div>
\ No newline at end of file
diff --git a/projects/WebApp/wwwroot/pages/iot/products.html b/projects/WebApp/wwwroot/pages/iot/products.html
index d4710d13..3b2b2ba6 100644
--- a/projects/WebApp/wwwroot/pages/iot/products.html
+++ b/projects/WebApp/wwwroot/pages/iot/products.html
@@ -4,14 +4,12 @@
             <mt-button icon="back">back</mt-button>
         </router-link>
     </mt-header>
-    <div class="col-md-12">
-        <div class="row">
-            <router-link v-for="product in products" :to="{path:'/pages/iot/product',query:{number:product.number}}" class="col-md-2 col-sm-3 col-4 p-1">
-                <div class="weui-grid__icon">
-                    <img :src="'/IoTCenter'+product.image" />
-                </div>
-                <p class="weui-grid__label">{{product.name}}（{{product.count}}）</p>
-            </router-link>
-        </div>
+    <div class="row">
+        <router-link v-for="product in products" :to="{path:'/pages/iot/product',query:{number:product.number}}" class="col-md-2 col-sm-3 col-4 p-3">
+            <div class="weui-grid__icon">
+                <img class="weui-tabbar__icon" :src="'/IoTCenter'+product.image" />
+            </div>
+            <p class="weui-grid__label">{{product.name}}（{{product.count}}）</p>
+        </router-link>
     </div>
 </div>
\ No newline at end of file