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

fix：entity实体列表样式调整

Browse Source
This commit is contained in:
晶晶 张
2021-08-04 11:04:31 +08:00
parent f37964c12d
commit dd082fdd68
2 changed files with 81 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/components/entities/EntityList.vue
View File

@@ -10,60 +10,60 @@
<template v-else-if="entityType === 'domain'">{{d.domainName || 'Unknown'}}</template> <template v-else-if="entityType === 'domain'">{{d.domainName || 'Unknown'}}</template>
<template v-else-if="entityType === 'app'">{{d.appName || 'Unknown'}}</template> <template v-else-if="entityType === 'app'">{{d.appName || 'Unknown'}}</template>
</div> </div>
<div class="content__desc" v-if="entityType !== 'ip'">
<template v-if="entityType === 'domain'">
<span class="desc__label">{{$t('entities.reputationLevel')}}:</span>
<span>{{d.reputationLevel || '-'}}</span>
</template>
<template v-else-if="entityType === 'app'">
<span class="desc__label">{{$t('entities.risk')}}:</span>
<span>{{d.appRisk || '-'}}</span>
</template>
</div>
</div> </div>
</div> </div>
<div class="cn-entity__body"> <div class="cn-entity__body" style="position: relative;">
<div class="content__desc" v-if="entityType !== 'ip'" style="color: #999999; width: 200px; position: absolute; top: 24px;right: -3px ;font-size: 12px;">
<template v-if="entityType === 'domain'" style="color: #999999; width: 200px;">
<span class="desc__label">{{$t('entities.reputationLevel')}}:</span>
<span>{{d.reputationLevel || '-'}}</span>
</template>
<template v-else-if="entityType === 'app'" style="color: #999999; width: 200px; margin:0px 35px;">
<span class="desc__label">{{$t('entities.risk')}}:</span>
<span>{{d.appRisk || '-'}}</span>
</template>
</div>
<template v-if="entityType === 'ip'"> <template v-if="entityType === 'ip'">
<div class="body__row"> <div class="body__row">
<span class="body__row-label">{{$t('overall.country')}}:</span> <span class="body__row-label cn-icon cn-icon-category tubiao">{{$t('overall.country')}}:</span>
<div class="body__row-value" :title="d.country">{{d.country || '-'}}</div> <div class="body__row-value" :title="d.country">{{d.country || '-'}}</div>
</div> </div>
<div class="body__row"> <div class="body__row">
<span class="body__row-label">{{$t('overall.region')}}:</span> <span class="body__row-label cn-icon cn-icon-position tubiao">{{$t('overall.region')}}:</span>
<div class="body__row-value" :title="d.region">{{d.region || '-'}}</div> <div class="body__row-value" :title="d.region">{{d.region || '-'}}</div>
</div> </div>
<div class="body__row Select"> <div class="body__row Select">
<span class="body__row-label">{{$t('entities.asn')}}:</span> <span class="body__row-label cn-icon cn-icon-cloud tubiao">{{$t('entities.asn')}}:</span>
<div class="body__row-value" :title="d.asn">{{d.asn || '-'}}</div> <div class="body__row-value" :title="d.asn">{{d.asn || '-'}}</div>
</div> </div>
<div class="body__detail" @click="entityDetail">{{$t('overall.detail')}}></div> <div class="body__detail" @click="entityDetail">{{$t('overall.detail')}}></div>
</template> </template>
<template v-else-if="entityType === 'domain'"> <template v-else-if="entityType === 'domain'">
<div class="body__row"> <div class="body__row">
<span class="body__row-label">{{$t('entities.categoryGroup')}}:</span> <span class="body__row-label cn-icon cn-icon-category">{{$t('entities.Group')}}:</span>
<div class="body__row-value" :title="d.categoryGroup">{{d.categoryGroup || '-'}}</div> <div class="body__row-value" :title="d.categoryGroup">{{d.categoryGroup || '-'}}</div>
</div> </div>
<div class="body__row"> <div class="body__row">
<span class="body__row-label">{{$t('entities.categoryName')}}:</span> <span class="body__row-label cn-icon cn-icon-sub-category">{{$t('entities.categoryName')}}:</span>
<div class="body__row-value" :title="d.categoryName">{{d.categoryName || '-'}}</div> <div class="body__row-value" :title="d.categoryName">{{d.categoryName || '-'}}</div>
</div> </div>
<div class="body__row Select"> <div class="body__row Select">
<span class="body__row-label">{{$t('entities.creditScore')}}:</span> <span class="body__row-label cn-icon cn-icon-risk">{{$t('entities.credit')}}:</span>
<div class="body__row-value" :title="d.reputationScore">{{d.reputationScore || '-'}}</div> <div class="body__row-value" :title="d.reputationScore">{{d.reputationScore || '-'}}</div>
</div> </div>
<div class="body__detail" @click="entityDetail({domain: d.domainName})">{{$t('overall.detail')}}></div> <div class="body__detail" @click="entityDetail({domain: d.domainName})">{{$t('overall.detail')}}></div>
</template> </template>
<template v-else-if="entityType === 'app'"> <template v-else-if="entityType === 'app'">
<div class="body__row"> <div class="body__row">
<span class="body__row-label">APP ID:</span> <span class="body__row-label cn-icon cn-icon-id">APP ID:</span>
<div class="body__row-value" :title="d.appId">{{d.appId || '-'}}</div> <div class="body__row-value" :title="d.appId">{{d.appId || '-'}}</div>
</div> </div>
<div class="body__row"> <div class="body__row">
<span class="body__row-label">{{$t('entities.category')}}:</span> <span class="body__row-label cn-icon cn-icon-category">{{$t('entities.category')}}:</span>
<div class="body__row-value" :title="d.appCategory">{{d.appCategory || '-'}}</div> <div class="body__row-value" :title="d.appCategory">{{d.appCategory || '-'}}</div>
</div> </div>
<div class="body__row Select"> <div class="body__row Select">
<span class="body__row-label">{{$t('entities.subcategory')}}:</span> <span class="body__row-label cn-icon cn-icon-sub-category">{{$t('entities.subcategory')}}:</span>
<div class="body__row-value" :title="d.appSubategory">{{d.appSubategory || '-'}}</div> <div class="body__row-value" :title="d.appSubategory">{{d.appSubategory || '-'}}</div>
</div> </div>
<div class="body__detail" @click="entityDetail({appId: d.appId})">{{$t('overall.detail')}}></div> <div class="body__detail" @click="entityDetail({appId: d.appId})">{{$t('overall.detail')}}></div>

