element el-menu自定义样式

效果：

代码：

	

		
			

				


					

						
							
							导航一
						

						
							
								选项1
							
							
								选项2
							
						


					

					

						
							
							导航2
						

						
							
								选项3
							
							
								选项4
							
						


					




				

			
			
				Main
			
		

	



	export default {
		name: "Home",
		data() {
			return {
				wth: '237px'
			}
		},
		methods: {
			handleOpen(key, keyPath) {
				console.log(key, keyPath);
			},
			handleClose(key, keyPath) {
				console.log(key, keyPath);
			}
		}
	}



	.el-header {
		background-color: #B3C0D1;
		color: #333;
		text-align: center;
		height: 60px;
		line-height: 60px;
		text-align: center;
	}

	.el-aside {
		width: 237px;
		height: 1080px;
		background-image: url(../../assets/left-bg.png);
		background-size: 100% 100%;
		/* background-color: #0055ff; */
		color: #333;
		text-align: center;
	}

	.el-main {
		background-color: #E9EEF3;
		color: #333;
		text-align: center;
	}



	.item-view {
		padding-left: 1px;
		padding-right: 1px;
		margin-top: 1px;
	}

	.el-submenu {
		margin-top: 1px;
	}

	.el-submenu .el-menu-item {
		height: 100px;
		line-height: 100px;
		padding: 0 0px;
		padding-left: 0px;
		min-width: 0 !important;
	}

	.el-submenu__title {
		background-color: #0263a3;
		color: #FFFFFF;
	}

	.el-submenu__title:focus,
	.el-submenu__title:hover {
		outline: 0;
		background-color: #0263a3;
	}

	.el-menu-item {
		color: #FFFFFF;
		padding-left: 0 !important;
		background-color: rgba(2, 101, 154, 0.5);
	}

	.el-menu-item:focus,
	.el-menu-item:hover {
		outline: 0;
		background-color: #0263a3;
		color: #FFFFFF;
	}

	.el-menu {
		/* border-right:0px !important; */
		width: 237px;
		background-color: transparent;
	}

	.el-aside {
		color: #FFFFFF;
	}