Explorar el Código

feat: 未读消息显示条数

chenhao hace 2 años
padre
commit
87c2fd0590
Se han modificado 1 ficheros con 11 adiciones y 5 borrados
  1. 11 5
      src/components/shared/message/Message.vue

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

@@ -1,7 +1,9 @@
 <template>
   <message-component>
     <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>
     </div>
     <el-popover
@@ -141,10 +143,14 @@ const onSendMessage = () => {
   position: relative;
   .un-read-num {
     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%;
     background-color: $DangerColor;
   }