|
@@ -1,159 +1,201 @@
|
|
|
<template>
|
|
|
- <div class="volumn-box" :class="isOpen ? 'active' : ''">
|
|
|
- <div class="top">
|
|
|
- <img
|
|
|
- :src="
|
|
|
+ <div
|
|
|
+ class="volumn-box"
|
|
|
+ :class="isOpen ? 'active' : ''"
|
|
|
+ @click="searchMore"
|
|
|
+ >
|
|
|
+ <div class="top">
|
|
|
+ <img
|
|
|
+ :src="
|
|
|
parseImgUrl('taiguv1/envmonitor', isOpen ? 'active/curtain.svg' : 'curtain.svg')
|
|
|
"
|
|
|
- alt=""
|
|
|
- />
|
|
|
- <div class="top-right">
|
|
|
- <Switch class="switch-btn" inactive-color="rgba(0, 0, 0, 0.3)" v-model="isOpen" />
|
|
|
- </div>
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <div class="top-right">
|
|
|
+ <Switch
|
|
|
+ class="switch-btn"
|
|
|
+ inactive-color="rgba(0, 0, 0, 0.3)"
|
|
|
+ v-model="isOpen"
|
|
|
+ @click.stop=""
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="bottom">
|
|
|
+ <div class="text">窗帘</div>
|
|
|
+ <div class="status">{{ isOpen ? "已开启" : "已关闭" }}</div>
|
|
|
+ <div class="control-box">
|
|
|
+ <div class="control-item">上</div>
|
|
|
+ <div class="control-item">停</div>
|
|
|
+ <div class="control-item">下</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="bottom">
|
|
|
- <div class="text">窗帘</div>
|
|
|
- <div class="status">{{ isOpen ? "已开启" : "已关闭" }}</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts">
|
|
|
import {
|
|
|
- defineComponent,
|
|
|
- onMounted,
|
|
|
- reactive,
|
|
|
- toRefs,
|
|
|
- computed,
|
|
|
- watch,
|
|
|
- onUnmounted,
|
|
|
- onBeforeMount,
|
|
|
- onBeforeUnmount,
|
|
|
+ defineComponent,
|
|
|
+ onMounted,
|
|
|
+ reactive,
|
|
|
+ toRefs,
|
|
|
+ computed,
|
|
|
+ watch,
|
|
|
+ onUnmounted,
|
|
|
+ onBeforeMount,
|
|
|
+ onBeforeUnmount,
|
|
|
} 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,
|
|
|
- });
|
|
|
- onBeforeUnmount(() => {});
|
|
|
- onMounted(() => {});
|
|
|
+ components: {
|
|
|
+ Switch,
|
|
|
+ [Dialog.Component.name]: Dialog.Component,
|
|
|
+ Loading,
|
|
|
+ },
|
|
|
+ setup(props, contx) {
|
|
|
+ const proxyData = reactive({
|
|
|
+ parseImgUrl: parseImgUrl,
|
|
|
+ isOpen: false,
|
|
|
+ searchMore() {
|
|
|
+ contx.emit("showMore",'curtain',true);
|
|
|
+ },
|
|
|
+ });
|
|
|
+ onBeforeUnmount(() => {});
|
|
|
+ onMounted(() => {});
|
|
|
|
|
|
- return {
|
|
|
- ...toRefs(proxyData),
|
|
|
- };
|
|
|
- },
|
|
|
+ return {
|
|
|
+ ...toRefs(proxyData),
|
|
|
+ };
|
|
|
+ },
|
|
|
});
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
.volumn-box {
|
|
|
- box-sizing: border-box;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: space-between;
|
|
|
- padding: 16px;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- border-radius: 24px 24px 44px 24px;
|
|
|
- background: rgba(255, 255, 255, 0.2);
|
|
|
- backdrop-filter: blur(40px);
|
|
|
- box-shadow: 0px 10px 20px 0px rgba(0, 20, 40, 0.1);
|
|
|
- .top {
|
|
|
+ box-sizing: border-box;
|
|
|
display: flex;
|
|
|
+ flex-direction: column;
|
|
|
justify-content: space-between;
|
|
|
- img {
|
|
|
- width: 30px;
|
|
|
+ padding: 16px;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ border-radius: 24px 24px 44px 24px;
|
|
|
+ background: rgba(255, 255, 255, 0.2);
|
|
|
+ backdrop-filter: blur(40px);
|
|
|
+ box-shadow: 0px 10px 20px 0px rgba(0, 20, 40, 0.1);
|
|
|
+ .top {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ img {
|
|
|
+ width: 30px;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
- .bottom {
|
|
|
- // margin-top: 18vh;
|
|
|
- // margin-top: 109px;
|
|
|
- .text {
|
|
|
- //styleName: Chi/Body Large;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-size: 16px;
|
|
|
- font-weight: 300;
|
|
|
- line-height: 22px;
|
|
|
- letter-spacing: 0.02em;
|
|
|
- text-align: left;
|
|
|
- text-underline-position: from-font;
|
|
|
- text-decoration-skip-ink: none;
|
|
|
- color: rgba(255, 255, 255, 1);
|
|
|
- padding-bottom: 2px;
|
|
|
+ .bottom {
|
|
|
+ // margin-top: 18vh;
|
|
|
+ // margin-top: 109px;
|
|
|
+ .text {
|
|
|
+ //styleName: Chi/Body Large;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 300;
|
|
|
+ line-height: 22px;
|
|
|
+ letter-spacing: 0.02em;
|
|
|
+ text-align: left;
|
|
|
+ text-underline-position: from-font;
|
|
|
+ text-decoration-skip-ink: none;
|
|
|
+ color: rgba(255, 255, 255, 1);
|
|
|
+ padding-bottom: 2px;
|
|
|
+ }
|
|
|
+ .status {
|
|
|
+ //styleName: Chi/Body XS;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-size: 11px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 15px;
|
|
|
+ letter-spacing: 0.02em;
|
|
|
+ color: rgba(255, 255, 255, 0.4);
|
|
|
+ }
|
|
|
+ .control-box {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ .control-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 36px;
|
|
|
+ height: 36px;
|
|
|
+ border-radius: 60px;
|
|
|
+ opacity: 0.6;
|
|
|
+ background: var(--White-White-40, rgba(255, 255, 255, 0.40));
|
|
|
+ backdrop-filter: blur(30px);
|
|
|
+ font-family: Jost;
|
|
|
+ font-size: 16px;
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: 300;
|
|
|
+ line-height: normal;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- .status {
|
|
|
- //styleName: Chi/Body XS;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-size: 11px;
|
|
|
- font-weight: 400;
|
|
|
- line-height: 15px;
|
|
|
- letter-spacing: 0.02em;
|
|
|
- color: rgba(255, 255, 255, 0.4);
|
|
|
+ .switch-btn {
|
|
|
+ width: 50px !important;
|
|
|
+ height: 28px !important;
|
|
|
+ border: none;
|
|
|
}
|
|
|
- }
|
|
|
- .switch-btn {
|
|
|
- width: 50px !important;
|
|
|
- height: 28px !important;
|
|
|
- border: none;
|
|
|
- }
|
|
|
}
|
|
|
.active {
|
|
|
- background: rgba(255, 255, 255, 0.8);
|
|
|
- backdrop-filter: blur(40px);
|
|
|
- box-shadow: 0px 10px 20px 0px rgba(0, 20, 40, 0.1);
|
|
|
+ background: rgba(255, 255, 255, 0.8);
|
|
|
+ backdrop-filter: blur(40px);
|
|
|
+ box-shadow: 0px 10px 20px 0px rgba(0, 20, 40, 0.1);
|
|
|
|
|
|
- .bottom {
|
|
|
- .text {
|
|
|
- color: rgba(0, 20, 40, 1);
|
|
|
+ .bottom {
|
|
|
+ .text {
|
|
|
+ color: rgba(0, 20, 40, 1);
|
|
|
+ }
|
|
|
+ .status {
|
|
|
+ color: rgba(116, 128, 141, 1);
|
|
|
+ }
|
|
|
}
|
|
|
- .status {
|
|
|
- color: rgba(116, 128, 141, 1);
|
|
|
- }
|
|
|
- }
|
|
|
}
|
|
|
</style>
|
|
|
<style lang="scss">
|
|
|
.volumn-box {
|
|
|
- .van-switch__node {
|
|
|
- background: rgba(255, 255, 255, 0.6);
|
|
|
- width: 24px;
|
|
|
- height: 24px;
|
|
|
- top: 0.33vh;
|
|
|
- }
|
|
|
- .van-switch--on.switch-btn {
|
|
|
.van-switch__node {
|
|
|
- transform: translate(calc(50px - 28px)) !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-switch--on.switch-btn {
|
|
|
+ .van-switch__node {
|
|
|
+ transform: translate(calc(50px - 28px)) !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .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>
|