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

fix: 实体关系模块右侧列表详情样式调整

Browse Source
This commit is contained in:
刘洪洪
2023-06-30 10:41:29 +08:00
parent 30883802cb
commit 0e752cb3a3
6 changed files with 138 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,11 +1,23 @@
$font-size: 14px;
$font-size: 12px;
.graph-detail-basic-info {
position: relative;
padding-bottom: 20px;
padding-bottom: 12px;
display: flex;
justify-content: space-between;
//height: 100%;
.graph-detail-header {
display: flex;
flex-direction: column;
.entity-graph-type {
font-family: NotoSansSChineseRegular;
font-size: 12px;
color: #717171;
font-weight: 400;
}
}
.entity-type {
color: #717171;
}
@@ -31,8 +43,8 @@ $font-size: 14px;
display: flex;
justify-content: center;
align-items: center;
height: 28px;
width: 28px;
height: 18px;
width: 18px;
border-radius: 50%;
background-color: #EFF1F4;
cursor: pointer;
@@ -40,15 +52,16 @@ $font-size: 14px;
i {
color: #717171;
font-size: 12px;
font-size: 10px;
-webkit-transform: scale(0.8); // 强制给文字进行缩放，达到12px以下小字体的效果
}
}
}
}
.graph-detail__icon {
width: 52px;
height: 52px;
width: 50px;
height: 50px;
overflow: hidden;
display: flex;
justify-content: center;
@@ -56,7 +69,7 @@ $font-size: 14px;
align-items: center;
margin-right: 10px;
border-radius: 50%;
background-color: #e5edf3;
background-color: #F3F7FA;
i {
font-size: 26px;
@@ -72,7 +85,8 @@ $font-size: 14px;
}
.graph-basic-info__block {
margin: 10px 0;
margin-top: 12px;
margin-bottom: 18px;
.graph-header__icon {
width: 3px !important;
@@ -103,6 +117,7 @@ $font-size: 14px;
color: #353636;
font-weight: 400;
overflow-wrap: break-word;
line-height: normal;
}
}
@@ -117,18 +132,21 @@ $font-size: 14px;
.graph-relationship-item-label, .graph-relationship-item-value {
font-family: NotoSansSChineseRegular;
font-size: $font-size; // 原型上为12px，呈现效果不好，后续再调节
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;
}
}
}
@@ -143,7 +161,13 @@ $font-size: 14px;
margin-bottom: 10px;
margin-right: 9px;
padding: 0 8px;
height: 24px;
line-height: 24px;
font-size: 12px;
span {
margin-top: -2px;
}
}
}
}
@@ -152,6 +176,10 @@ $font-size: 14px;
padding-bottom: 10px;
}
.padding-b-4 {
padding-bottom: 4px;
}
//修改popover样式
.graph-popover {
width: auto !important;
@@ -165,6 +193,16 @@ $font-size: 14px;
background: #303133 !important;
}
.graph-expand-relationship__icon:hover {
.graph-expand-relationship__icon {
font-size: 13px;
&:hover {
color: #D80000 !important;
}
}
.graph-basic-info__block-title {
font-family: NotoSansHans-Medium;
font-size: 13px;
color: #353636;
font-weight: 600;
}

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

@@ -1,4 +1,4 @@
$font-size: 14px;
$font-size: 12px;
.graph-list-header {
display: flex;
justify-content: space-between;
@@ -6,7 +6,7 @@ $font-size: 14px;
.graph-list-header-title {
display: flex;
align-items: center;
margin-bottom: 14px;
margin-bottom: 10px;
span {
font-family: PingFangSC-Semibold;
@@ -25,7 +25,7 @@ $font-size: 14px;
.graph-list-header-number {
font-family: NotoSansSChineseRegular;
font-size: 14px;
font-size: 12px;
color: #717171;
font-weight: 400;
@@ -36,46 +36,47 @@ $font-size: 14px;
}
.graph-list-expand-btn-block {
margin-top: 20px;
margin-bottom: 30px;
margin-top: 16px;
margin-bottom: 24px;
.graph-list-expand-btn {
width: 90px;
height: 28px;
line-height: 28px;
background: #38ACD2;
border: 1px solid rgba(46, 136, 166, 0.85);
border-radius: 2px;
span {
border-radius: 4px;
font-size: 12px;
color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
font-family: NotoSansHans-Medium;
font-weight: 500;
padding: 10px 0;
cursor: pointer;
i {
font-size: 18px;
font-size: 16px;
margin-right: 7px;
}
}
&.el-button {
padding: 8px 10px !important;
}
}
}
.graph-list-content-header {
font-family: NotoSansHans-Medium;
font-size: 14px;
color: #353636;
font-weight: bold;
font-weight: 500;
}
.graph-list-content {
padding: 0 10px;
.graph-list-item-ip {
margin-bottom: 12px;
margin-bottom: 10px;
font-family: NotoSansSChineseRegular;
font-size: $font-size;
color: #353636;
font-weight: 600;
font-weight: 400;
cursor: pointer;
&:hover {
@@ -88,29 +89,31 @@ $font-size: 14px;
background: rgba(247, 247, 247, 1);
border: 1px solid rgba(226, 229, 236, 1);
border-radius: 2px;
padding: 15px;
padding: 10px 15px;
.graph-list-item, .graph-list-item__app {
display: flex;
.graph-list-item-label, .graph-list-item-label__app {
width: 62px;
margin-right: 15px;
//margin-right: 15px;
font-family: NotoSansSChineseRegular;
font-size: $font-size; // 原型上为12px，但页面呈现效果不好
font-size: $font-size;
color: #717171;
font-weight: 400;
flex-shrink: 0;
}
.graph-list-item-label__app {
width: 78px;
line-height: 24px;
width: 73px;
display: flex;
align-items: flex-start;
line-height: 22px;
}
.graph-list-country-flag {
width: 20px;
height: 18px;
width: 16px;
height: 14px;
margin-right: 5px;
}
@@ -119,6 +122,9 @@ $font-size: 14px;
font-size: $font-size;
color: #353636;
font-weight: 400;
line-height: 18px;
display: flex;
align-items: center;
}
.graph-list-item-value1 {
@@ -137,9 +143,17 @@ $font-size: 14px;
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: 12px 0;
margin: 11px 0;
}

20
src/assets/css/components/views/entityExplorer/entityList/detail-overview.scss
View File

@@ -34,6 +34,7 @@
.overview__title {
color: #333;
font-size: 14px;
font-weight: 600;
}
.overview__content-loading.overview__content {
position: relative;
@@ -130,6 +131,9 @@
background-color: #F6C738;
}
}
&.row__content--width90 {
width: 90px;
}
&.row__content--width200 {
width: 200px;
}
@@ -144,7 +148,7 @@
}
.row__contents {
display: flex;
flex-direction: column;
//flex-direction: column;
.row__content {
padding: 2px 0;
@@ -157,14 +161,21 @@
padding-bottom: 0;
}
}
.row__content-accept {
margin-left: 39px;
}
.row__charts-msg {
width: auto;
padding-right: 20px;
padding-right: 10px;
}
.new-row__charts-msg {
width: auto;
padding-right: 10px;
}
.row__charts {
height: 20px;
width: 60px;
padding-left: 5px;
//padding-left: 5px;
}
}
.row__charts {
@@ -292,3 +303,6 @@
}
}
}
.margin-l-140 {
margin-left: 140px;
}

4
src/views/entityExplorer/entityGraphDetail/AppOrDomainList.vue
View File

@@ -6,7 +6,7 @@
<i class="graph-list-header-icon" :class="entityIcon"></i>
<span>{{ $t(entityName) }}</span>
</div>
<div class="graph-list-header-number" style="margin-bottom: 30px">
<div class="graph-list-header-number" style="margin-bottom: 24px">
{{ $t('entity.graph.associatedQuantity') }}：<span>2</span>
</div>
</div>
@@ -16,7 +16,7 @@
<div>
<div class="digital-certificate">
<div class="digital-certificate-header padding-b-20">
<div class="digital-certificate-header padding-b-12">
<div class="digital-certificate-header__icon graph-header__icon"></div>
<div class="graph-list-content-header ">
{{ $t('entity.graph.expandedEntityQuantity') }}:&nbsp;&nbsp;

20
src/views/entityExplorer/entityGraphDetail/GraphDetail.vue
View File

@@ -4,7 +4,7 @@
<div style="display: flex">
<div class="graph-detail__icon"><i :class="iconClass"></i></div>
<div style="display: flex;flex-direction: column;">
<div class="graph-detail-header">
<div class="entity-graph-type">{{ entityType[entity.entityType] }}</div>
<div class="graph-basic-info">
<div class="graph-basic-info-name__block">
@@ -24,7 +24,7 @@
<div class="digital-certificate graph-basic-info__block">
<div class="digital-certificate-header padding-b-10">
<div class="digital-certificate-header__icon graph-header__icon"></div>
<div class="digital-certificate-header-name">
<div class="graph-basic-info__block-title">
{{ $t('overall.basicInfo') }}
</div>
</div>
@@ -41,12 +41,12 @@
<div class="digital-certificate graph-basic-info__block">
<div class="digital-certificate-header padding-b-10">
<div class="digital-certificate-header__icon graph-header__icon"></div>
<div class="digital-certificate-header-name">
<div class="graph-basic-info__block-title">
{{ $t('entity.graph.relationshipExpansion') }}
</div>
</div>
<div class="graph-basic-info__block-content">
<div class="graph-basic-info__block-content" style="margin-top: -4px;">
<div v-for="item in relationList" :key="item.name" @click="expandRelation(item.name)">
<el-popover
v-if="item.value.length === item.total"
@@ -72,7 +72,7 @@
<div v-else class="graph-content-item graph-content-relationship-item">
<div class="graph-relationship-item-label">
<i class="margin-r-6" :class="item.icon"></i>
<i class="graph-relationship-item-label-icon margin-r-6" :class="item.icon"></i>
<span>{{ item.label }}：</span>
</div>
<div class="graph-relationship-item-value">
@@ -94,7 +94,7 @@
<div class="digital-certificate graph-basic-info__block">
<div class="digital-certificate-header padding-b-10">
<div class="digital-certificate-header__icon graph-header__icon"></div>
<div class="digital-certificate-header-name">
<div class="graph-basic-info__block-title">
{{ $t('entity.graph.labels') }}
</div>
</div>
@@ -103,7 +103,7 @@
<div class="graph-tag-list">
<div v-for="ic in tagList" :key="ic.key">
<div class="entity-tag graph-tag-item" :class="`entity-tag--level-two-${ic.type}`">
{{ic.value}}
<span>{{ic.value}}</span>
</div>
</div>
</div>
@@ -185,10 +185,10 @@ export default {
switch (props.entity.entityType) {
case 'ip': {
detailCards.value = _.concat(detailCards.value,
{ name: 'asn', label: 'ASN', value: '' },
{ name: 'asn', label: i18n.global.t('entities.asNumber'), value: '' },
{ name: 'asOrg', label: i18n.global.t('entities.asOrg'), value: '' },
// { name: 'asSubnet', label: i18n.global.t('entities.asSubnet'), value: '' },
{ name: 'isp', label: 'ISP', value: '' },
{ name: 'asSubnet', label: i18n.global.t('entities.asSubnet'), value: '' },
{ name: 'isp', label: i18n.global.t('entities.graph.isp'), value: '' },
{ name: 'location', label: i18n.global.t('entities.geographicLocation'), value: '' }
// { name: 'dnsPtr', label: 'DNS PTR', value: '' }
)

18
src/views/entityExplorer/entityGraphDetail/IpList.vue
View File

@@ -15,17 +15,21 @@
</div>
<div class="graph-list-expand-btn-block">
<el-button type="primary" class="graph-list-expand-btn">
<span>
<div class="graph-list-expand-btn">
<i class="cn-icon cn-icon-expand-continue graph-expand-continue"></i>
{{ $t('entity.graph.continueToExpand') }}
</span>
</el-button>
</div>
<!-- <el-button type="primary" class="graph-list-expand-btn">-->
<!-- <span>-->
<!-- <i class="cn-icon cn-icon-expand-continue graph-expand-continue"></i>-->
<!-- {{ $t('entity.graph.continueToExpand') }}-->
<!-- </span>-->
<!-- </el-button>-->
</div>
<div>
<div class="digital-certificate">
<div class="digital-certificate-header padding-b-20">
<div class="digital-certificate-header padding-b-16">
<div class="digital-certificate-header__icon graph-header__icon"></div>
<div class="graph-list-content-header ">
{{ $t('entity.graph.expandedEntityQuantity') }}:&nbsp;&nbsp;
@@ -37,9 +41,9 @@
<div v-for="(item, index) in ipList" :key="index" @mouseenter="onMouseenter(item)">
<div class="graph-list-item-ip"><span @click="expandDetail">{{ item.ip }}</span></div>
<div class="graph-list-item-block">
<div class="graph-list-item padding-b-10">
<div class="graph-list-item padding-b-4">
<div class="graph-list-item-label">{{ $t('overall.location') }}:</div>
<div class="graph-list-item-value graph-list-item-value1">
<div class="graph-list-item-value graph-list-item-value1" style="display: flex;align-items: center;">
<img :src="require(`../../../../public/images/flag/${item.flag}.svg`)" class="graph-list-country-flag"/>
<span>{{ item.city }}</span>
</div>