@import './variables.scss';
#app {
	// 主体区域
	.main-container {
		position: relative;
		min-height: 100%;
		width: calc(100% -180px);
		background-color: #EFEFEF;
		transition: margin-left .28s;
		margin-left: 180px;
	}
	.main-content {
		// width: 1500px;
		margin: 0 auto;
	}
	.header-content {
		width: 1500px;
		margin: 0 auto;
		height: 100%;
		// padding: 0 20px;
		// background: rgba(255,255,255,.1);
	}
	// 顶边栏
	.header-sidebar-container {
		width: 100%;
		// height: 60px;
		position: relative;
		// background-color: #DF3434;
		color: #404040;
		top: 0;
		left: 0;
		font-size: 18px;
		z-index: 1001;
		// overflow: hidden;
		.svg-icon {
			color: #000;
			margin-right: 16px;
		}
		.el-menu {
			display: inline-block;
			border: none;
			height: 84px;
			vertical-align: bottom;
			a,.el-submenu {
				display: inline-block;
				float: left;	
			}
			.el-submenu__icon-arrow {
				position: static;
				vertical-align: middle;
				margin-left: 8px;
				margin-top: -3px;
			}
			.el-menu-item, .el-submenu__title {
				i {
					color: #ffffff;
				}
				height: 84px;
				line-height: 84px;
				font-size: 16px;
				padding:0 25px;
				&:hover {
					background-color: $menuHover !important;
				}
			}
		}
		.is-active {
			// border-bottom: 3px solid #fff;
			// border-bottom:0;
			background-color: $menuHover !important;
		}
		// menu hover
		// .submenu-title-noDropdown,
		// .el-submenu__title {
		// 	i {
		// 		color: #ffffff;
		// 	}
		// 	&:hover {
		// 		background-color: $menuHover !important;
		// 	}
		// }
		// .is-active>.el-submenu__title {
		//   color: $subMenuActiveText !important;
		// }
	
		// & .nest-menu .el-submenu>.el-submenu__title,
		// & .el-submenu .el-menu-item {
		//   min-width: $sideBarWidth !important;
		//   background-color: $subMenuBg !important;
	
		//   &:hover {
		// 	background-color: $subMenuHover !important;
		//   }
		// }
	}
	// 侧边栏
	.sidebar-container {
		transition: width 0.28s;
		width: 180px !important;
		height: calc(100% - 84px);
		position: absolute;
		font-size: 0px;
		top: 84px;
		bottom: 0;
		left: 0;
		z-index: 1001;
		overflow: hidden;
		//reset element-ui css
		.horizontal-collapse-transition {
			transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
		}
		.scrollbar-wrapper {
			height: calc(100% + 15px);
			.el-scrollbar__view {
			height: 100%;
			}
		}
		.is-horizontal {
			display: none;
		}
		a {
			display: inline-block;
			width: 100%;
			overflow: hidden;
		}
		.svg-icon {
			margin-right: 16px;
		}
		.el-menu {
			border: none;
			height: 100%;
			width: 100% !important;
			// background-image: url("../../static/bg.png");
			background-repeat: no-repeat;
			background-size: 100% 100%;
			li {
				&:hover {
					color: #DF3434;
					background-color: #fff !important;
				}
			}
		}
		.is-active {
			border-left: 3px solid #DF3434;
			color: #DF3434;
			border-bottom:0;
			background-color: #fff !important;
		}
	}
	.openSidebar {
		height: calc(100% - 84px);
	}
	.hideSidebar {
		height: calc(100% - 84px);
		.sidebar-container {
		  width: 60px !important;
		}
		.main-container {
		  margin-left: 60px;
		}
		.submenu-title-noDropdown {
		  padding-left: 10px !important;
		  position: relative;
		  .el-tooltip {
			padding: 0 10px !important;
		  }
		}
		.el-submenu {
		  overflow: hidden;
		  &>.el-submenu__title {
			padding-left: 10px !important;
			.el-submenu__icon-arrow {
			  display: none;
			}
		  }
		}
		.el-menu--collapse {
		  .el-submenu {
			&>.el-submenu__title {
			  &>span {
				height: 0;
				width: 0;
				overflow: hidden;
				visibility: hidden;
				display: inline-block;
			  }
			}
		  }
		}
	}
	//适配移动端
	.mobile {
	.main-container {
		margin-left: 0px;
	}
	.sidebar-container {
		transition: transform .28s;
		width: 180px !important;
	}
	&.hideSidebar {
		.sidebar-container {
		transition-duration: 0.3s;
		transform: translate3d(-180px, 0, 0);
		}
	}
	}
	.withoutAnimation {
		.main-container,
		.sidebar-container {
			transition: none;
		}
	}
}
.el-menu--horizontal {
	// width: 100% !important;
	// left: 0 !important;
	background: transparent;
	.el-menu--popup-bottom-start {
		&::before {
			content: " ";
			position: absolute;
			width: 15px;
			height: 15px;
			top: -8px;
			transform: translateX(-50%) rotate(45deg);
			left: 50%;
			background: #fff;
			border-top: 1px solid #DFDFDF;
			border-left: 1px solid #DFDFDF;
			
		}
	}
	.el-menu--popup-right-start {
		left: 10px;
		&::before {
			content: " ";
			position: absolute;
			width: 15px;
			height: 15px;
			top: 20%;
			transform:  rotate(-135deg);
			left: -8px;
			background: #fff;
			border-top: 1px solid #DFDFDF;
			border-right: 1px solid #DFDFDF;
			
		}
	}
	.el-menu--popup {
		transform: translateY(-20px);
		background: #FFFFFF !important;
		text-align: center;
		border: 1px solid #DFDFDF;
		box-shadow: 0px 5px 6px 0px rgba(0, 0, 0, 0.5);
		border-radius: 7px;
		padding: 10px 0px;
		min-width: 160px;
		.el-submenu {
			.el-submenu__title {
				color: #333333 !important;
				&:hover {
					color:#1A5C7D !important;
					font-weight: 600;
					font-size: 16px;
					background-color: #fff !important;
				}
			}
			
			.el-submenu__icon-arrow {
				top: 55%;
				color: rgb(26, 26, 26);
			}
		}
		.is-active {
			// border-bottom: 2px solid #fff;
			font-weight: 600;
			background-color: #fff !important;
		}
		.el-menu-item {
			color: #333333 !important;
			&:hover {
				color:#1A5C7D !important;
				font-weight: 600;
				font-size: 16px;
				background-color: #fff !important;
			}
		}
	}
	
}