feat: 兼容手机端 & LayoutLeft

src/layout/LayoutLeft/index.scss

@@ -1,7 +1,9 @@
 @import "../layout_common";
 .#{$prefix}layout-wrap--left {
+	position: relative;
   width: 100%;
   height: 100%;
+	overflow-x: hidden;
   .#{$prefix}layout-aside {
     width: auto;
     background-color: var(--el-menu-bg-color);

src/layout/LayoutLeft/index.vue

@@ -1,8 +1,8 @@
 <!-- 左侧菜单模式:left -->
 <template>
 	<el-container class="le-layout-wrap--left">
-		<el-aside class="le-layout-aside">
-			<div class="aside-box" :style="{ width: isCollapse ? '65px' : '210px' }">
+		<el-aside class="le-layout-aside transition-all-300 aside-m" :class="isCollapse ? 'aside-m--hidden' : ''">
+			<div class="aside-box transition-all-300" :style="{ width: isCollapse ? '65px' : '210px' }">
 				<div class="logo">
 					<SvgIcon class="logo-img sidebar-logo" icon-class="logo" />
 					<!--					<img class="logo-img" src="@/assets/icons/logo.svg" alt="logo" />-->
@@ -22,6 +22,11 @@
 				</el-scrollbar>
 			</div>
 		</el-aside>
+		<div
+			class="min-m:hidden absolute left-0 top-0 h-full w-full bg-[rgba(0,0,0,0.2)] layout-mobile-sider-mask transition-all-300"
+			:class="isCollapse ? 'hidden' : ''"
+			@click.stop="setting.changeCollapse(true)"
+		/>
 		<el-container>
 			<el-header class="le-layout-header">
 				<ToolBarLeft />

src/layout/components/Header/components/AuthProduct.vue

@@ -3,7 +3,7 @@
 		<el-tooltip :content="$t('le.authProduct')" effect="dark" placement="bottom">
 			<div class="menu--search menu-item le-hover-effect--bg" @click="jumpAuthPage">
 				<SvgIcon icon-class="auth-product" />
-				<span style="font-size: 20px; color: #3293ed; display: inline-block; margin-left: 3px">采购授权</span>
+				<span class="inline-block max-m:hidden" style="font-size: 20px; color: #3293ed; margin-left: 3px">采购授权</span>
 			</div>
 		</el-tooltip>
 	</div>

src/layout/components/Header/components/Avatar.vue

@@ -1,9 +1,9 @@
 <template>
 	<el-dropdown class="menu--avatar-wrap" trigger="click">
 		<div class="menu--avatar menu-item le-hover-effect--bg">
-			<span class="nickname">{{ userInfo.username || '' }}</span>
+			<span class="nickname text-overflow_ellipsis_line_1 max-w-12">{{ userInfo.username || '' }}</span>
 			<el-avatar v-if="userInfo.avatar" :size="30" :src="userInfo.avatar" class="user-avatar" />
-			<ArrowDown style="width: 0.6em; height: 0.6em; margin-left: 5px; font-size: 24px" />
+			<!--	<ArrowDown style="width: 0.6em; height: 0.6em; margin-left: 5px; font-size: 24px" />-->
 		</div>
 
 		<template #dropdown>
@@ -64,11 +64,12 @@ function logout() {
 			font-size: 14px;
 		}
 		.user-avatar {
+			flex-shrink: 0;
 			cursor: pointer;
 			width: 26px;
 			height: 26px;
 			border-radius: 50%;
-			margin-left: 8px;
+			margin-left: 4px;
 		}
 
 		.el-icon-caret-bottom {

src/layout/components/Header/components/Breadcrumb.vue

@@ -1,5 +1,5 @@
 <template>
-	<div :class="['breadcrumb-box']">
+	<div :class="['breadcrumb-box flex max-m:hidden']">
 		<el-breadcrumb separator-icon="ArrowRight">
 			<transition-group name="breadcrumb">
 				<!--				<el-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="item.path">-->
@@ -72,7 +72,7 @@ const onBreadcrumbClick = (item: RouteMenu.Item, index: number) => {
 
 <style scoped lang="scss">
 .breadcrumb-box {
-	display: flex;
+	//display: flex;
 	align-items: center;
 	overflow: hidden;
 	margin-left: 6px;

src/layout/layout_common.scss

@@ -1,2 +1,27 @@
 $header_height: 55px;
-$header_index: 2;
+$header_index: 2;
+
+// 小屏情况下样式
+@media (max-width: 750px) {
+	// le-layout-aside
+	.le-layout-aside {
+		&.aside-m {
+			z-index: 4;
+			position: absolute;
+			top: 0;
+			left: 0;
+			height: 100%;
+			//width: max-content;
+			&--hidden {
+				//width: 0;
+				left: -100%;
+				/*.aside-box {
+					width: 0;
+				}*/
+			}
+		}
+	}
+}
+.layout-mobile-sider-mask {
+	z-index: 3;
+}