From 6467e4115c5284a15f393e3dd2ffb07ebd2a96d6 Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期一, 28 十二月 2020 18:31:48 +0800 Subject: [PATCH] 2020-12-28 --- src/assets/css/viewstyle.scss | 314 ++++++++++++++++++++++++++++++++++++++++++++++------ 1 files changed, 277 insertions(+), 37 deletions(-) diff --git a/src/assets/css/viewstyle.scss b/src/assets/css/viewstyle.scss index 02b146b..87163cc 100644 --- a/src/assets/css/viewstyle.scss +++ b/src/assets/css/viewstyle.scss @@ -1,80 +1,320 @@ -.mk-white { - > .flex-container { - > .header-container { - background: #ffffff; - color: #000000; - box-shadow: 0 2px 8px #f0f1f2; +// bg1 涓昏儗鏅壊 +// bg2 娆¤儗鏅壊 +// font1 涓诲瓧浣撻鑹� +// color1 1闃惰壊 - 搴曡壊 +// color2 2闃惰壊 +// color3 3闃惰壊 +// color4 4闃惰壊 +// color5 5闃惰壊 +// color6 6闃惰壊 - 涓昏壊绯� +// color7 7闃惰壊 +// color8 8闃惰壊 +// color9 9闃惰壊 +// color10 10闃惰壊 +@mixin viewstyle($bg1, $bg2, $font1, $font2, $color1, $color2, $color3, $color4, $color5, $color6, $color7, $color8, $color9, $color10) { + .login-container { + background-color: $bg1; + .logo { + border-color: transparent; + .plat-name { + color: $font1; + } + } + .login-middle { + border-color: transparent; + .login-form-button { + background-color: $color6; + border-color: $color6; + } + .login-form-button[disabled] { + background-color: $color5; + border-color: $color5; + } + button.vercode { + color: $color6; + } + .ant-tabs { + .ant-tabs-tab.ant-tabs-tab-active { + color: $color6; + } + .ant-tabs-tab:hover { + color: $color6; + } + } + } + .login-bottom { + color: $font1; + a { + color: $font1; + } + } + } + #root > .main-view { + > .header-container { + background: $bg1; + color: $font1; + box-shadow: 0 1px 1px #d9d9d9; + + .header-setting span { + color: $font1; + } > .header-collapse i { - color: #000000; + color: $font1; } > .header-menu { li { span { - color: #000000; + color: $font1; } &:hover { span { - color: #1890ff; - border-bottom: 4px solid #1890ff; + color: $color6; + border-bottom: 4px solid $color6; } } &.active { span { - color: #1890ff; - border-bottom: 4px solid #1890ff; + color: $color6; + border-bottom: 4px solid $color6; } } } } - > .header-setting span { - color: #000000; - } - > .header-edit-box .dragdashboard { - background: #ffffff; - } } > .side-menu { border-right: 1px solid #d9d9d9; - background: #ffffff; + background: $bg1; > .ant-menu { - background: #ffffff; + background: $bg1; > .ant-menu-submenu { - color: #000000; - background: #ffffff; + color: $font1; + background: transparent; > .ant-menu-submenu-title { - background: #ffffff; &:hover { - color: #1890ff; + color: $font1; } > .ant-menu-submenu-arrow:before { - background: #000000; + background: $font1; } > .ant-menu-submenu-arrow:after { - background: #000000; + background: $font1; } } > .ant-menu-sub { - background: #ffffff; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25) inset; + background: transparent; + box-shadow: none; .ant-menu-item { - border-bottom: 1px solid #d9d9d9; - // background-color: #c4ebfd; a { - color: #000000; + color: $font2; } } } } > .ant-menu-submenu.ant-menu-submenu-open { - color: #1890ff; + > .ant-menu-submenu-title { + background: $bg2; + } } } - // .ant-menu-inline.ant-menu-sub { - // background: #ffffff; - // color: #000000; - // } + } + > .side-menu:not(.edit) { + > .ant-menu { + > .ant-menu-submenu { + > .ant-menu-sub { + .ant-menu-item.ant-menu-item-active, .ant-menu-item.ant-menu-item-selected { + background: $color5; + color: #ffffff; + a { + color: #ffffff; + } + } + } + } + } + } + >.content-box { + >.content-header { + >.ant-tabs { + >.ant-tabs-bar { + .ant-tabs-tab:hover { + color: $color5; + } + .ant-tabs-tab.ant-tabs-tab-active { + color: $color6; + } + .ant-tabs-ink-bar { + background-color: $color6; + } + } + } + } + .normal-data-table, .normal-custom-table { + table { + .ant-table-tbody { + > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td { + background-color: $color1; + } + > tr.ant-table-row-selected:not(.background) td { + background-color: $color1; + } + > tr.ant-table-row-selected:not(.background):hover .ant-table-column-sort { + background-color: $color1; + } + > tr.mk-row-active:not(.background) td { + background-color: $color3; + } + > tr.ant-table-row-selected.mk-row-active:not(.background):hover .ant-table-column-sort { + background-color: $color3; + } + } + } + } + .top-search { + >.ant-row { + .ant-col.search-button { + .ant-btn:not(.ant-btn-primary):active, .ant-btn:not(.ant-btn-primary).active, .ant-btn:not(.ant-btn-primary):hover, .ant-btn:not(.ant-btn-primary):focus { + color: $color7; + border-color: $color7; + } + .ant-btn-primary { + background-color: $color6; + border-color: $color6; + } + } + } + } + .ant-tabs-nav .ant-tabs-tab-active { + color: $color6; + } + .ant-tabs-nav .ant-tabs-ink-bar { + background-color: $color6; + } + .ant-tabs-nav .ant-tabs-tab:active { + color: $color7; + } + .ant-tabs-nav .ant-tabs-tab:hover { + color: $color5; + } + .ant-pagination { + .ant-pagination-item-active { + border-color: $color6; + a { + color: $color6; + } + } + .ant-pagination-item:hover a { + color: $color6; + } + .ant-pagination-prev:hover .ant-pagination-item-link { + color: $color6; + } + .ant-pagination-next:hover .ant-pagination-item-link { + color: $color6; + } + } } } -} \ No newline at end of file + + // 绯荤粺鏍峰紡淇敼 + // .ant-select-dropdown-menu-item:hover:not(.ant-select-dropdown-menu-item-disabled) { + // background-color: $color1; + // } + // .ant-select-dropdown-menu-item-active:not(.ant-select-dropdown-menu-item-disabled) { + // background-color: $color1; + // } + // // 澶嶉�夋 + // .ant-checkbox-checked .ant-checkbox-inner { + // background-color: $color6; + // border-color: $color6; + // } + // .ant-checkbox-checked::after { + // border: 1px solid $color6; + // } + // .ant-checkbox-indeterminate .ant-checkbox-inner::after { + // background-color: $color6; + // } + // .ant-checkbox-wrapper:hover .ant-checkbox-inner, .ant-checkbox:hover .ant-checkbox-inner, .ant-checkbox-input:focus + .ant-checkbox-inner { + // border-color: $color6; + // } + // // 涓嬫媺妗� + // .ant-select-selection:hover { + // border-color: $color5; + // } + // .ant-select-focused .ant-select-selection, .ant-select-selection:focus, .ant-select-selection:active { + // border-color: $color5; + // box-shadow: 0 0 0 2px $color2; + // } + // // 鍒囨崲 + // .ant-switch-checked { + // background-color: $color6; + // } + // // 杈撳叆妗� + // .ant-input:hover { + // border-color: $color5; + // } + // .ant-input:focus, .ant-input:active { + // border-color: $color5; + // box-shadow: 0 0 0 2px $color2; + // } + // .ant-input-number-focused { + // border-color: $color5; + // box-shadow: 0 0 0 2px $color2; + // } + // .ant-input-number:hover, .ant-input-number:focus, .ant-input-number:active, .ant-input-number-input:hover, .ant-input-number-input:focus, .ant-input-number-input:active, .ant-input-number-focused:hover, .ant-input-number-focused:focus, .ant-input-number-focused:active { + // border-color: $color5; + // } + // .ant-input-number:focus, .ant-input-number:active { + // box-shadow: 0 0 0 2px $color2; + // } + // // 鏃ュ巻 + // .ant-calendar-picker:hover .ant-calendar-picker-input:not(.ant-input-disabled) { + // border-color: $color5; + // } +} + +@mixin bgblack() { + #root > .main-view { + > .header-container { + box-shadow: none; + > .header-menu { + li { + &:hover, &.active { + span { + color: #ffffff; + } + } + } + } + } + } +} + +body.mk-blue-black { + --antd-wave-shadow-color: #1890ff; + @include viewstyle(#000000, #434343,rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.65), #e6f7ff, #bae7ff, #91d5ff, #69c0ff, #40a9ff, #1890ff, #096dd9, #0050b3, #003a8c, #002766); + @include bgblack(); +} +body.mk-blue-white { + --antd-wave-shadow-color: #1890ff; + @include viewstyle(#ffffff, #ffffff, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.65), #e6f7ff, #bae7ff, #91d5ff, #69c0ff, #40a9ff, #1890ff, #096dd9, #0050b3, #003a8c, #002766); +} +body.mk-red-black { + --antd-wave-shadow-color: #f5222d; + @include viewstyle(#000000, #434343,rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.65), #fff1f0, #ffccc7, #ffa39e, #ff7875, #ff4d4f, #f5222d, #cf1322, #a8071a, #820014, #5c0011); + @include bgblack(); +} +body.mk-red-white { + --antd-wave-shadow-color: #f5222d; + @include viewstyle(#ffffff, #ffffff, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.65), #fff1f0, #ffccc7, #ffa39e, #ff7875, #ff4d4f, #f5222d, #cf1322, #a8071a, #820014, #5c0011); +} +body.mk-orange-black { + --antd-wave-shadow-color: #fa8c16; + @include viewstyle(#000000, #434343,rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.65), #fff7e6, #ffe7ba, #ffd591, #ffc069, #ffa940, #fa8c16, #d46b08, #ad4e00, #873800, #612500); + @include bgblack(); +} +body.mk-orange-white { + --antd-wave-shadow-color: #fa8c16; + @include viewstyle(#ffffff, #ffffff, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.65), #fff7e6, #ffe7ba, #ffd591, #ffc069, #ffa940, #fa8c16, #d46b08, #ad4e00, #873800, #612500); +} -- Gitblit v1.8.0