顶部添加按钮

src/layout/components/Navbar.vue

@@ -13,6 +13,12 @@
         <div class="log_name">{{ pageTitle }}</div>
       </div>
       <div class="right-menu">
+        <div class="header-btn" @click="warningClickHandler">
+          <img src="@/assets/index/ic_warning_top.png" alt="预警" class="header-btn-img" />
+        </div>
+        <div class="header-btn" @click="messageClickHandler">
+          <img src="@/assets/index/ic_message_top.png" alt="消息" class="header-btn-img" />
+        </div>
         <el-dropdown>
           <div class="user">
             <img class="head-icon-img" src="../../assets/status/ic_user.png" alt="" />
@@ -116,25 +122,14 @@ export default {
     exitDialog () {
       this.$store.dispatch('app/toggleOutflag', true)
     },
-    //下载
-    downFile () {
-      const a = document.createElement('a')
-      // 给a标签的href属性值加上地址,注意:这里是绝对路径,不用加 点.
-      a.href = './国航行李全流程跟踪数据系统-用户使用手册V2.1.pdf'
-      // 设置下载文件文件名,这里加上.xlsx指定文件类型,pdf文件就指定.fpd即可
-      a.download = '国航行李全流程跟踪数据系统-用户使用手册V2.1.pdf'
-      // 障眼法藏起来a标签
-      a.style.display = 'none'
-      // 将a标签追加到文档对象中
-      document.body.appendChild(a)
-      // 模拟点击了<a>标签,会触发<a>标签的href的读取,浏览器就会自动下载了
-      a.click()
-      // 一次性的,用完就删除a标签
-      a.remove()
-      // window.location.href = './国航行李全流程跟踪数据系统-用户使用手册V2.1.pdf'
-    },
     goBackHandler (item) {
       return item.parent?.path
+    },
+    warningClickHandler() {
+      this.$message.info('开发中')
+    },
+    messageClickHandler() {
+      this.$message.info('开发中')
     }
   }
 }
@@ -218,9 +213,37 @@ export default {
       line-height: 48px;
       margin-right: 44px;
       display: flex;
+      align-items: center;
       &:focus {
         outline: none;
       }
+      .header-btn {
+        width: 20px;
+        height: 20px;
+        line-height: 1;
+        margin-right: 28px;
+        position: relative;
+        cursor: pointer;
+        &-img {
+          width: 100%;
+          height: 100%;
+        }
+        &::after {
+          content: '';
+          display: none;
+          width: 7px;
+          height: 7px;
+          position: absolute;
+          top: 0;
+          right: -3px;
+          border-radius: 50%;
+          border: 1px solid #fff;
+          background-color: #eb3737;
+        }
+        &.header-btn-active::after {
+          display: block;
+        }
+      }
       > div {
         margin-right: 20px;
       }