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

CN-1594 feat: right-box调整

Browse Source
This commit is contained in:
chenjinsong
2024-04-10 16:50:39 +08:00
parent 70edbb95fc
commit 5f1efe4466
19 changed files with 117 additions and 419 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/assets/css/common.scss
View File

@@ -40,10 +40,6 @@ body {
.fade-leave-to {
opacity: 0;
}
/* 调整表单错误提示上边距 */
.el-form-item__error {
padding-top: 0 !important;
}
/* 请求报错样式关于popover的修改 */
.error-popover {

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

@@ -1,5 +1,3 @@
$border-color-light: var(--el-border-color-light);
$color-primary: var(--el-color-business);
$border-radius-small: 2px;
.common-right-box {
@@ -29,7 +27,7 @@ $border-radius-small: 2px;
align-items: center;
height: 60px;
padding: 0 20px;
border-bottom: 1px solid $border-color-light;
border-bottom: 1px solid var(--el-border-color-light);
.header__title {
font-size: 16px;
@@ -51,62 +49,6 @@ $border-radius-small: 2px;
overflow-x: hidden;
overflow-y: auto;
.el-textarea__inner {
padding: 5px 70px 4px 15px;
}
.container__form-width.container__form {
.input-box {
.el-textarea {
.el-textarea__inner {
width: 530px;
height: 32px;
padding: 5px 70px 4px 10px;
}
.el-input__count {
right: -40px;
line-height: 29px;
height: 25px;
}
}
}
}
.el-form-item__content {
.input-box {
.el-textarea {
.el-textarea__inner {
width: 517px;
height: 32px;
padding: 5px 70px 4px 10px;
}
.el-input__count {
right: -40px;
line-height: 29px;
height: 25px;
}
}
}
}
.form-row-item {
.input-box {
.el-textarea {
.el-textarea__inner {
width: 466px;
height: 32px;
padding: 5px 70px 4px 10px;
}
.el-input__count {
right: 0;
}
}
}
}
.el-form-item {
.el-input__count {
line-height: 29px;
@@ -114,25 +56,12 @@ $border-radius-small: 2px;
}
}
.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-small;
border: 1px solid $border-color-light;
}
.el-textarea__inner {
padding: 5px 70px 4px 15px;
padding-right: 70px;
}
.el-form {
@@ -148,14 +77,6 @@ $border-radius-small: 2px;
color: var(--el-text-color-regular);
}
.el-input__inner:hover {
border-color: darken(#e4e7ed, 10%); // 使用$border-color-light会提示识别不到颜色
}
.el-input__inner:focus {
border-color: darken(#e4e7ed, 20%);
}
.el-form-item__label {
padding-bottom: 2px;
}
@@ -198,18 +119,6 @@ $border-radius-small: 2px;
}
}
/*.form__create-btn {
margin-bottom: 20px;
width: 300px;
height: 28px;
border: 1px solid lighten($color-primary, 60%);
border-radius: $border-radius-small;
background-color: lighten($color-primary, 95%);
i {
color: $color-primary;
}
}*/
.form__flex-container {
display: flex;
justify-content: center;
@@ -251,33 +160,36 @@ $border-radius-small: 2px;
min-width: 74px;
padding: 0 15px;
color: var(--el-color-white);
//background-color: $--color-primary;
background-color: var(--el-color-business);
border: none;
border: 1px solid var(--el-color-business-dark-2);
border-radius: var(--el-border-radius-base);
outline: none;
font-size: 14px;
cursor: pointer;
transition: background-color linear var(--el-transition-duration-fast), color linear .1s;
transition: all linear .1s;
}
.footer__btn:hover:not(.footer__btn--disabled) {
background-color: lighten(#38ACD2, 10%);
background-color: var(--el-color-business-light-2);
}
.footer__btn:focus:not(.footer__btn--disabled) {
background-color: var(--el-color-business-dark-1);
}
.footer__btn--light {
.footer__btn.footer__btn--light {
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: var(--el-fill-color-blank);
border-color: lighten(#38ACD2, 40%);
color: $color-primary;
background-color: var(--el-fill-color);
}
.footer__btn.footer__btn--light:focus:not(.footer__btn--disabled) {
background-color: var(--el-fill-color-darker);
}
.footer__btn--disabled {
.footer__btn.footer__btn--disabled {
opacity: .6;
cursor: default;
}
@@ -338,36 +250,7 @@ $border-radius-small: 2px;
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: $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 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-textarea__inner {
font-size: 12px;
}
}

11
src/assets/css/components/components/advancedSearch/advanced-search2.scss
View File

@@ -181,6 +181,7 @@ $color-primary: var(--el-color-primary);
color: var(--el-text-color-primary);
font-weight: bold;
cursor: text;
.el-select {
min-width: 210px !important;
min-height: 20px !important;
@@ -192,9 +193,6 @@ $color-primary: var(--el-color-primary);
margin-top: -4px;
cursor: pointer;
}
.el-select__wrapper.is-focused {
box-shadow: 0 0 0 1px var(--el-color-business) inset !important;
}
}
.condition__operator {
color: $color-primary;
@@ -229,10 +227,3 @@ $color-primary: var(--el-color-primary);
min-width: 120px !important;
padding: 8px 10px !important;
}
.el-input__wrapper.is-focus {
box-shadow: 0 0 0 1px var(--el-color-business) inset !important;
}
.el-select-dropdown__item.is-selected {
//color: #2c72c6 !important;
color: var(--el-color-primary-light-3) !important;
}

20
src/assets/css/components/components/layout/layout.scss
View File

@@ -1,8 +1,8 @@
.cn-container {
height: calc(100% - 100px);
//background-color: $--content-right-background-color;
background-color: var(--bg-color);
background-color: var(--el-fill-color-blank);
width: 100%;
&>div {
height: 100%;
}
@@ -17,7 +17,7 @@
.cn-header__banner {
display: flex;
height: 60px;
background-color: #233447;
background-color: #233447; // TODO 暂无变量
.banner__left {
display: flex;
@@ -34,13 +34,13 @@
border-radius: 4px;
margin-left: 14px;
margin-right: 10px;
color: #F7F7F7;
color: var(--el-fill-color-lighter);
cursor: pointer;
background-color: transparent;
transition: all linear var(--el-transition-duration);
&.shrink-button--collapse {
background-color: #334355;
background-color: var(--el-text-color-primary);
}
}
}
@@ -125,7 +125,7 @@
font-size: 14px;
font-weight: bolder;
color: var(--el-text-color-primary);
border-bottom: 1px dashed #D8D8D8;
border-bottom: 1px dashed var(--el-border-color);
}
.middle-menus__body {
display: flex;
@@ -158,16 +158,17 @@
display: flex;
.el-dropdown {
color: #fff;
color: var(--el-fill-color-blank);
height: 40px;
line-height: 60px;
text-align: center;
margin: 0 20px 0 10px;
}
.login-user {
color: #fff;
color: var(--el-color-white);
i {
color: #fff;
color: var(--el-color-white);
font-size: 12px;
}
}
@@ -256,6 +257,7 @@
.search-input{
width: 100%;
padding: 4px 4px 0 4px;
.el-input__inner{
border-radius: 2px;
font-size: 12px;

57
src/assets/css/components/components/rightBox/report/reportBox.scss
View File

@@ -1,6 +1,3 @@
$color-light: var(--el-border-color-light);
$color-primary1: #1890FF;
.right-box.right-box-report {
.right-box__container {
.container__form {
@@ -32,20 +29,20 @@ $color-primary1: #1890FF;
height: 32px;
width: 160px;
text-align: center;
border: 1px solid $color-light;
border: 1px solid var(--el-border-color-light);
border-right: none;
line-height: 32px;
color: var(--el-text-color-primary);
}
.enable-tabs:nth-of-type(4) {
border-right: 1px solid $color-light;
border-right: 1px solid var(--el-border-color-light);
}
.enable-tabs.active {
border: 1px solid $color-primary1;
border: 1px solid var(--el-color-primary);
border-radius: 2px;
color: $color-primary1;
color: var(--el-color-primary);
}
.enable-tabs.disable {
@@ -63,20 +60,20 @@ $color-primary1: #1890FF;
height: 32px;
width: 290px;
text-align: center;
border: 1px solid $color-light;
border: 1px solid var(--el-border-color-light);
border-right: none;
line-height: 32px;
color: var(--el-text-color-primary);
}
.enable-month-tabs:nth-of-type(2) {
border-right: 1px solid $color-light;
border-right: 1px solid var(--el-border-color-light);
}
.enable-month-tabs.active {
border: 1px solid $color-primary1;
border: 1px solid var(--el-color-primary);
border-radius: 2px;
color: $color-primary1;
color: var(--el-color-primary);
}
.enable-month-tabs.disable {
@@ -107,17 +104,13 @@ $color-primary1: #1890FF;
color: var(--el-text-color-regular);
}
.enable-month-all, .enable-month-data-tabs {
display: flex;
}
.enable-month-week {
.enable-tabs-weekly, .enable-month-all, .enable-month-data-tabs, .enable-month-week {
display: flex;
margin-top: 10px;
}
.el-input-single {
width: 140px;
height: 32px;
margin-top: 10px;
.el-input__inner {
@@ -134,24 +127,13 @@ $color-primary1: #1890FF;
}
.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;
}
.el-form-item__content {
line-height: 40px !important;
}
.report__display {
width: 100%;
display: flex;
@@ -169,40 +151,23 @@ $color-primary1: #1890FF;
}
}
.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;
line-height: 32px !important;
margin-top: -2px;
border-radius: 2px;
}
}
.right-box__select--param {
.el-select__prefix, .el-input__prefix {
left: 0;
background-color: var(--el-border-color-extra-light);
color: var(--el-color-info);
padding: 0 15px;
border: 1px solid var(--el-border-color);
border-radius: 2px 0 0 2px;
}
.el-select__wrapper {
padding-left: 0 !important;
padding-left: 1px !important;
}
}
}

1
src/assets/css/components/views/administration/License.scss
View File

@@ -63,7 +63,6 @@
.el-form-item__content {
color: var(--el-text-color-primary) !important;
font-weight: 400;
font-size: 14px;
}
}

62
src/assets/css/components/views/detections/detection-create/detection-form-setting.scss
View File

@@ -13,11 +13,6 @@ $color-info-light: var(--el-color-info-light-7);
margin-top: -4px;
}
.el-select__wrapper, .el-input__wrapper {
min-height: 24px !important;
height: 24px !important;
}
.el-switch__label.is-active {
color: $color-primary;
}
@@ -27,15 +22,8 @@ $color-info-light: var(--el-color-info-light-7);
line-height: 14px;
padding: 0;
margin-bottom: 12px;
font-family: NotoSansHans-Medium;
font-size: 14px;
color: $color-primary;
font-weight: 500;
}
.el-form-item__content {
height: 24px;
line-height: 24px;
}
.block-mode {
@@ -67,19 +55,15 @@ $color-info-light: var(--el-color-info-light-7);
flex-direction: column;
.block-mode-title {
font-family: NotoSansSChineseRegular;
font-size: 14px;
color: $color-primary;
font-weight: 400;
line-height: 14px;
}
.block-mode-content {
font-family: NotoSansSChineseRegular;
font-size: 12px;
color: $color-regular;
line-height: 15px;
font-weight: 400;
margin: 10px 0;
}
@@ -90,10 +74,8 @@ $color-info-light: var(--el-color-info-light-7);
text-align: center;
background: $fill-color-light;
border-radius: 2px;
font-family: NotoSansHans-Medium;
font-size: 12px;
color: $color-primary;
font-weight: 500;
cursor: pointer;
transition: all var(--el-transition-duration-fast);
}
@@ -106,16 +88,13 @@ $color-info-light: var(--el-color-info-light-7);
}
.block-title {
font-family: NotoSansHans-Medium;
font-size: 14px;
line-height: 14px;
color: $color-primary;
font-weight: 500;
margin-bottom: 12px;
}
.block-title1 {
font-family: NotoSansHans-Medium;
font-size: 12px;
line-height: 12px;
color: $color-primary;
@@ -125,23 +104,6 @@ $color-info-light: var(--el-color-info-light-7);
.form-setting__select {
width: 620px !important;
.el-input--small .el-input__inner {
height: 24px !important;
line-height: 24px !important;
}
}
.form-setting__input {
&.el-input {
height: 24px !important;
line-height: 24px !important;
}
.el-input__inner {
height: 24px;
line-height: 24px;
}
}
.form-setting__textarea {
@@ -151,10 +113,8 @@ $color-info-light: var(--el-color-info-light-7);
}
.el-switch__label, .form-setting__block .el-switch__label {
font-family: NotoSansSChineseRegular;
font-size: 14px;
color: $color-primary;
font-weight: 400;
}
.block-dimension {
@@ -172,18 +132,11 @@ $color-info-light: var(--el-color-info-light-7);
background: var(--el-fill-color-darker);
border-radius: 2px;
opacity: 0.6;
font-family: NotoSansSChineseRegular;
font-size: 12px;
color: $color-primary;
font-weight: 400;
margin-right: 4px;
}
}
.el-input--small .el-input__inner {
height: 24px !important;
line-height: 24px !important;
}
}
.form-setting__block-key {
@@ -197,10 +150,8 @@ $color-info-light: var(--el-color-info-light-7);
border: 1px solid $color-info-light;
box-shadow: 0 2px 4px 0 rgba(51, 51, 51, 0.02);
border-radius: 2px;
font-family: NotoSansHans-Medium;
font-size: 12px;
color: $color-primary;
font-weight: 500;
margin-left: 12px;
display: flex;
align-items: center;
@@ -228,10 +179,8 @@ $color-info-light: var(--el-color-info-light-7);
background: var(--el-color-business);
border: 1px solid var(--el-color-business-dark-1);
border-radius: 2px;
font-family: NotoSansHans-Medium;
font-size: 12px;
color: $fill-color-blank;
font-weight: 500;
padding: 0 14px;
}
@@ -293,11 +242,6 @@ $color-info-light: var(--el-color-info-light-7);
width: 170px;
}
.el-input--small .el-input__inner {
height: 24px;
line-height: 24px;
}
i {
font-size: 12px !important;
font-variant-caps: all-small-caps;
@@ -416,10 +360,8 @@ $color-info-light: var(--el-color-info-light-7);
}
.condition-metric {
font-family: NotoSansSChineseRegular;
font-size: 14px;
color: $color-primary;
font-weight: 400;
display: flex;
flex-direction: column;
@@ -514,10 +456,8 @@ $color-info-light: var(--el-color-info-light-7);
border: 1px solid $color-info-light;
box-shadow: 0 2px 4px 0 rgba(51, 51, 51, 0.02);
border-radius: 2px;
font-family: NotoSansHans-Medium;
font-size: 12px;
color: $color-primary;
font-weight: 500;
cursor: pointer;
display: flex;
align-items: center;
@@ -536,10 +476,8 @@ $color-info-light: var(--el-color-info-light-7);
.el-divider__text {
padding: 0 4px;
font-family: NotoSansSChineseRegular;
font-size: 12px;
color: var(--el-text-color-disabled);
font-weight: 400;
}
}

36
src/assets/css/components/views/detections/detection-create/detection-form.scss
View File

@@ -7,7 +7,7 @@ $bg-color-page: var(--el-bg-color-page);
.detection-form-header {
font-size: 24px;
color: $text-color-primary;
font-weight: 900;
font-weight: bold;
margin-top: 10px;
}
@@ -59,9 +59,7 @@ $bg-color-page: var(--el-bg-color-page);
height: 24px;
line-height: 24px;
text-align: center;
font-family: NotoSansHans-Medium;
font-size: 16px;
font-weight: 500;
border-radius: 50%;
margin-right: 10px;
transition: 0.5s all;
@@ -80,7 +78,6 @@ $bg-color-page: var(--el-bg-color-page);
.form-collapse-header-title {
font-size: 16px;
color: $text-color-primary;
font-weight: 500;
}
}
@@ -89,22 +86,18 @@ $bg-color-page: var(--el-bg-color-page);
.trigger-block {
width: 620px;
height: 90px;
padding: 16px 12px;
padding: 16px 12px 0 12px;
border-radius: 2px;
border: 1px var(--el-border-color-light) solid;
display: flex;
flex-direction: column;
font-size: 14px;
color: $text-color-primary;
font-weight: 400;
.trigger-block-item {
display: flex;
align-items: flex-start;
justify-content: flex-start;
height: 24px;
line-height: 24px;
.policy-form-item {
.el-form-item__error {
@@ -113,24 +106,21 @@ $bg-color-page: var(--el-bg-color-page);
}
}
.el-input--small .el-input__inner {
width: 112px;
.el-form-item__content {
margin: 0 12px;
}
.el-input--small {
.el-input__inner {
width: 112px;
}
}
.el-select .el-input .el-select__caret {
height: 24px;
line-height: 24px;
margin-right: 12px;
}
.form-trigger__select {
margin-left: -12px;
}
.el-form-item__content {
height: 24px;
line-height: 24px !important;
.form-trigger__select .el-form-item__content {
margin-left: 0;
}
}
}
@@ -141,11 +131,7 @@ $bg-color-page: var(--el-bg-color-page);
}
.el-input__wrapper, .el-select__wrapper {
height: 24px !important;
line-height: 24px !important;
min-height: 24px !important;
width: 112px;
margin: 0 12px;
}
.el-input__inner {
@@ -155,8 +141,6 @@ $bg-color-page: var(--el-bg-color-page);
}
.el-input--small, .el-input--small .el-input__inner {
height: 24px !important;
line-height: 24px !important;
border-radius: 2px !important;
}
}

