CN-80 fix:entity实体列表样式调整
This commit is contained in:
晶晶 张
@@ -21,24 +21,24 @@ $--collapse-border-color: #EFF2F5;
|
||||
/* 自适应变量 */
|
||||
@media only screen and (min-width : 10px) {
|
||||
--chart-height-unit: 25px; // chart的单元高度
|
||||
--entity-width: calc(50% - 5px); // entity列表每个entity框的宽度
|
||||
--entity-height: 190px; // entity列表每个entity框的高度
|
||||
/* --entity-width: calc(50% - 5px); // entity列表每个entity框的宽度
|
||||
--entity-height: 190px; // entity列表每个entity框的高度*/
|
||||
}
|
||||
@media only screen and (min-width : 1224px) {
|
||||
--chart-height-unit: 30px;
|
||||
}
|
||||
@media only screen and (min-width : 1560px) {
|
||||
/* @media only screen and (min-width : 1560px) {
|
||||
--entity-width: calc(33.3% - 7px);
|
||||
}
|
||||
}*/
|
||||
@media only screen and (min-width : 1824px) {
|
||||
--chart-height-unit: 40px;
|
||||
--entity-width: calc(33.3% - 7px);
|
||||
--entity-height: 210px;
|
||||
/* --entity-width: calc(33.3% - 7px);
|
||||
--entity-height: 210px;*/
|
||||
}
|
||||
@media only screen and (min-width : 2424px) {
|
||||
--chart-height-unit: 55px;
|
||||
--entity-width: calc(25% - 8px);
|
||||
--entity-height: 240px;
|
||||
/* --entity-width: calc(25% - 8px);
|
||||
--entity-height: 240px;*/
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -3,9 +3,9 @@
|
||||
<div class="entity-list__content">
|
||||
<div class="cn-entity" v-for="d in listData" :key="d.id">
|
||||
<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="content__title">
|
||||
<div class="content__title" :title="d.ip||d.domainName||d.appName">
|
||||
<template v-if="entityType === 'ip'">{{d.ip || 'Unknown'}}</template>
|
||||
<template v-else-if="entityType === 'domain'">{{d.domainName || '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>
|
||||
<div class="body__row-value" :title="d.region">{{d.region || '-'}}</div>
|
||||
</div>
|
||||
<div class="body__row">
|
||||
<div class="body__row Select">
|
||||
<span class="body__row-label">{{$t('entities.asn')}}:</span>
|
||||
<div class="body__row-value" :title="d.asn">{{d.asn || '-'}}</div>
|
||||
</div>
|
||||
<div class="body__detail" @click="entityDetail">{{$t('overall.detail')}}</div>
|
||||
<div class="body__detail" @click="entityDetail">{{$t('overall.detail')}}></div>
|
||||
</template>
|
||||
<template v-else-if="entityType === 'domain'">
|
||||
<div class="body__row">
|
||||
@@ -47,11 +47,11 @@
|
||||
<span class="body__row-label">{{$t('entities.categoryName')}}:</span>
|
||||
<div class="body__row-value" :title="d.categoryName">{{d.categoryName || '-'}}</div>
|
||||
</div>
|
||||
<div class="body__row">
|
||||
<div class="body__row Select">
|
||||
<span class="body__row-label">{{$t('entities.creditScore')}}:</span>
|
||||
<div class="body__row-value" :title="d.reputationScore">{{d.reputationScore || '-'}}</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 v-else-if="entityType === 'app'">
|
||||
<div class="body__row">
|
||||
@@ -62,11 +62,11 @@
|
||||
<span class="body__row-label">{{$t('entities.category')}}:</span>
|
||||
<div class="body__row-value" :title="d.appCategory">{{d.appCategory || '-'}}</div>
|
||||
</div>
|
||||
<div class="body__row">
|
||||
<div class="body__row Select">
|
||||
<span class="body__row-label">{{$t('entities.subcategory')}}:</span>
|
||||
<div class="body__row-value" :title="d.appSubategory">{{d.appSubategory || '-'}}</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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
padding: 20px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
background-color: #EBEEF1;
|
||||
|
||||
.entity-list {
|
||||
height: 100%;
|
||||
@@ -14,36 +14,68 @@
|
||||
overflow: hidden;
|
||||
|
||||
.entity-list__content {
|
||||
display: grid;
|
||||
/* display: grid;
|
||||
grid-template-columns: repeat(auto-fill, var(--entity-width));
|
||||
grid-auto-flow: row;
|
||||
grid-auto-rows: var(--entity-height);
|
||||
grid-gap: 10px;
|
||||
grid-auto-rows: var(--entity-height);*/
|
||||
/* grid-gap: 10px;*/
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
display: -webkit-flex;
|
||||
justify-content: space-between;
|
||||
border-radius: 2px;
|
||||
height: calc(100% - 67px);
|
||||
width: 100%;
|
||||
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 {
|
||||
display: grid;
|
||||
grid-template-rows: 44% 56%;
|
||||
/* display: grid;
|
||||
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;
|
||||
|
||||
.cn-entity__header {
|
||||
position: relative;
|
||||
background: #E1E6ED;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
width: 240px;
|
||||
height: 96.61px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.header__icon {
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
bottom: -26px;
|
||||
right: 102px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 50%;
|
||||
background: #B8C1D1;
|
||||
|
||||
i {
|
||||
font-size: 20px;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
.header__content {
|
||||
@@ -53,9 +85,16 @@
|
||||
padding-left: 10px;
|
||||
|
||||
.content__title {
|
||||
font-size: 22px;
|
||||
color: #333333;
|
||||
font-weight: bold;
|
||||
font-family: Roboto-Medium;
|
||||
margin-left: 24px;
|
||||
font-size: 20px;
|
||||
color: #828790;
|
||||
font-weight: 500;
|
||||
width: 125px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
-o-text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.content__desc {
|
||||
font-size: 14px;
|
||||
@@ -71,25 +110,38 @@
|
||||
}
|
||||
.cn-entity__body {
|
||||
overflow: hidden;
|
||||
padding-top: 34px;
|
||||
font-size: 14px;
|
||||
|
||||
.body__row {
|
||||
display: flex;
|
||||
padding: 0 0 0 20px;
|
||||
width:200px;
|
||||
margin:5px auto;
|
||||
color: #666;
|
||||
overflow-y: scroll;
|
||||
border-bottom: 1px solid #EFF2F5;
|
||||
|
||||
.body__row-label {
|
||||
padding-right: 15px;
|
||||
}
|
||||
.body__row-value {
|
||||
width: calc(100% - 150px);
|
||||
width: calc(100% - 69px);
|
||||
height:31px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.body__row-value::-webkit-scrollbar{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.body__detail {
|
||||
padding: 10px 0 0 20px;
|
||||
color: $--color-primary;
|
||||
padding: 1px 0 0 156px;
|
||||
cursor: pointer;
|
||||
font-family: Roboto-Regular;
|
||||
font-size: 14px;
|
||||
color: #8FA1BE;
|
||||
font-weight: 400;
|
||||
|
||||
}
|
||||
}
|
||||
@@ -112,3 +164,8 @@
|
||||
.app-orange {
|
||||
color: #FFA200;
|
||||
}
|
||||
.Select{
|
||||
border-bottom: 0px !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user