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.
701 lines
16 KiB
701 lines
16 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: #595959;
|
|
@text-2: #8c8c8c;
|
|
|
|
//导航菜单
|
|
@dark-text: rgb(255 255 255 / 66%);
|
|
@dark-text-active: #eee;
|
|
@dark-bg: #162E5A;
|
|
@dark-bg-active: @--color-primary;
|
|
|
|
@light-text: @text;
|
|
@light-text-active: @--color-primary;
|
|
@light-bg: @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);
|
|
@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;
|
|
|
|
|
|
.rr-view-ctx {
|
|
background: @view-ctx-bg-color;
|
|
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%;
|
|
}
|
|
}
|
|
|
|
|
|
.rr-view-tab .el-tabs__nav .el-tabs__item {
|
|
color: @el-tabs-item-color;
|
|
|
|
&:hover {
|
|
color: @text-regular-color;
|
|
}
|
|
|
|
&.is-active {
|
|
color: @el-tabs-item-isActive-color;
|
|
background: @el-tabs-item-isActive-bg !important;
|
|
}
|
|
}
|
|
|
|
|
|
.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-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 #1D3D77;
|
|
@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 !important;
|
|
}
|
|
|
|
.el-dialog__title {
|
|
color: @text-color;
|
|
}
|
|
|
|
.el-dialog__footer{
|
|
border-top: @dialog-footer-border-top;
|
|
}
|
|
.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;
|
|
}
|
|
|
|
.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 {
|
|
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-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: @drawer-body-border-bottom;
|
|
}
|
|
|
|
.el-drawer__header {
|
|
background-color: @drawer-header-bg;
|
|
margin-bottom: 0px;
|
|
padding-bottom: 20px;
|
|
}
|
|
|
|
.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 结束 ==========================//
|
|
|
|
@media only screen and (max-width: 768px) {
|
|
.rr-header-action {
|
|
display: flex !important;
|
|
}
|
|
.show-xs-only {
|
|
display: block !important;
|
|
}
|
|
}
|
|
@media only screen and (min-width: 768px) {
|
|
}
|
|
@media only screen and (min-width: 768px) and (max-width: 992px) {
|
|
}
|
|
@media only screen and (max-width: 992px) {
|
|
.drawerOuter {
|
|
inset: 50px 0 0 5% !important
|
|
}
|
|
}
|
|
@media only screen and (min-width: 992px) {
|
|
}
|
|
@media only screen and (min-width: 992px) and (max-width: 1200px) {
|
|
}
|
|
@media only screen and (max-width: 1200px) {
|
|
}
|
|
@media only screen and (min-width: 1200px) {
|
|
}
|
|
@media only screen and (min-width: 1200px) and (max-width: 1920px) {
|
|
}
|
|
@media only screen and (max-width: 1920px) {
|
|
}
|
|
@media only screen and (min-width: 1920px) {
|
|
}
|
|
|
|
//
|
|
.ui-mobile {
|
|
.rr-view-tab-wrap {
|
|
left: 0 !important;
|
|
transition: left 0s !important;
|
|
}
|
|
.rr-header-ctx-logo-img-wrap {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
.rr-sidebar-mobile {
|
|
z-index: 9999 !important;
|
|
&-inner {
|
|
margin: 0;
|
|
padding: 0;
|
|
scrollbar-width: none;
|
|
&::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
.ui-sidebar-light .rr-sidebar-mobile {
|
|
.el-drawer__body,
|
|
.rr-header-ctx-logo-mobile {
|
|
background: @light-bg !important;
|
|
}
|
|
.rr-header-ctx-logo-mobile {
|
|
color: @light-text !important;
|
|
}
|
|
}
|
|
.ui-sidebar-dark .rr-sidebar-mobile {
|
|
.el-drawer__body,
|
|
.rr-header-ctx-logo-mobile {
|
|
background: @dark-bg !important;
|
|
}
|
|
.rr-header-ctx-logo-mobile {
|
|
color: @dark-text !important;
|
|
}
|
|
}
|
|
.ui-sidebarCollapse-true,
|
|
.ui-sidebarCollapse-false {
|
|
.rr-sidebar-mobile {
|
|
width: initial !important;
|
|
.el-menu.rr-sidebar-menu {
|
|
width: 230px !important;
|
|
.el-menu-item,
|
|
.el-sub-menu__title {
|
|
a {
|
|
display: inline-block !important;
|
|
}
|
|
}
|
|
}
|
|
.rr-header-ctx-logo.rr-header-ctx-logo-mobile {
|
|
width: auto !important;
|
|
.rr-header-ctx-logo-text {
|
|
display: inline-block !important;
|
|
}
|
|
}
|
|
|
|
.el-drawer,
|
|
.el-drawer__body {
|
|
box-shadow: none !important;
|
|
}
|
|
}
|
|
}
|