sh_real_name_system_web/src/components/Message/index.vue

<template>
    <div>
        <el-badge :value="badgeNum" class="item">
            <svg-icon
                class-name="size-icon"
                icon-class="message_1"
                @click="handleClick"
                style="font-size: 22px; cursor: pointer"
            />
        </el-badge>
    </div>
</template>

<script>
import { getBadgeNumApi } from '@/api/system/menu'

export default {
    data() {
        return {
            badgeNum: null
        }
    },
    created() {
        this.getBadgeNum()
    },
    methods: {
        handleClick() {
            this.$router.push('/construction-person/to-do')
        },
        async getBadgeNum() {
            try {
                const res = await getBadgeNumApi()
                this.badgeNum = res.data
            } catch (error) {
                console.log('error-->', error)
            }
        }
    },
}
</script>

<style scoped>
::v-deep .el-badge__content.is-fixed {
    top: 10px;
}
</style>