fix(versionnotice): 修复：版本通知栏出现后_还能点击菜单的问题

README.md

 # 王小卤链路中心
 ## 网页层级讲解
-1. 水印 fixed定位，层级是：
\ No newline at end of file
+1. 水印 fixed定位，层级是：9
+2. 左侧导航 fixed 定位，层级是 1001
+3. 头部导航 fixed 定位，层级是 9
+4. el-popper 层级是 2000

src/App.vue

 <template>
-  <el-watermark :font="{
-    color: `rgba(0, 0, 0, .65)`
-  }"
+  <el-watermark :font="font"
     :content="content"
     class="wm-class">
     <router-view />
   </el-watermark>
-
   <back-to-up />
 </template>
 
@@ -14,9 +11,27 @@
 import useSettingsStore from '@/store/modules/settings'
 import { handleThemeStyle } from '@/utils/theme'
 import useUserStore from '@/store/modules/user'
+
 const content = computed(() => {
   return useUserStore().userInfo.nickName + ' ' + useUserStore().userInfo.phone
 })
+const isDark = computed(() => {
+  return useSettingsStore().isDark
+})
+const font = reactive({
+  color: 'rgba(0, 0, 0, .15)',
+})
+watch(
+  isDark,
+  () => {
+    font.color = isDark.value
+      ? 'rgba(255, 255, 255, 0.15)'
+      : 'rgba(0, 0, 0, .15)'
+  },
+  {
+    immediate: true,
+  }
+)
 
 onMounted(() => {
   nextTick(() => {
@@ -34,7 +49,5 @@ onMounted(() => {
     left: 0;
     width: 100%;
     height: 100%;
-    z-index: 999;
-    pointer-events: none;
   }
 </style>

src/assets/styles/index.scss

@@ -200,4 +200,6 @@ aside {
 .splitpanes--vertical > .splitpanes__splitter {
   width: 2px; /* 调整粗细 */
   background: #ddd; /* 可选：修改颜色 */
-}
\ No newline at end of file
+}
+
+

src/components/VersionNotice/index.vue

 <template>
-  <div class="wrap">
+  <div>
     <el-dialog v-model="dialogVisible"
       :close-on-click-modal="false"
       :close-on-press-escape="false"
       :show-close="false"
+      modal-class="version-notice-dialog"
       width="40%"
       @close="handleClose"
       draggable
-      overflow >
+      overflow
+      append-to-body>
       <template #header>
         <p class="el-dialog__title">版本更新说明</p>
         <div class="version-tag">V{{ nowVersion }} 更新内容</div>
@@ -89,43 +91,39 @@ const handleConfirm = () => {
 
 </script>
 
-<style lang="scss"
-  scoped>
-  .wrap {
-    ::v-deep(.el-overlay) {
-      .el-overlay-dialog {
-        .el-dialog {
-          // 从上到下的渐变蓝色
-          background: linear-gradient(to bottom, #3879e0, #ffffff);
-
-          // 自定义对话框样式
-          .el-dialog__header {
-            height: auto;
-
-            .el-dialog__title {
-              color: white;
-              font-size: 24px;
-              margin: 0;
-            }
+<style lang="scss">
+.version-notice-dialog {
+  .el-overlay-dialog {
+    .el-dialog {
+      // 从上到下的渐变蓝色
+      background: linear-gradient(to bottom, #3879e0, #ffffff);
+
+      // 自定义对话框样式
+      .el-dialog__header {
+        height: auto;
+
+        .el-dialog__title {
+          color: white;
+          font-size: 24px;
+          margin: 0;
+        }
 
-            .el-dialog__headerbtn .el-dialog__close {
-              color: white;
+        .el-dialog__headerbtn .el-dialog__close {
+          color: white;
 
-              &:hover {
-                color: #f5f5f5;
-              }
-            }
-          }
-
-          .version-tag {
-            margin-top: 10px;
-            color: white;
-            line-height: 1.5;
+          &:hover {
+            color: #f5f5f5;
           }
         }
+      }
 
+      .version-tag {
+        margin-top: 10px;
+        color: white;
+        line-height: 1.5;
       }
 
+
       // 更新内容
       .update-content {
         .el-collapse-item__header {
@@ -161,4 +159,5 @@ const handleConfirm = () => {
       }
     }
   }
+}
 </style>
\ No newline at end of file

src/permission.js

@@ -14,7 +14,7 @@ import useVersionStore from '@/store/modules/version'
 NProgress.configure({ showSpinner: false })
 
 // 登录页，物流查询页
-const whiteList = ['/login', '/logistics']
+export const whiteList = ['/login', '/logistics']
 
 const isWhiteList = (path) => {
   return whiteList.some(pattern => isPathMatch(pattern, path))