空调ui

css/hardware.css

@@ -55,9 +55,9 @@
   background: #363F51;
   position: relative;
   width: 360px;
-  height: 330px;
   color: #24E8CF;
   padding-top: 20px;
+  padding-bottom: 10px;
   text-align: center;
   border-radius: 5px;
 }
@@ -161,6 +161,78 @@
   max-width: 100px;
 }
 
+
+.oper-con{
+  border-top: 1px solid #BFBFBF;
+  width: 100%;
+  margin-top: 10px;
+  padding-top: 10px;
+  display: none;
+}
+
+.oper-con>div{
+  justify-content: space-between;
+  display: flex;
+  margin: 0 12px;
+  flex-wrap: wrap;
+}
+
+.oper-con>div>span{
+  min-width: calc((100% - 40px) / 4);
+  margin-bottom: 10px;
+}
+
+
+.air-con{
+  border-top: 1px solid #BFBFBF;
+  width: 100%;
+  margin-top: 10px;
+  padding-top: 10px;
+  position: relative;
+  display: none;
+}
+
+
+.air-con > .fixed{
+  position: absolute;
+}
+
+.air-con > .up{
+  top: 20px;
+  left: 50%;
+  transform: translateX(-50%) rotate(-90deg);
+}
+
+
+.air-con > .down{
+  bottom: 10px;
+  left: 50%;
+  transform: translateX(-50%)  rotate(90deg);
+}
+
+.air-con > .left{
+  left: 50px;
+  top: 50%;
+  transform: translateY(-50%) rotate(180deg);
+}
+
+.air-con > .right{
+  right: 50px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.air-con > div{
+  padding: 60px;
+}
+
+.air-con > div > span{
+  display: block!important;
+  margin: 10px auto;
+  max-width: 120px;
+}
+
+
 .m-con{
   width: 600px;
 }

index.html

@@ -100,8 +100,27 @@
                         <span class="ac-btn"><i class="iconfont iconjia"></i></span>
                     </div>
                     <div>
-                        <span class="ac-btn">风向</span>
-                        <span class="ac-btn">模式</span>
+                        <span class="ac-btn" id="fengxiang">风向</span>
+                        <span class="ac-btn" id="moshi">模式</span>
+                    </div>
+                </div>
+                <div class="oper-con">
+                    <div>
+                        <span class="ac-btn">自动</span>
+                        <span class="ac-btn">除湿</span>
+                        <span class="ac-btn">冷风</span>
+                        <span class="ac-btn">送风</span>
+                        <span class="ac-btn">暖风</span>
+                    </div>
+                </div>
+                <div class="air-con">
+                    <span class="ac-btn fixed up"><i class="iconfont iconbofang"></i></span>
+                    <span class="ac-btn fixed down"><i class="iconfont iconbofang"></i></span>
+                    <span class="ac-btn fixed left"><i class="iconfont iconbofang"></i></span>
+                    <span class="ac-btn fixed right"><i class="iconfont iconbofang"></i></span>
+                    <div>
+                        <span class="ac-btn">运行</span>
+                        <span class="ac-btn">停止</span>
                     </div>
                 </div>
             </div>

js/showHardware.js

@@ -71,6 +71,21 @@ $(function () {
     }
   )
 
+  
+  $("#fengxiang").click(function () {
+      $(".air-con").hide();
+      $(".oper-con").fadeToggle();
+    }
+  )
+
+  $("#moshi").click(function () {
+    $(".oper-con").hide();
+    $(".air-con").fadeToggle();
+  }
+)
+
+  
+
   let getList = function (params) {
     return new Promise((resolve, reject) => {
       $.ajax({
@@ -336,4 +351,9 @@ $(function () {
     val:50,
     type:'冷风'
   }) */
+  loadAirConditioner({
+    id:"air-conditioner",
+    val:50,
+    type:'冷风'
+  }) 
 });