ar-web/src/views/page/Aside/cameraRightMenu.vue

<template>
    <div class="buttomList">
        <Popover placement="left" trigger="hover">
            <template #content>
                <ul>
                    <p @click="addLabelFn('视频标签')">视频标签</p>
                    <p @click="addLabelFn('建筑标签')">建筑标签</p>
                    <!-- <p></p> -->
                </ul>
            </template>
            <div class="buttomItem">
                <div class="buttomName">标签标志</div>
            </div> </Popover>
            <div class="buttomItem">
                <div class="buttomName">截图</div>
            </div>
            <div class="buttomItem">
                <div class="buttomName">录像</div>
            </div>
            <div class="buttomItem">
                <div class="buttomName">3D缩放</div>
            </div>
            <div class="buttomItem">
                <div class="buttomName">设备标记</div>
            </div>
            <div class="buttomItem">
                <div class="buttomName">工具箱</div>
            </div>
            <div class="buttomItem" @click="openUserEdit">
                <div class="buttomName">设置</div>
            </div>
        </div>
</template>

<script setup lang='ts'>
import userEdit from '@/views/page/aside/rightMenuItem/userEdit.vue'
import { ref } from 'vue';

const visible = ref(false)
function openUserEdit(){  
    visible.value = !visible.value
}import { Popover } from 'ant-design-vue';
import { useStore } from '@/store/index';
let piniaStore = useStore();
function addLabelFn(str: string) {
    piniaStore.updateIsAddLabel({ labelType: str, isAddLabel: true })
}

</script>

<style scoped lang='less'>
   .buttomList {
        position: absolute;
        right: 1%;
        top: 15%;
        width: 80px;
    }

    @keyframes rounte {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }

    .buttomItem {
        position: relative;
        width: 80px;
        height: 80px;
    }

    .buttomItem::before {
        content: '';
        background: url(@/assets/images/buttonBG01.png);
        background-size: 100% 100%;
        position: absolute;
        animation: rounte 5s linear infinite;
        top: 5%;
        bottom: 5%;
        left: 5%;
        right: 5%;
        z-index: 1;
    }

    .buttomItem:hover::before {
        background: url(@/assets/images/buttonBG02.png);
        background-size: 100% 100%;
    }

    .buttomName {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        color: #fff;
        line-height: 3vw;
        width: 100%;
        z-index: 2;
        font-size: 0.8em;
    }
</style>