You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
3224 lines
64 KiB
3224 lines
64 KiB
//============================================================base.less 开始=============================================//
|
|
//定义基础色
|
|
|
|
//主色
|
|
|
|
body {
|
|
--color-primary: #409eff;
|
|
--color-primary-light: rgb(64 158 255 / 8%);
|
|
}
|
|
|
|
input[type='number']::-webkit-inner-spin-button,
|
|
input[type='number']::-webkit-outer-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
|
|
@--color-primary: ~'var(--color-primary)';
|
|
@--color-primary-light: ~'var(--color-primary-light)';
|
|
@--text-regular-color: ~'var(--el-text-color-regular)';
|
|
@text: #595959;
|
|
@text-2: #8c8c8c;
|
|
@tree-text-color: #ffffff;
|
|
|
|
//导航菜单
|
|
@dark-text: rgb(255 255 255 / 66%);
|
|
@dark-text-active: #eee;
|
|
@dark-bg: rgb(24, 24, 28);
|
|
@dark-bg-2: #101014;
|
|
|
|
@menu-bg-normal: rgb(24, 24, 28);
|
|
|
|
@light-text: @text;
|
|
@light-text-active: @--color-primary;
|
|
@light-bg: @text-regular-color;
|
|
@text-regular-color: @text-regular-color;
|
|
@light-bg-active: @--color-primary-light;
|
|
|
|
@primary-text: rgb(255 255 255 / 66%);
|
|
@primary-text-2: rgb(255 255 255 / 65%);
|
|
@primary-text-active: @text-regular-color;
|
|
@primary-bg: @--color-primary;
|
|
@primary-bg-light: @--color-primary-light;
|
|
@primary-bg-active: @--color-primary-light;
|
|
|
|
// 按钮文字颜色始终为白色
|
|
.el-button--primary {
|
|
//color: #ffffff;
|
|
// background-color: var(--color-primary) !important;
|
|
//border-color: var(--color-primary) !important;
|
|
}
|
|
|
|
@text-regular-color: #fff;
|
|
@input-bg-color: #0c2852;
|
|
@border-color: #274778;
|
|
@tr-bg-color: rgb(23, 37, 70);
|
|
@tr-hover-bg-color: rgba(64, 66, 71, 0.5);
|
|
@text-color: #d7d7d7;
|
|
@selected-bg-color: rgba(0, 39, 137, 0.5);
|
|
@check-box-background-color: #274778;
|
|
@check-box-checked-background-color: #274778;
|
|
//@check-box-border-color: #0B6CA3;
|
|
@check-box-border-color: #0594d9;
|
|
@block-bg-color: #172546;
|
|
@block-active-bg-color: '#162E5A';
|
|
@view-ctx-bg-color: #121d3d;
|
|
@rr-view-tab-bg: #193567;
|
|
@el-tabs-item-color: rgba(255, 255, 255, 0.9);
|
|
@el-tabs-item-isActive-color: rgba(255, 255, 255, 0.9);
|
|
@el-tabs-item-isActive-bg: #182652;
|
|
@select-dropdown-hover-bg: rgb(23, 37, 70);
|
|
@tr-hightlight-row-bg: 'rgba(0, 39, 137, 0.5)';
|
|
@el-date-table-td-disabled: #232e3f;
|
|
@el-radio-button__inner: transparent;
|
|
@monitor-usage-chart-border-color: '#274778';
|
|
@iot-relation-view-bg: #293e6b;
|
|
@list-item-detail-table-td: #182246;
|
|
@list-item-detail-table-td-odd: #242e50;
|
|
@device-board-setting-bg: #112043;
|
|
@el-tree-node-hover-bg-color: #172546;
|
|
@hightlight-title-color: #0ee9e9;
|
|
|
|
.rr-view-ctx {
|
|
background: @dark-bg-2;
|
|
height: calc(100% - 39px);
|
|
|
|
.rr-view-ctx-card {
|
|
position: relative;
|
|
height: 100%;
|
|
background: @block-bg-color;
|
|
overflow: auto;
|
|
}
|
|
|
|
::v-deep .el-card__body {
|
|
position: relative;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.el-input {
|
|
input.el-input__inner {
|
|
//background: @input-bg-color !important;
|
|
//border: 1px solid #DCDFE6;
|
|
//color: @text-color !important;
|
|
|
|
&::placeholder {
|
|
// color: @text-2;
|
|
}
|
|
}
|
|
|
|
.el-input__wrapper {
|
|
//padding: 0 !important;
|
|
}
|
|
|
|
// --el-disabled-text-color: @text-2 !important;
|
|
//--el-input-border-color: @border-color !important;
|
|
// --el-disabled-border-color: @border-color !important;
|
|
}
|
|
|
|
.el-input-number {
|
|
// --el-bg-color: @input-bg-color !important;
|
|
//--el-border-base: var(--el-border-width-base) var(--el-border-style-base) @border-color !important;
|
|
// --el-text-color-regular: @text-regular-color !important;
|
|
}
|
|
|
|
.el-select-v2__wrapper {
|
|
//background: @input-bg-color !important;
|
|
//border-color: @border-color !important;
|
|
|
|
// --el-text-color-placeholder: @text-2 !important;
|
|
}
|
|
|
|
.el-select-dropdown__option-item {
|
|
//color: @text-color !important;
|
|
//--el-bg-color: @tr-bg-color !important;
|
|
// font-size: var(--el-font-size-base) !important;
|
|
}
|
|
|
|
//.el-date-editor {
|
|
// input.el-range-input {
|
|
// background: @input-bg-color !important;
|
|
// //border: 1px solid #DCDFE6;
|
|
// color: @text-color !important;
|
|
//
|
|
// &::placeholder {
|
|
// color: @text-2;
|
|
// }
|
|
// }
|
|
//
|
|
// .el-range-separator {
|
|
// color: @text-2 !important;
|
|
// }
|
|
//
|
|
// --el-input-bg-color: @input-bg-color !important;
|
|
// --el-disabled-text-color: @text-2 !important;
|
|
// --el-input-border-color: @border-color !important;
|
|
// --el-disabled-border-color: @border-color !important;
|
|
//}
|
|
//
|
|
//.el-date-table td.disabled .el-date-table-cell {
|
|
// background: @el-date-table-td-disabled !important;
|
|
//}
|
|
//
|
|
//div.el-date-picker {
|
|
// --el-datepicker-text-color: @text-color !important;
|
|
// --el-datepicker-hover-text-color: var(--el-color-primary) !important;
|
|
//}
|
|
//
|
|
//.el-date-picker__header-label {
|
|
// color: @text-color !important;
|
|
//}
|
|
//
|
|
//textarea.el-textarea__inner {
|
|
// --el-input-bg-color: @input-bg-color !important;
|
|
// color: @text-regular-color !important;
|
|
//
|
|
// &::placeholder {
|
|
// color: @text-2;
|
|
// }
|
|
//
|
|
// --el-input-border-color: @border-color !important;
|
|
// --el-disabled-bg-color: @input-bg-color !important;
|
|
//
|
|
//}
|
|
//
|
|
//
|
|
//.el-select__popper .el-popper__arrow::before {
|
|
// background: @input-bg-color !important;
|
|
// border-color: @border-color !important;
|
|
//}
|
|
//
|
|
//.el-popper.is-light .el-popper__arrow::before {
|
|
// background: @input-bg-color !important;
|
|
//}
|
|
//
|
|
//.el-select-dropdown__item {
|
|
// color: @text-color !important;
|
|
//
|
|
// &:hover {
|
|
// background: @select-dropdown-hover-bg !important;
|
|
// }
|
|
//
|
|
// --el-bg-color: @tr-bg-color !important;
|
|
//
|
|
// &.selected {
|
|
// background: @tr-bg-color !important;
|
|
//
|
|
// }
|
|
//}
|
|
//
|
|
//.el-steps {
|
|
// --el-bg-color: @tr-bg-color !important;
|
|
//
|
|
// .el-step__title.is-process, .el-step__head.is-process {
|
|
// --el-text-color-primary: var(--el-color-primary);
|
|
// }
|
|
//
|
|
//}
|
|
|
|
@el-table-thead-th-bg: #1f3059;
|
|
@el-table-cell-hover-bg: #24355e;
|
|
@el-table-row-striped-cell-bg: #1e2c4f;
|
|
@fixColumn-hover-bg: rgba(0, 39, 137, 1);
|
|
//.el-table {
|
|
// border-radius: 6px;
|
|
//
|
|
// thead th {
|
|
// background: @el-table-thead-th-bg !important;
|
|
// color: @text-color !important;
|
|
// font-size: 16px;
|
|
// }
|
|
//
|
|
// .td.el-table__cell{
|
|
// &:hover {
|
|
// background: @el-table-cell-hover-bg !important;
|
|
// //background: rgba(30, 44, 79, 1) !important;
|
|
// }
|
|
// }
|
|
//
|
|
// tr.el-table__row--striped td.el-table__cell {
|
|
// background: @el-table-row-striped-cell-bg !important;
|
|
//
|
|
// }
|
|
//
|
|
// tr td.el-table-fixed-column--right {
|
|
// background: @tr-bg-color !important;
|
|
//
|
|
// &:hover {
|
|
// background: @fixColumn-hover-bg !important;
|
|
// }
|
|
// }
|
|
//
|
|
// .el-table__expand-icon {
|
|
// color: var(--el-text-color-placeholder) !important;
|
|
// }
|
|
//
|
|
// .el-table-column--selection {
|
|
// label.el-checkbox {
|
|
// .el-checkbox__inner {
|
|
// background: @check-box-checked-background-color !important;
|
|
// border-color: @check-box-border-color !important;
|
|
// }
|
|
// }
|
|
// label.el-checkbox.is-checked {
|
|
// .el-checkbox__inner {
|
|
// background: @check-box-checked-background-color !important;
|
|
// border-color: @check-box-border-color !important;
|
|
// }
|
|
// }
|
|
// }
|
|
//
|
|
//
|
|
// --el-table-text-color: @text-color !important;
|
|
// --el-table-border-color: @border-color !important;
|
|
// --el-table-border: 1px solid @border-color !important;
|
|
// --el-table-tr-bg-color: @tr-bg-color !important;
|
|
// --el-table-bg-color: @tr-bg-color !important;
|
|
// --el-table-row-hover-bg-color: @selected-bg-color !important;
|
|
// --el-table-current-row-bg-color: @selected-bg-color !important;
|
|
// --el-table-expanded-cell-bg-color: @tr-bg-color !important;
|
|
//}
|
|
|
|
@pager-active-color: #3b99f0;
|
|
|
|
//.el-pagination {
|
|
// color: @text-color !important;
|
|
//
|
|
// .btn-prev, .btn-next {
|
|
// border: 1px solid @border-color;
|
|
// border-radius: 4px;
|
|
// }
|
|
//
|
|
// .btn-prev {
|
|
// margin-right: 5px;
|
|
// }
|
|
//
|
|
// ul.el-pager {
|
|
// li {
|
|
// border: 1px solid @border-color;
|
|
// border-radius: 4px;
|
|
//
|
|
// &:not(last-child) {
|
|
// margin-right: 5px;
|
|
// }
|
|
//
|
|
// &:first-child {
|
|
// margin-left: 5px;
|
|
// }
|
|
//
|
|
// &.active {
|
|
// border-color: @pager-active-color;
|
|
// color: @pager-active-color;
|
|
// }
|
|
// }
|
|
//
|
|
// li.active + li {
|
|
// border: 1px solid @border-color;
|
|
// }
|
|
// }
|
|
//
|
|
// --el-pagination-bg-color: @tr-bg-color !important;
|
|
// --el-text-color-regular: @text-color !important;
|
|
// --el-pagination-button-color: @border-color !important;
|
|
// --el-pagination-button-disabled-bg-color: @tr-bg-color !important;
|
|
//}
|
|
|
|
//.el-loading-mask {
|
|
// background: @tr-bg-color !important;
|
|
//}
|
|
|
|
@dialog-bg-color: #162e5a;
|
|
@dialog-header-bg: #234daf;
|
|
@dialog-footer-border-top: 1px solid @--text-regular-color;
|
|
@dialog-el-input-border: 1px solid rgba(#1d3d77, 0.1);
|
|
.el-dialog {
|
|
//--el-dialog-bg-color: @dialog-bg-color !important;
|
|
|
|
.el-dialog__header {
|
|
text-align: center;
|
|
//background: @dialog-header-bg;
|
|
margin: 0 !important;
|
|
padding: 16px 0;
|
|
//border-bottom: 1px solid var(--el-border-color);
|
|
}
|
|
|
|
.el-dialog__title {
|
|
//color: @text-color;
|
|
}
|
|
|
|
.el-dialog__footer {
|
|
border-top: 1px solid var(--el-border-color);
|
|
}
|
|
|
|
.el-dialog__headerbtn {
|
|
top: 0;
|
|
|
|
.el-dialog__close {
|
|
// color: @text-regular-color !important;
|
|
|
|
&:hover {
|
|
// color: @check-box-border-color !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.el-input {
|
|
//border: @dialog-el-input-border !important;
|
|
}
|
|
}
|
|
|
|
.el-form-item__label {
|
|
//color: @text-color !important;
|
|
}
|
|
|
|
.el-radio {
|
|
//--el-radio-text-color: @text-color !important;
|
|
}
|
|
|
|
.el-input-group__append {
|
|
//--el-bg-color: @tr-bg-color !important;
|
|
}
|
|
|
|
.el-upload--picture-card,
|
|
.el-upload-list__item {
|
|
// background: @input-bg-color !important;
|
|
//border-color: @border-color !important;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.el-tabs--border-card {
|
|
// background: @tr-bg-color !important;
|
|
//--el-border-color-base: @border-color !important;
|
|
|
|
.el-tabs__item {
|
|
// background: @tr-bg-color !important;
|
|
// border-color: @border-color !important;
|
|
}
|
|
}
|
|
|
|
.el-tabs__nav {
|
|
//border-color: @border-color !important;
|
|
}
|
|
|
|
.el-tabs__header {
|
|
//border-color: @border-color !important;
|
|
}
|
|
|
|
.el-tabs__item {
|
|
// border-left-color: @border-color !important;
|
|
|
|
&.is-active {
|
|
// border-color: @border-color !important;
|
|
}
|
|
|
|
// --el-text-color-primary: @text-color !important;
|
|
}
|
|
|
|
.el-button--text {
|
|
// --el-color-primary: @text-color;
|
|
}
|
|
|
|
.el-button {
|
|
&.is-text {
|
|
// color: @text-color !important;
|
|
|
|
&:hover {
|
|
// color: @--color-primary !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.el-tree {
|
|
background: transparent !important;
|
|
//--el-tree-node-hover-bg-color: @el-tree-node-hover-bg-color !important;
|
|
//--el-tree-text-color: @text-color !important;
|
|
.el-tree-node.is-current > .el-tree-node__content {
|
|
color: @--color-primary;
|
|
}
|
|
|
|
.el-tree-node.is-current > .el-tree-node__content {
|
|
// background: @el-tree-node-hover-bg-color !important;
|
|
}
|
|
}
|
|
|
|
hr {
|
|
//border-color: @border-color !important;
|
|
}
|
|
|
|
//.el-date-range-picker{
|
|
// input.el-input__inner {
|
|
// background: @text-regular-color !important;
|
|
// color: var(--color-primary)!important;
|
|
// }
|
|
//}
|
|
|
|
//.el-popper.is-light {
|
|
// background: @input-bg-color !important;
|
|
// border-color: @border-color !important;
|
|
//}
|
|
//
|
|
//.el-dropdown__popper.el-popper[role=tooltip] {
|
|
// .el-dropdown-menu {
|
|
// background: @input-bg-color !important;
|
|
//
|
|
// .el-dropdown-menu__item {
|
|
// --el-text-color-regular: @text-color !important;
|
|
//
|
|
// :not(.is-disabled):focus {
|
|
// // background: @tr-bg-color !important;
|
|
// }
|
|
// }
|
|
// }
|
|
//}
|
|
|
|
@as-same-bg-color-as-right: #213361;
|
|
@content-bg-color: #172647;
|
|
//.el-collapse {
|
|
// --el-collapse-border-color: @as-same-bg-color-as-right !important;
|
|
// background: @as-same-bg-color-as-right !important;
|
|
// --el-collapse-header-bg-color: @as-same-bg-color-as-right !important;
|
|
// --el-collapse-content-bg-color: @content-bg-color !important;
|
|
// --el-collapse-header-text-color: @text-color !important;
|
|
// --el-collapse-content-text-color: @text-color !important;
|
|
// border-color: @as-same-bg-color-as-right !important;
|
|
//}
|
|
|
|
@el-datepicker-inrange-bg-color: #1f3a63;
|
|
@el-datepicker-inrange-hover-bg-color: #4e71c4;
|
|
//.el-picker-panel {
|
|
// background: @tr-bg-color !important;
|
|
// color: @text-color !important;
|
|
//
|
|
// .el-picker-panel__footer {
|
|
// background: @tr-bg-color !important;
|
|
// }
|
|
//
|
|
// //.el-date-range-picker__content,.el-date-range-picker__time-header,.el-picker-panel__footer{
|
|
// // border-color: @border-color !important;
|
|
// //}
|
|
// --el-datepicker-inner-border-color: @border-color !important;
|
|
// --el-datepicker-border-color: @border-color !important;
|
|
// --el-datepicker-off-text-color: @text-2 !important;
|
|
// --el-datepicker-header-text-color: @text-regular-color !important;
|
|
// --el-datepicker-icon-color: @text-color !important;
|
|
// --el-datepicker-inrange-bg-color: @el-datepicker-inrange-bg-color !important;
|
|
// --el-datepicker-inrange-hover-bg-color: @el-datepicker-inrange-hover-bg-color !important;
|
|
// --el-datepicker-hover-text-color: @text-regular-color !important;
|
|
//}
|
|
//
|
|
//.el-drawer {
|
|
// --el-drawer-bg-color: @dialog-bg-color !important;
|
|
//
|
|
// .el-drawer__header {
|
|
// color: @text-color !important;
|
|
// border-color: @border-color;
|
|
// }
|
|
//}
|
|
//
|
|
//.el-checkbox {
|
|
// --el-checkbox-text-color: @text-color !important;
|
|
//}
|
|
//
|
|
//.el-color-picker__trigger {
|
|
// border-color: @border-color !important;
|
|
//}
|
|
//
|
|
//.el-color-picker__mask {
|
|
// background: transparent !important;
|
|
//}
|
|
//
|
|
//.el-radio-group {
|
|
// .el-radio-button {
|
|
// .el-radio-button__inner {
|
|
// background: @el-radio-button__inner !important;
|
|
// border-color: @border-color !important;
|
|
// color: @text-color !important;
|
|
// }
|
|
//
|
|
// &.is-active {
|
|
// .el-radio-button__inner {
|
|
// color: #ffffff !important
|
|
// }
|
|
// }
|
|
//
|
|
// .el-radio-button__original-radio:checked + .el-radio-button__inner {
|
|
// background: var(--el-color-primary) !important;
|
|
// }
|
|
// }
|
|
//}
|
|
//
|
|
//.el-button--text {
|
|
// background: transparent !important;
|
|
// border: none !important;
|
|
//}
|
|
|
|
@drawer-header-bg: #2f5ecc;
|
|
@drawer-body-bg: #132e60;
|
|
@drawer-footer-bg: #132e60;
|
|
@drawer-body-border-bottom: 1px solid #234685;
|
|
.drawerOuter {
|
|
//inset: 50px 0 0 48% !important;
|
|
|
|
.el-drawer__body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
//background-color: @drawer-body-bg;
|
|
border-bottom: @--color-primary;
|
|
}
|
|
|
|
.el-drawer__header {
|
|
// background-color: @drawer-header-bg;
|
|
margin-bottom: 0px;
|
|
padding-bottom: 20px;
|
|
color: @--text-regular-color;
|
|
}
|
|
|
|
.el-drawer__footer {
|
|
// background-color: @drawer-footer-bg;
|
|
}
|
|
}
|
|
|
|
.drawerOuter.noInset {
|
|
inset: 50px 0 0 0 !important;
|
|
}
|
|
|
|
.el-select-v2__placeholder {
|
|
//color: @text-regular-color !important;
|
|
}
|
|
|
|
.el-select-v2__placeholder.is-transparent {
|
|
//color: var(--el-text-color-placeholder) !important;
|
|
}
|
|
|
|
.el-select-v2__wrapper .el-select-v2__input-wrapper input {
|
|
// color: @text-color;
|
|
}
|
|
|
|
.el-select-dropdown__option-item {
|
|
&.is-selected {
|
|
background-color: var(--el-bg-color) !important;
|
|
}
|
|
}
|
|
|
|
//============================================================base.less 结束=============================================//
|
|
|
|
//============================================================app.less 开始 =============================================//
|
|
*,
|
|
:after,
|
|
:before {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
color: #595959;
|
|
font-size: 14px;
|
|
font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
|
|
'微软雅黑', Arial, sans-serif;
|
|
color: #595959;
|
|
background: #f0f2f5;
|
|
|
|
//字体
|
|
.text {
|
|
&-2 {
|
|
color: #8c8c8c;
|
|
}
|
|
}
|
|
|
|
.text-center {
|
|
text-align: center;
|
|
}
|
|
|
|
a {
|
|
// color: @--color-primary;
|
|
color: @--text-regular-color;
|
|
text-decoration: none;
|
|
|
|
&:focus,
|
|
&:hover {
|
|
color: @--color-primary;
|
|
}
|
|
}
|
|
}
|
|
|
|
.rr-setting-title {
|
|
color: @text-regular-color;
|
|
}
|
|
|
|
//.el-space__item span {
|
|
// color: @text-regular-color;
|
|
//}
|
|
|
|
.iconfont {
|
|
cursor: pointer;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-variant: normal;
|
|
text-transform: none;
|
|
line-height: 1;
|
|
vertical-align: text-bottom;
|
|
display: inline-block;
|
|
fill: currentColor;
|
|
width: 17px;
|
|
height: 17px;
|
|
}
|
|
|
|
.icon-svg {
|
|
width: 1em;
|
|
height: 1em;
|
|
fill: currentColor;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.el-badge__content {
|
|
height: 16px;
|
|
line-height: 16px;
|
|
padding: 0 5px;
|
|
border: none;
|
|
//background: #ff4d4f !important;
|
|
}
|
|
|
|
.ele-badge-static {
|
|
line-height: 0;
|
|
}
|
|
|
|
.ele-badge-static .el-badge__content {
|
|
position: static;
|
|
transform: none;
|
|
}
|
|
|
|
//alert
|
|
.ele-alert-border.is-light.el-alert--warning {
|
|
border: 1px solid #faad144d !important;
|
|
}
|
|
|
|
.el-alert--warning.is-light {
|
|
background-color: #fff7e8 !important;
|
|
//color: #faad14 !important;
|
|
}
|
|
|
|
.ele-alert-border.is-light .el-alert__title {
|
|
//color: #262626 !important;
|
|
font-size: 14px !important;
|
|
}
|
|
|
|
.el-alert__content {
|
|
padding: 0;
|
|
}
|
|
|
|
//menu
|
|
.el-menu-item a,
|
|
.el-menu-item span,
|
|
.el-sub-menu > .el-sub-menu__title a,
|
|
.el-sub-menu > .el-sub-menu__title span {
|
|
//color: @dark-text;
|
|
text-decoration: none;
|
|
margin-left: 5px;
|
|
display: inline-flex;
|
|
width: 100%;
|
|
}
|
|
|
|
.rr-sidebar-menu.el-menu--horizontal > .el-menu-item {
|
|
padding: 0 12px;
|
|
height: 50px;
|
|
line-height: 50px;
|
|
}
|
|
|
|
.rr-sidebar-menu-pop-dark,
|
|
.rr-sidebar-menu-pop-light {
|
|
box-shadow: none !important;
|
|
border-width: 0 !important;
|
|
}
|
|
|
|
.el-sub-menu__icon-arrow {
|
|
font-weight: bold;
|
|
}
|
|
|
|
//pop
|
|
.custom-table-cell-popper {
|
|
max-width: 500px;
|
|
}
|
|
|
|
.el-popper.is-dark a {
|
|
color: #fff;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.el-popover.el-popper {
|
|
//max-height: 300px;
|
|
//overflow: auto;
|
|
}
|
|
|
|
//表格
|
|
.el-table thead {
|
|
//color: #303133 !important;
|
|
|
|
th {
|
|
// background-color: #f5f7fa !important;
|
|
}
|
|
|
|
th.el-table__cell {
|
|
background-color: #f7f7f7;
|
|
}
|
|
|
|
th.el-table-fixed-column--right {
|
|
background-color: #f7f7f7 !important;
|
|
}
|
|
th.el-table-fixed-column--left {
|
|
background-color: #f7f7f7 !important;
|
|
}
|
|
}
|
|
|
|
html.dark {
|
|
.el-table thead {
|
|
th.el-table__cell {
|
|
background-color: var(--el-table-header-bg-color);
|
|
}
|
|
|
|
th.el-table-fixed-column--right {
|
|
background-color: var(--el-table-header-bg-color) !important;
|
|
}
|
|
th.el-table-fixed-column--left {
|
|
background-color: var(--el-table-header-bg-color) !important;
|
|
}
|
|
|
|
th.el-table__cell {
|
|
background: var(--el-table-header-bg-color) !important;
|
|
}
|
|
}
|
|
|
|
.switchStyle {
|
|
.el-table__body .el-table__row td:first-child {
|
|
background: var(--el-table-header-bg-color) !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.el-table__fixed-right::before {
|
|
background: transparent !important; //element-plus表格高度动态计算bug，强制下划线不显示颜色
|
|
}
|
|
|
|
.el-form--inline .el-form-item {
|
|
margin-right: 16px !important;
|
|
}
|
|
|
|
//分页
|
|
.el-pagination {
|
|
margin-top: 15px !important;
|
|
justify-content: right;
|
|
}
|
|
|
|
//tinymce
|
|
.tox-tinymce-aux {
|
|
z-index: 3000 !important;
|
|
}
|
|
|
|
//弹窗popover
|
|
.popover-pop {
|
|
padding: 10px 0 5px 5px !important;
|
|
|
|
&-body {
|
|
max-height: 255px;
|
|
overflow: auto;
|
|
}
|
|
}
|
|
|
|
//弹窗
|
|
.rr-dialog {
|
|
min-width: 600px;
|
|
}
|
|
|
|
.rr {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
|
|
&-loading {
|
|
z-index: 9999;
|
|
}
|
|
|
|
//全屏页面渲染
|
|
&-fullscreen {
|
|
width: 100vw;
|
|
|
|
&.new-pop-window > div {
|
|
padding: 15px;
|
|
margin: 15px;
|
|
background: #fff;
|
|
border-radius: 4px;
|
|
}
|
|
}
|
|
|
|
&-error {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #fff;
|
|
z-index: 1200;
|
|
}
|
|
|
|
&-drawer {
|
|
.el-drawer__header {
|
|
font-size: 15px;
|
|
margin-bottom: 0;
|
|
padding: 13px 16px;
|
|
//border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
.el-drawer__body {
|
|
padding: 15px;
|
|
overflow: auto;
|
|
}
|
|
}
|
|
|
|
//顶部
|
|
&-header {
|
|
padding: 0 !important;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
z-index: 200;
|
|
|
|
&-ctx {
|
|
display: flex;
|
|
height: 50px;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
|
|
|
&-logo {
|
|
display: flex;
|
|
color: #ffffffe6;
|
|
font-size: 16px;
|
|
letter-spacing: 1.5px;
|
|
width: 200px;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
justify-content: center;
|
|
font-family: Avenir, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue,
|
|
Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol,
|
|
Noto Color Emoji;
|
|
align-items: center;
|
|
position: relative;
|
|
transition: width 0.3s;
|
|
padding: 0 15px;
|
|
|
|
&-img {
|
|
width: 32px;
|
|
height: 32px;
|
|
display: inline-block;
|
|
flex-shrink: 0;
|
|
|
|
&-wrap {
|
|
display: flex;
|
|
|
|
&.enabled-logo {
|
|
&-false {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&-line {
|
|
display: inline-block;
|
|
width: 10px;
|
|
height: 1px;
|
|
}
|
|
|
|
&-text {
|
|
display: inline-block;
|
|
line-height: 1;
|
|
overflow: hidden;
|
|
text-transform: uppercase;
|
|
font-weight: 700;
|
|
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei,
|
|
'微软雅黑', Arial, sans-serif;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&-body {
|
|
flex: 1;
|
|
display: flex;
|
|
overflow: hidden;
|
|
}
|
|
|
|
//左侧侧边栏
|
|
&-sidebar {
|
|
margin-top: 50px;
|
|
width: 200px !important;
|
|
min-height: calc(100vh - 50px);
|
|
overflow-x: hidden !important;
|
|
transition: width 0.3s;
|
|
z-index: 120;
|
|
scrollbar-width: none;
|
|
|
|
&-menu {
|
|
transition: width 0.3s;
|
|
overflow: hidden;
|
|
|
|
&.el-menu--horizontal {
|
|
border-bottom: none !important;
|
|
}
|
|
|
|
.el-menu-item {
|
|
transition: none !important;
|
|
}
|
|
}
|
|
|
|
&::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.el-menu {
|
|
width: 200px !important;
|
|
border-right: 0 !important;
|
|
|
|
&-item {
|
|
height: 45px;
|
|
line-height: 45px;
|
|
margin: 2px 0;
|
|
}
|
|
|
|
&-item,
|
|
.el-sub-menu__title {
|
|
background: transparent !important;
|
|
|
|
&:focus {
|
|
background: transparent !important;
|
|
}
|
|
}
|
|
|
|
&-item,
|
|
.el-sub-menu__title,
|
|
&-item-group__title {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.el-sub-menu {
|
|
.el-sub-menu__title {
|
|
i {
|
|
// color: inherit !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.el-menu-item,
|
|
.el-sub-menu .el-sub-menu__title {
|
|
margin: 0;
|
|
height: 48px;
|
|
line-height: 48px;
|
|
}
|
|
|
|
.el-sub-menu {
|
|
.el-menu-item {
|
|
height: 45px;
|
|
line-height: 45px;
|
|
margin: 2px 0;
|
|
}
|
|
}
|
|
|
|
.el-menu-item [class^='el-icon'],
|
|
.el-sub-menu > .el-sub-menu__title [class^='el-icon'] {
|
|
font-size: 17px;
|
|
margin-right: 0;
|
|
width: auto;
|
|
}
|
|
|
|
.el-menu-item a,
|
|
.el-menu-item span,
|
|
.el-sub-menu > .el-sub-menu__title a,
|
|
.el-sub-menu > .el-sub-menu__title span {
|
|
margin-left: 10px;
|
|
|
|
> a {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.rr-setting-wrap {
|
|
color: @--text-regular-color !important;
|
|
}
|
|
|
|
//页面内容区域外层
|
|
&-view {
|
|
flex: 1;
|
|
display: flex !important;
|
|
flex-direction: column;
|
|
padding: 0 !important;
|
|
//border-top: 1px solid #f4f4f4 !important;
|
|
&-container {
|
|
margin-top: 50px;
|
|
background: @dark-bg-2;
|
|
}
|
|
|
|
&-wrap {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
&-ctx {
|
|
margin-top: 39px;
|
|
padding: 15px;
|
|
flex: 1;
|
|
//页面内容区域
|
|
&-card {
|
|
min-height: calc(100% - 5px);
|
|
border-width: 0 !important;
|
|
}
|
|
}
|
|
|
|
//页面内容顶部tab标签栏
|
|
&-tab {
|
|
width: 100%;
|
|
height: 39px;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
overflow: hidden;
|
|
|
|
&__header {
|
|
&:hover {
|
|
background: inherit !important;
|
|
}
|
|
}
|
|
|
|
&-wrap {
|
|
position: fixed;
|
|
top: 50px;
|
|
left: 200px;
|
|
right: 0;
|
|
display: flex;
|
|
background: @dark-bg;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
|
z-index: 100;
|
|
transition: left 0.3s;
|
|
border-top: 1px rgba(255, 255, 255, 0.2) solid;
|
|
}
|
|
|
|
&-ops {
|
|
width: 40px;
|
|
flex-shrink: 0;
|
|
//background: #fff;
|
|
display: flex !important;
|
|
align-items: center;
|
|
justify-content: center;
|
|
//border-left: 1px solid #f4f4f4;
|
|
cursor: pointer;
|
|
text-align: center;
|
|
color: #8c8c8c !important;
|
|
font-weight: 400 !important;
|
|
font-size: 16px !important;
|
|
margin-right: 5px; //element-plus el-dropdown自动定位bug bottom-end指令不生效，临时采用偏移5px
|
|
// background: @rr-view-tab-bg;
|
|
//border-left: 1px solid @text-2;
|
|
}
|
|
|
|
.el-tabs__active-bar {
|
|
height: 0;
|
|
}
|
|
|
|
.el-tabs__nav {
|
|
&-prev,
|
|
&-next {
|
|
.el-icon {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.el-tabs__item {
|
|
padding: 0 15px !important;
|
|
//border-right: 1px solid #f4f4f4;
|
|
user-select: none;
|
|
color: #8c8c8c;
|
|
|
|
&:hover {
|
|
// color: #262626;
|
|
background-color: rgba(0, 0, 0, 0.02);
|
|
}
|
|
|
|
.is-icon-close {
|
|
transition: none !important;
|
|
|
|
&:hover {
|
|
color: #fff;
|
|
background-color: #ff4d4f;
|
|
}
|
|
}
|
|
|
|
&::before {
|
|
content: '';
|
|
width: 9px;
|
|
height: 9px;
|
|
margin-right: 8px;
|
|
display: inline-block;
|
|
background-color: #ddd;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
//&.is-active {
|
|
// color: @primary-bg-light;
|
|
// background-color: @primary-bg-light !important;
|
|
//
|
|
// &:before {
|
|
// background-color: @primary-bg-light;
|
|
// }
|
|
//}
|
|
|
|
&:nth-child(2) {
|
|
&::before {
|
|
content: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.el-tabs__nav-wrap {
|
|
padding: 0px 39px 0 40px !important;
|
|
|
|
&::before,
|
|
&::after {
|
|
width: 40px;
|
|
height: 40px;
|
|
line-height: 44px;
|
|
text-align: center;
|
|
box-sizing: border-box;
|
|
font-size: 16px;
|
|
color: #8c8c8c;
|
|
transition: background-color 0.2s;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
font-family: element-icons !important;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-variant: normal;
|
|
text-transform: none;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
&::before {
|
|
content: url('data:image/svg+xml;charset=utf-8,<svg width="16" height="16" color="rgb(140 140 140)" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-042ca774=""><path fill="currentColor" d="M609.408 149.376L277.76 489.6a32 32 0 000 44.672l331.648 340.352a29.12 29.12 0 0041.728 0 30.592 30.592 0 000-42.752L339.264 511.936l311.872-319.872a30.592 30.592 0 000-42.688 29.12 29.12 0 00-41.728 0z"></path></svg>');
|
|
//border-right: 1px solid #f4f4f4;
|
|
//border-right: 1px solid @text-2;
|
|
}
|
|
|
|
&::after {
|
|
content: url('data:image/svg+xml;charset=utf-8,<svg width="16" height="16" color="rgb(140 140 140)" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-042ca774=""><path fill="currentColor" d="M340.864 149.312a30.592 30.592 0 000 42.752L652.736 512 340.864 831.872a30.592 30.592 0 000 42.752 29.12 29.12 0 0041.728 0L714.24 534.336a32 32 0 000-44.672L382.592 149.376a29.12 29.12 0 00-41.728 0z"></path></svg>');
|
|
right: 0;
|
|
left: auto;
|
|
bottom: auto;
|
|
height: auto;
|
|
background-color: transparent;
|
|
// border-left: 1px solid #f4f4f4;
|
|
//border-left: 1px solid @text-2;
|
|
}
|
|
}
|
|
|
|
.el-tabs__nav-next,
|
|
.el-tabs__nav-prev {
|
|
width: 40px;
|
|
height: 40px;
|
|
line-height: 40px;
|
|
text-align: center;
|
|
box-sizing: border-box;
|
|
font-size: 16px;
|
|
color: #8c8c8c;
|
|
transition: background-color 0.2s;
|
|
z-index: 10;
|
|
|
|
i {
|
|
vertical-align: middle;
|
|
margin-top: -4px;
|
|
}
|
|
|
|
&:hover {
|
|
background: rgba(0, 0, 0, 0.02);
|
|
}
|
|
}
|
|
|
|
.el-tabs__nav-prev {
|
|
// border-right: 1px solid #8c8c8c;
|
|
}
|
|
}
|
|
}
|
|
|
|
//页面按钮样式
|
|
|
|
//两个子的按钮
|
|
.btn-size {
|
|
width: 70px;
|
|
// height: 28px;
|
|
}
|
|
|
|
//用于四个字的按钮
|
|
.btn-midSize {
|
|
width: 90px;
|
|
// height: 28px;
|
|
}
|
|
|
|
//五个字按钮
|
|
.btn-largeSize {
|
|
width: 104px;
|
|
// height: 28px;
|
|
}
|
|
|
|
//下拉按钮
|
|
.btn-dropdown-size {
|
|
margin-left: 12px;
|
|
|
|
.el-button {
|
|
// height: 28px;
|
|
}
|
|
}
|
|
|
|
//启用
|
|
.btn-strUse {
|
|
background: #3aa77f !important;
|
|
border: none;
|
|
}
|
|
|
|
//新增 批量新增
|
|
.btn-add {
|
|
background: #169eac !important;
|
|
border: none;
|
|
}
|
|
|
|
//删除
|
|
.btn-delete {
|
|
background: #f66c6c !important;
|
|
border: none;
|
|
}
|
|
|
|
//停用
|
|
.btn-stop {
|
|
background: #e0553f !important;
|
|
border: none;
|
|
}
|
|
|
|
//查询
|
|
.btn-search {
|
|
background: #4271e2 !important;
|
|
border: none;
|
|
}
|
|
|
|
//预览
|
|
.btn-preview {
|
|
background: #4271e2 !important;
|
|
border: none;
|
|
}
|
|
|
|
//导出
|
|
.btn-export {
|
|
background: #8aa9da !important;
|
|
border: none;
|
|
}
|
|
|
|
//导入
|
|
.btn-import {
|
|
background: #0068b7 !important;
|
|
border: none;
|
|
}
|
|
|
|
//模板下载
|
|
.btn-dowmLoad {
|
|
background: #546fb4 !important;
|
|
border: none;
|
|
}
|
|
|
|
//生成报告
|
|
.btn-report,
|
|
.btn-reset {
|
|
background: #12b5b0 !important;
|
|
border: none;
|
|
}
|
|
|
|
//分配企业 分配数据源
|
|
.btn-disButionCom {
|
|
background: #4b96e9 !important;
|
|
border: none;
|
|
}
|
|
|
|
//同步
|
|
.btn-together {
|
|
background: #12b5b0 !important;
|
|
border: none;
|
|
}
|
|
|
|
//权限
|
|
.btn-limit {
|
|
background: #1890ff !important;
|
|
border: none;
|
|
}
|
|
|
|
//重新计算
|
|
.btn-recount {
|
|
background: #438bcb !important;
|
|
border: none;
|
|
}
|
|
}
|
|
|
|
//============================================================app.less 结束 =============================================//
|
|
|
|
//=========================================================== 自定义全局样式开始 ===========================================================//
|
|
.el-menu--vertical.rr-sidebar-menu-pop-light,
|
|
.el-menu--vertical.rr-sidebar-menu-pop-dark {
|
|
border-radius: 4px !important;
|
|
box-shadow: none !important;
|
|
|
|
.el-menu.el-menu--popup {
|
|
min-width: 160px;
|
|
border-radius: 4px !important;
|
|
}
|
|
|
|
.el-menu-item,
|
|
.el-sub-menu__title {
|
|
height: 45px;
|
|
line-height: 45px;
|
|
}
|
|
|
|
.is-active {
|
|
&.el-menu-item {
|
|
border: 0 !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
//深色侧边栏
|
|
.ui-sidebar-dark .rr-sidebar,
|
|
.rr-sidebar-menu-pop-dark {
|
|
background: @menu-bg-normal !important;
|
|
box-shadow: 0 4px 4px rgba(0, 21, 41, 0.35);
|
|
|
|
.el-menu {
|
|
background: @menu-bg-normal !important;
|
|
|
|
.el-menu-item,
|
|
.el-sub-menu__title {
|
|
&:hover {
|
|
i,
|
|
a {
|
|
//color: @dark-text-active !important;
|
|
}
|
|
}
|
|
|
|
i,
|
|
a {
|
|
// color: @dark-text !important;
|
|
}
|
|
|
|
&:not(.is-active):hover {
|
|
// background: inherit !important;
|
|
}
|
|
}
|
|
|
|
.is-active {
|
|
&.el-menu-item {
|
|
border-right: none !important;
|
|
background: @primary-bg !important;
|
|
}
|
|
|
|
&.el-menu-item,
|
|
> .el-sub-menu__title:first-child {
|
|
i,
|
|
a {
|
|
color: @dark-text-active !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
//浅色侧边栏
|
|
.ui-sidebar-light .rr-sidebar,
|
|
.rr-sidebar-menu-pop-light {
|
|
//background: @light-bg !important;
|
|
box-shadow: 0 4px 4px rgba(0, 21, 41, 0.25);
|
|
|
|
.el-menu {
|
|
// background: @light-bg !important;
|
|
|
|
.el-menu-item,
|
|
.el-sub-menu__title {
|
|
&:hover {
|
|
i,
|
|
a {
|
|
// color: @light-text-active !important;
|
|
}
|
|
}
|
|
|
|
i,
|
|
a {
|
|
// color: @light-text !important;
|
|
}
|
|
|
|
&:not(.is-active):hover {
|
|
//background: inherit !important;
|
|
}
|
|
}
|
|
|
|
.is-active {
|
|
&.el-menu-item {
|
|
border-right: 2px solid @light-text-active !important;
|
|
// background: @light-bg-active !important;
|
|
}
|
|
|
|
&.el-menu-item,
|
|
> .el-sub-menu__title:first-child {
|
|
i,
|
|
a {
|
|
color: @light-text-active !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
//================================
|
|
.el-menu--horizontal.rr-sidebar-menu-pop-light,
|
|
.el-menu--horizontal.rr-sidebar-menu-pop-dark {
|
|
border-radius: 4px !important;
|
|
box-shadow: none !important;
|
|
// background-color: @light-bg !important;
|
|
border: none !important;
|
|
margin-top: -5px;
|
|
margin-left: 0;
|
|
|
|
.el-popper {
|
|
border: 0 !important;
|
|
}
|
|
|
|
.el-menu--horizontal {
|
|
margin-left: -5px;
|
|
}
|
|
|
|
.el-menu.el-menu--popup {
|
|
min-width: 160px;
|
|
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2) !important;
|
|
}
|
|
|
|
.el-menu-item,
|
|
.el-sub-menu__title {
|
|
height: 45px;
|
|
line-height: 45px;
|
|
}
|
|
|
|
.is-active {
|
|
&.el-menu-item {
|
|
border: 0 !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
//浅色顶栏
|
|
.ui-topHeader-light {
|
|
.rr-header-ctx {
|
|
box-shadow: 0 1px 1px #f1f1f1;
|
|
|
|
&-logo {
|
|
// background: @light-bg !important;
|
|
color: #000000bf;
|
|
}
|
|
}
|
|
|
|
&.ui-sidebar-dark {
|
|
.rr-header-ctx {
|
|
box-shadow: 0 1px 3px rgb(0 0 0 / 8%);
|
|
}
|
|
}
|
|
|
|
.rr-header-right {
|
|
// background: @dark-bg !important;
|
|
// color: @--text-regular-color !important;
|
|
|
|
.rr-header-right-items {
|
|
* {
|
|
// color: @light-text !important;
|
|
}
|
|
|
|
> div {
|
|
&:hover {
|
|
// color: #262626 !important;
|
|
// background: rgba(0, 0, 0, 0.1) !important;
|
|
}
|
|
}
|
|
|
|
.el-badge__content {
|
|
// color: #fff !important;
|
|
}
|
|
}
|
|
|
|
.rr-sidebar-menu {
|
|
&.el-menu {
|
|
// background: @light-bg !important;
|
|
|
|
.el-menu-item,
|
|
.el-sub-menu__title {
|
|
&:hover {
|
|
background: rgba(0, 0, 0, 0.1) !important;
|
|
|
|
i,
|
|
a {
|
|
// color: @light-text-active !important;
|
|
}
|
|
}
|
|
|
|
i,
|
|
a {
|
|
// color: @light-text !important;
|
|
}
|
|
|
|
i:not(.el-sub-menu__icon-arrow) {
|
|
width: 17px !important;
|
|
height: 17px !important;
|
|
margin-right: 0 !important;
|
|
margin-top: -4px;
|
|
line-height: 17px;
|
|
}
|
|
|
|
span {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
.is-active {
|
|
&.el-menu-item {
|
|
// border-bottom: 2px solid @light-text-active !important;
|
|
//background: @light-bg !important;
|
|
}
|
|
|
|
&.el-menu-item,
|
|
.el-sub-menu__title {
|
|
i,
|
|
a {
|
|
// color: @light-text-active !important;
|
|
}
|
|
|
|
&:hover {
|
|
background: rgba(0, 0, 0, 0.1) !important;
|
|
}
|
|
}
|
|
|
|
&.isLink {
|
|
border-bottom: 0 !important;
|
|
|
|
i,
|
|
a {
|
|
// color: @light-text !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
//深色顶栏
|
|
.ui-topHeader-dark {
|
|
.rr-header-ctx {
|
|
&-logo {
|
|
background: @dark-bg !important;
|
|
}
|
|
}
|
|
|
|
.rr-header-right {
|
|
background: @dark-bg !important;
|
|
|
|
.rr-header-right-items {
|
|
* {
|
|
color: @dark-text !important;
|
|
|
|
&:hover {
|
|
color: @dark-text-active !important;
|
|
}
|
|
}
|
|
|
|
.el-badge__content {
|
|
color: #fff !important;
|
|
}
|
|
}
|
|
|
|
.rr-sidebar-menu {
|
|
&.el-menu {
|
|
background: @menu-bg-normal !important;
|
|
|
|
.el-menu-item,
|
|
.el-sub-menu__title {
|
|
&:hover {
|
|
background: @menu-bg-normal !important;
|
|
|
|
i,
|
|
a {
|
|
// color: @dark-text-active !important;
|
|
}
|
|
}
|
|
|
|
i,
|
|
a {
|
|
//color: @dark-text !important;
|
|
}
|
|
|
|
&:not(.is-active):hover {
|
|
//background: inherit !important;
|
|
}
|
|
|
|
i:not(.el-sub-menu__icon-arrow) {
|
|
width: 17px !important;
|
|
height: 17px !important;
|
|
margin-right: 0 !important;
|
|
margin-top: -4px;
|
|
line-height: 17px;
|
|
}
|
|
|
|
span {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
.is-active {
|
|
&.el-menu-item {
|
|
border-bottom: 2px solid @dark-text-active !important;
|
|
background: @dark-bg !important;
|
|
}
|
|
|
|
&.el-menu-item,
|
|
.el-sub-menu__title {
|
|
// border-bottom: 2px solid @dark-text-active !important;
|
|
|
|
i,
|
|
a {
|
|
// color: @dark-text-active !important;
|
|
}
|
|
}
|
|
|
|
&.isLink {
|
|
border-bottom: 0 !important;
|
|
|
|
i,
|
|
a {
|
|
// color: @dark-text !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
//主题色
|
|
.ui-topHeader-primary {
|
|
.rr-header-ctx {
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
|
|
position: relative;
|
|
z-index: 102;
|
|
}
|
|
|
|
.rr-header-ctx-logo {
|
|
background: @menu-bg-normal !important;
|
|
}
|
|
|
|
.rr-header-right {
|
|
background: @dark-bg !important;
|
|
|
|
.rr-header-right-items,
|
|
.rr-header-right-left-br {
|
|
div,
|
|
span,
|
|
svg,
|
|
i {
|
|
color: @--text-regular-color !important;
|
|
|
|
&:hover {
|
|
color: @--color-primary !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.rr-sidebar-menu {
|
|
&.el-menu {
|
|
// background: @dark-bg !important;
|
|
|
|
.el-menu-item,
|
|
.el-sub-menu__title {
|
|
&:hover,
|
|
&:focus {
|
|
background: rgba(0, 0, 0, 0.1) !important;
|
|
|
|
i.el-icon {
|
|
svg {
|
|
color: @--color-primary !important;
|
|
}
|
|
}
|
|
|
|
i,
|
|
a {
|
|
// color: @primary-text-active !important;
|
|
}
|
|
}
|
|
|
|
i,
|
|
a {
|
|
//color: @primary-text !important;
|
|
}
|
|
|
|
i:not(.el-sub-menu__icon-arrow) {
|
|
width: 17px !important;
|
|
height: 17px !important;
|
|
margin-right: 0 !important;
|
|
margin-top: -4px;
|
|
line-height: 17px;
|
|
}
|
|
|
|
span {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
.is-active {
|
|
&.el-menu-item {
|
|
i.el-icon {
|
|
svg {
|
|
color: @--color-primary !important;
|
|
}
|
|
}
|
|
|
|
// border-bottom: 2px solid @primary-text-active !important;
|
|
}
|
|
|
|
&.el-menu-item,
|
|
.el-sub-menu__title {
|
|
// border-bottom: 2px solid @primary-text-active !important;
|
|
|
|
i,
|
|
a {
|
|
// color: @primary-text-active !important;
|
|
}
|
|
|
|
&:hover {
|
|
background: rgba(0, 0, 0, 0.1) !important;
|
|
}
|
|
}
|
|
|
|
&.isLink {
|
|
border-bottom: 0 !important;
|
|
|
|
i,
|
|
a {
|
|
// color: @primary-text !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.list-page-slot {
|
|
> header {
|
|
.el-form-item__content > .el-input,
|
|
.el-form-item__content > .el-select,
|
|
.el-form-item__content > .search-multi-select,
|
|
.el-form-item__content > .el-select-v2 {
|
|
width: 150px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ui-navLayout-left {
|
|
.el-sub-menu__title,
|
|
.el-menu-item {
|
|
a,
|
|
i {
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ui-navLayout-top {
|
|
.rr-header-ctx-logo {
|
|
background: @dark-bg !important;
|
|
color: @--text-regular-color !important;
|
|
}
|
|
|
|
.rr-sidebar-menu {
|
|
//&.el-menu {
|
|
//
|
|
// .el-menu-item,
|
|
// .el-sub-menu__title {
|
|
// &:hover {
|
|
// background: @menu-bg-normal !important;
|
|
//
|
|
// i,
|
|
// a {
|
|
// color: @dark-text-active !important;
|
|
// }
|
|
// }
|
|
//
|
|
// i,
|
|
// a {
|
|
// color: @dark-text !important;
|
|
// }
|
|
//
|
|
// }
|
|
//}
|
|
|
|
background: @dark-bg !important;
|
|
|
|
.el-sub-menu__title {
|
|
a,
|
|
i {
|
|
color: @--text-regular-color !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.ui-navLayout-mix {
|
|
aside {
|
|
.el-menu {
|
|
.el-menu-item {
|
|
a,
|
|
i {
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.el-menu {
|
|
.el-sub-menu__title {
|
|
a,
|
|
i {
|
|
color: @--text-regular-color !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
//=============
|
|
//导航模式
|
|
.ui-navLayout-left {
|
|
&.ui-sidebar-light {
|
|
.rr-sidebar {
|
|
box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.08);
|
|
z-index: 101;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ui-navLayout-top {
|
|
&.ui-topHeader-light {
|
|
.rr-header-right {
|
|
border-bottom: none !important;
|
|
}
|
|
}
|
|
|
|
.rr-header-ctx-logo {
|
|
max-width: inherit !important;
|
|
|
|
&-text {
|
|
max-width: inherit !important;
|
|
overflow: inherit !important;
|
|
}
|
|
}
|
|
|
|
.rr-view-tab-wrap {
|
|
left: 0 !important;
|
|
}
|
|
}
|
|
|
|
.ui-navLayout-mix {
|
|
.rr-header-ctx-logo {
|
|
max-width: inherit !important;
|
|
|
|
&-text {
|
|
max-width: inherit !important;
|
|
overflow: inherit !important;
|
|
}
|
|
}
|
|
|
|
&.ui-sidebar-light {
|
|
.rr-sidebar {
|
|
box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.08);
|
|
z-index: 101;
|
|
}
|
|
}
|
|
|
|
.rr-sidebar {
|
|
box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.08);
|
|
z-index: 101;
|
|
}
|
|
|
|
.rr-header-right-left-br {
|
|
padding: 0 !important;
|
|
}
|
|
}
|
|
|
|
//========
|
|
//内容不铺满
|
|
.ui-contentFull-false {
|
|
.rr-view-ctx {
|
|
width: 1200px !important;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
}
|
|
|
|
//=======
|
|
//tab标签栏开关
|
|
.ui-openTabsPage {
|
|
&-false {
|
|
.rr-view-ctx {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
//=======
|
|
//logo自动
|
|
//导航模式在顶部时logo自动要取消
|
|
.ui-logoAuto-true,
|
|
.ui-navLayout-top {
|
|
.rr-header-ctx-logo {
|
|
width: inherit !important;
|
|
padding: 0 15px 0 20px;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
&.ui-topHeader-primary .rr-header-ctx-logo {
|
|
// background: @dark-bg !important;
|
|
//color: #ffffffd9 !important;
|
|
}
|
|
|
|
&.ui-topHeader-dark .rr-header-ctx-logo {
|
|
//background: @dark-bg !important;
|
|
//color: #ffffffd9 !important;
|
|
}
|
|
|
|
&.ui-topHeader-light .rr-header-ctx-logo {
|
|
// background: @light-bg !important;
|
|
color: #000000bf;
|
|
box-shadow: 1px 0 3px rgba(0, 0, 0, 0.08);
|
|
}
|
|
}
|
|
|
|
//侧边栏多彩图标
|
|
.ui-colorIcon-true {
|
|
.rr-sidebar {
|
|
.el-menu {
|
|
.el-sub-menu__title,
|
|
.el-menu-item,
|
|
.isLink {
|
|
margin-left: -5px !important;
|
|
}
|
|
|
|
li {
|
|
[class^='el-icon'] {
|
|
&:first-child {
|
|
flex-shrink: 0;
|
|
width: 28px;
|
|
height: 28px;
|
|
line-height: 28px;
|
|
font-size: 14px;
|
|
background-color: rgb(97, 178, 252);
|
|
border-radius: 50%;
|
|
text-align: center;
|
|
color: rgb(255, 255, 255) !important;
|
|
|
|
.iconfont {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:nth-child(2n) {
|
|
[class^='el-icon'] {
|
|
&:first-child {
|
|
background-color: rgb(125, 215, 51);
|
|
}
|
|
}
|
|
}
|
|
|
|
&:nth-child(3) {
|
|
[class^='el-icon'] {
|
|
&:first-child {
|
|
background-color: rgb(50, 162, 212);
|
|
}
|
|
}
|
|
}
|
|
|
|
&:nth-child(4) {
|
|
[class^='el-icon'] {
|
|
&:first-child {
|
|
background-color: rgb(115, 131, 207);
|
|
}
|
|
}
|
|
}
|
|
|
|
&:nth-child(5) {
|
|
[class^='el-icon'] {
|
|
&:first-child {
|
|
background-color: rgb(245, 104, 111);
|
|
}
|
|
}
|
|
}
|
|
|
|
&:nth-child(6) {
|
|
[class^='el-icon'] {
|
|
&:first-child {
|
|
background-color: rgb(43, 204, 206);
|
|
}
|
|
}
|
|
}
|
|
|
|
&:nth-child(7) {
|
|
[class^='el-icon'] {
|
|
&:first-child {
|
|
background-color: rgb(125, 215, 51);
|
|
}
|
|
}
|
|
}
|
|
|
|
&:nth-child(8) {
|
|
[class^='el-icon'] {
|
|
&:first-child {
|
|
background-color: rgb(250, 173, 20);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
//--
|
|
.el-sub-menu {
|
|
.el-menu {
|
|
li,
|
|
.el-sub-menu__title {
|
|
[class^='el-icon'] {
|
|
&:first-child:not(.el-sub-menu__icon-arrow) {
|
|
width: 8px;
|
|
height: 8px;
|
|
line-height: 8px;
|
|
font-size: 30px;
|
|
overflow: hidden;
|
|
border-radius: 50%;
|
|
margin: 0 0 0 10px;
|
|
background: @dark-text !important;
|
|
color: @dark-text !important;
|
|
|
|
&:before {
|
|
content: '';
|
|
margin-left: -11px;
|
|
font-family: element-icons !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.el-menu-item,
|
|
.el-sub-menu.is-active .el-sub-menu__title {
|
|
i:first-child {
|
|
color: #fff !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.ui-sidebar-light {
|
|
.rr-sidebar {
|
|
.el-sub-menu .el-menu {
|
|
.el-sub-menu {
|
|
.el-sub-menu__title {
|
|
[class^='el-icon'] {
|
|
&:first-child:not(.el-sub-menu__icon-arrow) {
|
|
color: @light-text !important;
|
|
opacity: 0.25;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
[class^='el-icon'] {
|
|
&:first-child:not(.el-sub-menu__icon-arrow) {
|
|
color: @light-text-active !important;
|
|
opacity: 0.25;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.is-active .el-sub-menu__title [class^='el-icon'] {
|
|
&:first-child:not(.el-sub-menu__icon-arrow) {
|
|
color: @light-text-active !important;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.el-menu-item {
|
|
[class^='el-icon'] {
|
|
&:first-child:not(.el-sub-menu__icon-arrow) {
|
|
background: @light-text !important;
|
|
color: @light-text !important;
|
|
opacity: 0.25;
|
|
}
|
|
}
|
|
|
|
&.is-active,
|
|
&:hover {
|
|
[class^='el-icon'] {
|
|
&:first-child:not(.el-sub-menu__icon-arrow) {
|
|
background: @light-text-active !important;
|
|
color: @light-text-active !important;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:hover:not(.is-active) {
|
|
[class^='el-icon'] {
|
|
&:first-child:not(.el-sub-menu__icon-arrow) {
|
|
opacity: 0.2;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.ui-sidebar-dark {
|
|
.rr-sidebar {
|
|
.el-sub-menu {
|
|
.el-sub-menu.is-opened {
|
|
&.is-active {
|
|
.el-sub-menu__title {
|
|
[class^='el-icon'] {
|
|
&:first-child:not(.el-sub-menu__icon-arrow) {
|
|
background: @dark-text-active !important;
|
|
color: @dark-text-active !important;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.el-menu .el-menu-item,
|
|
.el-sub-menu.is-opened .el-sub-menu__title {
|
|
[class^='el-icon'] {
|
|
&:first-child:not(.el-sub-menu__icon-arrow) {
|
|
background: @dark-text !important;
|
|
color: @dark-text !important;
|
|
opacity: 0.85;
|
|
}
|
|
}
|
|
|
|
&.is-active,
|
|
&:hover {
|
|
[class^='el-icon'] {
|
|
&:first-child:not(.el-sub-menu__icon-arrow) {
|
|
background: @dark-text-active !important;
|
|
color: @dark-text-active !important;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:hover:not(.is-active) {
|
|
[class^='el-icon'] {
|
|
&:first-child:not(.el-sub-menu__icon-arrow) {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.rr-header-ctx-logo-expand {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
|
|
&-img {
|
|
width: 32px;
|
|
height: 32px;
|
|
margin-right: 8px;
|
|
}
|
|
}
|
|
|
|
//侧边栏收缩状态
|
|
.rr.ui-sidebarCollapse {
|
|
&-true {
|
|
.rr-view-tab-wrap {
|
|
left: 60px;
|
|
}
|
|
|
|
.rr-header-ctx-logo-line {
|
|
width: 0;
|
|
}
|
|
|
|
.enabled-logo-false {
|
|
display: flex;
|
|
}
|
|
|
|
.enabled-logo-false {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
&.ui-logoAuto {
|
|
&-false {
|
|
.rr-header-ctx-logo {
|
|
width: 60px !important;
|
|
|
|
&-text {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-true {
|
|
.enabled-logo-false {
|
|
display: none;
|
|
}
|
|
|
|
.rr-header-ctx-logo-line {
|
|
width: 10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.ui-navLayout-top {
|
|
//导航模式为顶部时自动展开logo状态
|
|
.rr-header-ctx-logo {
|
|
width: inherit !important;
|
|
padding: 0 15px 0 20px;
|
|
box-shadow: none !important;
|
|
|
|
&-text {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.enabled-logo-false {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.rr-sidebar:not(.rr-sidebar-mobile) {
|
|
width: 60px !important;
|
|
|
|
.el-menu {
|
|
width: 60px !important;
|
|
}
|
|
|
|
// 收起效果
|
|
.rr-sidebar-menu {
|
|
.el-menu-item,
|
|
.el-sub-menu__title,
|
|
.el-sub-menu {
|
|
a,
|
|
.el-menu {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&-false {
|
|
.rr-header-ctx-logo {
|
|
&-text {
|
|
display: block;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.el-tabs {
|
|
.el-tabs__active-bar {
|
|
background-color: @--color-primary;
|
|
}
|
|
|
|
.el-tabs__item {
|
|
&.is-active {
|
|
color: @--color-primary;
|
|
}
|
|
}
|
|
}
|
|
|
|
//tabStyle
|
|
.ui-tabStyle-default {
|
|
.rr-view-tab {
|
|
//background: @rr-view-tab-bg;
|
|
|
|
.el-tabs__item {
|
|
border-right: none !important;
|
|
padding: 0 15px 0 !important;
|
|
|
|
&.is-active {
|
|
color: @--color-primary !important;
|
|
//color: @text-regular-color !important;
|
|
}
|
|
|
|
&:before {
|
|
content: none;
|
|
}
|
|
|
|
&:after {
|
|
content: '';
|
|
height: 3px;
|
|
width: 0;
|
|
background-color: @--color-primary !important;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
}
|
|
|
|
&.is-active:after,
|
|
&:hover:after {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.el-tabs__nav-wrap {
|
|
&:before,
|
|
&:after,
|
|
.el-tabs__nav-next,
|
|
.el-tabs__nav-prev {
|
|
height: 40px;
|
|
line-height: 44px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.ui-tabStyle-dot {
|
|
.rr-view-tab-wrap {
|
|
.rr-view-tab {
|
|
.el-tabs__item {
|
|
&.is-active {
|
|
color: @--color-primary !important;
|
|
|
|
&:before {
|
|
background-color: @--color-primary !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.ui-tabStyle-card {
|
|
.rr-view-tab-wrap {
|
|
background: transparent !important;
|
|
box-shadow: none !important;
|
|
padding-top: 10px;
|
|
|
|
.rr-view-tab {
|
|
height: 30px;
|
|
background: transparent !important;
|
|
|
|
&-ops {
|
|
border-radius: 4px;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
width: 30px;
|
|
background-color: #fff;
|
|
margin-right: 10px;
|
|
|
|
.el-icon--right {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
.el-tabs__item {
|
|
margin-left: 8px;
|
|
padding: 0 15px 0 !important;
|
|
border-radius: 4px;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
background-color: #fff;
|
|
|
|
&:nth-child(2) {
|
|
margin-left: 0;
|
|
padding: 0 15px !important;
|
|
}
|
|
|
|
&.is-active {
|
|
background-color: @--color-primary !important;
|
|
color: #fff;
|
|
}
|
|
|
|
&:before {
|
|
content: none;
|
|
}
|
|
|
|
&:after {
|
|
content: none;
|
|
}
|
|
}
|
|
|
|
.el-tabs__nav-wrap {
|
|
&:before,
|
|
&:after,
|
|
.el-tabs__nav-next,
|
|
.el-tabs__nav-prev {
|
|
height: 30px;
|
|
line-height: 30px;
|
|
background: #eff2f5 !important;
|
|
}
|
|
|
|
.el-tabs__nav-next,
|
|
.el-tabs__nav-prev {
|
|
&:hover {
|
|
background: transparent !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
//外链
|
|
.rr-sidebar-menu.el-menu .el-menu-item.is-active.isLink {
|
|
background: inherit !important;
|
|
}
|
|
|
|
//不同语言下的差异
|
|
[lang='en-US'] {
|
|
.rr-header-ctx-logo-text {
|
|
letter-spacing: 0px !important;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 768px) {
|
|
:not(html):not(body)::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
background: transparent;
|
|
}
|
|
|
|
:not(html):not(body)::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
:not(html):not(body)::-webkit-scrollbar-thumb {
|
|
border-radius: 4px;
|
|
background-color: hsla(0, 0%, 54.9%, 0.3);
|
|
}
|
|
|
|
:not(html):not(body)::-webkit-scrollbar-thumb:hover {
|
|
background-color: hsla(0, 0%, 54.9%, 0.5);
|
|
}
|
|
|
|
.ele-scrollbar-mini::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
|
|
.ele-scrollbar-mini::-webkit-scrollbar-thumb {
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.ele-scrollbar-hide::-webkit-scrollbar {
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
}
|
|
|
|
//=========================================================== 自定义全局样式结束 ===========================================================//
|
|
|
|
.list-page-slot {
|
|
> header,
|
|
> .container {
|
|
background: @dark-bg;
|
|
}
|
|
}
|
|
|
|
.normal-bg {
|
|
background: @dark-bg;
|
|
}
|
|
|
|
.padding-16 {
|
|
padding: 16px;
|
|
}
|
|
|
|
.iot-dictionary,
|
|
.iot-relation {
|
|
&-left {
|
|
background: @dark-bg;
|
|
}
|
|
}
|
|
|
|
.el-range-editor.el-input__inner {
|
|
height: 100%;
|
|
background-color: @dark-bg;
|
|
}
|
|
|
|
//===========================================自定义业务样式开始=====================================================================//
|
|
.el-card.rr-view-ctx-card .el-card__body {
|
|
height: 100%;
|
|
}
|
|
|
|
// views/iot/iot-thing-grouping-left
|
|
.iot-thing-grouping-left {
|
|
width: 250px;
|
|
|
|
.el-radio-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: start;
|
|
}
|
|
|
|
.el-select {
|
|
width: 100%;
|
|
}
|
|
|
|
> .wrapper {
|
|
> .block {
|
|
color: @--text-regular-color;
|
|
border: var(--el-border);
|
|
background: @dark-bg;
|
|
padding: 8px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
opacity: 0.6;
|
|
overflow: hidden;
|
|
|
|
> div {
|
|
line-height: 1.8em;
|
|
}
|
|
|
|
> .name {
|
|
font-weight: bold;
|
|
}
|
|
|
|
> .date {
|
|
color: @text-2;
|
|
}
|
|
|
|
> .desc {
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
&:not(last-child) {
|
|
margin-bottom: 10px;
|
|
}
|
|
}
|
|
> .active {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
// views/iot-entity
|
|
.el-table tr.el-table__row--striped.highlight-row td.el-table__cell {
|
|
background-color: @--color-primary-light !important;
|
|
}
|
|
|
|
tr.highlight-row td {
|
|
background-color: @--color-primary-light !important;
|
|
}
|
|
|
|
// src/components/cron/src/index
|
|
#changeContab {
|
|
.el-tabs__nav-scroll {
|
|
// background: @tr-bg-color !important;
|
|
}
|
|
|
|
.language {
|
|
// background: @tr-bg-color;
|
|
position: absolute;
|
|
right: 25px;
|
|
z-index: 1;
|
|
}
|
|
|
|
.el-tabs {
|
|
box-shadow: none;
|
|
}
|
|
|
|
.tabBody {
|
|
.el-row {
|
|
margin: 10px 0;
|
|
|
|
.long {
|
|
.el-select {
|
|
width: 350px;
|
|
}
|
|
}
|
|
|
|
.el-input-number {
|
|
width: 110px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.bottom {
|
|
width: 100%;
|
|
text-align: center;
|
|
margin-top: 5px;
|
|
position: relative;
|
|
|
|
.value {
|
|
font-size: 18px;
|
|
vertical-align: middle;
|
|
color: @text-regular-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
// src/components/map/src/get-position-by-map
|
|
#get-position-by-map {
|
|
position: relative;
|
|
height: 100%;
|
|
|
|
h4 {
|
|
color: @--text-regular-color;
|
|
}
|
|
|
|
.search {
|
|
background: @dark-bg;
|
|
}
|
|
|
|
.input-container {
|
|
position: absolute;
|
|
right: 20px;
|
|
bottom: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
background: @dark-bg;
|
|
color: @--text-regular-color;
|
|
border-radius: 2px;
|
|
padding: 8px 16px;
|
|
z-index: 2;
|
|
}
|
|
}
|
|
|
|
// src/components/sidetree/index
|
|
.side-tree-wrap .tree-wrap {
|
|
background: @dark-bg;
|
|
}
|
|
|
|
// src/components/upload/uploadfile
|
|
.upload-file {
|
|
.el-upload {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.el-upload__tip {
|
|
text-align: center;
|
|
color: @--text-regular-color;
|
|
}
|
|
|
|
.el-upload-list__item-name {
|
|
display: flex;
|
|
align-items: center;
|
|
color: @--text-regular-color;
|
|
}
|
|
|
|
.el-upload-list__item-file-name {
|
|
color: @--text-regular-color;
|
|
}
|
|
|
|
.el-icon--close {
|
|
// color: @text-regular-color !important;
|
|
}
|
|
|
|
.el-upload-dragger {
|
|
.el-icon--upload {
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
// views/alarm/record-detail
|
|
.record-detail .container .el-row .el-col-1 .el-divider {
|
|
border-color: @border-color;
|
|
}
|
|
|
|
// views/cache/cache-search/search-multi-select
|
|
.all-c:hover {
|
|
// background-color: @tr-bg-color
|
|
}
|
|
|
|
// views/data-analysic/monotor-day-month-year, views/data-analysic/usage
|
|
.usage-chart-table {
|
|
background-color: @block-bg-color;
|
|
}
|
|
|
|
// views/data-analysic/monotor-real-time , views/data-analysic/monotor
|
|
.usage-chart-table,
|
|
.monitor-chart-table {
|
|
background-color: @dark-bg;
|
|
}
|
|
|
|
// views/device/components/basic-table
|
|
.list-item-detail-basic-table .table table {
|
|
border-color: @border-color;
|
|
}
|
|
|
|
// views/device/components/list-item-detail-device-attribute
|
|
.list-item-detail-device-attribute .block-item {
|
|
border: var(--el-border);
|
|
}
|
|
|
|
// views/iot/relation/component/left-modal
|
|
.left-modal-comp {
|
|
//background: @content-bg-color;
|
|
background: @dark-bg;
|
|
|
|
> .collapse {
|
|
//background: @content-bg-color;
|
|
|
|
.el-collapse .el-collapse-item__content {
|
|
> .rect {
|
|
//border: 1px solid @border-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// views/iot/relation/component/view
|
|
.iot-relation-view {
|
|
color: @text-regular-color;
|
|
}
|
|
|
|
// src/views/tenant
|
|
.corporate-grouping-form {
|
|
p {
|
|
color: @text-color;
|
|
}
|
|
}
|
|
|
|
.corporate-manage-admin-corporate-form {
|
|
> .left,
|
|
.right {
|
|
p {
|
|
color: @text-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
.corporate-manage-admin-thing-form {
|
|
> .left,
|
|
.right {
|
|
p {
|
|
color: @text-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
// views/iot/dictListWrapper
|
|
.dictListWrapper {
|
|
.dict-list .dict-list-item:hover {
|
|
background-color: var(--el-fill-color-light);
|
|
}
|
|
}
|
|
|
|
// sidetree
|
|
.side-tree-wrap .tree-wrap .tree-content .el-tree {
|
|
color: @--text-regular-color;
|
|
}
|
|
|
|
.expandFoldIcon {
|
|
width: 20px;
|
|
height: 20px;
|
|
color: @text-color;
|
|
}
|
|
|
|
// data-analysis/monitor.vue, usage.vue, attributes.vue
|
|
.attributes,
|
|
.preview-form {
|
|
border: var(--el-border);
|
|
}
|
|
|
|
.attributeGroups .caret {
|
|
color: @text-regular-color;
|
|
}
|
|
|
|
.monitor .chartWrap,
|
|
.usage .chartWrap {
|
|
border: var(--el-border);
|
|
}
|
|
|
|
// push/push-main-add-or-update
|
|
.config-params-form {
|
|
border: var(--el-border);
|
|
}
|
|
|
|
// dataset/tingGroup.vue
|
|
.thing-group {
|
|
border: var(--el-border);
|
|
}
|
|
|
|
.thing-group .item,
|
|
.dataset-selected-conditions {
|
|
background-color: var(--el-fill-color-lighter);
|
|
}
|
|
|
|
// communication/index.vue
|
|
.dataset .avatar-icon {
|
|
background-color: @dark-bg;
|
|
border: 1px solid @border-color;
|
|
}
|
|
|
|
// device-control/add-or-update.vue
|
|
.editor-tooltip-text-color,
|
|
.normal-text-color {
|
|
color: var(--el-text-color-regular);
|
|
}
|
|
|
|
// calculaton-module/rule-editor.vue
|
|
.ruleEditor {
|
|
border: var(--el-border);
|
|
}
|
|
|
|
// calculaton-module/jsRuleTest.vue
|
|
.editor-title,
|
|
.format-and-fullscreen {
|
|
color: @text-color;
|
|
}
|
|
|
|
// device/list-item-detail.vue
|
|
.list-item-detail {
|
|
color: @--text-regular-color;
|
|
}
|
|
|
|
.list-item-detail > .main > .wrapper .el-tabs .el-tabs__content {
|
|
//background: @input-bg-color;
|
|
}
|
|
|
|
.list-item-detail-basic-table > .table > table tr td {
|
|
// background: @list-item-detail-table-td;
|
|
}
|
|
|
|
.list-item-detail-basic-table > .table > table tr td.odd {
|
|
//background: @list-item-detail-table-td-odd;
|
|
}
|
|
|
|
// iot/iot-device-extend.vue
|
|
.device-status {
|
|
color: @--text-regular-color;
|
|
}
|
|
|
|
// device-board-setting/view.vue, edit.vue
|
|
.device-board-setting .setting-wrapper {
|
|
background: @device-board-setting-bg;
|
|
}
|
|
|
|
// monitor-analysis-setting/components/data-treating
|
|
//.data-treating .editor-wrap .label {
|
|
// color: @text-color;
|
|
//}
|
|
|
|
// sideTree/index.vue
|
|
.tree-dialog-icon {
|
|
//color: @text-color;
|
|
}
|
|
|
|
.layout-toggle-button {
|
|
color: #fff;
|
|
background-color: @--color-primary;
|
|
}
|
|
|
|
.text-color-white-or-black {
|
|
color: @--text-regular-color;
|
|
}
|
|
|
|
// device-board-setting/device-configration/index.vue
|
|
.hightlight-title-color {
|
|
color: @hightlight-title-color;
|
|
}
|
|
|
|
.el-table thead.is-group th.el-table__cell {
|
|
background: var(--el-fill-color-light);
|
|
}
|
|
|
|
// /device-board-setting/view
|
|
.dark-and-light-bg-toggle {
|
|
background-color: @dark-bg;
|
|
}
|
|
|
|
// 分割面板样式开始
|
|
@css-prefix: eleU-;
|
|
@split-prefix-cls: ~'@{css-prefix}split';
|
|
@box-shadow: 0 0 4px 0 rgba(28, 36, 56, 0.4);
|
|
@trigger-bar-background: @text-color;
|
|
@trigger-background: @dark-bg;
|
|
@trigger-width: 12px;
|
|
@trigger-bar-width: 10px;
|
|
@trigger-bar-offset: (@trigger-width - @trigger-bar-width) / 2;
|
|
@trigger-bar-interval: 3px;
|
|
@trigger-bar-weight: 1px;
|
|
@trigger-bar-con-height: (@trigger-bar-weight + @trigger-bar-interval) * 8;
|
|
|
|
.@{split-prefix-cls} {
|
|
&-wrapper {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
&-pane {
|
|
position: absolute;
|
|
|
|
&.left-pane,
|
|
&.right-pane {
|
|
top: 0;
|
|
bottom: 0;
|
|
}
|
|
|
|
&.left-pane {
|
|
left: 0;
|
|
}
|
|
|
|
&.right-pane {
|
|
right: 0;
|
|
}
|
|
|
|
&.top-pane,
|
|
&.bottom-pane {
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
|
|
&.top-pane {
|
|
top: 0;
|
|
}
|
|
|
|
&.bottom-pane {
|
|
bottom: 0;
|
|
}
|
|
|
|
&-moving {
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
}
|
|
}
|
|
|
|
&-trigger {
|
|
border: var(--el-border);
|
|
|
|
&-con {
|
|
position: absolute;
|
|
transform: translate(-50%, -50%);
|
|
z-index: 10;
|
|
}
|
|
|
|
&-bar-con {
|
|
position: absolute;
|
|
overflow: hidden;
|
|
|
|
&.vertical {
|
|
left: @trigger-bar-offset;
|
|
top: 50%;
|
|
height: @trigger-bar-con-height;
|
|
transform: translate(0, -50%);
|
|
}
|
|
|
|
&.horizontal {
|
|
left: 50%;
|
|
top: @trigger-bar-offset;
|
|
width: @trigger-bar-con-height;
|
|
transform: translate(-50%, 0);
|
|
}
|
|
}
|
|
|
|
&-vertical {
|
|
width: @trigger-width;
|
|
height: 100%;
|
|
background: @trigger-background;
|
|
border-top: none;
|
|
border-bottom: none;
|
|
cursor: col-resize;
|
|
|
|
.@{split-prefix-cls}-trigger-bar {
|
|
width: @trigger-bar-width;
|
|
height: 1px;
|
|
background: @trigger-bar-background;
|
|
float: left;
|
|
margin-top: @trigger-bar-interval;
|
|
}
|
|
}
|
|
|
|
&-horizontal {
|
|
height: @trigger-width;
|
|
width: 100%;
|
|
background: @trigger-background;
|
|
border-left: none;
|
|
border-right: none;
|
|
cursor: row-resize;
|
|
|
|
.@{split-prefix-cls}-trigger-bar {
|
|
height: @trigger-bar-width;
|
|
width: 1px;
|
|
background: @trigger-bar-background;
|
|
float: left;
|
|
margin-right: @trigger-bar-interval;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-horizontal {
|
|
> .@{split-prefix-cls}-trigger-con {
|
|
top: 50%;
|
|
height: 100%;
|
|
width: 0;
|
|
}
|
|
}
|
|
|
|
&-vertical {
|
|
> .@{split-prefix-cls}-trigger-con {
|
|
left: 50%;
|
|
height: 0;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.no-select {
|
|
-webkit-touch-callout: none;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
}
|
|
}
|
|
|
|
.dashboard-design,
|
|
.dashboard-preview {
|
|
.dashboard-left {
|
|
background: rgba(@dark-bg, 0.6);
|
|
height: 100%;
|
|
padding: 8px;
|
|
border-radius: 4px;
|
|
user-select: none;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.list {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.el-card {
|
|
margin-bottom: 20px;
|
|
opacity: 0.7;
|
|
cursor: pointer;
|
|
|
|
.el-card__body {
|
|
> div {
|
|
display: flex;
|
|
align-items: center;
|
|
word-break: break-all;
|
|
padding: 14px;
|
|
|
|
> b {
|
|
flex: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
button {
|
|
width: 22px;
|
|
height: 22px;
|
|
border-radius: 100%;
|
|
cursor: pointer;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
&.active {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 91.94px;
|
|
object-fit: cover;
|
|
}
|
|
}
|
|
|
|
div.active {
|
|
border: 1px solid @--color-primary;
|
|
}
|
|
}
|
|
|
|
.el-table {
|
|
.table-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
> span {
|
|
margin-right: 8px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.el-drawer__header {
|
|
color: @--text-regular-color;
|
|
.el-drawer__title {
|
|
font-size: var(--el-font-size-large);
|
|
}
|
|
}
|
|
|
|
.firstlook-style-form {
|
|
.style-select-container {
|
|
.block {
|
|
//background: @dark-bg-2;
|
|
}
|
|
}
|
|
}
|
|
.theme-bg {
|
|
background: @dark-bg;
|
|
}
|
|
.normal-radius {
|
|
border-radius: 4px;
|
|
}
|
|
.store-select-dialog {
|
|
background: @dark-bg-2;
|
|
}
|
|
|
|
.test-new {
|
|
background: @dark-bg;
|
|
}
|
|
|
|
.side-tree-container {
|
|
.el-loading-mask,
|
|
.side-tree-main {
|
|
background: @dark-bg;
|
|
}
|
|
}
|