|
@@ -1,212 +1,268 @@
|
|
|
<template>
|
|
|
- <div class="more-box">
|
|
|
- <div class="light-more-top">
|
|
|
- <div class="left">
|
|
|
- <div class="light-box">
|
|
|
- <img :src="parseImgUrl('taiguv1/envmonitor', 'active/lamp.svg')" alt="" />
|
|
|
+ <div class="more-box">
|
|
|
+ <div class="light-more-top">
|
|
|
+ <div class="left">
|
|
|
+ <div class="light-box">
|
|
|
+ <img
|
|
|
+ :src="LampsStatus === '全部关闭' ? lampCloseIcon:lampOpenIcon"
|
|
|
+ alt=""
|
|
|
+ :style="LampsStatus !== '全部关闭' ? {width: '58px',
|
|
|
+ height: '62px'} : ''"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="light-name">{{ LampsStatus }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <div
|
|
|
+ class="control"
|
|
|
+ @click="handle('allOpen')"
|
|
|
+ >全开</div>
|
|
|
+ <div
|
|
|
+ class="control"
|
|
|
+ @click="handle('allClose')"
|
|
|
+ >全关</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="light-name">光照</div>
|
|
|
- </div>
|
|
|
- <div class="right">
|
|
|
- <div class="control">全开</div>
|
|
|
- <div class="control">全关</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="light-bottom">
|
|
|
- <div
|
|
|
- class="item-box"
|
|
|
- :class="item.isOpen ? 'light-box-active ' : ''"
|
|
|
- v-for="(item, index) in childLights"
|
|
|
- >
|
|
|
- <div class="name">{{ item.name }}</div>
|
|
|
- <Switch
|
|
|
- class="switch-btn"
|
|
|
- inactive-color="rgba(0, 0, 0, 0.08)"
|
|
|
- v-model="item.isOpen"
|
|
|
- />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div
|
|
|
+ class="light-middle"
|
|
|
+ v-if="LampsStatus !== '全部关闭'"
|
|
|
+ >
|
|
|
+ <div>色温、亮度</div>
|
|
|
+ </div>
|
|
|
+ <div class="light-bottom">
|
|
|
+ <div
|
|
|
+ class="item-box"
|
|
|
+ :class="item.isOpen ? 'light-box-active ' : ''"
|
|
|
+ v-for="(item, index) in childLights"
|
|
|
+ >
|
|
|
+ <div class="name">{{ item.name }}</div>
|
|
|
+ <Switch
|
|
|
+ class="switch-btn"
|
|
|
+ inactive-color="rgba(0, 0, 0, 0.08)"
|
|
|
+ v-model="item.isOpen"
|
|
|
+ @click="handleChildLight(item)"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts">
|
|
|
+import lampCloseIcon from "@/assets/taiguv1/svg/lamp_close_icon.svg";
|
|
|
+import lampOpenIcon from "@/assets/taiguv1/svg/lamp_open_p_icon.svg";
|
|
|
+import { parseImgUrl } from "@/utils";
|
|
|
+import { Dialog, Loading, Switch } from "vant";
|
|
|
import {
|
|
|
- defineComponent,
|
|
|
- onMounted,
|
|
|
- reactive,
|
|
|
- toRefs,
|
|
|
- computed,
|
|
|
- watch,
|
|
|
- onUnmounted,
|
|
|
- onBeforeMount,
|
|
|
- onBeforeUnmount,
|
|
|
+ defineComponent,
|
|
|
+ onBeforeUnmount,
|
|
|
+ onMounted,
|
|
|
+ reactive,
|
|
|
+ toRefs,
|
|
|
} from "vue";
|
|
|
-import { Switch, Dialog, Loading, Toast } from "vant";
|
|
|
-import { parseImgUrl } from "@/utils";
|
|
|
import any = jasmine.any;
|
|
|
-
|
|
|
export default defineComponent({
|
|
|
- components: {
|
|
|
- Switch,
|
|
|
- [Dialog.Component.name]: Dialog.Component,
|
|
|
- Loading,
|
|
|
- },
|
|
|
- setup(props, contx) {
|
|
|
- const proxyData = reactive({
|
|
|
- parseImgUrl: parseImgUrl,
|
|
|
- isOpen: false,
|
|
|
- childLights: [
|
|
|
- {
|
|
|
- name: "主灯",
|
|
|
- isOpen: false,
|
|
|
- },
|
|
|
- {
|
|
|
- name: "氛围灯",
|
|
|
- isOpen: false,
|
|
|
- },
|
|
|
- {
|
|
|
- name: "吸顶灯",
|
|
|
- isOpen: false,
|
|
|
- },
|
|
|
- {
|
|
|
- name: "吊灯",
|
|
|
- isOpen: false,
|
|
|
- },
|
|
|
- {
|
|
|
- name: "壁灯",
|
|
|
- isOpen: false,
|
|
|
- },
|
|
|
- ],
|
|
|
- });
|
|
|
- onBeforeUnmount(() => {});
|
|
|
- onMounted(() => {});
|
|
|
+ components: {
|
|
|
+ Switch,
|
|
|
+ [Dialog.Component.name]: Dialog.Component,
|
|
|
+ Loading,
|
|
|
+ },
|
|
|
+ setup(props, contx) {
|
|
|
+ const proxyData = reactive({
|
|
|
+ parseImgUrl: parseImgUrl,
|
|
|
+ lampCloseIcon: lampCloseIcon,
|
|
|
+ lampOpenIcon: lampOpenIcon,
|
|
|
+ LampsStatus: "全部关闭",
|
|
|
+ childLights: [
|
|
|
+ {
|
|
|
+ name: "主灯",
|
|
|
+ id: "1",
|
|
|
+ isOpen: false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "氛围灯",
|
|
|
+ id: "2",
|
|
|
+ isOpen: false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "吸顶灯",
|
|
|
+ id: "3",
|
|
|
+ isOpen: false,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ checkLampsStatus: () => {
|
|
|
+ const allOpen = proxyData.childLights.every(
|
|
|
+ (item) => item.isOpen
|
|
|
+ );
|
|
|
+ const allClose = proxyData.childLights.every(
|
|
|
+ (item) => !item.isOpen
|
|
|
+ );
|
|
|
+
|
|
|
+ if (allOpen) return "全部开启";
|
|
|
+ if (allClose) return "全部关闭";
|
|
|
+ return "部分开启";
|
|
|
+ },
|
|
|
+ handle: (type: string) => {
|
|
|
+ if (type === "allOpen") {
|
|
|
+ proxyData.childLights.forEach((item) => {
|
|
|
+ item.isOpen = true;
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ proxyData.childLights.forEach((item) => {
|
|
|
+ item.isOpen = false;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ proxyData.LampsStatus = proxyData.checkLampsStatus();
|
|
|
+ },
|
|
|
+ handleChildLight: (itemCurrent: any) => {
|
|
|
+ proxyData.childLights.forEach((item) => {
|
|
|
+ if (item.id === itemCurrent.id) {
|
|
|
+ item.isOpen = itemCurrent.isOpen;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ proxyData.LampsStatus = proxyData.checkLampsStatus();
|
|
|
+ },
|
|
|
+ });
|
|
|
|
|
|
- return {
|
|
|
- ...toRefs(proxyData),
|
|
|
- };
|
|
|
- },
|
|
|
+ onBeforeUnmount(() => {});
|
|
|
+ onMounted(() => {});
|
|
|
+
|
|
|
+ return {
|
|
|
+ ...toRefs(proxyData),
|
|
|
+ };
|
|
|
+ },
|
|
|
});
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
.more-box {
|
|
|
- .light-more-top {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- .left {
|
|
|
- margin-right: 36px;
|
|
|
- .light-box {
|
|
|
- width: 110px;
|
|
|
- height: 110px;
|
|
|
- background: rgba(255, 255, 255, 0.4);
|
|
|
- border-radius: 50%;
|
|
|
- text-align: center;
|
|
|
- margin-right: 27px;
|
|
|
- img {
|
|
|
- width: 36px;
|
|
|
- height: 36px;
|
|
|
- margin: 0 auto;
|
|
|
- margin-top: 37px;
|
|
|
+ .light-more-top {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .left {
|
|
|
+ margin-right: 36px;
|
|
|
+ .light-box {
|
|
|
+ width: 110px;
|
|
|
+ height: 110px;
|
|
|
+ background: rgba(255, 255, 255, 0.4);
|
|
|
+ border-radius: 50%;
|
|
|
+ text-align: center;
|
|
|
+ margin-right: 27px;
|
|
|
+ img {
|
|
|
+ width: 36px;
|
|
|
+ height: 36px;
|
|
|
+ margin: 0 auto;
|
|
|
+ margin-top: 37px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .light-name {
|
|
|
+ //styleName: Chi/Body Large;
|
|
|
+ margin-top: 12px;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ width: 110px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 300;
|
|
|
+ line-height: 22px;
|
|
|
+ letter-spacing: 0.02em;
|
|
|
+ text-align: center;
|
|
|
+ color: rgba(0, 20, 40, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ height: 92px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .control {
|
|
|
+ width: 100px;
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ border-radius: 50px;
|
|
|
+ // background: #E1E1DF;
|
|
|
+ background: rgba(255, 255, 255, 0.2);
|
|
|
+ box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.05);
|
|
|
+ backdrop-filter: blur(10px);
|
|
|
+ color: #001428;
|
|
|
+ //styleName: Chi/Body Small;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 400;
|
|
|
+ letter-spacing: 0.04em;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
- .light-name {
|
|
|
- //styleName: Chi/Body Large;
|
|
|
- margin-top: 12px;
|
|
|
- font-family: PingFang SC;
|
|
|
- width: 110px;
|
|
|
- font-size: 16px;
|
|
|
- font-weight: 300;
|
|
|
- line-height: 22px;
|
|
|
- letter-spacing: 0.02em;
|
|
|
- text-align: center;
|
|
|
- color: rgba(0, 20, 40, 1);
|
|
|
- }
|
|
|
}
|
|
|
- .right {
|
|
|
- height: 92px;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: space-between;
|
|
|
- .control {
|
|
|
- width: 100px;
|
|
|
- height: 40px;
|
|
|
- line-height: 40px;
|
|
|
- border-radius: 50px;
|
|
|
- backdrop-filter: blur(20px);
|
|
|
- background: rgba(255, 255, 255, 0.4);
|
|
|
- box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.05);
|
|
|
- //styleName: Chi/Body Small;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-size: 12px;
|
|
|
- font-weight: 400;
|
|
|
- letter-spacing: 0.04em;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
+ .light-middle {
|
|
|
+ height: 100px;
|
|
|
+ background: #fff;
|
|
|
}
|
|
|
- }
|
|
|
- .light-bottom {
|
|
|
- margin-top: 36px;
|
|
|
- .item-box {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- width: 300px;
|
|
|
- height: 68px;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 20px 24px;
|
|
|
- border-radius: 24px 24px 44px 24px;
|
|
|
- background: rgba(255, 255, 255, 0.2);
|
|
|
- box-shadow: 0px 10px 20px 0px rgba(0, 20, 40, 0.05);
|
|
|
- margin-bottom: 12px;
|
|
|
- .name {
|
|
|
- //styleName: Chi/Body Regular;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 400;
|
|
|
- line-height: 19px;
|
|
|
- letter-spacing: 0.02em;
|
|
|
- color: rgba(0, 20, 40, 1);
|
|
|
- }
|
|
|
+ .light-bottom {
|
|
|
+ margin-top: 36px;
|
|
|
+ .item-box {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ width: 300px;
|
|
|
+ height: 68px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 20px 24px;
|
|
|
+ border-radius: 24px 24px 44px 24px;
|
|
|
+ background: rgba(255, 255, 255, 0.2);
|
|
|
+ box-shadow: 0px 10px 20px 0px rgba(0, 20, 40, 0.05);
|
|
|
+ margin-bottom: 12px;
|
|
|
+ .name {
|
|
|
+ //styleName: Chi/Body Regular;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 19px;
|
|
|
+ letter-spacing: 0.02em;
|
|
|
+ color: rgba(0, 20, 40, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .light-box-active {
|
|
|
+ background: rgba(255, 255, 255, 0.6);
|
|
|
+ }
|
|
|
}
|
|
|
- .light-box-active {
|
|
|
- background: rgba(255, 255, 255, 0.6);
|
|
|
+ .switch-btn {
|
|
|
+ margin-top: 0;
|
|
|
+ width: 50px !important;
|
|
|
+ height: 28px !important;
|
|
|
+ border: none;
|
|
|
}
|
|
|
- }
|
|
|
- .switch-btn {
|
|
|
- margin-top: 0;
|
|
|
- width: 50px !important;
|
|
|
- height: 28px !important;
|
|
|
- border: none;
|
|
|
- }
|
|
|
}
|
|
|
</style>
|
|
|
<style lang="scss">
|
|
|
.more-box {
|
|
|
- .van-switch__node {
|
|
|
- background: rgba(255, 255, 255, 0.6);
|
|
|
- width: 24px;
|
|
|
- height: 24px;
|
|
|
- top: 0.33vh;
|
|
|
- }
|
|
|
- .van-switch--on {
|
|
|
- background: linear-gradient(95.5deg, #99282b 21.44%, #a95459 84.95%) !important;
|
|
|
.van-switch__node {
|
|
|
- background: #fff !important;
|
|
|
+ background: rgba(255, 255, 255, 0.6);
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ top: 0.33vh;
|
|
|
+ }
|
|
|
+ .van-switch--on {
|
|
|
+ background: linear-gradient(
|
|
|
+ 95.5deg,
|
|
|
+ #99282b 21.44%,
|
|
|
+ #a95459 84.95%
|
|
|
+ ) !important;
|
|
|
+ .van-switch__node {
|
|
|
+ background: #fff !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .van-loading__spinner {
|
|
|
+ color: $elActiveColor !important;
|
|
|
}
|
|
|
- }
|
|
|
- .van-loading__spinner {
|
|
|
- color: $elActiveColor !important;
|
|
|
- }
|
|
|
|
|
|
- .van-switch__loading {
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- line-height: 1;
|
|
|
- }
|
|
|
+ .van-switch__loading {
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ line-height: 1;
|
|
|
+ }
|
|
|
|
|
|
- .van-switch--disabled {
|
|
|
- opacity: 0.5;
|
|
|
- }
|
|
|
+ .van-switch--disabled {
|
|
|
+ opacity: 0.5;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|