diff --git a/core/frontend/src/layout/index.vue b/core/frontend/src/layout/index.vue
index 5844c2831e..beea0d43d5 100644
--- a/core/frontend/src/layout/index.vue
+++ b/core/frontend/src/layout/index.vue
@@ -1,5 +1,7 @@
 <template>
   <div
+    v-loading="showTips"
+    element-loading-custom-class="pwd-tips-loading"
     :class="classObj"
     class="app-wrapper"
   >
@@ -131,10 +133,13 @@ export default {
     })
   },
   mounted() {
+    document.addEventListener('click', this.bodyClick)
     bus.$on('PanelSwitchComponent', this.panelSwitchComponent)
     bus.$on('web-seize-topic-call', this.webMsgTopicCall)
   },
   beforeDestroy() {
+    this.showTips = false
+    document.removeEventListener('click', this.bodyClick)
     bus.$off('PanelSwitchComponent', this.panelSwitchComponent)
     bus.$off('web-seize-topic-call', this.webMsgTopicCall)
   },
@@ -142,6 +147,12 @@ export default {
     showMultiLoginMsg()
   },
   methods: {
+    bodyClick(e) {
+      const dom = document.querySelector('.pwd-tips')
+      if (dom && !dom.contains(e.target)) {
+        this.showTips = false
+      }
+    },
     webMsgTopicCall(param) {
       const msg = this.$t('multi_login_lang.forced_offline')
       // eslint-disable-next-line
@@ -184,6 +195,14 @@ export default {
       position: fixed;
       top: 0;
     }
+
+  }
+  ::v-deep .pwd-tips-loading {
+    z-index: 2024;
+    background-color: rgba(255, 255, 255, 0.1);
+    .el-loading-spinner {
+      display: none !important;
+    }
   }
   .drawer-bg {
     background: #000;