index.vue 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986
  1. <template>
  2. <div class="floor" v-if="floorHeatingList && floorHeatingList.length">
  3. <!--如果有子设备-->
  4. <div class="com-top">
  5. <div class="com-desc">
  6. <p class="com-top-title">地暖</p>
  7. <span class="com-top-temperature"
  8. >{{ realTemp ? realTemp : "--" }} <sup>℃</sup></span
  9. >
  10. </div>
  11. <div class="com-right">
  12. <img
  13. :src="
  14. isOpen
  15. ? parseImgUrl('page-officehome', 'heating-active.svg')
  16. : parseImgUrl('page-officehome', 'heating.svg')
  17. "
  18. alt=""
  19. />
  20. </div>
  21. </div>
  22. <div class="top-switch">
  23. <div
  24. class="top-nav"
  25. v-if="floorHeatingList && floorHeatingList.length > 1"
  26. >
  27. <span
  28. :class="navType == 'all' ? 'nav-active' : ''"
  29. @click="checkNav('all')"
  30. >
  31. 总控制
  32. </span>
  33. <span
  34. :class="navType == 'child' ? 'nav-active' : ''"
  35. @click="checkNav('child')"
  36. >
  37. 子设备
  38. </span>
  39. </div>
  40. <div v-else></div>
  41. <Switch
  42. class="switch-btn"
  43. :loading="loadingFlag"
  44. :disabled="loadingFlag"
  45. :model-value="isOpen"
  46. @click.stop="eqChangeSwitch('main', floorHeatingList[0])"
  47. inactive-color="rgba(196, 196, 196, 0.4)"
  48. />
  49. </div>
  50. <div
  51. class="com-control com-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.floorHeatingList = [data.equipList[0]];
  411. proxyData.formateDataStatus();
  412. proxyData.sliderInit();
  413. proxyData.startfloorHeathingStatus();
  414. })
  415. .catch(() => {
  416. proxyData.startfloorHeathingStatus();
  417. });
  418. },
  419. loadingTimer: 0,
  420. loading: false,
  421. // 计算loading时间
  422. setLoadingNumber() {
  423. let timer: any = setInterval(() => {
  424. proxyData.loadingTimer++;
  425. console.log(proxyData.loadingTimer);
  426. if (proxyData.loadingTimer >= 15) {
  427. clearInterval(timer);
  428. proxyData.loading = false;
  429. }
  430. }, 1000);
  431. },
  432. // 灯灯接口清除定时器
  433. clearFloorHeathingTimer() {
  434. clearTimeout(proxyData.floorHeathingStatus);
  435. proxyData.floorHeathingStatus = null;
  436. },
  437. // 定时刷新接口
  438. startfloorHeathingStatus(timerLen: any = 15000) {
  439. proxyData.clearFloorHeathingTimer();
  440. proxyData.floorHeathingStatus = setTimeout(() => {
  441. proxyData.getFloorHeatingList();
  442. }, timerLen);
  443. },
  444. });
  445. watch(
  446. [() => props, () => props.spaceId],
  447. (newProps: any, oldProps: any) => {
  448. if (newProps[0]) {
  449. proxyData.forceOverTimeFlag = newProps[0].forceOverTimeFlag;
  450. proxyData.seviceEquipmentList = newProps[0].seviceEquipmentList;
  451. }
  452. if (newProps[1] && oldProps[1] && newProps[1] != oldProps[1]) {
  453. // 空间id改变的重新获取值调用接口
  454. console.log("地暖的spaceId变化了");
  455. // 清除原始数据
  456. proxyData.floorHeatingList = [];
  457. proxyData.heatingData = {};
  458. proxyData.swiperIinit = false;
  459. proxyData.navType = "all";
  460. proxyData.spaceId = newProps[1];
  461. proxyData.clearFloorHeathingTimer();
  462. proxyData.getFloorHeatingList();
  463. }
  464. },
  465. {
  466. deep: true,
  467. immediate: true,
  468. }
  469. );
  470. onBeforeUnmount(() => {
  471. console.log("灯的组件销毁了--");
  472. proxyData.clearFloorHeathingTimer();
  473. });
  474. onMounted(() => {
  475. // proxyData.clearFloorHeathingTimer();
  476. proxyData.getFloorHeatingList();
  477. });
  478. return {
  479. ...toRefs(proxyData),
  480. };
  481. },
  482. });
  483. </script>
  484. <style lang="scss" scoped>
  485. .floor {
  486. width: 100%;
  487. background: #ffffff;
  488. box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.07), 0px 4px 10px rgba(0, 0, 0, 0.05);
  489. border-radius: 25px;
  490. margin: 15px 0px;
  491. }
  492. .light-main {
  493. padding-left: 20px;
  494. padding-bottom: 10px;
  495. padding-top: 10px;
  496. }
  497. .com-top {
  498. padding: 0 20px;
  499. padding-bottom: 10px;
  500. padding-top: 18px;
  501. display: flex;
  502. justify-content: space-between;
  503. .com-desc {
  504. position: relative;
  505. font-family: "PingFang SC";
  506. font-size: 16px;
  507. font-weight: 600;
  508. line-height: 22px;
  509. letter-spacing: 0em;
  510. padding-top: 8px;
  511. text-align: left;
  512. color: rgba(77, 82, 98, 1);
  513. .com-top-title {
  514. font-family: "PingFang SC";
  515. font-size: 16px;
  516. font-weight: 600;
  517. line-height: 22px;
  518. padding-bottom: 4px;
  519. letter-spacing: 0;
  520. text-align: left;
  521. color: rgba(77, 82, 98, 1);
  522. }
  523. .com-top-temperature {
  524. position: relative;
  525. display: inline-block;
  526. font-family: "Persagy";
  527. font-size: 32px;
  528. font-weight: 400;
  529. line-height: 39px;
  530. letter-spacing: 0px;
  531. text-align: right;
  532. color: rgba(27, 33, 41, 1);
  533. sup {
  534. position: absolute;
  535. font-family: "Persagy";
  536. top: 3px;
  537. // right: -12px;
  538. padding-left: 4px;
  539. font-size: 12px;
  540. font-weight: 400;
  541. line-height: 15px;
  542. letter-spacing: 0em;
  543. text-align: left;
  544. color: rgba(196, 196, 196, 1);
  545. }
  546. }
  547. .show-all {
  548. position: absolute;
  549. width: 110px;
  550. bottom: -8px;
  551. font-family: PingFang SC;
  552. font-size: 14px;
  553. line-height: 16px;
  554. color: #c4c4c4;
  555. margin: 0px 5px;
  556. span {
  557. font-size: 12px;
  558. }
  559. .light-icon {
  560. font-size: 12px;
  561. padding-right: 10px;
  562. }
  563. }
  564. }
  565. .com-right {
  566. position: relative;
  567. width: 106px;
  568. text-align: center;
  569. img {
  570. width: 106px;
  571. height: 62px;
  572. }
  573. }
  574. }
  575. .top-switch {
  576. display: flex;
  577. justify-content: space-between;
  578. padding: 8px 20px;
  579. padding-bottom: 16px;
  580. .top-nav {
  581. height: 28px;
  582. line-height: 28px;
  583. border-radius: 21px;
  584. background: #f1f4f6;
  585. span {
  586. box-sizing: border-box;
  587. display: inline-block;
  588. font-family: "PingFang SC";
  589. font-style: normal;
  590. font-weight: 400;
  591. font-size: 14px;
  592. padding: 5px 8px;
  593. height: 28px;
  594. line-height: 14px;
  595. color: #424c59;
  596. }
  597. .nav-active {
  598. background: #fff;
  599. border: 1px solid #e1e5eb;
  600. border-radius: 21px;
  601. }
  602. }
  603. // .switch-btn {
  604. // margin-top: 0;
  605. // }
  606. }
  607. .com-control {
  608. padding: 10px;
  609. border-top: 1px solid #e8ecf0;
  610. .control-box {
  611. display: flex;
  612. justify-content: space-between;
  613. }
  614. .volume-box {
  615. padding: 10px;
  616. color: #c4c4c4;
  617. font-size: 12px;
  618. .text {
  619. padding-top: 5px;
  620. font-style: normal;
  621. font-weight: 600;
  622. font-size: 11px;
  623. }
  624. .number {
  625. span {
  626. display: inline-block;
  627. vertical-align: middle;
  628. color: #c4c4c4;
  629. padding-right: 5px;
  630. }
  631. .number-active {
  632. font-family: "Persagy";
  633. font-style: normal;
  634. font-weight: 500;
  635. font-size: 22px;
  636. line-height: 24px;
  637. color: #4d5262 !important;
  638. }
  639. }
  640. .model {
  641. font-size: 14px;
  642. color: #1f2429;
  643. }
  644. }
  645. .volume-icon {
  646. .icon-item {
  647. position: relative;
  648. display: inline-block;
  649. width: 42px;
  650. height: 42px;
  651. background: rgba(196, 196, 196, 0.2);
  652. border-radius: 50%;
  653. img {
  654. width: 20px;
  655. height: 20px;
  656. position: absolute;
  657. left: 50%;
  658. top: 50%;
  659. transform: translate(-50%, -50%);
  660. }
  661. &:nth-child(2) {
  662. margin-left: 10px;
  663. margin-right: 10px;
  664. }
  665. span {
  666. font-size: 12px;
  667. color: #000000;
  668. position: absolute;
  669. left: 50%;
  670. top: 50%;
  671. transform: translate(-50%, -50%) scale(0.8);
  672. }
  673. }
  674. }
  675. .temp-slider {
  676. position: relative;
  677. top: 31px;
  678. display: flex;
  679. height: 22px;
  680. flex: 1;
  681. padding: 0 24px;
  682. background: linear-gradient(
  683. 270deg,
  684. #ffbab6 0%,
  685. #ffe7d1 29.05%,
  686. #f1efff 62%,
  687. #c8d6ff 100%
  688. );
  689. border-radius: 16px;
  690. .temp-left,
  691. .temp-right {
  692. position: absolute;
  693. top: 50%;
  694. transform: translateY(-50%);
  695. font-family: "Persagy";
  696. font-style: normal;
  697. font-weight: 400;
  698. font-size: 12px;
  699. text-align: right;
  700. color: #626c78;
  701. }
  702. .temp-left {
  703. left: 0px;
  704. padding-left: 8px;
  705. }
  706. .temp-right {
  707. right: 0px;
  708. padding-right: 8px;
  709. text-align: left;
  710. }
  711. .slider-bar {
  712. position: absolute;
  713. width: 32px;
  714. left: 0;
  715. bottom: -4px;
  716. z-index: 333;
  717. .bar-temp {
  718. display: block;
  719. text-align: center;
  720. // width: 50px;
  721. padding-bottom: 4px;
  722. font-family: "Persagy";
  723. font-style: normal;
  724. font-weight: 400;
  725. font-size: 12px;
  726. line-height: 14px;
  727. color: #626c78;
  728. }
  729. .bar-circle {
  730. width: 32px;
  731. height: 32px;
  732. background: #fff;
  733. border-radius: 50%;
  734. box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.1),
  735. 0px 4px 10px rgba(0, 0, 0, 0.07);
  736. border-radius: 21px;
  737. z-index: 444;
  738. }
  739. }
  740. }
  741. .control-text {
  742. font-style: normal;
  743. font-weight: 600;
  744. font-size: 11px;
  745. line-height: 15px;
  746. color: #c4c4c4;
  747. padding: 10px 0 0 10px;
  748. }
  749. }
  750. .com-control-padding {
  751. padding: 30px 20px;
  752. padding-top: 0px;
  753. height: 82px;
  754. }
  755. .line {
  756. border-top: 1px solid #e8ecf0;
  757. margin-bottom: 16px;
  758. }
  759. .light-main-control {
  760. padding-bottom: 15px;
  761. padding-left: 20px;
  762. padding-right: 15px;
  763. // line-height: 36px;
  764. display: flex;
  765. justify-content: space-between;
  766. text-align: right;
  767. div {
  768. width: 36px;
  769. }
  770. .main-color {
  771. width: 36px;
  772. height: 36px;
  773. // line-height: 36px;
  774. text-align: center;
  775. border-radius: 50%;
  776. background: #f7f9fa;
  777. img {
  778. width: 20px;
  779. height: 20px;
  780. margin-top: 8px;
  781. }
  782. }
  783. .switch-btn {
  784. margin-top: 6px;
  785. margin-right: 12px;
  786. }
  787. }
  788. .light-desc {
  789. padding-top: 10px;
  790. // padding-left: 5px;
  791. font-family: PingFang SC;
  792. font-size: 16px;
  793. line-height: 19px;
  794. color: #4d5262;
  795. }
  796. .light-right {
  797. position: relative;
  798. text-align: center;
  799. .switch-box {
  800. padding-top: 20px;
  801. padding-right: 15px;
  802. span {
  803. display: inline-block;
  804. font-family: "PingFang SC";
  805. font-style: normal;
  806. font-weight: 400;
  807. font-size: 14px;
  808. color: #2e3742;
  809. margin-left: 20px;
  810. // width: 60px;
  811. height: 32px;
  812. line-height: 32px;
  813. padding: 0 15px;
  814. background: #f1f4f6;
  815. border-radius: 21px;
  816. }
  817. .switch-item {
  818. &:hover {
  819. background: #e8ecf0;
  820. }
  821. &:active {
  822. background: #e8ecf0;
  823. }
  824. }
  825. }
  826. img {
  827. //width: 98px;
  828. height: 100px;
  829. }
  830. .switch-btn {
  831. position: absolute;
  832. right: -20px;
  833. bottom: 20px;
  834. }
  835. }
  836. .light-title {
  837. font-family: PingFang SC;
  838. padding-left: 5px;
  839. font-size: 16px;
  840. line-height: 19px;
  841. color: #4d5262;
  842. flex: none;
  843. order: 0;
  844. flex-grow: 0;
  845. margin: 5px 0px;
  846. }
  847. .light-status {
  848. font-family: PingFang SC;
  849. padding-left: 5px;
  850. font-size: 12px;
  851. line-height: 16px;
  852. color: #c4c4c4;
  853. flex: none;
  854. order: 1;
  855. flex-grow: 0;
  856. margin: 15px 0px;
  857. }
  858. .show-all {
  859. font-family: "PingFang SC";
  860. font-style: normal;
  861. font-weight: 400;
  862. font-size: 12px;
  863. line-height: 17px;
  864. padding-bottom: 15px;
  865. padding-top: 5px;
  866. color: #cccccc;
  867. text-align: center;
  868. .light-icon {
  869. font-size: 12px;
  870. padding-right: 10px;
  871. }
  872. }
  873. .line {
  874. border-top: 1px solid #e8ecf0;
  875. margin-top: 4px;
  876. margin-bottom: 16px;
  877. }
  878. .light-box {
  879. padding: 0 16px;
  880. font-size: 0;
  881. }
  882. .light-control {
  883. display: inline-block;
  884. width: 49%;
  885. vertical-align: middle;
  886. background: #f7f9fa;
  887. border-radius: 16px;
  888. padding-right: 16px;
  889. padding-left: 16px;
  890. padding-top: 13px;
  891. padding-bottom: 12px;
  892. margin-bottom: 12px;
  893. &:nth-child(2n - 1) {
  894. margin-right: 2%;
  895. }
  896. .control-top {
  897. display: flex;
  898. padding-bottom: 26px;
  899. justify-content: space-between;
  900. .control-temp {
  901. vertical-align: middle;
  902. span {
  903. display: block;
  904. font-family: "Persagy";
  905. font-style: normal;
  906. font-weight: 400;
  907. font-size: 22px;
  908. line-height: 22px;
  909. color: #1b144e;
  910. &:nth-child(1) {
  911. margin-bottom: 4px;
  912. sup {
  913. width: 12px;
  914. height: 15px;
  915. font-family: "Mulish";
  916. font-style: normal;
  917. font-weight: 400;
  918. font-size: 12px;
  919. line-height: 15px;
  920. color: #c4c4c4;
  921. }
  922. }
  923. &:nth-child(2) {
  924. font-family: "PingFang SC";
  925. font-style: normal;
  926. font-weight: 400;
  927. font-size: 12px;
  928. line-height: 17px;
  929. color: #c4c9cf;
  930. }
  931. }
  932. }
  933. .child-switch {
  934. display: inline-block;
  935. vertical-align: middle;
  936. }
  937. }
  938. .control-bottom {
  939. display: flex;
  940. justify-content: space-between;
  941. .control-title {
  942. font-family: "PingFang SC";
  943. padding-right: 8px;
  944. white-space: nowrap;
  945. overflow: hidden;
  946. text-overflow: ellipsis;
  947. font-weight: 500;
  948. font-size: 16px;
  949. line-height: 20px;
  950. color: #4d5262;
  951. }
  952. img {
  953. width: 20px;
  954. height: 20px;
  955. cursor: pointer;
  956. }
  957. }
  958. }
  959. </style>