123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978 |
- <template>
- <div class="light" 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"
- >
- <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"
- v-if="isOpen && navType == 'all'"
- >
- <div class="control-box">
- <div class="temp-slider" id="slideFloorId">
- <div class="slider-bar" id="barFloorId">
- <div class="bar-temp">{{ realTemp ? realTemp + "℃" : "--" }}</div>
- <div class="bar-circle" id="handFloorId"></div>
- </div>
- <div class="temp-left" id="tempLeftId">
- {{ heatingData.minTempSet }}
- </div>
- <div class="temp-right">
- {{ heatingData.maxTempSet }}
- </div>
- </div>
- </div>
- </div>
- <!--灯控制按钮-->
- <div class="line" v-if="navType == 'child'"></div>
- <div class="light-box" v-if="navType == 'child'">
- <template v-for="item in floorHeatingList" :key="item.id">
- <div class="light-control">
- <div class="control-top">
- <div class="control-temp">
- <span>{{ item.tempSet ? item.tempSet : "--" }}<sup>℃</sup></span>
- <span>{{ item.runStatus ? "已开启" : "已关闭" }}</span>
- </div>
- <Switch
- active-color="$elActiveColor"
- v-model="item.switch"
- :loading="item.loading"
- size="14px"
- @click.stop="eqChangeSwitch('child', item)"
- inactive-color="rgba(196, 196, 196, 0.2)"
- class="child-switch"
- />
- </div>
- <div class="control-bottom">
- <div class="control-title">
- {{ item.localName }}
- </div>
- <img
- @click="showFloorHeating(item)"
- :style="{ opacity: item.switch ? '1' : '0.3' }"
- :src="lightColorImg"
- alt=""
- />
- </div>
- </div>
- </template>
- </div>
- </div>
- </template>
-
- <script lang="ts">
- import {
- defineComponent,
- computed,
- onMounted,
- reactive,
- toRefs,
- getCurrentInstance,
- watch,
- onBeforeMount,
- onUnmounted,
- onBeforeUnmount,
- } from "vue";
- import { Switch, Toast } from "vant";
- import {
- getLampHttp,
- getStatusHttp,
- querySapceFloorHeating,
- setallLampHttp,
- setSpaceCondtioners,
- } from "@/apis/envmonitor";
- import { parseImgUrl, setQueryConfig } from "@/utils";
- import { type } from "os";
- import { onDeactivated } from "vue";
- import { AnyMxRecord } from "dns";
- import { swiper } from "@/utils/swiper";
- import { nextTick } from "process";
- export default defineComponent({
- props: {
- projectId: {
- type: String,
- default: () => "",
- },
- spaceId: {
- type: String,
- default: () => "",
- },
- userIsControl: {
- type: Boolean,
- default: () => false,
- },
- forceOverTimeFlag: {
- type: Boolean,
- default: () => false,
- },
- seviceEquipmentList: {
- // 是否走服务定制的设备
- type: Array,
- default: () => [],
- },
- },
- components: { Switch },
- setup(props, contx) {
- const floorHeatingList: any = [];
- let heatingData: any = {};
- let floorHeathingStatus: any = null;
- const timeOut: any = null;
- const proxyData = reactive({
- seviceEquipmentList: props.seviceEquipmentList,
- forceOverTimeFlag: props.forceOverTimeFlag,
- spaceId: props.spaceId,
- heatingData: heatingData,
- isOpen: false,
- parseImgUrl: parseImgUrl,
- timeOut: timeOut,
- loadingFlag: false,
- floorHeatingList: floorHeatingList,
- floorHeathingStatus: floorHeathingStatus,
- swiperIinit: false,
- part: 1,
- realTemp: 0,
- navType: "all",
- runStatus: 0,
- lightColorImg: parseImgUrl("page-officehome", "lightColorControl.svg"),
- showFloorHeating(floorHeatingItem: any) {
- let item: any = floorHeatingItem;
- if (!item.switch) {
- Toast("请先开启地暖,才可温度调节!");
- return;
- }
- item.minTempSet = proxyData.heatingData.minTempSet;
- item.maxTempSet = proxyData.heatingData.maxTempSet;
- contx.emit("showFloorHeating", item);
- },
- // 改变地暖态(main)
- changeZongAir(text: any) {
- if (text == "temp" && !proxyData.heatingData.runStatus) {
- return;
- }
- let data: any = [];
- proxyData.floorHeatingList.map((item: any) => {
- let code: any = text == "temp" ? item.tempSetCode : item.switchCode;
- let value: any =
- text == "temp" ? proxyData.realTemp : proxyData.isOpen ? 1 : 0;
- let obj: any = {
- id: item.id, //类型:String 必有字段 备注:设备id
- code: code, //类型:String 必有字段 备注:编码 EquipSwtichSet
- value: value, //类型:String 必有字段 备注:值 0
- };
- data.push(obj);
- });
- if (!proxyData.loadingFlag) {
- // 调整设备状态
- proxyData.loadingFlag = false;
- proxyData.setSpaceCondtioners(data);
- }
- },
- // 改变地暖态(child)
- changeChildZongAir(text: any, item: any) {
- let runStatus: any = item.switch ? 1 : 0;
- let data: any = [];
- proxyData.floorHeatingList.map((item: any) => {
- let code: any = text == "temp" ? item.tempSetCode : item.switchCode;
- let value: any = text == "temp" ? proxyData.realTemp : runStatus;
- let obj: any = {
- id: item.id, //类型:String 必有字段 备注:设备id
- code: code, //类型:String 必有字段 备注:编码 EquipSwtichSet
- value: value, //类型:String 必有字段 备注:值 0
- };
- data.push(obj);
- });
- console.log(data);
- if (!item.loading) {
- // 调整设备状态
- item.loading = true;
- proxyData.setSpaceCondtioners(data, item);
- }
- },
- // 改变设备状态
- setSpaceCondtioners(data: any, item: any = null) {
- console.log("调节数据", data);
- setSpaceCondtioners(data)
- .then((res) => {
- proxyData.loadingFlag = false;
- if (item) {
- item.loading = false;
- }
- })
- .catch(() => {
- proxyData.loadingFlag = false;
- item.loading = false;
- Toast("连接异常,请检查网络!");
- });
- },
- // 地暖开关
- eqChangeSwitch(type: any, item: any) {
- if (type == "main") {
- proxyData.isOpen = !proxyData.isOpen;
- proxyData.loading = true;
- proxyData.endBoxSwiper();
- proxyData.changeZongAir("switch");
- } else {
- proxyData.changeChildZongAir("switch", item);
- }
- },
- // 设置地暖温度
- eqChangeTemp() {
- proxyData.changeZongAir("temp");
- },
- // 子设备导航切换
- checkNav(type: any = "all") {
- proxyData.navType = type;
- proxyData.swiperIinit = false;
- proxyData.sliderInit();
- },
- getEleWidth(ele: any) {
- if (ele) {
- return ele.getBoundingClientRect().width;
- } else {
- return 1;
- }
- },
- // 初始化滑动
- sliderInit() {
- nextTick(() => {
- if (proxyData.navType == "all" && proxyData.isOpen) {
- proxyData.endBoxSwiper();
- }
- if (proxyData.navType == "all") {
- proxyData.setBarNowPerstion();
- }
- });
- },
- // 滑动
- endBoxSwiper() {
- proxyData.swiperIinit = true;
- let handBox: any = document.querySelector("#handFloorId");
- let barBox: any = document.querySelector("#barFloorId");
- let sliderBox: any = document.querySelector("#slideFloorId");
- let isMove: any = false;
- let barLeft: any = 0;
- let sliderWidth: any = proxyData.getEleWidth(sliderBox);
- let barWidth: any = proxyData.getEleWidth(barBox);
- let tempLeftBox: any = document.querySelector("#tempLeftId");
- let sliderPadingL: any = proxyData.getEleWidth(tempLeftBox);
- let sliderPadingR: any = sliderPadingL;
- if (sliderWidth > 1) {
- sliderWidth = sliderWidth - barWidth;
- }
- let tempPart =
- (proxyData.heatingData.maxTempSet -
- proxyData.heatingData.minTempSet) /
- sliderWidth;
- let part: any = tempPart;
- proxyData.part = part;
- if (!handBox) {
- return;
- }
- handBox.addEventListener("touchstart", function (e: any) {
- barLeft = isNaN(parseInt(barBox.style.left))
- ? 0
- : parseInt(barBox.style.left);
- isMove = true;
- });
- handBox.addEventListener("touchend", function (e: any) {
- isMove = false;
- proxyData.eqChangeTemp();
- });
- 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;
- barBox.style.left = left + "px";
- proxyData.realTemp =
- left * part + proxyData.heatingData.minTempSet;
- proxyData.realTemp = Math.round(proxyData.realTemp);
- }
- },
- swipeRight: 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 > sliderWidth ? sliderWidth : left;
- barBox.style.left = left + "px";
- proxyData.realTemp =
- left * part + proxyData.heatingData.minTempSet;
- proxyData.realTemp = Math.round(proxyData.realTemp);
- }
- },
- });
- },
- // 设置温度条的位置
- setBarNowPerstion() {
- proxyData.realTemp = proxyData.heatingData.tempSet
- ? proxyData.heatingData.tempSet
- : 0;
- let barBox: any = document.querySelector("#barFloorId");
- if (!barBox) {
- return;
- }
- let sliderBox: any = document.querySelector("#slideFloorId");
- let tempLeftBox: any = document.querySelector("#tempLeftId");
- let sliderPading: any = proxyData.getEleWidth(tempLeftBox);
- console.log("proxyData.realTemp==", sliderPading);
- if (
- proxyData.realTemp >= proxyData.heatingData.minTempSet &&
- proxyData.realTemp <= proxyData.heatingData.maxTempSet
- ) {
- // 正常温度范围
- let left: any =
- (proxyData.realTemp - proxyData.heatingData.minTempSet) /
- proxyData.part;
- left = left;
- if (barBox) {
- barBox.style.left = left + "px";
- }
- } else {
- if (!proxyData.realTemp) {
- barBox.style.left = 0 + "px";
- } else if (proxyData.realTemp < proxyData.heatingData.minTempSet) {
- barBox.style.left = 0 + "px";
- } else if (proxyData.realTemp > proxyData.heatingData.maxTempSet) {
- let sliderWidth: any = sliderBox.offsetWidth;
- let barWidth: any = barBox.offsetWidth;
- barBox.style.left = sliderWidth - barWidth + "px";
- }
- }
- },
- // 格式化地暖数据状态
- formateDataStatus() {
- if (proxyData.heatingData.runStatus) {
- proxyData.isOpen = true;
- } else {
- proxyData.isOpen = false;
- }
- proxyData.floorHeatingList.map((item: any) => {
- item.switch = item.runStatus ? true : false;
- });
- },
- // 获取地暖的状态
- getFloorHeatingList() {
- let str: any = setQueryConfig({ spaceId: proxyData.spaceId });
- querySapceFloorHeating(str)
- .then((res) => {
- const resData: any = res;
- const data: any = resData ? resData.data : {};
- proxyData.heatingData = data;
- if (data.equipList && data.equipList.length) {
- proxyData.floorHeatingList = data.equipList || [];
- }
- proxyData.formateDataStatus();
- let timeout: any = setTimeout(() => {
- clearTimeout(timeout);
- proxyData.sliderInit();
- }, 1000);
- proxyData.startfloorHeathingStatus();
- })
- .catch(() => {
- proxyData.startfloorHeathingStatus();
- });
- },
- loadingTimer: 0,
- loading: false,
- // 计算loading时间
- setLoadingNumber() {
- let timer: any = setInterval(() => {
- proxyData.loadingTimer++;
- console.log(proxyData.loadingTimer);
- if (proxyData.loadingTimer >= 15) {
- clearInterval(timer);
- proxyData.loading = false;
- }
- }, 1000);
- },
- // 灯灯接口清除定时器
- clearFloorHeathingTimer() {
- clearTimeout(proxyData.floorHeathingStatus);
- proxyData.floorHeathingStatus = null;
- },
- // 定时刷新接口
- startfloorHeathingStatus(timerLen: any = 15000) {
- proxyData.clearFloorHeathingTimer();
- proxyData.floorHeathingStatus = setTimeout(() => {
- proxyData.getFloorHeatingList();
- }, timerLen);
- },
- });
- watch(
- [() => props, () => props.spaceId],
- (newProps: any, oldProps: any) => {
- if (newProps[0]) {
- proxyData.forceOverTimeFlag = newProps[0].forceOverTimeFlag;
- proxyData.seviceEquipmentList = newProps[0].seviceEquipmentList;
- }
- if (newProps[1] && oldProps[1] && newProps[1] != oldProps[1]) {
- // 空间id改变的重新获取值调用接口
- console.log("地暖的spaceId变化了");
- // 清除原始数据
- proxyData.floorHeatingList = [];
- proxyData.heatingData = {};
- proxyData.swiperIinit = false;
- proxyData.navType = "all";
- proxyData.spaceId = newProps[1];
- proxyData.clearFloorHeathingTimer();
- proxyData.getFloorHeatingList();
- }
- },
- {
- deep: true,
- immediate: true,
- }
- );
- onBeforeUnmount(() => {
- console.log("灯的组件销毁了--");
- proxyData.clearFloorHeathingTimer();
- });
- onMounted(() => {
- // proxyData.clearFloorHeathingTimer();
- proxyData.getFloorHeatingList();
- });
- return {
- ...toRefs(proxyData),
- };
- },
- });
- </script>
- <style lang="scss" scoped>
- .light {
- width: 100%;
- background: #ffffff;
- box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.07), 0px 4px 10px rgba(0, 0, 0, 0.05);
- border-radius: 25px;
- margin: 15px 0px;
- }
- .light-main {
- padding-left: 20px;
- padding-bottom: 10px;
- padding-top: 10px;
- }
- .floor-top {
- padding: 20px;
- padding-bottom: 16px;
- .top-box {
- display: flex;
- justify-content: space-between;
- padding-bottom: 25px;
- .top-left {
- 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: 4px;
- font-family: "Persagy";
- font-style: normal;
- font-weight: 400;
- font-size: 32px;
- line-height: 39px;
- color: #1b2129;
- sup {
- position: absolute;
- right: -12px;
- top: 0;
- font-family: "Mulish";
- font-style: normal;
- font-weight: 400;
- font-size: 12px;
- line-height: 15px;
- color: #c4c4c4;
- }
- }
- }
- }
- .top-right {
- width: 106px;
- height: 62px;
- margin-right: 17px;
- img {
- width: 106px;
- height: 62px;
- }
- }
- }
- .top-switch {
- display: flex;
- justify-content: space-between;
- // padding-bottom: 15px;
- .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;
- line-height: 14px;
- color: #424c59;
- }
- .nav-active {
- background: #fff;
- border: 1px solid #e1e5eb;
- border-radius: 21px;
- }
- }
- .switch-btn {
- margin-top: 0;
- }
- }
- }
- .floor-control {
- padding: 10px;
- border-top: 1px solid #e8ecf0;
- .control-box {
- 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;
- }
- }
- .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);
- }
- }
- }
- .temp-slider {
- position: relative;
- top: 31px;
- display: flex;
- height: 22px;
- flex: 1;
- padding: 0 24px;
- 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;
- text-align: right;
- color: #626c78;
- }
- .temp-left {
- left: 0px;
- padding-left: 8px;
- }
- .temp-right {
- right: 0px;
- padding-right: 8px;
- text-align: left;
- }
- .slider-bar {
- position: absolute;
- width: 32px;
- left: 0;
- bottom: -4px;
- z-index: 333;
- .bar-temp {
- display: block;
- text-align: center;
- // width: 50px;
- padding-bottom: 4px;
- font-family: "Persagy";
- font-style: normal;
- font-weight: 400;
- font-size: 12px;
- line-height: 14px;
- color: #626c78;
- }
- .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;
- }
- }
- }
- .control-text {
- font-style: normal;
- font-weight: 600;
- font-size: 11px;
- line-height: 15px;
- color: #c4c4c4;
- padding: 10px 0 0 10px;
- }
- }
- .floor-control-padding {
- padding: 30px 20px;
- padding-top: 0px;
- height: 82px;
- }
- .line {
- border-top: 1px solid #e8ecf0;
- margin-bottom: 16px;
- }
- .light-main-control {
- padding-bottom: 15px;
- padding-left: 20px;
- padding-right: 15px;
- // line-height: 36px;
- display: flex;
- justify-content: space-between;
- text-align: right;
- div {
- width: 36px;
- }
- .main-color {
- width: 36px;
- height: 36px;
- // line-height: 36px;
- text-align: center;
- border-radius: 50%;
- background: #f7f9fa;
- img {
- width: 20px;
- height: 20px;
- margin-top: 8px;
- }
- }
- .switch-btn {
- margin-top: 6px;
- margin-right: 12px;
- }
- }
- .light-desc {
- padding-top: 10px;
- // padding-left: 5px;
- font-family: PingFang SC;
- font-size: 16px;
- line-height: 19px;
- color: #4d5262;
- }
- .light-right {
- position: relative;
- text-align: center;
- .switch-box {
- padding-top: 20px;
- padding-right: 15px;
- span {
- display: inline-block;
- font-family: "PingFang SC";
- font-style: normal;
- font-weight: 400;
- font-size: 14px;
- color: #2e3742;
- margin-left: 20px;
- // width: 60px;
- height: 32px;
- line-height: 32px;
- padding: 0 15px;
- background: #f1f4f6;
- border-radius: 21px;
- }
- .switch-item {
- &:hover {
- background: #e8ecf0;
- }
- &:active {
- background: #e8ecf0;
- }
- }
- }
- img {
- //width: 98px;
- height: 100px;
- }
- .switch-btn {
- position: absolute;
- right: -20px;
- bottom: 20px;
- }
- }
- .light-title {
- font-family: PingFang SC;
- padding-left: 5px;
- font-size: 16px;
- line-height: 19px;
- color: #4d5262;
- flex: none;
- order: 0;
- flex-grow: 0;
- margin: 5px 0px;
- }
- .light-status {
- font-family: PingFang SC;
- padding-left: 5px;
- font-size: 12px;
- line-height: 16px;
- color: #c4c4c4;
- flex: none;
- order: 1;
- flex-grow: 0;
- margin: 15px 0px;
- }
- .show-all {
- font-family: "PingFang SC";
- font-style: normal;
- font-weight: 400;
- font-size: 12px;
- line-height: 17px;
- padding-bottom: 15px;
- padding-top: 5px;
- color: #cccccc;
- text-align: center;
- .light-icon {
- font-size: 12px;
- padding-right: 10px;
- }
- }
- .line {
- border-top: 1px solid #e8ecf0;
- margin-top: 4px;
- margin-bottom: 16px;
- }
- .light-box {
- padding: 0 16px;
- font-size: 0;
- }
- .light-control {
- display: inline-block;
- width: 49%;
- vertical-align: middle;
- background: #f7f9fa;
- border-radius: 16px;
- padding-right: 16px;
- padding-left: 16px;
- padding-top: 13px;
- padding-bottom: 12px;
- margin-bottom: 12px;
- &:nth-child(2n - 1) {
- margin-right: 2%;
- }
- .control-top {
- display: flex;
- padding-bottom: 26px;
- justify-content: space-between;
- .control-temp {
- vertical-align: middle;
- span {
- display: block;
- font-family: "Persagy";
- font-style: normal;
- font-weight: 400;
- font-size: 22px;
- line-height: 22px;
- color: #1b144e;
- &:nth-child(1) {
- margin-bottom: 4px;
- sup {
- width: 12px;
- height: 15px;
- font-family: "Mulish";
- font-style: normal;
- font-weight: 400;
- font-size: 12px;
- line-height: 15px;
- color: #c4c4c4;
- }
- }
- &:nth-child(2) {
- font-family: "PingFang SC";
- font-style: normal;
- font-weight: 400;
- font-size: 12px;
- line-height: 17px;
- color: #c4c9cf;
- }
- }
- }
- .child-switch {
- display: inline-block;
- vertical-align: middle;
- }
- }
- .control-bottom {
- display: flex;
- justify-content: space-between;
- .control-title {
- font-family: PingFang SC;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- font-weight: 500;
- font-size: 16px;
- line-height: 20px;
- color: #4d5262;
- }
- img {
- width: 20px;
- height: 20px;
- cursor: pointer;
- }
- }
- }
- </style>
- <style class="style" lang="scss">
- .light {
- .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;
- }
- }
- </style>
-
|