新增 header信息提示铃铛

src/App.vue

@@ -133,6 +133,10 @@ export default {
   margin-top: 30px;
 }
 
+.mr30 {
+  margin-right: 30px;
+}
+
 .mt50 {
   margin-top: 50px;
 }

src/components/Header.vue

@@ -6,6 +6,17 @@
       <img class="logo" src="../assets/white-logo.png" alt="" />
     </div>
     <div class="right">
+      <div class="pointer" style="padding-top: 6px">
+        <el-badge
+          :hidden="isNewMessage == 0"
+          :is-dot="isNewMessage"
+          class="mr30"
+        >
+          <el-icon size="20" color="#00a9dc">
+            <BellFilled />
+          </el-icon>
+        </el-badge>
+      </div>
       <img class="user-icon" src="../assets/user.png" alt="" />
       <div class="user">{{ userName }}</div>
       <div class="quit" @click="quit">[退出]</div>
@@ -15,9 +26,14 @@
 <script>
 import store from "../store";
 import router from "../router";
-
+import { ref } from "_vue@3.2.20@vue";
+import { BellFilled } from "@element-plus/icons";
 export default {
+  components: {
+    BellFilled,
+  },
   setup() {
+    let isNewMessage = ref(0);
     let userName = localStorage.staffName;
     function quit() {
       localStorage.clear();
@@ -27,6 +43,7 @@ export default {
     return {
       quit,
       userName,
+      isNewMessage,
     };
   },
 };