aizuda-web-vue3/src/styles/sidebar.scss

@import "mixins";
:root {
	--el-menu-item-height: 42px;
	--el-menu-sub-item-height: 42px;
	--el-menu-hover-bg-color: transparent;
}

.el-menu--horizontal .el-menu .el-menu-item,
.el-menu--horizontal .el-menu .el-sub-menu__title {
	//--el-menu-horizontal-sub-item-height: 42px;
	height: 42px;
	line-height: 42px;
	.le-pick-icon {
		font-size: 18px;
		margin-right: 4px;
	}
}

$active_color: var(--el-menu-active-color);
// 公用的 菜单样式
.layout-menu-wrap, .layout-menu-popper-wrap, .layout-wrap--columns {
	// 折叠情况
	&.el-menu--collapse {
		.le-pick-icon {
			margin-right: 0;
		}
		// 折叠后无子菜单 样式类
		.el-menu-tooltip__trigger {
			justify-content: center;
		}
	}
	.le-pick-icon {
		margin-right: 4px;
		font-size: 18px;
	}
	.el-sub-menu {
		&.is-active {
			& > .el-sub-menu__title {
				//color: var(--el-menu-active-color);
				color: $active_color;
			}
		}
	}
	.el-menu-item,
	.el-sub-menu__title {
		margin-top: 5px;
	}
	.el-menu-item.is-active {
		color: $active_color;
		&::before {
			background-color: $active_color;
		}
	}
	.el-menu-item:hover {
		&::before {
			background-color: $active_color;
		}
	}
	.el-sub-menu__title:hover {
		&::before {
			background-color: $active_color;
		}
	}
	.el-menu-item,
	.el-sub-menu__title {
		@include hover-bg-opacity(8px, $active_color);
	}
}

// 菜单折叠情况:
// 由于 vertical collapsed 出现样式问题 进行隐藏
.layout-menu-popper-wrap.el-menu--vertical,
.layout-menu-popper-wrap.el-menu--horizontal {
	// el-menu--horizontal: layout-top 模式
	// el-menu--vertical: layout-vertical 模式
	& > .el-menu {
		/*.svg-icon {
			margin-right: 16px;
		}*/
	}

	// 子菜单太长时出现滚动条
	> .el-menu--popup {
		max-height: 60vh;
		overflow-y: auto;
		&::-webkit-scrollbar{width:2px;height:2px}
		&::-webkit-scrollbar-track{border-radius:2px;background: $le-bg-color_1;}
		& > li:first-child {
			margin-top: 0;
		}
	}
}