<template>
|
<el-scrollbar wrap-class="scrollbar-wrapper">
|
<div :class="{'user-info':true, 'white':theme==='white'}">
|
<img :src="common.showFirstImage(basicInfo.icon)" class="logo">
|
<!-- <div class="title">易软通资产管理系统</div> -->
|
</div>
|
<el-menu v-if="theme==='white'" :show-timeout="200" :default-active="$route.path" :collapse="isCollapse" :unique-opened="true" mode="vertical">
|
<sidebar-item v-for="route in permission_routers" :key="route.path" :item="route" :base-path="route.path" />
|
</el-menu>
|
<el-menu v-else :show-timeout="200" :default-active="$route.path" :collapse="isCollapse" :unique-opened="true" mode="vertical" background-color="#fff" text-color="#333" active-text-color="#24abb3">
|
<sidebar-item v-for="route in permission_routers" :key="route.path" :item="route" :base-path="route.path" />
|
</el-menu>
|
</el-scrollbar>
|
</template>
|
|
<script>
|
import { mapGetters } from 'vuex'
|
import SidebarItem from './SidebarItem'
|
import Cookies from 'js-cookie'
|
|
export default {
|
components: { SidebarItem },
|
data() {
|
return {
|
theme: 'default'
|
}
|
},
|
computed: {
|
...mapGetters(['permission_routers', 'sidebar', 'basicInfo']),
|
isCollapse() {
|
return !this.sidebar.opened
|
}
|
},
|
created() {
|
this.theme = Cookies.get('theme') || 'default'
|
},
|
methods: {
|
iconUrl(images) {
|
if (images) {
|
if (images.indexOf('[') >= 0) {
|
const imgs = JSON.parse(images)
|
return imgs[0].src
|
} else {
|
return images
|
}
|
}
|
return ''
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.user-info {
|
text-align: center;
|
padding: 20px 0;
|
background-color: #fff;
|
// border-bottom: 1px solid rgb(72, 94, 122);
|
&.white {
|
background-color: white;
|
border-bottom: 1px solid white;
|
}
|
.logo {
|
width: 120px;
|
height: 60px;
|
// border-radius: 30px;
|
transition: all 1s;
|
}
|
.title {
|
width: 100%;
|
color: #e3edf8;
|
line-height: 30px;
|
font-size: 16px;
|
transition: all 0.2s ease-in;
|
}
|
}
|
.hideSidebar {
|
.user-info {
|
.logo {
|
width: 24px;
|
height: 24px;
|
border-radius: 15px;
|
}
|
.title {
|
line-height: 0px;
|
font-size: 0px;
|
}
|
}
|
}
|
</style>
|
