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">{{ result.name }}</span>
                    </div>
                    <button class="right-button">{{ type == 1 ? '正常' : '关闭' }}</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">自动</span>
                    </div>
                    <div class="tag-box-item">
                        <img src="/asset/image//bulbLogo/22496.png" alt="" />
                        <span class="title">亮度</span>
                        <span class="result">{{ result.brightness }}</span>
                    </div>
                    <div class="tag-box-item">
                        <img src="/asset/image//bulbLogo/22496.png" alt="" />
                        <span class="title">控制场景</span>
                        <span class="result">{{ result.automatic2 }}</span>
                    </div>
                    <div class="tag-box-item">
                        <img src="/asset/image//bulbLogo/22496.png" alt="" />
                        <span class="title">色温</span>
                        <span class="result">{{ result.brightness3 }}</span>
                    </div>
                </div>
            </div>
        </template>
        <div class="icon-box" :style="styleObject" v-show="visible">
            <img v-if="type == 1" class="icon-item" src="/asset/image/bulbLogo/22394.png" alt="">
            <img v-if="type == 2" class="icon-item" src="/asset/image/bulbLogo/22396.png" alt="">
            <img v-if="type == 3" class="icon-item" src="/asset/image/bulbLogo/22400.png" alt="">
        </div>
    </a-popover>
</template>
  
<script setup lang="ts">
import { ref } from 'vue';

defineProps({
    styleObject: Object,
    type: Number,
    visible: {
        type: Boolean,
        default: false
    }
});

const result = ref({
    id: '1',
    name: '站厅照明  1区',
    manual: '手动',
    automatic: '自动',
    brightness: '100lux',
    brightness2: '30lux',
    manual2: '手动',
    automatic2: '舒适',
    brightness3: '4000k',
    brightness4: '3800k',
});

</script>
<style lang="less" scoped>
    .icon-box {
        width: 25px;
        height: 25px;
        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: 16px;
                font-weight: 700;
                color: white;
            };
        }
    }
</style>