up

src/layout/components/Navbar.vue

@@ -15,8 +15,12 @@
         :hide-on-click="false"
       >
         <div class="message-wrapper">
-          <i class="el-icon-chat-dot-square" />
-          <span>消息中心</span>
+          <el-badge :value="noticeData.length>0?noticeData.length:''" :max="99" class="item">
+            <i class="el-icon-chat-dot-square" />
+            <span>消息中心</span>
+          </el-badge>
+          <!-- <i class="el-icon-chat-dot-square" />
+          <span>消息中心</span> -->
         </div>
         <template v-slot:dropdown>
           <el-dropdown-menu class="message-dropdown">
@@ -212,7 +216,15 @@ export default {
   },
 };
 </script>
-
+<style scoped>
+  /deep/ .el-badge__content.is-fixed{
+    top:13px;
+  }
+  .el-dropdown-menu.el-popper.message-dropdown{
+      max-height:400px;
+      overflow: auto;
+  }
+</style>
 <style lang="scss" scoped>
 .navbar {
   height: 50px;