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

<template>
 <div class="buttomList">
            <div class="buttomItem">
                <div class="buttomName">标签标志</div>
            </div>
            <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>



        <a-modal 
            v-model:visible="visible" 
            title="用户设置" 
            @ok="handleOk"
            width="90%"
            wrapClassName="full-modal"
        >
            <userEdit></userEdit>
        </a-modal>

</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
}
function handleOk(){
    visible.value = false;
}
</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>
<style lang="less" >


.full-modal {
  .ant-modal {
    max-width: 100%;
    top: 3vh;
    padding-bottom: 0;
    margin: auto;
  }
  .ant-modal-content {
    display: flex;
    flex-direction: column;
    height: calc(90vh);
  }
  .ant-modal-body {
    flex: 1;
  }
}
</style>