red point

src/App.vue

 <template>
 	<div>
 		<v-header :userName="userName" :portrait="portrait" :idType="idType"></v-header>
-    <v-slidebar :authList="authList" :tokenValue="token"></v-slidebar>
+    <v-slidebar :authList="authList" :tokenValue="token" :notCompleteCount="10"></v-slidebar>
 		<el-container>
 			<div class="content" id="body-content">
 				<transition name="router-fade" mode="out-in">

src/views/layout/slidebar.vue

@@ -7,7 +7,7 @@
                         <template slot="title"><i :class="item.icon"></i>{{item.title}}</template>
                         <el-menu-item v-for="(subItem,i) in item.subs" :key="i" :index="'/'+subItem.index">
                             <i class="sub-icon" :class="subItem.icon"></i>
-                            {{subItem.title}}
+                            {{subItem.title}} <span class="redNum" v-if="subItem.title == '资料不全居民'&&notCompleteCount">+{{notCompleteCount}}</span>
                         </el-menu-item>
                     </el-submenu>
                 </template>
@@ -33,6 +33,9 @@ export default {
         authList: {
             type: Object,
             default: () => {}
+        },
+        notCompleteCount: {
+          type: Number,
         }
     },
     data() {
@@ -158,6 +161,10 @@ export default {
         //     background: #06232C !important;
         // }
     }
+  .redNum {
+    margin-left: 20px;
+    color: #D22B3F;
+  }
 }
 </style>