From 69e281e4fa73c9205da52394fd5d2e281604be13 Mon Sep 17 00:00:00 2001 From: chenjinsong <523037378@qq.com> Date: Fri, 12 Apr 2024 18:21:50 +0800 Subject: [PATCH] =?UTF-8?q?CN-1592=20fix:=20tag=E6=A8=A1=E6=9D=BF=E8=B0=83?= =?UTF-8?q?=E6=95=B4=EF=BC=8Ccss=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/assets/tagTemplate.csv | 6 + public/assets/tagTemplate.zip | Bin 489 -> 0 bytes .../css/components/views/report/report.scss | 71 - src/assets/css/components/views/tag/tag.scss | 206 +-- .../css/components/views/tag/tagForm.scss | 1187 +---------------- src/components/table/tag/TagTable.vue | 15 +- src/views/tag/TagForm.vue | 12 +- 7 files changed, 72 insertions(+), 1425 deletions(-) create mode 100644 public/assets/tagTemplate.csv delete mode 100644 public/assets/tagTemplate.zip diff --git a/public/assets/tagTemplate.csv b/public/assets/tagTemplate.csv new file mode 100644 index 00000000..eacaf688 --- /dev/null +++ b/public/assets/tagTemplate.csv @@ -0,0 +1,6 @@ +entityType,entityValue +IP,103.3.136.0/25 +IP,192.168.1.1-192.168.1.2 +IP,103.3.138.0 +Domain,$www.baidu.com +Domain,*.email.baidu.com diff --git a/public/assets/tagTemplate.zip b/public/assets/tagTemplate.zip deleted file mode 100644 index 18b5be126b9b41d64cd82423b41608b93d3fe672..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 489 zcmWIWW@Zs#U|`^2h}zN_ky-XiHU!A40b+I_E=f$+OD-uXxlt=eq|{5vS&=U!UrD}Fy5XjAO7{y-#m<;d#lps)OF~YaKK*r) zka4ir*GZp?A0CRTTIpcL9?8ZK0JnGw(Bhy+?72EX3vGdz7hS-8BUo=MBW15Mw<9(2XS4 zM?kX~nM4?HhZfKR21W)25CsI#utU~_&8Hxx5KWa3O$dJ@YsKapgw_iXtq{Kjc(byB Oq?mzlIgr+21n~eqc8oIs diff --git a/src/assets/css/components/views/report/report.scss b/src/assets/css/components/views/report/report.scss index 83495e5b..12a940ca 100644 --- a/src/assets/css/components/views/report/report.scss +++ b/src/assets/css/components/views/report/report.scss @@ -254,77 +254,6 @@ $bg-color-dark: var(--el-border-color-dark); } } - /*.table-operation-all { - width: 300px; - position: absolute; - bottom: 17px; - z-index: 2; - left: 20px; - line-height: 24px; - height: 24px; - display: flex; - - .el-checkbox { - width: 14px; - height: 14px; - padding: 0; - - .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: $color-regular; - letter-spacing: 0; - font-weight: 400; - } - - .table-operation-back-down { - font-weight: 500; - height: 24px; - background: $bg-color-dark; - border-radius: 2px; - cursor: not-allowed; - - span { - margin: 3px 8px; - font-size: 12px; - color: var(--el-color-white); - } - } - - .table-operation-back-down div { - color: var(--el-color-white); - height: 24px; - 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: $bg-color-dark; - } - } - }*/ - .table-operation-items { .table-operation-item--no-border { margin-right: 16px; diff --git a/src/assets/css/components/views/tag/tag.scss b/src/assets/css/components/views/tag/tag.scss index 261a44cd..88a7d2e7 100644 --- a/src/assets/css/components/views/tag/tag.scss +++ b/src/assets/css/components/views/tag/tag.scss @@ -6,54 +6,20 @@ .cn-tag-right { flex: 1; + .list-page .main-container { padding: 0; .cn-table { height: calc(100% - 62px) !important; - .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产生的阴影 - :deep .is-leaf { - color: #1b2e3b; - background: #ebeef5; - } + background: var(--el-fill-color-blank); //盖住fixed产生的阴影 + .el-range-editor--small.el-input__wrapper { height: 32px; line-height: 32px; @@ -62,18 +28,13 @@ 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; @@ -81,16 +42,15 @@ .btn-next { margin-left: 10px; } - &span { - color: $--color-text-primary; - } } } } .block.drop-down-time { margin: 15px 0 14px 0; + .el-date-editor { justify-content: center; + .el-range-separator { width: 24px; } @@ -105,7 +65,8 @@ height: 24px; justify-content: center; line-height: 24px; - padding: 0px 6px; + padding: 0 6px; + span { margin-right: 6px; } @@ -115,9 +76,9 @@ } .tag-dropdown:hover,.tag-dropdown__active { cursor:pointer; - //background: rgba(113,113,113,0.10); box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02); border-radius: 2px; + i { font-size: 12px; } @@ -128,17 +89,18 @@ 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: var(--el-fill-color-blank); border-radius: 2px; margin: 0 12px 6px 0; width: 100%; height: 150px; + .expand-left { //background: #F9F9F9; //border-radius: 2px; @@ -156,10 +118,10 @@ display: flex; flex-direction: column; justify-content: center; + .expand-count { font-size: 22px; - color: #666666; - font-weight: 700; + color: var(--el-text-color-regular); margin-bottom: 4px; display: flex; align-items: center; @@ -168,15 +130,18 @@ padding: 2px 3px 0 0; } } - .expand-observed-Ips { + .expand-observed-entities { font-size: 12px; - color: #666666; + color: var(--el-color-primary); margin-bottom: 4px; - div:nth-of-type(1) { - font-size: 12px; - color: #35adda; - font-weight: 600; - cursor: pointer; + cursor: pointer; + + &.expand-observed-entities--disabled { + color: var(--el-text-color-regular); + cursor: default; + } + i { + top: 1px; } } .expand-icon { @@ -184,6 +149,7 @@ justify-content: space-evenly; margin: 0 8px; font-size: 14px; + .table-operation-item--no-border { cursor: pointer; position: relative; @@ -201,83 +167,6 @@ } } } - .table-operation-all { - width: 300px; - position: absolute; - bottom: 17px; - z-index: 2; - left: 20px; - line-height: 24px; - height: 24px; - display: flex; - .el-checkbox { - width: 14px; - height: 14px; - padding: 0; - .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; - letter-spacing: 0; - font-weight: 400; - } - .table-operation-back-down { - font-weight: 500; - height: 24px; - background: #D7D7D7; - border-radius: 2px; - cursor: not-allowed; - span { - margin: 3px 8px; - font-size: 12px; - color: #FFFFFF; - } - } - .table-operation-back-down div { - color: #FFFFFF; - height: 24px; - background: #D7D7D7; - 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; - } - } - } - .table-operation-items { - .table-operation-item--no-border { - margin-right: 16px; - cursor: pointer; - 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; - flex-direction: column; - position: relative; - } - } } } .type-tag { @@ -287,64 +176,63 @@ border-radius: 12px; } .unknow-list { - background-color:rgba(119,131,145,0.1) !important; - color:rgb(119,131,145) + background-color: rgba(var(--el-color-info-rgb),0.1) !important; + color: var(--el-color-info) } .benign-list { - background-color:rgba(116,159,77,0.1) !important; - color:rgb(116,159,77) + background-color: rgba(var(--el-color-success-rgb), 0.1) !important; + color: var(--el-color-success); } .malicious-list { - background-color:rgba(226,97,84,0.1) !important; - color:rgb(226,97,84) + background-color: rgba(var(--el-color-error-rgb), 0.1) !important; + color: var(--el-color-error); } .tag__popper { width: 180px !important; min-width: 180px; - max-height:206px; - overflow:hidden; + max-height: 206px; + overflow: hidden; padding: 0 !important; - background: #963131; - border:1px solid #C5C5C5 !important; box-shadow: -1px 1px 10px -1px rgba(205,205,205,0.85)!important; border-radius: 2px !important; + .el-row { width: 100% !important; } .selected { - color: #0091ff; + color: var(--el-color-primary); font-weight: bold; } .el-popper { max-height: 405px; } .select-dropdown { - max-height:172px; - width:100%; - margin: 1px 0px; - overflow:auto; + max-height: 172px; + width: 100%; + margin: 1px 0; + overflow: auto; list-style: none; - padding:4px 0px; + padding:4px 0; box-sizing: border-box; + .select-dropdown__item:hover{ - background-color: #F5F7FA !important; + background-color: var(--el-fill-color-light) !important; } .select-dropdown__item{ - width:100%; - height:30px; - padding:0px 11px; - line-height:30px; + width: 100%; + height: 30px; + padding: 0 11px; + line-height: 30px; position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - color: #666665; + color: var(--el-text-color-regular); display: list-item; text-align: -webkit-match-parent; box-sizing: border-box; cursor: pointer; font-size: 12px; - font-weight: 400; } } } diff --git a/src/assets/css/components/views/tag/tagForm.scss b/src/assets/css/components/views/tag/tagForm.scss index 1cff78d1..873e8ace 100644 --- a/src/assets/css/components/views/tag/tagForm.scss +++ b/src/assets/css/components/views/tag/tagForm.scss @@ -17,1103 +17,10 @@ $color-total: #00A7AB; // 以下三个颜色找不到匹配，故保留 $color-new: #98709B; $color-mousemove-cursor: #D3D0D8; -.knowledge-base { - height: 100%; - overflow: auto; - - &.list-page { - height: calc(100% - 52px); - } - - .type-tag { - display: inline-block; - padding: 0 10px; - background-color: var(--el-color-primary-light-9); - color: $color-primary; - box-shadow: 0 2px 4px 0 rgba(51, 51, 51, 0.02); - border-radius: 12px; - } - - .list-desc { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - - .knowledge-base__top { - display: flex; - justify-content: space-between; - align-items: center; - - .top-title { - font-size: 24px; - color: $color-text-primary; - font-weight: bold; - line-height: 24px; - display: flex; - align-items: center; - padding-bottom: 8px; - padding-top: 20px; - margin-left: 20px; - } - - .builtIn-to-user-defined { - margin-right: 20px; - margin-top: 20px; - } - } - - .top-tool-btn--user_defined_library { - background: $color-fill-light; - border: 1px solid $color-info-light-7; - box-shadow: 0 2px 4px 0 rgba(51, 51, 51, 0.02); - border-radius: 2px; - height: 28px; - padding: 8px 10px; - font-size: 12px; - color: $color-text-primary; - font-weight: 500; - line-height: 28px; - display: flex; - justify-content: center; - align-items: center; - - i { - color: $color-regular; - font-size: 14px !important; - margin-right: 6px; - } - } - - .top-tool-btn--user_defined_library:hover { - border: 1px solid $--border-color-primary; - background-color: $--button-gray-hover-background-color; - cursor: pointer; - } - - .knowledge-base-built-in__content { - display: flex; - flex-direction: row; - padding: 12px 0 20px 20px; - height: calc(100% - 52px); - - .list-card { - display: flex; - flex-direction: column; - justify-content: space-between; - width: 100%; - - .card-type-title { - font-size: 14px; - color: $color-text-primary; - font-weight: bold; - margin-top: 4px; - - display: flex; - align-items: center; - - margin-bottom: 6px; - } - - .list-mode__card { - width: 100%; - padding-right: 2px; - position: relative; - - .table-no-data { - height: 100%; - display: flex; - align-items: center; - justify-content: center; - line-height: 60px; - color: $color-info; - } - - .el-checkbox-group { - display: flex; - flex-wrap: wrap; - flex-direction: row; - } - - .card-selected { - box-shadow: 3px 3px 11px 0 rgba(0, 0, 0, 0.1); - border: 1px solid $color-border-light !important; - } - - .card-box { - display: inline-block; - background: $color-white; - padding-bottom: 16px; - padding-right: 16px; - height: 274px; - - @media only screen and (min-width: 1024px) { - width: 25%; - } - @media only screen and (min-width: 1440px) { - width: 20%; - } - @media only screen and (min-width: 1920px) { - width: 16.65% - } - @media only screen and (min-width: 2560px) { - width: 12.5% - } - } - - .card-item { - display: flex; - flex-direction: column; - border: 1px solid $color-border-light; - border-radius: 4px; - height: 100%; - - .card-content { - height: calc(100% - 32px); - padding: 15px; - display: flex; - flex-direction: column; - - .card-operate { - position: relative; - - .card-enable { - position: absolute; - right: 0; - top: 0; - } - } - - .card-icon { - margin-top: 9px; - width: 100%; - height: 50px; - color: red; - display: flex; - justify-content: center; - align-items: center; - - .cn-icon-add-knowledge-base { - font-size: 50px; - } - } - - .card-title { - font-size: 16px; - color: $color-text-primary; - font-weight: 700; - margin-bottom: 15px; - margin-top: 10px; - display: flex; - justify-content: center; - align-items: center; - - .card-title-name { - width: 100%; - height: 19.2px; - line-height: 19.2px; - overflow: hidden; //超出的文本隐藏 - text-overflow: ellipsis; //溢出用省略号显示 - white-space: nowrap; - word-break: break-all; - text-align: center; - - font-family: NotoSansSC-Bold; - font-size: 14px; - color: $color-text-primary; - letter-spacing: 0; - font-weight: 700; - } - - .card-title-more { - position: relative; - color: $color-regular; - - .el-checkbox__input.is-checked .el-checkbox__inner { - background-color: $color-business; - border-color: $color-business; - } - - .el-checkbox__input.is-checked .el-checkbox__inner::after { - left: 5px; - top: 2px; - } - - .el-checkbox__inner { - border-radius: 50%; - width: 16px; - height: 16px; - background-color: $color-info-light-7; - border-color: $color-info-light-7; - z-index: 1; - } - - .el-checkbox__inner::after { - left: 5px; - top: 2px; - transform: rotate(45deg) scaleY(1); - } - - .card-operate { - background: $color-white; - border: 1px solid $color-border-light; - box-shadow: -1px 1px 10px -1px rgba(205, 205, 205, 0.85); - border-radius: 2px; - position: absolute; - top: 20px; - right: -10px; - height: 56px; - width: 80px; - display: flex; - flex-direction: column; - padding-top: 4px; - padding-bottom: 4px; - font-family: Helvetica; - font-size: 12px; - font-weight: 400; - - .card-title-more-delete { - z-index: 1; - line-height: 24px; - height: 24px; - background: $color-white; - padding-left: 9px; - color: $color-regular; - } - - .card-title-more-delete:hover { - background: $color-bg-lighter; - color: $color-primary; - } - - .card-title-more-delete:active { - background: $color-bg-lighter; - color: $color-primary; - } - - .card-title-more-edit { - z-index: 1; - line-height: 24px; - height: 24px; - background: $color-white; - padding-left: 9px; - color: $color-regular; - } - - .card-title-more-edit:hover { - background: $color-bg-lighter; - color: $color-primary; - } - - .card-title-more-edit:active { - background: $color-bg-lighter; - color: $color-primary; - } - } - } - } - - .card-desc { - font-size: 12px; - color: $color-regular; - line-height: 18px; - font-weight: 400; - margin-bottom: 0; - max-height: 88px; - - overflow: hidden; - display: -webkit-box; - -webkit-line-clamp: 5; - line-clamp: 5; - -webkit-box-orient: vertical; - } - } - - .card-operate__footer { - height: 40px; - display: flex; - flex-direction: row; - justify-content: center; - font-size: 14px; - align-items: center; - padding-left: 16px; - padding-right: 16px; - padding-bottom: 20px; - - .card-type { - display: flex; - flex-direction: row; - - .card-category { - font-size: 12px; - line-height: 16px; - color: $color-business; - font-weight: 400; - border: 1px solid $color-business; - height: 20px; - width: fit-content; - padding-left: 11px; - padding-right: 11px; - box-shadow: 0 2px 4px 0 rgba(51, 51, 51, 0.02); - border-radius: 10px; - margin-right: 4px; - } - - .card-source { - height: 20px; - width: fit-content; - padding-left: 11px; - padding-right: 11px; - background: rgba(56, 172, 210, 0.10); - box-shadow: 0 2px 4px 0 rgba(51, 51, 51, 0.02); - border-radius: 10px; - font-size: 12px; - color: $color-primary; - font-weight: 400; - } - } - - .card-enable { - } - } - } - - .card-item:hover { - background: rgba(56, 172, 210, 0.04); - border: 1px solid rgba(56, 172, 210, 0.48); - box-shadow: 0 1px 4px 0 rgba(56, 172, 210, 0.13); - border-radius: 4px; - } - - .card-item__enable { - background: $color-white; - border: 1px solid $color-border-light; - box-shadow: 3px 3px 11px 0 rgba(0, 0, 0, 0.1); - border-radius: 4px; - } - } - } - } - - .knowledge-base-user-defined__content { - display: flex; - flex-direction: row; - padding: 12px 20px 20px 20px; - height: calc(100% - 52px); - - .left-filter { - margin-right: 20px; - width: 320px; - min-width: 320px; - height: 100%; - display: flex; - flex-direction: column; - background: $color-white; - border: 1px solid $color-border-light; - border-radius: 4px; - overflow: auto; - - .filter-title { - height: 32px; - padding-left: 20px; - align-items: center; - display: flex; - background: $color-bg-lighter; - box-shadow: 0 1px 0 0 $color-border-light; - border-radius: 4px 4px 0 0; - font-size: 14px; - color: $color-text-primary; - font-weight: 500; - } - - .knowledge-filter { - display: flex; - flex-direction: column; - margin-bottom: 0; - - .filter__header { - display: flex; - flex: 0 0 32px; - align-items: center; - padding-left: 20px; - color: $color-regular; - cursor: pointer; - margin-top: 15px; - - span { - font-size: 14px; - padding-left: 0; - } - - i { - font-size: 12px; - transition: all linear .1s; - transform: rotate(0) translate(0, 2px); - } - - i.arrow-rotate { - transform: rotate(90deg) translate(2px, 3px); - } - - .new-knowledge-filter-header-title { - font-size: 14px; - color: $color-text-primary; - font-weight: 500; - } - - .new-knowledge-filter-icon { - margin-left: 8px; - margin-bottom: 2px; - font-weight: bold !important; - color: $color-regular; - } - } - - .filter__body { - padding: 3px 0 0 20px; - - .el-tree { - font-size: 14px; - color: $color-text-primary; - font-weight: 400; - - .el-tree-node { - .el-tree-node__content { - margin-bottom: 2px; - - .custom-tree-node { - flex: 1; - display: flex; - align-items: center; - justify-content: space-between; - padding-right: 20px; - font-size: 14px; - font-weight: 400; - - .count-tree-node { - color: $color-regular; - } - } - } - } - } - - .el-checkbox-group { - display: flex; - flex-direction: column; - } - - .el-checkbox { - display: flex; - align-items: center; - padding: 5px 0; - margin-right: 5px; - - .el-checkbox__input { - .el-checkbox__inner { - background: var(--el-color-business-light-9); - border: 1px solid rgba(0, 0, 0, 0.15); - border-radius: 2px; - } - } - - .el-checkbox__input.is-indeterminate .el-checkbox__inner { - border-color: $color-business; - background: $color-business; - border-radius: 2px; - } - - .el-checkbox__input.is-indeterminate .el-checkbox__inner:before { - background: $color-white; - border-radius: 1px; - } - - .el-checkbox__input.is-checked { - .el-checkbox__inner { - border-color: $color-business; - background: $color-business; - border-radius: 2px; - } - } - - .el-checkbox__input.is-focus { - .el-checkbox__inner { - border-color: $color-business; - } - } - - .el-checkbox__label { - width: 100%; - padding-right: 15px; - padding-left: 7px; - } - - .filter__checkbox-label { - display: flex; - justify-content: space-between; - align-items: center; - font-weight: 400; - color: $color-text-primary; - font-size: 14px; - - .filter-label { - display: flex; - } - - .filter-count { - color: $color-regular !important; - } - - .severity-color-block { - width: 4px; - height: 15px; - border-radius: 2px; - } - } - - &:last-of-type { - padding-bottom: 0; - } - } - } - } - - .knowledge-filter:last-child { - .filter__header { - margin-top: 10px !important; - } - } - } - - .right-list-card { - display: flex; - flex-direction: column; - justify-content: space-between; - width: 100%; - height: 100%; - - .top-tools { - display: flex; - align-items: center; - flex-direction: row; - justify-content: space-between; - width: 100%; - margin-bottom: 20px; - - .top-tools__right { - display: flex; - justify-content: flex-end; - align-items: center; - - & > div { - //padding: 0 0 0 10px; - } - } - - .top-tools__left { - display: flex; - align-items: center; - flex-direction: row; - - .top-tool-btn { - cursor: pointer; - height: 28px; - width: 28px; - border: 1px solid $--border-color-primary; - outline: none; - border-radius: $--button-border-radius; - background-color: $--button-gray-background-color; - transition: background-color linear .1s; - font-size: 12px; - font-weight: 500; - - i { - font-size: 14px; - color: $color-regular; - margin-right: 4px; - } - } - - .top-tool-btn:disabled { - cursor: not-allowed; - opacity: 0.66; - - i { - } - } - - .top-tool-btn:hover:not(.cn-btn-disabled) { - border: 1px solid $--border-color-primary; - background-color: $--button-gray-hover-background-color; - } - - .top-tool-btn:focus:not(.cn-btn-disabled), .top-tool-btn.is-focus { - background-color: $--button-gray-active-background-color; - border: 1px solid $--border-color-primary; - - i { - color: $color-regular; - } - } - - .top-tool-btn--delete.top-tool-btn:focus:not(.cn-btn-disabled) { - background-color: $--button-gray-hover-background-color; - border-color: var(--el-color-danger-light-7); - - i { - color: var(--el-color-danger); - } - } - - .top-tool-btn--create { - background-color: $color-business !important; - border-color: $color-business-border-hover !important; - color: $color-white; - - i { - color: $color-white; - } - } - - .top-tool-btn--user_defined_library { - background: $color-fill-light !important; - border: 1px solid $color-info-light-7; - box-shadow: 0 2px 4px 0 rgba(51, 51, 51, 0.02); - border-radius: 2px; - height: 28px; - padding: 8px 10px; - font-size: 12px; - color: $color-text-primary; - font-weight: 500; - - i { - color: $color-regular; - font-size: 14px !important; - margin-right: 6px; - } - } - - .top-tool-btn--create:hover { - background-color: $color-business-hover !important; - border-color: $color-business-border-hover !important; - color: $color-white; - - i { - color: $color-white; - } - } - - .top-tool-btn--create:focus { - background-color: var(--el-color-business) !important; - border-color: $color-business-border-hover !important; - color: $color-white !important; - - i { - color: $color-white !important; - } - } - - .top-tool-btn--create:disabled { - opacity: 0.66; - background-color: $color-business !important; - border-color: $color-business-border-hover !important; - color: $color-white; - - i { - color: $color-white; - } - } - - .top-tool-search { - display: flex; - width: 242px; - - .el-input--small { - line-height: 27px; - - .el-input__inner { - height: 28px; - border-radius: 2px 0 0 2px; - } - } - - .top-tool-btn { - border-left: none; - border-radius: 0 2px 2px 0 !important; - } - - .top-tool-btn--search:hover { - border-left: none !important; - border-radius: 0 2px 2px 0 !important; - } - - .top-tool-btn--search:focus { - border-left: none !important; - border-radius: 0 2px 2px 0 !important; - } - } - } - } - - .list-mode__row { - width: 100%; - height: calc(100% - 80px); - margin-bottom: 0; - - .el-table { - height: 100%; - width: calc(100% - 2px); // 防止出现横向滚动条 - border: 1px solid var(--el-table-border-color); - border-bottom: none; - - th { - padding-top: 6px; - padding-bottom: 6px; - font-size: 12px; - line-height: 12px; - color: $color-text-primary; - font-weight: 500; - } - - td { - padding-top: 8px; - padding-bottom: 8px; - font-size: 12px; - line-height: 12px; - color: $color-text-primary; - font-weight: 400; - } - - .cell { - height: fit-content; - line-height: 20px; - - .reference-tag__show { - display: flex; - flex-direction: row; - - .reference-tag__group { - display: flex; - flex-direction: column; - - .reference-tag { - display: inline-block; - padding: 0 10px; - background-color: var(--el-color-primary-light-9); - color: $color-primary; - box-shadow: 0 2px 4px 0 rgba(51, 51, 51, 0.02); - border-radius: 12px; - margin-bottom: 8px; - width: fit-content; - min-width: fit-content; - } - - .reference-tag:last-of-type { - margin-bottom: 0 !important; - margin-right: 6px; - } - } - - .reference-more { - display: flex; - flex-direction: column-reverse; - } - } - } - - .el-switch { - height: auto; - --el-switch-on-color: $color-business; - } - - .el-checkbox__input { - --el-checkbox-checked-bg-color: $color-business; - } - } - } - - .list-mode__card { - width: 100%; - height: calc(100% - 134px); - overflow-y: auto; - padding-right: 2px; - margin-bottom: 30px; - - .table-no-data { - height: 100%; - display: flex; - align-items: center; - justify-content: center; - line-height: 60px; - color: $color-info; - } - - .el-checkbox-group { - display: grid; - grid-template-rows: repeat(auto-fill, 218px); - grid-template-columns: repeat(auto-fit, minmax(282px, 1fr)); - grid-gap: 30px; - } - - .card-selected { - box-shadow: 3px 3px 11px 0 rgba(0, 0, 0, 0.1); - border: 1px solid $color-border-light !important; - } - - .card-item { - background: $color-white; - border: 1px solid $color-border-light; - border-radius: 4px; - height: 218px; - display: flex; - flex-direction: column; - - .card-content { - height: calc(100% - 32px); - padding: 16px; - display: flex; - flex-direction: column; - - .card-title { - font-size: 16px; - color: $color-text-primary; - font-weight: 700; - margin-bottom: 6px; - display: flex; - flex-direction: row; - justify-content: space-between; - - .card-title-name { - width: 210px; - overflow: hidden; //超出的文本隐藏 - text-overflow: ellipsis; //溢出用省略号显示 - white-space: nowrap; - word-break: break-all; - } - - .card-title-more { - position: relative; - color: $color-regular; - - .el-checkbox__input.is-checked .el-checkbox__inner { - background-color: $color-business; - border-color: $color-business; - } - - .el-checkbox__input.is-checked .el-checkbox__inner::after { - left: 5px; - top: 2px; - } - - .el-checkbox__inner { - border-radius: 50%; - width: 16px; - height: 16px; - background-color: $color-info-light-7; - border-color: $color-info-light-7; - z-index: 1; - } - - .el-checkbox__inner::after { - left: 5px; - top: 2px; - transform: rotate(45deg) scaleY(1); - } - - .card-operate { - background: $color-white; - border: 1px solid $color-border-light; - box-shadow: -1px 1px 10px -1px rgba(205, 205, 205, 0.85); - border-radius: 2px; - position: absolute; - top: 20px; - right: -10px; - height: 56px; - width: 80px; - display: flex; - flex-direction: column; - padding-top: 4px; - padding-bottom: 4px; - font-family: Helvetica; - font-size: 12px; - font-weight: 400; - - .card-title-more-delete { - z-index: 1; - line-height: 24px; - height: 24px; - background: $color-white; - padding-left: 9px; - color: $color-regular; - } - - .card-title-more-delete:hover { - background: $color-bg-lighter; - color: $color-primary; - } - - .card-title-more-delete:active { - background: $color-bg-lighter; - color: $color-primary; - } - - .card-title-more-edit { - z-index: 1; - line-height: 24px; - height: 24px; - background: $color-white; - padding-left: 9px; - color: $color-regular; - } - - .card-title-more-edit:hover { - background: $color-bg-lighter; - color: $color-primary; - } - - .card-title-more-edit:active { - background: $color-bg-lighter; - color: $color-primary; - } - } - } - } - - .card-id { - font-size: 12px; - color: $color-info; - font-weight: 400; - margin-bottom: 16px; - line-height: 12px; - } - - .card-desc { - font-size: 12px; - color: $color-regular; - line-height: 18px; - font-weight: 400; - margin-bottom: 0; - max-height: 88px; - - overflow: hidden; - display: -webkit-box; - -webkit-line-clamp: 5; - line-clamp: 5; - -webkit-box-orient: vertical; - } - } - - .card-operate__footer { - height: 40px; - display: flex; - flex-direction: row; - justify-content: space-between; - font-size: 14px; - font-weight: 400; - align-items: center; - padding-left: 16px; - padding-right: 16px; - padding-bottom: 20px; - - .card-type { - display: flex; - flex-direction: row; - - .card-category { - font-size: 12px; - line-height: 16px; - color: $color-business; - font-weight: 400; - border: 1px solid $color-business; - height: 20px; - width: fit-content; - padding-left: 11px; - padding-right: 11px; - box-shadow: 0 2px 4px 0 rgba(51, 51, 51, 0.02); - border-radius: 10px; - margin-right: 4px; - } - - .card-source { - height: 20px; - width: fit-content; - padding-left: 11px; - padding-right: 11px; - background: rgba(56, 172, 210, 0.10); - box-shadow: 0 2px 4px 0 rgba(51, 51, 51, 0.02); - border-radius: 10px; - font-size: 12px; - color: $color-primary; - font-weight: 400; - } - } - - .card-enable { - } - } - } - - .card-item:hover { - box-shadow: 3px 3px 11px 0 rgba(0, 0, 0, 0.1); - } - - .card-item__enable { - background: $color-white; - border: 1px solid $color-border-light; - box-shadow: 3px 3px 11px 0 rgba(0, 0, 0, 0.1); - border-radius: 4px; - } - } - - .knowledge-pagination { - position: relative; - height: 56px; - width: 100%; - background: $color-white; - - .el-pagination { - position: absolute; - bottom: 4px; - } - } - } - } - - .business-button { - padding-left: 7px; - padding-right: 7px; - font-size: 12px; - height: 28px; - - i { - font-size: 14px !important; - margin-right: 5px; - } - } -} - -.reference-tag__tip { - display: flex; - flex-direction: column; - font-size: 12px; - color: $color-regular; - font-weight: 400; - min-width: 130px; - max-height: 240px; - overflow-y: auto; - cursor: pointer; - - .reference-tag { - height: 24px; - min-height: 24px; - padding-top: 3px; - } -} - -.edit-tag-base { +.edit-tag { height: 100%; - .edit-tag-base__header { + .edit-tag__header { padding: 30px 0 30px 20px; font-size: 24px; line-height: 24px; @@ -1121,7 +28,7 @@ $color-mousemove-cursor: #D3D0D8; color: $color-text-primary; } - .edit-tag-base__body { + .edit-tag__body { display: flex; height: calc(100% - 147px); padding-left: 20px; @@ -1314,42 +221,6 @@ $color-mousemove-cursor: #D3D0D8; color: $color-text-primary; line-height: unset; } - - .el-form-item { - margin-bottom: 0px; - } - - .el-form-item__content { - line-height: unset; - - .el-input__inner { - padding-left: 8px; - font-size: 14px; - color: $color-text-primary; - } - - .el-textarea__inner { - padding-left: 8px; - font-size: 12px; - } - - .form-select__disable { - width: 100%; - - .el-input__inner { - background-color: $color-fill-light; - } - } - - .form-select__enable { - width: 100%; - - .el-input__inner { - background-color: $color-white !important; - padding-left: 22px !important; - } - } - } } .skeleton-border { @@ -1523,10 +394,6 @@ $color-mousemove-cursor: #D3D0D8; font-size: 12px; } - .el-pagination .el-pager li { - color: $color-text-primary; - } - .el-pagination .el-pager li.active { background-color: $color-business; color: $color-white; @@ -1537,13 +404,9 @@ $color-mousemove-cursor: #D3D0D8; margin-top: 0 !important; } - .el-input { - height: 24px; - } - .el-form-item__content { - margin-top: 0px; - margin-bottom: 0px; + margin-top: 0; + margin-bottom: 0; } .el-form-item__error { @@ -1552,7 +415,7 @@ $color-mousemove-cursor: #D3D0D8; } } - .edit-tag-base__footer { + .edit-tag__footer { display: flex; align-items: center; justify-content: center; @@ -1565,42 +428,6 @@ $color-mousemove-cursor: #D3D0D8; height: 30px; min-width: 74px; } - - .footer__btn { - margin: 0 10px; - height: 30px; - min-width: 74px; - padding: 0 15px; - color: $color-white; - background-color: var(--el-color-business); - border: none; - border-radius: 4px; - outline: none; - font-size: 14px; - cursor: pointer; - transition: background-color linear $transition-duration, color linear .1s; - } - - .footer__btn:hover:not(.footer__btn--disabled) { - background-color: var(--el-color-business-light-2); - } - - .footer__btn--light { - background-color: $color-fill-light; - border: 1px solid $--border-color-primary; - color: $color-text-primary; - } - - .footer__btn.footer__btn--light:hover:not(.footer__btn--disabled) { - background-color: $color-white; - border-color: var(--el-color-business-light-5); - color: $color-business; - } - - .footer__btn--disabled { - opacity: .6; - cursor: default; - } } } @@ -1611,7 +438,6 @@ $color-mousemove-cursor: #D3D0D8; min-height: 24px !important; font-size: 12px; color: $color-text-primary; - font-weight: 500; width: 598px; margin-left: 10px; background: $color-fill-light; @@ -1619,7 +445,6 @@ $color-mousemove-cursor: #D3D0D8; padding: 0 !important; box-shadow: 0 2px 4px 0 rgba(51, 51, 51, 0.02); border-radius: 2px; - font-family: NotoSansHans-Medium !important; .add-tag-btn { color: $color-regular !important; diff --git a/src/components/table/tag/TagTable.vue b/src/components/table/tag/TagTable.vue index 684aa1c5..f4af3b44 100644 --- a/src/components/table/tag/TagTable.vue +++ b/src/components/table/tag/TagTable.vue @@ -48,14 +48,13 @@
-
+
-
+
{{observedCount}}
-
-
Observed IPs ->
-
Observed IPs ->
+
+ Observed IPs 
@@ -399,7 +398,7 @@ export default { this.$nextTick(() => { const totalIndicatorsDom = document.getElementById('totalIndicators' + item.id) const uniqueEntityObservedDom = document.getElementById('uniqueEntityObserved' + item.id) - uniqueEntityObservedDom.style.cssText = 'color:#0091ff;font-weight: bold;' + uniqueEntityObservedDom.style.cssText = 'color:var(--el-color-primary);font-weight: bold;' totalIndicatorsDom.style.cssText = '' document.getElementById('tagDropdown' + item.id).click() }) @@ -413,7 +412,7 @@ export default { const totalIndicatorsDom = document.getElementById('totalIndicators' + item.id) const uniqueEntityObservedDom = document.getElementById('uniqueEntityObserved' + item.id) uniqueEntityObservedDom.style.cssText = '' - totalIndicatorsDom.style.cssText = 'color:#0091ff;font-weight: bold;' + totalIndicatorsDom.style.cssText = 'color:var(--el-color-primary);font-weight: bold;' document.getElementById('tagDropdown' + item.id).click() }) this.init(item, api.tagIndicatorTrend, api.tagIndicatorStatistics) @@ -598,7 +597,7 @@ export default { this.$nextTick(() => { const uniqueEntityObservedDom = document.getElementById('uniqueEntityObserved' + row.id) if (uniqueEntityObservedDom) { - uniqueEntityObservedDom.style.cssText = 'color:#0091ff;font-weight: bold;' + uniqueEntityObservedDom.style.cssText = 'color:var(--el-color-primary);font-weight: bold;' } }) } diff --git a/src/views/tag/TagForm.vue b/src/views/tag/TagForm.vue index 711705d1..dbb7f162 100644 --- a/src/views/tag/TagForm.vue +++ b/src/views/tag/TagForm.vue @@ -1,8 +1,8 @@