feat: 混合布局

src/layout/components/Header/components/theme-settings/index.vue

@@ -174,7 +174,7 @@ const handleCancel = () => {
     content: "";
     position: absolute;
     left: 0;
-    width: 20px;
+    width: 10px;
     height: 100%;
     background: #232324;
   }
@@ -184,9 +184,9 @@ const handleCancel = () => {
     position: absolute;
     right: 0;
     top: 0;
-    width: 50px;
-    height: 15px;
-    background: #fff;
+    width: 60px;
+    height: 10px;
+    background: #c2c4c8;
   }
 }
 
@@ -198,7 +198,7 @@ const handleCancel = () => {
     position: absolute;
     top: 0;
     width: 100%;
-    height: 15px;
+    height: 10px;
     background: #232324;
   }
 }
@@ -211,7 +211,7 @@ const handleCancel = () => {
     position: absolute;
     top: 0;
     width: 100%;
-    height: 15px;
+    height: 10px;
     background: #232324;
   }
 
@@ -219,9 +219,9 @@ const handleCancel = () => {
     content: "";
     position: absolute;
     left: 0;
-    top: 15px;
-    width: 20px;
-    height: calc(100% - 15px);
+    top: 10px;
+    width: 10px;
+    height: calc(100% - 10px);
     background: #232324;
   }
 }

src/layout/layout-mixing/index.vue

@@ -68,11 +68,8 @@ console.log("路由信息", route);
 // 混合布局的横向菜单为顶层路由下的一级菜单
 // 这里通过当前路由信息直接获取
 const aciveRoute = computed(() => {
-  if (route.matched.length >= 2) {
-    return route.matched[1].name;
-  } else {
-    return route.matched[0].name;
-  }
+  getAsideMenu(route.matched[1].name as string);
+  return route.matched[1].name;
 });
 
 // 横向菜单点击事件
@@ -108,7 +105,7 @@ const getAsideMenu = (key: string) => {
   const find = findLinearArray(key);
   setAsideMenu(find);
 };
-getAsideMenu(aciveRoute.value as string);
+// getAsideMenu(aciveRoute.value as string);
 </script>
 
 <style lang="scss" scoped>