|
@@ -1,28 +1,25 @@
|
|
|
<template>
|
|
|
<div class="light-temp">
|
|
|
<div class="light-tep-top">
|
|
|
- <span>氛围灯</span>
|
|
|
+ <span>地暖</span>
|
|
|
</div>
|
|
|
- <div class="bright-box" v-if="lightData.bright">
|
|
|
+ <div class="bright-box">
|
|
|
<div class="bight-text">
|
|
|
- <span>亮度</span>
|
|
|
- <span>{{ lightData.brightValueRate }}%</span>
|
|
|
+ <span>温度调节</span>
|
|
|
+ <span>{{ realTemp ? realTemp : "--" }}℃</span>
|
|
|
</div>
|
|
|
- <div class="light-control">
|
|
|
- <div class="bight-slider" id="sliderId1">
|
|
|
- <div class="item-now" :style="{ width: itemWidth }"></div>
|
|
|
- <div class="slider-bar" id="handId1"></div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="bright-box" v-if="lightData.colorTemperature">
|
|
|
- <div class="bight-text">
|
|
|
- <span>色温</span>
|
|
|
- <span>{{ lightData.colorTempValueRate }}%</span>
|
|
|
- </div>
|
|
|
- <div class="light-control">
|
|
|
- <div class="bight-slider temp-slider" id="sliderId2">
|
|
|
- <div class="slider-bar" id="handId2"></div>
|
|
|
+ <div class="control-box">
|
|
|
+ <div class="temp-slider" id="slideFloorId2">
|
|
|
+ <div class="slider-bar" id="barFloorId2">
|
|
|
+ <!-- <div class="bar-temp">{{ realTemp }}℃</div> -->
|
|
|
+ <div class="bar-circle" id="handFloorId2"></div>
|
|
|
+ </div>
|
|
|
+ <div class="temp-left" style="width: 22px">
|
|
|
+ {{ floorData.minTempSet }}
|
|
|
+ </div>
|
|
|
+ <div class="temp-right" style="width: 22px">
|
|
|
+ {{ floorData.maxTempSet }}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -50,7 +47,7 @@ import any = jasmine.any;
|
|
|
|
|
|
export default defineComponent({
|
|
|
props: {
|
|
|
- lightData: {
|
|
|
+ floorData: {
|
|
|
type: Object,
|
|
|
default: () => {},
|
|
|
},
|
|
@@ -63,304 +60,129 @@ export default defineComponent({
|
|
|
const proxyData = reactive({
|
|
|
lampSw: false,
|
|
|
itemWidth: "0%",
|
|
|
- lightData: props.lightData,
|
|
|
+ realTemp: 0,
|
|
|
+ part: 0,
|
|
|
+ floorData: props.floorData,
|
|
|
swiperIinit: false,
|
|
|
// 状态控制调整
|
|
|
setSpaceContrl(data: any) {
|
|
|
setSpaceCondtioners(data).then((res: any) => {});
|
|
|
},
|
|
|
- timeTemp: timeTemp,
|
|
|
- timeTempNum: 1,
|
|
|
- timeColor: timeColor,
|
|
|
- timeColorNum: 1,
|
|
|
- getTimeNum(newTime: any = "") {
|
|
|
- let time: any = (new Date().getTime() - newTime) / 1000;
|
|
|
- let num: any = parseInt(time);
|
|
|
- if (num == 1) {
|
|
|
- return true;
|
|
|
+ getEleWidth(ele: any) {
|
|
|
+ // debugger;
|
|
|
+ if (ele) {
|
|
|
+ return ele.getBoundingClientRect().width;
|
|
|
} else {
|
|
|
- return false;
|
|
|
- }
|
|
|
- },
|
|
|
- // 改变当前空间设置的值
|
|
|
- changContrlVal(type: any, tmerType: any = 2) {
|
|
|
- let data: any = [];
|
|
|
- if (type == 1) {
|
|
|
- if (
|
|
|
- proxyData.lightData.brightValue < proxyData.lightData.brightMinValue
|
|
|
- ) {
|
|
|
- proxyData.lightData.brightValue =
|
|
|
- proxyData.lightData.brightMinValue;
|
|
|
- }
|
|
|
- proxyData.lightData.brightValue = Math.floor(
|
|
|
- proxyData.lightData.brightValue
|
|
|
- );
|
|
|
- data = [
|
|
|
- {
|
|
|
- id: proxyData.lightData.id,
|
|
|
- code: "brightSet",
|
|
|
- value: proxyData.lightData.brightValue,
|
|
|
- },
|
|
|
- ];
|
|
|
- if (tmerType == 2) {
|
|
|
- if (proxyData.getTimeNum(proxyData.timeTemp)) {
|
|
|
- proxyData.setSpaceContrl(data);
|
|
|
- proxyData.timeTemp = new Date().getTime();
|
|
|
- }
|
|
|
- } else {
|
|
|
- proxyData.setSpaceContrl(data);
|
|
|
- }
|
|
|
- } else if (type == 2) {
|
|
|
- if (
|
|
|
- proxyData.lightData.colorTempValue <
|
|
|
- proxyData.lightData.colorTempMinValue
|
|
|
- ) {
|
|
|
- proxyData.lightData.colorTempValue =
|
|
|
- proxyData.lightData.colorTempMinValue;
|
|
|
- }
|
|
|
- proxyData.lightData.colorTempValue = Math.floor(
|
|
|
- proxyData.lightData.colorTempValue
|
|
|
- );
|
|
|
- data = [
|
|
|
- {
|
|
|
- id: proxyData.lightData.id,
|
|
|
- code: "colorTemperatureSet",
|
|
|
- value: proxyData.lightData.colorTempValue,
|
|
|
- },
|
|
|
- ];
|
|
|
- if (tmerType == 2) {
|
|
|
- if (proxyData.getTimeNum(proxyData.timeColor)) {
|
|
|
- proxyData.setSpaceContrl(data);
|
|
|
- proxyData.timeColor = new Date().getTime();
|
|
|
- }
|
|
|
- } else {
|
|
|
- proxyData.setSpaceContrl(data);
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- // 控制结束处理
|
|
|
- changContrlValEnd(type: any) {
|
|
|
- if (type == 1) {
|
|
|
- proxyData.changContrlVal(1, 1);
|
|
|
- } else if (type == 2) {
|
|
|
- proxyData.changContrlVal(2, 1);
|
|
|
- }
|
|
|
- },
|
|
|
- // 定时控制
|
|
|
- setTimeContrl(type: any) {
|
|
|
- if (type == 1) {
|
|
|
- proxyData.timeTemp = new Date().getTime();
|
|
|
- } else if (type == 2) {
|
|
|
- proxyData.timeColor = new Date().getTime();
|
|
|
- }
|
|
|
- },
|
|
|
- // 设置调节滚动条的最大值和最小值
|
|
|
- setLightDataMax() {
|
|
|
- proxyData.lightData.brightMaxValue = proxyData.lightData.brightMaxValue
|
|
|
- ? proxyData.lightData.brightMaxValue
|
|
|
- : 100;
|
|
|
- proxyData.lightData.colorTempMaxValue = proxyData.lightData
|
|
|
- .colorTempMaxValue
|
|
|
- ? proxyData.lightData.colorTempMaxValue
|
|
|
- : 100;
|
|
|
- },
|
|
|
- // 计算滚动条样式的值
|
|
|
- setBarValue(type: any, sliderWidth: any, left: any, barWidth: any) {
|
|
|
- proxyData.setLightDataMax();
|
|
|
- if (type == 1) {
|
|
|
- // 亮度
|
|
|
- let value: any =
|
|
|
- proxyData.lightData.brightMaxValue -
|
|
|
- proxyData.lightData.brightMinValue;
|
|
|
- let bright: any = value / (sliderWidth - barWidth);
|
|
|
- let rate: any = 100 / value;
|
|
|
- proxyData.lightData.brightValueRate = left * bright * rate;
|
|
|
- proxyData.lightData.brightValueRate = Math.floor(
|
|
|
- proxyData.lightData.brightValueRate
|
|
|
- );
|
|
|
- let width: any =
|
|
|
- proxyData.lightData.brightValueRate >= 98
|
|
|
- ? 98
|
|
|
- : proxyData.lightData.brightValueRate;
|
|
|
- proxyData.lightData.brightValue =
|
|
|
- proxyData.lightData.brightValueRate * rate;
|
|
|
- proxyData.itemWidth = left + barWidth / 2 + "px";
|
|
|
- } else if (type == 2) {
|
|
|
- let value: any =
|
|
|
- proxyData.lightData.colorTempMaxValue -
|
|
|
- proxyData.lightData.colorTempMinValue;
|
|
|
- // 色温
|
|
|
- let colorVal: any = value / (sliderWidth - barWidth);
|
|
|
- let rate: any = 100 / value;
|
|
|
- proxyData.lightData.colorTempValueRate = left * colorVal * rate;
|
|
|
- proxyData.lightData.colorTempValueRate = Math.floor(
|
|
|
- proxyData.lightData.colorTempValueRate
|
|
|
- );
|
|
|
- proxyData.lightData.colorTempValue =
|
|
|
- proxyData.lightData.colorTempValueRate * rate;
|
|
|
- }
|
|
|
- },
|
|
|
- // 根据当前值设置页面的位置
|
|
|
- getDefaultVal(type: any, sliderWidth: any, barWidth: any, handBox: any) {
|
|
|
- // console.log("调用了----");
|
|
|
- let left: any = "";
|
|
|
- if (type == 1) {
|
|
|
- proxyData.lightData.brightValue =
|
|
|
- proxyData.lightData.brightValue <=
|
|
|
- proxyData.lightData.brightMinValue
|
|
|
- ? 0
|
|
|
- : proxyData.lightData.brightValue;
|
|
|
- if (
|
|
|
- proxyData.lightData.brightValue > proxyData.lightData.brightMaxValue
|
|
|
- ) {
|
|
|
- proxyData.lightData.brightValue =
|
|
|
- proxyData.lightData.brightMaxValue;
|
|
|
- }
|
|
|
- let bright: any =
|
|
|
- proxyData.lightData.brightMaxValue / (sliderWidth - barWidth);
|
|
|
- let rate: any = 100 / proxyData.lightData.brightMaxValue;
|
|
|
- // debugger;
|
|
|
- left = proxyData.lightData.brightValue / rate / bright / rate;
|
|
|
- proxyData.lightData.brightValueRate = Math.floor(
|
|
|
- proxyData.lightData.brightValue / rate
|
|
|
- );
|
|
|
- proxyData.itemWidth = left + barWidth / 2 + "px";
|
|
|
- } else if (type == 2) {
|
|
|
- proxyData.lightData.colorTempValue =
|
|
|
- proxyData.lightData.colorTempValue <=
|
|
|
- proxyData.lightData.colorTempMinValue
|
|
|
- ? 0
|
|
|
- : proxyData.lightData.colorTempValue;
|
|
|
- if (
|
|
|
- proxyData.lightData.colorTempValue >
|
|
|
- proxyData.lightData.colorTempMaxValue
|
|
|
- ) {
|
|
|
- proxyData.lightData.colorTempValue =
|
|
|
- proxyData.lightData.colorTempMaxValue;
|
|
|
- }
|
|
|
- let colorVal: any =
|
|
|
- proxyData.lightData.colorTempMaxValue / (sliderWidth - barWidth);
|
|
|
- let rate: any = 100 / proxyData.lightData.colorTempMaxValue;
|
|
|
- left = proxyData.lightData.colorTempValue / rate / colorVal / rate;
|
|
|
- proxyData.lightData.colorTempValueRate = Math.floor(
|
|
|
- proxyData.lightData.colorTempValue / rate
|
|
|
- );
|
|
|
+ return 1;
|
|
|
}
|
|
|
- handBox.style.left = left + "px";
|
|
|
},
|
|
|
- //亮度滑块滑动
|
|
|
+ // 滑动
|
|
|
endBoxSwiper() {
|
|
|
proxyData.swiperIinit = true;
|
|
|
- let handBox: any = document.querySelector("#handId1");
|
|
|
- let sliderBox: any = document.querySelector("#sliderId1");
|
|
|
+ let handBox: any = document.querySelector("#handFloorId2");
|
|
|
+ let barBox: any = document.querySelector("#barFloorId2");
|
|
|
+ let sliderBox: any = document.querySelector("#slideFloorId2");
|
|
|
+ let sliderPadingL: any = 24;
|
|
|
+ let sliderPadingR: any = 24;
|
|
|
let isMove: any = false;
|
|
|
let barLeft: any = 0;
|
|
|
- let sliderWidth: any = sliderBox ? sliderBox.offsetWidth : 1;
|
|
|
-
|
|
|
+ let sliderWidth: any = proxyData.getEleWidth(sliderBox);
|
|
|
+ let barWidth: any = proxyData.getEleWidth(barBox);
|
|
|
+ if (sliderWidth > 1) {
|
|
|
+ sliderWidth = sliderWidth - sliderPadingR - sliderPadingL - barWidth;
|
|
|
+ }
|
|
|
+ let tempPart =
|
|
|
+ (proxyData.floorData.maxTempSet - proxyData.floorData.minTempSet) /
|
|
|
+ sliderWidth;
|
|
|
+ console.log("tempPart==", tempPart);
|
|
|
+ let part: any = tempPart;
|
|
|
+ proxyData.part = part;
|
|
|
if (!handBox) {
|
|
|
return;
|
|
|
}
|
|
|
- let barWidth: any = handBox.getBoundingClientRect().width;
|
|
|
- proxyData.getDefaultVal(1, sliderWidth, barWidth, handBox);
|
|
|
-
|
|
|
handBox.addEventListener("touchstart", function (e: any) {
|
|
|
- barLeft = isNaN(parseInt(handBox.style.left))
|
|
|
+ barLeft = isNaN(parseInt(barBox.style.left))
|
|
|
? 0
|
|
|
- : parseInt(handBox.style.left);
|
|
|
+ : parseInt(barBox.style.left);
|
|
|
isMove = true;
|
|
|
- proxyData.setTimeContrl(1);
|
|
|
});
|
|
|
handBox.addEventListener("touchend", function (e: any) {
|
|
|
isMove = false;
|
|
|
- proxyData.changContrlValEnd(1);
|
|
|
+ // proxyData.changeZongAir("temp", proxyData.realTemp);
|
|
|
+ // proxyData.heatingTemp = proxyData.realTemp;
|
|
|
});
|
|
|
-
|
|
|
swiper(handBox, {
|
|
|
swipeLeft: function (e: any) {
|
|
|
if (isMove) {
|
|
|
barLeft = Math.abs(barLeft);
|
|
|
let moveRealX: any = Math.abs(e.mation.moveX - e.mation.startX);
|
|
|
let left: any = barLeft - moveRealX;
|
|
|
- left = left < 0 ? 0 : left;
|
|
|
- // debugger
|
|
|
- handBox.style.left = left + "px";
|
|
|
- proxyData.setBarValue(1, sliderWidth, left, barWidth);
|
|
|
- proxyData.changContrlVal(1);
|
|
|
+ left = left < sliderPadingL ? sliderPadingL : left;
|
|
|
+ barBox.style.left = left + "px";
|
|
|
+ proxyData.realTemp =
|
|
|
+ (left - sliderPadingL) * part + proxyData.floorData.minTempSet;
|
|
|
+ proxyData.realTemp = Math.round(proxyData.realTemp);
|
|
|
}
|
|
|
},
|
|
|
swipeRight: function (e: any) {
|
|
|
- // debugger;
|
|
|
if (isMove) {
|
|
|
barLeft = Math.abs(barLeft);
|
|
|
let moveRealX: any = Math.abs(e.mation.moveX - e.mation.startX);
|
|
|
let left: any = barLeft + moveRealX;
|
|
|
left =
|
|
|
- left >= sliderWidth - barWidth ? sliderWidth - barWidth : left;
|
|
|
- handBox.style.left = left + "px";
|
|
|
- proxyData.setBarValue(1, sliderWidth, left, barWidth);
|
|
|
- proxyData.changContrlVal(1);
|
|
|
+ left > sliderWidth + sliderPadingR
|
|
|
+ ? sliderWidth + sliderPadingR
|
|
|
+ : left;
|
|
|
+ barBox.style.left = left + "px";
|
|
|
+ proxyData.realTemp =
|
|
|
+ (left - sliderPadingL) * part + proxyData.floorData.minTempSet;
|
|
|
+ proxyData.realTemp = Math.round(proxyData.realTemp);
|
|
|
}
|
|
|
},
|
|
|
});
|
|
|
},
|
|
|
- // 色温滑块滑动
|
|
|
- tempBoxSwiper() {
|
|
|
- proxyData.swiperIinit = true;
|
|
|
- let handBox: any = document.querySelector("#handId2");
|
|
|
- let sliderBox: any = document.querySelector("#sliderId2");
|
|
|
- let isMove: any = false;
|
|
|
- let barLeft: any = 0;
|
|
|
- let sliderWidth: any = sliderBox ? sliderBox.offsetWidth : 1;
|
|
|
- if (!handBox) {
|
|
|
+ // 设置温度条的位置
|
|
|
+ setBarNowPerstion() {
|
|
|
+ proxyData.realTemp =
|
|
|
+ proxyData.floorData && proxyData.floorData.tempSet
|
|
|
+ ? proxyData.floorData.tempSet
|
|
|
+ : 0;
|
|
|
+ let barBox: any = document.querySelector("#barFloorId2");
|
|
|
+ if (!barBox) {
|
|
|
return;
|
|
|
}
|
|
|
- let barWidth: any = handBox.getBoundingClientRect().width;
|
|
|
- proxyData.getDefaultVal(2, sliderWidth, barWidth, handBox);
|
|
|
- handBox.addEventListener("touchstart", function (e: any) {
|
|
|
- barLeft = isNaN(parseInt(handBox.style.left))
|
|
|
- ? 0
|
|
|
- : parseInt(handBox.style.left);
|
|
|
- isMove = true;
|
|
|
- proxyData.setTimeContrl(2);
|
|
|
- });
|
|
|
- handBox.addEventListener("touchend", function (e: any) {
|
|
|
- isMove = false;
|
|
|
- proxyData.changContrlValEnd(2);
|
|
|
- });
|
|
|
-
|
|
|
- swiper(handBox, {
|
|
|
- swipeLeft: function (e: any) {
|
|
|
- if (isMove) {
|
|
|
- barLeft = Math.abs(barLeft);
|
|
|
- let moveRealX: any = Math.abs(e.mation.moveX - e.mation.startX);
|
|
|
- let left: any = barLeft - moveRealX;
|
|
|
- left = left < 0 ? 0 : left;
|
|
|
- // debugger
|
|
|
- handBox.style.left = left + "px";
|
|
|
- proxyData.setBarValue(2, sliderWidth, left, barWidth);
|
|
|
- proxyData.changContrlVal(2);
|
|
|
- }
|
|
|
- },
|
|
|
- swipeRight: function (e: any) {
|
|
|
- // debugger;
|
|
|
- if (isMove) {
|
|
|
- barLeft = Math.abs(barLeft);
|
|
|
- let moveRealX: any = Math.abs(e.mation.moveX - e.mation.startX);
|
|
|
- let left: any = barLeft + moveRealX;
|
|
|
- left =
|
|
|
- left >= sliderWidth - barWidth ? sliderWidth - barWidth : left;
|
|
|
- handBox.style.left = left + "px";
|
|
|
- proxyData.setBarValue(2, sliderWidth, left, barWidth);
|
|
|
- proxyData.changContrlVal(2);
|
|
|
- }
|
|
|
- },
|
|
|
- });
|
|
|
+ let sliderBox: any = document.querySelector("#slideFloorId2");
|
|
|
+ if (
|
|
|
+ proxyData.realTemp !== 0 &&
|
|
|
+ proxyData.realTemp >= proxyData.floorData.minTempSet &&
|
|
|
+ proxyData.realTemp <= proxyData.floorData.maxTempSet
|
|
|
+ ) {
|
|
|
+ // 正常温度范围
|
|
|
+ let left: any =
|
|
|
+ (proxyData.realTemp - proxyData.floorData.minTempSet) /
|
|
|
+ proxyData.part;
|
|
|
+ left = Math.floor(left) + 24;
|
|
|
+ if (barBox) {
|
|
|
+ barBox.style.left = left + "px";
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (!proxyData.realTemp) {
|
|
|
+ barBox.style.left = 24 + "px";
|
|
|
+ } else if (proxyData.realTemp < proxyData.floorData.minTempSet) {
|
|
|
+ barBox.style.left = 24 + "px";
|
|
|
+ } else if (proxyData.realTemp > proxyData.floorData.maxTempSet) {
|
|
|
+ let sliderWidth: any = sliderBox.offsetWidth;
|
|
|
+ let barWidth: any = barBox.offsetWidth;
|
|
|
+ barBox.style.left = sliderWidth - barWidth + "px";
|
|
|
+ }
|
|
|
+ }
|
|
|
},
|
|
|
+
|
|
|
// 初始化滑动
|
|
|
async barSwiperInit() {
|
|
|
nextTick(() => {
|
|
|
proxyData.endBoxSwiper();
|
|
|
- proxyData.tempBoxSwiper();
|
|
|
+ proxyData.setBarNowPerstion();
|
|
|
});
|
|
|
},
|
|
|
});
|
|
@@ -369,7 +191,7 @@ export default defineComponent({
|
|
|
onBeforeUnmount(() => {});
|
|
|
onMounted(() => {
|
|
|
proxyData.barSwiperInit();
|
|
|
- console.log("proxyData.lightData===",proxyData.lightData)
|
|
|
+ console.log("proxyData.floorData===", proxyData.floorData);
|
|
|
});
|
|
|
return {
|
|
|
...toRefs(proxyData),
|
|
@@ -381,75 +203,108 @@ export default defineComponent({
|
|
|
.light-temp {
|
|
|
padding: 10px;
|
|
|
.light-tep-top {
|
|
|
- display: flex;
|
|
|
- padding-bottom: 60px;
|
|
|
+ font-family: "PingFang SC";
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 22px;
|
|
|
line-height: 31px;
|
|
|
- justify-content: space-between;
|
|
|
- span {
|
|
|
- font-family: "PingFang SC";
|
|
|
- font-style: normal;
|
|
|
- font-weight: 500;
|
|
|
- font-size: 22px;
|
|
|
-
|
|
|
- color: #000000;
|
|
|
- }
|
|
|
+ color: #000000;
|
|
|
+ padding-bottom: 48px;
|
|
|
}
|
|
|
.bright-box {
|
|
|
margin-bottom: 60px;
|
|
|
.bight-text {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- padding-bottom: 15px;
|
|
|
+ padding-bottom: 46px;
|
|
|
span {
|
|
|
- font-family: "PingFang SC";
|
|
|
- font-style: normal;
|
|
|
- font-weight: 400;
|
|
|
- font-size: 18px;
|
|
|
- line-height: 25px;
|
|
|
- color: #1b2129;
|
|
|
+ &:nth-child(1) {
|
|
|
+ font-family: "PingFang SC";
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 22px;
|
|
|
+ color: #1b2129;
|
|
|
+ padding-right: 12px;
|
|
|
+ }
|
|
|
+ &:nth-child(2) {
|
|
|
+ padding-left: 12px;
|
|
|
+ font-family: "Persagy";
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 19px;
|
|
|
+ text-align: right;
|
|
|
+ color: #1b2129;
|
|
|
+ border-left: 1px solid #e1e5eb;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- .light-control {
|
|
|
- .bight-slider {
|
|
|
+ .control-box {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ .temp-slider {
|
|
|
position: relative;
|
|
|
display: flex;
|
|
|
height: 32px;
|
|
|
flex: 1;
|
|
|
- background: #e8ecf0;
|
|
|
- border-radius: 25px;
|
|
|
- .item-now {
|
|
|
- background: #ffe399;
|
|
|
- border-radius: 25px 0 0 25px;
|
|
|
+ padding: 0 32px;
|
|
|
+ background: linear-gradient(
|
|
|
+ 270deg,
|
|
|
+ #ffbab6 0%,
|
|
|
+ #ffe7d1 29.05%,
|
|
|
+ #f1efff 62%,
|
|
|
+ #c8d6ff 100%
|
|
|
+ );
|
|
|
+ border-radius: 16px;
|
|
|
+
|
|
|
+ .temp-left,
|
|
|
+ .temp-right {
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ font-family: "Persagy";
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 22px;
|
|
|
+ text-align: right;
|
|
|
+ color: #626c78;
|
|
|
+ }
|
|
|
+ .temp-left {
|
|
|
+ left: 0px;
|
|
|
+ padding-left: 8px;
|
|
|
+ }
|
|
|
+ .temp-right {
|
|
|
+ right: 0px;
|
|
|
+ padding-right: 8px;
|
|
|
}
|
|
|
|
|
|
.slider-bar {
|
|
|
position: absolute;
|
|
|
width: 38px;
|
|
|
- height: 38px;
|
|
|
- background: #f6f9fe;
|
|
|
left: 0;
|
|
|
bottom: -2px;
|
|
|
z-index: 333;
|
|
|
- border-radius: 50%;
|
|
|
- border: 2px solid #fff;
|
|
|
- box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.06),
|
|
|
- 0px 0px 8px rgba(0, 0, 0, 0.1);
|
|
|
+ .bar-temp {
|
|
|
+ padding-bottom: 6px;
|
|
|
+ font-family: "Persagy";
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 14px;
|
|
|
+ color: #626c78;
|
|
|
+ }
|
|
|
+ .bar-circle {
|
|
|
+ width: 38px;
|
|
|
+ height: 38px;
|
|
|
+ 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-slider {
|
|
|
- background: linear-gradient(
|
|
|
- 90deg,
|
|
|
- #ffc079 0%,
|
|
|
- #ffe7d1 43.1%,
|
|
|
- #f1efff 74.36%,
|
|
|
- #c8d6ff 100%
|
|
|
- );
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .light-control-padding {
|
|
|
- padding-top: 35px;
|
|
|
- padding-bottom: 15px;
|
|
|
}
|
|
|
}
|
|
|
}
|