CN-1612 feat: 部分css重构内容：detection检测列表与下拉详情
This commit is contained in:
刘洪洪
@@ -348,6 +348,10 @@
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
.margin-b-10 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.tooltip-column-name {
|
||||
color: #aeb0b9;
|
||||
height: 40px;
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
$color-primary: var(--el-color-primary);
|
||||
.advanced-search {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
@@ -7,7 +8,7 @@
|
||||
|
||||
&.entity-explorer-home {
|
||||
margin-right: 1px;
|
||||
color: #3976CB;
|
||||
color: $color-primary;
|
||||
|
||||
&.search__suffixes--text-mode, &.search__suffixes--tag-mode {
|
||||
.search__suffix:last-of-type {
|
||||
@@ -17,7 +18,7 @@
|
||||
background-color: transparent;
|
||||
|
||||
i {
|
||||
color: #3976CB;
|
||||
color: $color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -37,7 +38,7 @@
|
||||
border-radius: 0 2px 2px 0;
|
||||
|
||||
.cn-icon-search-advance, .cn-icon-search-normal, .cn-icon-filter {
|
||||
color: #A6AAAE;
|
||||
color: var(--el-color-info);
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
@@ -49,18 +50,18 @@
|
||||
width: 41px;
|
||||
height: 38px;
|
||||
line-height: 39px;
|
||||
background: #38ACD2;
|
||||
background: var(--el-color-business);
|
||||
|
||||
i {
|
||||
font-size: 22px;
|
||||
color: #fff;
|
||||
color: var(--el-color-white);
|
||||
}
|
||||
}
|
||||
}
|
||||
.search__suffix-close {
|
||||
i {
|
||||
font-size: 17px;
|
||||
color: #C4C4C4;
|
||||
color: var(--el-text-color-regular);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
@@ -70,13 +71,13 @@
|
||||
}
|
||||
|
||||
&.search__suffixes--tag-mode__block {
|
||||
background: #fff;
|
||||
background: var(--el-bg-color);
|
||||
}
|
||||
}
|
||||
.HintInfo {
|
||||
height: 280px;
|
||||
overflow: auto;
|
||||
background: #fff;
|
||||
background: var(--el-bg-color);
|
||||
|
||||
ul {
|
||||
min-width: 300px;
|
||||
@@ -88,13 +89,14 @@
|
||||
.relative-item {
|
||||
text-indent: 1em;
|
||||
font-size: 14px !important;
|
||||
color: #575757;
|
||||
color: var(--el-text-color-regular);
|
||||
height: 24px;
|
||||
line-height: 24px !important;
|
||||
|
||||
&:hover {
|
||||
background-color: #f0f5fa;
|
||||
color: #046ECA;
|
||||
//background-color: #f0f5fa;
|
||||
background-color: var(--el-color-primary-light-9);
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
.hint-clear {
|
||||
@@ -104,7 +106,7 @@
|
||||
}
|
||||
.detections {
|
||||
.tag-search, .CodeMirror {
|
||||
border: 1px solid #E2E5EC;
|
||||
border: 1px solid var(--el-border-color-light);
|
||||
}
|
||||
}
|
||||
.tag-search {
|
||||
@@ -115,8 +117,8 @@
|
||||
border-radius: 2px;
|
||||
padding-left: 10px;
|
||||
padding-right: 80px;
|
||||
background-color: $--select-bg-color-1;
|
||||
border: 1px solid #DEDEDE;
|
||||
background-color: var(--el-bg-color);
|
||||
border: 1px solid var(--el-color-info-light-7);
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
@@ -134,17 +136,17 @@
|
||||
height: 22px;
|
||||
padding: 0 4px;
|
||||
font-size: 12px;
|
||||
color: #333;
|
||||
background-color: #F5F6F7;
|
||||
border: 1px solid #D7D7D7;
|
||||
color: var(--el-text-color-primary);
|
||||
background-color: var(--el-fill-color-light);
|
||||
border: 1px solid var(--el-border-color-dark);
|
||||
border-radius: 1px;
|
||||
cursor: pointer;
|
||||
transition: all linear .1s;
|
||||
margin-right: 30px;
|
||||
|
||||
&:hover {
|
||||
background-color: white;
|
||||
color: #111;
|
||||
background-color: var(--el-bg-color);
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -153,7 +155,7 @@
|
||||
height: 22px;
|
||||
padding: 0 6px;
|
||||
font-size: 12px;
|
||||
background-color: #F5F6F7;
|
||||
background-color: var(--el-fill-color-light);
|
||||
|
||||
&>div:not(:last-of-type) {
|
||||
margin-right: 6px;
|
||||
@@ -163,20 +165,20 @@
|
||||
.condition__delete {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #bcbdbd;
|
||||
color: var(--el-text-color-disabled);
|
||||
font-size: 16px;
|
||||
margin-right: 6px;
|
||||
cursor: pointer;
|
||||
transition: all linear .1s;
|
||||
|
||||
&:hover {
|
||||
color: #999;
|
||||
color: var(--el-color-info);
|
||||
}
|
||||
}
|
||||
.condition__column, .condition__operator, .condition__value {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #333;
|
||||
color: var(--el-text-color-primary);
|
||||
font-weight: bold;
|
||||
cursor: text;
|
||||
.el-select {
|
||||
@@ -191,11 +193,11 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
.el-select__wrapper.is-focused {
|
||||
box-shadow: 0 0 0 1px $--color-primary inset !important;
|
||||
box-shadow: 0 0 0 1px var(--el-color-business) inset !important;
|
||||
}
|
||||
}
|
||||
.condition__operator {
|
||||
color: #3976CB;
|
||||
color: $color-primary;
|
||||
}
|
||||
.condition__operation-select {
|
||||
display: flex;
|
||||
@@ -203,7 +205,7 @@
|
||||
|
||||
.condition__operation {
|
||||
margin: 0 5px;
|
||||
color: #3976CB;
|
||||
color: $color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -211,7 +213,7 @@
|
||||
.connection__value {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #3976CB;
|
||||
color: $color-primary;
|
||||
font-weight: bold;
|
||||
cursor: text;
|
||||
}
|
||||
@@ -228,8 +230,9 @@
|
||||
padding: 8px 10px !important;
|
||||
}
|
||||
.el-input__wrapper.is-focus {
|
||||
box-shadow: 0 0 0 1px $--color-primary inset !important;
|
||||
box-shadow: 0 0 0 1px var(--el-color-business) inset !important;
|
||||
}
|
||||
.el-select-dropdown__item.is-selected {
|
||||
color: #2c72c6 !important;
|
||||
//color: #2c72c6 !important;
|
||||
color: var(--el-color-primary-light-3) !important;
|
||||
}
|
||||
|
||||
@@ -1,71 +1,88 @@
|
||||
$text-color-primary: var(--el-text-color-primary);
|
||||
.ship--show.ship {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.chart-drawing-ship__width {
|
||||
width: 1542px !important;
|
||||
}
|
||||
|
||||
.ship {
|
||||
width: 320px;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid rgba(119,131,145,0.60);
|
||||
box-shadow: 0 6px 16px 0 rgba(0,0,0,0.08);
|
||||
background: var(--el-fill-color-blank);
|
||||
border: 1px solid rgba(119, 131, 145, 0.60);
|
||||
box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08);
|
||||
border-radius: 3px;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
visibility: hidden;
|
||||
flex-direction: column;
|
||||
|
||||
.ship-title {
|
||||
display: flex;
|
||||
height: 49px;
|
||||
border-bottom: 1px solid #E6EAED;
|
||||
border-bottom: 1px solid var(--el-border-color-light);
|
||||
padding-left: 10px;
|
||||
|
||||
.ship-title-name {
|
||||
line-height: 49px;
|
||||
font-size: 16px;
|
||||
color: #333333;
|
||||
color: $text-color-primary;
|
||||
letter-spacing: 0;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.ship-title-symbol {
|
||||
padding-right: 5px;
|
||||
line-height: 65px;
|
||||
|
||||
img {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ship-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 7px;
|
||||
|
||||
.ship-body-basicInfo {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.ship-body-list.ship-body-child {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.ship-body-list-child {
|
||||
position: relative;
|
||||
|
||||
.ship-body-list-child-left {
|
||||
margin: 3px 0 3px 10px;
|
||||
display: flex;
|
||||
font-size: 12px;
|
||||
color: #999999;
|
||||
color: var(--el-color-info);
|
||||
font-weight: 400;
|
||||
|
||||
.ship-body-list-child-title {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.ship-body-list-child-trip {
|
||||
width: 160px;
|
||||
}
|
||||
|
||||
.ship-body-list-child-value {
|
||||
display: flex;
|
||||
|
||||
.ship-body-list-child-msg {
|
||||
margin-right: 7px;
|
||||
}
|
||||
|
||||
.ship-body-list-child-loading {
|
||||
.ship-body-list-child-charts {
|
||||
width: 38px;
|
||||
@@ -76,78 +93,93 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ship-body-list {
|
||||
margin:0 0 5px 20px;
|
||||
margin: 0 0 5px 20px;
|
||||
text-align: left;
|
||||
display: flex;
|
||||
width: calc(100% - 20px);
|
||||
position: relative;
|
||||
|
||||
.ship-body-list-title {
|
||||
width: 130px;
|
||||
font-size: 14px;
|
||||
color: #666666;
|
||||
color: var(--el-text-color-regular);
|
||||
letter-spacing: 0;
|
||||
font-weight: 400;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.security.ship-body-list-security-length {
|
||||
width: 140px;
|
||||
}
|
||||
|
||||
.ship-body-list-value {
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
color: $text-color-primary;
|
||||
letter-spacing: 0;
|
||||
font-weight: 400;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.ship-body-list-value.security {
|
||||
font-size: 12px;
|
||||
color: #FFFFFF;
|
||||
color: var(--el-fill-color-blank);
|
||||
font-weight: 400;
|
||||
border-radius: 2px;
|
||||
margin: 0 3px;
|
||||
width: 200px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.ship-severity {
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
.ship-body-list-security-alert {
|
||||
padding: 1px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ship-body-list-security-length {
|
||||
margin: 0 10px 0 3px;
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
color: $text-color-primary;
|
||||
letter-spacing: 0;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.no-recent-alerts {
|
||||
font-size: 12px;
|
||||
color: #333333;
|
||||
color: $text-color-primary;
|
||||
font-weight: 400;
|
||||
line-height: 19px;
|
||||
|
||||
i {
|
||||
color: #23BF9A;
|
||||
color: var(--el-color-success);
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.ship-body-list-security-alert.critical {
|
||||
background-color: #D84C4C;
|
||||
background-color: var(--cn-color-critical);
|
||||
}
|
||||
|
||||
.ship-body-list-security-alert.high {
|
||||
background-color: #FF9A79;
|
||||
background-color: var(--cn-color-high);
|
||||
}
|
||||
|
||||
.ship-body-list-security-alert.info {
|
||||
background-color: #D1BD50;
|
||||
background-color: var(--cn-color-info);
|
||||
}
|
||||
|
||||
.ship-body-list-security-alert.medium {
|
||||
background-color: #FFB65A;
|
||||
background-color: var(--cn-color-medium);
|
||||
}
|
||||
|
||||
.ship-body-list-security-alert.low {
|
||||
background-color: #FFD82D;
|
||||
background-color: var(--cn-color-low);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
$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;
|
||||
@@ -5,18 +9,18 @@
|
||||
margin-right: 12px;
|
||||
overflow: auto;
|
||||
z-index: 1;
|
||||
border: 1px solid rgba(226, 229, 236, 1) !important;
|
||||
border-radius: 4px !important;
|
||||
border: 1px solid $color-light !important;
|
||||
border-radius: var(--el-border-radius-base) !important;
|
||||
|
||||
.filter-case__header {
|
||||
padding-left: 8px;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
color: #666;
|
||||
color: var(--el-text-color-regular);
|
||||
font-size: 14px;
|
||||
background: #F7F7F7;
|
||||
box-shadow: 0 1px 0 0 rgba(226,229,236,1);
|
||||
border-radius: 4px 4px 0 0;
|
||||
background: var(--cn-bg-color-lighter);
|
||||
box-shadow: 0 1px 0 0 $color-light;
|
||||
border-radius: var(--el-border-radius-base) var(--el-border-radius-base) 0 0;
|
||||
}
|
||||
|
||||
.filter__header {
|
||||
@@ -24,7 +28,7 @@
|
||||
line-height: 46px;
|
||||
margin: 0 20px;
|
||||
font-size: 14px;
|
||||
color: #353636;
|
||||
color: $color-primary;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@@ -47,14 +51,14 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
color: #353636;
|
||||
color: $color-primary;
|
||||
font-weight: 400;
|
||||
|
||||
.filter__body-item-left-index {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
text-align: center;
|
||||
background: #EFF2F5;
|
||||
background: var(--el-bg-color-page);
|
||||
border-radius: 2px;
|
||||
margin-right: 6px;
|
||||
font-family: NotoSansHans-Black;
|
||||
@@ -70,7 +74,7 @@
|
||||
max-width: 180px;
|
||||
font-family: NotoSansSChineseRegular;
|
||||
font-size: 14px;
|
||||
color: #353636;
|
||||
color: $color-primary;
|
||||
font-weight: 400;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
@@ -82,7 +86,7 @@
|
||||
flex-shrink: 0;
|
||||
font-family: NotoSansSChineseRegular;
|
||||
font-size: 12px;
|
||||
color: #717171;
|
||||
color: var(--el-text-color-regular);
|
||||
font-weight: 400;
|
||||
margin-right: 10px;
|
||||
}
|
||||
@@ -94,7 +98,7 @@
|
||||
width: 18px;
|
||||
height: 12px;
|
||||
margin-right: 6px;
|
||||
border: 1px solid #E8E8E8;
|
||||
border: 1px solid var(--el-color-info-light-8);
|
||||
}
|
||||
|
||||
.filter-show-more, .filter-no-show-more {
|
||||
@@ -102,10 +106,11 @@
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
margin-left: 20px;
|
||||
color: #046ECA;
|
||||
color: var(--el-color-primary);
|
||||
user-select: none; // 禁止文本选中
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.filter-no-show-more {
|
||||
cursor: not-allowed;
|
||||
color: var(--el-text-color-disabled);
|
||||
@@ -116,32 +121,35 @@
|
||||
margin-left: 20px;
|
||||
margin-top: 6px;
|
||||
height: 1px;
|
||||
background: #EFF2F5;
|
||||
//background: #000;
|
||||
background: var(--el-bg-color-page);
|
||||
}
|
||||
|
||||
.new-detection-filter-title {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
background: #F7F7F7;
|
||||
background: var(--cn-bg-color-lighter);
|
||||
padding: 0 20px;
|
||||
box-shadow: 0 1px 0 0 rgba(226, 229, 236, 1);
|
||||
border-radius: 4px 4px 0 0;
|
||||
box-shadow: 0 1px 0 0 $color-light;
|
||||
border-radius: var(--el-border-radius-base) var(--el-border-radius-base) 0 0;
|
||||
}
|
||||
|
||||
.new-detection-filter-content {
|
||||
padding: 20px;
|
||||
|
||||
.el-checkbox {
|
||||
display: inline-block !important;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
.new-filter-content-title {
|
||||
font-family: NotoSansHans-Medium;
|
||||
font-size: 14px;
|
||||
line-height: 14px;
|
||||
margin-bottom: 10px;
|
||||
color: #353636;
|
||||
color: $color-primary;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.new-filter-content-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -150,7 +158,7 @@
|
||||
line-height: 16px;
|
||||
margin-bottom: 13.6px;
|
||||
font-size: 14px;
|
||||
color: #353636;
|
||||
color: $color-primary;
|
||||
font-weight: 400;
|
||||
display: flex !important;
|
||||
|
||||
@@ -162,34 +170,38 @@
|
||||
}
|
||||
|
||||
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
|
||||
border-color: #38ACD2;
|
||||
background: #38ACD2;
|
||||
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: #FFFFFF;
|
||||
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: #38ACD2;
|
||||
background: #38ACD2;
|
||||
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: #38ACD2;
|
||||
border-color: var(--el-bg-color-page);
|
||||
}
|
||||
}
|
||||
|
||||
.el-checkbox__label {
|
||||
font-size: 14px;
|
||||
color: #353636;
|
||||
color: $color-primary;
|
||||
font-weight: 400;
|
||||
padding-left: 10px !important;
|
||||
}
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
$bg-color-page: var(--el-bg-color-page);
|
||||
|
||||
.cn-detection--list {
|
||||
display: flex;
|
||||
|
||||
@@ -8,7 +10,7 @@
|
||||
align-items: flex-start;
|
||||
margin-bottom: 1px;
|
||||
//padding-top: 18px;
|
||||
background-color: #EFF2F5;
|
||||
background-color: $bg-color-page;
|
||||
|
||||
.cn-detection__collapse-block {
|
||||
min-height: 66px;
|
||||
@@ -21,7 +23,7 @@
|
||||
|
||||
span {
|
||||
transform: rotate(0);
|
||||
transition: all linear .2s;
|
||||
transition: all linear var(--el-transition-duration-fast);
|
||||
padding-top: 0;
|
||||
|
||||
&.reg-down {
|
||||
@@ -35,7 +37,7 @@
|
||||
}
|
||||
|
||||
.cn-icon-arrow-right {
|
||||
color: #ADBCCA;
|
||||
color: var(--el-text-color-placeholder);
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
@@ -46,7 +48,7 @@
|
||||
flex-wrap: wrap;
|
||||
padding: 9px 0;
|
||||
margin-bottom: 1px;
|
||||
background-color: white;
|
||||
background-color: var(--el-fill-color-blank);
|
||||
|
||||
.cn-detection__icon {
|
||||
margin-left: 13px;
|
||||
@@ -75,17 +77,18 @@
|
||||
flex-wrap: nowrap;
|
||||
font-size: 16px;
|
||||
padding-bottom: 3px;
|
||||
color: #333333;
|
||||
color: var(--el-text-color-primary);
|
||||
align-items: center;
|
||||
|
||||
i {
|
||||
color: #7b8fa2;
|
||||
//color: #7b8fa2;
|
||||
color: var(--el-color-info);
|
||||
margin-right: 5px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.line {
|
||||
color: #da5656;
|
||||
color: var(--el-color-error);
|
||||
margin-left: 12px;
|
||||
font-size: xx-small;
|
||||
font-weight: bold;
|
||||
@@ -95,17 +98,17 @@
|
||||
.circle {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border: 2px solid #da5656;
|
||||
border: 2px solid var(--el-color-error);
|
||||
border-radius: 10px;
|
||||
margin-top: 1px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.domain {
|
||||
background: #EFF2F5;
|
||||
background: $bg-color-page;
|
||||
border-radius: 2px;
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
color: var(--el-text-color-primary);
|
||||
letter-spacing: 0;
|
||||
line-height: 14px;
|
||||
margin-left: 5px;
|
||||
@@ -113,6 +116,7 @@
|
||||
padding: 0 2px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.detection-event-severity-color-block {
|
||||
width: 5px;
|
||||
height: 20px;
|
||||
@@ -120,16 +124,17 @@
|
||||
margin-left: -16px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.detection-event-severity-block {
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
font-size: 12px;
|
||||
color: #046EC9;
|
||||
color: var(--el-color-primary);
|
||||
font-weight: 500;
|
||||
padding: 0 10px;
|
||||
background: rgba(56,172,210,0.10);
|
||||
border: 1px solid #ADC7DB;
|
||||
box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
|
||||
background: rgba(56, 172, 210, 0.10);
|
||||
border: 1px solid var(--el-color-primary-light-7);
|
||||
box-shadow: 0 2px 4px 0 rgba(51, 51, 51, 0.02);
|
||||
border-radius: 3px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
@@ -156,7 +161,7 @@
|
||||
|
||||
i {
|
||||
padding-right: 5px;
|
||||
color: #8FA1BE;
|
||||
color: var(--el-color-info);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@@ -165,16 +170,17 @@
|
||||
}
|
||||
|
||||
span:first-of-type {
|
||||
color: #999;
|
||||
color: var(--el-color-info);
|
||||
}
|
||||
|
||||
span:last-of-type {
|
||||
color: #666;
|
||||
color: var(--el-text-color-regular);
|
||||
}
|
||||
}
|
||||
|
||||
.basic-info__item1 {
|
||||
span: {
|
||||
color: #666;
|
||||
color: var(--el-text-color-regular);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -183,7 +189,7 @@
|
||||
flex-shrink: 0;
|
||||
padding: 0 30px;
|
||||
font-size: 12px;
|
||||
color: #3976CB;
|
||||
color: var(--el-color-primary);
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
@@ -198,32 +204,37 @@
|
||||
padding: 0 10px;
|
||||
|
||||
.el-divider {
|
||||
background-color: #EFF2F5;
|
||||
background-color: $bg-color-page;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.security.cn-detection--list,.service.cn-detection--list {
|
||||
.security.cn-detection--list, .service.cn-detection--list {
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
.cn-detection__case {
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #E7EAED;
|
||||
background: var(--el-fill-color-blank);
|
||||
border: 1px solid var(--el-border-color-light);
|
||||
border-radius: 2px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.cn-detection__case {
|
||||
padding: 10px 0;
|
||||
flex: unset;
|
||||
}
|
||||
|
||||
.cn-detection__header {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.cn-detection-table {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.cn-detection__case-severity {
|
||||
display: flex;
|
||||
width: 38px;
|
||||
@@ -233,42 +244,52 @@
|
||||
margin-right: 20px;
|
||||
margin-left: 29px;
|
||||
line-height: 34px;
|
||||
|
||||
i {
|
||||
font-size: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-pagination__jump {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
.cn-detection__footer {
|
||||
background: #FFFFFF;
|
||||
background: var(--el-fill-color-blank);
|
||||
position: relative;
|
||||
box-shadow: 0 0 4px 0 rgba(0,0,0,0.06);
|
||||
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.06);
|
||||
|
||||
.el-pagination__total {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.domain.cn-detection-domain {
|
||||
height: 20px;
|
||||
line-height: 20px !important;
|
||||
padding: 0 4px;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.critical {
|
||||
color: #D84C4C !important;
|
||||
color: var(--cn-color-critical) !important;
|
||||
}
|
||||
|
||||
.high {
|
||||
color: #FF9A79 !important;
|
||||
color: var(--cn-color-high) !important;
|
||||
}
|
||||
|
||||
.info {
|
||||
color: #D1BD50 !important;
|
||||
color: var(--cn-color-info) !important;
|
||||
}
|
||||
|
||||
.medium {
|
||||
color: #FFB65A !important;
|
||||
color: var(--cn-color-medium) !important;
|
||||
}
|
||||
|
||||
.low {
|
||||
color: #FFD82D !important;
|
||||
color: var(--cn-color-low) !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
$color-primary: var(--el-color-primary);
|
||||
$color-primary1: #1890FF;
|
||||
$color-regular: var(--el-text-color-regular);
|
||||
//$color-primary: var(--el-color-primary);
|
||||
.detection-detail-overview {
|
||||
display: flex;
|
||||
position: relative;
|
||||
@@ -23,7 +27,7 @@
|
||||
|
||||
.overview__title {
|
||||
padding: 10px 0;
|
||||
color: #333;
|
||||
color: var(--el-text-color-primary);
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
|
||||
@@ -44,7 +48,7 @@
|
||||
.row__label {
|
||||
padding-right: 20px;
|
||||
min-width: 100px;
|
||||
color: #6B717B;
|
||||
color: $color-regular;
|
||||
line-height: 14px;
|
||||
word-break: normal;
|
||||
}
|
||||
@@ -57,15 +61,14 @@
|
||||
.row__content--metric {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
color: #666666;
|
||||
color: $color-regular;
|
||||
font-size:14px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.row__content, .row__content1 {
|
||||
display: flex;
|
||||
//color: #3976CB;
|
||||
color: #046ECA;
|
||||
color: $color-primary;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
align-items: center;
|
||||
@@ -75,28 +78,28 @@
|
||||
&.row__content--link {
|
||||
font-style: italic;
|
||||
text-decoration: underline;
|
||||
color: #1890FF;
|
||||
color: $color-primary1;
|
||||
cursor: pointer;
|
||||
}
|
||||
.row__content--link{
|
||||
font-style: italic;
|
||||
text-decoration: underline;
|
||||
color: #1890FF;
|
||||
color: $color-primary1;
|
||||
cursor: pointer;
|
||||
}
|
||||
span{
|
||||
font-style: italic;
|
||||
color: #046ECA;
|
||||
color: $color-primary;
|
||||
}
|
||||
.row__content--span {
|
||||
font-style: italic;
|
||||
color: #1890FF;
|
||||
color: $color-primary1;
|
||||
}
|
||||
|
||||
.row__content__icon {
|
||||
font-size: 14px;
|
||||
margin-right: 5px;
|
||||
color: #1890FF;
|
||||
color: $color-primary1;
|
||||
}
|
||||
|
||||
.row__content__svg {
|
||||
@@ -115,7 +118,7 @@
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 17px;
|
||||
background-color: #F9F9F9;
|
||||
background-color: var(--el-fill-color-lighter);
|
||||
|
||||
.row-timeline {
|
||||
flex: 0 0 110px;
|
||||
@@ -128,7 +131,7 @@
|
||||
align-items: center;
|
||||
flex-basis: 16px;
|
||||
font-size: 12px;
|
||||
color: #666666;
|
||||
color: $color-regular;
|
||||
}
|
||||
.row-timeline__line {
|
||||
display: flex;
|
||||
@@ -136,7 +139,7 @@
|
||||
align-items: center;
|
||||
height: 1px;
|
||||
margin: 5px 0;
|
||||
background-color: #CBD0D5;
|
||||
background-color: var(--el-border-color-darker);
|
||||
overflow: visible;
|
||||
|
||||
.line-point-larger {
|
||||
@@ -146,18 +149,19 @@
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
border-radius: 50%;
|
||||
background-color: #F9F9F9;
|
||||
border: 1px solid #666;
|
||||
background-color: var(--el-fill-color-lighter);
|
||||
border: 1px solid $color-regular;
|
||||
|
||||
.line-point {
|
||||
background-color: #666;
|
||||
background-color: $color-regular;
|
||||
}
|
||||
}
|
||||
.line-point {
|
||||
height: 6px;
|
||||
width: 6px;
|
||||
border-radius: 50%;
|
||||
background-color: #A0B5CA;
|
||||
//background-color: #A0B5CA;
|
||||
background-color: var(--el-text-color-placeholder);
|
||||
}
|
||||
}
|
||||
.row-timeline__card {
|
||||
@@ -167,7 +171,7 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 10px;
|
||||
background-color: #EFF2F5;
|
||||
background-color: var(--el-bg-color-page);
|
||||
border-radius: 2px;
|
||||
|
||||
.timeline__severity {
|
||||
@@ -176,19 +180,19 @@
|
||||
margin-bottom: 10px;
|
||||
|
||||
&.timeline__severity--critical i {
|
||||
color: #D84C4C;
|
||||
color: var(--cn-color-critical);
|
||||
}
|
||||
&.timeline__severity--high i {
|
||||
color: #FE845D;
|
||||
color: var(--cn-color-high);
|
||||
}
|
||||
&.timeline__severity--medium i {
|
||||
color: #FEB65A;
|
||||
color: var(--cn-color-medium);
|
||||
}
|
||||
&.timeline__severity--low i {
|
||||
color: #F6C738;
|
||||
color: var(--cn-color-low);
|
||||
}
|
||||
&.timeline__severity--info i {
|
||||
color: #D1BD50;
|
||||
color: var(--cn-color-info);
|
||||
}
|
||||
i {
|
||||
font-size: 16px;
|
||||
@@ -197,20 +201,20 @@
|
||||
padding-left: 5px;
|
||||
font-size: 14px;
|
||||
//color: #3976CB;
|
||||
color: #046ECA;
|
||||
color: $color-primary;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
}
|
||||
.timeline__security-type {
|
||||
font-size: 12px;
|
||||
color: #046ECA;
|
||||
color: $color-primary;
|
||||
margin-bottom: 10px;
|
||||
font-weight: 500;
|
||||
height: 36px;
|
||||
}
|
||||
.timeline__start-time {
|
||||
font-size: 12px;
|
||||
color: #666666;
|
||||
color: $color-regular;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -223,11 +227,11 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 5px;
|
||||
color: #666;
|
||||
color: $color-regular;
|
||||
font-size: 12px;
|
||||
|
||||
&.detection-ip__current {
|
||||
color: #D84C4C;
|
||||
color: var(--cn-color-critical);
|
||||
}
|
||||
i {
|
||||
font-size: 12px;
|
||||
@@ -247,13 +251,13 @@
|
||||
height: 16px;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: #fff;
|
||||
color: var(--el-color-white);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.performance-event-remark {
|
||||
font-family: NotoSansSChineseRegular;
|
||||
font-size: 12px;
|
||||
color: #353636;
|
||||
color: var(--el-text-color-primary);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
@@ -4,18 +4,21 @@
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.detections {
|
||||
.entity__pagination{
|
||||
.entity__pagination {
|
||||
bottom: 9px;
|
||||
height: 40px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.detections__container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.detection__list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -26,19 +29,19 @@
|
||||
flex: 0 0 192px;
|
||||
margin-bottom: 10px;
|
||||
width: 100%;
|
||||
background-color: white;
|
||||
background-color: var(--el-bg-color);
|
||||
|
||||
.chart-header {
|
||||
display: flex;
|
||||
justify-content:space-between;
|
||||
align-items:center;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px 20px 10px 0;
|
||||
flex: 0 0 40px;
|
||||
|
||||
font-size: 14px;
|
||||
color: $--color-text-primary;
|
||||
transition: all 0.2s;
|
||||
border-bottom: 1px solid #E7EAED;
|
||||
color: var(--el-text-color-primary);
|
||||
transition: all var(--el-transition-duration-fast);
|
||||
border-bottom: 1px solid var(--el-border-color-light);
|
||||
|
||||
.chart-header__title {
|
||||
max-width: calc(100% - 100px);
|
||||
@@ -51,26 +54,30 @@
|
||||
.chart-content {
|
||||
height: 147px;
|
||||
}
|
||||
|
||||
.statistics__severity {
|
||||
width: 33%;
|
||||
margin-left:15px;
|
||||
margin-right:15px;
|
||||
margin-left: 15px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.statistics__category {
|
||||
width: 34%;
|
||||
margin-left:15px;
|
||||
margin-right:15px;
|
||||
margin-left: 15px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.statistics__active-attack {
|
||||
width: 33%;
|
||||
margin-left:15px;
|
||||
margin-right:15px;
|
||||
margin-left: 15px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.filter__more {
|
||||
padding-top: 5px;
|
||||
font-size: 14px;
|
||||
color: $--color-primary;
|
||||
color: var(--el-color-business);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@@ -44,7 +44,7 @@ $color-regular: var(--el-text-color-regular);
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background-color: transparent !important;
|
||||
transition: linear all .2s;
|
||||
transition: linear all var(--el-transition-duration-fast);
|
||||
|
||||
.graph-node__text {
|
||||
width: 120px;
|
||||
|
||||
@@ -135,26 +135,26 @@
|
||||
padding: 1px 4px;
|
||||
margin-right: 6px;
|
||||
border-radius: 2px;
|
||||
color: white;
|
||||
color: var(--el-color-white);
|
||||
|
||||
&.alert-level-tag--high.critical {
|
||||
background-color: #D84C4C;
|
||||
background-color: var(--cn-color-critical);
|
||||
}
|
||||
|
||||
&.alert-level-tag--high.high {
|
||||
background-color: #FF9A79;
|
||||
background-color: var(--cn-color-high);
|
||||
}
|
||||
|
||||
&.alert-level-tag--high.info {
|
||||
background-color: #D1BD50;
|
||||
background-color: var(--cn-color-info);
|
||||
}
|
||||
|
||||
&.alert-level-tag--high.medium {
|
||||
background-color: #FFB65A;
|
||||
background-color: var(--cn-color-medium);
|
||||
}
|
||||
|
||||
&.alert-level-tag--high.low {
|
||||
background-color: #FFD82D;
|
||||
background-color: var(--cn-color-low);
|
||||
}
|
||||
|
||||
&.alert-level-tag--middle {
|
||||
@@ -485,7 +485,7 @@
|
||||
|
||||
i {
|
||||
//color: #7b8fa2; // todo 待确定
|
||||
color: var(--el-text-color-primary);
|
||||
color: var(--el-color-info);
|
||||
margin-right: 5px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
@@ -52,6 +52,11 @@
|
||||
@include var.set-css-var-value(('color', 'business'), map.get(css-var.$colors, 'business', 'base'));
|
||||
--cn-bg-color-light: #EBF1F4; // 一个用得比较多的背景色
|
||||
--cn-bg-color-lighter: #F7F7F7; // 一个用得比较多的背景色
|
||||
--cn-color-critical: #D84C4C; // critical 严重等级分布
|
||||
--cn-color-high: #FF9A79; // high
|
||||
--cn-color-info: #D1BD50; // info
|
||||
--cn-color-medium: #FFB65A; // medium
|
||||
--cn-color-low: #FFD82D; // low
|
||||
}
|
||||
|
||||
@font-face {
|
||||
|
||||
@@ -7,8 +7,6 @@
|
||||
<div class="filter__header">{{filter.title}}</div>
|
||||
|
||||
<div class="filter__body" style="position: relative">
|
||||
<!-- <loading :loading="false" style="top: -5px;"></loading>-->
|
||||
|
||||
<div class="filter__body-item"
|
||||
v-for="(data, i) in filter.data.slice(0, filter.showIndex)"
|
||||
:key="i"
|
||||
|
||||
@@ -6,8 +6,7 @@
|
||||
<div class="no-data" v-if="myListData.length===0">{{ $t('npm.noData') }}</div>
|
||||
<div v-if="!isCollapse" @click="collapse" class="cn-detection__shadow new-cn-detection__shadow"></div>
|
||||
<detection-row
|
||||
style="margin-bottom: 10px"
|
||||
class="detection-border"
|
||||
class="detection-border margin-b-10"
|
||||
v-for="(data, index) in myListData"
|
||||
:detection="data"
|
||||
:page-type="pageType"
|
||||
|
||||
@@ -169,7 +169,7 @@ export default {
|
||||
let color = '#8FA1BE'
|
||||
if (detection.startTime && detection.endTime) {
|
||||
if (getMillisecond(detection.endTime) - getMillisecond(detection.startTime) < 5 * 60 * 1000) {
|
||||
color = '#D84C4C'
|
||||
color = 'var(--cn-color-critical)'
|
||||
}
|
||||
}
|
||||
return { backgroundColor: color }
|
||||
|
||||
Reference in New Issue
Block a user