70
src/assets/css/components/views/detections/detection-filter.scss
View File

@@ -1,7 +1,3 @@
$color-primary: var(--el-text-color-primary);
$color-business: var(--el-color-business);
$color-light: var(--el-border-color-light);
.detection-filter-case {
display: flex;
flex-direction: column;
@@ -9,7 +5,7 @@ $color-light: var(--el-border-color-light);
margin-right: 12px;
overflow: auto;
z-index: 1;
border: 1px solid $color-light !important;
border: 1px solid var(--el-border-color-light) !important;
border-radius: var(--el-border-radius-base) !important;
.filter-case__header {
@@ -19,7 +15,7 @@ $color-light: var(--el-border-color-light);
color: var(--el-text-color-regular);
font-size: 14px;
background: var(--cn-bg-color-lighter);
box-shadow: 0 1px 0 0 $color-light;
box-shadow: 0 1px 0 0 var(--el-border-color-light);
border-radius: var(--el-border-radius-base) var(--el-border-radius-base) 0 0;
}
@@ -28,8 +24,7 @@ $color-light: var(--el-border-color-light);
line-height: 46px;
margin: 0 20px;
font-size: 14px;
color: $color-primary;
font-weight: 500;
color: var(--el-text-color-primary);
}
.filter__body {
@@ -51,7 +46,7 @@ $color-light: var(--el-border-color-light);
display: flex;
align-items: center;
font-size: 14px;
color: $color-primary;
color: var(--el-text-color-primary);
font-weight: 400;
.filter__body-item-left-index {
@@ -61,10 +56,9 @@ $color-light: var(--el-border-color-light);
background: var(--el-bg-color-page);
border-radius: 2px;
margin-right: 6px;
font-family: NotoSansHans-Black;
font-size: 9px;
color: var(--el-color-info);
font-weight: 900;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
@@ -72,10 +66,8 @@ $color-light: var(--el-border-color-light);
.filter__body-item-left-label {
max-width: 180px;
font-family: NotoSansSChineseRegular;
font-size: 14px;
color: $color-primary;
font-weight: 400;
color: var(--el-text-color-primary);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
@@ -84,10 +76,8 @@ $color-light: var(--el-border-color-light);
.filter__body-item-right {
flex-shrink: 0;
font-family: NotoSansSChineseRegular;
font-size: 12px;
color: var(--el-text-color-regular);
font-weight: 400;
margin-right: 10px;
}
}
@@ -129,7 +119,7 @@ $color-light: var(--el-border-color-light);
line-height: 32px;
background: var(--cn-bg-color-lighter);
padding: 0 20px;
box-shadow: 0 1px 0 0 $color-light;
box-shadow: 0 1px 0 0 var(--el-border-color-light);
border-radius: var(--el-border-radius-base) var(--el-border-radius-base) 0 0;
}
@@ -142,11 +132,10 @@ $color-light: var(--el-border-color-light);
}
.new-filter-content-title {
font-family: NotoSansHans-Medium;
font-size: 14px;
line-height: 14px;
margin-bottom: 10px;
color: $color-primary;
color: var(--el-text-color-primary);
font-weight: 500;
}
@@ -158,51 +147,12 @@ $color-light: var(--el-border-color-light);
line-height: 16px;
margin-bottom: 13.6px;
font-size: 14px;
color: $color-primary;
font-weight: 400;
color: var(--el-text-color-primary);
display: flex !important;
.el-checkbox__inner {
width: 16px !important;
height: 16px !important;
text-align: center !important;
line-height: 16px !important;
}
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
border-color: var(--el-bg-color-page);
background: var(--el-bg-color-page);
border-radius: 2px;
}
.el-checkbox__input.is-indeterminate .el-checkbox__inner:before {
background: var(--el-fill-color-blank);
border-radius: 1px;
}
.el-checkbox__inner::after {
top: 2px;
left: 5px;
}
.el-checkbox__input.is-checked {
.el-checkbox__inner {
border-color: var(--el-bg-color-page);
background: var(--el-bg-color-page);
border-radius: 2px;
}
}
.el-checkbox__input.is-focus {
.el-checkbox__inner {
border-color: var(--el-bg-color-page);
}
}
.el-checkbox__label {
font-size: 14px;
color: $color-primary;
font-weight: 400;
color: var(--el-text-color-primary);
padding-left: 10px !important;
}
}

5
src/assets/css/components/views/detections/detections.scss
View File

@@ -25,21 +25,18 @@
overflow: auto;
.detection-title {
font-family: NotoSansHans-Black;
line-height: 24px;
font-size: 24px;
color: var(--el-text-color-primary);
font-weight: 900;
font-weight: bold;
display: flex;
flex-direction: column;
.detection-title-label {
font-family: NotoSansSChineseRegular;
font-size: 12px;
color: var(--el-text-color-regular);
letter-spacing: 0;
line-height: 18px;
font-weight: 400;
margin-top: 5px;
}
}

9
src/assets/css/main.scss
View File

@@ -39,6 +39,15 @@
'large': 32px,
'default': 28px,
'small': 24px
),
// dropdown
$dropdown: (
'menuItem-hover-fill': var(--el-fill-color-light),
'menuItem-hover-color': var(--el-text-color-regular)
),
$checkbox: (
'checked-input-border-color': var(--el-color-business),
'checked-bg-color': var(--el-color-business),
)
);
// 导出重写后的var.scss，暴露内部变量供别处使用