添加badge小红点和修复企业画像的检索列表

src/views/index.vue

@@ -47,7 +47,7 @@
           <!-- <span>
             <i>20</i>
           </span> -->
-          <el-badge :value="200" :max="10" class="item">
+          <el-badge :value="badge" :max="10" class="item">
             <img :src="avatar" class="user-avatar" />
           </el-badge>
         </div>
@@ -151,6 +151,8 @@
 
 <script>
 import { mapGetters } from 'vuex';
+// import user from '@/store/modules/user';
+// import { getMsgCount } from '@/api/home/news';
 export default {
   name: 'home',
   data() {
@@ -190,8 +192,15 @@ export default {
     };
   },
   computed: {
-    ...mapGetters(['avatar'])
+    ...mapGetters(['avatar', 'badge'])
   },
+  // watch: {
+  //   badge(newVal, oldVal) {
+  //     if (newVal == 0) {
+  //       document.querySelector('.el-badge sup').style = 'display:none';
+  //     }
+  //   }
+  // },
   methods: {
     toSearch() {
       if (!this.input.length) return this.msgError('请输入搜索关键字');
@@ -209,6 +218,19 @@ export default {
       this.path = path;
       this.$router.push({ path });
     }
+  },
+  created() {
+    // console.log(this.badge);
+    // console.log(user.state.badge);
+    // getMsgCount().then(({ data }) => {
+    //   console.log(data);
+    //   this.$store.commit('SET_BADGE', data);
+    // });
+  },
+  mounted() {
+    // if (this.badge == 0) {
+    //   document.querySelector('.el-badge sup').style = 'display:none';
+    // }
   }
 };
 </script>
@@ -267,6 +289,11 @@ export default {
       .el-badge {
         // display: block;
         // position: relative;
+        top: 10px;
+        right: 8px;
+        border: 1px solid #ffa32c;
+        border-radius: 50%;
+        box-shadow: 5px 5px 5px 0px #dadada;
         .user-avatar {
           vertical-align: middle;
           cursor: pointer;
@@ -415,7 +442,7 @@ export default {
   }
 }
 /deep/.el-badge__content.is-fixed {
-  top: 10px;
+  top: 5px;
   right: 15px;
 }
 @media (max-width: 1024px) {