You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
95 lines
2.1 KiB
95 lines
2.1 KiB
<template>
|
|
<div :class="{'has-logo':showLogo}">
|
|
<!-- <logo v-if="showLogo" :collapse="isCollapse" />-->
|
|
<div class="user" @click="handleUserClick">
|
|
<div class="user-pic"><el-avatar :size="50" :src="circleUrl" /></div>
|
|
<div class="user-name">程小红</div>
|
|
<div class="user-role">管理员</div>
|
|
</div>
|
|
<el-scrollbar wrap-class="scrollbar-wrapper">
|
|
<el-menu
|
|
:default-active="activeMenu"
|
|
:collapse="isCollapse"
|
|
:background-color="variables.menuBg"
|
|
:text-color="variables.menuText"
|
|
:unique-opened="false"
|
|
:active-text-color="variables.menuActiveText"
|
|
:collapse-transition="false"
|
|
mode="vertical"
|
|
>
|
|
<sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path" />
|
|
</el-menu>
|
|
</el-scrollbar>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters } from 'vuex'
|
|
// import Logo from './Logo'
|
|
import SidebarItem from './SidebarItem'
|
|
import variables from '@/styles/variables.scss'
|
|
|
|
export default {
|
|
components: { SidebarItem },
|
|
data() {
|
|
return {
|
|
circleUrl: 'https://t7.baidu.com/it/u=2006997523,200382512&fm=193&f=GIF'
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters([
|
|
'permission_routes',
|
|
'sidebar'
|
|
]),
|
|
activeMenu() {
|
|
const route = this.$route
|
|
const { meta, path } = route
|
|
// if set path, the sidebar will highlight the path you set
|
|
if (meta.activeMenu) {
|
|
return meta.activeMenu
|
|
}
|
|
return path
|
|
},
|
|
showLogo() {
|
|
return this.$store.state.settings.sidebarLogo
|
|
},
|
|
variables() {
|
|
return variables
|
|
},
|
|
isCollapse() {
|
|
return !this.sidebar.opened
|
|
}
|
|
},
|
|
methods: {
|
|
handleUserClick() {
|
|
this.$router.push('/userinfo/index')
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.user{
|
|
width: 15rem;
|
|
display: flex;
|
|
flex-direction:column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-bottom: 2rem;
|
|
div{
|
|
margin-top: 1rem;
|
|
}
|
|
.user-name{
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
color: #303133;
|
|
}
|
|
.user-role{
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
color: #AAAAAA;
|
|
}
|
|
}
|
|
|
|
</style>
|