Browse Source

feat: 未读消息显示条数

chenhao 2 years ago
parent
commit
87c2fd0590
1 changed files with 11 additions and 5 deletions
  1. 11 5
      src/components/shared/message/Message.vue

+ 11 - 5
src/components/shared/message/Message.vue

@@ -1,7 +1,9 @@
 <template>
 <template>
   <message-component>
   <message-component>
     <div ref="messageIcon" class="message-icon">
     <div ref="messageIcon" class="message-icon">
-      <span v-show="unReadMessages?.newCount" class="un-read-num"></span>
+      <span v-show="unReadMessages?.newCount" class="un-read-num">
+        {{ Math.min(unReadMessages?.newCount || 0, 99) }}
+      </span>
       <svg-icon name="message"></svg-icon>
       <svg-icon name="message"></svg-icon>
     </div>
     </div>
     <el-popover
     <el-popover
@@ -141,10 +143,14 @@ const onSendMessage = () => {
   position: relative;
   position: relative;
   .un-read-num {
   .un-read-num {
     position: absolute;
     position: absolute;
-    width: 8px;
-    height: 8px;
-    right: -2px;
-    top: -2px;
+    width: 16px;
+    height: 16px;
+    line-height: 16px;
+    right: -8px;
+    top: -8px;
+    text-align: center;
+    color: $color--white;
+    font-size: 10px;
     border-radius: 50%;
     border-radius: 50%;
     background-color: $DangerColor;
     background-color: $DangerColor;
   }
   }