index.vue 25 KB

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