123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189 |
- <template>
- <div class="volumn-box" :class="isOpen ? 'active' : ''">
- <div class="top">
- <img
- :src="parseImgUrl('taiguv1/envmonitor', isOpen ? 'active/lamp.svg' : 'lamp.svg')"
- alt=""
- />
- <div class="top-right">
- <Switch class="switch-btn" inactive-color="rgba(0, 0, 0, 0.3)" v-model="isOpen" />
- </div>
- </div>
- <div class="bottom">
- <div class="text">光照</div>
- <div class="status">{{ isOpen ? "已开启" : "已关闭" }}</div>
- <div class="right" @click="searchMore">
- <img
- :src="
- parseImgUrl('taiguv1/envmonitor', isOpen ? 'active/filter.svg' : 'filter.svg')
- "
- alt=""
- />
- </div>
- </div>
- </div>
- </template>
- <script lang="ts">
- import {
- 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,
- searchMore() {
- contx.emit("showMore",'lamp',true);
- },
- });
- onBeforeUnmount(() => {});
- onMounted(() => {});
- 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-color: 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;
- position: relative;
- // 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);
- }
- .right {
- position: absolute;
- right: 0;
- bottom: 0;
- width: 36px;
- height: 36px;
- background: rgba(255, 255, 255, 0.2);
- backdrop-filter: blur(60px);
- border-radius: 50%;
- text-align: center;
- img {
- width: 20px;
- height: 20px;
- margin-top: 8px;
- }
- }
- }
- .switch-btn {
- margin-top: 0;
- 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);
- .bottom {
- .text {
- color: rgba(0, 20, 40, 1);
- }
- .status {
- color: rgba(116, 128, 141, 1);
- }
- }
- .right {
- background: rgba(255, 255, 255, 0.4);
- }
- }
- </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;
- }
- }
- .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-switch__loading {
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- line-height: 1;
- }
- .van-switch--disabled {
- opacity: 0.5;
- }
- }
- </style>
|