d2d8cbe65c
Former-commit-id: 3abf62d49fb5fe3cd3a0af903715f9f6212a3e99 [formerly 3abf62d49fb5fe3cd3a0af903715f9f6212a3e99 [formerly 3abf62d49fb5fe3cd3a0af903715f9f6212a3e99 [formerly 3abf62d49fb5fe3cd3a0af903715f9f6212a3e99 [formerly 01e0619729e2c82b414d8021bd6dd8366a77a2a6 [formerly c9ecfb5a06c4c8efbd3a462151689aae96d969a8]]]]] Former-commit-id: dd8bf6fcb3bd8f8e26ffe641116c1553ed79f1c8 Former-commit-id: 1e1e94223145fc3e6cb1f99c2ce8498e7c65d297 Former-commit-id: 501f1733b5b8e2d563c1534dec6959fc2c7a2062 [formerly 40e4587ab21042b4bcdc9de9710ba42dd7947e76] Former-commit-id: 9a702dd00fb9817c6173596e45fc43f9139d5e77 Former-commit-id: 40f0b9178a03920b3051b52e003575875e3e95cd Former-commit-id: 5308f1435a0a8c45440b6cf8a4b3503e05327ce0 Former-commit-id: b954ec0ba7a0350cfe02f60e8d65d326276ffd82 Former-commit-id: fb45d77d2d3aa4ba2d2a3cb76240e1dcb864fcfb
95 lines
3.0 KiB
Vue
95 lines
3.0 KiB
Vue
<template>
|
|
<div class="layout-main-group" :style="styleLayoutMainGroup" :class="{grayMode: isGrayMode}">
|
|
<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/${themeActive.value}/logo/icon-only.png`">
|
|
<img v-else :src="`${$assetsPublicPath}static/image/theme/${themeActive.value}/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>
|
|
<div class="d2-layout-main-header">
|
|
<d2-multiple-page-control></d2-multiple-page-control>
|
|
</div>
|
|
<div class="d2-layout-main-body">
|
|
<transition name="fade-transverse">
|
|
<router-view/>
|
|
</transition>
|
|
</div>
|
|
</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({
|
|
themeActive: state => state.d2admin.themeActive,
|
|
isGrayMode: state => state.d2admin.isGrayMode
|
|
}),
|
|
styleLayoutMainGroup () {
|
|
return {
|
|
...this.themeActive.backgroundImage ? {
|
|
backgroundImage: `url('${this.$assetsPublicPath}${this.themeActive.backgroundImage}')`
|
|
} : {}
|
|
}
|
|
}
|
|
},
|
|
mounted () {
|
|
// 加载主题
|
|
this.d2adminThemeLoad()
|
|
},
|
|
methods: {
|
|
...mapMutations([
|
|
'd2adminThemeLoad'
|
|
])
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
// 注册主题
|
|
@import '~@/assets/style/theme/register.scss';
|
|
</style>
|