template:
<el-container>
<el-aside width="100px" class="aside">
<!-- 标志 -->
<img class="log" src="../../assets/static/xxxx.png" alt="xx" />
<!-- 侧边栏权限按钮 -->
<el-scrollbar>
<el-menu router :default-active="$route.path" class="el-menu-vertical-demo" collapse background-color="#C3292A">
<el-sub-menu :index="menu.path + ''" v-for="(menu, index) in menuList" :key="index"
:class="{ isActive: route.path.match(menu.path) }">
<template #title>
<el-icon>
<component :is="menu.icon"></component>
</el-icon>
<div class="menu-name">{{ menu.name }}</div>
</template>
<el-menu-item-group v-for="(item2, index) in menu.children" :key="index">
<el-menu-item :index="item2.path + ''" :router="{ path: item2.path }">{{ item2.name }}</el-menu-item>
</el-menu-item-group>
</el-sub-menu>
</el-menu>
</el-scrollbar>
<!-- 头像 -->
<div class="avatar" @click="logout">
<img class="avatar-log" :src="userAvatar || defaultImage" alt="" />
<div>{{ userName }}</div>
</div>
</el-aside>
<el-container>
less:
.aside {
background-color: var(--bg--color);
text-align: center;
.log {
width: 41px;
height: 41px;
padding-top: 20px;
margin-bottom: 20px;
}
.el-scrollbar {
height: calc(100vh - 200px);
}
.el-menu {
border: none;
border-right-width: 0;
}
.el-menu-vertical-demo {
width: 100%;
:deep(.el-sub-menu__title) {
display: flex;
flex-direction: column;
justify-content: center;
color: #ffffff;
margin: 0;
padding: 0;
height: 70px;
.el-icon {
margin: 0;
img {
width: 17.54px;
height: 16.75px;
}
}
.menu-name {
line-height: initial;
font-size: 12px;
}
}
}
.avatar {
color: #fff;
font-size: 12px;
margin: 20px 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
img {
width: 40px;
height: 40px;
border-radius: 50%;
margin: 0 5px !important;
}
}