Procházet zdrojové kódy

fix:地暖模块的样式调整

chenzhen2 před 1 rokem
rodič
revize
d8cc7f00f8

+ 10 - 10
src/views/envmonitor/components/Air/manualIndex.vue

@@ -1,14 +1,14 @@
 <template>
   <div class="air">
-    <div class="air-top">
-      <div class="air-desc">
-        <p class="air-title">空调</p>
-        <p class="air-temperature">
+    <div class="com-top">
+      <div class="com-desc">
+        <p class="com-top-title">空调</p>
+        <p class="com-top-temperature">
           {{ airTemp ? airTemp : "--" }}
           <sup>℃</sup>
         </p>
       </div>
-      <div class="air-right">
+      <div class="com-right">
         <img
           v-if="airData.isOpen"
           :src="parseImgUrl('page-officehome', 'openair.svg')"
@@ -1040,13 +1040,13 @@ export default defineComponent({
     z-index: 999;
     // line-height: 50px;
   }
-  .air-top {
+  .com-top {
     padding: 0 20px;
     padding-bottom: 10px;
     padding-top: 18px;
     display: flex;
     justify-content: space-between;
-    .air-desc {
+    .com-desc {
       position: relative;
       font-family: "PingFang SC";
       font-size: 16px;
@@ -1056,7 +1056,7 @@ export default defineComponent({
       padding-top: 8px;
       text-align: left;
       color: rgba(77, 82, 98, 1);
-      .air-title {
+      .com-top-title {
         font-family: "PingFang SC";
         font-size: 16px;
         font-weight: 600;
@@ -1066,7 +1066,7 @@ export default defineComponent({
         text-align: left;
         color: rgba(77, 82, 98, 1);
       }
-      .air-temperature {
+      .com-top-temperature {
         position: relative;
         display: inline-block;
         font-family: "Persagy";
@@ -1108,7 +1108,7 @@ export default defineComponent({
         }
       }
     }
-    .air-right {
+    .com-right {
       position: relative;
       width: 130px;
       text-align: center;

+ 143 - 117
src/views/envmonitor/components/FloorHeating/index.vue

@@ -1,52 +1,52 @@
 <template>
-  <div class="light" v-if="floorHeatingList && floorHeatingList.length">
+  <div class="floor" v-if="floorHeatingList && floorHeatingList.length">
     <!--如果有子设备-->
-    <div class="floor-top">
-      <div class="top-box">
-        <div class="top-left">
-          <span>地暖</span>
-          <span>{{ realTemp ? realTemp : "--" }} <sup>℃</sup></span>
-        </div>
-        <div class="top-right">
-          <img
-            :src="
-              isOpen
-                ? parseImgUrl('page-officehome', 'heating-active.svg')
-                : parseImgUrl('page-officehome', 'heating.svg')
-            "
-            alt=""
-          />
-        </div>
-      </div>
-      <div class="top-switch">
-        <div
-          class="top-nav"
-          v-if="floorHeatingList && floorHeatingList.length > 1"
+    <div class="com-top">
+      <div class="com-desc">
+        <p class="com-top-title">地暖</p>
+        <span class="com-top-temperature"
+          >{{ realTemp ? realTemp : "--" }} <sup>℃</sup></span
         >
-          <span
-            :class="navType == 'all' ? 'nav-active' : ''"
-            @click="checkNav('all')"
-          >
-            总控制
-          </span>
-          <span
-            :class="navType == 'child' ? 'nav-active' : ''"
-            @click="checkNav('child')"
-          >
-            子设备
-          </span>
-        </div>
-        <div v-else></div>
-        <Switch
-          class="switch-btn"
-          :loading="loadingFlag"
-          :disabled="loadingFlag"
-          :model-value="isOpen"
-          @click.stop="eqChangeSwitch('main', floorHeatingList[0])"
-          inactive-color="rgba(196, 196, 196, 0.4)"
+      </div>
+      <div class="com-right">
+        <img
+          :src="
+            isOpen
+              ? parseImgUrl('page-officehome', 'heating-active.svg')
+              : parseImgUrl('page-officehome', 'heating.svg')
+          "
+          alt=""
         />
       </div>
     </div>
+    <div class="top-switch">
+      <div
+        class="top-nav"
+        v-if="floorHeatingList && floorHeatingList.length > 1"
+      >
+        <span
+          :class="navType == 'all' ? 'nav-active' : ''"
+          @click="checkNav('all')"
+        >
+          总控制
+        </span>
+        <span
+          :class="navType == 'child' ? 'nav-active' : ''"
+          @click="checkNav('child')"
+        >
+          子设备
+        </span>
+      </div>
+      <div v-else></div>
+      <Switch
+        class="switch-btn"
+        :loading="loadingFlag"
+        :disabled="loadingFlag"
+        :model-value="isOpen"
+        @click.stop="eqChangeSwitch('main', floorHeatingList[0])"
+        inactive-color="rgba(196, 196, 196, 0.4)"
+      />
+    </div>
 
     <div
       class="floor-control floor-control-padding"
@@ -492,7 +492,7 @@ export default defineComponent({
 });
 </script>
   <style lang="scss" scoped>
-.light {
+.floor {
   width: 100%;
   background: #ffffff;
   box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.07), 0px 4px 10px rgba(0, 0, 0, 0.05);
@@ -506,90 +506,116 @@ export default defineComponent({
   padding-top: 10px;
 }
 
-.floor-top {
-  padding: 20px;
-  padding-bottom: 16px;
-  .top-box {
-    display: flex;
-    justify-content: space-between;
-    padding-bottom: 25px;
-    .top-left {
+.com-top {
+  padding: 0 20px;
+  padding-bottom: 10px;
+  padding-top: 18px;
+  display: flex;
+  justify-content: space-between;
+  .com-desc {
+    position: relative;
+    font-family: "PingFang SC";
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 22px;
+    letter-spacing: 0em;
+    padding-top: 8px;
+    text-align: left;
+    color: rgba(77, 82, 98, 1);
+    .com-top-title {
+      font-family: "PingFang SC";
+      font-size: 16px;
+      font-weight: 600;
+      line-height: 22px;
+      padding-bottom: 4px;
+      letter-spacing: 0;
+      text-align: left;
+      color: rgba(77, 82, 98, 1);
+    }
+    .com-top-temperature {
+      position: relative;
+      display: inline-block;
+      font-family: "Persagy";
+      font-size: 32px;
+      font-weight: 400;
+      line-height: 39px;
+      letter-spacing: 0px;
+      text-align: right;
+      color: rgba(27, 33, 41, 1);
+
+      sup {
+        position: absolute;
+        font-family: "Persagy";
+        top: -2px;
+        right: -12px;
+        font-size: 12px;
+        font-weight: 400;
+        line-height: 15px;
+        letter-spacing: 0em;
+        text-align: left;
+        color: rgba(196, 196, 196, 1);
+      }
+    }
+    .show-all {
+      position: absolute;
+      width: 110px;
+      bottom: -8px;
+      font-family: PingFang SC;
+      font-size: 14px;
+      line-height: 16px;
+      color: #c4c4c4;
+      margin: 0px 5px;
       span {
-        display: block;
-        &:nth-child(1) {
-          font-family: "PingFang SC";
-          padding-top: 4px;
-          font-style: normal;
-          font-weight: 600;
-          font-size: 16px;
-          line-height: 22px;
-          color: #4d5262;
-        }
-        &:nth-child(2) {
-          position: relative;
-          padding-top: 8px;
-          font-family: "Persagy";
-          font-style: normal;
-          font-weight: 400;
-          font-size: 32px;
-          line-height: 39px;
-          color: #1b2129;
-          sup {
-            position: absolute;
-            right: -12px;
-            top: 4px;
-            font-family: "Mulish";
-            font-style: normal;
-            font-weight: 400;
-            font-size: 12px;
-            line-height: 15px;
-            color: #c4c4c4;
-          }
-        }
+        font-size: 12px;
+      }
+      .light-icon {
+        font-size: 12px;
+        padding-right: 10px;
       }
     }
-    .top-right {
+  }
+  .com-right {
+    position: relative;
+    width: 106px;
+    text-align: center;
+
+    img {
       width: 106px;
       height: 62px;
-      margin-right: 17px;
-      img {
-        width: 106px;
-        height: 62px;
-      }
     }
   }
-
-  .top-switch {
-    display: flex;
-    justify-content: space-between;
-    // padding-bottom: 15px;
-    .top-nav {
+}
+.top-switch {
+  display: flex;
+  justify-content: space-between;
+  padding: 8px 20px;
+  margin-bottom: 8px;
+  .top-nav {
+    height: 28px;
+    line-height: 28px;
+    border-radius: 21px;
+    background: #f1f4f6;
+    span {
+      box-sizing: border-box;
+      display: inline-block;
+      font-family: "PingFang SC";
+      font-style: normal;
+      font-weight: 400;
+      font-size: 14px;
+      padding: 5px 8px;
       height: 28px;
-      line-height: 28px;
-      border-radius: 21px;
-      background: #f1f4f6;
-      span {
-        box-sizing: border-box;
-        display: inline-block;
-        font-family: "PingFang SC";
-        font-style: normal;
-        font-weight: 400;
-        font-size: 14px;
-        padding: 5px 8px;
-        height: 28px;
-        line-height: 14px;
-        color: #424c59;
-      }
-      .nav-active {
-        background: #fff;
-        border: 1px solid #e1e5eb;
-        border-radius: 21px;
-      }
+      line-height: 14px;
+      color: #424c59;
     }
-    .switch-btn {
-      margin-top: 0;
+    .nav-active {
+      background: #fff;
+      border: 1px solid #e1e5eb;
+      border-radius: 21px;
     }
   }
+  // .switch-btn {
+  //   margin-top: 0;
+  // }
 }
 
 .floor-control {