menduner/src/layout/message.vue

<template>
  <v-badge
    color="error"
    :content="IM.unreadCount"
    :model-value="IM.unreadCount > 0"
    offset-y="10"
  >
    <v-btn @click="router.push(path)" append-icon="mdi-bell-outline">通知</v-btn>
  </v-badge>
</template>

<script setup>
defineOptions({ name: 'layout-message' })
import { useIM } from '@/hooks/web/useIM'
import { useIMStore } from '@/store/im'
import { useRouter } from 'vue-router'

defineProps({
  path: {
    type: String,
    default: '/recruit/personal/message'
  }
})

const router = useRouter()

const IM = useIMStore()
// useDataSource()

useIM()
</script>

<style lang="scss" scoped>
:deep(.v-btn__content) {
  font-size: 15px;
}
@media (max-width: 1425px) {
  :deep(.v-btn__content) {
    font-size: 13px;
  }
}
</style>