From a1c3c53c1f298996584c773999e95d8f4064f923 Mon Sep 17 00:00:00 2001 From: vben Date: Wed, 6 Jan 2021 23:19:55 +0800 Subject: [PATCH] chore: update style --- build/config/lessModifyVars.ts | 4 ++-- index.html | 2 +- src/components/Basic/src/BasicArrow.vue | 1 - src/components/Basic/src/BasicHelp.vue | 1 - src/components/Basic/src/BasicTitle.vue | 1 - src/components/Drawer/src/BasicDrawer.vue | 2 +- src/components/Modal/src/index.less | 2 +- src/components/Page/src/PageWrapper.vue | 2 +- src/design/color.less | 5 +++-- src/layouts/default/header/MultipleHeader.vue | 2 +- src/layouts/default/index.vue | 4 ++++ src/settings/colorSetting.ts | 2 +- src/settings/projectSetting.ts | 2 +- 13 files changed, 16 insertions(+), 14 deletions(-) diff --git a/build/config/lessModifyVars.ts b/build/config/lessModifyVars.ts index b51223bb..f2ebcf2a 100644 --- a/build/config/lessModifyVars.ts +++ b/build/config/lessModifyVars.ts @@ -17,12 +17,12 @@ const modifyVars = { // 'heading-color': '#2C3A61', // Title color // 'text-color': '#2C3A61', // Main text color 'text-color-secondary ': '#606266', // Subtext color - 'background-color-base': '#F0F2F5', // background color + 'background-color-base': '#f4f7f9', // background color 'font-size-base': '14px', // Main font size 'box-shadow-base': '0 2px 8px rgba(0, 0, 0, 0.15)', // Floating shadow 'border-color-base': '#F0F0F0', // Border color, 'border-color-split': '#F0F0F0', // Border color, - 'border-radius-base': '2px', // Component/float fillet + 'border-radius-base': '4px', // Component/float fillet }; //} diff --git a/index.html b/index.html index 3064328c..3763dd82 100644 --- a/index.html +++ b/index.html @@ -24,7 +24,7 @@ justify-content: center; align-items: center; flex-direction: column; - background: #f0f2f5; + background: #f4f7f9; } .app-loading .app-loading-wrap { diff --git a/src/components/Basic/src/BasicArrow.vue b/src/components/Basic/src/BasicArrow.vue index 1d8daddf..f9686e90 100644 --- a/src/components/Basic/src/BasicArrow.vue +++ b/src/components/Basic/src/BasicArrow.vue @@ -15,7 +15,6 @@ export default defineComponent({ name: 'BasicArrow', - inheritAttrs: false, components: { RightOutlined }, props: { // Expand contract, expand by default diff --git a/src/components/Basic/src/BasicHelp.vue b/src/components/Basic/src/BasicHelp.vue index 06fd3ac0..09ef2568 100644 --- a/src/components/Basic/src/BasicHelp.vue +++ b/src/components/Basic/src/BasicHelp.vue @@ -12,7 +12,6 @@ import { useDesign } from '/@/hooks/web/useDesign'; export default defineComponent({ name: 'BasicHelp', - inheritAttrs: false, components: { Tooltip }, props: { // max-width diff --git a/src/components/Basic/src/BasicTitle.vue b/src/components/Basic/src/BasicTitle.vue index 6d607d4c..77e1e949 100644 --- a/src/components/Basic/src/BasicTitle.vue +++ b/src/components/Basic/src/BasicTitle.vue @@ -15,7 +15,6 @@ export default defineComponent({ name: 'BasicTitle', - inheritAttrs: false, components: { BasicHelp }, props: { helpMessage: { diff --git a/src/components/Drawer/src/BasicDrawer.vue b/src/components/Drawer/src/BasicDrawer.vue index 54735cff..912a6fec 100644 --- a/src/components/Drawer/src/BasicDrawer.vue +++ b/src/components/Drawer/src/BasicDrawer.vue @@ -219,7 +219,7 @@ .ant-drawer-body { height: calc(100% - @header-height); padding: 0; - background-color: @background-color-dark; + background-color: #fff; .scrollbar__wrap { padding: 16px !important; diff --git a/src/components/Modal/src/index.less b/src/components/Modal/src/index.less index 82050956..b31463ad 100644 --- a/src/components/Modal/src/index.less +++ b/src/components/Modal/src/index.less @@ -79,7 +79,7 @@ &-confirm-body { .ant-modal-confirm-content { - color: @text-color-help-dark; + color: #fff; > * { color: @text-color-help-dark; diff --git a/src/components/Page/src/PageWrapper.vue b/src/components/Page/src/PageWrapper.vue index 4f8243f1..e482d646 100644 --- a/src/components/Page/src/PageWrapper.vue +++ b/src/components/Page/src/PageWrapper.vue @@ -132,7 +132,7 @@ position: relative; .ant-page-header { - padding: 12px 16px; + // padding: 12px 16px; &:empty { padding: 0; diff --git a/src/design/color.less b/src/design/color.less index 6a8c5c80..519e8457 100644 --- a/src/design/color.less +++ b/src/design/color.less @@ -14,7 +14,8 @@ @white: #fff; -@content-bg: #f0f2f5; +@content-bg: #f4f7f9; +// @content-bg: #f0f2f5; @info-color: @primary-color; @@ -60,7 +61,7 @@ // ================================= // dark -@background-color-dark: #f0f2f5; +@background-color-dark: #f4f7f9; // light @background-color-light: #f5f7fa; // layout content background diff --git a/src/layouts/default/header/MultipleHeader.vue b/src/layouts/default/header/MultipleHeader.vue index dc637ed9..2fa77c3b 100644 --- a/src/layouts/default/header/MultipleHeader.vue +++ b/src/layouts/default/header/MultipleHeader.vue @@ -113,7 +113,7 @@ @prefix-cls: ~'@{namespace}-layout-multiple-header'; .@{prefix-cls} { - margin-left: 1px; + // margin-left: 1px; transition: width 0.2s; flex: 0 0 auto; diff --git a/src/layouts/default/index.vue b/src/layouts/default/index.vue index 63905829..c686c8ac 100644 --- a/src/layouts/default/index.vue +++ b/src/layouts/default/index.vue @@ -83,5 +83,9 @@ > .ant-layout { min-height: 100%; } + + &__main { + margin-left: 1px; + } } diff --git a/src/settings/colorSetting.ts b/src/settings/colorSetting.ts index 0b498a31..8bad5866 100644 --- a/src/settings/colorSetting.ts +++ b/src/settings/colorSetting.ts @@ -16,11 +16,11 @@ export const HEADER_PRESET_BG_COLOR_LIST: string[] = [ // sider preset color export const SIDE_BAR_BG_COLOR_LIST: string[] = [ + '#001529', '#273352', '#ffffff', '#191b24', '#191a23', - '#001529', '#304156', '#001628', '#28333E', diff --git a/src/settings/projectSetting.ts b/src/settings/projectSetting.ts index c5c9a631..617a2820 100644 --- a/src/settings/projectSetting.ts +++ b/src/settings/projectSetting.ts @@ -76,7 +76,7 @@ const setting: ProjectConfig = { // Menu configuration menuSetting: { // sidebar menu bg color - bgColor: '#273352', + bgColor: '#001529', // Whether to fix the left menu fixed: true, // Menu collapse -- GitLab