element el-menu自定义样式

效果：

代码：

<template>
	<div class="">

		<el-container>
			<el-aside width="wth">

				<el-menu default-active="1" :unique-opened="true" @open="handleOpen" @close="handleClose">


					<el-submenu index="1">

						<template slot="title">
							<i class="el-icon-location"></i>
							<span>导航一</span>
						</template>

						<el-row :gutter="1" class="item-view">
							<el-col :span="12">
								<el-menu-item index="1-1">选项1</el-menu-item>
							</el-col>
							<el-col :span="12">
								<el-menu-item index="1-2">选项2</el-menu-item>
							</el-col>
						</el-row>


					</el-submenu>

					<el-submenu index="2">

						<template slot="title">
							<i class="el-icon-location"></i>
							<span>导航2</span>
						</template>

						<el-row :gutter="1" class="item-view">
							<el-col :span="12">
								<el-menu-item index="2-1">选项3</el-menu-item>
							</el-col>
							<el-col :span="12">
								<el-menu-item index="2-2">选项4</el-menu-item>
							</el-col>
						</el-row>


					</el-submenu>




				</el-menu>

			</el-aside>
			<el-container>
				<el-main>Main</el-main>
			</el-container>
		</el-container>

	</div>
</template>

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

<style>
	.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;
	}
</style>