Procházet zdrojové kódy

fix:灯样式调整

chenzhen2 před 1 rokem
rodič
revize
afbb9cf2c2

+ 143 - 141
src/views/envmonitor/components/Air/manualIndex.vue

@@ -48,15 +48,15 @@
         :model-value="airData.isOpen"
       />
     </div>
-    <div class="line"></div>
+    <div class="line" v-if="airData.isOpen"></div>
     <!--温度调节的box-->
     <div class="main-temp" v-if="navType == 'all' && airData.isOpen">
-      <div class="air-control air-control-padding">
+      <div class="com-control com-control-padding">
         <div class="temp-slider" id="sliderId">
           <div class="slider-bar" id="barId">
             <div class="bar-temp">{{ realTemp }}℃</div>
             <div
-              class="bar-circle"              
+              class="bar-circle"
               style="border: 2px solid rgba(255, 255, 255, 1)"
               id="handId"
             ></div>
@@ -69,7 +69,7 @@
           </div>
         </div>
       </div>
-      <div class="air-control">
+      <div class="com-control">
         <div class="control-box">
           <div class="volume-box">
             <div class="number">
@@ -109,7 +109,7 @@
           </div>
         </div>
       </div>
-      <div class="air-control">
+      <div class="com-control">
         <div class="control-box">
           <div class="volume-box">
             <div class="model">
