样式修改

css/hardware.css

@@ -60,9 +60,16 @@
   text-align: center;
   border-radius: 5px;
 }
+
+.ac-con .ac-body{
+  width: 100%;
+  height: 100%;
+  padding: 0;
+}
+
 #air-conditioner{
-  width: 50%;
-  height: 50%;
+  width: 160px;
+  height: 146px;
   margin: 0 auto;
 }
 
@@ -157,6 +164,16 @@
   width: 600px;
 }
 
+.m-con .iconquxiao{
+  position: absolute;
+  top: 24px;
+  right: 15px;
+  color: #F5F5F5;
+  font-size: 10px;
+  cursor: pointer;
+  z-index: 999;
+}
+
 #monitor{
   width: 100%;
   background: #262729;

index.html

@@ -70,33 +70,36 @@
         <div id="temperature" class='hide'>
         </div>
         <div class="ac-con">
-            <div class="ac-title">二楼-大会议室-04-空调</div>
-            <i class="iconfont iconquxiao"></i>
-            <span class="ac-btn ac-close">关</span>
-            <div id="air-conditioner"></div>
-            <ul class="ac-left">
-                <li><i class="iconfont iconfengsu1"></i></li>
-                <li><i class="iconfont iconfengsu31"></i></li>
-                <li><i class="iconfont iconfengsu2"></i></li>
-                <li><i class="iconfont iconfengsu11"></i></li>
-                <li><i class="iconfont iconfengsu"></i></li>
-            </ul>
-            <div class="btm-con">
-                <div>
-                    <span><i class="iconfont iconfengsu3"></i>风速</span>
-                    <span><i class="iconfont iconfengxiang"></i>风向上</span>
-                </div>
-                <div class="minbtn">
-                    <span class="ac-btn"><i class="iconfont iconjianqu"></i></span>
-                    <span class="ac-btn"><i class="iconfont iconjia"></i></span>
-                </div>
-                <div>
-                    <span class="ac-btn">风向</span>
-                    <span class="ac-btn">模式</span>
+            <div class="ac-body">
+                <div class="ac-title">二楼-大会议室-04-空调</div>
+                <i class="iconfont iconquxiao"></i>
+                <span class="ac-btn ac-close">关</span>
+                <div id="air-conditioner"></div>
+                <ul class="ac-left">
+                    <li><i class="iconfont iconfengsu1"></i></li>
+                    <li><i class="iconfont iconfengsu31"></i></li>
+                    <li><i class="iconfont iconfengsu2"></i></li>
+                    <li><i class="iconfont iconfengsu11"></i></li>
+                    <li><i class="iconfont iconfengsu"></i></li>
+                </ul>
+                <div class="btm-con">
+                    <div>
+                        <span><i class="iconfont iconfengsu3"></i>风速</span>
+                        <span><i class="iconfont iconfengxiang"></i>风向上</span>
+                    </div>
+                    <div class="minbtn">
+                        <span class="ac-btn"><i class="iconfont iconjianqu"></i></span>
+                        <span class="ac-btn"><i class="iconfont iconjia"></i></span>
+                    </div>
+                    <div>
+                        <span class="ac-btn">风向</span>
+                        <span class="ac-btn">模式</span>
+                    </div>
                 </div>
             </div>
         </div>
         <div class="m-con">
+            <i class="iconfont iconquxiao"></i>
             <video id="monitor" controls></video>
         </div>
     </div>