82
src/components/entities/entities.scss
View File

@@ -29,7 +29,10 @@
overflow: auto; overflow: auto;
.cn-entity:hover{ .cn-entity:hover{
box-shadow: inset 0 0 10px #ccc; box-shadow: 0 0 10px #ccc;
.content__title{
color: #ffffff !important;
}
.cn-entity__header{ .cn-entity__header{
background: #8FA1BE; background: #8FA1BE;
} }
@@ -44,7 +47,7 @@
box-sizing: border-box; box-sizing: border-box;
margin: 14px 13px; margin: 14px 13px;
width: 240px; width: 240px;
height: 290px; height: 315px;
background: #FFFFFF; background: #FFFFFF;
border-radius: 2px; border-radius: 2px;
border: 1px solid $--right-box-border-color; border: 1px solid $--right-box-border-color;
@@ -72,6 +75,7 @@
height: 44px; height: 44px;
border-radius: 50%; border-radius: 50%;
background: #B8C1D1; background: #B8C1D1;
border: 2px solid #FFFFFF;
i { i {
font-size: 20px; font-size: 20px;
@@ -98,42 +102,48 @@
} }
.content__desc { .content__desc {
font-size: 14px; font-size: 14px;
color: #666666; color: #999999 !important;
padding-top: 3px; padding-top: 3px;
.desc__label { .desc__label {
color: #aaa; color: #aaa;
padding-right: 10px; padding-right: 10px;
} }
} }
} }
} }
.cn-entity__body { .cn-entity__body {
overflow: hidden; overflow: hidden;
padding-top: 34px; padding-top:43px;
font-size: 14px; font-size: 14px;
.body__row { .body__row {
display: flex; display: flex;
width:200px; width:200px;
margin:5px auto; margin:19px auto;
color: #666;
overflow-y: scroll;
border-bottom: 1px solid #EFF2F5; border-bottom: 1px solid #EFF2F5;
color: #666666;
}
.body__row-label { .body__row-label {
padding-right: 15px; padding-right: -5px;
} width: 284px;
.body__row-value { color: #999999;
width: calc(100% - 69px); font-size: 14px;
height:31px; font-family: PingFangSC-Regular;
overflow: hidden; font-weight: 400;
text-overflow: ellipsis;
overflow-y: scroll; }
} .body__row-value {
.body__row-value::-webkit-scrollbar{ width: calc(100% - 69px);
display: none; text-overflow: ellipsis;
} overflow: hidden;
white-space: nowrap;
font-family: PingFangSC-Regular;
font-size: 14px;
color: #666666;
line-height: 16px;
font-weight: 400;
} }
.body__detail { .body__detail {
padding: 1px 0 0 156px; padding: 1px 0 0 156px;
@@ -167,5 +177,35 @@
.Select{ .Select{
border-bottom: 0px !important; border-bottom: 0px !important;
} }
.cn-icon-position:before {
content: "\e72e";
padding: 5.5px;
font-size: 12px;}
.cn-icon-category:before {
content: "\e733";
padding: 5.5px;
font-size: 12px;
}
.cn-icon-cloud:before {
content: "\e73c";
padding: 4.5px;
font-size: 12px;
}
.cn-icon-sub-category:before {
content: "\e730";
padding: 5.5px;
font-size: 12px;
}
.cn-icon-risk:before {
content: "\e731";
padding: 5.5px;
font-size: 12px;
}
.cn-icon-id:before {
content: "\e734";
padding: 5.5px;
font-size: 12px;
}