From e8a9968e446ddf8970b2ce3874dea9f5447a8085 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=88=98=E6=B4=AA=E6=B4=AA?= <2498601771@qq.com> Date: Fri, 29 Mar 2024 16:03:48 +0800 Subject: [PATCH] =?UTF-8?q?CN-1594=20feat:=20=E9=83=A8=E5=88=86css?= =?UTF-8?q?=E9=87=8D=E6=9E=84=E5=86=85=E5=AE=B9=EF=BC=9A=E5=AE=9E=E4=BD=93?= =?UTF-8?q?=E8=AF=A6=E6=83=85tabs=E5=90=84=E6=A8=A1=E5=9D=97?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/css/common/table-common.scss | 324 ++++++------------ .../views/charts2/digitalCertificate.scss | 20 +- .../views/charts2/domainNameResolution.scss | 62 ++-- .../views/charts2/entityDetailTabs.scss | 4 +- .../entityDetail/tabs/BehaviorPattern.vue | 2 +- .../entityDetail/tabs/DigitalCertificate.vue | 4 +- .../tabs/InformationAggregation.vue | 2 +- .../charts/entityDetail/tabs/OpenPort.vue | 21 +- .../entityDetail/tabs/PerformanceEvent.vue | 4 +- .../entityDetail/tabs/SecurityEvent.vue | 2 +- 10 files changed, 165 insertions(+), 280 deletions(-) diff --git a/src/assets/css/common/table-common.scss b/src/assets/css/common/table-common.scss index ac5abe3d..003990ae 100644 --- a/src/assets/css/common/table-common.scss +++ b/src/assets/css/common/table-common.scss @@ -2,10 +2,13 @@ .list-page { height: 100%; width: 100%; - background-color: #f6f6f6; + background-color: var(--el-bg-color-page); + $border-color: var(--el-color-info-light-7); + $border-radius: 2px; + $color-white: var(--el-color-white); .main-list { - background-color: white; + background-color: var(--el-fill-color-blank); position: relative; display: flex; flex-direction: column; @@ -13,16 +16,20 @@ width: 100%; z-index: 0; } + .main-container { padding: 0; height: 100%; - &>div { - background-color: white; + + & > div { + background-color: var(--el-fill-color-blank); } } + .main-list.main-list-with-sub { height: 50%; } + .main-modal { position: absolute; height: 100%; @@ -30,9 +37,10 @@ display: none; z-index: 100; } + .top-tools { display: flex; - align-items : center; + align-items: center; position: relative; justify-content: space-between; padding: 12px 20px; @@ -41,41 +49,48 @@ align-items: center; padding: 0 70px 0 15px; height: 44px; - background-color: white; - border: 1px solid #E6EAED; - + background-color: var(--el-fill-color-blank); + border: 1px solid var(--el-border-color-light); } + .top-tool-search { .top-tool-btn { border-left: none; } + .top-tool-btn--search { width: 28px !important; - height:28px !important; - padding:unset !important; + height: 28px !important; + padding: unset !important; display: flex; align-items: center; justify-content: center; + i { font-size: 14px; - color: $--text-color-2; - margin-right:unset !important; + color: var(--el-text-color-regular); + margin-right: unset !important; } } + .top-tool-btn--search:hover { border-left: none !important; } + .top-tool-btn--search:focus { border-left: none !important; } + .el-input--small .el-input__wrapper { height: 28px !important; border-radius: 2px 0 0 2px !important; } - .el-input--small{ + + .el-input--small { width: 214px !important; line-height: 27px; } + .el-input--small .el-input__inner { height: 28px; border-radius: 2px 0 0 2px; @@ -85,44 +100,52 @@ .top-tool-right { display: flex; } + .top-tool-left { display: flex; } + .top-tool-btn-group { display: flex; + .top-tool-btn:not(:last-of-type):not(:first-of-type) { border-left: none; border-radius: 0; } + .top-tool-btn:first-of-type:not(:last-of-type) { - border-radius: $--button-border-radius 0 0 $--button-border-radius; + border-radius: $border-radius 0 0 $border-radius; } + .top-tool-btn:last-of-type:not(:first-of-type) { - border-radius: 0 $--button-border-radius $--button-border-radius 0; + border-radius: 0 $border-radius $border-radius 0; border-left: none; } } + .top-tool-btn { cursor: pointer; height: 28px; width: 72px; - border: 1px solid $--border-color-primary; + border: 1px solid $border-color; outline: none; - border-radius: $--button-border-radius; - background-color: $--button-gray-background-color; + border-radius: 2px; + background-color: var(--el-fill-color-lighter); transition: background-color linear .1s; - font-size:12px; + font-size: 12px; font-weight: 500; + i { font-size: 14px; - color: #575757; - margin-right:4px; + color: var(--el-text-color-regular); + margin-right: 4px; } } .top-tool-btn:disabled { cursor: not-allowed; opacity: 0.66; + i { } @@ -131,75 +154,79 @@ .top-tool-btn.top-tool-btn--text { padding: 0 8px; width: unset; - color: #666; + color: var(--el-text-color-regular); } + .top-tool-btn:hover:not(.cn-btn-disabled) { - border: 1px solid $--border-color-primary; - background-color: $--button-gray-hover-background-color; + border: 1px solid $border-color; + background-color: var(--cn-bg-color-light); } + .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: #575757; - } - } - .top-tool-btn--delete.top-tool-btn:focus:not(.cn-btn-disabled) { - background-color: $--button-gray-hover-background-color; - border-color: #FFC4B9; + border: 1px solid $border-color; i { - color: #F0745A; + color: var(--el-text-color-regular); } } + .top-tool-btn--create { - background-color: #38ACD2 !important; - border-color: #2E88A6 !important; - color:#FFFFFF; + background-color: var(--el-color-business) !important; + border-color: #2E88A6 !important; // 涉及到表格样式，后续修改 + color: $color-white; + i { - color: #FFFFFF; + color: $color-white; } } + .top-tool-btn--create:hover { background-color: #57B8D9 !important; border-color: #2E88A6 !important; - color:#FFFFFF; + color: $color-white; + i { - color: #FFFFFF; + color: $color-white; } } + .top-tool-btn--create:focus { background-color: #31A5CD !important; border-color: #2E88A6 !important; - color:#FFFFFF !important; + color: $color-white !important; + i { - color: #FFFFFF !important; + color: $color-white !important; } } + .top-tool-btn--create:disabled { opacity: 0.66; - background-color: #38ACD2 !important; + background-color: var(--el-color-business) !important; border-color: #2E88A6 !important; - color:#FFFFFF; + color: $color-white; + i { - color: #FFFFFF; + color: $color-white; } } .btn-customize { color: #2E88A6; font-size: 12px; - .icon-gear{ + + .icon-gear { color: #2E88A6; - width:12px; - height:12px; - margin-right:2px; - font-size:12px; + width: 12px; + height: 12px; + margin-right: 2px; + font-size: 12px; } } .btn-customize:hover { - cursor:pointer; + cursor: pointer; } .top-tool-btn--dropdown { @@ -220,183 +247,17 @@ border-bottom: none; thead { - color: #333; + color: var(--el-text-color-primary); } + .el-switch { height: auto; } } } - /*.cn-table { - position: relative; - padding: 0 20px; - width: 100%; - flex: auto; - height: calc(100% - 58px); - - .el-table:not(.chart-table) { - position: absolute; - width: calc(100% - 40px); - // border: 1px solid $--right-box-border-color; - //border-bottom: none; - border-radius:4px; - - .caret-wrapper { - height: 23px; - .sort-caret.ascending { - top: 1px; - } - .sort-caret.descending { - bottom: 0; - } - } - .el-switch { - height: auto; - --el-switch-on-color: #699DC9; - --el-switch-off-color: #C0CEDB; - } - - .el-table-column--selection { - width: 55px !important; - } - - td { - padding: 3px 0 4px 0; - border-bottom: 1px solid $--right-box-border-color; - } - th { - border-color: $--right-box-border-color; - padding: 8px 0; - background: #FFF; - border-right:0px; - } - .el-table__header th:first-of-type { - border-left: none; - } - .gutter { - position: fixed; - right: 31px; - height: 49px; - border-bottom: 1px solid $--right-box-border-color; - background-color: white; - } - thead { - color: #333; - } - - .el-table__body tr:hover>td, .el-table__body tr.hover-row.current-row>td, - .el-table__body tr.hover-row.el-table__row--striped.current-row>td, - .el-table__body tr.hover-row.el-table__row--striped>td, .el-table__body tr.hover-row>td { - background-color: lighten($--color-primary, 95%) !important; - } - .table-operation-title { - text-align: center; - } - .table-operation-items { - display: flex; - justify-content: center; - .table-operation-item { - display: flex; - height: 22px; - border-radius: $--button-border-radius; - outline: none; - transition: background-color linear .1s; - } - .table-operation-item.table-operation-item--disable{ - border: 1px solid $--border-color-primary; - background-color: #DEDEDE; - opacity: 0.6; - outline: none; - i { - font-size: 14px; - color: #fff; - } - } - &>.table-operation-item { - justify-content: center; - align-items: center; - width: 30px; - margin-right: 10px; - border: none; - border-radius: $--button-border-radius; - background-color: $--button-primary-background-color; - opacity: 1; - cursor: pointer; - transition: all .2s; - i { - color: $--button-primary-color; - font-size: 12px; - } - } - &>.table-operation-item:hover { - opacity: .8; - } - .table-operation-item.table-operation-item--more { - justify-content: center; - align-items: center; - border: 1px solid $--border-color-primary; - width: 30px; - i { - color: #999; - font-size: 12px; - } - } - } - } - } - !* start--覆盖el-table边框、gutter等样式 *! - .el-table__body-wrapper, .el-table__fixed-body-wrapper { - box-shadow: 1px 0 $--right-box-border-color; - - .cell { - color: #333; - } - } - .el-table__body-wrapper .is-hidden, .el-table__header-wrapper .is-hidden { - visibility: hidden; - } - .cn-table { - .el-table--border td { - border-right: none !important; - } - !* 最后一列用box-shadow模拟边框 *! - !*.el-table:not(.no-operation):not(.chart-table).el-table--border .el-table__body-wrapper td:nth-last-child(2) { - box-shadow: 1px 0 $--right-box-border-color; - } - .el-table:not(.no-operation):not(.chart-table).el-table--border .el-table__header-wrapper th:nth-last-child(3) { - //border-right: none !important; - box-shadow: 1px 0 $--right-box-border-color; - } - .el-table__fixed-body-wrapper { - td:not(.is-hidden) { - border-left: 1px solid $--right-box-border-color; - } - } - .el-table__fixed-header-wrapper { - th:not(.is-hidden) { - border-left: 1px solid $--right-box-border-color; - } - th:last-of-type { - border-right: none !important; - } - }*! - .el-table--border:not(.chart-table)::after, .el-table--group:not(.chart-table)::after { - // width: 0; - } - .el-table--border { - border-bottom: 1px solid #E7EAED; - - .el-table__inner-wrapper { - height: 100% !important; - } - .el-table__inner-wrapper::before { - height: 0; - } - } - }*/ /* end--覆盖el-table边框、gutter等样式 */ - .cn-pagination{ + .cn-pagination { position: absolute; bottom: 8px; height: 48px; @@ -409,11 +270,13 @@ .el-scrollbar__view { height: 100%; } + // 令no data出现时table底部不出现滚动条 .el-table__empty-block { width: calc(100% - 8px) !important; } } + /*.operation-dropdown-text { display: inline-block; font-size: 13px; @@ -456,25 +319,36 @@ height: 100%; cursor: col-resize; } -.margin-r-10{ + +.margin-r-10 { margin-right: 10px; } -.margin-r-20{ + +.margin-r-20 { margin-right: 20px; } -.margin-l-10{ + +.margin-l-10 { margin-left: 10px; } -.margin-t-20{ + +.margin-t-20 { margin-top: 20px; } -.margin-r-3{ + +.margin-r-3 { margin-right: 3px; } + +.margin-r-30 { + margin-right: 30px; +} + .margin-l-6 { margin-left: 6px; } + .tooltip-column-name { color: #aeb0b9; - height:40px; + height: 40px; } diff --git a/src/assets/css/components/views/charts2/digitalCertificate.scss b/src/assets/css/components/views/charts2/digitalCertificate.scss index 41511a94..3ea77fd3 100644 --- a/src/assets/css/components/views/charts2/digitalCertificate.scss +++ b/src/assets/css/components/views/charts2/digitalCertificate.scss @@ -8,7 +8,7 @@ .digital-certificate-header__icon { width: 4px; height: 16px; - background: #38ACD2; + background: var(--el-color-business); border-radius: 1px; margin-right: 6px; } @@ -16,8 +16,8 @@ .digital-certificate-header-name { font-family: PingFangSC-Semibold; font-size: 14px; - color: #575757; - font-weight: 600; + color: var(--el-text-color-regular); + font-weight: bold; } } @@ -25,9 +25,9 @@ height: auto; min-height: 262px; padding: 20px; - background: rgba(113, 113, 113, 0.04); - border: 1px solid #E2E5ECFF; - border-radius: 4px; + background: var(--el-fill-color-lighter); + border: 1px solid var(--el-border-color-light); + border-radius: var(--el-border-radius-base); .digital-certificate-body-tags { display: flex; @@ -48,21 +48,19 @@ width: 176px; font-family: $font-family; font-size: 14px; - color: #717171; - font-weight: 400; + color: var(--el-text-color-regular); } .certificate-list-item__value, .certificate-list-item__value1 { width: calc(100% - 176px - 75px); font-family: $font-family; font-size: 14px; - color: #353636; - font-weight: 400; + color: var(--el-text-color-primary); } .certificate-list-item__value1 { padding-bottom: 2px; - border-bottom: 1px #353636 solid; + border-bottom: 1px var(--el-text-color-primary) solid; word-break: break-word; } } diff --git a/src/assets/css/components/views/charts2/domainNameResolution.scss b/src/assets/css/components/views/charts2/domainNameResolution.scss index f32b5432..6a4872e3 100644 --- a/src/assets/css/components/views/charts2/domainNameResolution.scss +++ b/src/assets/css/components/views/charts2/domainNameResolution.scss @@ -1,69 +1,75 @@ .type-data__column { - display:flex; + display: flex; flex-direction: column; - margin-left:5px; - margin-right:0px; - margin-top:0px; + margin-left: 5px; + margin-right: 0; + margin-top: 0; + .type-data { - display:flex; - flex-flow:row wrap; - margin-top:0px; + display: flex; + flex-flow: row wrap; + margin-top: 0; + .type-title { - display:flex; + display: flex; flex-direction: row; justify-content: center; align-items: center; - margin-bottom:15px; - margin-right:10px; + margin-bottom: 15px; + margin-right: 10px; font-family: PingFangSC-Semibold; font-size: 14px; - color: #575757; + color: var(--el-text-color-regular); line-height: 20px; font-weight: 600; + .title-mark { width: 4px; height: 16px; - margin-left:0px; + margin-left: 0; margin-right: 6px; - background: #38ACD2; + background: var(--el-color-business); border-radius: 1px; } + .type-title-word { margin-right: 6px; } } - .more{ - margin-bottom:20px; + .more { + margin-bottom: 20px; + .button { - color:#909399; + color: var(--el-color-info); cursor: pointer; } } + .type-content { - margin-bottom:0px; - display:flex; + margin-bottom: 0; + display: flex; flex-flow: row wrap; - width:100%; + width: 100%; + .data-item { display: flex; justify-content: center; align-items: center; - background: rgba(119,131,145,0.06); - border: 1px solid rgba(119,131,145,0.36); + background: var(--cn-bg-color-lighter); + border: 1px solid var(--el-color-info-light-5); border-radius: 2px; - height:28px; - padding:8px 15px; - margin-right:10px; - margin-bottom:15px; + height: 28px; + padding: 8px 15px; + margin-right: 10px; + margin-bottom: 15px; font-size: 12px; - color: #353636; - font-weight: 400; + color: var(--el-text-color-primary); } } .type-error-content { - width:100%; + width: 100%; height: 40px; margin-bottom: 12px; position: relative; diff --git a/src/assets/css/components/views/charts2/entityDetailTabs.scss b/src/assets/css/components/views/charts2/entityDetailTabs.scss index db874797..14e9dd50 100644 --- a/src/assets/css/components/views/charts2/entityDetailTabs.scss +++ b/src/assets/css/components/views/charts2/entityDetailTabs.scss @@ -144,7 +144,7 @@ position: absolute; height: 0; width: 195px; - border-bottom: 1px dashed var(--el-border-color-light); + border-bottom: 1px dashed #d3d3d3; top: 319px; left: 575px; } @@ -153,7 +153,7 @@ position: absolute; height: 0; width: 195px; - border-bottom: 1px dashed var(--el-border-color-light); + border-bottom: 1px dashed #d3d3d3; top: 319px; left: 830px; } diff --git a/src/views/charts2/charts/entityDetail/tabs/BehaviorPattern.vue b/src/views/charts2/charts/entityDetail/tabs/BehaviorPattern.vue index b86aa43a..9831ab7e 100644 --- a/src/views/charts2/charts/entityDetail/tabs/BehaviorPattern.vue +++ b/src/views/charts2/charts/entityDetail/tabs/BehaviorPattern.vue @@ -1,5 +1,5 @@