menduner/src/layout/message.vue

<template>
  <!-- <v-badge
    color="error"
    :content="IM.unreadCount"
    :model-value="IM.unreadCount > 0"
    offset-y="10"
  > -->
     <div class="customIcon" @click="router.push(path)">
      <v-icon class="mr-1" color="primary" size="16">mdi-bell</v-icon>
      <span v-if="IM.unreadCount > 0">{{ IM.unreadCount > 99 ? '99+' : IM.unreadCount }}</span>
     </div>
  <!-- </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()

// const { resetConfig } = useIM()
useIM()
</script>

<style lang="scss" scoped>
// :deep(.v-btn__content) {
//   font-size: 15px;
// }
// @media (max-width: 1425px) {
//   :deep(.v-btn__content) {
//     font-size: 13px;
//   }
// }
.customIcon {
  display: flex;
  align-items: center;
  height: 26px;
  line-height: 23px;
  color: #00B760;
  padding: 0 10px;
  background-color: #e0f6ec;
  border-radius: 4px;
  font-weight: bold;
  font-size: 12px;
  cursor: pointer;
  &:hover {
    background-color: #d7f3e7;
  }
}
</style>