<template>
|
<div class="layout-left-aside-compontent">
|
<div class="header">
|
<img src="@/assets/img/logo_white.png" alt="Logo" class="logo-img" v-if="!collapse" />
|
<template v-else>
|
<span class="logo-font">潍</span>
|
<span class="logo-font">柴</span>
|
</template>
|
</div>
|
<div class="menus-box">
|
<el-scrollbar>
|
<el-menu :collapse="collapse" :unique-opened="true" :default-active="defaultActiveMenuIndex" active-text-color="#ffd04b"
|
background-color="#3a405a" text-color="#bfcbd9" @select="onSelectMenu">
|
<sub-menus :menus="menus" props-text="name" props-icon="iconCls" />
|
</el-menu>
|
</el-scrollbar>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import SubMenus from './SubMenus.vue'
|
export default {
|
name:'layoutLeftAsideCompontent',
|
components:{SubMenus},
|
data(){
|
return {
|
|
}
|
},
|
computed:{
|
collapse(){
|
return this.$store.getters['system/getCollapse'];
|
},
|
menus(){
|
return this.$store.getters['user/getMenusTree'];
|
},
|
defaultActiveMenuIndex(){
|
let temp = this.$store.getters['system/getCurrentFullMenuPath']
|
let res = '';
|
if (temp.length>0) {
|
res = temp[temp.length-1].id
|
}
|
return res
|
}
|
},
|
methods:{
|
onSelectMenu(itemIndex,pathIndexArr){
|
let obj = this.$utils.getTreeItemByKeyValues(this.menus,pathIndexArr,'id','children')
|
if (obj && obj.path) {
|
this.$router.push(obj.path)
|
}
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
$asideHeight:110px;
|
.layout-left-aside-compontent{
|
height: 100%;
|
box-sizing: border-box;
|
background-color: #3a405a;
|
color: #bfcbd9;
|
border-right: 1px solid #485e7a;
|
padding-top: $asideHeight;
|
position: relative;
|
&>.header{
|
position: absolute;
|
top:0;
|
left:0;
|
width: 100%;
|
height: $asideHeight;
|
box-sizing: border-box;
|
flex-shrink: 0;
|
border-bottom: 1px solid #485e7a;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
flex-direction: column;
|
.logo-img{
|
width: 90%;
|
height: auto;
|
}
|
.logo-font{
|
color: white;
|
font-size: 30px;
|
font-weight: bold;
|
}
|
}
|
.menus-box{
|
height: 100%;
|
}
|
.el-menu{
|
border-right: 0;
|
}
|
}
|
</style>
|
<style lang="scss">
|
.layout-left-aside-compontent{
|
.el-scrollbar__view{
|
overflow: hidden;
|
}
|
}
|
</style>
|
