更新

src/App.vue

@@ -4,6 +4,11 @@
       <router-view v-if="$route.meta.keepAlive" />
     </keep-alive>
     <router-view v-if="!$route.meta.keepAlive" />
+    <div class="userAgentTips" v-if="userAgentTipShow">
+        <img src="./assets/userAgentWarning.png" width="32px" />
+        <span>当前浏览器可能与网站不兼容！建议使用 chrome 浏览器获得最佳使用体验。 </span>
+        <img src="./assets/userAgentClose.png" width="16px" @click="handleClickUserAgent" />
+    </div>
   </div>
 </template>
 <script>
@@ -12,6 +17,7 @@ export default {
   data() {
     return {
       dir: "ltr",
+      userAgentTipShow: false,
     };
   },
   created() {
@@ -19,7 +25,20 @@ export default {
     if (lang_type == "AR") {
       this.dir = "rtl";
     }
+    this.handleUserAgentRoot()
   },
+    methods:{
+      // 判断是否为chrome浏览器 
+      handleUserAgentRoot(){
+          if(!sessionStorage.getItem("useragent_root_close") && navigator.userAgent.indexOf('Chrome') == -1){
+              this.userAgentTipShow = true
+          }
+      },
+      handleClickUserAgent(){
+          sessionStorage.setItem("useragent_root_close", true);
+          this.userAgentTipShow = false
+      },
+  }
 };
 </script>
 <style>
@@ -37,3 +56,26 @@ body {
   height: 100%;
 }
 </style>
+<style lang="scss" scoped>
+.userAgentTips{
+    position: fixed;
+    top: 62px;
+    left: 50%;
+    // width: 624px;
+    margin-left: -312px;
+    background: #FFFFFF;
+    border-radius: 8px;
+    padding: 12px 16px 12px 8px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 16px;
+    line-height: 24px;
+    :nth-child(1){
+        margin-right: 8px;
+    }
+    :nth-child(3){
+        cursor: pointer;
+    }
+}
+</style>

src/components/Header.vue

@@ -207,6 +207,7 @@ export default {
       window.location.href = "/";
     },
     QuitLogin() {
+      sessionStorage.removeItem("useragent_root_close");
       window.location.href = "/";
       removeToken();
       removeSession("SysList");
@@ -337,6 +338,7 @@ export default {
         line-height: 64px;
         font-weight: 500;
         cursor: pointer;
+        white-space: nowrap;
         &:hover {
           background: #f6f6f6;
         }