fix: 布局方式调整

src/layout/components/Settings/index.vue

@@ -31,9 +31,9 @@
 		<div class="layout-box">
 			<el-tooltip effect="dark" content="左侧菜单模式" placement="top" :show-after="200">
 				<div :class="['layout-item layout-left', { 'is-active': layout == 'left' }]" @click="setLayout('left')">
-					<div class="layout-dark"></div>
+					<div class="layout-light"></div>
 					<div class="layout-container">
-						<div class="layout-light"></div>
+						<div class="layout-dark"></div>
 						<div class="layout-content"></div>
 					</div>
 					<el-icon v-if="layout == 'left'">
@@ -43,9 +43,12 @@
 			</el-tooltip>
 			<el-tooltip effect="dark" content="左侧菜单混合模式" placement="top" :show-after="200">
 				<div :class="['layout-item layout-leftMix', { 'is-active': layout == 'leftMix' }]" @click="setLayout('leftMix')">
-					<div class="layout-dark"></div>
 					<div class="layout-light"></div>
-					<div class="layout-content"></div>
+					<div class="layout-light light-2"></div>
+					<div class="layout-container">
+						<div class="layout-dark"></div>
+						<div class="layout-content"></div>
+					</div>
 					<el-icon v-if="layout == 'leftMix'">
 						<CircleCheckFilled />
 					</el-icon>
@@ -313,7 +316,7 @@ const setLayout = (val: LayoutType) => {
 			display: flex;
 			justify-content: space-between;
 			margin-bottom: 20px;
-			.layout-dark {
+			.layout-light {
 				width: 20%;
 			}
 			.layout-container {
@@ -321,7 +324,7 @@ const setLayout = (val: LayoutType) => {
 				flex-direction: column;
 				justify-content: space-between;
 				width: 72%;
-				.layout-light {
+				.layout-dark {
 					height: 20%;
 				}
 				.layout-content {
@@ -365,14 +368,24 @@ const setLayout = (val: LayoutType) => {
 			display: flex;
 			justify-content: space-between;
 			margin-bottom: 15px;
-			.layout-dark {
-				width: 14%;
-			}
 			.layout-light {
-				width: 17%;
+				width: 14%;
+				&.light-2 {
+					width: 17%;
+				}
 			}
-			.layout-content {
+			.layout-container {
+				display: flex;
+				flex-direction: column;
+				justify-content: space-between;
 				width: 55%;
+				.layout-dark {
+					height: 20%;
+				}
+				.layout-content {
+					height: 67%;
+					width: 100%;
+				}
 			}
 		}
 	}