尔泓菜单样式更改

src/components/headerBar/header.scss

@@ -7,6 +7,7 @@
 	background: rgba(0, 0, 0, 0.5);
 	z-index: 1100;
 }
+
 .header-bar {
 	background: #20222a;
 	position: fixed;
@@ -14,18 +15,22 @@
 	left: 0;
 	right: 0;
 	z-index: 1100;
+
 	ul,
 	li {
 		list-style: none;
 		padding: 0;
 	}
+
 	.avatar-wrapper {
 		margin-top: 10px;
 	}
+
 	.menu-modal {
 		cursor: pointer;
 		font-weight: 400;
 	}
+
 	.header-bar-hover {
 		position: fixed;
 		z-index: 1050;
@@ -35,15 +40,19 @@
 		background: #fff;
 		box-shadow: 0px 3px 10px 1px rgba(0, 0, 0, 0.1);
 		height: 500px;
+
 		.header-bar-hover-content {
 			display: flex;
 			text-align: left;
+
 			.left-banner {
 				width: 230px;
 				height: 500px;
 				overflow-y: auto;
+
 				ul {
 					background: #f1f1f1;
+
 					li {
 						height: 50px;
 						line-height: 50px;
@@ -51,11 +60,13 @@
 						font-size: 12px;
 						cursor: pointer;
 					}
-					li.active{
+
+					li.active {
 						color: #0084FF;
 						background-color: #D9EDFF;
 					}
 				}
+
 				.first-order {
 					height: 50px;
 					padding: 0 20px;
@@ -64,6 +75,7 @@
 					font-weight: bold;
 					background: #f9f9f9;
 					cursor: pointer;
+
 					i {
 						position: relative;
 						top: 3px;
@@ -71,6 +83,7 @@
 					}
 				}
 			}
+
 			.el-alert {
 				line-height: 20px;
 				text-align: center;
@@ -78,35 +91,43 @@
 				color: #666666;
 				font-weight: 400;
 				margin-bottom: 20px;
+
 				i {
 					color: #46a6ff;
 				}
 			}
 		}
+
 		.menu-warp {
 			width: calc(100vw - 230px);
 			background: #fff;
-			overflow: hidden;
+			// overflow: hidden;
 			box-sizing: border-box;
 			padding: 0 40px;
 			height: 500px;
-			overflow-y: auto;
-			.btn-warp{
+			// overflow-y: auto;
+			overflow: auto;
+
+
+			.btn-warp {
 				margin: 40px 0 20px;
 			}
-			.all-menu-warp{
+
+			.all-menu-warp {
 				overflow-y: auto;
-				
-				.all-menu-title{
+
+				.all-menu-title {
 					overflow: hidden;
 				}
-				.title{
+
+				.title {
 					margin-bottom: 10px;
 					color: #999999;
 					font-size: 14px;
 				}
 			}
-			.header-button-box{
+
+			.header-button-box {
 				width: 140px;
 				height: 40px;
 				background: #EEEEEE;
@@ -122,14 +143,16 @@
 				font-size: 14px;
 				margin-bottom: 10px;
 				float: left;
-				i{
+
+				i {
 					position: relative;
 					top: 2px;
 					cursor: pointer;
 				}
-				
+
 			}
-			.header-add-button-box{
+
+			.header-add-button-box {
 				width: 140px;
 				height: 40px;
 				background: #fff;
@@ -146,15 +169,18 @@
 				text-align: center;
 				float: left;
 				cursor: pointer;
-				i{
+
+				i {
 					position: relative;
 					top: 2px;
 					cursor: pointer;
 				}
 			}
-			.commons-warp{
+
+			.commons-warp {
 				overflow: hidden;
 			}
+
 			.first-order-title {
 				height: 55px;
 				line-height: 55px;
@@ -162,6 +188,7 @@
 				font-size: 15px;
 				font-weight: bold;
 			}
+
 			.second-level {
 				height: 420px;
 				display: flex;
@@ -171,6 +198,7 @@
 				flex-basis: auto;
 				float: left;
 			}
+
 			.menu-title {
 				font-weight: 600;
 				color: #0084ff;
@@ -179,18 +207,20 @@
 				border-bottom: 1px solid #ddd;
 				font-size: 14px;
 				width: 140px;
-				margin: 0 100px 0 0;
+				margin: 0 5vw 0 0;
+
 				i {
 					position: relative;
 					top: 3px;
 					margin-right: 5px;
 				}
 			}
+
 			.menu-ul {
 				float: left;
 				width: 140px;
 				list-style: none;
-				margin: 0 100px 0 0;
+				margin: 0 5vw 0 0;
 				padding: 0;
 				height: 36px;
 				line-height: 36px;
@@ -198,55 +228,62 @@
 				font-weight: 400;
 				cursor: pointer;
 			}
+
 			.menu-ul:hover {
 				color: #0084ff;
 			}
 		}
 	}
+
 	.nav {
 		display: flex;
 		padding: 0;
 		margin: 0;
 		height: 50px;
-		
-		.auto-list{
+
+		.auto-list {
 			width: calc(100vw - 616px);
-			li{
+
+			li {
 				float: left;
 			}
-			.more-box{
+
+			.more-box {
 				position: relative;
-				
-				.more-list{
+
+				.more-list {
 					width: 120px;
 					position: absolute;
 					background: #FFFFFF;
-					box-shadow: 0px 2px 20px 1px rgba(0,0,0,0.1);
+					box-shadow: 0px 2px 20px 1px rgba(0, 0, 0, 0.1);
 					border-radius: 2px 2px 2px 2px;
 					opacity: 1;
 					z-index: 10001111;
 					color: #666666;
 					padding-top: 10px;
 					display: none;
-					li{
+
+					li {
 						width: 100%;
 						height: 40px;
 						line-height: 40px;
 						font-size: 14px;
 					}
-					li:hover{
+
+					li:hover {
 						background-color: #EFF6FF;
 						color: #0084FF;
 					}
 				}
 			}
-			
-			.more-box:hover{
-				.more-list{
+
+			.more-box:hover {
+				.more-list {
 					display: block;
 				}
 			}
 		}
+
 		.logo {
 			color: #fff;
 			font-size: 20px;
@@ -255,6 +292,7 @@
 			margin: 0 20px;
 			min-width: 120px
 		}
+
 		.nav-li {
 			width: 120px;
 			height: 50px;
@@ -265,25 +303,31 @@
 			list-style: none;
 			color: #fff;
 			cursor: pointer;
+
 			a {
 				color: #fff;
 			}
 		}
+
 		.nav-li.active {
 			background: #0084ff;
 			color: #fff;
+
 			a {
 				color: #fff;
 			}
 		}
-		.nav-li:hover{
+
+		.nav-li:hover {
 			background: #444;
 
 		}
-		.nav-li.active:hover{
+
+		.nav-li.active:hover {
 			background: #0084ff;
 		}
 	}
+
 	header {
 		z-index: 11205;
 		left: 0;
@@ -292,33 +336,40 @@
 		height: 50px;
 		display: flex;
 		justify-content: space-between;
+
 		.fr {
 			max-width: 336px;
 			display: flex;
+
 			.input-search {
 				margin: 12px 40px 12px 0;
 				width: 240px;
+
 				input {
 					height: 30px;
 				}
 			}
+
 			.dropdown-box {
 				margin-right: 12px;
 				line-height: 50px;
 				cursor: pointer;
 				width: fit-content;
-				white-space:nowrap;
-				overflow:hidden;
-				text-overflow:ellipsis;
+				white-space: nowrap;
+				overflow: hidden;
+				text-overflow: ellipsis;
 			}
+
 			.badge {
 				margin: 15px 24px 15px 0;
 				height: 20px;
 				width: 20px;
+
 				i {
 					color: #bbbbbb;
 				}
 			}
+
 			.user-img {
 				margin: 12px 12px 12px 0;
 			}
@@ -326,6 +377,6 @@
 	}
 }
 
-header > a {
+header>a {
 	margin: 0 20px;
 }