00cabf774b
Former-commit-id: 328a8c2f51b53c492f584cf6990ee4794f905abe Former-commit-id: e3614b740d757eead66270283e9ac8a23c6fc4e8 Former-commit-id: 0b8adba2e8e4f0f971dabd7575a542cfdddf9597
65 lines
1.5 KiB
Vue
65 lines
1.5 KiB
Vue
<template>
|
|
<el-container class="layout-main" :class="theme">
|
|
<el-header>
|
|
<div class="logo-group" :style="logoGroupStyle">
|
|
<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="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>
|
|
<transition name="fade-transverse">
|
|
<router-view></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: 'default',
|
|
collapse: false
|
|
}
|
|
},
|
|
computed: {
|
|
logoGroupStyle () {
|
|
return {
|
|
width: `${this.collapse ? '65' : '200'}px`
|
|
}
|
|
},
|
|
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>
|
|
|