2023-01-12

king

2023-01-12 64b4a25f578dbe459002d356e60a1a3657cb4595

 src/assets/css/viewstyle.scss

@@ -1,80 +1,494 @@
.mk-white {
  > .flex-container {
    > .header-container {
      background: #ffffff;
      color: #000000;
      box-shadow: 0 2px 8px #f0f1f2;

      > .header-collapse i {
        color: #000000;
      }
      > .header-menu {
        li {
          span {
            color: #000000;
          }
    
          &:hover {
            span {
              color: #06B4F7;
              border-bottom: 4px solid #06B4F7;
// color1  1阶色 - 底色
// color2  2阶色
// color3  3阶色
// color4  4阶色
// color5  5阶色
// color6  6阶色 - 主色系
// color7  7阶色
// color8  8阶色
// color9  9阶色
// color10 10阶色
@mixin viewstyle($color1, $color2, $color3, $color4, $color5, $color6, $color7) {
  #root > .mk-main-view {
    >.mk-tabview-wrap {
      >.content-header {
        >.ant-tabs {
          >.ant-tabs-bar {
            .ant-tabs-tab:hover {
              color: $color5;
            }
          }
          &.active {
            span {
              color: #1890ff;
              border-bottom: 4px solid #1890ff;
            .ant-tabs-tab.ant-tabs-tab-active {
              color: $color6;
            }
            .ant-tabs-ink-bar {
              background-color: $color6;
            }
          }
        }
      }
      > .header-setting span {
        color: #000000;

      .ant-tabs-nav .ant-tabs-tab-active {
        color: $color6;
      }
      > .header-edit-box .dragdashboard {
        background: #ffffff;
      .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;
      }
    }
    > .side-menu {
      border-right: 1px solid #d9d9d9;
      background: #ffffff;
      > .ant-menu {
        background: #ffffff;
        > .ant-menu-submenu {
          color: #000000;
          background: #ffffff;
          > .ant-menu-submenu-title {
            background: #ffffff;
            &:hover {
              color: #1890ff;
            }
            > .ant-menu-submenu-arrow:before {
              background: #000000;
            }
            > .ant-menu-submenu-arrow:after {
              background: #000000;
            }
          }
          > .ant-menu-sub {
            background: #ffffff;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25) inset;
            .ant-menu-item {
              border-bottom: 1px solid #d9d9d9;
              // background-color: #c4ebfd;
              a {
                color: #000000;
              }
            }
          }
        }
        > .ant-menu-submenu.ant-menu-submenu-open {
          color: #1890ff;
    >.mk-breadview-wrap {
      >.ant-breadcrumb {
        .anticon-redo:hover, .anticon-home:hover {
          color: $color5;
        }
      }
      // .ant-menu-inline.ant-menu-sub {
      //   background: #ffffff;
      //   color: #000000;
      // }
    }
  }
  .custom-data-card-box, .custom-prop-card-box {
    .data-zoom.radio.active, .data-zoom.checkbox.active {
      .mk-card:not(.active):not(.selected):hover {
        > .card-item-box {
          border-color: $color4 !important;
          box-shadow: 0 0 4px $color4 !important;
        }
      }
      .mk-card.active {
        > .card-item-box {
          border-color: $color6!important;
          box-shadow: 0 0 4px $color6!important;
        }
      }
      .mk-card.selected {
        > .card-item-box {
          border-color: $color4!important;
          box-shadow: 0 0 4px $color4!important;
        }
      }
    }
    .data-zoom.radio.backFont, .data-zoom.checkbox.backFont {
      .mk-card:hover, .mk-card.active, .mk-card.selected {
        > .card-item-box {
          border-color: $color6!important;
          background-color: $color1!important;
          .ant-mk-text:not(.sign-font) {
            color: $color6;
          }
        }
      }
    }
    .data-zoom.radio.font, .data-zoom.checkbox.font {
      .mk-card:hover, .mk-card.active, .mk-card.selected {
        > .card-item-box {
          border-color: $color6!important;
          .ant-mk-text:not(.sign-font) {
            color: $color6;
          }
        }
      }
    }
    .data-zoom.radio.tabs, .data-zoom.checkbox.tabs {
      .mk-card {
        > .card-item-box {
          border-top: none!important;
          border-left: none!important;
          border-right: none!important;
          border-radius: 0px!important;
          border-bottom: 2px solid transparent!important;
          transition: all 0.3s;
          cursor: pointer;
        }
      }
      .mk-card:hover {
        > .card-item-box {
          .ant-mk-text:not(.sign-font) {
            color: $color6;
          }
        }
      }
      .mk-card.active, .mk-card.selected {
        > .card-item-box {
          border-bottom-color: $color6!important;
          .ant-mk-text:not(.sign-font) {
            color: $color6;
          }
        }
      }
    }
  }
  .normal-group-wrap {
    .print-button:hover, .print-button:focus, .print-button:active {
      color: $color5;
    }
  }
  // 搜索栏
  .top-search {
    >.ant-row {
      .ant-col.search-button {
        .ant-btn:not(.ant-btn-primary):not(.ant-btn-link):active, .ant-btn:not(.ant-btn-primary):not(.ant-btn-link).active, .ant-btn:not(.ant-btn-primary):not(.ant-btn-link):hover, .ant-btn:not(.ant-btn-primary):not(.ant-btn-link):focus {
          color: $color7;
          border-color: $color7;
        }
        .ant-btn-primary {
          background-color: $color6;
          border-color: $color6;
        }
        .ant-btn-link {
          color: $color6;
        }
      }
    }
    .advanced-list {
      .advance-value {
        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;
        }
      }
    }
  }
  // 弹窗按钮
  .popview-modal {
    .ant-modal-footer {
      .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;
      }
    }
  }
  // 表单弹窗
  .action-modal {
    .ant-modal-footer {
      .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-modal-confirm-confirm {
    .ant-modal-confirm-btns {
      .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-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-radio-checked .ant-radio-inner {
    border-color: $color6;
  }
  .ant-radio-checked::after {
    border: 1px solid $color6;
  }
  .ant-radio-inner::after {
    background-color: $color6;
  }
  .ant-radio-wrapper:hover .ant-radio, .ant-radio:hover .ant-radio-inner, .ant-radio-input:focus + .ant-radio-inner {
    border-color: $color6;
  }
  // 复选框
  .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-input-affix-wrapper:hover .ant-input:not(.ant-input-disabled) {
    border-color: $color5;
  }
  // 日历
  .ant-calendar-picker:hover .ant-calendar-picker-input:not(.ant-input-disabled) {
    border-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;
    }
  }
  // 表格排序图标
  .ant-table-thead > tr > th .ant-table-column-sorter .ant-table-column-sorter-inner .ant-table-column-sorter-up.on, .ant-table-thead > tr > th .ant-table-column-sorter .ant-table-column-sorter-inner .ant-table-column-sorter-down.on {
    color: $color6;
  }
  .mk-water-mark {
    color: $color4;
  }
  .mk-form-split-line {
    color: $color6;
  }
  .system-color {
    color: $color6;
  }
  
  .ant-timeline.system {
    .ant-timeline-item-tail {
      border-color: $color2;
    }
  }
  .mk-time-line-wrap.system {
    .mk-timeline-item-tail {
      border-color: $color2;
    }
  }
  .custom-tab-form-box .mk-normal-form-title.mkbtn {
    .form-title {
      color: $color6;
      border-color: $color6;
    }
    .form-title.active {
      background: $color6;
      color: #ffffff;
    }
  }
  .ant-input-search .ant-input-group-addon .ant-input-search-button {
    background-color: $color6;
    border-color: $color6;
  }
  .ant-modal-wrap .ant-modal-footer, .ant-drawer .ant-drawer-footer {
    .ant-btn:not(.ant-btn-primary):hover {
      color: $color6;
      border-color: $color6;
    }
    .ant-btn-primary {
      background-color: $color6;
      border-color: $color6;
    }
  }
  .ant-carousel {
    .slick-dots {
      >li {
        button {
          background-color: $color3;
        }
      }
      >li.slick-active {
        button {
          background-color: $color6;
        }
      }
    }
  }
  .ant-spin {
    .ant-spin-dot-item {
      background-color: $color6;
    }
  }
}

body.hidden-split-line #root { // 去除登录页分割线
  .login-container {
    .logo {
      border-color: transparent;
    }
    .login-middle {
      border-color: transparent;
    }
  }
}

// 皮肤背景与字体颜色
body[class*='-black'] {
  --mk-sys-background: #000000;
  --mk-sys-light-background: #434343;
  --mk-sys-font-color: rgba(255, 255, 255, 0.85);
  --mk-sys-light-font-color: rgba(255, 255, 255, 0.65);
}
body[class*='-white'] {
  --mk-sys-background: #ffffff;
  --mk-sys-light-background: #ffffff;
  --mk-sys-font-color: rgba(0, 0, 0, 0.85);
  --mk-sys-light-font-color: rgba(0, 0, 0, 0.65);
}

body[class*='mk-blue-'] {
  --mk-sys-color: #1890ff;
  --mk-sys-color1: #e6f7ff;
  --mk-sys-color5: #40a9ff;
  @include viewstyle(#e6f7ff, #bae7ff, #91d5ff, #69c0ff, #40a9ff, #1890ff, #096dd9);
}

body[class*='mk-red-'] {
  --mk-sys-color: #f5222d;
  --mk-sys-color1: #fff1f0;
  --mk-sys-color5: #ff4d4f;
  @include viewstyle(#fff1f0, #ffccc7, #ffa39e, #ff7875, #ff4d4f, #f5222d, #cf1322);
}

body[class*='mk-orange-red-'] {
  --mk-sys-color: #fa541c;
  --mk-sys-color1: #fff2e8;
  --mk-sys-color5: #ff7a45;
  @include viewstyle(#fff2e8, #ffd8bf, #ffbb96, #ff9c6e, #ff7a45, #fa541c, #d4380d);
}

body[class*='mk-orange-'] {
  --mk-sys-color: #fa8c16;
  --mk-sys-color1: #fff7e6;
  --mk-sys-color5: #ffa940;
  @include viewstyle(#fff7e6, #ffe7ba, #ffd591, #ffc069, #ffa940, #fa8c16, #d46b08);
}

body[class*='mk-orange-yellow-'] {
  --mk-sys-color: #faad14;
  --mk-sys-color1: #fffbe6;
  --mk-sys-color5: #ffc53d;
  @include viewstyle(#fffbe6, #fff1b8, #ffe58f, #ffd666, #ffc53d, #faad14, #d48806);
}

body[class*='mk-yellow-'] {
  --mk-sys-color: #fadb14;
  --mk-sys-color1: #feffe6;
  --mk-sys-color5: #ffec3d;
  @include viewstyle(#feffe6, #ffffb8, #fffb8f, #fff566, #ffec3d, #fadb14, #d4b106);
}

body[class*='mk-yellow-green-'] {
  --mk-sys-color: #a0d911;
  --mk-sys-color1: #fcffe6;
  --mk-sys-color5: #bae637;
  @include viewstyle(#fcffe6, #f4ffb8, #eaff8f, #d3f261, #bae637, #a0d911, #7cb305);
}

body[class*='mk-green-'] {
  --mk-sys-color: #52c41a;
  --mk-sys-color1: #f6ffed;
  --mk-sys-color5: #73d13d;
  @include viewstyle(#f6ffed, #d9f7be, #b7eb8f, #95de64, #73d13d, #52c41a, #389e0d);
}

body[class*='mk-cyan-'] {
  --mk-sys-color: #13c2c2;
  --mk-sys-color1: #e6fffb;
  --mk-sys-color5: #36cfc9;
  @include viewstyle(#e6fffb, #b5f5ec, #87e8de, #5cdbd3, #36cfc9, #13c2c2, #08979c);
}

body[class*='mk-blue-purple-'] {
  --mk-sys-color: #2f54eb;
  --mk-sys-color1: #f0f5ff;
  --mk-sys-color5: #597ef7;
  @include viewstyle(#f0f5ff, #d6e4ff, #adc6ff, #85a5ff, #597ef7, #2f54eb, #1d39c4);
}

body[class*='mk-purple-'] {
  --mk-sys-color: #722ed1;
  --mk-sys-color1: #f9f0ff;
  --mk-sys-color5: #9254de;
  @include viewstyle(#f9f0ff, #efdbff, #d3adf7, #b37feb, #9254de, #722ed1, #531dab);
}

body[class*='mk-magenta-'] {
  --mk-sys-color: #eb2f96;
  --mk-sys-color1: #fff0f6;
  --mk-sys-color5: #f759ab;
  @include viewstyle(#fff0f6, #ffd6e7, #ffadd2, #ff85c0, #f759ab, #eb2f96, #c41d7f);
}

body[class*='mk-grass-green-'] {
  --mk-sys-color: #aeb303;
  --mk-sys-color1: #f2efda;
  --mk-sys-color5: #bfbf22;
  @include viewstyle(#f2efda, #e6de97, #d9d26c, #ccc845, #bfbf22, #aeb303, #838c00);
}

body[class*='mk-deep-red-'] {
  --mk-sys-color: #c32539;
  --mk-sys-color1: #fff0f0;
  --mk-sys-color5: #cf4856;
  @include viewstyle(#fff0f0, #f5cbcb, #e89b9e, #db7077, #cf4856, #c32539, #9c162c);
}

body[class*='mk-deep-blue-'] {
  --mk-sys-color: #1d3661;
  --mk-sys-color1: #eff1f4;
  --mk-sys-color5: #394c6f;
  @include viewstyle(#eff1f4, #e0e3e9, #dbdfe6, #c6cede, #394c6f, #1d3661, #1d3661);
}