diff --git a/src/components/page/header/PageHeader.vue b/src/components/page/header/PageHeader.vue index 8825c8a..60fa64b 100644 --- a/src/components/page/header/PageHeader.vue +++ b/src/components/page/header/PageHeader.vue @@ -1,6 +1,6 @@ <template> - <div :class="['page-header', layout == 'head' && pageWidth == 'fixed' ? layout : '']"> - <div :class="['page-header-wide']"> + <div :class="['page-header', layout, pageWidth]"> + <div class="page-header-wide"> <div class="breadcrumb"> <a-breadcrumb> <a-breadcrumb-item :key="index" v-for="(item, index) in breadcrumb"> diff --git a/src/components/page/header/index.less b/src/components/page/header/index.less index 8103630..4d45d73 100644 --- a/src/components/page/header/index.less +++ b/src/components/page/header/index.less @@ -1,17 +1,11 @@ .page-header{ background: @base-bg-color; padding: 16px 24px; - &.head{ + &.head.fixed{ margin: auto; max-width: 1400px; } .page-header-wide{ - &.head{ - margin: auto; - max-width: 1400px; - } - &.side{ - } .breadcrumb{ margin-bottom: 20px; } diff --git a/src/config/default/setting.config.js b/src/config/default/setting.config.js index bcbf470..b2ef5a7 100644 --- a/src/config/default/setting.config.js +++ b/src/config/default/setting.config.js @@ -11,6 +11,7 @@ module.exports = { layout: 'side', //导航布局,可选 side 和 head,分别为侧边导航和顶部导航 fixedHeader: false, //固定头部状态栏,true:固定,false:不固定 fixedSideBar: true, //固定侧边栏,true:固定,false:不固定 + pageWidth: 'fixed', //内容区域宽度,fixed:固定宽度,fluid:流式宽度 weekMode: false, //色弱模式,true:开启,false:不开启 multiPage: false, //多页签模式,true:开启,false:不开启 hideSetting: false, //隐藏设置抽屉,true:隐藏,false:不隐藏 diff --git a/src/layouts/PageLayout.vue b/src/layouts/PageLayout.vue index 908cba4..e936145 100644 --- a/src/layouts/PageLayout.vue +++ b/src/layouts/PageLayout.vue @@ -13,7 +13,7 @@ </div> <slot v-if="this.$slots.extra" slot="extra" name="extra"></slot> </page-header> - <div ref="page" :class="['page-content', layout == 'head' ? (pageWidth == 'fixed' ? layout : '') : '']" > + <div ref="page" :class="['page-content', layout, pageWidth]" > <slot></slot> </div> </div> @@ -130,7 +130,7 @@ export default { padding: 24px 0 0; &.side{ } - &.head{ + &.head.fixed{ margin: 0 auto; max-width: 1400px; } diff --git a/src/layouts/header/AdminHeader.vue b/src/layouts/header/AdminHeader.vue index d13b361..8b6b343 100644 --- a/src/layouts/header/AdminHeader.vue +++ b/src/layouts/header/AdminHeader.vue @@ -1,6 +1,6 @@ <template> <a-layout-header :class="[headerTheme, 'admin-header']"> - <div :class="['admin-header-wide', layout == 'side' ? layout : (pageWidth == 'fixed' ? layout : '')]"> + <div :class="['admin-header-wide', layout, pageWidth]"> <router-link v-if="isMobile || layout === 'head'" to="/" :class="['logo', isMobile ? null : 'pc', headerTheme]"> <img width="32" src="@/assets/img/logo.png" /> <h1 v-if="!isMobile">{{systemName}}</h1> diff --git a/src/layouts/header/index.less b/src/layouts/header/index.less index 8de8a35..d54fca4 100644 --- a/src/layouts/header/index.less +++ b/src/layouts/header/index.less @@ -21,7 +21,7 @@ } .admin-header-wide{ padding-left: 24px; - &.head{ + &.head.fixed{ max-width: 1400px; margin: auto; padding-left: 0; diff --git a/src/layouts/tabs/TabsView.vue b/src/layouts/tabs/TabsView.vue index 2488e83..026f270 100644 --- a/src/layouts/tabs/TabsView.vue +++ b/src/layouts/tabs/TabsView.vue @@ -5,7 +5,7 @@ v-if="multiPage" type="editable-card" :active-key="activePage" - :style="`margin: -16px auto 8px; ${layout == 'head' && pageWidth == 'fixed' ? 'max-width: 1400px;' : ''}`" + :class="['tabs-view', layout, pageWidth]" :hide-add="true" @change="changePage" @edit="editPage" @@ -206,6 +206,12 @@ function getPageKey (target, depth = 0) { </script> <style scoped lang="less"> + .tabs-view{ + margin: -16px auto 8px; + &.head.fixed{ + max-width: 1400px; + } + } .tabs-view-content{ position: relative; } diff --git a/src/store/modules/setting.js b/src/store/modules/setting.js index 57bf429..3e15a67 100644 --- a/src/store/modules/setting.js +++ b/src/store/modules/setting.js @@ -7,7 +7,6 @@ export default { namespaced: true, state: { isMobile: false, - pageWidth: 'fixed', animates: ADMIN.animates, palettes: ADMIN.palettes, pageMinHeight: 0,