蓝色背景

src/layout/components/Sidebar/index.vue

@@ -22,21 +22,7 @@
       </el-menu>
     </el-scrollbar>
 
-      <!-- 子菜单容器 -->
-    <div v-if="submenuItems.length > 0" class="submenu-container">
-    <div class="submenu-wrapper">
-      <template v-for="(child, index) in submenuItems" :key="child.path + index">
-        <div v-if="!child.hidden" class="submenu-item" :class="[child.fullPath === route.fullPath ? 'active-submenu-item' : '']" @click="remberChild(child)">
-          <app-link :to="child.fullPath"> <!-- 使用完整路径 -->
-            <div class="submenu-link" >
-              <svg-icon :icon-class="child.meta.icon" />
-              <span>{{ child.meta.title }}</span>
-            </div>
-          </app-link>
-        </div>
-      </template>
-    </div>
-  </div>
+  
 
     <div class="right-menu">
       <!-- 这里可以放用户信息、设置按钮等 -->
@@ -61,6 +47,23 @@
         </el-dropdown>
     </div>
   </div>
+      <!-- 子菜单容器 -->
+
+    <div v-if="submenuItems.length > 0" class="submenu-container">
+      <div class="submenu-wrapper">
+        <template v-for="(child, index) in submenuItems" :key="child.path + index">
+          <div v-if="!child.hidden" class="submenu-item" :class="[child.fullPath === route.fullPath ? 'active-submenu-item' : '']" @click="remberChild(child)">
+            <app-link :to="child.fullPath"> <!-- 使用完整路径 -->
+              <div class="submenu-link" >
+                <svg-icon :icon-class="child.meta.icon" />
+                <span>{{ child.meta.title }}</span>
+              </div>
+            </app-link>
+          </div>
+        </template>
+      </div>
+    </div>
+
 </template>
 
 <script setup>
@@ -228,6 +231,7 @@ function logout() {
 
 <style lang="scss" scoped>
 .horizontal-navbar {
+  background: rgba(33, 103, 217, 1);
   display: flex;
   align-items: center;
   height: var(--navbar-height);
@@ -275,34 +279,7 @@ function logout() {
     align-items: center;
 }
   }
-  .submenu-container {
-    position: absolute;
-    left: 0;
-    top: 80px;
-    width: 100%;
-    height: 50px;
-    .submenu-wrapper {
-      height: 100%;
-      background: rgba(255, 255, 255, 1);
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      .submenu-item {
-        margin-left: 66px;
-        &:first-child {
-          margin-left: 0;
-        }
-        &:hover {
-          color: rgba(33, 103, 217, 1);
-          cursor: pointer;
-        }
-      }
-      .active-submenu-item {
-         color: rgba(33, 103, 217, 1);
-          cursor: pointer;
-      }
-    }
-  }
+
 
 
 .avatar-container {
@@ -339,6 +316,47 @@ function logout() {
       }
     }
 
+  .submenu-container {
+    // position: absolute;
+    // left: 0;
+    // top: 80px;
+    width: 100%;
+    height: 50px;
+    .submenu-wrapper {
+      height: 100%;
+      background: rgba(255, 255, 255, 1);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      .submenu-item {
+        margin-left: 66px;
+        &:first-child {
+          margin-left: 0;
+        }
+        &:hover {
+          color: rgba(33, 103, 217, 1);
+          cursor: pointer;
+        }
+      }
+      .active-submenu-item {
+         color: rgba(33, 103, 217, 1);
+          cursor: pointer;
+      }
+    }
+  }
+    /* 过渡效果 */
+.slide-fade-enter-active {
+  transition: all 0.3s ease-out;
+}
+
+.slide-fade-leave-active {
+  transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
+}
+
+.slide-fade-enter-from,
+.slide-fade-leave-to {
+  transform: translateY(-20px);
+  opacity: 0;
+}
 
-    
 </style>
\ No newline at end of file

src/layout/index.vue

@@ -137,7 +137,6 @@ function setLayout() {
     
     .top-nav-container {
       width: 100%;
-      background: rgba(33, 103, 217, 1);
       box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
       z-index: 10;
     }