diff --git a/src/assets/css/common/right-box-common.scss b/src/assets/css/common/right-box-common.scss index 4c00f6c4..79207849 100644 --- a/src/assets/css/common/right-box-common.scss +++ b/src/assets/css/common/right-box-common.scss @@ -1,3 +1,7 @@ +$border-color-light: var(--el-border-color-light); +$color-primary: var(--el-color-business); +$border-radius-small: 2px; + .common-right-box { height: 100%; @@ -25,16 +29,17 @@ align-items: center; height: 60px; padding: 0 20px; - border-bottom: 1px solid $--right-box-border-color; + border-bottom: 1px solid $border-color-light; .header__title { font-size: 16px; font-weight: bold; - color: #333; + color: var(--el-text-color-primary); } + .header__operation { i { - color: #999; + color: var(--el-color-info); font-size: 14px; } } @@ -49,7 +54,8 @@ .el-textarea__inner { padding: 5px 70px 4px 15px; } - .container__form-width.container__form{ + + .container__form-width.container__form { .input-box { .el-textarea { .el-textarea__inner { @@ -57,6 +63,7 @@ height: 32px; padding: 5px 70px 4px 10px; } + .el-input__count { right: -40px; line-height: 29px; @@ -65,9 +72,11 @@ } } } + .container__form { } + .el-form-item__content { .input-box { .el-textarea { @@ -76,6 +85,7 @@ height: 32px; padding: 5px 70px 4px 10px; } + .el-input__count { right: -40px; line-height: 29px; @@ -84,6 +94,7 @@ } } } + .form-row-item { .input-box { .el-textarea { @@ -92,59 +103,70 @@ height: 32px; padding: 5px 70px 4px 10px; } + .el-input__count { right: 0; } } } } + .el-form-item { .el-input__count { line-height: 29px; height: 25px; } } + .el-form-item { .el-input--small.not-fixed-height { height: 32px; + .el-input__count { line-height: 29px; height: 25px; } } } + .el-input__inner, .el-textarea__inner { padding: 0 10px; - border-radius: $--border-radius-primary; - border: 1px solid $--right-box-border-color; + border-radius: $border-radius-small; + border: 1px solid $border-color-light; } + .el-textarea__inner { padding: 5px 70px 4px 15px; } + .el-form { padding-top: 20px; .el-form-item { margin-bottom: 16px; - .el-form-item__label{ + + .el-form-item__label { padding-bottom: 6px; font-size: 14px; line-height: 16px; - color: #666; + color: var(--el-text-color-regular); } .el-input__inner:hover { - border-color: darken($--right-box-border-color, 10%); + border-color: darken(#e4e7ed, 10%); // 使用$border-color-light会提示识别不到颜色 } + .el-input__inner:focus { - border-color: darken($--right-box-border-color, 20%); + border-color: darken(#e4e7ed, 20%); } + .el-form-item__label { padding-bottom: 2px; } } + .el-form-item.is-error .el-input__inner, .el-form-item.is-error .el-input__inner:focus, .el-form-item.is-error .el-textarea__inner, .el-form-item.is-error .el-textarea__inner:focus, .el-message-box__input input.invalid, .el-message-box__input input.invalid:focus { - border-color: #F56C6C + border-color: var(--el-color-danger); } .form__sub-title { @@ -155,15 +177,16 @@ line-height: 32px; font-size: 14px; font-weight: bold; - color: #555; - background-color: #F6F6F6; + color: var(--el-text-color-regular); + background-color: var(--el-fill-color-light); } + /* 虚线框类型的form-item */ .form__dotted-item { padding: 10px 10px 6px 10px; margin-bottom: 10px; - border: 1px dashed $--border-color-primary; - border-radius: $--border-radius-primary; + border: 1px dashed var(--el-color-info-light-7); + border-radius: $border-radius-small; .el-form-item { margin-bottom: 0; @@ -171,42 +194,48 @@ .el-form-item__label { width: 100%; } + .form__labels-label { display: flex; justify-content: space-between; } } } - .form__create-btn { + + /*.form__create-btn { margin-bottom: 20px; width: 300px; height: 28px; - border: 1px solid lighten($--color-primary, 60%); - border-radius: $--border-radius-primary; - background-color: lighten($--color-primary, 95%); + border: 1px solid lighten($color-primary, 60%); + border-radius: $border-radius-small; + background-color: lighten($color-primary, 95%); i { - color: $--color-primary; + color: $color-primary; } - } + }*/ .form__flex-container { display: flex; justify-content: center; align-items: center; } - .one-third-form-item-left{ + + .one-third-form-item-left { display: inline-block; width: calc(50% - 5px); } - .one-third-form-item-right{ + + .one-third-form-item-right { display: inline-block; width: calc(50% - 5px); } - .form-item--half-width-other-two{ + + .form-item--half-width-other-two { display: inline-block; width: calc(50% - 10px); } - .form-item--half-width-other{ + + .form-item--half-width-other { display: inline-block; width: calc(50% - 10px); } @@ -218,40 +247,46 @@ align-items: center; justify-content: center; height: 70px; - box-shadow: -3px 0 8px -3px rgba(205,205,205,0.77); + box-shadow: -3px 0 8px -3px rgba(205, 205, 205, 0.77); .footer__btn { margin: 0 15px; height: 30px; min-width: 74px; padding: 0 15px; - color: white; - background-color: $--color-primary; + color: var(--el-color-white); + //background-color: $--color-primary; + background-color: var(--el-color-business); border: none; - border-radius: 4px; + border-radius: var(--el-border-radius-base); outline: none; font-size: 14px; cursor: pointer; - transition: background-color linear .2s, color linear .1s; + transition: background-color linear var(--el-transition-duration-fast), color linear .1s; } + .footer__btn:hover:not(.footer__btn--disabled) { - background-color: lighten($--color-primary, 10%); + background-color: lighten(#38ACD2, 10%); } + .footer__btn--light { - background-color: white; - border: 1px solid $--border-color-primary; - color: #333; + background-color: var(--el-fill-color-blank); + border: 1px solid var(--el-color-info-light-7); + color: var(--el-text-color-primary); } + .footer__btn.footer__btn--light:hover:not(.footer__btn--disabled) { - background-color: white; - border-color: lighten($--color-primary, 40%); - color: $--color-primary; + background-color: var(--el-fill-color-blank); + border-color: lighten(#38ACD2, 40%); + color: $color-primary; } + .footer__btn--disabled { opacity: .6; cursor: default; } } + /* 隐藏label新增按钮处级联选择器的input */ .hide-casc-input { position: relative; @@ -263,16 +298,20 @@ opacity: 0; } } + .label__multi-text { display: flex; justify-content: space-between; } + .right-box__select { width: 100%; } + .el-select-last.right-box-select-dropdown { left: 1698px; } + .limit-height .el-cascader-menu { max-height: 200px; overflow: auto; @@ -291,6 +330,7 @@ } } } + .cn-icon-minus-position { display: inline-flex; flex-direction: column; @@ -301,30 +341,37 @@ transform: translateY(-50%); justify-content: space-between; } + .form-item--end-with-btn { // 末尾留出btn宽度空间的form item } + .el-form-item__content .el-autocomplete .el-input-group { vertical-align: unset; } + .el-input__wrapper { - border-radius: 2px; + border-radius: $border-radius-small; height: 32px !important; line-height: 32px !important; //box-shadow: 0 0 0 1px var(--el-input-border-color,var(--el-border-color)) inset; - box-shadow: 0 0 0 1px #e7eaed inset; + box-shadow: 0 0 0 1px var(--el-border-color-light) inset; } + .el-input__inner, .el-textarea__inner { border: none !important; } + .el-select__wrapper { height: 32px; line-height: 32px; } + .el-switch { --el-switch-on-color: #699DC9; --el-switch-off-color: #C0CEDB; } + .el-textarea__inner { font-size: 12px; } diff --git a/src/assets/css/components/components/rightBox/report/reportBox.scss b/src/assets/css/components/components/rightBox/report/reportBox.scss index d7961f2b..0b5420c2 100644 --- a/src/assets/css/components/components/rightBox/report/reportBox.scss +++ b/src/assets/css/components/components/rightBox/report/reportBox.scss @@ -1,3 +1,6 @@ +$color-light: var(--el-border-color-light); +$color-primary1: #1890FF; + .right-box.right-box-report { .right-box__container { .container__form { @@ -6,114 +9,141 @@ line-height: 28px; margin-top: -2px; } + .el-checkbox-group { line-height: 28px; } + .el-height.el-form-item { margin-bottom: 18px; + .el-form-item__content { height: 20px; line-height: 20px; } } + .enable-tab { display: flex; width: 100%; + .enable-tabs { flex: 1; height: 32px; width: 160px; text-align: center; - border: 1px solid #E7EAED; + border: 1px solid $color-light; border-right: none; line-height: 32px; - color: #333; + color: var(--el-text-color-primary); } + .enable-tabs:nth-of-type(4) { - border-right: 1px solid #E7EAED; + border-right: 1px solid $color-light; } + .enable-tabs.active { - border: 1px solid #1890FF; + border: 1px solid $color-primary1; border-radius: 2px; - color: #1890FF; + color: $color-primary1; } + .enable-tabs.disable { cursor: not-allowed; } } + .enable-tabs-per-month { margin-top: 10px; + .enable-month-tab { display: flex; + .enable-month-tabs { height: 32px; width: 290px; text-align: center; - border: 1px solid #E7EAED; + border: 1px solid $color-light; border-right: none; line-height: 32px; - color: #333; + color: var(--el-text-color-primary); } + .enable-month-tabs:nth-of-type(2) { - border-right: 1px solid #E7EAED; + border-right: 1px solid $color-light; } + .enable-month-tabs.active { - border: 1px solid #1890FF; + border: 1px solid $color-primary1; border-radius: 2px; - color: #1890FF; + color: $color-primary1; } + .enable-month-tabs.disable { cursor: not-allowed; } + .el-checkbox { padding-left: 10px; margin-right: 0; } } + .enable-month-data-tab { margin-bottom: 20px; + .enable-month-value { font-size: 12px; - color: #666666; + color: var(--el-text-color-regular); height: 16px; line-height: 16px; } } } + .enable-month-moon-custom, .enable-tabs-custom { height: 32px; line-height: 40px; - color: #666; + color: var(--el-text-color-regular); } + .enable-month-all, .enable-month-data-tabs { display: flex; } + .enable-month-week { display: flex; } + .el-input-single { width: 140px; height: 32px; margin-top: 10px; + .el-input__inner { text-align: center; } + .el-input-group__prepend, .el-input-group__append { padding: 0 10px; + i { font-size: 12px; } } } + .right-box__select-single { height: 32px; margin: 10px 0 0 10px; } + .el-input__wrapper { height: 32px !important; padding: 1px 11px !important; border-radius: 2px; } + .el-input__inner { padding: 0; } @@ -121,10 +151,37 @@ .el-form-item__content { line-height: 40px !important; } + + .report__display { + width: 100%; + display: flex; + } + + .demo-datetime-picker { + width: 100%; + + .block { + width: 100%; + } + + .el-date-editor.el-input, .el-date-editor.el-input__wrapper { + width: 100%; + } + } + + .report__margin-t { + margin-top: 0.3125rem; + } + + .report__params-vertical { + vertical-align: unset; + } } + .el-input__inner { border: none; } + .el-select--small .el-select__wrapper { padding: 0 10px; min-height: 32px !important; @@ -133,28 +190,23 @@ border-radius: 2px; } } + .right-box__select--param { - //.el-select--small .el-select__prefix { - // left: 0; - // background-color: #f5f7fa; - // color: #999; - // padding: 0 1.07143rem; - // border: 1px solid #dcdfe6; - // border-radius: 2px 0 0 2px; - //} .el-select__prefix, .el-input__prefix { left: 0; - background-color: #f5f7fa; - color: #999; + background-color: var(--el-border-color-extra-light); + color: var(--el-color-info); padding: 0 15px; - border: 1px solid #dcdfe6; + border: 1px solid var(--el-border-color); border-radius: 2px 0 0 2px; } + .el-select__wrapper { padding-left: 0 !important; } } } + .my-form-item .el-form-item__content { display: block !important; } diff --git a/src/assets/css/components/views/entityExplorer/entityList/row.scss b/src/assets/css/components/views/entityExplorer/entityList/row.scss index a548659c..ff08796a 100644 --- a/src/assets/css/components/views/entityExplorer/entityList/row.scss +++ b/src/assets/css/components/views/entityExplorer/entityList/row.scss @@ -238,6 +238,7 @@ flex-shrink: 0; padding: 0 30px; font-size: 12px; + //color: #2C72C6; color: var(--el-color-business); font-weight: 400; display: flex; diff --git a/src/assets/css/components/views/report/report.scss b/src/assets/css/components/views/report/report.scss index ae8f7193..7cb010f9 100644 --- a/src/assets/css/components/views/report/report.scss +++ b/src/assets/css/components/views/report/report.scss @@ -1,39 +1,51 @@ +$fill-color-blank: var(--el-fill-color-blank); +$color-regular: var(--el-text-color-regular); +$bg-color-dark: var(--el-border-color-dark); + .cn-report { - background: #fff; + background: $fill-color-blank; margin: 10px; height: calc(100% - 20px) !important; display: flex; flex-direction: row; + .cn-report-left { width: 288px; height: 100%; - border-right: 1px solid #E7EAED; + border-right: 1px solid var(--el-border-color-light); position: relative; overflow: auto; + .cn-report-left-title { padding: 28px 0 26px 13px; font-size: 16px; - color: #333333; + color: var(--el-text-color-primary); letter-spacing: 0; } + .cn-report-left-menu { width: 250px; word-break: normal; margin: auto; font-size: 14px; - color: #333333; + color: var(--el-text-color-primary); letter-spacing: 0; padding: 14px; cursor: pointer; } + .cn-report-left-menu.cn-active { - background: #F4FAFF; + //background: #F4FAFF; + background: var(--el-color-primary-light-9); border-radius: 2px; - color: #0091FF; + //color: #0091FF; + color: var(--el-color-business); } } + .cn-report-right { flex: 1; + .list-page .main-container { padding: 0; @@ -43,159 +55,194 @@ .el-table--fit.el-table--border { height: calc(100% - 55px) !important; } + .el-table__header th:first-of-type { border-right: none; } + .has-gutter .el-table-column--selection .el-checkbox { border-left: none; display: none; } + .el-scrollbar__bar.is-vertical { z-index: 1000; } + .el-table__row .el-table-column--selection .cell { padding: 0; } + .el-table__row.expanded { td { border-bottom: none; } } + .el-table__body-wrapper { .el-table__expanded-cell { z-index: 100; } } + .el-table__fixed, .el-table__fixed-right { .el-table__expanded-cell { visibility: hidden; } } + .el-table__expanded-cell { .down { margin-left: 32px; height: 100%; width: calc(100% - 32px); - background: #fff; //盖住fixed产生的阴影 + background: $fill-color-blank; //盖住fixed产生的阴影 :deep .is-leaf { - color: #1b2e3b; + color: var(--el-text-color-primary); background: var(--el-border-color-lighter); } + .el-range-editor--small.el-input__wrapper { height: 32px; line-height: 32px; } + .cn-detection__footer { text-align: center; display: flex; justify-content: center; + .el-pagination__jump { margin-left: 3px; } + .el-pagination__goto { display: none; } + .el-input--small { width: 46px !important; + .el-input__wrapper { height: 22px; } } + .el-pagination--small { .btn-prev { margin-right: 10px; } + .btn-next { margin-left: 10px; } + &span { - color: $--color-text-primary; + color: var(--el-text-color-primary); } } } } + .block.drop-down-time { margin: 15px 0 14px 0; + .el-date-editor { justify-content: center; + .el-range-separator { width: 24px; } + .el-input__icon.el-range__close-icon { display: none; } } } + .expand { min-height: 95px; display: flex; flex-wrap: wrap; position: relative; + .panel-chart__no-data { line-height: 95px; } + .expand-cell { display: flex; - background: #FFFFFF; - border: 1px solid #E7EAED; + background: $fill-color-blank; + border: 1px solid var(--el-border-color-light); border-radius: 2px; margin: 0 12px 16px 0; width: 300px; height: 97px; + .expand-right { - background: #F9F9F9; + background: var(--el-fill-color-lighter); border-radius: 2px; width: 97px; height: 94px; position: relative; + .demo-progress { position: absolute; top: 21px; left: 18.5px; } - .demo-progress,.demo-progress .el-progress-circle { + + .demo-progress, .demo-progress .el-progress-circle { width: 57px !important; height: 57px !important; } } + .expand-left { text-align: center; width: calc(100% - 97px); display: flex; flex-direction: column; justify-content: center; + .expand-name { font-size: 12px; - color: #666666; + color: $color-regular; font-weight: 400; margin-bottom: 4px; display: flex; align-items: center; justify-content: center; + i { padding: 2px 3px 0 0; } } + .expand-time { font-size: 12px; - color: #666666; + color: $color-regular; margin-bottom: 4px; + div:nth-of-type(1) { font-size: 12px; - color: #999999; + color: var(--el-color-info); } } + .expand-icon { display: flex; justify-content: space-evenly; margin: 0 8px; font-size: 14px; + .table-operation-item--no-border { cursor: pointer; position: relative; font-size: 16px; } + .table-operation-item--disabled { cursor: not-allowed; filter: grayscale(1); @@ -208,7 +255,8 @@ } } } - .table-operation-all { + + /*.table-operation-all { width: 300px; position: absolute; bottom: 17px; @@ -217,57 +265,68 @@ line-height: 24px; height: 24px; display: flex; + .el-checkbox { width: 14px; height: 14px; padding: 0; - .el-checkbox__input,.el-checkbox__inner { + + .el-checkbox__input, .el-checkbox__inner { width: 100%; height: 100%; min-width: unset; } } + .table-operation-all-span { height: 24px; display: flex; + span { margin: 0 10px; font-size: 14px; - color: #666666; + color: $color-regular; letter-spacing: 0; font-weight: 400; } + .table-operation-back-down { font-weight: 500; height: 24px; - background: #D7D7D7; + background: $bg-color-dark; border-radius: 2px; cursor: not-allowed; + span { margin: 3px 8px; font-size: 12px; - color: #FFFFFF; + color: var(--el-color-white); } } + .table-operation-back-down div { - color: #FFFFFF; + color: var(--el-color-white); height: 24px; - background: #D7D7D7; + background: $bg-color-dark; border-radius: 2px; + i { font-size: 25px; top: calc(50% - 12px); } } + .table-operation-back-down.table-operation-all-checkbox { background: #0091ff; cursor: pointer; - } + } + .table-operation-back-down.table-operation-all-loading { - background: #D7D7D7; - } + background: $bg-color-dark; + } } - } + }*/ + .table-operation-items { .table-operation-item--no-border { margin-right: 16px; @@ -275,9 +334,11 @@ position: relative; font-size: 16px; } + .table-operation-item--no-border:last-of-type { margin-right: 0; } + .table-operation-item--no-border { display: flex; justify-content: center; diff --git a/src/components/rightBox/report/ReportBox.vue b/src/components/rightBox/report/ReportBox.vue index c5fe7036..878be9c6 100644 --- a/src/components/rightBox/report/ReportBox.vue +++ b/src/components/rightBox/report/ReportBox.vue @@ -42,7 +42,7 @@ -