- // cover some element-ui styles
-
- .el-breadcrumb__inner,
- .el-breadcrumb__inner a {
- font-weight: 400 !important;
- color: #fff !important;
- }
-
- .el-upload {
- input[type='file'] {
- display: none !important;
- }
- }
-
- .el-upload__input {
- display: none;
- }
-
- .cell {
- .el-tag {
- margin-right: 0px;
- }
- }
-
- .small-padding {
- .cell {
- padding-left: 5px;
- padding-right: 5px;
- }
- }
-
- .fixed-width {
- .el-button--mini {
- padding: 7px 10px;
- width: 60px;
- }
- }
-
- .status-col {
- .cell {
- padding: 0 10px;
- text-align: center;
-
- .el-tag {
- margin-right: 0px;
- }
- }
- }
-
- // refine element ui upload
- .el-upload {
- width: 100%;
- .el-upload-dragger {
- width: 100%;
- height: 200px;
- background: transparent !important;
- }
- }
-
- // dropdown
- .el-dropdown-menu {
- background: $mainColor1 !important;
- a {
- display: block;
- }
- .more {
- text-align: center;
- color: #409eff;
- cursor: pointer;
- }
- .el-dropdown-menu__item {
- color: #c6c6c6 !important;
- &:hover {
- background: $mainColor2 !important;
- color: #fff !important;
- }
- }
- .el-dropdown-menu__item:not(.is-disabled):focus {
- background: $mainColor2 !important;
- color: #fff !important;
- }
- }
- .el-input__wrapper,
- .el-textarea__inner {
- background: $mainColor1 !important;
- box-shadow: 0 0 0 1px $mainColor2 inset !important;
- color: #fff !important;
- .el-input__inner {
- color: #fff !important;
- }
- }
-
- .el-date-editor {
- .el-range-input,
- .el-range-separator {
- color: #c6c6c6 !important;
- }
- .el-range-editor.el-input__inner {
- display: inline-flex !important;
- }
- .el-range-separator {
- box-sizing: content-box;
- }
- }
- .el-date-table td.in-range .el-date-table-cell {
- background: $mainColor2 !important;
- }
- .el-menu {
- background: $mainColor1 !important;
- --el-menu-border-color: $mainColor2 !important;
- .el-menu--collapse > div > .el-submenu > .el-submenu__title .el-submenu__icon-arrow {
- display: none;
- }
- .el-menu-item,
- .el-sub-menu__title {
- color: #c6c6c6 !important;
- }
- }
-
- .el-dropdown .el-dropdown-link {
- color: var(--el-color-primary) !important;
- }
-
- // 重新定义elementplus样式
- // 弹窗
- .el-dialog {
- transform: none;
- position: absolute;
- top: 50%;
- left: 50%;
- z-index: 2000;
- display: flex;
- flex-direction: column;
- transform: translate(-50%, -50%);
- margin: 0 !important;
- background: $mainBg !important;
- box-shadow: 0px 0px 40px rgba(0, 21, 41, 0.35) !important;
- max-height: calc(100% - 30px);
- max-width: calc(100% - 30px);
- .el-dialog__header {
- border-bottom: 1px solid $mainColor1;
- width: 100%;
- .el-dialog__close {
- font-size: 26px;
- font-weight: bold;
- svg path {
- fill: #3afff8 !important;
- }
- }
- }
- .el-dialog__title {
- font-family: YouSheBiaoTiHei;
- font-weight: 400;
- font-size: 22px;
- color: #e4f5ff;
- }
- .el-dialog__footer {
- border-top: 1px solid $mainColor1;
- }
- .el-dialog__body {
- padding-top: 20px !important;
- padding-bottom: 0 !important;
- overflow: auto;
- flex: 1;
- }
- }
-
- .el-dialog.scrollbar .el-dialog__body {
- overflow: auto;
- overflow-x: hidden;
- max-height: 75vh;
- padding: 10px 20px 0;
- }
-
- .el-message-box {
- background: $mainBg !important;
- border-color: $mainColor1 !important;
- box-shadow: 0px 0px 40px rgba(0, 21, 41, 0.35) !important;
- .el-message-box__title {
- color: #fff !important;
- }
- .el-message-box__message {
- color: #c6c6c6 !important;
- }
- }
- .el-message--success {
- svg path {
- fill: $--color-success !important;
- }
- }
- .el-message--error {
- svg path {
- fill: $--color-danger !important;
- }
- }
-
- .el-popper {
- background-color: $mainColor1 !important;
- border-color: $mainColor1 !important;
- box-shadow: 0px 0px 20px rgba(0, 21, 41, 0.35) !important;
- .el-popper__arrow::before {
- --el-border-color-light: #fff !important;
- background-color: $mainColor1 !important;
- }
- .el-select-dropdown__item {
- color: #fff !important;
- }
- .el-select-dropdown__item.selected {
- background-color: $mainBg !important;
- color: #00d1ff !important;
- }
- .el-select-dropdown__item:hover,
- .el-select-dropdown__item.hover {
- background-color: $mainBg !important;
- }
- }
- .el-select .el-select__tags-text,
- .el-select__input {
- color: #fff !important;
- }
-
- .el-table {
- --el-table-border-color: $mainColor1 !important;
- --el-table-bg-color: $mainColor1 !important;
- .el-table__body {
- border-bottom: 1px solid $mainColor2 !important;
- }
- .el-table__header-wrapper,
- .el-table__fixed-header-wrapper {
- th {
- word-break: break-word;
- background-color: $mainColor1 !important;
- height: 40px !important;
- font-size: 13px;
- }
- }
- .el-table__body-wrapper {
- background-color: #004770 !important;
- .el-button [class*='el-icon-'] + span {
- margin-left: 1px;
- }
- td.el-table-fixed-column--right {
- background: $mainBg !important;
- }
- }
-
- tr {
- background-color: $mainColor1 !important;
- }
- tr:nth-of-type(even) {
- background-color: $mainBg !important;
- }
- tr:hover > td {
- background-color: $mainColor2 !important;
- }
-
- th.el-table__cell,
- td.el-table__cell {
- text-align: center;
- border-bottom: 1px solid $mainBg !important;
- color: #c6c6c6;
- border-right: none !important;
- position: static !important; // 设置position 使得 子元素不与其产生新的层叠关系
- }
- .el-table__empty-block {
- background-color: #004770 !important;
- .el-table__empty-text {
- color: #c6c6c6 !important;
- }
- }
- .el-button {
- border: none !important;
- background: none !important;
- &:hover {
- background: none !important;
- transform: scale(1.01);
- }
- }
- .el-button--primary {
- color: $--color-primary !important;
- svg path {
- fill: $--color-primary !important;
- }
- }
- .el-button--danger {
- color: $--color-danger !important;
- svg path {
- fill: $--color-danger !important;
- }
- }
- .el-button--warning {
- color: $--color-warning !important;
- svg path {
- fill: $--color-warning !important;
- }
- }
- .el-button--success {
- color: $--color-success !important;
- svg path {
- fill: $--color-success !important;
- }
- }
- }
- .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
- background: $mainBg !important;
- }
- .el-table__body-wrapper tr td.el-table-fixed-column--left,
- .el-table__body-wrapper tr td.el-table-fixed-column--right,
- .el-table__body-wrapper tr th.el-table-fixed-column--left,
- .el-table__body-wrapper tr th.el-table-fixed-column--right,
- .el-table__footer-wrapper tr td.el-table-fixed-column--left,
- .el-table__footer-wrapper tr td.el-table-fixed-column--right,
- .el-table__footer-wrapper tr th.el-table-fixed-column--left,
- .el-table__footer-wrapper tr th.el-table-fixed-column--right,
- .el-table__header-wrapper tr td.el-table-fixed-column--left,
- .el-table__header-wrapper tr td.el-table-fixed-column--right,
- .el-table__header-wrapper tr th.el-table-fixed-column--left,
- .el-table__header-wrapper tr th.el-table-fixed-column--right {
- background: $mainColor1 !important;
- }
- /* 用来设置当前页面element全局table 选中某行时的背景色*/
- .el-table__body tr.current-row > td {
- background-color: #1d8db4 !important;
- color: #fff;
- }
- .el-table__body tr.hover-row.current-row > td.el-table__cell,
- .el-table__body tr.hover-row.el-table__row--striped.current-row > td.el-table__cell,
- .el-table__body tr.hover-row.el-table__row--striped > td.el-table__cell,
- .el-table__body tr.hover-row > td.el-table__cell {
- background-color: $mainColor2 !important;
- }
-
- /** 表格布局 **/
- .pagination-container {
- margin-bottom: 10px;
- margin-top: 10px;
- padding: 10px 20px !important;
- background: transparent !important;
- .el-pagination {
- float: right;
- button {
- background: #0073a5 !important;
- }
- .el-pagination__total,
- .el-pagination__jump {
- color: #fff !important;
- }
- .el-pager li {
- background-color: #004770 !important;
- color: #fff;
- }
- .el-pager li.is-active {
- background-color: #00c7f2 !important;
- }
- }
- }
-
- @media (max-width: 768px) {
- .pagination-container .el-pagination > .el-pagination__jump {
- display: none !important;
- }
- .pagination-container .el-pagination > .el-pagination__sizes {
- display: none !important;
- }
- }
-
- .el-button {
- color: #fff !important;
- --el-button-bg-color: transparent !important;
- border-color: $--color-info !important;
- &:hover {
- background-color: $--color-info !important;
- }
- }
- .el-button--primary {
- background-color: $mainColor2 !important;
- border-color: $mainColor1 !important;
- &:hover {
- background-color: $mainColor1 !important;
- }
- }
- .el-button--success {
- background-color: $green !important;
- border-color: $panGreen !important;
- &:hover {
- background-color: $tiffany !important;
- }
- }
- .el-button--danger {
- background-color: $--color-danger !important;
- border-color: $red !important;
- &:hover {
- background-color: $red !important;
- }
- }
- .el-button--warning {
- background-color: $--color-warning !important;
- border-color: $yellow !important;
- &:hover {
- background-color: $yellow !important;
- }
- }
- .el-button--info {
- background-color: $light-blue !important;
- border-color: $light-blue !important;
- &:hover {
- background-color: $--color-info !important;
- }
- }
-
- .el-picker-panel {
- background: $mainColor1 !important;
- --el-text-color-regular: #fff;
- --el-text-color-placeholder: #8a969d;
- }
- .el-loading-mask {
- --el-mask-color: rgba(255, 255, 255, 0.2);
- }
-
- .el-tree {
- background-color: $mainColor1 !important;
- --el-tree-text-color: #fff !important;
- --el-fill-color-light: $mainColor1 !important;
- .el-tree-node__content > .el-checkbox {
- margin-right: 8px;
- }
- .el-tree-node {
- .el-tree-node__children {
- .el-tree-node__expand-icon {
- visibility: hidden;
- }
- }
- .el-tree-node__content .is-leaf {
- visibility: hidden;
- }
- }
- }
- .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
- background-color: $mainColor2 !important;
- }
-
- .el-input-number__decrease,
- .el-input-number__increase {
- background-color: $mainColor1 !important;
- border-left: 1px solid $mainColor2 !important;
- }
-
- .el-empty__description p {
- color: #c6c6c6 !important;
- }
- .el-input-group__append,
- .el-input-group__prepend {
- border-color: $mainColor2 !important;
- background-color: $mainColor2 !important;
- box-shadow: none !important;
- }
- .el-input-group__append button.el-button,
- .el-input-group__append button.el-button:hover,
- .el-input-group__append div.el-select .el-input__wrapper,
- .el-input-group__append div.el-select:hover .el-input__wrapper,
- .el-input-group__prepend button.el-button,
- .el-input-group__prepend button.el-button:hover,
- .el-input-group__prepend div.el-select .el-input__wrapper,
- .el-input-group__prepend div.el-select:hover .el-input__wrapper {
- border-color: #409eff !important;
- background-color: #409eff !important;
- box-shadow: none !important;
- }
-
- .el-radio,
- .el-checkbox,
- .icon-body .icon-list span,
- .el-year-table td.today .cell {
- color: #c6c6c6 !important;
- }
-
- .el-time-spinner__item,
- .el-time-panel__btn.cancel {
- color: #c6c6c6 !important;
- }
- .el-time-spinner__item.is-active:not(.is-disabled) {
- color: #409eff !important;
- }
- .el-picker-panel__footer {
- background-color: transparent !important;
- }
- .el-rate .el-rate__item {
- svg path {
- fill: $yellow !important;
- }
- }
- .el-card {
- background-color: transparent !important;
- border-color: transparent !important;
- color: #c6c6c6 !important;
- }
- .el-tabs__item {
- color: #c6c6c6 !important;
- }
- .el-tabs__item.is-active {
- color: #409eff !important;
- }
- .el-tabs__item:focus-visible {
- box-shadow: none !important;
- }
- .link-type,
- .link-type:focus {
- color: #409eff !important;
- }
- .el-transfer {
- margin-bottom: 20px;
- .el-transfer-panel,
- .el-transfer-panel .el-transfer-panel__header {
- background-color: $mainColor1 !important;
- border-color: $mainColor1 !important;
- color: #c6c6c6 !important;
- }
- .el-transfer-panel__body {
- border-color: $mainColor1 !important;
- }
- .el-checkbox__label {
- color: #c6c6c6 !important;
- }
- }
- .el-step__title.is-process {
- color: #409eff !important;
- }
- .el-divider__text {
- background-color: $mainColor1 !important;
- border-color: $mainColor1 !important;
- color: #c6c6c6 !important;
- }
- .el-divider--horizontal {
- border-color: $mainColor1 !important;
- }
- .el-progress-bar__outer {
- background-color: $mainColor2 !important;
- }
- .el-form-item__content {
- color: #fff;
- }
- .el-tag.el-tag--info {
- background: $mainColor2 !important;
- }
- .el-radio-group {
- .el-radio-button {
- &.is-active {
- .el-radio-button__inner {
- background: $mainColor2 !important;
- border-color: $mainColor2 !important;
- }
- }
- }
- }