SaaS-lib/hx-ai-intelligent/src/view/equipmentControl/lightingManage/light.vue

<template>
  <a-popover color="rgba(0, 0, 0, 0.8)">
    <template #content>
      <div class="light-tag">
        <div class="light-tag-tit">
          <div>
            <img src="/asset/image//bulbLogo/21962.png" alt="" />
            <span class="tag-text">{{ blub.regionName + ' > ' + blub.deviceGroupName }}</span>
          </div>
          <button class="right-button">{{ blub.scene.label }}</button>
        </div>
        <div class="light-tag-box">
          <div class="tag-box-item">
            <img src="/asset/image//bulbLogo/22496.png" alt="" />
            <span class="title">控制模式</span>
            <span class="result">{{ blub.mode.label }}</span>
          </div>
          <div class="tag-box-item">
            <img src="/asset/image//bulbLogo/22496.png" alt="" />
            <span class="title">亮度</span>
            <span class="result">{{ record.brightness + record.brightnessUnit }}</span>
          </div>
          <div class="tag-box-item">
            <img src="/asset/image//bulbLogo/22496.png" alt="" />
            <span class="title">控制场景</span>
            <span class="result">{{ blub.scene.label }}</span>
          </div>
          <div class="tag-box-item">
            <img src="/asset/image//bulbLogo/22496.png" alt="" />
            <span class="title">色温</span>
            <span class="result">{{ record.LwctemC + record.LwctemCUnit }}</span>
          </div>
        </div>
      </div>
    </template>
    <div class="icon-box" :style="props.blub.styleText">
      <img
        v-if="blub.mode.value == 1"
        class="icon-item"
        src="/asset/image/bulbLogo/22394.png"
        alt="" />
      <img
        v-if="blub.mode.value == 2"
        class="icon-item"
        src="/asset/image/bulbLogo/22396.png"
        alt="" />
      <img
        v-if="blub.mode.value == 3"
        class="icon-item"
        src="/asset/image/bulbLogo/22400.png"
        alt="" />
    </div>
  </a-popover>
</template>

<script setup lang="ts">
  const props = defineProps({
    blub: Object,
  });
  const blub = props.blub;
  const record = props.blub.record;
</script>
<style lang="less" scoped>
  .icon-box {
    width: 28px;
    height: 40px;
    position: absolute;

    .icon-item {
      width: 25px;
      cursor: pointer;
      transition: all ease 0.1s;
    }

    .icon-item:active {
      transform: scale(1.2);
    }
  }

  // 悬浮窗外部
  .light-tag {
    display: flex;
    flex-direction: column;
    gap: 10px;

    // 悬浮窗标题
    .light-tag-tit {
      display: flex;
      justify-content: space-between;
      vertical-align: middle;
      height: 30px;

      .tag-text {
        font-size: 16px;
        font-weight: 700;
        color: white;
        padding-left: 10px;
      }

      .right-button {
        width: 50px;
        height: 26px;
        background: rgba(57, 215, 187, 0.1);
        border: 1px solid rgba(57, 215, 187, 1);
        font-size: 12px;
        color: rgba(57, 215, 187, 1);
      }
    }
  }

  // 悬浮窗底部4格子
  .light-tag-box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-gap: 10px;

    .tag-box-item {
      position: relative;
      display: flex;
      justify-content: space-between;

      img {
        width: 120px;
        vertical-align: middle;
      }

      .title {
        position: absolute;
        left: 60px;
        top: 13px;
        color: rgba(64, 255, 252, 1);
      }

      .result {
        line-height: 50px;
        font-size: 14px;
        font-weight: 700;
        color: white;
      }
    }
  }
</style>