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

1093: 实体关系探索--右侧详情信息静态页面开发

Browse Source
This commit is contained in:
刘洪洪
2023-06-29 10:46:00 +08:00
parent 7f15139a38
commit 09b37512c9
10 changed files with 1030 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/assets/css/components/index.scss
View File

@@ -85,3 +85,6 @@
@import 'views/charts2/entityDetailTabs';
@import 'views/charts2/digitalCertificate';
@import 'views/charts2/entityDetailBasicInfo';
@import "views/charts2/graphRightListBlock";
@import "views/charts2/graphRightDetailBlock";

170
src/assets/css/components/views/charts2/graphRightDetailBlock.scss Normal file
View File

@@ -0,0 +1,170 @@
$font-size: 14px;
.graph-detail-basic-info {
position: relative;
padding-bottom: 20px;
display: flex;
justify-content: space-between;
//height: 100%;
.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;
font-family: Helvetica-Bold;
font-size: 20px;
color: #353636;
font-weight: 700;
}
.graph-basic-info-icon {
display: flex;
justify-content: center;
align-items: center;
height: 28px;
width: 28px;
border-radius: 50%;
background-color: #EFF1F4;
cursor: pointer;
flex-shrink: 0;
i {
color: #717171;
font-size: 12px;
}
}
}
}
.graph-detail__icon {
width: 52px;
height: 52px;
overflow: hidden;
display: flex;
justify-content: center;
justify-items: center;
align-items: center;
margin-right: 10px;
border-radius: 50%;
background-color: #e5edf3;
i {
font-size: 26px;
color: #4E84B4;
}
}
}
.graph-close {
color: #575757;
font-size: 8px;
cursor: pointer;
}
.graph-basic-info__block {
margin: 10px 0;
.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: 100px;
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;
}
}
.graph-content-relationship-item {
justify-content: space-between;
line-height: 24px;
cursor: pointer;
&:hover {
background: rgba(135, 135, 135, 0.1);
}
.graph-relationship-item-label, .graph-relationship-item-value {
font-family: NotoSansSChineseRegular;
font-size: $font-size; // 原型上为12px，呈现效果不好，后续再调节
color: #353636;
font-weight: 400;
//height: 40px;
display: flex;
align-items: center !important;
padding-top: 1px;
}
.graph-relationship-item-value {
color: #717171;
}
}
}
.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;
font-size: 12px;
}
}
}
.padding-b-10 {
padding-bottom: 10px;
}
//修改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:hover {
color: #D80000 !important;
}

131
src/assets/css/components/views/charts2/graphRightListBlock.scss Normal file
View File

@@ -0,0 +1,131 @@
$font-size: 14px;
.graph-list-header {
display: flex;
justify-content: space-between;
.graph-list-header-title {
display: flex;
align-items: center;
margin-bottom: 14px;
span {
font-family: PingFangSC-Semibold;
font-size: 16px;
color: #353636;
line-height: 22px;
font-weight: 600;
}
.graph-list-header-icon {
font-size: 21px;
color: #717171;
margin-right: 9px;
}
}
.graph-list-header-number {
font-family: NotoSansSChineseRegular;
font-size: 14px;
color: #717171;
font-weight: 400;
span {
font-weight: bold;
}
}
}
.graph-list-expand-btn-block {
margin-top: 20px;
margin-bottom: 30px;
.graph-list-expand-btn {
background: #38ACD2;
border: 1px solid rgba(46, 136, 166, 0.85);
border-radius: 2px;
}
}
.graph-list-content-header {
font-family: NotoSansHans-Medium;
font-size: 14px;
color: #353636;
font-weight: bold;
}
.graph-list-content {
padding: 0 10px;
.graph-list-item-ip {
margin-bottom: 12px;
font-family: NotoSansSChineseRegular;
font-size: $font-size;
color: #353636;
font-weight: 600;
cursor: pointer;
&:hover {
color: #D80000;
}
}
.graph-list-item-block {
width: 300px;
background: rgba(247, 247, 247, 1);
border: 1px solid rgba(226, 229, 236, 1);
border-radius: 2px;
padding: 15px;
.graph-list-item, .graph-list-item__app {
display: flex;
.graph-list-item-label, .graph-list-item-label__app {
width: 62px;
margin-right: 15px;
font-family: NotoSansSChineseRegular;
font-size: $font-size; // 原型上为12px，但页面呈现效果不好
color: #717171;
font-weight: 400;
flex-shrink: 0;
}
.graph-list-item-label__app {
width: 78px;
line-height: 24px;
}
.graph-list-country-flag {
width: 20px;
height: 18px;
margin-right: 5px;
}
.graph-list-item-value {
font-family: NotoSansSChineseRegular;
font-size: $font-size;
color: #353636;
font-weight: 400;
}
.graph-list-item-value1 {
display: flex;
align-content: center;
}
}
.graph-list-item {
align-items: center;
}
}
}
.padding-b-20 {
padding-bottom: 20px;
}
.graph-list-dividing-line {
width: 300px;
height: 1px;
background: #ECECEC;
margin: 12px 0;
}

60
src/assets/css/components/views/entityExplorer/entityList/row.scss
View File

@@ -140,7 +140,6 @@
.row__charts {
height: 19px;
width: 60px;
padding-left: 5px;
}
}
@@ -164,29 +163,50 @@
}
}
.show-detail {
flex-shrink: 0;
padding: 0 30px;
font-size: 12px;
color: #3976CB;
//color: #2C72C6;
//font-weight: 400;
//margin-top: -17px;
// 新版实体列表改版，后续记得解开
&:hover {
cursor: pointer;
}
//i {
// font-size: 12px;
// margin-right: 5px;
//}
}
//.show-detail {
// flex-shrink: 0;
// padding: 0 30px;
// font-size: 12px;
// color: #3976CB;
// //color: #2C72C6;
// //font-weight: 400;
// //margin-top: -17px;
// // 新版实体列表改版，后续记得解开
//
// &:hover {
// cursor: pointer;
// }
//
// //i {
// // font-size: 12px;
// // margin-right: 5px;
// //}
//}
}
}
}
.new-show-detail {
flex-shrink: 0;
padding: 0 30px;
font-size: 12px;
color: #2C72C6;
font-weight: 400;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
&:hover {
cursor: pointer;
}
i {
font-size: 12px;
margin-right: 5px;
}
}
.cn-entity__detail-overview {
flex-basis: 100%;
padding: 0 10px;