<template>
|
<el-container class="layout">
|
<app-header></app-header>
|
<el-container class="layout-body">
|
<el-aside width="228px" class="layout-aside">
|
<div class="aside-caption">业务导航</div>
|
<el-menu ref="sideMenu" :default-active="$route.path" router background-color="#f5f8fb" text-color="#2f4257" active-text-color="#1769aa" unique-opened>
|
<menu-node v-for="item in menus" :key="item.id" :item="item"></menu-node>
|
</el-menu>
|
</el-aside>
|
<el-main class="layout-main">
|
<transition name="fade" mode="out-in">
|
<router-view></router-view>
|
</transition>
|
</el-main>
|
</el-container>
|
</el-container>
|
</template>
|
|
<script>
|
import api from '@/api'
|
import AppHeader from '@/components/AppHeader.vue'
|
import MenuNode from '@/components/MenuNode.vue'
|
|
export default {
|
name: 'AppLayout',
|
components: { AppHeader, MenuNode },
|
data() {
|
return { menus: [] }
|
},
|
created() {
|
this.loadMenus()
|
},
|
methods: {
|
loadMenus() {
|
api.get('/system/menu/nav').then(res => {
|
this.menus = (res.data || []).filter(item => item.visible !== 0)
|
}).catch(() => {})
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.layout { display: flex; flex-direction: column; height: 100%; }
|
.layout-body { flex: 1; min-height: 0; }
|
.layout-aside { border-right: 1px solid #d9e2eb; background: #f5f8fb; overflow-x: hidden; overflow-y: auto; }
|
.aside-caption { padding: 14px 18px 8px; color: #8090a2; font-size: 12px; letter-spacing: .08em; }
|
.layout-main { min-width: 0; padding: 0; overflow: auto; background: #eef2f6; }
|
.el-menu { border-right: 0; }
|
.layout-aside ::v-deep .el-menu-item,
|
.layout-aside ::v-deep .el-submenu__title {
|
height: auto;
|
min-height: 50px;
|
padding-top: 8px;
|
padding-bottom: 8px;
|
line-height: 20px;
|
white-space: normal;
|
}
|
.layout-aside ::v-deep .el-menu-item span,
|
.layout-aside ::v-deep .el-submenu__title span {
|
flex: 1;
|
min-width: 0;
|
white-space: normal;
|
overflow-wrap: anywhere;
|
word-break: break-word;
|
}
|
.fade-enter-active, .fade-leave-active { transition: opacity .12s ease; }
|
.fade-enter, .fade-leave-to { opacity: 0; }
|
</style>
|
