|
@@ -1,52 +1,52 @@
|
|
<template>
|
|
<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>
|
|
</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
|
|
<div
|
|
class="floor-control floor-control-padding"
|
|
class="floor-control floor-control-padding"
|
|
@@ -492,7 +492,7 @@ export default defineComponent({
|
|
});
|
|
});
|
|
</script>
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|
|
-.light {
|
|
|
|
|
|
+.floor {
|
|
width: 100%;
|
|
width: 100%;
|
|
background: #ffffff;
|
|
background: #ffffff;
|
|
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.07), 0px 4px 10px rgba(0, 0, 0, 0.05);
|
|
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;
|
|
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 {
|
|
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;
|
|
width: 106px;
|
|
height: 62px;
|
|
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;
|
|
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 {
|
|
.floor-control {
|