|
@@ -7,58 +7,64 @@
|
|
{{ airTemp ? airTemp : "--" }}
|
|
{{ airTemp ? airTemp : "--" }}
|
|
<sup>℃</sup>
|
|
<sup>℃</sup>
|
|
</p>
|
|
</p>
|
|
- <div
|
|
|
|
- class="show-all"
|
|
|
|
- @click.stop="showAll"
|
|
|
|
- v-if="equipList && equipList.length > 1"
|
|
|
|
- >
|
|
|
|
- <van-icon :name="lightIcon" class="light-icon" />
|
|
|
|
- <span v-if="!showChild">查看全部</span>
|
|
|
|
- <span v-else>收起全部</span>
|
|
|
|
- </div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="air-right">
|
|
<div class="air-right">
|
|
<img
|
|
<img
|
|
v-if="airData.isOpen"
|
|
v-if="airData.isOpen"
|
|
- :src="parseImgUrl('page-officehome', 'openair.png')"
|
|
|
|
|
|
+ :src="parseImgUrl('page-officehome', 'openair.svg')"
|
|
alt=""
|
|
alt=""
|
|
/>
|
|
/>
|
|
<img
|
|
<img
|
|
v-else
|
|
v-else
|
|
- :src="parseImgUrl('page-officehome', 'air_close.png')"
|
|
|
|
|
|
+ :src="parseImgUrl('page-officehome', 'air_close.svg')"
|
|
alt=""
|
|
alt=""
|
|
/>
|
|
/>
|
|
<!-- <van-loading style="padding-top: 20px" v-else /> -->
|
|
<!-- <van-loading style="padding-top: 20px" v-else /> -->
|
|
- <Switch
|
|
|
|
- class="switch-btn"
|
|
|
|
- v-if="!showChild"
|
|
|
|
- :size="23"
|
|
|
|
- inactive-color="rgba(196, 196, 196, 0.4)"
|
|
|
|
- @click="airChange"
|
|
|
|
- :model-value="airData.isOpen"
|
|
|
|
- />
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--温度调节-->
|
|
<!--温度调节-->
|
|
- <!-- :style="{ opacity: loadingAir || !airData.runStatus ? '0.4' : '1' }" -->
|
|
|
|
- <div v-if="!showChild && airData.isOpen">
|
|
|
|
|
|
+ <div class="top-switch">
|
|
|
|
+ <div class="top-nav" v-if="equipList && equipList.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"
|
|
|
|
+ v-if="navType == 'all'"
|
|
|
|
+ :size="23"
|
|
|
|
+ inactive-color="rgba(196, 196, 196, 0.4)"
|
|
|
|
+ @click="airChange"
|
|
|
|
+ :model-value="airData.isOpen"
|
|
|
|
+ />
|
|
|
|
+ </div>
|
|
|
|
+ <div class="line"></div>
|
|
|
|
+ <div class="child-box" v-if="navType == 'all' && airData.isOpen">
|
|
<div class="air-control air-control-padding">
|
|
<div class="air-control air-control-padding">
|
|
<div class="control-box">
|
|
<div class="control-box">
|
|
- <div class="temp-text">{{ airData.minTempSet }}℃</div>
|
|
|
|
<div class="temp-slider" id="sliderId">
|
|
<div class="temp-slider" id="sliderId">
|
|
- <div
|
|
|
|
- class="item"
|
|
|
|
- v-for="(item, index) in 5"
|
|
|
|
- :key="'bar' + index"
|
|
|
|
- ></div>
|
|
|
|
<div class="slider-bar" id="barId">
|
|
<div class="slider-bar" id="barId">
|
|
<div class="bar-temp">{{ realTemp }}℃</div>
|
|
<div class="bar-temp">{{ realTemp }}℃</div>
|
|
<div class="bar-circle" id="handId"></div>
|
|
<div class="bar-circle" id="handId"></div>
|
|
</div>
|
|
</div>
|
|
|
|
+ <div class="temp-left" id="tempLeftId">
|
|
|
|
+ {{ airData.minTempSet }}
|
|
|
|
+ </div>
|
|
|
|
+ <div class="temp-right">
|
|
|
|
+ {{ airData.maxTempSet }}
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
- <div class="temp-text">{{ airData.maxTempSet }}℃</div>
|
|
|
|
</div>
|
|
</div>
|
|
- <div class="control-text">温度设定</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="air-control">
|
|
<div class="air-control">
|
|
<div class="control-box">
|
|
<div class="control-box">
|
|
@@ -81,21 +87,21 @@
|
|
}"
|
|
}"
|
|
@click="changeZongAir('gear', 'windLow')"
|
|
@click="changeZongAir('gear', 'windLow')"
|
|
>
|
|
>
|
|
- <img :src="parseImgUrl('ipdImages', 'wind_small.png')" />
|
|
|
|
|
|
+ <img :src="parseImgUrl('ipdImages', 'wind_small.svg')" />
|
|
</div>
|
|
</div>
|
|
<div
|
|
<div
|
|
class="icon-item"
|
|
class="icon-item"
|
|
:style="{ opacity: airData.gear >= 3 ? '0.6' : 1 }"
|
|
:style="{ opacity: airData.gear >= 3 ? '0.6' : 1 }"
|
|
@click="changeZongAir('gear', 'windUp')"
|
|
@click="changeZongAir('gear', 'windUp')"
|
|
>
|
|
>
|
|
- <img :src="parseImgUrl('ipdImages', 'wind_big.png')" />
|
|
|
|
|
|
+ <img :src="parseImgUrl('ipdImages', 'wind_big.svg')" />
|
|
</div>
|
|
</div>
|
|
<div
|
|
<div
|
|
class="icon-item"
|
|
class="icon-item"
|
|
@click="changeZongAir('gear', 'auto')"
|
|
@click="changeZongAir('gear', 'auto')"
|
|
:class="airData.isAutoGear ? 'active-color' : ''"
|
|
:class="airData.isAutoGear ? 'active-color' : ''"
|
|
>
|
|
>
|
|
- <span> AUTO</span>
|
|
|
|
|
|
+ <img :src="parseImgUrl('ipdImages', 'A.svg')" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@@ -160,7 +166,7 @@
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!--子设备-->
|
|
<!--子设备-->
|
|
- <div class="air-child" v-if="showChild">
|
|
|
|
|
|
+ <div class="air-child" v-if="navType == 'child'">
|
|
<div
|
|
<div
|
|
class="child-control-box"
|
|
class="child-control-box"
|
|
:key="'child' + index"
|
|
:key="'child' + index"
|
|
@@ -400,6 +406,7 @@ export default defineComponent({
|
|
let spaceId: any = "";
|
|
let spaceId: any = "";
|
|
const proxyData: any = reactive({
|
|
const proxyData: any = reactive({
|
|
seviceEquipmentList: props.seviceEquipmentList,
|
|
seviceEquipmentList: props.seviceEquipmentList,
|
|
|
|
+ navType: "all",
|
|
valueDom: valueDom,
|
|
valueDom: valueDom,
|
|
spaceId: props.spaceId,
|
|
spaceId: props.spaceId,
|
|
valueHeight: valueHeight,
|
|
valueHeight: valueHeight,
|
|
@@ -433,6 +440,18 @@ export default defineComponent({
|
|
toWhere: "",
|
|
toWhere: "",
|
|
designTemperature: 0,
|
|
designTemperature: 0,
|
|
},
|
|
},
|
|
|
|
+ checkNav(type: any = "all") {
|
|
|
|
+ proxyData.navType = type;
|
|
|
|
+ proxyData.swiperIinit = false;
|
|
|
|
+ if (proxyData.navType == "child") {
|
|
|
|
+ proxyData.updateChildSatus();
|
|
|
|
+ } else {
|
|
|
|
+ proxyData.updateParentSatus();
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ // isAddTimer==0(需要定时再调) isAddTimer==1(不需要定时调)
|
|
|
|
+ proxyData.getAirInfo(1);
|
|
|
|
+ },
|
|
// 点击展示所有的登录
|
|
// 点击展示所有的登录
|
|
async showAll() {
|
|
async showAll() {
|
|
proxyData.showChild = !proxyData.showChild;
|
|
proxyData.showChild = !proxyData.showChild;
|
|
@@ -1017,6 +1036,7 @@ export default defineComponent({
|
|
proxyData.airData.gear = data.gear || 0;
|
|
proxyData.airData.gear = data.gear || 0;
|
|
proxyData.airData.workMode = data.workMode;
|
|
proxyData.airData.workMode = data.workMode;
|
|
proxyData.equipList = data.equipList;
|
|
proxyData.equipList = data.equipList;
|
|
|
|
+ proxyData.equipList.push(data.equipList[0]);
|
|
// 设置子设备的状态
|
|
// 设置子设备的状态
|
|
proxyData.setChildSelectList();
|
|
proxyData.setChildSelectList();
|
|
proxyData.formateSetChildStatus();
|
|
proxyData.formateSetChildStatus();
|
|
@@ -1089,339 +1109,394 @@ export default defineComponent({
|
|
z-index: 999;
|
|
z-index: 999;
|
|
// line-height: 50px;
|
|
// line-height: 50px;
|
|
}
|
|
}
|
|
- .active-color {
|
|
|
|
- background: $elActiveColor !important;
|
|
|
|
- span {
|
|
|
|
- color: #fff !important;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
-}
|
|
|
|
-
|
|
|
|
-.air-child {
|
|
|
|
- width: 100%;
|
|
|
|
- // padding: 20px;
|
|
|
|
- padding-left: 10px;
|
|
|
|
- padding-right: 10px;
|
|
|
|
- // padding-top: 10px;
|
|
|
|
- .child-control-box {
|
|
|
|
- display: inline-block;
|
|
|
|
- width: 50%;
|
|
|
|
|
|
+ .air-top {
|
|
|
|
+ padding-left: 20px;
|
|
|
|
+ padding-right: 20px;
|
|
|
|
+ padding-bottom: 12px;
|
|
|
|
+ padding-top: 24px;
|
|
|
|
+ display: flex;
|
|
justify-content: space-between;
|
|
justify-content: space-between;
|
|
- padding: 10px 10px 10px 10px;
|
|
|
|
- // margin-top: 10px;
|
|
|
|
- // padding-right: 10px;
|
|
|
|
- border-top: 1px solid rgba(196, 196, 196, 0.4);
|
|
|
|
- &:nth-child(2n + 1) {
|
|
|
|
- border-right: 1px solid rgba(196, 196, 196, 0.4);
|
|
|
|
- }
|
|
|
|
- .open-title {
|
|
|
|
- width: 100%;
|
|
|
|
- font-size: 14px;
|
|
|
|
- height: 25px;
|
|
|
|
- line-height: 25px;
|
|
|
|
- display: flex;
|
|
|
|
- justify-content: space-between;
|
|
|
|
- margin-bottom: 10px;
|
|
|
|
- span {
|
|
|
|
|
|
+ .air-desc {
|
|
|
|
+ position: relative;
|
|
|
|
+ font-family: PingFang SC;
|
|
|
|
+ font-size: 16px;
|
|
|
|
+ line-height: 19px;
|
|
|
|
+ color: #4d5262;
|
|
|
|
+ flex: none;
|
|
|
|
+ flex-grow: 0;
|
|
|
|
+ margin: 5px 0px;
|
|
|
|
+ // min-height: 100px;
|
|
|
|
+ .air-title {
|
|
|
|
+ font-family: PingFang SC;
|
|
|
|
+ padding-left: 5px;
|
|
font-size: 16px;
|
|
font-size: 16px;
|
|
- display: inline-block;
|
|
|
|
- width: calc(100% - 50px);
|
|
|
|
- overflow: hidden;
|
|
|
|
- text-overflow: ellipsis;
|
|
|
|
- white-space: nowrap;
|
|
|
|
- }
|
|
|
|
- .child-switch {
|
|
|
|
- // height: 20px;
|
|
|
|
- // width: 50px;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- .adjust-box {
|
|
|
|
- box-sizing: border-box;
|
|
|
|
- // padding-right: 10px;
|
|
|
|
- padding-top: 10px;
|
|
|
|
- display: flex;
|
|
|
|
- justify-content: space-between;
|
|
|
|
- font-size: 19px;
|
|
|
|
- .adjust-item {
|
|
|
|
- // flex: 1;
|
|
|
|
- // width: 40px;
|
|
|
|
- display: flex;
|
|
|
|
- flex-direction: column;
|
|
|
|
- justify-content: space-between;
|
|
|
|
- text-align: center;
|
|
|
|
- &:nth-child(2) {
|
|
|
|
- // width: 60px;
|
|
|
|
- flex: 1;
|
|
|
|
- }
|
|
|
|
- .adjust-icon {
|
|
|
|
|
|
+ line-height: 20px;
|
|
|
|
+ color: #4d5262;
|
|
|
|
+ padding-bottom: 10px;
|
|
|
|
+ i {
|
|
display: inline-block;
|
|
display: inline-block;
|
|
- flex: 1;
|
|
|
|
|
|
+ font-size: 12px;
|
|
|
|
+ transform: scale(0.9);
|
|
|
|
+ font-style: normal;
|
|
|
|
+ padding-left: 5px;
|
|
|
|
+ color: #c4c4c4;
|
|
}
|
|
}
|
|
- .adjust-text {
|
|
|
|
- // flex: 1;
|
|
|
|
- // padding: 20px 0;
|
|
|
|
- height: 50px;
|
|
|
|
- overflow: hidden;
|
|
|
|
- color: #1f2429;
|
|
|
|
- .value-wrap {
|
|
|
|
- transition: transform 1s;
|
|
|
|
- .value {
|
|
|
|
- width: 100%;
|
|
|
|
- height: 50px;
|
|
|
|
- display: flex;
|
|
|
|
- align-items: center;
|
|
|
|
- font-weight: 400;
|
|
|
|
- justify-content: center;
|
|
|
|
- text-align: center;
|
|
|
|
- font-size: 14px;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
|
|
+ }
|
|
|
|
+ .air-temperature {
|
|
|
|
+ display: inline-block;
|
|
|
|
+ font-family: "Montserrat";
|
|
|
|
+ font-style: normal;
|
|
|
|
+ font-weight: normal;
|
|
|
|
+ font-size: 32px;
|
|
|
|
+ line-height: 32px;
|
|
|
|
+ flex: none;
|
|
|
|
+ order: 0;
|
|
|
|
+ flex-grow: 0;
|
|
|
|
+ margin: 0px 4px;
|
|
|
|
+
|
|
|
|
+ sup {
|
|
|
|
+ font-family: Mulish;
|
|
|
|
+ font-style: normal;
|
|
|
|
+ font-weight: 800;
|
|
|
|
+ font-size: 12px;
|
|
|
|
+ line-height: 15px;
|
|
}
|
|
}
|
|
- .adjust-title {
|
|
|
|
- padding-top: 10px;
|
|
|
|
- font-size: 14px;
|
|
|
|
- font-weight: 400;
|
|
|
|
|
|
+ }
|
|
|
|
+ .show-all {
|
|
|
|
+ position: absolute;
|
|
|
|
+ width: 110px;
|
|
|
|
+ bottom: -8px;
|
|
|
|
+ font-family: PingFang SC;
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ line-height: 16px;
|
|
|
|
+ color: #c4c4c4;
|
|
|
|
+ margin: 0px 5px;
|
|
|
|
+ span {
|
|
|
|
+ font-size: 12px;
|
|
}
|
|
}
|
|
- .disable-color {
|
|
|
|
- color: $elDisabledColor;
|
|
|
|
|
|
+ .light-icon {
|
|
|
|
+ font-size: 12px;
|
|
|
|
+ padding-right: 10px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
- }
|
|
|
|
-}
|
|
|
|
|
|
+ .air-right {
|
|
|
|
+ position: relative;
|
|
|
|
+ width: 157px;
|
|
|
|
+ text-align: center;
|
|
|
|
|
|
-.air-top {
|
|
|
|
- padding-left: 20px;
|
|
|
|
- padding-bottom: 20px;
|
|
|
|
- display: flex;
|
|
|
|
- justify-content: space-between;
|
|
|
|
- .air-desc {
|
|
|
|
- position: relative;
|
|
|
|
- // flex: 1 157px;
|
|
|
|
- padding-top: 10px;
|
|
|
|
- font-family: PingFang SC;
|
|
|
|
- font-size: 16px;
|
|
|
|
- line-height: 19px;
|
|
|
|
- color: #4d5262;
|
|
|
|
- flex: none;
|
|
|
|
- flex-grow: 0;
|
|
|
|
- margin: 5px 0px;
|
|
|
|
- min-height: 100px;
|
|
|
|
- .air-title {
|
|
|
|
- font-family: PingFang SC;
|
|
|
|
- padding-left: 5px;
|
|
|
|
- font-size: 16px;
|
|
|
|
- line-height: 20px;
|
|
|
|
- color: #4d5262;
|
|
|
|
- padding-bottom: 10px;
|
|
|
|
- i {
|
|
|
|
- display: inline-block;
|
|
|
|
- font-size: 12px;
|
|
|
|
- transform: scale(0.9);
|
|
|
|
- font-style: normal;
|
|
|
|
- padding-left: 5px;
|
|
|
|
- color: #c4c4c4;
|
|
|
|
|
|
+ img {
|
|
|
|
+ width: 130px;
|
|
|
|
+ height: 64px;
|
|
}
|
|
}
|
|
- }
|
|
|
|
- .air-temperature {
|
|
|
|
- display: inline-block;
|
|
|
|
- font-family: "Montserrat";
|
|
|
|
- font-style: normal;
|
|
|
|
- font-weight: normal;
|
|
|
|
- font-size: 32px;
|
|
|
|
- line-height: 32px;
|
|
|
|
- flex: none;
|
|
|
|
- order: 0;
|
|
|
|
- flex-grow: 0;
|
|
|
|
- margin: 0px 4px;
|
|
|
|
|
|
|
|
- sup {
|
|
|
|
- font-family: Mulish;
|
|
|
|
- font-style: normal;
|
|
|
|
- font-weight: 800;
|
|
|
|
- font-size: 12px;
|
|
|
|
- line-height: 15px;
|
|
|
|
|
|
+ .switch-btn {
|
|
|
|
+ position: absolute;
|
|
|
|
+ z-index: 111;
|
|
|
|
+ bottom: -5px;
|
|
|
|
+ right: 25px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
- .show-all {
|
|
|
|
- position: absolute;
|
|
|
|
- width: 110px;
|
|
|
|
- bottom: -8px;
|
|
|
|
- font-family: PingFang SC;
|
|
|
|
- font-size: 14px;
|
|
|
|
- line-height: 16px;
|
|
|
|
- color: #c4c4c4;
|
|
|
|
- margin: 0px 5px;
|
|
|
|
|
|
+ }
|
|
|
|
+ .top-switch {
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ padding: 0 20px;
|
|
|
|
+ padding-bottom: 24px;
|
|
|
|
+ .top-nav {
|
|
|
|
+ height: 28px;
|
|
|
|
+ line-height: 28px;
|
|
|
|
+ border-radius: 21px;
|
|
|
|
+ background: #f1f4f6;
|
|
span {
|
|
span {
|
|
- font-size: 12px;
|
|
|
|
|
|
+ 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;
|
|
}
|
|
}
|
|
- .light-icon {
|
|
|
|
- font-size: 12px;
|
|
|
|
- padding-right: 10px;
|
|
|
|
|
|
+ .nav-active {
|
|
|
|
+ background: #fff;
|
|
|
|
+ border: 1px solid #e1e5eb;
|
|
|
|
+ border-radius: 21px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
- }
|
|
|
|
- .air-right {
|
|
|
|
- position: relative;
|
|
|
|
- width: 157px;
|
|
|
|
- text-align: center;
|
|
|
|
-
|
|
|
|
- img {
|
|
|
|
- width: 147px;
|
|
|
|
- height: 110px;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
.switch-btn {
|
|
.switch-btn {
|
|
- position: absolute;
|
|
|
|
- z-index: 111;
|
|
|
|
- bottom: -5px;
|
|
|
|
- right: 25px;
|
|
|
|
|
|
+ margin-top: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
-}
|
|
|
|
-
|
|
|
|
-.air-control {
|
|
|
|
- padding: 10px;
|
|
|
|
- border-top: 1px solid rgba(196, 196, 196, 0.4);
|
|
|
|
- .control-box {
|
|
|
|
|
|
+ .line {
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 0px;
|
|
|
|
+ border-top: 1px solid rgba(232, 236, 240, 1);
|
|
|
|
+ }
|
|
|
|
+ .air-switch-box {
|
|
display: flex;
|
|
display: flex;
|
|
- justify-content: space-between;
|
|
|
|
}
|
|
}
|
|
- .volume-box {
|
|
|
|
- padding: 10px;
|
|
|
|
- color: #c4c4c4;
|
|
|
|
- font-size: 12px;
|
|
|
|
- .text {
|
|
|
|
- padding-top: 5px;
|
|
|
|
- font-style: normal;
|
|
|
|
- font-weight: 600;
|
|
|
|
- font-size: 11px;
|
|
|
|
- }
|
|
|
|
- .number {
|
|
|
|
- span {
|
|
|
|
- display: inline-block;
|
|
|
|
- vertical-align: middle;
|
|
|
|
- color: #c4c4c4;
|
|
|
|
- padding-right: 5px;
|
|
|
|
- }
|
|
|
|
- .number-active {
|
|
|
|
- font-family: "Montserrat";
|
|
|
|
- font-style: normal;
|
|
|
|
- font-weight: 500;
|
|
|
|
- font-size: 22px;
|
|
|
|
- line-height: 24px;
|
|
|
|
- color: #4d5262 !important;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- .model {
|
|
|
|
- font-size: 14px;
|
|
|
|
- color: #1f2429;
|
|
|
|
|
|
+ .active-color {
|
|
|
|
+ background: $elActiveColor !important;
|
|
|
|
+ span {
|
|
|
|
+ color: #fff !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
- .volume-icon {
|
|
|
|
- .icon-item {
|
|
|
|
- position: relative;
|
|
|
|
|
|
+ .air-child {
|
|
|
|
+ width: 100%;
|
|
|
|
+ // padding: 20px;
|
|
|
|
+ padding-left: 10px;
|
|
|
|
+ padding-right: 10px;
|
|
|
|
+ // padding-top: 10px;
|
|
|
|
+ .child-control-box {
|
|
display: inline-block;
|
|
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%);
|
|
|
|
|
|
+ width: 50%;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ padding: 10px 10px 10px 10px;
|
|
|
|
+ // margin-top: 10px;
|
|
|
|
+ // padding-right: 10px;
|
|
|
|
+ border-top: 1px solid rgba(196, 196, 196, 0.4);
|
|
|
|
+ &:nth-child(2n + 1) {
|
|
|
|
+ border-right: 1px solid rgba(196, 196, 196, 0.4);
|
|
}
|
|
}
|
|
- &:nth-child(2) {
|
|
|
|
- margin-left: 10px;
|
|
|
|
- margin-right: 10px;
|
|
|
|
|
|
+ .open-title {
|
|
|
|
+ width: 100%;
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ height: 25px;
|
|
|
|
+ line-height: 25px;
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ margin-bottom: 10px;
|
|
|
|
+ span {
|
|
|
|
+ font-size: 16px;
|
|
|
|
+ display: inline-block;
|
|
|
|
+ width: calc(100% - 50px);
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ text-overflow: ellipsis;
|
|
|
|
+ white-space: nowrap;
|
|
|
|
+ }
|
|
|
|
+ .child-switch {
|
|
|
|
+ // height: 20px;
|
|
|
|
+ // width: 50px;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
- span {
|
|
|
|
- font-size: 12px;
|
|
|
|
- color: #000000;
|
|
|
|
- position: absolute;
|
|
|
|
- left: 50%;
|
|
|
|
- top: 50%;
|
|
|
|
- transform: translate(-50%, -50%) scale(0.8);
|
|
|
|
|
|
+ .adjust-box {
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ // padding-right: 10px;
|
|
|
|
+ padding-top: 10px;
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ font-size: 19px;
|
|
|
|
+ .adjust-item {
|
|
|
|
+ // flex: 1;
|
|
|
|
+ // width: 40px;
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ text-align: center;
|
|
|
|
+ &:nth-child(2) {
|
|
|
|
+ // width: 60px;
|
|
|
|
+ flex: 1;
|
|
|
|
+ }
|
|
|
|
+ .adjust-icon {
|
|
|
|
+ display: inline-block;
|
|
|
|
+ flex: 1;
|
|
|
|
+ }
|
|
|
|
+ .adjust-text {
|
|
|
|
+ // flex: 1;
|
|
|
|
+ // padding: 20px 0;
|
|
|
|
+ height: 50px;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ color: #1f2429;
|
|
|
|
+ .value-wrap {
|
|
|
|
+ transition: transform 1s;
|
|
|
|
+ .value {
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 50px;
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ font-weight: 400;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ text-align: center;
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .adjust-title {
|
|
|
|
+ padding-top: 10px;
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ font-weight: 400;
|
|
|
|
+ }
|
|
|
|
+ .disable-color {
|
|
|
|
+ color: $elDisabledColor;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
- .temp-text {
|
|
|
|
- height: 20px;
|
|
|
|
- line-height: 20px;
|
|
|
|
- font-family: "Montserrat";
|
|
|
|
- font-style: normal;
|
|
|
|
- font-weight: 500;
|
|
|
|
- font-size: 11px;
|
|
|
|
- color: #c4c4c4;
|
|
|
|
- padding: 0 5px;
|
|
|
|
|
|
+
|
|
|
|
+ .child-box {
|
|
|
|
+ padding-bottom: 16px;
|
|
}
|
|
}
|
|
- .temp-slider {
|
|
|
|
- position: relative;
|
|
|
|
- display: flex;
|
|
|
|
- height: 20px;
|
|
|
|
- flex: 1;
|
|
|
|
- border-radius: 5px;
|
|
|
|
- .item {
|
|
|
|
- height: 20px;
|
|
|
|
- flex: 1;
|
|
|
|
- font-size: 0;
|
|
|
|
- &:nth-child(1) {
|
|
|
|
- background: #5e8bcf;
|
|
|
|
- border-radius: 11px 0 0 11px;
|
|
|
|
- }
|
|
|
|
- &:nth-child(2) {
|
|
|
|
- background: #9fb7cd;
|
|
|
|
|
|
+ .air-control {
|
|
|
|
+ padding: 20px;
|
|
|
|
+ padding-top: 28px;
|
|
|
|
+ padding-bottom: 0;
|
|
|
|
+ .control-box {
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ }
|
|
|
|
+ .volume-box {
|
|
|
|
+ .text {
|
|
|
|
+ font-family: "PingFang SC";
|
|
|
|
+ font-size: 12px;
|
|
|
|
+ font-weight: 400;
|
|
|
|
+ line-height: 17px;
|
|
|
|
+ letter-spacing: 0px;
|
|
|
|
+ color: rgba(196, 201, 207, 1);
|
|
}
|
|
}
|
|
- &:nth-child(3) {
|
|
|
|
- background: #f3f3f3;
|
|
|
|
|
|
+ .number {
|
|
|
|
+ span {
|
|
|
|
+ font-family: "Persagy";
|
|
|
|
+ font-size: 12px;
|
|
|
|
+ font-weight: 400;
|
|
|
|
+ line-height: 24px;
|
|
|
|
+ letter-spacing: 0px;
|
|
|
|
+ padding-right: 8px;
|
|
|
|
+ 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);
|
|
|
|
+ }
|
|
}
|
|
}
|
|
- &:nth-child(4) {
|
|
|
|
- background: #ff9882;
|
|
|
|
|
|
+ .model {
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ color: #1f2429;
|
|
}
|
|
}
|
|
- &:nth-child(5) {
|
|
|
|
- background: #e5574f;
|
|
|
|
- border-radius: 0 11px 11px 0;
|
|
|
|
|
|
+ }
|
|
|
|
+ .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);
|
|
|
|
+ }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
- .slider-bar {
|
|
|
|
- position: absolute;
|
|
|
|
- width: 25px;
|
|
|
|
- left: 0;
|
|
|
|
- bottom: -2px;
|
|
|
|
- z-index: 333;
|
|
|
|
- .bar-temp {
|
|
|
|
- padding-bottom: 10px;
|
|
|
|
|
|
+ .temp-text {
|
|
|
|
+ height: 20px;
|
|
|
|
+ line-height: 20px;
|
|
|
|
+ font-family: "Montserrat";
|
|
|
|
+ font-style: normal;
|
|
|
|
+ font-weight: 500;
|
|
|
|
+ font-size: 11px;
|
|
|
|
+ color: #c4c4c4;
|
|
|
|
+ padding: 0 5px;
|
|
|
|
+ }
|
|
|
|
+ .temp-slider {
|
|
|
|
+ position: relative;
|
|
|
|
+ display: flex;
|
|
|
|
+ height: 22px;
|
|
|
|
+ flex: 1;
|
|
|
|
+ border-radius: 16px;
|
|
|
|
+ background: linear-gradient(
|
|
|
|
+ 270deg,
|
|
|
|
+ #ffbab6 0%,
|
|
|
|
+ #ffe7d1 29.05%,
|
|
|
|
+ #f1efff 62%,
|
|
|
|
+ #c8d6ff 100%
|
|
|
|
+ );
|
|
|
|
+
|
|
|
|
+ .slider-bar {
|
|
|
|
+ position: absolute;
|
|
|
|
+ width: 25px;
|
|
|
|
+ left: 0;
|
|
|
|
+ bottom: -3px;
|
|
|
|
+ z-index: 333;
|
|
|
|
+ .bar-temp {
|
|
|
|
+ padding-bottom: 10px;
|
|
|
|
+ font-family: "Persagy";
|
|
|
|
+ font-size: 12px;
|
|
|
|
+ font-weight: 400;
|
|
|
|
+ line-height: 14px;
|
|
|
|
+ letter-spacing: 0px;
|
|
|
|
+ text-align: left;
|
|
|
|
+ color: rgba(98, 108, 120, 1);
|
|
|
|
+ }
|
|
|
|
+ .bar-circle {
|
|
|
|
+ width: 32px;
|
|
|
|
+ height: 32px;
|
|
|
|
+ background: #fff;
|
|
|
|
+ border-radius: 50%;
|
|
|
|
+ box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.1),
|
|
|
|
+ 0px 4px 10px rgba(0, 0, 0, 0.07);
|
|
|
|
+ border-radius: 21px;
|
|
|
|
+ z-index: 444;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .temp-left,
|
|
|
|
+ .temp-right {
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 50%;
|
|
|
|
+ transform: translateY(-50%);
|
|
|
|
+ font-family: "Persagy";
|
|
|
|
+ font-style: normal;
|
|
|
|
+ font-weight: 400;
|
|
font-size: 12px;
|
|
font-size: 12px;
|
|
- color: #1f2429;
|
|
|
|
|
|
+ text-align: right;
|
|
|
|
+ color: #626c78;
|
|
}
|
|
}
|
|
- .bar-circle {
|
|
|
|
- width: 25px;
|
|
|
|
- height: 25px;
|
|
|
|
- background: #fff;
|
|
|
|
- border-radius: 50%;
|
|
|
|
- box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.1),
|
|
|
|
- 0px 4px 10px rgba(0, 0, 0, 0.07);
|
|
|
|
- border-radius: 21px;
|
|
|
|
- z-index: 444;
|
|
|
|
|
|
+ .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: 35px;
|
|
|
|
- padding-bottom: 15px;
|
|
|
|
|
|
+ .air-control-padding {
|
|
|
|
+ padding-top: 45px;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
</style>
|
|
</style>
|
|
<style lang="scss">
|
|
<style lang="scss">
|