|
@@ -1,15 +1,16 @@
|
|
|
<template>
|
|
|
- <!-- <v-badge
|
|
|
+ <v-badge
|
|
|
color="error"
|
|
|
- :content="IM.unreadCount"
|
|
|
+ :content="IM.unreadCount > 99 ? '99+' : 85"
|
|
|
: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> -->
|
|
|
+ offset-y="1"
|
|
|
+ offset-x="4"
|
|
|
+ >
|
|
|
+ <div class="customIcon" :class="{'noUnReadWidth': IM.unreadCount <= 0}" @click="router.push(path)">
|
|
|
+ <v-icon color="primary" size="16">mdi-bell</v-icon>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </v-badge>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
@@ -34,17 +35,10 @@ 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;
|
|
|
+ justify-content: center;
|
|
|
height: 26px;
|
|
|
line-height: 23px;
|
|
|
color: #00B760;
|
|
@@ -58,4 +52,13 @@ useIM()
|
|
|
background-color: #d7f3e7;
|
|
|
}
|
|
|
}
|
|
|
+.noUnReadWidth {
|
|
|
+ width: 26px;
|
|
|
+}
|
|
|
+:deep(.v-badge__badge) {
|
|
|
+ width: 17px;
|
|
|
+ height: 17px;
|
|
|
+ min-width: 17px;
|
|
|
+ font-size: 10px;
|
|
|
+}
|
|
|
</style>
|