e9567074da
Former-commit-id: 08914438f5ff8386284563d43482572552e5ec8e Former-commit-id: 0d520c6d365d5d44b8a2c93f3bab8a8368566013 Former-commit-id: 8172f79950f2dd5d7bd582cf169cfd8b74b12cb0
57 lines
1.2 KiB
Vue
57 lines
1.2 KiB
Vue
<template>
|
|
<el-container class="layout-main" :class="theme">
|
|
<el-header>
|
|
<div class="logo-group">
|
|
<img src="@/assets/image/logo/header.png">
|
|
</div>
|
|
<div class="toggle-sidemenu-btn" @click="toggleAside">
|
|
<Icon name="bars"></Icon>
|
|
</div>
|
|
<HeaderMenu></HeaderMenu>
|
|
<HeaderRight></HeaderRight>
|
|
</el-header>
|
|
<el-container>
|
|
<el-aside :style="asideStyle">
|
|
<SideMenu :collapse="collapse"></SideMenu>
|
|
</el-aside>
|
|
<el-main>
|
|
<router-view></router-view>
|
|
</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: 'default',
|
|
collapse: false
|
|
}
|
|
},
|
|
computed: {
|
|
asideStyle () {
|
|
return {
|
|
width: `${this.collapse ? '65' : '200'}px`
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
toggleAside () {
|
|
this.collapse = !this.collapse
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
// 主题
|
|
@import '~@/assets/style/theme/default.scss';
|
|
</style>
|
|
|