fix: 调整实体列表代码样式
This commit is contained in:
@@ -2,20 +2,15 @@
|
|||||||
<div class="cn-entity--list" :style="{ zIndex: !isCollapse ? 1 : 'unset' }">
|
<div class="cn-entity--list" :style="{ zIndex: !isCollapse ? 1 : 'unset' }">
|
||||||
<!-- 左侧下拉按钮 -->
|
<!-- 左侧下拉按钮 -->
|
||||||
<div class="cn-entity__collapse">
|
<div class="cn-entity__collapse">
|
||||||
<span @click="switchCollapse" :class="{ 'reg-down': !isCollapse }"
|
<span @click="switchCollapse" :class="{ 'reg-down': !isCollapse }">
|
||||||
><i class="cn-icon cn-icon-arrow-right"></i
|
<i class="cn-icon cn-icon-arrow-right"></i>
|
||||||
></span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="cn-entity__case">
|
<div class="cn-entity__case">
|
||||||
<div class="cn-entity__icon"><i :class="iconClass"></i></div>
|
<div class="cn-entity__icon"><i :class="iconClass"></i></div>
|
||||||
<div class="cn-entity__row">
|
<div class="cn-entity__row">
|
||||||
<div class="cn-entity__header">
|
<div class="cn-entity__header">
|
||||||
{{
|
{{ entityData.ipAddr || entityData.domainName || entityData.appName || 'Unknown' }}
|
||||||
entityData.ipAddr ||
|
|
||||||
entityData.domainName ||
|
|
||||||
entityData.appName ||
|
|
||||||
'Unknown'
|
|
||||||
}}
|
|
||||||
</div>
|
</div>
|
||||||
<div class="cn-entity__body">
|
<div class="cn-entity__body">
|
||||||
<div class="body__basic-info">
|
<div class="body__basic-info">
|
||||||
@@ -40,11 +35,7 @@
|
|||||||
<template v-else-if="entityData.entityType === 'domain'">
|
<template v-else-if="entityData.entityType === 'domain'">
|
||||||
<div class="basic-info__item">
|
<div class="basic-info__item">
|
||||||
<i class="cn-icon cn-icon-category"></i>
|
<i class="cn-icon cn-icon-category"></i>
|
||||||
<span
|
<span>{{ $t('entities.domainDetail.categoryGroup') }} : </span>
|
||||||
>{{
|
|
||||||
$t('entities.domainDetail.categoryGroup')
|
|
||||||
}} : </span
|
|
||||||
>
|
|
||||||
<span>{{ entityData.domainCategoryGroup || '-' }}</span>
|
<span>{{ entityData.domainCategoryGroup || '-' }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="basic-info__item">
|
<div class="basic-info__item">
|
||||||
@@ -54,11 +45,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="basic-info__item">
|
<div class="basic-info__item">
|
||||||
<i class="cn-icon cn-icon-credit"></i>
|
<i class="cn-icon cn-icon-credit"></i>
|
||||||
<span
|
<span>{{ $t('entities.reputationLevel') }} : </span>
|
||||||
>{{
|
|
||||||
$t('entities.reputationLevel')
|
|
||||||
}} : </span
|
|
||||||
>
|
|
||||||
<span>{{ entityData.domainReputationScore || '-' }}</span>
|
<span>{{ entityData.domainReputationScore || '-' }}</span>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@@ -85,37 +72,30 @@
|
|||||||
<div class="basic-info__item">
|
<div class="basic-info__item">
|
||||||
<div class="item__box">
|
<div class="item__box">
|
||||||
<i class="cn-icon cn-icon-rise"></i>
|
<i class="cn-icon cn-icon-rise"></i>
|
||||||
<span
|
<span>{{ $t('entities.sentThroughput') }} : </span>
|
||||||
>{{
|
<span>
|
||||||
$t('entities.sentThroughput')
|
{{
|
||||||
}} : </span
|
entityData.bytesSentRate ? unitConvert(entityData.bytesSentRate, unitTypes.byte).join(' ') + 'ps' : '-'
|
||||||
>
|
}}
|
||||||
<span>{{
|
</span>
|
||||||
entityData.bytesSentRate
|
|
||||||
? unitConvert(
|
|
||||||
entityData.bytesSentRate,
|
|
||||||
unitTypes.byte,
|
|
||||||
).join(' ') + 'ps'
|
|
||||||
: '-'
|
|
||||||
}}</span>
|
|
||||||
<!-- 曲线-->
|
<!-- 曲线-->
|
||||||
<div class="item-box-loading">
|
<div class="item-box-loading">
|
||||||
<loading :loading="loading" size="small"></loading>
|
<loading :loading="loading" size="small"></loading>
|
||||||
<div
|
<div
|
||||||
class="row__charts"
|
class="row__charts"
|
||||||
:id="`entityDetailSend${entityType}${listMode}`"
|
:id="`entityDetailSend${entityType}${listMode}`"
|
||||||
v-if="entityData.entityType === 'domain'"
|
v-if="entityData.entityType === 'domain'">
|
||||||
></div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="row__charts"
|
class="row__charts"
|
||||||
:id="`entityDetailSend${entityType}${listMode}`"
|
:id="`entityDetailSend${entityType}${listMode}`"
|
||||||
v-if="entityData.entityType === 'app'"
|
v-if="entityData.entityType === 'app'">
|
||||||
></div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="row__charts"
|
class="row__charts"
|
||||||
:id="`entityDetailSend${entityType}${listMode}`"
|
:id="`entityDetailSend${entityType}${listMode}`"
|
||||||
v-if="entityData.entityType === 'ip'"
|
v-if="entityData.entityType === 'ip'">
|
||||||
></div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -123,37 +103,29 @@
|
|||||||
<div class="basic-info__item">
|
<div class="basic-info__item">
|
||||||
<div class="item__box">
|
<div class="item__box">
|
||||||
<i class="cn-icon cn-icon-fall"></i>
|
<i class="cn-icon cn-icon-fall"></i>
|
||||||
<span
|
<span>{{ $t('entities.receivedThroughput') }} : </span>
|
||||||
>{{
|
<span>
|
||||||
$t('entities.receivedThroughput')
|
{{
|
||||||
}} : </span
|
entityData.bytesReceivedRate ? unitConvert(entityData.bytesReceivedRate, unitTypes.byte).join(' ') + 'ps' : '-'
|
||||||
>
|
}}
|
||||||
<span>{{
|
</span>
|
||||||
entityData.bytesReceivedRate
|
|
||||||
? unitConvert(
|
|
||||||
entityData.bytesReceivedRate,
|
|
||||||
unitTypes.byte,
|
|
||||||
).join(' ') + 'ps'
|
|
||||||
: '-'
|
|
||||||
}}</span>
|
|
||||||
|
|
||||||
<div class="item-box-loading">
|
<div class="item-box-loading">
|
||||||
<loading :loading="loading" size="small"></loading>
|
<loading :loading="loading" size="small"></loading>
|
||||||
<div
|
<div
|
||||||
class="row__charts"
|
class="row__charts"
|
||||||
:id="`entityDetailReceived${entityType}${listMode}`"
|
:id="`entityDetailReceived${entityType}${listMode}`"
|
||||||
v-if="entityData.entityType === 'domain'"
|
v-if="entityData.entityType === 'domain'">
|
||||||
></div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="row__charts"
|
class="row__charts"
|
||||||
:id="`entityDetailReceived${entityType}${listMode}`"
|
:id="`entityDetailReceived${entityType}${listMode}`"
|
||||||
v-if="entityData.entityType === 'app'"
|
v-if="entityData.entityType === 'app'">
|
||||||
></div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="row__charts"
|
class="row__charts"
|
||||||
:id="`entityDetailReceived${entityType}${listMode}`"
|
:id="`entityDetailReceived${entityType}${listMode}`"
|
||||||
v-if="entityData.entityType === 'ip'"
|
v-if="entityData.entityType === 'ip'">
|
||||||
></div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -164,16 +136,11 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="basic-info__item">
|
<div class="basic-info__item">
|
||||||
<i class="cn-icon cn-icon-safe"></i>
|
<i class="cn-icon cn-icon-safe"></i>
|
||||||
<span
|
<span>{{ $t('entities.recentSecurity') }} : </span>
|
||||||
>{{ $t('entities.recentSecurity') }} : </span
|
|
||||||
>
|
|
||||||
<span>{{ entityData.securityCount }}</span>
|
<span>{{ entityData.securityCount }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div class="show-detail" @click="showDetail">
|
||||||
class="show-detail"
|
|
||||||
@click="showDetail"
|
|
||||||
>
|
|
||||||
{{ $t('overall.detail') }}>
|
{{ $t('overall.detail') }}>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -182,10 +149,7 @@
|
|||||||
<el-collapse-transition>
|
<el-collapse-transition>
|
||||||
<div class="cn-entity__detail-overview" v-if="!isCollapse">
|
<div class="cn-entity__detail-overview" v-if="!isCollapse">
|
||||||
<el-divider></el-divider>
|
<el-divider></el-divider>
|
||||||
<detail-overview
|
<detail-overview :entity="entityData" :time-filter="timeFilter"/>
|
||||||
:entity="entityData"
|
|
||||||
:time-filter="timeFilter"
|
|
||||||
></detail-overview>
|
|
||||||
</div>
|
</div>
|
||||||
</el-collapse-transition>
|
</el-collapse-transition>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user