:root { --el-header-height: 69px; --el-aside-scrollbar-height: calc(100vh - var(--el-header-height)); --el-main-scrollbar-height: calc(100vh - var(--el-header-height) - 40px); --el-border-color: #273868 !important; // 边框颜色 --el-text-color-regular: #fff !important; --el-fill-color-light: #0e1d44 !important; //hover背景色 --el-color-check: #14affe !important; //hover、选中 文字颜色 --el-aside-bg-color: #1d3065 !important; --el-input-bg-color: #081435 !important; --el-fill-color-blank: #081435 !important; // 背景色 --el-border-color-lighter: var(--el-border-color) !important; --el-bullet-frame-bg-color: #08163b !important; --el-text-color-primary: #fff !important; } .el-button:focus, .el-button:hover { --el-button-hover-text-color: var(--el-button-text-color); --el-button-hover-border-color: var(--el-button-border-color); --el-button-hover-bg-color: var(--el-button-bg-color); } .el-header { --el-header-padding: 0 !important; --el-header-height: 69px !important; } .el-main { --el-main-padding: 0 !important; } .el-aside { --el-aside-width: 250px; background-color: var(--el-aside-bg-color); } .el-card { margin: 10px 20px; --el-card-padding: 18px 18px 0 18px !important; --el-card-bg-color: rgba(8, 24, 58, 0.5) !important; --el-card-border-color: var(--el-border-color) !important; color: var(--el-text-color-regular) !important; position: relative; } .el-popper { --el-bg-color-overlay: var(--el-fill-color-blank) !important; --el-border-color-light: var(--el-border-color) !important; } .el-cascader-node:not(.is-disabled):focus, .el-cascader-node:not(.is-disabled):hover { --el-cascader-node-background-hover: var(--el-fill-color-light); color: var(--el-color-check); } .el-cascader { --el-cascader-tag-background: #214082 !important; --el-color-info: var(--el-text-color-regular); } .el-select-dropdown__item.hover, .el-select-dropdown__item:hover { color: var(--el-color-check); } .el-dropdown-menu__item { &:not(.is-disabled):focus { --el-dropdown-menuItem-hover-fill: var(--el-fill-color-light); --el-dropdown-menuItem-hover-color: var(--el-color-check); } } .el-menu { border-right: none !important; --el-menu-bg-color: var(--el-aside-bg-color); --el-menu-text-color: var(--el-text-color-regular); --el-menu-hover-text-color: var(--el-text-color-regular); --el-menu-active-color: var(--el-text-color-regular); --el-menu-hover-bg-color: transparent; span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } } .el-sub-menu__title *, .el-menu-item * { vertical-align: middle !important; } .el-menu-item { &:hover, &.is-active { //background: #1d3f77; background-image: linear-gradient(to right, #2c6ee9, rgba(0, 0, 0, 0)); } } //.el-menu--vertical:not(.el-menu--collapse):not(.el-menu--popup-container) .el-menu-item { // padding-left: calc(var(--el-menu-base-level-padding) + var(--el-menu-level) * var(--el-menu-level-padding) + 20px) !important; //} .el-breadcrumb { margin-left: 10px; height: 30px; line-height: 30px !important; .el-breadcrumb__inner { --el-text-color-regular: #cacbce; a { font-weight: normal; --el-text-color-primary: #cacbce; } } .el-breadcrumb__separator { --el-text-color-placeholder: #cacbce; } } .el-select, .el-cascader, .el-date-editor.el-input, .el-date-editor.el-input__wrapper, .el-input__wrapper, .el-input-number, .el-select-v2 { width: 100% !important; } .el-textarea.is-disabled .el-textarea__inner, .el-select { --el-disabled-border-color: var(--el-border-color); } .el-table { --el-table-bg-color: #071a43 !important; --el-bg-color: #071a43 !important; --el-table-header-bg-color: #0f2049 !important; --el-table-border-color: var(--el-border-color) !important; --el-table-tr-bg-color: #071a43 !important; --el-fill-color-lighter: #111e40 !important; --el-table-text-color: #e0e0e0 !important; --el-table-header-text-color: var(--el-text-color-regular) !important; --el-table-row-hover-bg-color: #0d5aa3 !important; --el-table-current-row-bg-color: #0d5aa3 !important; .el-table__cell { text-align: center !important; } .el-table__empty-text { --el-text-color-secondary: var(--el-text-color-regular) !important; } } .el-pagination { --el-pagination-button-color: var(--el-text-color-regular) !important; --el-pagination-button-disabled-bg-color: var(--el-fill-color-blank) !important; --el-pagination-bg-color: var(--el-fill-color-blank) !important; } .el-pagination .el-select { width: 128px !important; } .el-pagination--small .el-select { width: 100px !important; } .el-radio { --el-radio-input-bg-color: #091839 !important; } .el-radio__input.is-checked .el-radio__inner { background: var(--el-radio-input-bg-color) !important; border-color: var(--el-color-check); } .el-radio__inner { &::after { --el-color-white: var(--el-color-check); } } .el-radio__input.is-disabled.is-checked .el-radio__inner { --el-disabled-border-color: var(--el-color-check); &::after { --el-text-color-placeholder: var(--el-color-check); } } .el-radio__input.is-disabled .el-radio__inner { --el-disabled-bg-color: var(--el-radio-input-bg-color); --el-disabled-border-color: var(--el-border-color); } .el-checkbox { --el-checkbox-bg-color: #091839 !important; --el-checkbox-checked-bg-color: #091839 !important; --el-checkbox-checked-input-border-color: var(--el-color-check) !important; } .el-checkbox__input.is-disabled .el-checkbox__inner { --el-checkbox-disabled-input-fill: var(--el-checkbox-bg-color); --el-checkbox-disabled-border-color: var(--el-border-color); } .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner, .el-checkbox__input.is-disabled.is-indeterminate .el-checkbox__inner { --el-checkbox-disabled-checked-input-fill: var(--el-checkbox-bg-color); --el-checkbox-disabled-checked-input-border-color: var(--el-color-check); } .el-picker__popper, .el-date-picker { --el-datepicker-border-color: var(--el-border-color) !important; } .el-time-panel__btn { --el-text-color-primary: var(--el-text-color-regular); } .el-time-spinner__item:hover:not(.is-disabled):not(.is-active) { color: var(--el-color-check); } .el-button.is-plain { --el-fill-color-blank: var(--el-fill-color-blank); } .el-button.is-text:not(.is-disabled):active { background-color: var(--el-fill-color-light) !important; } .el-button.is-text:not(.is-disabled):focus, .el-button.is-text:not(.is-disabled):hover { color: var(--el-color-check); } .el-time-spinner__item.is-active:not(.is-disabled) { --el-text-color-primary: var(--el-color-check); } .el-picker-panel__icon-btn { color: var(--el-text-color-regular); .el-icon { color: var(--el-text-color-regular); } } .el-date-range-picker { --el-datepicker-border-color: var(--el-fill-color-light) !important; --el-datepicker-inrange-bg-color: var(--el-fill-color-light) !important; --el-datepicker-inrange-hover-bg-color: var(--el-fill-color-light) !important; } .el-date-editor .el-range-separator { color: var(--el-text-color-regular) !important; } .el-date-table.is-week-mode .el-date-table__row { &.current, &:hover { .el-date-table-cell { --el-datepicker-inrange-bg-color: var(--el-fill-color-light) !important; } } } .el-input.is-disabled .el-input__wrapper { box-shadow: 0 0 0 1px var(--el-border-color) inset !important; } .el-select .el-tag.el-tag--info { background-color: #214082 !important; --el-tag-text-color: var(--el-text-color-regular) !important; } .el-tag .el-tag__close:hover { color: var(--el-color-check) !important; background-color: var(--el-fill-color-light) !important; } .el-upload--picture-card { --el-fill-color-lighter: var(--el-fill-color-blank) !important; border: 1px solid var(--el-border-color) !important; } .el-collapse { --el-collapse-header-text-color: var(--el-text-color-regular) !important; --el-collapse-content-text-color: var(--el-text-color-regular) !important; } .el-tabs__item { color: var(--el-text-color-regular) !important; &.is-active { color: var(--el-color-primary) !important; } } .el-tabs__nav-wrap::after { --el-border-color-light: var(--el-border-color); } .el-dialog { background: transparent !important; --el-dialog-margin-top: 50px !important; padding: 0 !important; .el-dialog__header { background-image: url("/src/assets/images/public/tctitlebg.png"); height: 31px; line-height: 31px; padding-left: 30px; background-repeat: no-repeat; background-size: 100% 100%; margin-right: 0 !important; --el-dialog-padding-primary: 0 !important; padding-bottom: 0; .el-dialog__title { color: var(--el-text-color-regular); --el-dialog-title-font-size: 14px; } .el-dialog__headerbtn { height: 31px; top: 0; } } .el-dialog__body { background-color: var(--el-bullet-frame-bg-color); padding: calc(var(--el-dialog-padding-primary) + 10px) var(--el-dialog-padding-primary); } .el-dialog__footer { background-color: var(--el-bullet-frame-bg-color); padding: var(--el-dialog-padding-primary); } } .el-drawer { --el-drawer-bg-color: var(--el-bullet-frame-bg-color) !important; .el-drawer__header { color: var(--el-text-color-regular); } } .el-popper.is-dark { background: var(--el-fill-color-blank) !important; border: 1px solid var(--el-border-color) !important; color: var(--el-text-color-regular) !important; .el-popper__arrow::before { background: var(--el-fill-color-blank) !important; border: 1px solid var(--el-border-color) !important; } } .el-message-box { background-color: var(--el-fill-color-blank) !important; --el-messagebox-title-color: var(--el-text-color-regular) !important; } .el-divider__text { font-size: 16px !important; font-weight: 700 !important; background-color: var(--el-fill-color-blank) !important; color: var(--el-text-color-regular) !important; } .el-calendar { --el-calendar-selected-bg-color: var(--el-fill-color-light) !important; } .el-steps { --el-text-color-primary: var(--el-text-color-regular); .el-step__icon { background: var(--el-fill-color-blank); } } .el-descriptions { --el-text-color-primary: var(--el-text-color-regular); } .el-descriptions__label { width: 200px; } .el-descriptions__content { width: auto; } .el-descriptions__title { &:before { content: ''; display: inline-block; width: 4px; height: 19px; background-color: #04a9f5; margin-right: 10px; vertical-align: text-bottom; } } .el-statistic__content { color: var(--el-text-color-regular) !important; } .el-step__title, .el-select-dropdown__option-item { font-size: 14px !important; } .el-step__description { * { font-size: 12px !important; } } .el-notification { --el-notification-title-color: #000 !important; .el-notification__closeBtn:hover { --el-notification-close-hover-color: #000 !important; } } .el-color-predefine__color-selector.selected { --el-color-primary: #fff !important; } .el-input-number.is-disabled .el-input-number__decrease, .el-input-number.is-disabled .el-input-number__increase{ border-color: var(--el-border-color) !important; }