gfwleak/cyber-narrator-cn-ui
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CN-1612 feat: 1、部分css重构内容：report报告；2、修复新增report，time limit选择custom时，开始时间报错的问题。

Browse Source
This commit is contained in:
刘洪洪
2024-04-07 15:48:19 +08:00
parent 9ec793db92
commit f1a91429ec
5 changed files with 261 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

125
src/assets/css/common/right-box-common.scss
View File

@@ -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;
}