sagacloud-sagacare-ipad/src/views/envmonitor/taiguv1/components/Volumn/index.vue

<template>
  <div class="volumn-box" :class="isOpen ? 'active' : ''">
    <div class="top">
      <img
        :src="
          parseImgUrl('taiguv1/envmonitor', isOpen ? 'active/volumn.png' : 'volumn.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="air-info">
        <div class="left">
          <div class="text">音量</div>
          <div class="status">已关闭</div>
        </div>
        <div class="temp" v-if="isOpen">26</div>
      </div>
      <div class="temp-box" v-if="isOpen">
        <div class="bar">
          <div class="text text-left active-text">12</div>
          <div class="active-bar">
            <div class="line"></div>
          </div>
          <div class="text text-right">100</div>
        </div>
      </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,
    });
    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;
    // margin-top: 109px;
    .air-info {
      display: flex;
      justify-content: space-between;
      align-items: end;
      .temp {
        //styleName: En/H2;
        font-family: Jost;
        font-size: 20px;
        font-weight: 300;
        line-height: 28px;
        color: rgba(0, 20, 40, 1);
        sup {
          //styleName: En/Body XS;
          font-family: Jost;
          font-size: 11px;
          font-weight: 400;
          line-height: 15px;
          color: rgba(0, 20, 40, 1);
        }
      }
    }
    .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);
    }
    .temp-box {
      position: relative;
      box-sizing: border-box;
      width: 100%;
      padding: 2px;
      margin-top: 8px;
      height: 34px;
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.6);
      .text {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        font-family: Jost;
        font-size: 11px;
        font-weight: 400;
        line-height: 15px;
        color: rgba(116, 128, 141, 1);
        z-index: 2;
      }
      .text-left {
        left: 8px;
      }
      .text-right {
        right: 8px;
      }
      .active-text {
        color: rgba(255, 255, 255, 0.6);
      }
      .active-bar {
        position: absolute;
        background: linear-gradient(95.5deg, #99282b 21.44%, #a95459 84.95%);
        left: 2px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1;
        width: 73px;
        height: 30px;
        border-radius: 10px;
        .line {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          right: 9px;
          height: 12px;
          width: 2px;
          background: rgba(255, 255, 255, 0.8);
        }
      }
    }
  }
  .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);
    }
  }
}
</style>
<style lang="scss">
.volumn-box {
  .van-switch__node {
    background: rgba(255, 255, 255, 0.6);
    width: 24px;
    height: 24px;
    left: 2px;
    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-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>