CN-1612 feat: 部分css重构内容：策略policy列表与策略新增
This commit is contained in:
刘洪洪
@@ -352,6 +352,10 @@
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.padding-r-20 {
|
||||
padding-right: 20px
|
||||
}
|
||||
|
||||
.tooltip-column-name {
|
||||
color: #aeb0b9;
|
||||
height: 40px;
|
||||
|
||||
@@ -73,7 +73,7 @@
|
||||
width: 328px;
|
||||
height: 89px;
|
||||
box-sizing: border-box;
|
||||
transition: all .2s;
|
||||
transition: all var(--el-transition-duration-fast);
|
||||
|
||||
.header__bottom__line {
|
||||
width:288px;
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
.pop-custom {
|
||||
padding: 12px;
|
||||
border: 1px solid #EBEEF5;
|
||||
border: 1px solid var(--el-border-color-lighter);
|
||||
position: absolute;
|
||||
top: 55px;
|
||||
right: 20px;
|
||||
|
||||
@@ -1,14 +1,16 @@
|
||||
$text-color-primary: var(--el-text-color-primary);
|
||||
|
||||
.subscriber-map {
|
||||
height: 100%;
|
||||
|
||||
svg {
|
||||
fill: #fff;
|
||||
fill: var(--el-fill-color-blank);
|
||||
}
|
||||
.subscriber-map-header {
|
||||
height: 34px;
|
||||
padding-bottom: 10px;
|
||||
font-size: 14px;
|
||||
color: #353636;
|
||||
color: $text-color-primary;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
@@ -20,7 +22,7 @@
|
||||
}
|
||||
.subscriber-map-body {
|
||||
position: relative;
|
||||
border: 1px solid #E2E5EC;
|
||||
border: 1px solid var(--el-border-color-light);
|
||||
border-radius: 4px;
|
||||
height: calc(100% - 34px);
|
||||
|
||||
@@ -44,7 +46,7 @@
|
||||
|
||||
svg {
|
||||
transition: height .1s linear, width .1s linear;
|
||||
fill: #fff;
|
||||
fill: var(--el-fill-color-blank);
|
||||
}
|
||||
|
||||
&.map-marker--human {
|
||||
@@ -67,7 +69,7 @@
|
||||
&.map-marker--hover {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border: 2px solid rgba(255,255,255,1);
|
||||
border: 2px solid var(--el-color-white);
|
||||
z-index: 2;
|
||||
|
||||
&.map-marker--human svg {
|
||||
@@ -82,7 +84,7 @@
|
||||
&.map-marker--highlight {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border: 2px solid #fff;
|
||||
border: 2px solid var(--el-color-white);
|
||||
background-color: rgb(204,68,68);
|
||||
z-index: 3;
|
||||
|
||||
@@ -148,7 +150,7 @@
|
||||
text-align: right;
|
||||
width: 60px;
|
||||
font-size: 12px;
|
||||
color: #353636;
|
||||
color: $text-color-primary;
|
||||
}
|
||||
.item__value {
|
||||
font-size: 12px;
|
||||
@@ -163,7 +165,7 @@
|
||||
.item-record__header {
|
||||
font-family: Helvetica;
|
||||
font-size: 16px;
|
||||
color: #353636;
|
||||
color: $text-color-primary;
|
||||
font-weight: 400;
|
||||
height: 38px;
|
||||
line-height: 38px;
|
||||
@@ -219,7 +221,7 @@
|
||||
border-left: 2px #cccccc dotted;
|
||||
height: 34px;
|
||||
margin-left: 6px;
|
||||
transition: all 0.2s;
|
||||
transition: all var(--el-transition-duration-fast);
|
||||
}
|
||||
}
|
||||
.timeline__info--item {
|
||||
@@ -282,7 +284,7 @@
|
||||
height: 34px;
|
||||
margin-left: 6px;
|
||||
margin-top: 6px;
|
||||
transition: all 0.2s;
|
||||
transition: all var(--el-transition-duration-fast);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -326,7 +328,7 @@
|
||||
.subscriber-map-point-tooltip__time {
|
||||
padding: 10px;
|
||||
font-size: 12px;
|
||||
color: #353636;
|
||||
color: $text-color-primary;
|
||||
font-weight: bold;
|
||||
}
|
||||
.subscriber-map-point-tooltip__coordinates {
|
||||
@@ -342,7 +344,7 @@
|
||||
}
|
||||
.coordinate__value {
|
||||
font-size: 12px;
|
||||
color: #353636;
|
||||
color: $text-color-primary;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
@@ -426,7 +428,7 @@
|
||||
text-align: right;
|
||||
width: 60px;
|
||||
font-size: 12px;
|
||||
color: #353636;
|
||||
color: $text-color-primary;
|
||||
}
|
||||
.item__value {
|
||||
font-size: 12px;
|
||||
@@ -437,7 +439,7 @@
|
||||
.body__tracking {
|
||||
padding-top: 6px;
|
||||
font-size: 12px;
|
||||
color: #38ACD2;
|
||||
color: var(--el-color-business);
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@@ -1,9 +1,12 @@
|
||||
$text-color-primary: var(--el-text-color-primary);
|
||||
$bg-color-page: var(--el-bg-color-page);
|
||||
|
||||
.detection-form {
|
||||
padding: 20px;
|
||||
|
||||
.detection-form-header {
|
||||
font-size: 24px;
|
||||
color: #353636;
|
||||
color: $text-color-primary;
|
||||
font-weight: 900;
|
||||
margin-top: 10px;
|
||||
}
|
||||
@@ -17,12 +20,16 @@
|
||||
margin-top: 20px;
|
||||
width: 1200px;
|
||||
|
||||
.rule-definition {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.el-collapse-item__header {
|
||||
width: 1200px !important;
|
||||
height: 56px !important;
|
||||
background: #FFFFFF !important;
|
||||
border-left: 1px solid #EFF2F5;
|
||||
border-right: 1px solid #EFF2F5;
|
||||
background: var(--el-fill-color-blank) !important;
|
||||
border-left: 1px solid $bg-color-page;
|
||||
border-right: 1px solid $bg-color-page;
|
||||
//box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02) !important;
|
||||
border-radius: 4px !important;
|
||||
display: flex;
|
||||
@@ -38,7 +45,7 @@
|
||||
}
|
||||
|
||||
.el-collapse-item__wrap {
|
||||
border: 1px solid #EFF2F5;
|
||||
border: 1px solid $bg-color-page;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
@@ -61,18 +68,18 @@
|
||||
}
|
||||
|
||||
.form-collapse-header-no {
|
||||
background: #E2E5EC;
|
||||
color: #333333;
|
||||
background: var(--el-border-color-light);
|
||||
color: $text-color-primary;
|
||||
}
|
||||
|
||||
.form-collapse-header-no-active {
|
||||
background: #38ACD2;
|
||||
color: #FFFFFF;
|
||||
background: var(--el-color-business);
|
||||
color: var(--el-color-white);
|
||||
}
|
||||
|
||||
.form-collapse-header-title {
|
||||
font-size: 16px;
|
||||
color: #333333;
|
||||
color: $text-color-primary;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
@@ -85,11 +92,11 @@
|
||||
height: 90px;
|
||||
padding: 16px 12px;
|
||||
border-radius: 2px;
|
||||
border: 1px #E2E5EC solid;
|
||||
border: 1px var(--el-border-color-light) solid;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 14px;
|
||||
color: #353636;
|
||||
color: $text-color-primary;
|
||||
font-weight: 400;
|
||||
|
||||
.trigger-block-item {
|
||||
@@ -132,6 +139,7 @@
|
||||
.el-collapse-item__content {
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.el-input__wrapper, .el-select__wrapper {
|
||||
height: 24px !important;
|
||||
line-height: 24px !important;
|
||||
@@ -139,6 +147,7 @@
|
||||
width: 112px;
|
||||
margin: 0 12px;
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
padding: 0 15px !important;
|
||||
}
|
||||
@@ -169,9 +178,11 @@
|
||||
.el-overlay-message-box, .el-message-box {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.el-overlay-message-box {
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
.is-message-box .el-overlay-message-box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@@ -179,13 +190,15 @@
|
||||
}
|
||||
|
||||
.el-switch {
|
||||
--el-switch-on-color: #38ACD2;
|
||||
--el-switch-on-color: var(--el-color-business);
|
||||
--el-switch-off-color: #C0CEDB;
|
||||
}
|
||||
|
||||
.del-model {
|
||||
&.el-message-box {
|
||||
max-width: 480px !important;
|
||||
}
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-bottom: 0 !important;
|
||||
@@ -195,9 +208,9 @@
|
||||
.el-message-box__header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
border-bottom: 1px solid #eee;
|
||||
border-bottom: 1px solid var(--el-border-color-lighter);
|
||||
height: 42px;
|
||||
background: #F7F7F7;
|
||||
background: var(--cn-bg-color-lighter);
|
||||
box-shadow: 0 1px 0 0 rgba(53, 54, 54, 0.08);
|
||||
padding-left: 21px;
|
||||
padding-top: 10px;
|
||||
@@ -220,7 +233,7 @@
|
||||
|
||||
.el-message-box__title {
|
||||
font-size: 14px !important;
|
||||
color: #353636;
|
||||
color: $text-color-primary;
|
||||
letter-spacing: 0;
|
||||
font-weight: 400;
|
||||
}
|
||||
@@ -229,7 +242,7 @@
|
||||
.el-message-box__content {
|
||||
height: 96px;
|
||||
font-size: 14px;
|
||||
color: #353636;
|
||||
color: $text-color-primary;
|
||||
letter-spacing: 0;
|
||||
line-height: 22px;
|
||||
font-weight: 400;
|
||||
@@ -245,13 +258,14 @@
|
||||
|
||||
.el-message-box__btns {
|
||||
height: 52px;
|
||||
border-top: 1px solid #eee;
|
||||
border-top: 1px solid var(--el-border-color-lighter);
|
||||
box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.07);
|
||||
padding: 13px 1px 12px 0 !important;
|
||||
|
||||
.el-button {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.el-button--small {
|
||||
padding: 8px 21px !important;
|
||||
line-height: 12px;
|
||||
@@ -264,7 +278,7 @@
|
||||
margin-right: 20px;
|
||||
width: 80px;
|
||||
height: 28px;
|
||||
color: #353636;
|
||||
color: $text-color-primary;
|
||||
}
|
||||
|
||||
.el-button:nth-child(2) {
|
||||
@@ -272,8 +286,10 @@
|
||||
height: 28px;
|
||||
margin-right: 20px;
|
||||
margin-left: 0 !important;
|
||||
background-color: #2d8cf0;
|
||||
border-color: #2d8cf0;
|
||||
//background-color: #2d8cf0;
|
||||
//border-color: #2d8cf0;
|
||||
background-color: var(--el-color-business);
|
||||
border-color: var(--el-color-business);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,11 +1,14 @@
|
||||
$text-color-primary: var(--el-text-color-primary);
|
||||
|
||||
.detection-drawer {
|
||||
padding: 20px;
|
||||
height: 100%;
|
||||
height: 100vh;
|
||||
overflow: scroll;
|
||||
padding: 20px 20px 90px;
|
||||
|
||||
.el-drawer {
|
||||
width: 440px !important;
|
||||
}
|
||||
|
||||
.el-collapse-item__content {
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
@@ -18,7 +21,7 @@
|
||||
.detection-drawer-title, .basic-function-value, basic-description-value, .drawer-trigger-minutes {
|
||||
font-family: NotoSansSChineseRegular;
|
||||
font-size: 14px;
|
||||
color: #717171;
|
||||
color: var(--el-text-color-regular);
|
||||
font-weight: 400;
|
||||
line-height: 14px;
|
||||
display: flex;
|
||||
@@ -28,7 +31,7 @@
|
||||
.drawer-basic-header {
|
||||
font-family: NotoSansHans-Black;
|
||||
font-size: 16px;
|
||||
color: #353636;
|
||||
color: $text-color-primary;
|
||||
font-weight: 900;
|
||||
margin-bottom: 20px;
|
||||
|
||||
@@ -51,37 +54,45 @@
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.padding-b-0 {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.detection-drawer-title {
|
||||
margin-bottom: 8px;
|
||||
|
||||
.drawer-title__equal {
|
||||
margin: 0 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.basic-description-value {
|
||||
font-family: NotoSansSChineseRegular;
|
||||
font-size: 14px;
|
||||
color: #353636;
|
||||
color: $text-color-primary;
|
||||
line-height: 18px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.basic-function-value {
|
||||
color: #046ECA;
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
.drawer-trigger-minutes {
|
||||
color: #353636;
|
||||
color: $text-color-primary;
|
||||
}
|
||||
|
||||
.detection-drawer-collapse {
|
||||
background: #FFFFFF;
|
||||
border: 1px solid rgba(226, 229, 236, 1);
|
||||
border-radius: 4px;
|
||||
background: var(--el-fill-color-blank);
|
||||
border: 1px solid var(--el-border-color-light);
|
||||
border-radius: var(--el-border-radius-base);
|
||||
//box-shadow: 0 1px 0 0 rgba(226, 229, 236, 1);
|
||||
|
||||
.el-collapse-item__header {
|
||||
height: 32px !important;
|
||||
background-color: #F7F7F7 !important;
|
||||
background-color: var(--cn-bg-color-lighter) !important;
|
||||
padding-left: 12px !important;
|
||||
border-radius: 4px 4px 0 0;
|
||||
border-radius: var(--el-border-radius-base) var(--el-border-radius-base) 0 0;
|
||||
}
|
||||
|
||||
.drawer-collapse-content {
|
||||
@@ -97,11 +108,19 @@
|
||||
.drawer-collapse-trigger {
|
||||
font-family: NotoSansSChineseRegular;
|
||||
font-size: 14px;
|
||||
color: #353636;
|
||||
color: $text-color-primary;
|
||||
line-height: 18px;
|
||||
font-weight: 400;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.trigger__value {
|
||||
color: #046ECA;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.detection-drawer-collapse__margin {
|
||||
margin: 20px 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -206,5 +206,10 @@ $color-light: var(--el-border-color-light);
|
||||
padding-left: 10px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.content__display {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,18 +1,24 @@
|
||||
$color-primary: var(--el-color-primary);
|
||||
|
||||
.detection-table {
|
||||
position: relative;
|
||||
.el-table td, .el-table th {
|
||||
padding: 12px 0;
|
||||
}
|
||||
|
||||
.el-table th > .cell, .el-table .cell {
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
.el-table--enable-row-transition .el-table__body td, .el-table--border th {
|
||||
border-left: 0 !important;
|
||||
border-right: 0 !important;
|
||||
font-size: 12px;
|
||||
color: #353636;
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
.el-table--border th {
|
||||
font-weight: 500;
|
||||
padding: 0;
|
||||
@@ -21,7 +27,7 @@
|
||||
.el-table__header-wrapper {
|
||||
height: 32px !important;
|
||||
line-height: 32px !important;
|
||||
border-bottom: 1px solid #EBEEF5;
|
||||
border-bottom: 1px solid var(--el-border-color-lighter);
|
||||
}
|
||||
|
||||
.el-table__body td {
|
||||
@@ -32,15 +38,17 @@
|
||||
height: 32px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.policy-library-tip {
|
||||
max-width: 180px;
|
||||
padding: 4px;
|
||||
|
||||
.tip__header {
|
||||
color: #353636;
|
||||
color: var(--el-text-color-primary);
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.tip__tags {
|
||||
display: flex;
|
||||
margin-top: 8px;
|
||||
@@ -48,21 +56,23 @@
|
||||
.tip__tag {
|
||||
margin-right: 10px;
|
||||
padding: 2px 10px;
|
||||
background-color: #EBF7FA;
|
||||
color: #046ECA;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.tip__description {
|
||||
margin-top: 14px;
|
||||
color: #666;
|
||||
color: var(--el-text-color-regular);
|
||||
|
||||
&.tip__description--non {
|
||||
color: #999;
|
||||
color: var(--el-color-info);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.detection-tag-blue, .detection-tag-red, .detection-tag-gray, .detection-tag-status0, .detection-tag-status1 {
|
||||
display: inline-block;
|
||||
border-radius: 10px;
|
||||
@@ -76,35 +86,35 @@
|
||||
.detection-tag-blue {
|
||||
background: rgba(56, 172, 210, 0.10);
|
||||
box-shadow: 0 2px 4px 0 rgba(51, 51, 51, 0.02);
|
||||
color: #046ECA;
|
||||
color: $color-primary;
|
||||
}
|
||||
|
||||
.detection-tag-red {
|
||||
background: rgba(226, 97, 84, 0.12);
|
||||
color: #E26154;
|
||||
color: var(--el-color-danger);
|
||||
}
|
||||
|
||||
.detection-tag-gray {
|
||||
background: rgba(113, 113, 113, 0.12);
|
||||
color: #717171;
|
||||
color: var(--el-text-color-regular);
|
||||
}
|
||||
|
||||
.detection-tag-status0 {
|
||||
font-weight: 500;
|
||||
background: rgba(113, 113, 113, 0.12);
|
||||
color: #717171;
|
||||
color: var(--el-text-color-regular);
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.detection-tag-status1 {
|
||||
font-weight: 500;
|
||||
background: rgba(126, 159, 84, 0.12);
|
||||
color: #7E9F54;
|
||||
color: var(--el-color-success);
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.detection-table-library {
|
||||
font-size: 12px;
|
||||
color: #046ECA;
|
||||
color: $color-primary;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
@@ -1,23 +1,29 @@
|
||||
$color-white: var(--el-color-white);
|
||||
|
||||
.top-tools__left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
|
||||
.btn__width {
|
||||
width: 72px !important;
|
||||
}
|
||||
|
||||
.top-tool-btn {
|
||||
cursor: pointer;
|
||||
height: 28px;
|
||||
width: 28px;
|
||||
border: 1px solid #DEDEDE;
|
||||
border: 1px solid var(--el-color-info-light-7);
|
||||
outline: none;
|
||||
border-radius: 2px;
|
||||
background-color: #F9F9F9;
|
||||
background-color: var(--el-fill-color-lighter);
|
||||
transition: background-color linear .1s;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
//font-family: $fontFamily !important;
|
||||
i {
|
||||
font-size: 14px;
|
||||
color: #575757;
|
||||
color: var(--el-text-color-regular);
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
@@ -25,73 +31,71 @@
|
||||
.top-tool-btn:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.66;
|
||||
|
||||
i {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.top-tool-btn:hover:not(.cn-btn-disabled) {
|
||||
border: 1px solid #DEDEDE;
|
||||
background-color: #EBF1F4;
|
||||
border: 1px solid var(--el-color-info-light-7);
|
||||
background-color: var(--cn-bg-color-light);
|
||||
}
|
||||
|
||||
.top-tool-btn:focus:not(.cn-btn-disabled), .top-tool-btn.is-focus {
|
||||
background-color: #E0E7EA;
|
||||
border: 1px solid #DEDEDE;
|
||||
background-color: var(--el-color-primary-light-9);
|
||||
border: 1px solid var(--el-color-info-light-7);
|
||||
|
||||
i {
|
||||
color: #575757;
|
||||
color: var(--el-text-color-regular);
|
||||
}
|
||||
}
|
||||
|
||||
.top-tool-btn--delete.top-tool-btn:focus:not(.cn-btn-disabled) {
|
||||
background-color: #EBF1F4;
|
||||
border-color: #FFC4B9;
|
||||
background-color: var(--cn-bg-color-light);
|
||||
//border-color: #FFC4B9;
|
||||
border-color: var(--el-color-danger-light-5);
|
||||
|
||||
i {
|
||||
color: #F0745A;
|
||||
//color: #F0745A;
|
||||
color: var(--el-color-danger);
|
||||
}
|
||||
}
|
||||
|
||||
.top-tool-btn--create {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -127,8 +131,17 @@
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
||||
.search__input {
|
||||
height: 28px !important;
|
||||
}
|
||||
|
||||
.search__btn {
|
||||
border-radius: 0 2px 2px 0 !important;
|
||||
}
|
||||
|
||||
.el-input--small {
|
||||
line-height: 27px;
|
||||
|
||||
.el-input__wrapper {
|
||||
height: 28px !important;
|
||||
border-radius: 2px 0 0 2px !important;
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
.detection__event-severity-bar {
|
||||
flex: 0 0 175px;
|
||||
background-color: white;
|
||||
background-color: var(--el-fill-color-blank);
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
@@ -19,6 +19,59 @@
|
||||
}
|
||||
}
|
||||
|
||||
.detection {
|
||||
padding: 20px;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
|
||||
.detection-title {
|
||||
font-family: NotoSansHans-Black;
|
||||
line-height: 24px;
|
||||
font-size: 24px;
|
||||
color: var(--el-text-color-primary);
|
||||
font-weight: 900;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.detection-title-label {
|
||||
font-family: NotoSansSChineseRegular;
|
||||
font-size: 12px;
|
||||
color: var(--el-text-color-regular);
|
||||
letter-spacing: 0;
|
||||
line-height: 18px;
|
||||
font-weight: 400;
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.detection-content {
|
||||
margin-top: 15px;
|
||||
width: 100%;
|
||||
height: calc(100% - 96px);
|
||||
display: flex;
|
||||
|
||||
.detection-filter {
|
||||
width: 320px;
|
||||
height: calc(100% + 34px);
|
||||
background: var(--el-fill-color-blank);
|
||||
border: 1px solid var(--el-border-color-light);
|
||||
border-radius: var(--el-border-radius-base);
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.detection-block {
|
||||
width: calc(100% - 340px);
|
||||
|
||||
.detection-table {
|
||||
width: 100%;
|
||||
height: calc(100% - 44px);
|
||||
border-radius: var(--el-border-radius-base);
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.detection__list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@@ -80,7 +80,7 @@
|
||||
background: #fff; //盖住fixed产生的阴影
|
||||
:deep .is-leaf {
|
||||
color: #1b2e3b;
|
||||
background: #ebeef5;
|
||||
background: var(--el-border-color-lighter);
|
||||
}
|
||||
.el-range-editor--small.el-input__wrapper {
|
||||
height: 32px;
|
||||
|
||||
@@ -231,32 +231,32 @@ export const eventSeverity = {
|
||||
info: 'info'
|
||||
}
|
||||
export const eventSeverityColor = {
|
||||
critical: '#D84C4C',
|
||||
high: '#FE845D',
|
||||
medium: '#FFB65A',
|
||||
low: '#FFD82D',
|
||||
info: '#D1BD50'
|
||||
critical: 'var(--cn-color-critical)',
|
||||
high: 'var(--cn-color-high)',
|
||||
medium: 'var(--cn-color-medium)',
|
||||
low: 'var(--cn-color-low)',
|
||||
info: 'var(--cn-color-info)'
|
||||
}
|
||||
export const riskLevelColor = {
|
||||
5: '#D84C4C',
|
||||
4: '#FE845D',
|
||||
3: '#FFB65A',
|
||||
2: '#FFD82D',
|
||||
1: '#D1BD50'
|
||||
5: 'var(--cn-color-critical)',
|
||||
4: 'var(--cn-color-high)',
|
||||
3: 'var(--cn-color-medium)',
|
||||
2: 'var(--cn-color-low)',
|
||||
1: 'var(--cn-color-info)'
|
||||
}
|
||||
export const riskLevelColor1 = {
|
||||
'High Risk': '#D84C4C',
|
||||
Suspicious: '#FE845D',
|
||||
'Moderate Risk': '#FFB65A',
|
||||
'Low Risk': '#FFD82D',
|
||||
Trustworthy: '#D1BD50'
|
||||
'High Risk': 'var(--cn-color-critical)',
|
||||
Suspicious: 'var(--cn-color-high)',
|
||||
'Moderate Risk': 'var(--cn-color-medium)',
|
||||
'Low Risk': 'var(--cn-color-low)',
|
||||
Trustworthy: 'var(--cn-color-info)'
|
||||
}
|
||||
export const eventSeverityColor1 = {
|
||||
Critical: '#D84C4C',
|
||||
High: '#FE845D',
|
||||
Medium: '#FFB65A',
|
||||
Low: '#FFD82D',
|
||||
Info: '#D1BD50'
|
||||
Critical: 'var(--cn-color-critical)',
|
||||
High: 'var(--cn-color-high)',
|
||||
Medium: 'var(--cn-color-medium)',
|
||||
Low: 'var(--cn-color-low)',
|
||||
Info: 'var(--cn-color-info)'
|
||||
}
|
||||
export const securityType = {
|
||||
commandAndControl: 'common and control',
|
||||
@@ -2713,27 +2713,27 @@ export const securityLevel = [
|
||||
{
|
||||
value: 'critical',
|
||||
label: 'overall.critical',
|
||||
color: '#D84C4C'
|
||||
color: 'var(--cn-color-critical)'
|
||||
},
|
||||
{
|
||||
value: 'high',
|
||||
label: 'overall.high',
|
||||
color: '#FE845D'
|
||||
color: 'var(--cn-color-high)'
|
||||
},
|
||||
{
|
||||
value: 'medium',
|
||||
label: 'overall.medium',
|
||||
color: '#FFB65A'
|
||||
color: 'var(--cn-color-medium)'
|
||||
},
|
||||
{
|
||||
value: 'low',
|
||||
label: 'overall.low',
|
||||
color: '#FFD82D'
|
||||
color: 'var(--cn-color-low)'
|
||||
},
|
||||
{
|
||||
value: 'info',
|
||||
label: 'overall.info',
|
||||
color: '#D1BD50'
|
||||
color: 'var(--cn-color-info)'
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
:disableEdit="disableEdit"
|
||||
:disableDelete="disableDelete"/>
|
||||
|
||||
<div class="detection-table" style="position: relative">
|
||||
<div class="detection-table">
|
||||
<loading :loading="loading"></loading>
|
||||
<detection-table
|
||||
ref="dataTable"
|
||||
@@ -126,14 +126,14 @@ export default {
|
||||
myCellStyle: {
|
||||
padding: '4px 0px',
|
||||
'font-size': '12px',
|
||||
color: '#353636',
|
||||
color: 'var(--el-text-color-primary)',
|
||||
'font-weight': 400
|
||||
},
|
||||
myHeaderCellStyle: {
|
||||
padding: '4px 0px',
|
||||
background: '#F5F8FA',
|
||||
background: 'var(--el-fill-color-light)',
|
||||
'font-size': '12px',
|
||||
color: '#353636',
|
||||
color: 'var(--el-text-color-primary)',
|
||||
'font-weight': 500
|
||||
}
|
||||
}
|
||||
@@ -347,58 +347,3 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.detection {
|
||||
padding: 20px;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
|
||||
.detection-title {
|
||||
font-family: NotoSansHans-Black;
|
||||
line-height: 24px;
|
||||
font-size: 24px;
|
||||
color: #353636;
|
||||
font-weight: 900;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.detection-title-label {
|
||||
font-family: NotoSansSChineseRegular;
|
||||
font-size: 12px;
|
||||
color: #717171;
|
||||
letter-spacing: 0;
|
||||
line-height: 18px;
|
||||
font-weight: 400;
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.detection-content {
|
||||
margin-top: 15px;
|
||||
width: 100%;
|
||||
height: calc(100% - 96px);
|
||||
display: flex;
|
||||
|
||||
.detection-filter {
|
||||
width: 320px;
|
||||
height: calc(100% + 34px);
|
||||
background: #FFFFFF;
|
||||
border: 1px solid rgba(226, 229, 236, 1);
|
||||
border-radius: 4px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.detection-block {
|
||||
width: calc(100% - 340px);
|
||||
|
||||
.detection-table {
|
||||
width: 100%;
|
||||
height: calc(100% - 44px);
|
||||
border-radius: 4px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="detection-drawer" style="height: 100vh;overflow: scroll;padding-bottom: 90px">
|
||||
<div class="detection-drawer">
|
||||
<div class="drawer-basic">
|
||||
<div class="drawer-basic-header">
|
||||
<div class="drawer-basic-id">
|
||||
@@ -91,11 +91,10 @@
|
||||
<div class="drawer-basic-function">
|
||||
<div class="detection-drawer-title">{{ $t('detections.filters') }}</div>
|
||||
<span class="detection-tag-blue">Source Port</span>
|
||||
<span style="margin: 0 6px;">{{ $t('detections.equal') }}</span><span>19890</span>
|
||||
<span class="drawer-title__equal">{{ $t('detections.equal') }}</span><span>19890</span>
|
||||
</div>
|
||||
|
||||
<div class="drawer-basic-function" v-for="item in severityList" :key="item.severity"
|
||||
style="padding-bottom: 0">
|
||||
<div class="drawer-basic-function padding-b-0" v-for="item in severityList" :key="item.severity">
|
||||
<div class="detection-drawer-title">
|
||||
<div class="detection__icon" :style="`background-color: ${eventSeverityColor[item.severity]}`"></div>
|
||||
<div>{{ toUpperCaseByString(item.severity) }}</div>
|
||||
@@ -112,16 +111,16 @@
|
||||
</el-collapse>
|
||||
</div>
|
||||
|
||||
<div class="detection-drawer-collapse" style="margin: 20px 0">
|
||||
<div class="detection-drawer-collapse detection-drawer-collapse__margin">
|
||||
<el-collapse v-model="activeTrigger">
|
||||
<el-collapse-item :title="$t('detection.create.trigger')" name="trigger">
|
||||
<div class="drawer-collapse-content" v-if="language===EN">
|
||||
<div class="drawer-collapse-trigger">
|
||||
Triggered when conditions occur at least
|
||||
<span style="color: #046ECA">
|
||||
<span class="trigger__value">
|
||||
{{ atLeast }} {{ times }}
|
||||
</span> in
|
||||
<span style="color: #046ECA">
|
||||
<span class="trigger__value">
|
||||
{{ getNumberFromStr($_.get(detailData, 'ruleTriggerObj.interval', '0')) || '-' }}
|
||||
{{ $_.get(detailData, 'ruleTriggerObj.intervalVal', '-') || '-' }}
|
||||
</span>
|
||||
@@ -138,11 +137,11 @@
|
||||
<div class="drawer-collapse-content" v-if="language===ZH">
|
||||
<div class="drawer-collapse-trigger">
|
||||
当条件为
|
||||
<span style="color: #046ECA">
|
||||
<span class="trigger__value">
|
||||
{{ getNumberFromStr($_.get(detailData, 'ruleTriggerObj.interval', '0')) || '-' }}
|
||||
{{ changeValueToLabel(detailData.ruleTriggerObj) }}
|
||||
</span>内至少出现
|
||||
<span style="color: #046ECA">
|
||||
<span class="trigger__value">
|
||||
{{ $_.get(detailData, 'ruleTriggerObj.atLeast', '-') || '-' }} 次
|
||||
</span>时触发
|
||||
</div>
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
<div>
|
||||
<div class="new-filter-content-title">{{ $t('overall.status') }}</div>
|
||||
<div class="new-filter-content-content">
|
||||
<el-checkbox-group v-model="checkStatus" @change="onChangeCategory" style="display: flex;flex-direction: column">
|
||||
<el-checkbox-group v-model="checkStatus" @change="onChangeCategory" class="content__display">
|
||||
<el-checkbox v-for="item in statusList" :key="item.name" class="new-filter-content-checkbox" :label="item.status">
|
||||
<div>{{ item.name }}</div>
|
||||
</el-checkbox>
|
||||
@@ -29,7 +29,7 @@
|
||||
<div>
|
||||
<div class="new-filter-content-title">{{ $t('overall.type') }}</div>
|
||||
<div class="new-filter-content-content">
|
||||
<el-checkbox-group v-model="checkEventType" @change="onChangeCategory" style="display: flex;flex-direction: column">
|
||||
<el-checkbox-group v-model="checkEventType" @change="onChangeCategory" class="content__display">
|
||||
<el-checkbox v-for="item in eventTypeList" :key="item.name" class="new-filter-content-checkbox" :label="item.name">
|
||||
{{ item.name }}
|
||||
</el-checkbox>
|
||||
|
||||
@@ -26,7 +26,7 @@
|
||||
|
||||
<!--第二步：Rule Definition-->
|
||||
<div class="detection-form-collapse">
|
||||
<el-collapse v-model="activeNames" style="position: relative;">
|
||||
<el-collapse v-model="activeNames" class="rule-definition">
|
||||
<el-collapse-item name="2">
|
||||
<template #title>
|
||||
<div class="form-collapse-header">
|
||||
|
||||
@@ -59,7 +59,7 @@
|
||||
{{ changeCategory(scope.row[item.prop]) }}
|
||||
</template>
|
||||
<template v-else-if="item.prop === 'description'">
|
||||
<div style="padding-right: 20px">{{ scope.row[item.prop] }}</div>
|
||||
<div class="padding-r-20">{{ scope.row[item.prop] }}</div>
|
||||
</template>
|
||||
<template v-else-if="item.prop === 'dimensions' && scope.row[item.prop]">
|
||||
<span class="detection-tag-blue">{{ scope.row[item.prop] }}</span>
|
||||
@@ -83,7 +83,7 @@
|
||||
<div
|
||||
class="tip__tag"
|
||||
v-if="$_.get(scope.row.ruleConfigObj, 'knowledgeBase.color')"
|
||||
:style="{backgroundColor: $_.get(scope.row.ruleConfigObj, 'knowledgeBase.color'), color: 'white'}"
|
||||
:style="{backgroundColor: $_.get(scope.row.ruleConfigObj, 'knowledgeBase.color'), color: 'var(--el-color-white)'}"
|
||||
>{{colorText($_.get(scope.row.ruleConfigObj, 'knowledgeBase.color'))}}</div>
|
||||
</div>
|
||||
<div class="tip__description" :class="{ 'tip__description--non': !($_.get(scope.row.ruleConfigObj, 'knowledgeBase.description')) }">
|
||||
@@ -239,7 +239,3 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
</style>
|
||||
|
||||
@@ -5,9 +5,8 @@
|
||||
id="knowledge-base-add"
|
||||
v-if="hasPermission('createDetectionPolicy')"
|
||||
:title="$t('knowledgeBase.createKnowledgeBase')"
|
||||
class="top-tool-btn margin-r-10 top-tool-btn--create"
|
||||
@click="onCreate"
|
||||
style="width:72px;">
|
||||
class="top-tool-btn margin-r-10 top-tool-btn--create btn__width"
|
||||
@click="onCreate">
|
||||
<i class="cn-icon-xinjian cn-icon"></i>
|
||||
<span>{{ $t('overall.create') }}</span>
|
||||
</button>
|
||||
@@ -17,9 +16,8 @@
|
||||
v-if="hasPermission('editDetectionPolicy')"
|
||||
id="knowledge-base-edit"
|
||||
:title="$t('knowledgeBase.editKnowledgeBase')"
|
||||
class="top-tool-btn margin-r-10"
|
||||
@click="onEdit"
|
||||
style="width:72px;">
|
||||
class="top-tool-btn margin-r-10 btn__width"
|
||||
@click="onEdit">
|
||||
<i class="cn-icon-edit cn-icon" ></i>
|
||||
<span>{{$t('overall.edit')}}</span>
|
||||
</button>
|
||||
@@ -29,21 +27,18 @@
|
||||
v-if="hasPermission('deleteDetectionPolicy')"
|
||||
id="knowledge-base-delete"
|
||||
:title="$t('knowledgeBase.deleteKnowledgeBase')"
|
||||
class="top-tool-btn margin-r-10"
|
||||
@click="onDelete"
|
||||
style="width:72px;">
|
||||
class="top-tool-btn margin-r-10 btn__width"
|
||||
@click="onDelete">
|
||||
<i class="cn-icon-delete cn-icon"></i>
|
||||
<span>{{ $t('overall.delete') }}</span>
|
||||
</button>
|
||||
|
||||
<div class="top-tool-search margin-l-10">
|
||||
<el-input v-model="keyWord" size="small" style="height: 28px;" @keyup.enter="onSearch"></el-input>
|
||||
<el-input v-model="keyWord" size="small" class="search__input" @keyup.enter="onSearch"></el-input>
|
||||
<button
|
||||
class="top-tool-btn top-tool-btn--search"
|
||||
style="border-radius: 0 2px 2px 0 !important;"
|
||||
class="top-tool-btn top-tool-btn--search search__btn"
|
||||
@click="onSearch">
|
||||
<el-icon><Search /></el-icon>
|
||||
<!-- <i class="el-icon-search"></i>-->
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -107,7 +102,3 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user