dbfe3f44d1
Former-commit-id: 7ce8731c3fbff1358a20072bfc4a311d074bbce1 [formerly e53795bf2c527ec4db52c2dcc4ddb4113b3bae04] [formerly 7ce8731c3fbff1358a20072bfc4a311d074bbce1 [formerly e53795bf2c527ec4db52c2dcc4ddb4113b3bae04] [formerly 7ce8731c3fbff1358a20072bfc4a311d074bbce1 [formerly e53795bf2c527ec4db52c2dcc4ddb4113b3bae04] [formerly e53795bf2c527ec4db52c2dcc4ddb4113b3bae04 [formerly 4a11be2c1e1dafaf1e47609aea474ed3d14ed168 [formerly cd00a1ff152b52a8b6140db354ee5162eb16b5c8]]]]] Former-commit-id: acd23291774316c164d08701e2d47d82b9861d0b Former-commit-id: dfcb0b86d1606d3b1ea015d3b1d9a4a14c7ebc3c Former-commit-id: d2e0e01ee2ad509ee6eaeb21f39862046cc6298b [formerly f3891c3d17c26fe132a23460cb9237c7e05b1a78] Former-commit-id: 70659ffa8b445c27dc99ab22546c49de9d01d6f0 Former-commit-id: 7246206ca668fe7aabe15f348f50abd07e0b30dc Former-commit-id: 3155efaec47f066c8ddd14be1581b4c0fbacb376 Former-commit-id: d28c005035cf6986b20f7c4c934ec4a5964b180b Former-commit-id: 3f33b8a0b166c1abab566613d7c4dde453c2121a
80 lines
2.3 KiB
Vue
80 lines
2.3 KiB
Vue
<template>
|
|
<div class="layout-main-group">
|
|
<div class="layout-main-mask"></div>
|
|
<el-container class="layout-main">
|
|
<!-- 顶栏 -->
|
|
<el-header>
|
|
<div class="logo-group" :style="{width: collapse ? asideWidthCollapse : asideWidth}">
|
|
<img v-if="collapse" :src="`/static/image/theme/${themeName}/logo/icon-only.png`">
|
|
<img v-else :src="`/static/image/theme/${themeName}/logo/all.png`">
|
|
</div>
|
|
<div class="toggle-aside-btn" @click="collapse = !collapse">
|
|
<d2-icon name="bars"/>
|
|
</div>
|
|
<d2-layout-main-header-menu/>
|
|
<!-- 顶栏右侧 -->
|
|
<div class="d2-header-right">
|
|
<d2-layout-main-header-full-screen/>
|
|
<d2-layout-main-header-theme/>
|
|
<d2-layout-main-header-user/>
|
|
</div>
|
|
</el-header>
|
|
<!-- 下面 主体 -->
|
|
<el-container>
|
|
<!-- 主体 侧边栏 -->
|
|
<el-aside ref="aside" :style="{width: collapse ? asideWidthCollapse : asideWidth}">
|
|
<d2-layout-main-menu-side :collapse="collapse"/>
|
|
</el-aside>
|
|
<!-- 主体 -->
|
|
<el-main>
|
|
<transition name="fade-transverse">
|
|
<router-view/>
|
|
</transition>
|
|
</el-main>
|
|
</el-container>
|
|
</el-container>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState, mapMutations } from 'vuex'
|
|
export default {
|
|
name: 'd2-layout-main',
|
|
components: {
|
|
'd2-layout-main-menu-side': () => import('./components/-menu-side'),
|
|
'd2-layout-main-header-menu': () => import('./components/-header-menu'),
|
|
'd2-layout-main-header-full-screen': () => import('./components/-full-screen'),
|
|
'd2-layout-main-header-theme': () => import('./components/-theme'),
|
|
'd2-layout-main-header-user': () => import('./components/-user')
|
|
},
|
|
data () {
|
|
return {
|
|
collapse: false,
|
|
// [侧边栏宽度] 正常状态
|
|
asideWidth: '200px',
|
|
// [侧边栏宽度] 折叠状态
|
|
asideWidthCollapse: '65px'
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState({
|
|
themeName: state => state.theme.name
|
|
})
|
|
},
|
|
mounted () {
|
|
// 加载主题
|
|
this.loadTheme()
|
|
},
|
|
methods: {
|
|
...mapMutations([
|
|
'loadTheme'
|
|
])
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
// 注册主题
|
|
@import '~@/assets/style/theme/register.scss';
|
|
</style>
|