CN-1612 feat: 部分css重构内容：detection检测列表与下拉详情
This commit is contained in:
刘洪洪
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user