update

package.json

 {
   "name": "@ezijing/web-message-sdk",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "private": false,
   "main": "dist/message.umd.js",
   "files": [

src/Main.vue

@@ -15,7 +15,7 @@
               d="M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2zM8 1.918l-.797.161A4.002 4.002 0 0 0 4 6c0 .628-.134 2.197-.459 3.742-.16.767-.376 1.566-.663 2.258h10.244c-.287-.692-.502-1.49-.663-2.258C12.134 8.197 12 6.628 12 6a4.002 4.002 0 0 0-3.203-3.92L8 1.917zM14.22 12c.223.447.481.801.78 1H1c.299-.199.557-.553.78-1C2.68 10.2 3 6.88 3 6c0-2.42 1.72-4.44 4.005-4.901a1 1 0 1 1 1.99 0A5.002 5.002 0 0 1 13 6c0 .88.32 4.2 1.22 6z"
             />
           </svg>
-          <div class="v-message-input-dot" v-if="!!unreadCount"></div>
+          <div class="v-message-input-dot" v-if="!!unreadCount">{{ unreadCount }}</div>
         </div>
       </template>
       <message-popover
@@ -78,11 +78,16 @@ export default {
 }
 .v-message-input-dot {
   position: absolute;
-  top: 0;
-  right: 0;
-  width: 3px;
-  height: 3px;
-  border-radius: 50%;
+  top: -10px;
+  left: 16px;
+  min-width: 10px;
+  padding: 0 5px;
+  height: 20px;
+  font-size: 12px;
+  line-height: 20px;
+  color: #fff;
+  text-align: center;
+  border-radius: 10px;
   background-color: #ba053f;
 }
 </style>
\ No newline at end of file