gfwleak/cyber-narrator-cn-ui
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CN-1087 fix: 关系图逻辑重构交互优化

Browse Source
This commit is contained in:
chenjinsong
2023-07-30 23:29:32 +08:00
parent 80195f3f37
commit fd6f1b563d
10 changed files with 2017 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

205
src/assets/css/components/views/charts2/graphRightDetailBlock.scss
View File

@@ -1,205 +0,0 @@
$font-size: 12px;
.graph-detail-basic-info {
position: relative;
padding-bottom: 12px;
display: flex;
justify-content: space-between;
//height: 100%;
.graph-detail-header {
display: flex;
flex-direction: column;
.entity-graph-type {
font-size: 12px;
color: #717171;
font-weight: 400;
}
}
.entity-type {
color: #717171;
}
.graph-basic-info {
display: flex;
align-items: center;
justify-content: space-between;
.graph-basic-info-name__block {
display: flex;
align-items: center;
.graph-basic-info-name {
padding-right: 10px;
max-width: 260px;
font-size: 20px;
color: #353636;
font-weight: 700;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.graph-basic-info-icon {
display: flex;
justify-content: center;
align-items: center;
height: 18px;
width: 18px;
border-radius: 50%;
background-color: #EFF1F4;
cursor: pointer;
flex-shrink: 0;
i {
color: #717171;
font-size: 10px;
-webkit-transform: scale(0.8); // 强制给文字进行缩放，达到12px以下小字体的效果
}
}
}
}
.graph-detail__icon {
width: 50px;
height: 50px;
overflow: hidden;
display: flex;
justify-content: center;
justify-items: center;
align-items: center;
margin-right: 10px;
border-radius: 50%;
background-color: #F3F7FA;
i {
font-size: 26px;
color: #4E84B4;
}
}
}
.graph-close {
color: #575757;
font-size: 8px;
cursor: pointer;
}
.graph-basic-info__block {
margin-top: 12px;
margin-bottom: 18px;
.graph-header__icon {
width: 3px !important;
height: 14px !important;
}
.graph-basic-info__block-content {
.graph-content-item, .graph-content-relationship-item {
display: flex;
line-height: 24px;
}
.graph-content-item {
.graph-content-item-label, .graph-content-item-value {
width: 130px;
font-family: NotoSansSChineseRegular;
font-size: $font-size;
color: #717171;
font-weight: 400;
padding-right: 10px;
flex-shrink: 0;
}
.graph-content-item-value {
width: 230px;
color: #353636;
font-weight: 400;
overflow-wrap: break-word;
line-height: normal;
margin-top: 0.15rem;
}
}
.graph-content-relationship-item {
justify-content: space-between;
line-height: 24px;
.graph-relationship-item-label, .graph-relationship-item-value {
font-size: $font-size;
color: #353636;
font-weight: 400;
//height: 40px;
display: flex;
align-items: center !important;
padding-top: 1px;
.graph-relationship-item-label-icon {
font-size: 14px;
}
}
.graph-relationship-item-value {
color: #717171;
i {
cursor: pointer;
}
}
}
}
.graph-tag-list {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
margin: 6px 0;
.graph-tag-item {
margin-bottom: 10px;
margin-right: 9px;
padding: 0 8px;
height: 24px;
line-height: 24px;
font-size: 12px;
span {
margin-top: -1px;
}
}
}
}
.padding-b-10 {
padding-bottom: 10px;
}
.padding-b-4 {
padding-bottom: 4px;
}
//修改popover样式
.graph-popover {
width: auto !important;
background: #303133 !important;
color: #fff !important;
font-size: 12px !important;
padding: 10px !important;
}
.graph-popover .el-popper__arrow::before {
background: #303133 !important;
}
.graph-expand-relationship__icon {
font-size: 13px;
}
.graph-basic-info__block-title {
font-size: 13px;
color: #353636;
font-weight: 600;
}

154
src/assets/css/components/views/charts2/graphRightListBlock.scss
View File

@@ -1,154 +0,0 @@
$font-size: 12px;
.graph-list-header {
display: flex;
justify-content: space-between;
.graph-list-header-title {
display: flex;
align-items: center;
margin-bottom: 10px;
span {
font-size: 16px;
color: #353636;
line-height: 21px;
font-weight: 600;
}
.graph-list-header-icon {
font-size: 21px;
color: #717171;
margin-right: 9px;
}
}
.graph-list-header-number {
font-size: 12px;
color: #717171;
font-weight: 400;
span {
font-weight: bold;
}
}
}
.graph-list-expand-btn-block {
margin-top: 16px;
margin-bottom: 24px;
.graph-list-expand-btn {
height: 28px;
line-height: 28px;
background: #38ACD2;
border-radius: 3px;
font-size: 12px;
color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
font-weight: 500;
padding: 14px 10px;
cursor: pointer;
border: 1px solid rgba(46,136,166,0.85);
i {
font-size: 16px;
margin-right: 7px;
}
&.graph-list-expand-btn--disabled {
opacity: .4;
cursor: default;
}
}
}
.graph-list-content-header {
font-size: 14px;
color: #353636;
font-weight: 500;
}
.graph-list-content {
padding: 0 10px;
.graph-list-item-ip {
margin-bottom: 10px;
font-size: $font-size;
color: #353636;
font-weight: 400;
}
.graph-list-item-block {
width: 100%;
background: rgba(247, 247, 247, 1);
border: 1px solid rgba(226, 229, 236, 1);
border-radius: 2px;
padding: 10px 15px;
.graph-list-item, .graph-list-item__app {
display: flex;
.graph-list-item-label, .graph-list-item-label__app {
width: 72px;
//margin-right: 15px;
font-size: $font-size;
color: #717171;
font-weight: 400;
flex-shrink: 0;
}
.graph-list-item-label__app {
width: 83px;
display: flex;
align-items: flex-start;
line-height: 22px;
}
.graph-list-country-flag {
width: 16px;
height: 14px;
margin-right: 5px;
}
.graph-list-item-value {
font-size: $font-size;
color: #353636;
font-weight: 400;
line-height: 18px;
display: flex;
align-items: center;
margin-top: 0.15rem;
}
.graph-list-item-value1 {
display: flex;
align-content: center;
}
}
.graph-list-item {
align-items: center;
}
}
}
.padding-b-20 {
padding-bottom: 20px;
}
.padding-b-16 {
padding-bottom: 16px;
}
.padding-b-12 {
padding-bottom: 12px;
}
.graph-list-dividing-line {
width: 300px;
height: 1px;
background: #ECECEC;
margin: 11px 0;
}