.avue-sidebar {
	width: $sidebar_width;
	height: 100%;
	user-select: none;
	position: relative;
	height: 100%;
	position: relative;
	// background-color: $gray_main;
	transition: width .2s;
	box-sizing: border-box;
	box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
	padding-top: 70px; //偏移头部高度
	background: $color_1;

	// 侧边栏颜色
	ul[role="menubar"] {
		background-color: $color_1  !important;
	}

	ul[role="menu"] {
		background-color: $gray_main  !important;
	}

	// .el-menu{
	// 	background-color: $color_1 !important;
	// }
	.el-scrollbar__wrap {
		overflow-x: hidden;
	}

	.avue-menu {
		height: calc(100% - 10px);
	}

	&--tip {
		width: 90%;
		height: 140px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 5px;
		position: absolute;
		top: 5px;
		left: 5%;
		color: #ccc;
		z-index: 2;
		text-align: center;
		font-size: 14px;
		background-color: rgba(0, 0, 0, .4);
	}

	.el-menu-item,
	.el-submenu__title {
		transition-duration: 0.2s;
		font-size: 15px;
		height: 52px;
		line-height: 52px;

		i,
		span {
			//    color:hsla(0,0%,100%,.7);
			color: #fff;
			margin-top: -9px;
		}

		&:hover {
			background: transparent;

			i,
			span {
				// color:#fff;
				// color: #2c7bff;
				// color: #b7b7b8;  //侧边菜单 hover颜色
				color: $gray_sub;
				transition-duration: 0.2s;
			}
		}

		&.is-active {
			&:before {
				content: '';
				top: 0;
				left: 0;
				bottom: 0;
				width: 4px;
				// background: $btn_bule;  //侧边栏一条线的边框色
				position: absolute;
			}

			// background-color: rgba(0,0,0,.8);
			// background-image: linear-gradient(to right, #0a316a, #04264c);
			background: $gray_sub  !important; // 当前选中背景色

			i,
			span {
				color: #fff;
			}
		}
	}

	.el-menu-item {
		height: 46px;
		line-height: 46px;
	}
}

// 菜单展开后颜色
.avue--collapse {
	.avue-sidebar {
		.el-menu-item,
		.el-submenu__title {
			&.is-active {
				&:before {
					content: '';
					background: $gray_sub; //侧边栏一条线的边框色
				}
				// background-color: rgba(0,0,0,.8);
				// background-image: linear-gradient(to right, #0a316a, #04264c);
				background: $color_2  !important; // 当前选中背景色
				i,
				span {
					color: #fff;
				}
			}
		}
	}
}




// 悬浮弹层颜色
.el-menu--popup{
	.el-menu-item{
			height: 40px;
			line-height: 40px;
			background-color: #fff;
			i,span{
					color:#666;
			}
			&:hover{
				background-color: $color_3;
					i,span{
							color:$color_1;
					}
			}
			&.is-active {
					background-color: $color_3;
					
					&:before {
							content: '';
							top: 0;
							left: 0;
							bottom: 0;
							width: 4px;
							background: $color_3;
							position: absolute;
					}
					i,span{
							// color:#fff;
							color: $gray_main;
					}
			}
	}
}
