💄 手机端菜单修改

src/components/NavBar.vue

@@ -1,10 +1,41 @@
 <template>
+  <!-- 移动端菜单 -->
+  <div class="mobile-menu">
+    <IconMenu 
+      :openState="mobileMenuShow"
+      @click="mobileMenuShow = !mobileMenuShow"
+    />
+    <Teleport to="body">
+      <div 
+        v-show="mobileMenuShow"
+        :class="[
+          'mobile-menu-popover',
+          mobileMenuShow ? 'visible' : '',
+        ]"
+        @click="mobileMenuShow=false"
+      >
+        <div>
+          <RouterLink to="/">首页</RouterLink>
+          <RouterLink to="/news">资讯动态</RouterLink>
+          <RouterLink to="/introduction">文化概况</RouterLink>
+          <RouterLink to="/inheritor">保护传承</RouterLink>
+          <RouterLink to="/communicate">传播交流</RouterLink>
+          <RouterLink to="/research">理论研究</RouterLink>
+          <RouterLink to="/fusion">文旅融合</RouterLink>
+          <RouterLink to="/about">关于我们</RouterLink> 
+        </div>
+      </div>
+    </Teleport>
+  </div>
+
+  <!-- 导航栏 -->
   <nav 
     :class="[
       headerBlur ? 'need-blur' : '',
       scrollValue > 200 ? 'nav-scrolled' : 'nav-not-scrolled',
     ]"
   >
+    <div></div>
     <div class="group">
       <RouterLink to="/">首页</RouterLink>
       <RouterLink to="/news">资讯动态</RouterLink>
@@ -26,30 +57,7 @@
       <RouterLink to="/fusion">文旅融合</RouterLink>
       <RouterLink to="/about">关于我们</RouterLink> 
     </div>
-
-    <!-- 移动端菜单 -->
-    <div class="mobile-menu">
-      <IconMenu 
-        :openState="mobileMenuShow"
-        @click="mobileMenuShow = !mobileMenuShow"
-      />
-      <div 
-        :class="[
-          'mobile-menu-popover',
-          mobileMenuShow ? 'visible' : '',
-        ]"
-        @click="mobileMenuShow=false"
-      >
-        <RouterLink to="/">首页</RouterLink>
-        <RouterLink to="/news">资讯动态</RouterLink>
-        <RouterLink to="/introduction">文化概况</RouterLink>
-        <RouterLink to="/inheritor">保护传承</RouterLink>
-        <RouterLink to="/communicate">传播交流</RouterLink>
-        <RouterLink to="/research">理论研究</RouterLink>
-        <RouterLink to="/fusion">文旅融合</RouterLink>
-        <RouterLink to="/about">关于我们</RouterLink> 
-      </div>
-    </div>
+    <div></div>
   </nav>
 </template>
 
@@ -172,34 +180,52 @@ nav {
       }
     }
   }
-  .mobile-menu {
-    display: none;
-  }
-  .mobile-menu-popover {
-    display: none;
-    flex-direction: column;
-    position: absolute;
-    top: $nav-height;
-    right: 0;
-    left: 0;
-    background-color: $box-color;
-    border-bottom: $border-grey-color;
-    color: $text-color;
-    padding: 14px 0;
+}
+
+.mobile-menu {
+  display: none;
+  position: fixed;
+  left: 25px;
+  top: 20px;
+  z-index: 120;
+  width: 30px;
+  height: 30px;
+  color: $text-color-light;
+}
+.mobile-menu-popover {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: $box-color;
+  border-bottom: $border-grey-color;
+  color: $text-color;
+  z-index: 101;
+  background-color: rgba(#000, 0.1);
 
-    animation: mobile-menu-popover-fade 0.3s ease-in-out;
+  > div {
+    display: flex;
+    flex-direction: column;
+    padding-top: $nav-height;
+    height: 100%;
+    width: 190px;
+    text-align: center;
+    background-color: #FBF8F3;
+  }
 
-    a {
-      line-height: 40px;
-      height: 40px;
-      width: 100%;
-      color: $text-color;
-    }
+  font-family: SourceHanSerifCNBold;
+  animation: mobile-menu-popover-fade 0.3s ease-in-out;
 
-    &.visible {
-      display: flex; 
+  a {
+    line-height: 40px;
+    height: 40px;
+    width: 100%;
+    color: $text-color;
+  }
 
-    }
+  &.visible {
+    display: flex; 
   }
 }
 
@@ -229,14 +255,54 @@ nav {
     .group:not(.center) {
       display: none;
     }
-    .mobile-menu {
-      display: block;
-    } 
+    .headerlogos > div {
+      display: initial;
+    }
+  }
+  .mobile-menu {
+    display: block;
+  } 
+}
+@media (max-width: 550px) {
+  nav {
+    .headerlogos {
+      img {
+        width: 35px;
+        height: 35px; 
+        margin-right: 7px;
+      }
+      > div {
+        display: initial;
+        margin-bottom: 0;
+
+        p {
+          font-size: 0.7rem;
+          height: 20px;
+
+          span {
+            font-size: 0.7rem;
+            margin-left: 10px;
+          }
+          &.large {
+            height: 23px;
+            font-size: 1.4rem;
+            letter-spacing: -0.1rem;
+          }
+        }
+      }
+    }
+  }
+}
+@media (max-width: 388px) {
+  nav {
+    .headerlogos > div {
+      display: none;
+    }
   }
 }
 
 @keyframes mobile-menu-popover-fade {
-  0% { opacity: 0; transform: translateY(-10px); }
-  100% { opacity: 1; transform: translateY(0); }
+  0% { opacity: 0; transform: translateX(-100px); }
+  100% { opacity: 1; transform: translateX(0); }
 }
 </style>

src/components/icons/IconMenu.vue

@@ -21,11 +21,14 @@ defineProps({
 </script>
 
 <style lang="scss">
+@use '@/assets/scss/colors.scss' as *;
+
 .icon-menu {
   path {
     transition: all 0.3s;
   }
   &.open {
+    color: $primary-color;
     .line1 {
       transform: rotate(45deg) translate(25%, -25%);
     }