|
|
@ -1,12 +1,16 @@
|
|
|
|
<template>
|
|
|
|
<template>
|
|
|
|
<el-scrollbar class="layout-menu" :class="{ collapse: collapseMenu }">
|
|
|
|
<div class="layout-menu" :class="{ collapse: collapseMenu }">
|
|
|
|
|
|
|
|
<LayoutTitle />
|
|
|
|
|
|
|
|
<el-scrollbar>
|
|
|
|
<el-menu unique-opened :default-active="activeMenu" @select="handleSelect">
|
|
|
|
<el-menu unique-opened :default-active="activeMenu" @select="handleSelect">
|
|
|
|
<MenuItem v-for="(item, index) in menuList" :key="index" :menu-item="item" />
|
|
|
|
<MenuItem v-for="(item, index) in menuList" :key="index" :menu-item="item" />
|
|
|
|
</el-menu>
|
|
|
|
</el-menu>
|
|
|
|
</el-scrollbar>
|
|
|
|
</el-scrollbar>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script setup>
|
|
|
|
<script setup>
|
|
|
|
|
|
|
|
import LayoutTitle from './title.vue';
|
|
|
|
import MenuItem from './menu-item.vue';
|
|
|
|
import MenuItem from './menu-item.vue';
|
|
|
|
const router = useRouter();
|
|
|
|
const router = useRouter();
|
|
|
|
const store = useStore();
|
|
|
|
const store = useStore();
|
|
|
@ -46,7 +50,6 @@
|
|
|
|
width: @layout-menu-width;
|
|
|
|
width: @layout-menu-width;
|
|
|
|
height: 100%;
|
|
|
|
height: 100%;
|
|
|
|
background-color: @layout-menu-bgc;
|
|
|
|
background-color: @layout-menu-bgc;
|
|
|
|
padding: @layout-space;
|
|
|
|
|
|
|
|
transition: width 0.3s;
|
|
|
|
transition: width 0.3s;
|
|
|
|
box-sizing: border-box;
|
|
|
|
box-sizing: border-box;
|
|
|
|
&.collapse {
|
|
|
|
&.collapse {
|
|
|
@ -61,11 +64,16 @@
|
|
|
|
:deep(*) {
|
|
|
|
:deep(*) {
|
|
|
|
white-space: nowrap;
|
|
|
|
white-space: nowrap;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
:deep(.el-scrollbar__view) {
|
|
|
|
:deep(.el-scrollbar) {
|
|
|
|
|
|
|
|
height: calc(100% - @layout-header-height);
|
|
|
|
|
|
|
|
padding: @layout-space;
|
|
|
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
|
|
.el-scrollbar__view {
|
|
|
|
height: 100%;
|
|
|
|
height: 100%;
|
|
|
|
.el-menu {
|
|
|
|
.el-menu {
|
|
|
|
border-right: none;
|
|
|
|
border-right: none;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
</style>
|
|
|
|