0a7223a9c9
Former-commit-id: cce17961724bbc8171fd73c1403568d4e912f262 Former-commit-id: c5bfe1db039d310d51113e4c7e88be3f834508a2 Former-commit-id: e1522dfc3e74b2bd4c4badc35f305d3e2fca9ae3
55 lines
1.4 KiB
Vue
55 lines
1.4 KiB
Vue
<template>
|
|
<el-container class="layout-main" :class="theme">
|
|
<!-- 顶栏 -->
|
|
<el-header>
|
|
<div class="logo-group" :style="{width: collapse ? asideWidthCollapse : asideWidth}">
|
|
<img v-if="collapse" src="@/assets/image/logo/header-icon-only.png">
|
|
<img v-else src="@/assets/image/logo/header.png">
|
|
</div>
|
|
<div class="toggle-sidemenu-btn" @click="collapse = !collapse">
|
|
<Icon name="bars"/>
|
|
</div>
|
|
<HeaderMenu/>
|
|
<HeaderRight/>
|
|
</el-header>
|
|
<!-- 下面 主体 -->
|
|
<el-container>
|
|
<!-- 主体 侧边栏 -->
|
|
<el-aside :style="{width: collapse ? asideWidthCollapse : asideWidth}">
|
|
<SideMenu :collapse="collapse"/>
|
|
</el-aside>
|
|
<!-- 主体 -->
|
|
<el-main>
|
|
<transition name="fade-transverse">
|
|
<router-view/>
|
|
</transition>
|
|
</el-main>
|
|
</el-container>
|
|
</el-container>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
components: {
|
|
SideMenu: () => import('./components/SideMenu'),
|
|
HeaderMenu: () => import('./components/HeaderMenu'),
|
|
HeaderRight: () => import('./components/HeaderRight')
|
|
},
|
|
data () {
|
|
return {
|
|
theme: 'classic',
|
|
collapse: false,
|
|
// [侧边栏宽度] 正常状态
|
|
asideWidth: '200px',
|
|
// [侧边栏宽度] 折叠状态
|
|
asideWidthCollapse: '65px'
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
// 主题
|
|
@import '~@/assets/style/theme/classic.scss';
|
|
</style>
|