index.vue 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978
  1. <template>
  2. <div class="light" v-if="floorHeatingList && floorHeatingList.length">
  3. <!--如果有子设备-->
  4. <div class="floor-top">
  5. <div class="top-box">
  6. <div class="top-left">
  7. <span>地暖</span>
  8. <span>{{ realTemp ? realTemp : "--" }} <sup>℃</sup></span>
  9. </div>
  10. <div class="top-right">
  11. <img
  12. :src="
  13. isOpen
  14. ? parseImgUrl('page-officehome', 'heating-active.svg')
  15. : parseImgUrl('page-officehome', 'heating.svg')
  16. "
  17. alt=""
  18. />
  19. </div>
  20. </div>
  21. <div class="top-switch">
  22. <div
  23. class="top-nav"
  24. v-if="floorHeatingList && floorHeatingList.length > 1"
  25. >
  26. <span
  27. :class="navType == 'all' ? 'nav-active' : ''"
  28. @click="checkNav('all')"
  29. >
  30. 总控制
  31. </span>
  32. <span
  33. :class="navType == 'child' ? 'nav-active' : ''"
  34. @click="checkNav('child')"
  35. >
  36. 子设备
  37. </span>
  38. </div>
  39. <div v-else></div>
  40. <Switch
  41. class="switch-btn"
  42. :loading="loadingFlag"
  43. :disabled="loadingFlag"
  44. :model-value="isOpen"
  45. @click.stop="eqChangeSwitch('main', floorHeatingList[0])"
  46. inactive-color="rgba(196, 196, 196, 0.4)"
  47. />
  48. </div>
  49. </div>
  50. <div
  51. class="floor-control floor-control-padding"
  52. v-if="isOpen && navType == 'all'"
  53. >
  54. <div class="control-box">
  55. <div class="temp-slider" id="slideFloorId">
  56. <div class="slider-bar" id="barFloorId">
  57. <div class="bar-temp">{{ realTemp ? realTemp + "℃" : "--" }}</div>
  58. <div class="bar-circle" id="handFloorId"></div>
  59. </div>
  60. <div class="temp-left" id="tempLeftId">
  61. {{ heatingData.minTempSet }}
  62. </div>
  63. <div class="temp-right">
  64. {{ heatingData.maxTempSet }}
  65. </div>
  66. </div>
  67. </div>
  68. </div>
  69. <!--灯控制按钮-->
  70. <div class="line" v-if="navType == 'child'"></div>
  71. <div class="light-box" v-if="navType == 'child'">
  72. <template v-for="item in floorHeatingList" :key="item.id">
  73. <div class="light-control">
  74. <div class="control-top">
  75. <div class="control-temp">
  76. <span>{{ item.tempSet ? item.tempSet : "--" }}<sup>℃</sup></span>
  77. <span>{{ item.runStatus ? "已开启" : "已关闭" }}</span>
  78. </div>
  79. <Switch
  80. active-color="$elActiveColor"
  81. v-model="item.switch"
  82. :loading="item.loading"
  83. size="14px"
  84. @click.stop="eqChangeSwitch('child', item)"
  85. inactive-color="rgba(196, 196, 196, 0.2)"
  86. class="child-switch"
  87. />
  88. </div>
  89. <div class="control-bottom">
  90. <div class="control-title">
  91. {{ item.localName }}
  92. </div>
  93. <img
  94. @click="showFloorHeating(item)"
  95. :style="{ opacity: item.switch ? '1' : '0.3' }"
  96. :src="lightColorImg"
  97. alt=""
  98. />
  99. </div>
  100. </div>
  101. </template>
  102. </div>
  103. </div>
  104. </template>
  105. <script lang="ts">
  106. import {
  107. defineComponent,
  108. computed,
  109. onMounted,
  110. reactive,
  111. toRefs,
  112. getCurrentInstance,
  113. watch,
  114. onBeforeMount,
  115. onUnmounted,
  116. onBeforeUnmount,
  117. } from "vue";
  118. import { Switch, Toast } from "vant";
  119. import {
  120. getLampHttp,
  121. getStatusHttp,
  122. querySapceFloorHeating,
  123. setallLampHttp,
  124. setSpaceCondtioners,
  125. } from "@/apis/envmonitor";
  126. import { parseImgUrl, setQueryConfig } from "@/utils";
  127. import { type } from "os";
  128. import { onDeactivated } from "vue";
  129. import { AnyMxRecord } from "dns";
  130. import { swiper } from "@/utils/swiper";
  131. import { nextTick } from "process";
  132. export default defineComponent({
  133. props: {
  134. projectId: {
  135. type: String,
  136. default: () => "",
  137. },
  138. spaceId: {
  139. type: String,
  140. default: () => "",
  141. },
  142. userIsControl: {
  143. type: Boolean,
  144. default: () => false,
  145. },
  146. forceOverTimeFlag: {
  147. type: Boolean,
  148. default: () => false,
  149. },
  150. seviceEquipmentList: {
  151. // 是否走服务定制的设备
  152. type: Array,
  153. default: () => [],
  154. },
  155. },
  156. components: { Switch },
  157. setup(props, contx) {
  158. const floorHeatingList: any = [];
  159. let heatingData: any = {};
  160. let floorHeathingStatus: any = null;
  161. const timeOut: any = null;
  162. const proxyData = reactive({
  163. seviceEquipmentList: props.seviceEquipmentList,
  164. forceOverTimeFlag: props.forceOverTimeFlag,
  165. spaceId: props.spaceId,
  166. heatingData: heatingData,
  167. isOpen: false,
  168. parseImgUrl: parseImgUrl,
  169. timeOut: timeOut,
  170. loadingFlag: false,
  171. floorHeatingList: floorHeatingList,
  172. floorHeathingStatus: floorHeathingStatus,
  173. swiperIinit: false,
  174. part: 1,
  175. realTemp: 0,
  176. navType: "all",
  177. runStatus: 0,
  178. lightColorImg: parseImgUrl("page-officehome", "lightColorControl.svg"),
  179. showFloorHeating(floorHeatingItem: any) {
  180. let item: any = floorHeatingItem;
  181. if (!item.switch) {
  182. Toast("请先开启地暖,才可温度调节!");
  183. return;
  184. }
  185. item.minTempSet = proxyData.heatingData.minTempSet;
  186. item.maxTempSet = proxyData.heatingData.maxTempSet;
  187. contx.emit("showFloorHeating", item);
  188. },
  189. // 改变地暖态(main)
  190. changeZongAir(text: any) {
  191. if (text == "temp" && !proxyData.heatingData.runStatus) {
  192. return;
  193. }
  194. let data: any = [];
  195. proxyData.floorHeatingList.map((item: any) => {
  196. let code: any = text == "temp" ? item.tempSetCode : item.switchCode;
  197. let value: any =
  198. text == "temp" ? proxyData.realTemp : proxyData.isOpen ? 1 : 0;
  199. let obj: any = {
  200. id: item.id, //类型:String 必有字段 备注:设备id
  201. code: code, //类型:String 必有字段 备注:编码 EquipSwtichSet
  202. value: value, //类型:String 必有字段 备注:值 0
  203. };
  204. data.push(obj);
  205. });
  206. if (!proxyData.loadingFlag) {
  207. // 调整设备状态
  208. proxyData.loadingFlag = false;
  209. proxyData.setSpaceCondtioners(data);
  210. }
  211. },
  212. // 改变地暖态(child)
  213. changeChildZongAir(text: any, item: any) {
  214. let runStatus: any = item.switch ? 1 : 0;
  215. let data: any = [];
  216. proxyData.floorHeatingList.map((item: any) => {
  217. let code: any = text == "temp" ? item.tempSetCode : item.switchCode;
  218. let value: any = text == "temp" ? proxyData.realTemp : runStatus;
  219. let obj: any = {
  220. id: item.id, //类型:String 必有字段 备注:设备id
  221. code: code, //类型:String 必有字段 备注:编码 EquipSwtichSet
  222. value: value, //类型:String 必有字段 备注:值 0
  223. };
  224. data.push(obj);
  225. });
  226. console.log(data);
  227. if (!item.loading) {
  228. // 调整设备状态
  229. item.loading = true;
  230. proxyData.setSpaceCondtioners(data, item);
  231. }
  232. },
  233. // 改变设备状态
  234. setSpaceCondtioners(data: any, item: any = null) {
  235. console.log("调节数据", data);
  236. setSpaceCondtioners(data)
  237. .then((res) => {
  238. proxyData.loadingFlag = false;
  239. if (item) {
  240. item.loading = false;
  241. }
  242. })
  243. .catch(() => {
  244. proxyData.loadingFlag = false;
  245. item.loading = false;
  246. Toast("连接异常,请检查网络!");
  247. });
  248. },
  249. // 地暖开关
  250. eqChangeSwitch(type: any, item: any) {
  251. if (type == "main") {
  252. proxyData.isOpen = !proxyData.isOpen;
  253. proxyData.loading = true;
  254. proxyData.endBoxSwiper();
  255. proxyData.changeZongAir("switch");
  256. } else {
  257. proxyData.changeChildZongAir("switch", item);
  258. }
  259. },
  260. // 设置地暖温度
  261. eqChangeTemp() {
  262. proxyData.changeZongAir("temp");
  263. },
  264. // 子设备导航切换
  265. checkNav(type: any = "all") {
  266. proxyData.navType = type;
  267. proxyData.swiperIinit = false;
  268. proxyData.sliderInit();
  269. },
  270. getEleWidth(ele: any) {
  271. if (ele) {
  272. return ele.getBoundingClientRect().width;
  273. } else {
  274. return 1;
  275. }
  276. },
  277. // 初始化滑动
  278. sliderInit() {
  279. nextTick(() => {
  280. if (proxyData.navType == "all" && proxyData.isOpen) {
  281. proxyData.endBoxSwiper();
  282. }
  283. if (proxyData.navType == "all") {
  284. proxyData.setBarNowPerstion();
  285. }
  286. });
  287. },
  288. // 滑动
  289. endBoxSwiper() {
  290. proxyData.swiperIinit = true;
  291. let handBox: any = document.querySelector("#handFloorId");
  292. let barBox: any = document.querySelector("#barFloorId");
  293. let sliderBox: any = document.querySelector("#slideFloorId");
  294. let isMove: any = false;
  295. let barLeft: any = 0;
  296. let sliderWidth: any = proxyData.getEleWidth(sliderBox);
  297. let barWidth: any = proxyData.getEleWidth(barBox);
  298. let tempLeftBox: any = document.querySelector("#tempLeftId");
  299. let sliderPadingL: any = proxyData.getEleWidth(tempLeftBox);
  300. let sliderPadingR: any = sliderPadingL;
  301. if (sliderWidth > 1) {
  302. sliderWidth = sliderWidth - barWidth;
  303. }
  304. let tempPart =
  305. (proxyData.heatingData.maxTempSet -
  306. proxyData.heatingData.minTempSet) /
  307. sliderWidth;
  308. let part: any = tempPart;
  309. proxyData.part = part;
  310. if (!handBox) {
  311. return;
  312. }
  313. handBox.addEventListener("touchstart", function (e: any) {
  314. barLeft = isNaN(parseInt(barBox.style.left))
  315. ? 0
  316. : parseInt(barBox.style.left);
  317. isMove = true;
  318. });
  319. handBox.addEventListener("touchend", function (e: any) {
  320. isMove = false;
  321. proxyData.eqChangeTemp();
  322. });
  323. swiper(handBox, {
  324. swipeLeft: function (e: any) {
  325. if (isMove) {
  326. barLeft = Math.abs(barLeft);
  327. let moveRealX: any = Math.abs(e.mation.moveX - e.mation.startX);
  328. let left: any = barLeft - moveRealX;
  329. left = left < 0 ? 0 : left;
  330. barBox.style.left = left + "px";
  331. proxyData.realTemp =
  332. left * part + proxyData.heatingData.minTempSet;
  333. proxyData.realTemp = Math.round(proxyData.realTemp);
  334. }
  335. },
  336. swipeRight: function (e: any) {
  337. if (isMove) {
  338. barLeft = Math.abs(barLeft);
  339. let moveRealX: any = Math.abs(e.mation.moveX - e.mation.startX);
  340. let left: any = barLeft + moveRealX;
  341. left = left > sliderWidth ? sliderWidth : left;
  342. barBox.style.left = left + "px";
  343. proxyData.realTemp =
  344. left * part + proxyData.heatingData.minTempSet;
  345. proxyData.realTemp = Math.round(proxyData.realTemp);
  346. }
  347. },
  348. });
  349. },
  350. // 设置温度条的位置
  351. setBarNowPerstion() {
  352. proxyData.realTemp = proxyData.heatingData.tempSet
  353. ? proxyData.heatingData.tempSet
  354. : 0;
  355. let barBox: any = document.querySelector("#barFloorId");
  356. if (!barBox) {
  357. return;
  358. }
  359. let sliderBox: any = document.querySelector("#slideFloorId");
  360. let tempLeftBox: any = document.querySelector("#tempLeftId");
  361. let sliderPading: any = proxyData.getEleWidth(tempLeftBox);
  362. console.log("proxyData.realTemp==", sliderPading);
  363. if (
  364. proxyData.realTemp >= proxyData.heatingData.minTempSet &&
  365. proxyData.realTemp <= proxyData.heatingData.maxTempSet
  366. ) {
  367. // 正常温度范围
  368. let left: any =
  369. (proxyData.realTemp - proxyData.heatingData.minTempSet) /
  370. proxyData.part;
  371. left = left;
  372. if (barBox) {
  373. barBox.style.left = left + "px";
  374. }
  375. } else {
  376. if (!proxyData.realTemp) {
  377. barBox.style.left = 0 + "px";
  378. } else if (proxyData.realTemp < proxyData.heatingData.minTempSet) {
  379. barBox.style.left = 0 + "px";
  380. } else if (proxyData.realTemp > proxyData.heatingData.maxTempSet) {
  381. let sliderWidth: any = sliderBox.offsetWidth;
  382. let barWidth: any = barBox.offsetWidth;
  383. barBox.style.left = sliderWidth - barWidth + "px";
  384. }
  385. }
  386. },
  387. // 格式化地暖数据状态
  388. formateDataStatus() {
  389. if (proxyData.heatingData.runStatus) {
  390. proxyData.isOpen = true;
  391. } else {
  392. proxyData.isOpen = false;
  393. }
  394. proxyData.floorHeatingList.map((item: any) => {
  395. item.switch = item.runStatus ? true : false;
  396. });
  397. },
  398. // 获取地暖的状态
  399. getFloorHeatingList() {
  400. let str: any = setQueryConfig({ spaceId: proxyData.spaceId });
  401. querySapceFloorHeating(str)
  402. .then((res) => {
  403. const resData: any = res;
  404. const data: any = resData ? resData.data : {};
  405. proxyData.heatingData = data;
  406. if (data.equipList && data.equipList.length) {
  407. proxyData.floorHeatingList = data.equipList || [];
  408. }
  409. proxyData.formateDataStatus();
  410. let timeout: any = setTimeout(() => {
  411. clearTimeout(timeout);
  412. proxyData.sliderInit();
  413. }, 1000);
  414. proxyData.startfloorHeathingStatus();
  415. })
  416. .catch(() => {
  417. proxyData.startfloorHeathingStatus();
  418. });
  419. },
  420. loadingTimer: 0,
  421. loading: false,
  422. // 计算loading时间
  423. setLoadingNumber() {
  424. let timer: any = setInterval(() => {
  425. proxyData.loadingTimer++;
  426. console.log(proxyData.loadingTimer);
  427. if (proxyData.loadingTimer >= 15) {
  428. clearInterval(timer);
  429. proxyData.loading = false;
  430. }
  431. }, 1000);
  432. },
  433. // 灯灯接口清除定时器
  434. clearFloorHeathingTimer() {
  435. clearTimeout(proxyData.floorHeathingStatus);
  436. proxyData.floorHeathingStatus = null;
  437. },
  438. // 定时刷新接口
  439. startfloorHeathingStatus(timerLen: any = 15000) {
  440. proxyData.clearFloorHeathingTimer();
  441. proxyData.floorHeathingStatus = setTimeout(() => {
  442. proxyData.getFloorHeatingList();
  443. }, timerLen);
  444. },
  445. });
  446. watch(
  447. [() => props, () => props.spaceId],
  448. (newProps: any, oldProps: any) => {
  449. if (newProps[0]) {
  450. proxyData.forceOverTimeFlag = newProps[0].forceOverTimeFlag;
  451. proxyData.seviceEquipmentList = newProps[0].seviceEquipmentList;
  452. }
  453. if (newProps[1] && oldProps[1] && newProps[1] != oldProps[1]) {
  454. // 空间id改变的重新获取值调用接口
  455. console.log("地暖的spaceId变化了");
  456. // 清除原始数据
  457. proxyData.floorHeatingList = [];
  458. proxyData.heatingData = {};
  459. proxyData.swiperIinit = false;
  460. proxyData.navType = "all";
  461. proxyData.spaceId = newProps[1];
  462. proxyData.clearFloorHeathingTimer();
  463. proxyData.getFloorHeatingList();
  464. }
  465. },
  466. {
  467. deep: true,
  468. immediate: true,
  469. }
  470. );
  471. onBeforeUnmount(() => {
  472. console.log("灯的组件销毁了--");
  473. proxyData.clearFloorHeathingTimer();
  474. });
  475. onMounted(() => {
  476. // proxyData.clearFloorHeathingTimer();
  477. proxyData.getFloorHeatingList();
  478. });
  479. return {
  480. ...toRefs(proxyData),
  481. };
  482. },
  483. });
  484. </script>
  485. <style lang="scss" scoped>
  486. .light {
  487. width: 100%;
  488. background: #ffffff;
  489. box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.07), 0px 4px 10px rgba(0, 0, 0, 0.05);
  490. border-radius: 25px;
  491. margin: 15px 0px;
  492. }
  493. .light-main {
  494. padding-left: 20px;
  495. padding-bottom: 10px;
  496. padding-top: 10px;
  497. }
  498. .floor-top {
  499. padding: 20px;
  500. padding-bottom: 16px;
  501. .top-box {
  502. display: flex;
  503. justify-content: space-between;
  504. padding-bottom: 25px;
  505. .top-left {
  506. span {
  507. display: block;
  508. &:nth-child(1) {
  509. font-family: "PingFang SC";
  510. padding-top: 4px;
  511. font-style: normal;
  512. font-weight: 600;
  513. font-size: 16px;
  514. line-height: 22px;
  515. color: #4d5262;
  516. }
  517. &:nth-child(2) {
  518. position: relative;
  519. padding-top: 4px;
  520. font-family: "Persagy";
  521. font-style: normal;
  522. font-weight: 400;
  523. font-size: 32px;
  524. line-height: 39px;
  525. color: #1b2129;
  526. sup {
  527. position: absolute;
  528. right: -12px;
  529. top: 0;
  530. font-family: "Mulish";
  531. font-style: normal;
  532. font-weight: 400;
  533. font-size: 12px;
  534. line-height: 15px;
  535. color: #c4c4c4;
  536. }
  537. }
  538. }
  539. }
  540. .top-right {
  541. width: 106px;
  542. height: 62px;
  543. margin-right: 17px;
  544. img {
  545. width: 106px;
  546. height: 62px;
  547. }
  548. }
  549. }
  550. .top-switch {
  551. display: flex;
  552. justify-content: space-between;
  553. // padding-bottom: 15px;
  554. .top-nav {
  555. height: 28px;
  556. line-height: 28px;
  557. border-radius: 21px;
  558. background: #f1f4f6;
  559. span {
  560. box-sizing: border-box;
  561. display: inline-block;
  562. font-family: "PingFang SC";
  563. font-style: normal;
  564. font-weight: 400;
  565. font-size: 14px;
  566. padding: 5px 8px;
  567. height: 28px;
  568. line-height: 14px;
  569. color: #424c59;
  570. }
  571. .nav-active {
  572. background: #fff;
  573. border: 1px solid #e1e5eb;
  574. border-radius: 21px;
  575. }
  576. }
  577. .switch-btn {
  578. margin-top: 0;
  579. }
  580. }
  581. }
  582. .floor-control {
  583. padding: 10px;
  584. border-top: 1px solid #e8ecf0;
  585. .control-box {
  586. display: flex;
  587. justify-content: space-between;
  588. }
  589. .volume-box {
  590. padding: 10px;
  591. color: #c4c4c4;
  592. font-size: 12px;
  593. .text {
  594. padding-top: 5px;
  595. font-style: normal;
  596. font-weight: 600;
  597. font-size: 11px;
  598. }
  599. .number {
  600. span {
  601. display: inline-block;
  602. vertical-align: middle;
  603. color: #c4c4c4;
  604. padding-right: 5px;
  605. }
  606. .number-active {
  607. font-family: "Montserrat";
  608. font-style: normal;
  609. font-weight: 500;
  610. font-size: 22px;
  611. line-height: 24px;
  612. color: #4d5262 !important;
  613. }
  614. }
  615. .model {
  616. font-size: 14px;
  617. color: #1f2429;
  618. }
  619. }
  620. .volume-icon {
  621. .icon-item {
  622. position: relative;
  623. display: inline-block;
  624. width: 42px;
  625. height: 42px;
  626. background: rgba(196, 196, 196, 0.2);
  627. border-radius: 50%;
  628. img {
  629. width: 20px;
  630. height: 20px;
  631. position: absolute;
  632. left: 50%;
  633. top: 50%;
  634. transform: translate(-50%, -50%);
  635. }
  636. &:nth-child(2) {
  637. margin-left: 10px;
  638. margin-right: 10px;
  639. }
  640. span {
  641. font-size: 12px;
  642. color: #000000;
  643. position: absolute;
  644. left: 50%;
  645. top: 50%;
  646. transform: translate(-50%, -50%) scale(0.8);
  647. }
  648. }
  649. }
  650. .temp-slider {
  651. position: relative;
  652. top: 31px;
  653. display: flex;
  654. height: 22px;
  655. flex: 1;
  656. padding: 0 24px;
  657. background: linear-gradient(
  658. 270deg,
  659. #ffbab6 0%,
  660. #ffe7d1 29.05%,
  661. #f1efff 62%,
  662. #c8d6ff 100%
  663. );
  664. border-radius: 16px;
  665. .temp-left,
  666. .temp-right {
  667. position: absolute;
  668. top: 50%;
  669. transform: translateY(-50%);
  670. font-family: "Persagy";
  671. font-style: normal;
  672. font-weight: 400;
  673. font-size: 12px;
  674. text-align: right;
  675. color: #626c78;
  676. }
  677. .temp-left {
  678. left: 0px;
  679. padding-left: 8px;
  680. }
  681. .temp-right {
  682. right: 0px;
  683. padding-right: 8px;
  684. text-align: left;
  685. }
  686. .slider-bar {
  687. position: absolute;
  688. width: 32px;
  689. left: 0;
  690. bottom: -4px;
  691. z-index: 333;
  692. .bar-temp {
  693. display: block;
  694. text-align: center;
  695. // width: 50px;
  696. padding-bottom: 4px;
  697. font-family: "Persagy";
  698. font-style: normal;
  699. font-weight: 400;
  700. font-size: 12px;
  701. line-height: 14px;
  702. color: #626c78;
  703. }
  704. .bar-circle {
  705. width: 32px;
  706. height: 32px;
  707. background: #fff;
  708. border-radius: 50%;
  709. box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.1),
  710. 0px 4px 10px rgba(0, 0, 0, 0.07);
  711. border-radius: 21px;
  712. z-index: 444;
  713. }
  714. }
  715. }
  716. .control-text {
  717. font-style: normal;
  718. font-weight: 600;
  719. font-size: 11px;
  720. line-height: 15px;
  721. color: #c4c4c4;
  722. padding: 10px 0 0 10px;
  723. }
  724. }
  725. .floor-control-padding {
  726. padding: 30px 20px;
  727. padding-top: 0px;
  728. height: 82px;
  729. }
  730. .line {
  731. border-top: 1px solid #e8ecf0;
  732. margin-bottom: 16px;
  733. }
  734. .light-main-control {
  735. padding-bottom: 15px;
  736. padding-left: 20px;
  737. padding-right: 15px;
  738. // line-height: 36px;
  739. display: flex;
  740. justify-content: space-between;
  741. text-align: right;
  742. div {
  743. width: 36px;
  744. }
  745. .main-color {
  746. width: 36px;
  747. height: 36px;
  748. // line-height: 36px;
  749. text-align: center;
  750. border-radius: 50%;
  751. background: #f7f9fa;
  752. img {
  753. width: 20px;
  754. height: 20px;
  755. margin-top: 8px;
  756. }
  757. }
  758. .switch-btn {
  759. margin-top: 6px;
  760. margin-right: 12px;
  761. }
  762. }
  763. .light-desc {
  764. padding-top: 10px;
  765. // padding-left: 5px;
  766. font-family: PingFang SC;
  767. font-size: 16px;
  768. line-height: 19px;
  769. color: #4d5262;
  770. }
  771. .light-right {
  772. position: relative;
  773. text-align: center;
  774. .switch-box {
  775. padding-top: 20px;
  776. padding-right: 15px;
  777. span {
  778. display: inline-block;
  779. font-family: "PingFang SC";
  780. font-style: normal;
  781. font-weight: 400;
  782. font-size: 14px;
  783. color: #2e3742;
  784. margin-left: 20px;
  785. // width: 60px;
  786. height: 32px;
  787. line-height: 32px;
  788. padding: 0 15px;
  789. background: #f1f4f6;
  790. border-radius: 21px;
  791. }
  792. .switch-item {
  793. &:hover {
  794. background: #e8ecf0;
  795. }
  796. &:active {
  797. background: #e8ecf0;
  798. }
  799. }
  800. }
  801. img {
  802. //width: 98px;
  803. height: 100px;
  804. }
  805. .switch-btn {
  806. position: absolute;
  807. right: -20px;
  808. bottom: 20px;
  809. }
  810. }
  811. .light-title {
  812. font-family: PingFang SC;
  813. padding-left: 5px;
  814. font-size: 16px;
  815. line-height: 19px;
  816. color: #4d5262;
  817. flex: none;
  818. order: 0;
  819. flex-grow: 0;
  820. margin: 5px 0px;
  821. }
  822. .light-status {
  823. font-family: PingFang SC;
  824. padding-left: 5px;
  825. font-size: 12px;
  826. line-height: 16px;
  827. color: #c4c4c4;
  828. flex: none;
  829. order: 1;
  830. flex-grow: 0;
  831. margin: 15px 0px;
  832. }
  833. .show-all {
  834. font-family: "PingFang SC";
  835. font-style: normal;
  836. font-weight: 400;
  837. font-size: 12px;
  838. line-height: 17px;
  839. padding-bottom: 15px;
  840. padding-top: 5px;
  841. color: #cccccc;
  842. text-align: center;
  843. .light-icon {
  844. font-size: 12px;
  845. padding-right: 10px;
  846. }
  847. }
  848. .line {
  849. border-top: 1px solid #e8ecf0;
  850. margin-top: 4px;
  851. margin-bottom: 16px;
  852. }
  853. .light-box {
  854. padding: 0 16px;
  855. font-size: 0;
  856. }
  857. .light-control {
  858. display: inline-block;
  859. width: 49%;
  860. vertical-align: middle;
  861. background: #f7f9fa;
  862. border-radius: 16px;
  863. padding-right: 16px;
  864. padding-left: 16px;
  865. padding-top: 13px;
  866. padding-bottom: 12px;
  867. margin-bottom: 12px;
  868. &:nth-child(2n - 1) {
  869. margin-right: 2%;
  870. }
  871. .control-top {
  872. display: flex;
  873. padding-bottom: 26px;
  874. justify-content: space-between;
  875. .control-temp {
  876. vertical-align: middle;
  877. span {
  878. display: block;
  879. font-family: "Persagy";
  880. font-style: normal;
  881. font-weight: 400;
  882. font-size: 22px;
  883. line-height: 22px;
  884. color: #1b144e;
  885. &:nth-child(1) {
  886. margin-bottom: 4px;
  887. sup {
  888. width: 12px;
  889. height: 15px;
  890. font-family: "Mulish";
  891. font-style: normal;
  892. font-weight: 400;
  893. font-size: 12px;
  894. line-height: 15px;
  895. color: #c4c4c4;
  896. }
  897. }
  898. &:nth-child(2) {
  899. font-family: "PingFang SC";
  900. font-style: normal;
  901. font-weight: 400;
  902. font-size: 12px;
  903. line-height: 17px;
  904. color: #c4c9cf;
  905. }
  906. }
  907. }
  908. .child-switch {
  909. display: inline-block;
  910. vertical-align: middle;
  911. }
  912. }
  913. .control-bottom {
  914. display: flex;
  915. justify-content: space-between;
  916. .control-title {
  917. font-family: PingFang SC;
  918. white-space: nowrap;
  919. overflow: hidden;
  920. text-overflow: ellipsis;
  921. font-weight: 500;
  922. font-size: 16px;
  923. line-height: 20px;
  924. color: #4d5262;
  925. }
  926. img {
  927. width: 20px;
  928. height: 20px;
  929. cursor: pointer;
  930. }
  931. }
  932. }
  933. </style>
  934. <style class="style" lang="scss">
  935. .light {
  936. .van-loading__spinner {
  937. color: $elActiveColor !important;
  938. }
  939. .van-switch__loading {
  940. top: 0;
  941. left: 0;
  942. width: 100%;
  943. height: 100%;
  944. line-height: 1;
  945. }
  946. .van-switch--disabled {
  947. opacity: 0.5;
  948. }
  949. }
  950. </style>