|
@@ -55,9 +55,13 @@
|
|
|
<div class="temp-slider" id="sliderId">
|
|
|
<div class="slider-bar" id="barId">
|
|
|
<div class="bar-temp">{{ realTemp }}℃</div>
|
|
|
- <div class="bar-circle" id="handId"></div>
|
|
|
+ <div
|
|
|
+ class="bar-circle"
|
|
|
+ style="border: 2px solid rgba(255, 255, 255, 1)"
|
|
|
+ id="handId"
|
|
|
+ ></div>
|
|
|
</div>
|
|
|
- <div class="temp-left" id="tempLeftId">
|
|
|
+ <div class="temp-left" id="tempManualLeftId">
|
|
|
{{ airData.minTempSet }}
|
|
|
</div>
|
|
|
<div class="temp-right">
|
|
@@ -185,7 +189,10 @@
|
|
|
<span>制冷模式</span>
|
|
|
</div>
|
|
|
<div class="text-box" v-else>
|
|
|
- <img :src="parseImgUrl('ipdImages', 'wind_small.svg')" alt="" />
|
|
|
+ <img
|
|
|
+ :src="parseImgUrl('ipdImages', 'tongfeng-small.svg')"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
<span>通风模式</span>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -194,7 +201,6 @@
|
|
|
:model-value="childItem.isOpen"
|
|
|
class="child-switch"
|
|
|
inactive-color="rgba(196, 196, 196, 0.4)"
|
|
|
- size="14px"
|
|
|
/>
|
|
|
</div>
|
|
|
|
|
@@ -394,36 +400,41 @@ export default defineComponent({
|
|
|
setBarNowPerstion() {
|
|
|
proxyData.realTemp = proxyData.airTemp;
|
|
|
let barBox: any = document.querySelector("#barId");
|
|
|
- // console.log("设置温度位置---");
|
|
|
- // console.log(barBox)
|
|
|
if (!barBox) {
|
|
|
return;
|
|
|
}
|
|
|
let sliderBox: any = document.querySelector("#sliderId");
|
|
|
+ let sliderWidth: any = proxyData.getEleWidth(sliderBox);
|
|
|
if (
|
|
|
proxyData.airTemp >= proxyData.airData.minTempSet &&
|
|
|
proxyData.airTemp <= proxyData.airData.maxTempSet
|
|
|
) {
|
|
|
- // 正常温度范围
|
|
|
let left: any =
|
|
|
- ((proxyData.airTemp - proxyData.airData.minTempSet) / 0.5) *
|
|
|
- proxyData.part;
|
|
|
+ (proxyData.airTemp - proxyData.airData.minTempSet) / proxyData.part;
|
|
|
left = Math.floor(left);
|
|
|
if (barBox) {
|
|
|
barBox.style.left = left + "px";
|
|
|
}
|
|
|
} else {
|
|
|
if (!proxyData.airTemp) {
|
|
|
- barBox.style.left = 0 + "px";
|
|
|
+ barBox.style.left = 0;
|
|
|
} else if (proxyData.airTemp < proxyData.airData.minTempSet) {
|
|
|
- barBox.style.left = 0 + "px";
|
|
|
+ barBox.style.left = 0;
|
|
|
} else if (proxyData.airTemp > proxyData.airData.maxTempSet) {
|
|
|
- let sliderWidth: any = sliderBox.offsetWidth;
|
|
|
let barWidth: any = barBox.offsetWidth;
|
|
|
- barBox.style.left = sliderWidth - barWidth + "px";
|
|
|
+ barBox.style.left =
|
|
|
+ sliderWidth - barWidth + proxyData.sliderPading + "px";
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
+ getEleWidth(ele: any) {
|
|
|
+ // debugger;
|
|
|
+ if (ele) {
|
|
|
+ return ele.getBoundingClientRect().width;
|
|
|
+ } else {
|
|
|
+ return 1;
|
|
|
+ }
|
|
|
+ },
|
|
|
// 滑动
|
|
|
endBoxSwiper() {
|
|
|
proxyData.swiperIinit = true;
|
|
@@ -432,12 +443,17 @@ export default defineComponent({
|
|
|
let sliderBox: any = document.querySelector("#sliderId");
|
|
|
let isMove: any = false;
|
|
|
let barLeft: any = 0;
|
|
|
- let sliderWidth: any = sliderBox ? sliderBox.offsetWidth : 1;
|
|
|
- let barWidth: any = barBox ? barBox.offsetWidth : 20;
|
|
|
+ proxyData.sliderPading = 2;
|
|
|
+ let sliderWidth: any = proxyData.getEleWidth(sliderBox);
|
|
|
+ let barWidth: any = proxyData.getEleWidth(barBox);
|
|
|
+ if (sliderWidth > 1) {
|
|
|
+ sliderWidth = sliderWidth - barWidth;
|
|
|
+ }
|
|
|
let tempPart =
|
|
|
- (proxyData.airData.maxTempSet - proxyData.airData.minTempSet) / 20;
|
|
|
- let part: any = 0.5 / (tempPart / (Math.floor(sliderWidth) / 22));
|
|
|
- proxyData.part = part;
|
|
|
+ (proxyData.airData.maxTempSet - proxyData.airData.minTempSet) /
|
|
|
+ sliderWidth;
|
|
|
+ let part: any = tempPart;
|
|
|
+ proxyData.part = tempPart;
|
|
|
if (!handBox) {
|
|
|
return;
|
|
|
}
|
|
@@ -460,8 +476,8 @@ export default defineComponent({
|
|
|
let left: any = barLeft - moveRealX;
|
|
|
left = left < 0 ? 0 : left;
|
|
|
barBox.style.left = left + "px";
|
|
|
- proxyData.realTemp =
|
|
|
- proxyData.airData.minTempSet + Math.ceil(left / part) * 0.5;
|
|
|
+ proxyData.realTemp = left * part + proxyData.airData.minTempSet;
|
|
|
+ proxyData.realTemp = Math.round(proxyData.realTemp);
|
|
|
}
|
|
|
},
|
|
|
swipeRight: function (e: any) {
|
|
@@ -469,13 +485,10 @@ export default defineComponent({
|
|
|
barLeft = Math.abs(barLeft);
|
|
|
let moveRealX: any = Math.abs(e.mation.moveX - e.mation.startX);
|
|
|
let left: any = barLeft + moveRealX;
|
|
|
- left = left > sliderWidth ? sliderWidth - barWidth : left;
|
|
|
- barBox.style.left = left + "px";
|
|
|
- proxyData.realTemp =
|
|
|
- proxyData.airData.minTempSet + Math.ceil(left / part) * 0.5;
|
|
|
- if (proxyData.realTemp > proxyData.airData.maxTempSet) {
|
|
|
- proxyData.realTemp = proxyData.airData.maxTempSet;
|
|
|
- }
|
|
|
+ left = left > sliderWidth ? sliderWidth : left;
|
|
|
+ proxyData.realTemp = left * part + proxyData.airData.minTempSet;
|
|
|
+ proxyData.realTemp = Math.round(proxyData.realTemp);
|
|
|
+ barBox.style.left = left + proxyData.sliderPading + "px";
|
|
|
}
|
|
|
},
|
|
|
});
|
|
@@ -1104,13 +1117,6 @@ export default defineComponent({
|
|
|
width: 130px;
|
|
|
height: 64px;
|
|
|
}
|
|
|
-
|
|
|
- // .switch-btn {
|
|
|
- // position: absolute;
|
|
|
- // z-index: 111;
|
|
|
- // bottom: -5px;
|
|
|
- // right: 25px;
|
|
|
- // }
|
|
|
}
|
|
|
}
|
|
|
.top-switch {
|
|
@@ -1141,9 +1147,9 @@ export default defineComponent({
|
|
|
border-radius: 21px;
|
|
|
}
|
|
|
}
|
|
|
- .switch-btn {
|
|
|
- margin-top: 0;
|
|
|
- }
|
|
|
+ // .switch-btn {
|
|
|
+ // margin-top: 0;
|
|
|
+ // }
|
|
|
}
|
|
|
.line {
|
|
|
width: 100%;
|
|
@@ -1224,11 +1230,6 @@ export default defineComponent({
|
|
|
color: rgba(196, 201, 207, 1);
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .child-switch {
|
|
|
- // height: 20px;
|
|
|
- // width: 50px;
|
|
|
- }
|
|
|
}
|
|
|
|
|
|
.control-bottom {
|
|
@@ -1266,22 +1267,14 @@ export default defineComponent({
|
|
|
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);
|
|
|
- }
|
|
|
.number {
|
|
|
span {
|
|
|
font-family: "Persagy";
|
|
|
font-size: 12px;
|
|
|
font-weight: 400;
|
|
|
+ padding-right: 8px;
|
|
|
line-height: 24px;
|
|
|
letter-spacing: 0px;
|
|
|
- padding-right: 8px;
|
|
|
color: rgba(196, 201, 207, 1);
|
|
|
}
|
|
|
.number-active {
|
|
@@ -1294,8 +1287,24 @@ export default defineComponent({
|
|
|
}
|
|
|
}
|
|
|
.model {
|
|
|
- font-size: 14px;
|
|
|
- color: #1f2429;
|
|
|
+ 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 {
|
|
@@ -1366,7 +1375,6 @@ export default defineComponent({
|
|
|
width: 30px;
|
|
|
height: 30px;
|
|
|
background: rgba(246, 249, 254, 1);
|
|
|
- border: 2px solid rgba(255, 255, 255, 1);
|
|
|
border-radius: 50%;
|
|
|
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
|
|
|
}
|
|
@@ -1385,10 +1393,13 @@ export default defineComponent({
|
|
|
color: rgba(98, 108, 120, 1);
|
|
|
}
|
|
|
.temp-left {
|
|
|
- left: 8px;
|
|
|
+ left: 0px;
|
|
|
+ padding-left: 8px;
|
|
|
}
|
|
|
.temp-right {
|
|
|
- right: 8px;
|
|
|
+ right: 0px;
|
|
|
+ padding-right: 8px;
|
|
|
+ text-align: left;
|
|
|
}
|
|
|
}
|
|
|
.control-text {
|
|
@@ -1407,41 +1418,4 @@ export default defineComponent({
|
|
|
}
|
|
|
}
|
|
|
</style>
|
|
|
-<style lang="scss">
|
|
|
-.air {
|
|
|
- .loading-box {
|
|
|
- .van-loading {
|
|
|
- position: absolute;
|
|
|
- left: 50%;
|
|
|
- top: 50%;
|
|
|
- transform: translate(-50%, -50%);
|
|
|
- }
|
|
|
- }
|
|
|
- .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;
|
|
|
- }
|
|
|
- .child-control-box {
|
|
|
- .child-switch {
|
|
|
- // position: relative;
|
|
|
- .van-switch__node {
|
|
|
- // margin-top: -6px;
|
|
|
- // width: 20px !important;
|
|
|
- // height: 20px !important;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|
|
|
|