chore: optimize the code of page width style;

master
chenghongxing 5 years ago
parent 346c1b8a87
commit 5a65032772
  1. 4
      src/components/page/header/PageHeader.vue
  2. 8
      src/components/page/header/index.less
  3. 1
      src/config/default/setting.config.js
  4. 4
      src/layouts/PageLayout.vue
  5. 2
      src/layouts/header/AdminHeader.vue
  6. 2
      src/layouts/header/index.less
  7. 8
      src/layouts/tabs/TabsView.vue
  8. 1
      src/store/modules/setting.js

@ -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">

@ -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;
}

@ -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:不隐藏

@ -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;
}

@ -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>

@ -21,7 +21,7 @@
}
.admin-header-wide{
padding-left: 24px;
&.head{
&.head.fixed{
max-width: 1400px;
margin: auto;
padding-left: 0;

@ -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;
}

@ -7,7 +7,6 @@ export default {
namespaced: true,
state: {
isMobile: false,
pageWidth: 'fixed',
animates: ADMIN.animates,
palettes: ADMIN.palettes,
pageMinHeight: 0,

Loading…
Cancel
Save