diff --git a/projects/WebApp/wwwroot/pages/iot/device/curtain.html b/projects/WebApp/wwwroot/pages/iot/device/curtain.html
index 149326d8..de57d5cd 100644
--- a/projects/WebApp/wwwroot/pages/iot/device/curtain.html
+++ b/projects/WebApp/wwwroot/pages/iot/device/curtain.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/curtain.png" style="width:48px;" />
                 </div>
diff --git a/projects/WebApp/wwwroot/pages/iot/device/gateway.html b/projects/WebApp/wwwroot/pages/iot/device/gateway.html
index 48ddfb7b..35208278 100644
--- a/projects/WebApp/wwwroot/pages/iot/device/gateway.html
+++ b/projects/WebApp/wwwroot/pages/iot/device/gateway.html
@@ -1,19 +1,19 @@
 <template>
-    <div class="card">
+    <div class="card" style="box-sizing:border-box;height:150px;margin:10px;">
         <div class="card-header">
             {{device.displayName}}
         </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/gateway.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>版本：{{getDeviceDataValue(device,'版本')}}</span>
-                        <button class="weui-btn weui-btn_mini weui-btn_primary" v-on:click="execApi(device.number,'/Gateway/X9d')">刷新</button>
-                        <span>设备：{{getDeviceDataValue(device,'设备数量')}}</span>
-                        <button class="weui-btn weui-btn_mini weui-btn_primary" v-on:click="execApi(device.number,'/Gateway/X81')">刷新</button>
+                    <div class="row" style="line-height:25px;">
+                        <button class="weui-btn weui-btn_mini weui-btn_default" v-on:click="execApi(device.number,'/Gateway/X9d')">版本</button>
+                        <span class="badge badge-info" style="line-height:26px;">{{getDeviceDataValue(device,'版本')}}</span>
+                        <button class="weui-btn weui-btn_mini weui-btn_default" v-on:click="execApi(device.number,'/Gateway/X81')">设备</button>
+                        <span class="badge badge-info" style="line-height:26px;">{{getDeviceDataValue(device,'设备数量')}}</span>
                     </div>
                 </div>
             </div>
diff --git a/projects/WebApp/wwwroot/pages/iot/device/socket.html b/projects/WebApp/wwwroot/pages/iot/device/socket.html
index 4cd6ff6d..50453e26 100644
--- a/projects/WebApp/wwwroot/pages/iot/device/socket.html
+++ b/projects/WebApp/wwwroot/pages/iot/device/socket.html
@@ -1,19 +1,19 @@
 <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/socket.png" style="width:48px;" />
                 </div>
                 <div class="col col-md-8 col-sm-8 align-self-center">
                     <div class="row" style="line-height:28px;">
-                        <img v-if="getDeviceDataValue(device,'状态')==='开'" v-on:click="execApi(device.number,'/Socket/Off')" src="/IoTCenter/images/on.png" />
-                        <img v-else="getDeviceDataValue(device,'状态')==='关'" v-on:click="execApi(device.number,'/Socket/On')" src="/IoTCenter/images/off.png" />
+                        <img style="height:32px;" v-if="getDeviceDataValue(device,'状态')==='开'" v-on:click="execApi(device.number,'/Socket/Off')" src="/IoTCenter/images/on.png" />
+                        <img style="height:32px;" v-else="getDeviceDataValue(device,'状态')==='关'" v-on:click="execApi(device.number,'/Socket/On')" src="/IoTCenter/images/off.png" />
                     </div>
                 </div>
             </div>
diff --git a/projects/WebApp/wwwroot/pages/iot/device/switch3.html b/projects/WebApp/wwwroot/pages/iot/device/switch3.html
index c2f273af..0a14b84b 100644
--- a/projects/WebApp/wwwroot/pages/iot/device/switch3.html
+++ b/projects/WebApp/wwwroot/pages/iot/device/switch3.html
@@ -1,23 +1,23 @@
 <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/switch1.png" style="width:48px;" />
                 </div>
                 <div class="col col-md-8 col-sm-8 align-self-center">
                     <div class="row" style="line-height:28px;">
