|
@@ -1,461 +1,200 @@
|
|
|
<template>
|
|
|
- <div class="light-temp">
|
|
|
- <div class="light-tep-top">
|
|
|
- <span>氛围灯</span>
|
|
|
- <!-- <Switch
|
|
|
- v-model="lampSw"
|
|
|
- inactive-color="rgba(196, 196, 196, 0.4)"
|
|
|
- class="switch-btn"
|
|
|
- /> -->
|
|
|
- </div>
|
|
|
- <div class="bright-box" v-if="lightData.bright">
|
|
|
- <div class="bight-text">
|
|
|
- <span>亮度</span>
|
|
|
- <span>{{ lightData.brightValueRate }}%</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 class="curtain-temp">
|
|
|
+ <div class="curtain-tep-top">
|
|
|
+ <span>氛围灯</span>
|
|
|
+ </div>
|
|
|
+ <div class="bright-box">
|
|
|
+ <div class="bight-text">
|
|
|
+ <span>亮度</span>
|
|
|
+ <span>20%</span>
|
|
|
</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>
|
|
|
+ <div class="curtain-control">
|
|
|
+ <div class="bight-slider" id="curtainSlider1">
|
|
|
+ <div class="item-now" :style="{ width: itemWidth }"></div>
|
|
|
+ <div class="slider-bar" id="curtainHandld1"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </template>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
|
|
|
<script lang="ts">
|
|
|
- import {
|
|
|
- defineComponent,
|
|
|
- onMounted,
|
|
|
- reactive,
|
|
|
- toRefs,
|
|
|
- computed,
|
|
|
- watch,
|
|
|
- onUnmounted,
|
|
|
- onBeforeMount,
|
|
|
- onBeforeUnmount,
|
|
|
- nextTick,
|
|
|
- } from "vue";
|
|
|
- import { Switch, Dialog, Toast } from "vant";
|
|
|
- import { swiper } from "@/utils/swiper";
|
|
|
- import { querySpaceConditioners, setSpaceCondtioners } from "@/apis/envmonitor";
|
|
|
- import { parseImgUrl, setQueryConfig } from "@/utils";
|
|
|
- import any = jasmine.any;
|
|
|
-
|
|
|
- export default defineComponent({
|
|
|
- props: {
|
|
|
- lightData: {
|
|
|
- type: Object,
|
|
|
- default: () => {},
|
|
|
- },
|
|
|
+import {
|
|
|
+ defineComponent,
|
|
|
+ onMounted,
|
|
|
+ reactive,
|
|
|
+ toRefs,
|
|
|
+ computed,
|
|
|
+ watch,
|
|
|
+ onUnmounted,
|
|
|
+ onBeforeMount,
|
|
|
+ onBeforeUnmount,
|
|
|
+ nextTick,
|
|
|
+} from "vue";
|
|
|
+import { Switch, Dialog, Toast } from "vant";
|
|
|
+import { swiper } from "@/utils/swiper";
|
|
|
+import { querySpaceConditioners, setSpaceCondtioners } from "@/apis/envmonitor";
|
|
|
+import { parseImgUrl, setQueryConfig } from "@/utils";
|
|
|
+import any = jasmine.any;
|
|
|
+
|
|
|
+export default defineComponent({
|
|
|
+ props: {
|
|
|
+ curtainData: {
|
|
|
+ type: Array,
|
|
|
+ default: () => [],
|
|
|
},
|
|
|
- components: { Switch },
|
|
|
- setup(props, contx) {
|
|
|
- const propsVal = props;
|
|
|
- let timeTemp: any = null;
|
|
|
- let timeColor: any = null;
|
|
|
- const proxyData = reactive({
|
|
|
- lampSw: false,
|
|
|
- itemWidth: "0%",
|
|
|
- lightData: props.lightData,
|
|
|
- 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;
|
|
|
- } 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;
|
|
|
+ },
|
|
|
+ components: { Switch },
|
|
|
+ setup(props, contx) {
|
|
|
+ const propsVal = props;
|
|
|
+ let timeTemp: any = null;
|
|
|
+ let timeColor: any = null;
|
|
|
+ const proxyData = reactive({
|
|
|
+ lampSw: false,
|
|
|
+ itemWidth: "0%",
|
|
|
+ curtainData: props.curtainData,
|
|
|
+ //亮度滑块滑动
|
|
|
+ endBoxSwiper() {
|
|
|
+ let handBox: any = document.querySelector("#curtainHandld1");
|
|
|
+ let sliderBox: any = document.querySelector("#curtainSlider1");
|
|
|
+ let isMove: any = false;
|
|
|
+ let barLeft: any = 0;
|
|
|
+ let sliderWidth: any = sliderBox ? sliderBox.offsetWidth : 1;
|
|
|
+
|
|
|
+ if (!handBox) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let barWidth: any = handBox.getBoundingClientRect().width;
|
|
|
+
|
|
|
+ handBox.addEventListener("touchstart", function (e: any) {
|
|
|
+ barLeft = isNaN(parseInt(handBox.style.left))
|
|
|
+ ? 0
|
|
|
+ : parseInt(handBox.style.left);
|
|
|
+ isMove = true;
|
|
|
+ });
|
|
|
+ handBox.addEventListener("touchend", function (e: any) {
|
|
|
+ isMove = false;
|
|
|
+ });
|
|
|
+
|
|
|
+ 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";
|
|
|
}
|
|
|
- let bright: any =
|
|
|
- proxyData.lightData.brightMaxValue / (sliderWidth - barWidth);
|
|
|
- let rate: any = 100 / proxyData.lightData.brightMaxValue;
|
|
|
+ },
|
|
|
+ swipeRight: function (e: any) {
|
|
|
// 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;
|
|
|
+ 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";
|
|
|
}
|
|
|
- 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
|
|
|
- );
|
|
|
- }
|
|
|
- handBox.style.left = left + "px";
|
|
|
- },
|
|
|
- //亮度滑块滑动
|
|
|
- endBoxSwiper() {
|
|
|
- proxyData.swiperIinit = true;
|
|
|
- let handBox: any = document.querySelector("#handId1");
|
|
|
- let sliderBox: any = document.querySelector("#sliderId1");
|
|
|
- let isMove: any = false;
|
|
|
- let barLeft: any = 0;
|
|
|
- let sliderWidth: any = sliderBox ? sliderBox.offsetWidth : 1;
|
|
|
-
|
|
|
- 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))
|
|
|
- ? 0
|
|
|
- : parseInt(handBox.style.left);
|
|
|
- isMove = true;
|
|
|
- proxyData.setTimeContrl(1);
|
|
|
- });
|
|
|
- handBox.addEventListener("touchend", function (e: any) {
|
|
|
- isMove = false;
|
|
|
- proxyData.changContrlValEnd(1);
|
|
|
- });
|
|
|
-
|
|
|
- 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);
|
|
|
- }
|
|
|
- },
|
|
|
- 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);
|
|
|
- }
|
|
|
- },
|
|
|
- });
|
|
|
- },
|
|
|
- // 色温滑块滑动
|
|
|
- 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) {
|
|
|
- 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);
|
|
|
- }
|
|
|
- },
|
|
|
- });
|
|
|
- },
|
|
|
- // 初始化滑动
|
|
|
- async barSwiperInit() {
|
|
|
- nextTick(() => {
|
|
|
- proxyData.endBoxSwiper();
|
|
|
- proxyData.tempBoxSwiper();
|
|
|
- });
|
|
|
- },
|
|
|
- });
|
|
|
-
|
|
|
- watch(props, (newProps: any) => {});
|
|
|
- onBeforeUnmount(() => {});
|
|
|
- onMounted(() => {
|
|
|
- proxyData.barSwiperInit();
|
|
|
- });
|
|
|
- return {
|
|
|
- ...toRefs(proxyData),
|
|
|
- };
|
|
|
- },
|
|
|
- });
|
|
|
- </script>
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ // 初始化滑动
|
|
|
+ async barSwiperInit() {
|
|
|
+ nextTick(() => {
|
|
|
+ proxyData.endBoxSwiper();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ });
|
|
|
+
|
|
|
+ watch(props, (newProps: any) => {});
|
|
|
+ onBeforeUnmount(() => {});
|
|
|
+ onMounted(() => {
|
|
|
+ proxyData.barSwiperInit();
|
|
|
+ });
|
|
|
+ return {
|
|
|
+ ...toRefs(proxyData),
|
|
|
+ };
|
|
|
+ },
|
|
|
+});
|
|
|
+</script>
|
|
|
<style lang="scss" scoped>
|
|
|
- .light-temp {
|
|
|
- padding: 10px;
|
|
|
- .light-tep-top {
|
|
|
+.curtain-temp {
|
|
|
+ padding: 10px;
|
|
|
+ .curtain-tep-top {
|
|
|
+ display: flex;
|
|
|
+ padding-bottom: 60px;
|
|
|
+ line-height: 31px;
|
|
|
+ justify-content: space-between;
|
|
|
+ span {
|
|
|
+ font-family: "PingFang SC";
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 22px;
|
|
|
+
|
|
|
+ color: #000000;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .bright-box {
|
|
|
+ margin-bottom: 60px;
|
|
|
+ .bight-text {
|
|
|
display: flex;
|
|
|
- padding-bottom: 60px;
|
|
|
- line-height: 31px;
|
|
|
justify-content: space-between;
|
|
|
+ padding-bottom: 15px;
|
|
|
span {
|
|
|
font-family: "PingFang SC";
|
|
|
font-style: normal;
|
|
|
- font-weight: 500;
|
|
|
- font-size: 22px;
|
|
|
-
|
|
|
- color: #000000;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 18px;
|
|
|
+ line-height: 25px;
|
|
|
+ color: #1b2129;
|
|
|
}
|
|
|
}
|
|
|
- .bright-box {
|
|
|
- margin-bottom: 60px;
|
|
|
- .bight-text {
|
|
|
+ .curtain-control {
|
|
|
+ .bight-slider {
|
|
|
+ position: relative;
|
|
|
display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- padding-bottom: 15px;
|
|
|
- span {
|
|
|
- font-family: "PingFang SC";
|
|
|
- font-style: normal;
|
|
|
- font-weight: 400;
|
|
|
- font-size: 18px;
|
|
|
- line-height: 25px;
|
|
|
- color: #1b2129;
|
|
|
- }
|
|
|
- }
|
|
|
- .light-control {
|
|
|
- .bight-slider {
|
|
|
- position: relative;
|
|
|
- display: flex;
|
|
|
- height: 32px;
|
|
|
- flex: 1;
|
|
|
- background: #e8ecf0;
|
|
|
- border-radius: 25px;
|
|
|
- .item-now {
|
|
|
- background: #ffe399;
|
|
|
- border-radius: 25px 0 0 25px;
|
|
|
- }
|
|
|
-
|
|
|
- .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);
|
|
|
- }
|
|
|
+ height: 32px;
|
|
|
+ flex: 1;
|
|
|
+ background: #e8ecf0;
|
|
|
+ border-radius: 25px;
|
|
|
+ .item-now {
|
|
|
+ background: #ffe399;
|
|
|
+ border-radius: 25px 0 0 25px;
|
|
|
}
|
|
|
- .temp-slider {
|
|
|
- background: linear-gradient(
|
|
|
- 90deg,
|
|
|
- #ffc079 0%,
|
|
|
- #ffe7d1 43.1%,
|
|
|
- #f1efff 74.36%,
|
|
|
- #c8d6ff 100%
|
|
|
- );
|
|
|
+
|
|
|
+ .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);
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .light-control-padding {
|
|
|
- padding-top: 35px;
|
|
|
- padding-bottom: 15px;
|
|
|
+ .temp-slider {
|
|
|
+ background: linear-gradient(
|
|
|
+ 90deg,
|
|
|
+ #ffc079 0%,
|
|
|
+ #ffe7d1 43.1%,
|
|
|
+ #f1efff 74.36%,
|
|
|
+ #c8d6ff 100%
|
|
|
+ );
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ .curtain-control-padding {
|
|
|
+ padding-top: 35px;
|
|
|
+ padding-bottom: 15px;
|
|
|
+ }
|
|
|
}
|
|
|
- </style>
|
|
|
+}
|
|
|
+</style>
|
|
|
|