fix 产品菜单新增遮罩效果

 <!--
  * @Date: 2024-09-26 13:36:06
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-18 18:58:31
+ * @LastEditTime: 2024-10-24 14:58:49
  * @FilePath: /hager/src/App.vue
  * @Description: 文件描述
 -->
 <template>
   <div style="display: flex; flex-direction: column; min-height: 100vh; overflow: hidden;">
-    <hager-header></hager-header>
+    <hager-header @onShowMenu="onShowMenu"></hager-header>
     <router-view :class="[!isLoginPage ? 'wrapper' : '', is_xs ? 'xs' : '']"></router-view>
     <hager-footer v-if="!isLoginPage"></hager-footer>
+    <div v-if="showMask" class="mask">
+    </div>
   </div>
 </template>
 
@@ -23,7 +25,7 @@ export default {
   mixins: [mixin.init],
   data () {
     return {
-
+      showMask: false
     }
   },
   computed: {
@@ -37,7 +39,9 @@ export default {
 
   },
   methods: {
-
+    onShowMenu (val) {
+      this.showMask = val;
+    },
   }
 }
 </script>
@@ -82,6 +86,18 @@ body {
 //   }
 // }
 
+.mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 .global-center {
   position: relative;
   top: 50%;

 <!--
  * @Date: 2024-09-26 13:42:11
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-24 11:20:47
+ * @LastEditTime: 2024-10-24 14:34:58
  * @FilePath: /hager/src/components/common/hagerHeader.vue
  * @Description: 文件描述
 -->
@@ -47,7 +47,7 @@
       </el-col>
       <el-col :sm="1" :md="1" :lg="3" :xl="4">&nbsp;</el-col>
     </el-row>
-    <el-row class="hidden-xs-only" style="background-color: #fff; border-top: 1px solid rgba(218, 218, 218, 0.4);">
+    <el-row class="hidden-xs-only" :style="{backgroundColor: '#fff', borderTop: '1px solid rgba(218, 218, 218, 0.4)', borderBottom: show_border ? '1px solid rgba(218, 218, 218, 0.4)' : ''}">
       <el-col :sm="1" :md="1" :lg="3" :xl="4">&nbsp;</el-col>
       <el-col :sm="22" :md="22" :lg="18" :xl="16" style="position: relative;height: 5rem;">
         <el-row>
@@ -155,12 +155,30 @@ export default {
       // choose_country: false, // 主动选择了国家地区
       keyword: '',
       is_login: true,
+      show_border: false,
     }
   },
   watch: {
     // 监听路由参数变化时，更新输入框的值
     '$route.query.keyword': function(newKeyword) {
       this.keyword = newKeyword || '';
+    },
+    '$route' (to, from) {
+      this.is_active = to.meta.tag;
+      this.show = false;
+      if (to.path.indexOf('/product') !== -1 || to.path.indexOf('/about') !== -1) {
+        this.show_border = true;
+      } else {
+        this.show_border = false;
+      }
+    },
+    'is_xs' (val) {
+      if (!val) {
+        $('body').css('overflow', 'auto');
+      }
+    },
+    'show' (val) {
+      this.$emit('onShowMenu', val)
     }
   },
   async mounted () {
@@ -196,17 +214,6 @@ export default {
     //
 
   },
-  watch: {
-    '$route' (to, from) {
-      this.is_active = to.meta.tag;
-      this.show = false;
-    },
-    'is_xs' (val) {
-      if (!val) {
-        $('body').css('overflow', 'auto');
-      }
-    },
-  },
   methods: {
     splitProductList (products) {
       const maxLength = 5; // 超过5个需要拆分