CN-1173: 检测功能UI开发
This commit is contained in:
刘洪洪
@@ -89,3 +89,9 @@
|
||||
|
||||
@import "views/entityExplorer/graphRightListBlock";
|
||||
@import "views/entityExplorer/graphRightDetailBlock";
|
||||
|
||||
@import "views/detections/detection-tools";
|
||||
@import "views/detections/detection-drawer";
|
||||
@import "views/detections/detection-table";
|
||||
@import "views/detections/detection-create/detection-form";
|
||||
@import "views/detections/detection-create/detection-form-setting";
|
||||
|
||||
@@ -0,0 +1,515 @@
|
||||
.form-setting__block {
|
||||
width: 620px;
|
||||
|
||||
.el-form-item__label {
|
||||
height: 14px;
|
||||
line-height: 14px;
|
||||
padding: 0;
|
||||
margin-bottom: 12px;
|
||||
font-family: NotoSansHans-Medium;
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.el-form-item__content {
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.block-mode {
|
||||
width: 300px;
|
||||
height: 125px;
|
||||
padding: 16px;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid rgba(226, 229, 236, 1);
|
||||
border-radius: 2px;
|
||||
margin-right: 20px;
|
||||
display: flex;
|
||||
|
||||
.block-mode-left {
|
||||
line-height: 16px;
|
||||
margin-right: 10px;
|
||||
|
||||
.block-mode-icon {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.block-mode-right {
|
||||
width: 240px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.block-mode-title {
|
||||
font-family: NotoSansSChineseRegular;
|
||||
font-size: 14px;
|
||||
color: #353636;
|
||||
font-weight: 400;
|
||||
line-height: 14px;
|
||||
}
|
||||
|
||||
.block-mode-content {
|
||||
font-family: NotoSansSChineseRegular;
|
||||
font-size: 12px;
|
||||
color: #717171;
|
||||
line-height: 15px;
|
||||
font-weight: 400;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.block-mode-btn, .block-mode-btn-active {
|
||||
width: 240px;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
text-align: center;
|
||||
background: #F5F6F7;
|
||||
border-radius: 2px;
|
||||
font-family: NotoSansHans-Medium;
|
||||
font-size: 12px;
|
||||
color: #353636;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.block-mode-btn-active {
|
||||
background: #7E9F54;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.block-title {
|
||||
font-family: NotoSansHans-Medium;
|
||||
font-size: 14px;
|
||||
line-height: 14px;
|
||||
color: #333333;
|
||||
font-weight: 500;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.block-title1 {
|
||||
font-family: NotoSansHans-Medium;
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
color: #353636;
|
||||
font-weight: 500;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.form-setting__select {
|
||||
width: 620px !important;
|
||||
|
||||
.el-input--mini .el-input__inner {
|
||||
height: 24px !important;
|
||||
line-height: 24px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.form-setting__input {
|
||||
&.el-input {
|
||||
height: 24px !important;
|
||||
line-height: 24px !important;
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.form-setting__textarea {
|
||||
.el-textarea__inner {
|
||||
height: 110px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-switch__label, .form-setting__block .el-switch__label {
|
||||
font-family: NotoSansSChineseRegular;
|
||||
font-size: 14px;
|
||||
color: #353636;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.block-dimension {
|
||||
width: 620px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
border: 1px solid #e2e5ec;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.block-dimension-tag {
|
||||
width: auto;
|
||||
height: 19px;
|
||||
line-height: 19px;
|
||||
background: #E5E8EB;
|
||||
border-radius: 2px;
|
||||
opacity: 0.6;
|
||||
font-family: NotoSansSChineseRegular;
|
||||
font-size: 12px;
|
||||
color: #353636;
|
||||
font-weight: 400;
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-input--mini .el-input__inner {
|
||||
height: 24px !important;
|
||||
line-height: 24px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.form-setting__block-key {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
|
||||
.block-key {
|
||||
height: 28px;
|
||||
background: #F5F8FA;
|
||||
border: 1px solid rgba(222, 222, 222, 1);
|
||||
box-shadow: 0 2px 4px 0 rgba(51, 51, 51, 0.02);
|
||||
border-radius: 2px;
|
||||
font-family: NotoSansHans-Medium;
|
||||
font-size: 12px;
|
||||
color: #353636;
|
||||
font-weight: 500;
|
||||
margin-left: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 12px;
|
||||
cursor: pointer;
|
||||
|
||||
i {
|
||||
font-size: 12px;
|
||||
margin-right: 4px;
|
||||
color: #575757;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-setting__btn, .form-setting__btn1 {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
.el-button {
|
||||
height: 30px !important;
|
||||
min-height: 30px !important;
|
||||
line-height: 30px !important;
|
||||
background: #38ACD2;
|
||||
border: 1px solid rgba(46, 136, 166, 1);
|
||||
border-radius: 2px;
|
||||
font-family: NotoSansHans-Medium;
|
||||
font-size: 12px;
|
||||
color: #FFFFFF;
|
||||
font-weight: 500;
|
||||
padding: 0 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.form-setting__btn1 {
|
||||
.el-button {
|
||||
padding: 0 11px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.key-drawer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
||||
.el-input__inner {
|
||||
border-color: #DEDEDE !important;
|
||||
}
|
||||
}
|
||||
|
||||
.definition-filter-block {
|
||||
border: 1px #E2E5EC solid;
|
||||
min-height: 196px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 12px;
|
||||
position: relative;
|
||||
|
||||
.definition-filter-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 24px;
|
||||
margin-bottom: 6px;
|
||||
|
||||
.filter-item__select {
|
||||
width: 220px;
|
||||
}
|
||||
|
||||
.filter-item__input {
|
||||
width: 170px;
|
||||
}
|
||||
|
||||
.el-input--mini .el-input__inner {
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 12px !important;
|
||||
font-variant-caps: all-small-caps;
|
||||
color: #575757;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.filter-block-footer {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
|
||||
i {
|
||||
font-size: 12px;
|
||||
font-variant-caps: all-small-caps;
|
||||
color: #575757;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.block-filter-add {
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
background: #F5F8FA;
|
||||
border: 1px solid rgba(222, 222, 222, 1);
|
||||
box-shadow: 0 2px 4px 0 rgba(51, 51, 51, 0.02);
|
||||
border-radius: 2px;
|
||||
color: #575757;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.history-top-key {
|
||||
width: 396px;
|
||||
|
||||
.el-drawer__body {
|
||||
border: 1px #E2E5EC solid;
|
||||
}
|
||||
|
||||
.el-overlay {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.el-drawer, .rtl {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.key-table {
|
||||
.el-table th > .cell, .el-table .cell {
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
.el-table th {
|
||||
font-family: NotoSansHans-Medium;
|
||||
font-weight: 500;
|
||||
padding: 0 0 0 12px;
|
||||
color: #353636;
|
||||
background: #F9F9F9;
|
||||
height: 30px;
|
||||
border: 0 !important;
|
||||
}
|
||||
|
||||
.el-table__body td {
|
||||
font-family: NotoSansSChineseRegular;
|
||||
font-weight: 400;
|
||||
padding: 0 0 0 12px;
|
||||
font-size: 14px;
|
||||
color: #353636;
|
||||
height: 28px;
|
||||
border: 0 !important;
|
||||
}
|
||||
|
||||
.el-table::before {
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.definition-condition-block {
|
||||
border: 1px #E2E5EC solid;
|
||||
padding: 20px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.condition-title {
|
||||
font-family: NotoSansHans-Medium;
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
font-weight: 500;
|
||||
margin-bottom: 12px;
|
||||
height: 14px;
|
||||
line-height: 14px;
|
||||
}
|
||||
|
||||
.condition__select {
|
||||
width: 100%;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
|
||||
.el-input__inner {
|
||||
padding-left: 20px !important;
|
||||
}
|
||||
|
||||
.condition__select__icon {
|
||||
width: 4px;
|
||||
height: 12px;
|
||||
border-radius: 2px;
|
||||
margin-left: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.condition-metric {
|
||||
font-family: NotoSansSChineseRegular;
|
||||
font-size: 14px;
|
||||
color: #353636;
|
||||
font-weight: 400;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.condition-metric-item1 {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.metric-item1__text {
|
||||
height: 24px;
|
||||
font-family: NotoSansSChineseRegular;
|
||||
font-size: 14px;
|
||||
color: #353636;
|
||||
font-weight: 400;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 12px;
|
||||
font-variant-caps: all-small-caps;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.metric-item1-close {
|
||||
color: #E26154;
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.metric-item1-close-disable {
|
||||
color: #ecb2ad;
|
||||
margin-left: 12px;
|
||||
cursor: no-drop;
|
||||
}
|
||||
}
|
||||
|
||||
.condition-metric-item2 {
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
|
||||
.metric-item2__select {
|
||||
margin-right: 12px;
|
||||
|
||||
.el-input__inner {
|
||||
width: 170px;
|
||||
}
|
||||
}
|
||||
|
||||
.metric-item2__input {
|
||||
width: 112px;
|
||||
margin-right: 12px;
|
||||
height: 24px !important;
|
||||
margin-top: -1px !important;
|
||||
border-radius: 2px !important;
|
||||
|
||||
.el-input__inner {
|
||||
width: 112px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-divider--horizontal {
|
||||
margin: 12px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.condition__select {
|
||||
width: 100%;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
|
||||
.el-input__inner {
|
||||
padding-left: 20px !important;
|
||||
}
|
||||
|
||||
.condition__select__icon {
|
||||
width: 4px;
|
||||
height: 12px;
|
||||
border-radius: 2px;
|
||||
margin-left: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.condition-add {
|
||||
width: 100%;
|
||||
height: 24px;
|
||||
background: #F5F8FA;
|
||||
border: 1px solid rgba(222, 222, 222, 1);
|
||||
box-shadow: 0 2px 4px 0 rgba(51, 51, 51, 0.02);
|
||||
border-radius: 2px;
|
||||
font-family: NotoSansHans-Medium;
|
||||
font-size: 12px;
|
||||
color: #353636;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
i {
|
||||
font-size: 14px;
|
||||
font-variant-caps: all-small-caps;
|
||||
margin-right: 4px;
|
||||
margin-top: -2px;
|
||||
}
|
||||
}
|
||||
|
||||
.condition-divider {
|
||||
border: 1px #ECECEC dashed;
|
||||
|
||||
.el-divider__text {
|
||||
padding: 0 4px;
|
||||
font-family: NotoSansSChineseRegular;
|
||||
font-size: 12px;
|
||||
color: #BEBEBE;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
.margin-r-8 {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.margin-b-20 {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.margin-b-10 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.margin-t-18 {
|
||||
margin-top: 18px;
|
||||
}
|
||||
@@ -0,0 +1,140 @@
|
||||
.detection-form {
|
||||
padding: 20px;
|
||||
|
||||
.detection-form-header {
|
||||
font-family: NotoSansHans-Black;
|
||||
font-size: 24px;
|
||||
color: #353636;
|
||||
font-weight: 900;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.detection-form-content {
|
||||
height: 100%;
|
||||
overflow: scroll;
|
||||
padding-bottom: 40px;
|
||||
|
||||
.detection-form-collapse {
|
||||
margin-top: 20px;
|
||||
width: 1200px;
|
||||
|
||||
.el-collapse-item__header {
|
||||
width: 1200px !important;
|
||||
height: 56px !important;
|
||||
background: #FFFFFF !important;
|
||||
border-left: 1px solid #EFF2F5;
|
||||
border-right: 1px solid #EFF2F5;
|
||||
//box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02) !important;
|
||||
border-radius: 4px !important;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: inherit;
|
||||
position: relative;
|
||||
padding: 0 20px;
|
||||
|
||||
i {
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-collapse-item__wrap {
|
||||
border: 1px solid #EFF2F5;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.form-collapse-header {
|
||||
margin-left: 26px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.form-collapse-header-no, .form-collapse-header-no-active {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
font-family: NotoSansHans-Medium;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
border-radius: 50%;
|
||||
margin-right: 10px;
|
||||
transition: 0.5s all;
|
||||
}
|
||||
|
||||
.form-collapse-header-no {
|
||||
background: #E2E5EC;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.form-collapse-header-no-active {
|
||||
background: #38ACD2;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.form-collapse-header-title {
|
||||
font-family: NotoSansHans-Medium;
|
||||
font-size: 16px;
|
||||
color: #333333;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.form-collapse-content {
|
||||
padding: 0 20px 0 46px;
|
||||
|
||||
.trigger-block {
|
||||
width: 620px;
|
||||
height: 90px;
|
||||
padding: 16px 12px;
|
||||
border-radius: 2px;
|
||||
border: 1px #E2E5EC solid;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-family: NotoSansSChineseRegular;
|
||||
font-size: 14px;
|
||||
color: #353636;
|
||||
font-weight: 400;
|
||||
|
||||
.trigger-block-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.el-input--mini .el-input__inner {
|
||||
width: 112px;
|
||||
margin: 0 12px;
|
||||
}
|
||||
|
||||
.el-select .el-input .el-select__caret {
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.form-trigger__select {
|
||||
margin-left: -12px;
|
||||
}
|
||||
|
||||
.el-form-item__content {
|
||||
height: 24px;
|
||||
line-height: 24px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-input--mini, .el-input--mini .el-input__inner {
|
||||
height: 24px !important;
|
||||
line-height: 24px !important;
|
||||
border-radius: 2px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.el-collapse-item__content {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,94 @@
|
||||
.detection-drawer {
|
||||
padding: 20px;
|
||||
height: 100%;
|
||||
overflow: scroll;
|
||||
|
||||
.el-drawer {
|
||||
width: 440px !important;
|
||||
}
|
||||
.el-collapse-item__content {
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.el-overlay {
|
||||
top: 100px !important;
|
||||
background-color: rgba(0, 0, 0, 0.16) !important;
|
||||
}
|
||||
|
||||
.detection-drawer-title, .basic-function-value, basic-description-value {
|
||||
font-family: NotoSansSChineseRegular;
|
||||
font-size: 14px;
|
||||
color: #717171;
|
||||
font-weight: 400;
|
||||
line-height: 14px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.drawer-basic {
|
||||
.drawer-basic-header {
|
||||
font-family: NotoSansHans-Black;
|
||||
font-size: 16px;
|
||||
color: #353636;
|
||||
font-weight: 900;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.drawer-basic-id {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.drawer-basic-function, .drawer-basic-description {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.detection-drawer-title {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.basic-description-value {
|
||||
font-family: NotoSansSChineseRegular;
|
||||
font-size: 14px;
|
||||
color: #353636;
|
||||
line-height: 18px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.basic-function-value {
|
||||
color: #046ECA;
|
||||
}
|
||||
|
||||
.detection-drawer-collapse {
|
||||
background: #FFFFFF;
|
||||
border: 1px solid rgba(226, 229, 236, 1);
|
||||
border-radius: 4px;
|
||||
//box-shadow: 0 1px 0 0 rgba(226, 229, 236, 1);
|
||||
|
||||
.el-collapse-item__header {
|
||||
height: 32px !important;
|
||||
background-color: #F7F7F7 !important;
|
||||
padding-left: 12px !important;
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
|
||||
.drawer-collapse-content {
|
||||
padding: 20px 20px 0;
|
||||
|
||||
.detection__icon {
|
||||
width: 4px;
|
||||
height: 12px;
|
||||
border-radius: 2px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.drawer-collapse-trigger {
|
||||
font-family: NotoSansSChineseRegular;
|
||||
font-size: 14px;
|
||||
color: #353636;
|
||||
line-height: 18px;
|
||||
font-weight: 400;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,96 +1,165 @@
|
||||
.detection-filter-case {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 280px;
|
||||
padding: 10px;
|
||||
margin-right: 10px;
|
||||
background-color: white;
|
||||
overflow: auto;
|
||||
//.detection-filter-case {
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
// width: 280px;
|
||||
// padding: 10px;
|
||||
// margin-right: 10px;
|
||||
// background-color: white;
|
||||
// overflow: auto;
|
||||
//
|
||||
// .detection-filter {
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
// margin-bottom: 10px;
|
||||
//
|
||||
// .filter__header {
|
||||
// display: flex;
|
||||
// flex: 0 0 32px;
|
||||
// align-items: center;
|
||||
// padding-left: 10px;
|
||||
// color: #666;
|
||||
// //background-color: #F3F7FA;
|
||||
// cursor: pointer;
|
||||
//
|
||||
// span {
|
||||
// font-size: 14px;
|
||||
// padding-left: 6px;
|
||||
// }
|
||||
// i {
|
||||
// font-size: 12px;
|
||||
// transition: all linear .1s;
|
||||
// transform: rotate(0) translate(0, 2px);
|
||||
// }
|
||||
// i.arrow-rotate {
|
||||
// transform: rotate(90deg) translate(2px, 3px);
|
||||
// }
|
||||
// .new-detection-filter-header-title {
|
||||
// font-size: 14px;
|
||||
// color: #353636;
|
||||
// font-weight: 600;
|
||||
// }
|
||||
// .new-detection-filter-icon {
|
||||
// margin-left: 8px;
|
||||
// margin-bottom: 2px;
|
||||
// font-weight: bold !important;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// .filter__body {
|
||||
// padding: 5px 0 0 15px;
|
||||
//
|
||||
// .el-checkbox-group {
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
//
|
||||
// .el-checkbox {
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// padding: 5px 0;
|
||||
// margin-right: 5px;
|
||||
// .el-checkbox__label {
|
||||
// width: 100%;
|
||||
// }
|
||||
//
|
||||
// .filter__checkbox-label {
|
||||
// display: flex;
|
||||
// justify-content: space-between;
|
||||
// align-items: center;
|
||||
//
|
||||
// .severity-color-block {
|
||||
// width: 4px;
|
||||
// height: 15px;
|
||||
// border-radius: 2px;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// &:last-of-type {
|
||||
// padding-bottom: 0;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// .new-detection-filter-title {
|
||||
// display: flex;
|
||||
// flex: 0 0 32px;
|
||||
// align-items: center;
|
||||
// padding-left: 27px;
|
||||
// background-color: #EFF2F5;
|
||||
// cursor: pointer;
|
||||
// font-size: 14px;
|
||||
// color: #353636;
|
||||
// font-weight: 600;
|
||||
// margin: -10px;
|
||||
// margin-bottom: 10px;
|
||||
// }
|
||||
//}
|
||||
.detection-filter-title {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
background: #F7F7F7;
|
||||
padding: 0 20px;
|
||||
box-shadow: 0 1px 0 0 rgba(226, 229, 236, 1);
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
.detection-filter-content {
|
||||
padding: 20px;
|
||||
|
||||
.detection-filter {
|
||||
.filter-content-title {
|
||||
font-family: NotoSansHans-Medium;
|
||||
font-size: 14px;
|
||||
line-height: 14px;
|
||||
margin-bottom: 10px;
|
||||
color: #353636;
|
||||
font-weight: 500;
|
||||
}
|
||||
.filter-content-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.filter__header {
|
||||
display: flex;
|
||||
flex: 0 0 32px;
|
||||
align-items: center;
|
||||
padding-left: 10px;
|
||||
color: #666;
|
||||
//background-color: #F3F7FA;
|
||||
cursor: pointer;
|
||||
.filter-content-checkbox {
|
||||
line-height: 16px;
|
||||
margin-bottom: 10px;
|
||||
font-family: NotoSansSChineseRegular;
|
||||
font-size: 14px;
|
||||
color: #353636;
|
||||
font-weight: 400;
|
||||
|
||||
span {
|
||||
font-size: 14px;
|
||||
padding-left: 6px;
|
||||
.el-checkbox__inner {
|
||||
width: 16px !important;
|
||||
height: 16px !important;
|
||||
text-align: center !important;
|
||||
line-height: 16px !important;
|
||||
}
|
||||
i {
|
||||
font-size: 12px;
|
||||
transition: all linear .1s;
|
||||
transform: rotate(0) translate(0, 2px);
|
||||
|
||||
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
|
||||
border-color: #38ACD2;
|
||||
background: #38ACD2;
|
||||
border-radius: 2px;
|
||||
}
|
||||
i.arrow-rotate {
|
||||
transform: rotate(90deg) translate(2px, 3px);
|
||||
.el-checkbox__input.is-indeterminate .el-checkbox__inner:before {
|
||||
background: #FFFFFF;
|
||||
border-radius: 1px;
|
||||
}
|
||||
.new-detection-filter-header-title {
|
||||
font-size: 14px;
|
||||
color: #353636;
|
||||
font-weight: 600;
|
||||
}
|
||||
.new-detection-filter-icon {
|
||||
margin-left: 8px;
|
||||
margin-bottom: 2px;
|
||||
font-weight: bold !important;
|
||||
}
|
||||
}
|
||||
|
||||
.filter__body {
|
||||
padding: 5px 0 0 15px;
|
||||
|
||||
.el-checkbox-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.el-checkbox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 5px 0;
|
||||
margin-right: 5px;
|
||||
.el-checkbox__label {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.filter__checkbox-label {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.severity-color-block {
|
||||
width: 4px;
|
||||
height: 15px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.el-checkbox__input.is-checked {
|
||||
.el-checkbox__inner {
|
||||
border-color: #38ACD2;
|
||||
background: #38ACD2;
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
.el-checkbox__input.is-focus {
|
||||
.el-checkbox__inner {
|
||||
border-color: #38ACD2;
|
||||
}
|
||||
}
|
||||
|
||||
.el-checkbox__label {
|
||||
font-family: NotoSansSChineseRegular;
|
||||
font-size: 14px;
|
||||
color: #353636;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
.new-detection-filter-title {
|
||||
display: flex;
|
||||
flex: 0 0 32px;
|
||||
align-items: center;
|
||||
padding-left: 27px;
|
||||
background-color: #EFF2F5;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
color: #353636;
|
||||
font-weight: 600;
|
||||
margin: -10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,83 @@
|
||||
|
||||
.detection-table {
|
||||
.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;
|
||||
}
|
||||
.el-table--border th {
|
||||
font-family: NotoSansHans-Medium;
|
||||
font-weight: 500;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.el-table__header-wrapper {
|
||||
height: 32px !important;
|
||||
line-height: 32px !important;
|
||||
border-bottom: 1px solid #EBEEF5;
|
||||
}
|
||||
|
||||
.el-table__body td {
|
||||
font-family: NotoSansSChineseRegular;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.el-table__row {
|
||||
height: 32px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.detection-tag-blue, .detection-tag-red, .detection-tag-gray, .detection-tag-status0, .detection-tag-status1 {
|
||||
display: inline-block;
|
||||
border-radius: 10px;
|
||||
font-family: NotoSansSChineseRegular;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
padding: 1px 12px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.detection-tag-blue {
|
||||
background: rgba(56, 172, 210, 0.10);
|
||||
box-shadow: 0 2px 4px 0 rgba(51, 51, 51, 0.02);
|
||||
color: #046ECA;
|
||||
}
|
||||
|
||||
.detection-tag-red {
|
||||
background: rgba(226, 97, 84, 0.12);
|
||||
color: #E26154;
|
||||
}
|
||||
|
||||
.detection-tag-gray {
|
||||
background: rgba(113, 113, 113, 0.12);
|
||||
color: #717171;
|
||||
}
|
||||
|
||||
.detection-tag-status0 {
|
||||
font-weight: 500;
|
||||
font-family: NotoSansHans-Medium;
|
||||
background: rgba(113, 113, 113, 0.12);
|
||||
color: #717171;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.detection-tag-status1 {
|
||||
font-weight: 500;
|
||||
font-family: NotoSansHans-Medium;
|
||||
background: rgba(126, 159, 84, 0.12);
|
||||
color: #7E9F54;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.detection-table-library {
|
||||
font-family: NotoSansSChineseRegular;
|
||||
font-size: 12px;
|
||||
color: #046ECA;
|
||||
font-weight: 400;
|
||||
}
|
||||
154
src/assets/css/components/views/detections/detection-tools.scss
Normal file
154
src/assets/css/components/views/detections/detection-tools.scss
Normal file
@@ -0,0 +1,154 @@
|
||||
.top-tools__left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
|
||||
.top-tool-btn {
|
||||
cursor: pointer;
|
||||
height: 28px;
|
||||
width: 28px;
|
||||
border: 1px solid #DEDEDE;
|
||||
outline: none;
|
||||
border-radius: 2px;
|
||||
background-color: #F9F9F9;
|
||||
transition: background-color linear .1s;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
//font-family: $fontFamily !important;
|
||||
i {
|
||||
font-size: 14px;
|
||||
color: #575757;
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.top-tool-btn:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.66;
|
||||
|
||||
i {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.top-tool-btn:hover:not(.cn-btn-disabled) {
|
||||
border: 1px solid #DEDEDE;
|
||||
background-color: #EBF1F4;
|
||||
}
|
||||
|
||||
.top-tool-btn:focus:not(.cn-btn-disabled), .top-tool-btn.is-focus {
|
||||
background-color: #E0E7EA;
|
||||
border: 1px solid #DEDEDE;
|
||||
|
||||
i {
|
||||
color: #575757;
|
||||
}
|
||||
}
|
||||
|
||||
.top-tool-btn--delete.top-tool-btn:focus:not(.cn-btn-disabled) {
|
||||
background-color: #EBF1F4;
|
||||
border-color: #FFC4B9;
|
||||
|
||||
i {
|
||||
color: #F0745A;
|
||||
}
|
||||
}
|
||||
|
||||
.top-tool-btn--create {
|
||||
background-color: #38ACD2 !important;
|
||||
border-color: #2E88A6 !important;
|
||||
color: #FFFFFF;
|
||||
|
||||
i {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
.top-tool-btn--create:hover {
|
||||
background-color: #57B8D9 !important;
|
||||
border-color: #2E88A6 !important;
|
||||
color: #FFFFFF;
|
||||
|
||||
i {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
.top-tool-btn--create:focus {
|
||||
background-color: #31A5CD !important;
|
||||
border-color: #2E88A6 !important;
|
||||
color: #FFFFFF !important;
|
||||
|
||||
i {
|
||||
color: #FFFFFF !important;
|
||||
}
|
||||
}
|
||||
|
||||
.top-tool-btn--create:disabled {
|
||||
opacity: 0.66;
|
||||
background-color: #38ACD2 !important;
|
||||
border-color: #2E88A6 !important;
|
||||
color: #FFFFFF;
|
||||
|
||||
i {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
.top-tool-search {
|
||||
display: flex;
|
||||
width: 242px; //calc(100% - 256px);
|
||||
.el-input--small {
|
||||
line-height: 27px;
|
||||
|
||||
.el-input__inner {
|
||||
height: 28px;
|
||||
border-radius: 2px 0 0 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.top-tool-btn {
|
||||
border-left: none;
|
||||
border-radius: 0 2px 2px 0 !important;
|
||||
}
|
||||
|
||||
.top-tool-btn--search:hover {
|
||||
border-left: none !important;
|
||||
border-radius: 0 2px 2px 0 !important;
|
||||
}
|
||||
|
||||
.top-tool-btn--search:focus {
|
||||
border-left: none !important;
|
||||
border-radius: 0 2px 2px 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.top-tool-search {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
||||
.el-input--small {
|
||||
line-height: 27px;
|
||||
|
||||
.el-input__inner {
|
||||
height: 28px;
|
||||
border-radius: 2px 0 0 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.top-tool-btn {
|
||||
border-left: none;
|
||||
border-radius: 0 2px 2px 0 !important;
|
||||
}
|
||||
|
||||
.top-tool-btn--search:hover {
|
||||
border-left: none !important;
|
||||
border-radius: 0 2px 2px 0 !important;
|
||||
}
|
||||
|
||||
.top-tool-btn--search:focus {
|
||||
border-left: none !important;
|
||||
border-radius: 0 2px 2px 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user