@@ -1080,8 +1080,9 @@ export default defineComponent({
         sup {
           position: absolute;
           font-family: "Persagy";
-          top: -2px;
-          right: -12px;
+          top: 3px;
+          // right: -12px;
+          padding-left: 4px;
           font-size: 12px;
           font-weight: 400;
           line-height: 15px;
@@ -1123,7 +1124,8 @@ export default defineComponent({
     display: flex;
     justify-content: space-between;
     padding: 8px 20px;
-    margin-bottom: 8px;
+    // margin-bottom: 16px;
+    padding-bottom: 16px;
     .top-nav {
       height: 28px;
       line-height: 28px;
@@ -1257,164 +1259,164 @@ export default defineComponent({
 
   .main-temp {
     padding-bottom: 16px;
-  }
-  .air-control {
-    padding: 20px;
-    padding-top: 28px;
-    padding-bottom: 0;
-    .control-box {
-      display: flex;
-      justify-content: space-between;
-    }
-    .volume-box {
-      .number {
-        span {
-          font-family: "Persagy";
-          font-size: 12px;
+    .com-control {
+      padding: 20px;
+      padding-top: 28px;
+      padding-bottom: 0;
+      .control-box {
+        display: flex;
+        justify-content: space-between;
+      }
+      .volume-box {
+        .number {
+          span {
+            font-family: "Persagy";
+            font-size: 12px;
+            font-weight: 400;
+            padding-right: 8px;
+            line-height: 24px;
+            letter-spacing: 0px;
+            color: rgba(196, 201, 207, 1);
+          }
+          .number-active {
+            font-family: "Persagy";
+            font-size: 18px;
+            font-weight: 400;
+            line-height: 24px;
+            letter-spacing: 0px;
+            color: rgba(27, 33, 41, 1);
+          }
+        }
+        .model {
+          font-family: "PingFang SC";
+          font-size: 16px;
           font-weight: 400;
-          padding-right: 8px;
           line-height: 24px;
           letter-spacing: 0px;
-          color: rgba(196, 201, 207, 1);
         }
-        .number-active {
-          font-family: "Persagy";
-          font-size: 18px;
+        .text {
+          font-family: "PingFang SC";
+          display: block;
+          font-size: 13px;
           font-weight: 400;
-          line-height: 24px;
+          padding-top: 3px;
+          margin-left: -3px;
+          transform: scale(0.9);
+          text-align: left;
+          // line-height: 17px;
           letter-spacing: 0px;
-          color: rgba(27, 33, 41, 1);
+          color: rgba(196, 201, 207, 1);
         }
       }
-      .model {
-        font-family: "PingFang SC";
-        font-size: 16px;
-        font-weight: 400;
-        line-height: 24px;
-        letter-spacing: 0px;
-      }
-      .text {
-        font-family: "PingFang SC";
-        display: block;
-        font-size: 13px;
-        font-weight: 400;
-        padding-top: 3px;
-        margin-left: -3px;
-        transform: scale(0.9);
-        text-align: left;
-        // line-height: 17px;
-        letter-spacing: 0px;
-        color: rgba(196, 201, 207, 1);
-      }
-    }
-    .volume-icon {
-      .icon-item {
-        position: relative;
-        display: inline-block;
-        width: 42px;
-        height: 42px;
-        background: rgba(196, 196, 196, 0.2);
-        border-radius: 50%;
-        img {
-          width: 20px;
-          height: 20px;
-          position: absolute;
-          left: 50%;
-          top: 50%;
-          transform: translate(-50%, -50%);
-        }
-        &:nth-child(2) {
-          margin-left: 10px;
-          margin-right: 10px;
-        }
-        span {
-          font-size: 12px;
-          color: #000000;
-          position: absolute;
-          left: 50%;
-          top: 50%;
-          transform: translate(-50%, -50%) scale(0.8);
+      .volume-icon {
+        .icon-item {
+          position: relative;
+          display: inline-block;
+          width: 42px;
+          height: 42px;
+          background: rgba(196, 196, 196, 0.2);
+          border-radius: 50%;
+          img {
+            width: 20px;
+            height: 20px;
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
+          }
+          &:nth-child(2) {
+            margin-left: 10px;
+            margin-right: 10px;
+          }
+          span {
+            font-size: 12px;
+            color: #000000;
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%) scale(0.8);
+          }
         }
       }
-    }
 
-    .temp-slider {
-      position: relative;
-      display: flex;
-      height: 22px;
-      border-radius: 16px;
-      background: linear-gradient(
-        270deg,
-        #ffbab6 0%,
-        #ffe7d1 29.05%,
-        #f1efff 62%,
-        #c8d6ff 100%
-      );
+      .temp-slider {
+        position: relative;
+        display: flex;
+        height: 22px;
+        border-radius: 16px;
+        background: linear-gradient(
+          270deg,
+          #ffbab6 0%,
+          #ffe7d1 29.05%,
+          #f1efff 62%,
+          #c8d6ff 100%
+        );
 
-      .slider-bar {
-        position: absolute;
-        left: 0;
-        bottom: -5px;
-        width: 32px;
-        z-index: 333;
-        text-align: center;
-        color: rgba(98, 108, 120, 1);
+        .slider-bar {
+          position: absolute;
+          left: 0;
+          bottom: -5px;
+          width: 32px;
+          z-index: 333;
+          text-align: center;
+          color: rgba(98, 108, 120, 1);
 
-        .bar-temp {
+          .bar-temp {
+            display: inline-block;
+            font-family: "Persagy";
+            font-size: 12px;
+            font-weight: 400;
+            line-height: 14px;
+            letter-spacing: 0px;
+            padding-bottom: 4px;
+            text-align: left;
+            color: rgba(98, 108, 120, 1);
+          }
+          .bar-circle {
+            width: 30px;
+            height: 30px;
+            background: rgba(246, 249, 254, 1);
+            border-radius: 50%;
+            box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
+          }
+        }
+        .temp-left,
+        .temp-right {
+          position: absolute;
           display: inline-block;
           font-family: "Persagy";
+          top: 50%;
+          transform: translateY(-50%);
           font-size: 12px;
+          padding-top: 1px;
           font-weight: 400;
-          line-height: 14px;
           letter-spacing: 0px;
-          padding-bottom: 4px;
-          text-align: left;
           color: rgba(98, 108, 120, 1);
         }
-        .bar-circle {
-          width: 30px;
-          height: 30px;
-          background: rgba(246, 249, 254, 1);
-          border-radius: 50%;
-          box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
+        .temp-left {
+          left: 0px;
+          padding-left: 8px;
+        }
+        .temp-right {
+          right: 0px;
+          padding-right: 8px;
+          text-align: left;
         }
       }
-      .temp-left,
-      .temp-right {
-        position: absolute;
-        display: inline-block;
-        font-family: "Persagy";
-        top: 50%;
-        transform: translateY(-50%);
-        font-size: 12px;
-        padding-top: 1px;
-        font-weight: 400;
-        letter-spacing: 0px;
-        color: rgba(98, 108, 120, 1);
-      }
-      .temp-left {
-        left: 0px;
-        padding-left: 8px;
-      }
-      .temp-right {
-        right: 0px;
-        padding-right: 8px;
-        text-align: left;
+      .control-text {
+        font-style: normal;
+        font-weight: 600;
+        font-size: 11px;
+        line-height: 15px;
+        color: #c4c4c4;
+        padding: 10px 0 0 10px;
       }
     }
-    .control-text {
-      font-style: normal;
-      font-weight: 600;
-      font-size: 11px;
-      line-height: 15px;
-      color: #c4c4c4;
-      padding: 10px 0 0 10px;
-    }
-  }
 
-  .air-control-padding {
-    padding-top: 23px;
-    margin-top: 8px;
+    .com-control-padding {
+      padding-top: 23px;
+      margin-top: 8px;
+    }
   }
 }
 </style>

+ 12 - 32
src/views/envmonitor/components/FloorHeating/index.vue

@@ -49,7 +49,7 @@
     </div>
 
     <div
-      class="floor-control floor-control-padding"
+      class="com-control com-control-padding"
       v-if="isOpen && navType == 'all'"
     >
       <div class="control-box">
@@ -410,14 +410,12 @@ export default defineComponent({
             const resData: any = res;
             const data: any = resData ? resData.data : {};
             proxyData.heatingData = data;
-            if (data.equipList && data.equipList.length) {
-              proxyData.floorHeatingList = data.equipList || [];
-            }
+            // if (data.equipList && data.equipList.length) {
+            //   proxyData.floorHeatingList = data.equipList || [];
+            // }
+            proxyData.floorHeatingList = [data.equipList[0]];
             proxyData.formateDataStatus();
-            let timeout: any = setTimeout(() => {
-              clearTimeout(timeout);
-              proxyData.sliderInit();
-            }, 1000);
+            proxyData.sliderInit();
             proxyData.startfloorHeathingStatus();
           })
           .catch(() => {
@@ -546,8 +544,9 @@ export default defineComponent({
       sup {
         position: absolute;
         font-family: "Persagy";
-        top: -2px;
-        right: -12px;
+        top: 3px;
+        // right: -12px;
+        padding-left: 4px;
         font-size: 12px;
         font-weight: 400;
         line-height: 15px;
@@ -589,7 +588,7 @@ export default defineComponent({
   display: flex;
   justify-content: space-between;
   padding: 8px 20px;
-  margin-bottom: 8px;
+  padding-bottom: 16px;
   .top-nav {
     height: 28px;
     line-height: 28px;
@@ -618,7 +617,7 @@ export default defineComponent({
   // }
 }
 
-.floor-control {
+.com-control {
   padding: 10px;
   border-top: 1px solid #e8ecf0;
   .control-box {
@@ -764,7 +763,7 @@ export default defineComponent({
   }
 }
 
-.floor-control-padding {
+.com-control-padding {
   padding: 30px 20px;
   padding-top: 0px;
   height: 82px;
@@ -984,23 +983,4 @@ export default defineComponent({
   }
 }
 </style>
-  <style class="style" lang="scss">
-.light {
-  .van-loading__spinner {
-    color: $elActiveColor !important;
-  }
-
-  .van-switch__loading {
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    line-height: 1;
-  }
-
-  .van-switch--disabled {
-    opacity: 0.5;
-  }
-}
-</style>
   

+ 22 - 24
src/views/envmonitor/components/Light/index.vue

@@ -620,15 +620,15 @@ export default defineComponent({
 
 .light-top {
   padding-left: 20px;
-  // padding-bottom: 10px;
-  padding-top: 10px;
+  // padding-bottom: 14px;
+  // padding-top: 10px;
   display: flex;
   justify-content: space-between;
 }
 .light-main-control {
-  padding-bottom: 15px;
+  padding-bottom: 16px;
   padding-left: 20px;
-  padding-right: 15px;
+  padding-right: 20px;
   // line-height: 36px;
   display: flex;
   justify-content: space-between;
@@ -651,24 +651,25 @@ export default defineComponent({
   }
   .switch-btn {
     margin-top: 6px;
-    margin-right: 12px;
+    // margin-right: 12px;
   }
 }
 
 .light-desc {
-  padding-top: 10px;
-  // padding-left: 5px;
-  font-family: PingFang SC;
+  padding-top: 24px;
+  font-family: "PingFang SC";
   font-size: 16px;
-  line-height: 19px;
-  color: #4d5262;
+  font-weight: 600;
+  line-height: 22px;
+  letter-spacing: 0;
+  text-align: left;
 }
 
 .light-right {
   position: relative;
   text-align: center;
   .switch-box {
-    padding-top: 20px;
+    padding-top: 33px;
     padding-right: 15px;
     span {
       display: inline-block;
@@ -708,27 +709,22 @@ export default defineComponent({
 }
 
 .light-title {
-  font-family: PingFang SC;
-  padding-left: 5px;
+  font-family: "PingFang SC";
   font-size: 16px;
   line-height: 19px;
   color: #4d5262;
   flex: none;
   order: 0;
   flex-grow: 0;
-  margin: 5px 0px;
 }
 
 .light-status {
-  font-family: PingFang SC;
-  padding-left: 5px;
-  font-size: 12px;
-  line-height: 16px;
-  color: #c4c4c4;
-  flex: none;
-  order: 1;
-  flex-grow: 0;
-  margin: 15px 0px;
+  font-family: "PingFang SC";
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+  padding-top: 8px;
+  color: rgba(196, 196, 196, 1);
 }
 
 .show-all {
@@ -738,7 +734,7 @@ export default defineComponent({
   font-size: 12px;
   line-height: 17px;
   padding-bottom: 15px;
-  padding-top: 5px;
+  // padding-top: 5px;
   color: #cccccc;
   text-align: center;
   .light-icon {
@@ -750,6 +746,8 @@ export default defineComponent({
 .light-box {
   padding: 0 12px;
   font-size: 0;
+  padding-top: 14px;
+  padding-bottom: 8px;
 }
 .light-control {
   display: inline-block;