-                        <img v-if="getDeviceDataValue(device,'L1状态')=='开'" v-on:click="execApi(device.number,'/Switch3/L1Off')" src="/IoTCenter/images/on.png" />
-                        <img v-if="getDeviceDataValue(device,'L1状态')=='关'" v-on:click="execApi(device.number,'/Switch3/L1On')" src="/IoTCenter/images/off.png" />
-                        <img v-if="getDeviceDataValue(device,'L2状态')=='开'" v-on:click="execApi(device.number,'/Switch3/L2Off')" src="/IoTCenter/images/on.png" />
-                        <img v-if="getDeviceDataValue(device,'L2状态')=='关'" v-on:click="execApi(device.number,'/Switch3/L2On')" src="/IoTCenter/images/off.png" />
-                        <img v-if="getDeviceDataValue(device,'L3状态')=='开'" v-on:click="execApi(device.number,'/Switch3/L3Off')" src="/IoTCenter/images/on.png" />
-                        <img v-if="getDeviceDataValue(device,'L3状态')=='关'" v-on:click="execApi(device.number,'/Switch3/L3On')" src="/IoTCenter/images/off.png" />
+                        <img style="height:32px;" v-if="getDeviceDataValue(device,'L1状态')=='开'" v-on:click="execApi(device.number,'/Switch3/L1Off')" src="/IoTCenter/images/on.png" />
+                        <img style="height:32px;" v-if="getDeviceDataValue(device,'L1状态')=='关'" v-on:click="execApi(device.number,'/Switch3/L1On')" src="/IoTCenter/images/off.png" />
+                        <img style="height:32px;" v-if="getDeviceDataValue(device,'L2状态')=='开'" v-on:click="execApi(device.number,'/Switch3/L2Off')" src="/IoTCenter/images/on.png" />
+                        <img style="height:32px;" v-if="getDeviceDataValue(device,'L2状态')=='关'" v-on:click="execApi(device.number,'/Switch3/L2On')" src="/IoTCenter/images/off.png" />
+                        <img style="height:32px;" v-if="getDeviceDataValue(device,'L3状态')=='开'" v-on:click="execApi(device.number,'/Switch3/L3Off')" src="/IoTCenter/images/on.png" />
+                        <img style="height:32px;" v-if="getDeviceDataValue(device,'L3状态')=='关'" v-on:click="execApi(device.number,'/Switch3/L3On')" src="/IoTCenter/images/off.png" />
                     </div>
                 </div>
             </div>
diff --git a/projects/WebApp/wwwroot/pages/iot/node.html b/projects/WebApp/wwwroot/pages/iot/node.html
index d5783b7f..7bbfbc91 100644
--- a/projects/WebApp/wwwroot/pages/iot/node.html
+++ b/projects/WebApp/wwwroot/pages/iot/node.html
@@ -39,78 +39,16 @@
     <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/curtain.png" style="width:48px;" />
-                        </div>
-                        <div class="col col-md-8 col-sm-8 align-self-center">
-                            <div class="row" style="line-height:28px;">
-                                <img style="height:32px;" v-on:click="execApi(device.number,'/Curtain/On')" src="/IoTCenter/images/left.png" />
-                                <img style="height:32px;" v-on:click="execApi(device.number,'/Curtain/Stop')" src="/IoTCenter/images/stop.png" />
-                                <img style="height:32px;" v-on:click="execApi(device.number,'/Curtain/Off')" src="/IoTCenter/images/right.png" />
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
+        <div v-for="device in getDevices('窗帘电机')" class="col" style="min-width:320px;">
+            <iot-curtain v-bind:device="device"></iot-curtain>
         </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/switch1.png" style="width:48px;" />
-                        </div>
-                        <div class="col col-md-8 col-sm-8 align-self-center">
-                            <div class="row" style="line-height:28px;">
-                                <img v-if="getDataValue(device.number,'L1状态')=='开'" v-on:click="execApi(device.number,'/Switch3/L1Off')" src="/IoTCenter/images/on.png" />
-                                <img v-if="getDataValue(device.number,'L1状态')=='关'" v-on:click="execApi(device.number,'/Switch3/L1On')" src="/IoTCenter/images/off.png" />
-                                <img v-if="getDataValue(device.number,'L2状态')=='开'" v-on:click="execApi(device.number,'/Switch3/L2Off')" src="/IoTCenter/images/on.png" />
-                                <img v-if="getDataValue(device.number,'L2状态')=='关'" v-on:click="execApi(device.number,'/Switch3/L2On')" src="/IoTCenter/images/off.png" />
-                                <img v-if="getDataValue(device.number,'L3状态')=='开'" v-on:click="execApi(device.number,'/Switch3/L3Off')" src="/IoTCenter/images/on.png" />
-                                <img v-if="getDataValue(device.number,'L3状态')=='关'" v-on:click="execApi(device.number,'/Switch3/L3On')" src="/IoTCenter/images/off.png" />
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
+        <!--三路开关-->
+        <div v-for="device in getDevices('三路开关')" class="col" style="min-width:320px;">
+            <iot-switch3 v-bind:device="device"></iot-switch3>
         </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/socket.png" style="width:48px;" />
-                        </div>
-                        <div class="col col-md-8 col-sm-8 align-self-center">
-                            <div class="row" style="line-height:28px;">
-                                <img v-if="getDataValue(device.number,'状态')==='开'" v-on:click="execApi(device.number,'/Socket/Off')" src="/IoTCenter/images/on.png" :data-status="getDataValue(device.number,'状态')" />
-                                <img v-if="getDataValue(device.number,'状态')==='关'" v-on:click="execApi(device.number,'/Socket/On')" src="/IoTCenter/images/off.png" :data-status="getDataValue(device.number,'状态')" />
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
+        <div v-for="device in getDevices('智能插座')" class="col" style="min-width:320px;">
+            <iot-socket v-bind:device="device"></iot-socket>
         </div>
     </div>
     <!--test-->