Cold_putoutstorage_web/src/views/layout/popover.vue

<!--  -->
<template>
    <div class="demo-ico__desc">
        <div class="demo-ico__desc_item" @click="exitFun(1)">
            <img src="@/assets/img/userInfo.gif" style="width: 30px;height: 30px;border-radius: 50%;cursor: pointer">
                    <p class="demo-ico__desc_item_p">{{data.username}}，你好</p>
        </div>

        <el-divider direction="vertical" />
        <div class="demo-ico__desc_item demo-ico__desc_hover" @click="exitFun(2)">
            <el-icon size="16">
                <Bell />
            </el-icon>
            <p class="demo-ico__desc_item_p">消息</p>
        </div>
        <el-divider direction="vertical" />
        <div class="demo-ico__desc_item demo-ico__desc_hover" @click="exitFun(3)">
            <el-icon size="16">
                <FullScreen />
            </el-icon>
            <p class="demo-ico__desc_item_p">全屏</p>
        </div>
        <el-divider direction="vertical" />
        <div class="demo-ico__desc_item demo-ico__desc_hover" @click="exitFun(4)">
            <el-icon size="16">
                <SwitchButton />
            </el-icon>
            <p class="demo-ico__desc_item_p">退出</p>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { exitFun } from "@/plugins/setFun";
import { reactive } from "vue";
import { useStore } from "vuex";
const store = useStore()
const data = reactive({
    username:''
})
data.username = !store.state.userInfo.form.username?'游客':store.state.userInfo.form.username
console.log()
</script>
<style lang="scss">
.demo-ico__desc {
    user-select: none;
    display: flex;
    align-items: center;

    &_item {
        padding: 10px 0;
        border-radius: 2px;
        cursor: pointer;
        display: flex;
        align-items: center;

        &_p {
            font-size: 12px;
            padding-left: 5px;
        }
    }

    &_hover:hover {
        color: var(--el-color-primary);;
    }

}</style>