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

CN-80 fix:entity实体列表样式调整

Browse Source
This commit is contained in:
晶晶 张
2021-08-03 16:04:28 +08:00
parent 6e07d7b269
commit f37964c12d
3 changed files with 88 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/assets/css/theme.scss
View File

@@ -21,24 +21,24 @@ $--collapse-border-color: #EFF2F5;
/* 自适应变量 */ /* 自适应变量 */
@media only screen and (min-width : 10px) { @media only screen and (min-width : 10px) {
--chart-height-unit: 25px; // chart的单元高度 --chart-height-unit: 25px; // chart的单元高度
--entity-width: calc(50% - 5px); // entity列表每个entity框的宽度 /* --entity-width: calc(50% - 5px); // entity列表每个entity框的宽度
--entity-height: 190px; // entity列表每个entity框的高度 --entity-height: 190px; // entity列表每个entity框的高度*/
} }
@media only screen and (min-width : 1224px) { @media only screen and (min-width : 1224px) {
--chart-height-unit: 30px; --chart-height-unit: 30px;
} }
@media only screen and (min-width : 1560px) { /* @media only screen and (min-width : 1560px) {
--entity-width: calc(33.3% - 7px); --entity-width: calc(33.3% - 7px);
} }*/
@media only screen and (min-width : 1824px) { @media only screen and (min-width : 1824px) {
--chart-height-unit: 40px; --chart-height-unit: 40px;
--entity-width: calc(33.3% - 7px); /* --entity-width: calc(33.3% - 7px);
--entity-height: 210px; --entity-height: 210px;*/
} }
@media only screen and (min-width : 2424px) { @media only screen and (min-width : 2424px) {
--chart-height-unit: 55px; --chart-height-unit: 55px;
--entity-width: calc(25% - 8px); /* --entity-width: calc(25% - 8px);
--entity-height: 240px; --entity-height: 240px;*/
} }
} }

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

@@ -3,9 +3,9 @@
<div class="entity-list__content"> <div class="entity-list__content">
<div class="cn-entity" v-for="d in listData" :key="d.id"> <div class="cn-entity" v-for="d in listData" :key="d.id">
<div class="cn-entity__header"> <div class="cn-entity__header">
<div class="header__icon" :style="{backgroundColor: circleColor}"><i :class="iconClass"></i></div> <div class="header__icon"><i :class="iconClass"></i></div>
<div class="header__content"> <div class="header__content">
<div class="content__title"> <div class="content__title" :title="d.ip||d.domainName||d.appName">
<template v-if="entityType === 'ip'">{{d.ip || 'Unknown'}}</template> <template v-if="entityType === 'ip'">{{d.ip || 'Unknown'}}</template>
<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>
@@ -32,11 +32,11 @@
<span class="body__row-label">{{$t('overall.region')}}:</span> <span class="body__row-label">{{$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"> <div class="body__row Select">
<span class="body__row-label">{{$t('entities.asn')}}:</span> <span class="body__row-label">{{$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">
@@ -47,11 +47,11 @@
<span class="body__row-label">{{$t('entities.categoryName')}}:</span> <span class="body__row-label">{{$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"> <div class="body__row Select">
<span class="body__row-label">{{$t('entities.creditScore')}}:</span> <span class="body__row-label">{{$t('entities.creditScore')}}:</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">
@@ -62,11 +62,11 @@
<span class="body__row-label">{{$t('entities.category')}}:</span> <span class="body__row-label">{{$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"> <div class="body__row Select">
<span class="body__row-label">{{$t('entities.subcategory')}}:</span> <span class="body__row-label">{{$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>
</template> </template>
</div> </div>
</div> </div>

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

@@ -6,7 +6,7 @@
padding: 20px; padding: 20px;
height: 100%; height: 100%;
width: 100%; width: 100%;
background-color: #fff; background-color: #EBEEF1;
.entity-list { .entity-list {
height: 100%; height: 100%;
@@ -14,36 +14,68 @@
overflow: hidden; overflow: hidden;
.entity-list__content { .entity-list__content {
display: grid; /* display: grid;
grid-template-columns: repeat(auto-fill, var(--entity-width)); grid-template-columns: repeat(auto-fill, var(--entity-width));
grid-auto-flow: row; grid-auto-flow: row;
grid-auto-rows: var(--entity-height); grid-auto-rows: var(--entity-height);*/
grid-gap: 10px; /* grid-gap: 10px;*/
display: flex;
flex-wrap: wrap;
display: -webkit-flex;
justify-content: space-between;
border-radius: 2px;
height: calc(100% - 67px); height: calc(100% - 67px);
width: 100%; width: 100%;
overflow: auto; overflow: auto;
.cn-entity:hover{
box-shadow: inset 0 0 10px #ccc;
.cn-entity__header{
background: #8FA1BE;
}
.header__icon{
background: #8FA1BE;
border: 2px solid #FFFFFF;
}
}
.cn-entity { .cn-entity {
display: grid; /* display: grid;
grid-template-rows: 44% 56%; grid-template-rows: 44% 56%;*/
box-sizing: border-box;
margin: 14px 13px;
width: 240px;
height: 290px;
background: #FFFFFF;
border-radius: 2px;
border: 1px solid $--right-box-border-color; border: 1px solid $--right-box-border-color;
.cn-entity__header { .cn-entity__header {
position: relative;
background: #E1E6ED;
display: flex; display: flex;
align-items: center; align-items: center;
padding: 20px; padding: 20px;
width: 240px;
height: 96.61px;
box-sizing: border-box;
.header__icon { .header__icon {
overflow: hidden;
position: absolute;
bottom: -26px;
right: 102px;
display: flex; display: flex;
justify-content: center; justify-content: center;
justify-items: center; justify-items: center;
align-items: center; align-items: center;
width: 52px; width: 44px;
height: 52px; height: 44px;
border-radius: 50%; border-radius: 50%;
background: #B8C1D1;
i { i {
font-size: 20px; font-size: 20px;
color: #ffffff;
} }
} }
.header__content { .header__content {
@@ -53,9 +85,16 @@
padding-left: 10px; padding-left: 10px;
.content__title { .content__title {
font-size: 22px; font-family: Roboto-Medium;
color: #333333; margin-left: 24px;
font-weight: bold; font-size: 20px;
color: #828790;
font-weight: 500;
width: 125px;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
white-space: nowrap;
} }
.content__desc { .content__desc {
font-size: 14px; font-size: 14px;
@@ -71,25 +110,38 @@
} }
.cn-entity__body { .cn-entity__body {
overflow: hidden; overflow: hidden;
padding-top: 34px;
font-size: 14px;
.body__row { .body__row {
display: flex; display: flex;
padding: 0 0 0 20px; width:200px;
margin:5px auto;
color: #666; color: #666;
overflow-y: scroll;
border-bottom: 1px solid #EFF2F5;
.body__row-label { .body__row-label {
padding-right: 15px; padding-right: 15px;
} }
.body__row-value { .body__row-value {
width: calc(100% - 150px); width: calc(100% - 69px);
height:31px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow-y: scroll;
}
.body__row-value::-webkit-scrollbar{
display: none;
} }
} }
.body__detail { .body__detail {
padding: 10px 0 0 20px; padding: 1px 0 0 156px;
color: $--color-primary;
cursor: pointer; cursor: pointer;
font-family: Roboto-Regular;
font-size: 14px;
color: #8FA1BE;
font-weight: 400;
} }
} }
@@ -112,3 +164,8 @@
.app-orange { .app-orange {
color: #FFA200; color: #FFA200;
} }
.Select{
border-bottom: 0px !important;
}