51186622f6
Former-commit-id: 2ac08bdf73416d40f32a3f7965369cb28d4329d3 [formerly 2ac08bdf73416d40f32a3f7965369cb28d4329d3 [formerly 2ac08bdf73416d40f32a3f7965369cb28d4329d3 [formerly 2ac08bdf73416d40f32a3f7965369cb28d4329d3 [formerly 7edbaec35ed1435f9b321dc93a6fc638390e62c1 [formerly 2b79008703fe8c1f2dfc0e74d07589f55f68fa15]]]]] Former-commit-id: 43f9f620117aa19760d79743b2358e02473f45e6 Former-commit-id: 447bd2d9ae835cc47ceab1283c3b24a5406a234e Former-commit-id: 0d221eda984865e1d036159f6d92c2858634055c [formerly b6c26e2313ea3786c93d68c6394e4b2c59bdbe17] Former-commit-id: 79fdc885d3dc2a91ec43a48a11242c8a9f3ffdb1 Former-commit-id: 0959cb5dcdfe874efcb14c4ad8ed2fd5a1886516 Former-commit-id: c7cee26e0b0a5dd22d724c43c0e92828d84fab99 Former-commit-id: f75348850386038a04efa082a8bf71d5d5663f6b Former-commit-id: 65e82442f2b596e30e183f0522bb4e3a64408738
90 lines
2.7 KiB
Vue
90 lines
2.7 KiB
Vue
<template>
|
|
<div class="layout-main-group" :style="styleLayoutMainGroup">
|
|
<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="`${$assetsPublicPath}static/image/theme/${themeName}/logo/icon-only.png`">
|
|
<img v-else :src="`${$assetsPublicPath}static/image/theme/${themeName}/logo/all.png`">
|
|
</div>
|
|
<div class="toggle-aside-btn" @click="collapse = !collapse">
|
|
<d2-icon name="bars"/>
|
|
</div>
|
|
<d2-layout-main-menu-header/>
|
|
<!-- 顶栏右侧 -->
|
|
<div class="d2-header-right">
|
|
<d2-layout-main-header-help/>
|
|
<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-menu-header': () => import('./components/-menu-header'),
|
|
'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'),
|
|
'd2-layout-main-header-help': () => import('./components/-help')
|
|
},
|
|
data () {
|
|
return {
|
|
collapse: false,
|
|
// [侧边栏宽度] 正常状态
|
|
asideWidth: '200px',
|
|
// [侧边栏宽度] 折叠状态
|
|
asideWidthCollapse: '65px'
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState({
|
|
themeName: state => state.theme.name,
|
|
themeBackGroundImage: state => state.theme.backGroundImage
|
|
}),
|
|
styleLayoutMainGroup () {
|
|
return {
|
|
...this.themeBackGroundImage ? {
|
|
backgroundImage: `url('${this.$assetsPublicPath}${this.themeBackGroundImage}')`
|
|
} : {}
|
|
}
|
|
}
|
|
},
|
|
mounted () {
|
|
// 加载主题
|
|
this.loadTheme()
|
|
},
|
|
methods: {
|
|
...mapMutations([
|
|
'loadTheme'
|
|
])
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
// 注册主题
|
|
@import '~@/assets/style/theme/register.scss';
|
|
</style>
|