123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963 |
- <template>
- <div class="air">
- <div class="air-top">
- <div class="air-desc">
- <p class="air-title">空调<i>手动模式</i></p>
- <p class="air-temperature">
- {{ airTemp ? airTemp : "--" }}
- <sup>℃</sup>
- </p>
- <div class="show-all" @click.stop="showAll">
- <van-icon :name="lightIcon" class="light-icon" />
- <span>显示全部</span>
- </div>
- </div>
- <div class="air-right">
- <img v-if="airData.airImg" :src="airData.airImg" alt="" />
- <van-loading style="padding-top: 20px" v-else />
- <Switch
- class="switch-btn"
- :loading="loadingAir || firstLoadingAir"
- :disabled="loadingAir || firstLoadingAir"
- inactive-color="rgba(196, 196, 196, 0.4)"
- @click="airChange"
- :model-value="airData.isOpen"
- />
- </div>
- </div>
- <!--温度调节-->
- <template v-if="!showChild">
- <div class="air-control air-control-padding">
- <div class="control-box">
- <div class="temp-text">{{ airData.minTempSet }}℃</div>
- <div class="temp-slider" id="sliderId">
- <div
- class="item"
- v-for="(item, index) in 5"
- :key="'bar' + index"
- ></div>
- <div class="slider-bar" id="barId">
- <div class="bar-temp">{{ realTemp }}℃</div>
- <div class="bar-circle" id="handId"></div>
- </div>
- </div>
- <div class="temp-text">{{ airData.maxTempSet }}℃</div>
- </div>
- <div class="control-text">温度设定</div>
- </div>
- <div class="air-control">
- <div class="control-box">
- <div class="volume-box">
- <div class="number">
- <span
- v-for="(item, index) in windGearArr"
- :class="airData.gear === item ? 'number-active' : ''"
- :key="'volume' + index"
- >{{ item }}</span
- >
- </div>
- <div class="text">风量调节</div>
- </div>
- <div class="volume-icon">
- <div class="icon-item" @click="changeZongAir('gear', 'windLow')">
- <img :src="parseImgUrl('ipdImages', 'wind_small.png')" />
- </div>
- <div class="icon-item" @click="changeZongAir('gear', 'windUp')">
- <img :src="parseImgUrl('ipdImages', 'wind_big.png')" />
- </div>
- <div
- class="icon-item"
- @click="changeZongAir('gear', 'auto')"
- :class="airData.isAutoGear ? 'active-color' : ''"
- >
- <span> AUTO</span>
- </div>
- </div>
- </div>
- </div>
- <div class="air-control">
- <div class="control-box">
- <div class="volume-box">
- <div class="model">
- {{
- airData.workMode == 1
- ? "制冷"
- : airData.workMode == 2
- ? "制热"
- : "通风"
- }}
- </div>
- <div class="text">模式设定</div>
- </div>
- <div class="volume-icon">
- <div
- class="icon-item"
- :class="airData.workMode === 2 ? 'active-color' : ''"
- @click="changeZongAir('mode', 2)"
- >
- <img
- :src="
- airData.workMode === 2
- ? parseImgUrl('ipdImages', 'airsunred.svg')
- : parseImgUrl('ipdImages', 'airsunblack.svg')
- "
- />
- </div>
- <div
- class="icon-item"
- :class="airData.workMode === 1 ? 'active-color' : ''"
- @click="changeZongAir('mode', 1)"
- >
- <img
- :src="
- airData.workMode === 1
- ? parseImgUrl('ipdImages', 'aircoldblue.svg')
- : parseImgUrl('ipdImages', 'aircoldblack.svg')
- "
- />
- </div>
- <div
- class="icon-item"
- :class="airData.workMode === 3 ? 'active-color' : ''"
- @click="changeZongAir('mode', 3)"
- >
- <img
- :src="
- airData.workMode === 3
- ? parseImgUrl('ipdImages', 'aircloudgreen.svg')
- : parseImgUrl('ipdImages', 'aircloudblack.svg')
- "
- />
- </div>
- </div>
- </div>
- </div>
- </template>
- <!--子设备-->
- <div class="air-child" v-if="showChild">
- <div
- class="child-control-box"
- :key="'child' + index"
- v-for="(childItem, index) in equipList"
- >
- <div class="open-title">
- <span>{{ childItem.localName }}</span>
- <Switch
- class="child-switch"
- inactive-color="rgba(196, 196, 196, 0.4)"
- size="25px"
- />
- </div>
- <div class="adjust-box">
- <div class="adjust-item">
- <van-icon
- name="arrow-up"
- @click="changeItemAir('temp', childItem)"
- class="adjust-icon"
- />
- <span class="adjust-text">{{ childItem.tempSet }}</span>
- <van-icon name="arrow-down" class="adjust-icon" />
- <span class="adjust-title">温度</span>
- </div>
- <div class="adjust-item">
- <van-icon name="arrow-up" class="adjust-icon" />
- <span class="adjust-text">{{ childItem.gear }}</span>
- <van-icon name="arrow-down" class="adjust-icon" />
- <span class="adjust-title">档位</span>
- </div>
- <div class="adjust-item">
- <van-icon name="arrow-up" class="adjust-icon" />
- <span class="adjust-text">
- {{
- childItem.workMode == 1
- ? "制冷"
- : childItem.workMode == 2
- ? "制热"
- : "通风"
- }}
- </span>
- <van-icon name="arrow-down" class="adjust-icon" />
- <span class="adjust-title">模式</span>
- </div>
- </div>
- </div>
- </div>
- <!-- v-if="cotrolLoading" -->
- <!-- <div class="loading-box" v-if="cotrolLoading">
- <van-loading style="padding-top: 20px" />
- </div> -->
- </div>
- </template>
-
- <script lang="ts">
- import {
- defineComponent,
- onMounted,
- reactive,
- toRefs,
- computed,
- watch,
- onUnmounted,
- onBeforeMount,
- onBeforeUnmount,
- nextTick,
- } from "vue";
- import { Switch, Dialog, Toast } from "vant";
- import { swiper } from "@/utils/swiper";
- import { querySpaceConditioners, setSpaceCondtioners } from "@/apis/envmonitor";
- import { parseImgUrl, setQueryConfig } from "@/utils";
- import any = jasmine.any;
- export default defineComponent({
- props: {
- temperature: {
- // 空调基本信息
- type: Number,
- default: () => 0,
- },
- hasAir: {
- // 有无空调
- type: Boolean,
- default: () => false,
- },
- airVolumes: {
- // 风量信息
- type: Array,
- default: () => [],
- },
- projectId: {
- type: String,
- default: () => "",
- },
- spaceId: {
- type: String,
- default: () => "",
- },
- userIsControl: {
- type: Boolean,
- default: () => false,
- },
- forceOverTimeFlag: {
- type: Boolean,
- default: () => false,
- },
- },
- components: {
- Switch,
- [Dialog.Component.name]: Dialog.Component,
- },
- setup(props, contx) {
- const propsVal = props;
- let airData: any = {
- avg: "", // 算法调节温度(目标值)
- icon: 1, // 固定框文案ID 7 为关机,其它都是开机
- spaceStatus: "", // 固定框文案展示
- notice: "", // 弹框文案展示
- mode: 0, // 模式
- tempSet: 0, // 温度
- maxTempSet: 32,
- minTempSet: 16,
- isAutoGear: 0,
- workMode: 0, //1=cold(制冷);2=hot(制热);3=wind(通风)
- gear: 0, // 风量
- isOpen: false, // 空调开关 true 是开
- };
- const feedbackTimer: any = null;
- const airTimer: any = null;
- const domAirOpeen: any = false;
- let realTemp: any = 16;
- let windGearArr: any = [0, 1, 2, 3];
- let equipList: any = [];
- const proxyData = reactive({
- equipList: equipList,
- cotrolLoading: false,
- loadingTimer: 0,
- airTemp: 0, // 设备真实温度
- loadingAir: false,
- windGearArr: windGearArr, // 风量3/5个档位
- lightIcon: "arrow-down",
- showChild: false,
- realTemp: realTemp,
- temperature: props.temperature,
- userIsControl: props.userIsControl,
- forceOverTimeFlag: props.forceOverTimeFlag,
- firstLoadingAir: true,
- domAirOpeen: domAirOpeen,
- feedbackTimer: feedbackTimer,
- parseImgUrl: parseImgUrl,
- part: 1,
- airData: airData,
- modeName: "",
- showAirVolumeBtn: false, // 是否展示风量调节按钮
- showDialog: false,
- airTimer: airTimer,
- airSetText: {
- // 空调反馈文案
- notice: "",
- remark: [],
- nowImg: "",
- toWhere: "",
- designTemperature: 0,
- },
- // 点击展示所有的登录
- showAll() {
- proxyData.showChild = !proxyData.showChild;
- if (proxyData.lightIcon === "arrow-up") {
- proxyData.lightIcon = "arrow-down";
- } else {
- proxyData.lightIcon = "arrow-up";
- }
- },
- // 设置温度条的位置
- setBarNowPerstion() {
- let left: any =
- ((proxyData.airTemp - proxyData.airData.minTempSet) / 0.5) *
- proxyData.part;
- left = Math.floor(left);
- proxyData.realTemp = proxyData.airTemp;
- let barBox: any = document.querySelector("#barId");
- barBox.style.left = left + "px";
- },
- // 滑动
- endBoxSwiper() {
- let handBox: any = document.querySelector("#handId");
- let barBox: any = document.querySelector("#barId");
- let sliderBox: any = document.querySelector("#sliderId");
- let isMove: any = false;
- let barLeft: any = 0;
- let sliderWidth: any = sliderBox.offsetWidth;
- let barWidth: any = barBox.offsetWidth;
- let tempPart =
- (proxyData.airData.maxTempSet - proxyData.airData.minTempSet) / 20;
- let part: any = 0.5 / (tempPart / (Math.floor(sliderWidth) / 22));
- proxyData.part = part;
- handBox.addEventListener("touchstart", function (e: any) {
- barLeft = isNaN(parseInt(barBox.style.left))
- ? 0
- : parseInt(barBox.style.left);
- isMove = false;
- });
- handBox.addEventListener("touchend", function (e: any) {
- proxyData.changeZongAir("temp", proxyData.realTemp);
- });
- swiper(handBox, {
- swipeLeft: function (e: any) {
- 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 =
- proxyData.airData.minTempSet + Math.ceil(left / part) * 0.5;
- },
- swipeRight: function (e: any) {
- barLeft = Math.abs(barLeft);
- let moveRealX: any = Math.abs(e.mation.moveX - e.mation.startX);
- let left: any = barLeft + moveRealX;
- left = left > sliderWidth ? sliderWidth - barWidth : left;
- barBox.style.left = left + "px";
- proxyData.realTemp =
- proxyData.airData.minTempSet + Math.ceil(left / part) * 0.5;
- if (proxyData.realTemp > proxyData.airData.maxTempSet) {
- proxyData.realTemp = proxyData.airData.maxTempSet;
- }
- },
- });
- },
- // 格式化模式
- formateModel(model: any) {
- if (model) {
- if (model === 1) {
- proxyData.modeName = "制冷";
- } else if (model === 2) {
- proxyData.modeName = "制热";
- } else if (model === 3) {
- proxyData.modeName = "通风";
- } else if (model === 4) {
- proxyData.modeName = "除湿";
- } else {
- proxyData.modeName = "";
- }
- } else {
- proxyData.modeName = "";
- }
- },
- // 定时获取空调状态
- getAirInfoToTimer(timerLong: any = 3000) {
- if (proxyData.airTimer) {
- clearTimeout(proxyData.airTimer);
- }
- proxyData.airTimer = setTimeout(function () {
- proxyData.getAirInfo();
- }, timerLong);
- },
- // 计算loading时间
- setLoadingNumber() {
- let timer: any = setInterval(() => {
- proxyData.loadingTimer++;
- if (proxyData.loadingTimer > 15) {
- clearInterval(timer);
- proxyData.loadingAir = false;
- proxyData.getAirInfoToTimer(3000);
- }
- }, 1000);
- },
- // 格式化空调数据
- formatAirData(btnType: any, text: any) {
- let obj: any = {};
- if (btnType == "temp") {
- obj.codeKey = "tempSetCode";
- obj.value = text;
- }
- if (btnType == "gear" && text == "windLow") {
- //降挡
- if (proxyData.airData.gear > 1) {
- proxyData.airData.gear--;
- proxyData.airData.isAutoGear = 0;
- obj.value = proxyData.airData.gear;
- obj.codeKey = "gearCode";
- } else {
- return;
- }
- }
- if (btnType == "gear" && text == "windUp") {
- //升档
- if (proxyData.airData.gear < 3) {
- proxyData.airData.gear++;
- proxyData.airData.isAutoGear = 0;
- obj.value = proxyData.airData.gear;
- obj.codeKey = "gearCode";
- } else {
- return;
- }
- }
- if (btnType == "gear" && text == "auto") {
- proxyData.airData.isAutoGear == 1 ? 0 : 1;
- obj.value = proxyData.airData.isAutoGear ? 4 : proxyData.airData.gear;
- obj.codeKey = "gearCode";
- }
- if (btnType == "mode") {
- proxyData.airData.workMode = text;
- obj.codeKey = "modeSetCode";
- obj.value = text;
- }
- return obj;
- },
- /**
- * 加载loading
- */
- loadingStart() {
- proxyData.cotrolLoading = true;
- },
- /**
- * 结束
- */
- loadinngEnd() {
- proxyData.cotrolLoading = false;
- },
- // 子设备降低温度
- changeItemAir(btnType: any, childItem: any) {
- proxyData.loadingStart();
- if (btnType === "temp") {
- if (childItem.tempSet <= proxyData.airData.minTempSet) {
- return;
- }
- childItem.tempSet = childItem.tempSet - 0.5;
- let obj: any = {
- id: childItem.id, //类型:String 必有字段 备注:设备id
- code: childItem.tempSetCode, //类型:String 必有字段 备注:编码 EquipSwtichSet
- value: childItem.tempSet, //类型:String 必有字段 备注:值 0
- };
- }
- if (!proxyData.cotrolLoading) {
- }
- },
- // 改变设备状态
- setSpaceCondtioners(data: any) {
- setSpaceCondtioners(data)
- .then((res) => {
- // proxyData.setLoadingNumber();
- proxyData.loadinngEnd();
- })
- .catch(() => {
- // proxyData.setLoadingNumber();
- proxyData.loadinngEnd();
- });
- },
- // 改变空调状态
- changeZongAir(btnType: any, text: any) {
- if (!this.airData.isOpen) return;
- let equpObj: any = proxyData.formatAirData(btnType, text);
- if (equpObj.value) {
- let data: any = [];
- proxyData.equipList.map((item: any) => {
- let obj: any = {
- id: item.id, //类型:String 必有字段 备注:设备id
- code: item[equpObj.codeKey], //类型:String 必有字段 备注:编码 EquipSwtichSet
- value: equpObj.value, //类型:String 必有字段 备注:值 0
- };
- data.push(obj);
- });
- console.log("设备数据处理---");
- console.log(data);
- if (!proxyData.cotrolLoading) {
- proxyData.loadingStart();
- // 调整设备状态
- proxyData.setSpaceCondtioners(data);
- }
- }
- },
- // 总控制改变空调状态
- airChange() {
- // 先不更新状态等确认框弹出后再更新状
- proxyData.airData.isOpen = !proxyData.airData.isOpen;
- proxyData.loadingAir = true;
- proxyData.loadingTimer = 0;
- let data: any = [];
- proxyData.equipList.map((item: any) => {
- let obj: any = {
- id: item.id, //类型:String 必有字段 备注:设备id
- code: item.switchCode, //类型:String 必有字段 备注:编码 EquipSwtichSet
- value: proxyData.airData.isOpen ? "1" : "0", //类型:String 必有字段 备注:值 0
- };
- data.push(obj);
- });
- clearTimeout(proxyData.airTimer);
- proxyData.setLoadingNumber();
- // 设备状态处理
- proxyData.setSpaceCondtioners(data);
- },
- // 空调信息airTemp
- getAirInfo() {
- const paramObj = {
- // // projectId: props.projectId, //'Pj1101080255'
- // projectId: "Pj1101080255",
- spaceId: "Sp110108025564f438d7fef64eea8202a6462f1bbcce",
- // spaceId: props.spaceId,//'Sp110108025564f438d7fef64eea8202a6462f1bbcce' 空间id
- };
- //wx.showLoading();
- let str: any = setQueryConfig(paramObj);
- querySpaceConditioners(str)
- .then((res) => {
- let data: any = res.data || {};
- proxyData.firstLoadingAir = false;
- proxyData.loadingAir = false;
- proxyData.airTemp = data.tempSet;
- proxyData.airData.maxTempSet = data.maxTempSet;
- proxyData.airData.minTempSet = data.minTempSet;
- proxyData.airData.isOpen = data.runStatus ? true : false;
- proxyData.airData.isAutoGear = data.isAutoGear;
- proxyData.airData.gear = data.gear;
- proxyData.airData.workMode = data.workMode;
- proxyData.equipList = data.equipList;
- // 设置当前温度的位置
- proxyData.setBarNowPerstion();
- if (proxyData.airData.isOpen) {
- proxyData.airData.airImg = parseImgUrl(
- "page-officehome",
- "openair.png"
- );
- } else {
- proxyData.airData.airImg = parseImgUrl(
- "page-officehome",
- "air_close.png"
- );
- }
- if (data.equipList && data.equipList.length > 1) {
- }
- proxyData.getAirInfoToTimer(3000);
- })
- .catch(() => {});
- },
- });
- nextTick(() => {
- proxyData.endBoxSwiper();
- }),
- watch(props, (newProps: any) => {
- if (newProps.spaceId) {
- }
- proxyData.temperature = props.temperature;
- proxyData.userIsControl = newProps.userIsControl;
- proxyData.forceOverTimeFlag = newProps.forceOverTimeFlag;
- });
- onBeforeUnmount(() => {
- if (proxyData.airTimer) {
- clearTimeout(proxyData.airTimer);
- proxyData.airTimer = null;
- }
- if (proxyData.feedbackTimer) {
- clearTimeout(proxyData.feedbackTimer);
- proxyData.feedbackTimer = null;
- }
- });
- onMounted(() => {
- proxyData.getAirInfo();
- // 获取空调信息
- });
- return {
- ...toRefs(proxyData),
- };
- },
- });
- </script>
- <style lang="scss" scoped>
- .air {
- position: relative;
- 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;
- .loading-box {
- position: absolute;
- left: 50%;
- top: 50%;
- transform: translate(-50%, -50%);
- width: 100%;
- height: 100%;
- background: rgba(#000000, 0.3);
- box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.07),
- 0px 4px 10px rgba(0, 0, 0, 0.05);
- text-align: center;
- z-index: 999;
- // line-height: 50px;
- }
- .active-color {
- background: $elActiveColor !important;
- span {
- color: #fff !important;
- }
- }
- }
- .air-child {
- width: 100%;
- .child-control-box {
- display: inline-block;
- width: 50%;
- justify-content: space-between;
- padding: 20px 10px 10px 20px;
- border-bottom: 1px solid rgba(196, 196, 196, 0.4);
- &:nth-child(2n + 1) {
- border-right: 1px solid rgba(196, 196, 196, 0.4);
- }
- .open-title {
- width: 100%;
- font-size: 14px;
- height: 25px;
- line-height: 25px;
- display: flex;
- justify-content: space-between;
- margin-bottom: 10px;
- span {
- display: inline-block;
- width: calc(100% - 50px);
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
- .child-switch {
- height: 20px;
- width: 50px;
- }
- }
- .adjust-box {
- box-sizing: border-box;
- padding-right: 10px;
- display: flex;
- justify-content: space-between;
- font-size: 19px;
- .adjust-item {
- // flex: 1;
- width: 40px;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- text-align: center;
- .adjust-icon {
- display: inline-block;
- flex: 1;
- }
- .adjust-text {
- flex: 1;
- padding: 20px 0;
- }
- .adjust-title {
- padding-top: 10px;
- font-size: 18px;
- }
- }
- }
- }
- }
- .air-top {
- padding-left: 20px;
- padding-bottom: 20px;
- display: flex;
- justify-content: space-between;
- .air-desc {
- position: relative;
- flex: 1 157px;
- padding-top: 10px;
- font-family: PingFang SC;
- font-size: 16px;
- line-height: 19px;
- color: #4d5262;
- flex: none;
- flex-grow: 0;
- margin: 5px 0px;
- min-height: 100px;
- .air-title {
- font-family: PingFang SC;
- padding-left: 5px;
- font-size: 16px;
- line-height: 20px;
- color: #4d5262;
- padding-bottom: 10px;
- i {
- display: inline-block;
- font-size: 12px;
- transform: scale(0.9);
- font-style: normal;
- padding-left: 5px;
- color: #c4c4c4;
- }
- }
- .air-temperature {
- display: inline-block;
- font-family: "Montserrat";
- font-style: normal;
- font-weight: normal;
- font-size: 32px;
- line-height: 32px;
- flex: none;
- order: 0;
- flex-grow: 0;
- margin: 0px 4px;
- sup {
- font-family: Mulish;
- font-style: normal;
- font-weight: 800;
- font-size: 12px;
- line-height: 15px;
- }
- }
- .show-all {
- position: absolute;
- bottom: -8px;
- font-family: PingFang SC;
- font-size: 14px;
- line-height: 16px;
- color: #c4c4c4;
- margin: 0px 5px;
- span {
- font-size: 12px;
- }
- .light-icon {
- font-size: 12px;
- padding-right: 10px;
- }
- }
- }
- .air-right {
- position: relative;
- width: 157px;
- text-align: center;
- img {
- width: 147px;
- height: 110px;
- }
- .switch-btn {
- position: absolute;
- z-index: 111;
- bottom: -5px;
- right: 25px;
- }
- }
- }
- .air-control {
- padding: 10px;
- border-top: 1px solid rgba(196, 196, 196, 0.4);
- .control-box {
- display: flex;
- justify-content: space-between;
- }
- .volume-box {
- padding: 10px;
- color: #c4c4c4;
- font-size: 12px;
- .text {
- padding-top: 5px;
- }
- .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-text {
- height: 20px;
- line-height: 20px;
- font-family: "Montserrat";
- font-style: normal;
- font-weight: 500;
- font-size: 11px;
- color: #c4c4c4;
- padding: 0 5px;
- }
- .temp-slider {
- position: relative;
- display: flex;
- height: 20px;
- flex: 1;
- border-radius: 5px;
- .item {
- height: 20px;
- flex: 1;
- font-size: 0;
- &:nth-child(1) {
- background: #5e8bcf;
- border-radius: 5px 0 0 5px;
- }
- &:nth-child(2) {
- background: #9fb7cd;
- }
- &:nth-child(3) {
- background: #f3f3f3;
- }
- &:nth-child(4) {
- background: #ff9882;
- }
- &:nth-child(5) {
- background: #e5574f;
- border-radius: 0 5px 5px 0;
- }
- }
- .slider-bar {
- position: absolute;
- width: 25px;
- left: 0;
- bottom: -2px;
- z-index: 333;
- .bar-temp {
- padding-bottom: 10px;
- font-size: 12px;
- color: #1f2429;
- }
- .bar-circle {
- width: 25px;
- height: 25px;
- 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;
- }
- }
- .air-control-padding {
- padding-top: 35px;
- padding-bottom: 15px;
- }
- </style>
- <style lang="scss">
- .air {
- .loading-box {
- .van-loading {
- position: absolute;
- left: 50%;
- top: 50%;
- transform: translate(-50%, -50%);
- }
- }
- .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;
- }
- .child-control-box {
- .child-switch {
- .van-switch__node {
- width: 20px !important;
- height: 20px !important;
- }
- }
- }
- }
- </style>
-
|