style: Adjust container network details style (#11072)

This commit is contained in:
ssongliu 2025-11-25 18:51:18 +08:00 committed by GitHub
parent 029e2210f5
commit fd14f53cb9
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 25 additions and 14 deletions

View file

@ -42,7 +42,7 @@
<el-descriptions class="mt-4" :column="1" border :title="$t('container.command')">
<el-descriptions-item :label="$t('container.command')">
<div v-if="inspectData?.Config?.Cmd?.length">
<div v-if="inspectData?.Config?.Cmd?.length" class="tag-list">
<el-tag type="info" v-for="(entry, index) in inspectData?.Config?.Cmd" :key="index">
{{ entry }}
</el-tag>
@ -50,7 +50,7 @@
<span v-else>-</span>
</el-descriptions-item>
<el-descriptions-item label="ENTRYPONT">
<div v-if="inspectData?.Config?.Entrypoint?.length">
<div v-if="inspectData?.Config?.Entrypoint?.length" class="tag-list">
<el-tag type="info" v-for="(entry, index) in inspectData?.Config?.Entrypoint" :key="index">
{{ entry }}
</el-tag>
@ -285,4 +285,12 @@ defineExpose({
margin-bottom: 16px;
display: block;
}
.tag-list {
.el-tag {
& ~ .el-tag {
margin-left: 5px;
}
}
}
</style>

View file

@ -14,6 +14,12 @@
<el-descriptions-item :label="$t('container.driver')">
{{ networkData?.Driver || '-' }}
</el-descriptions-item>
<el-descriptions-item
v-if="networkData?.Options?.parent"
:label="$t('container.parentNetworkCard')"
>
{{ networkData?.Options?.parent }}
</el-descriptions-item>
<el-descriptions-item :label="$t('commons.table.createdAt')">
{{ formatDate(networkData?.Created) }}
</el-descriptions-item>
@ -39,18 +45,15 @@
:label="$t('container.subnet') + (index > 0 ? ' ' + (index + 1) : '')"
>
<div v-if="config">
<div v-if="config.Subnet">
<el-text class="mr-2">{{ $t('container.subnet') }}:</el-text>
<el-tag>{{ config.Subnet }}</el-tag>
</div>
<div v-if="config.Gateway" class="mt-1">
<el-text class="mr-2">{{ $t('container.gateway') }}:</el-text>
<el-tag>{{ config.Gateway }}</el-tag>
</div>
<div v-if="config.IPRange" class="mt-1">
<el-text class="mr-2">{{ $t('container.scope') }}:</el-text>
<el-tag>{{ config.IPRange }}</el-tag>
</div>
<el-tag v-if="config.Subnet" type="info" :label="$t('container.subnet')">
{{ $t('container.subnet') }}: {{ config.Subnet }}
</el-tag>
<el-tag class="ml-2" v-if="config.Gateway" type="info" :label="$t('container.gateway')">
{{ $t('container.gateway') }}: {{ config.Gateway }}
</el-tag>
<el-tag class="ml-2" v-if="config.IPRange" type="info" :label="$t('container.scope')">
{{ $t('container.scope') }}: {{ config.IPRange }}
</el-tag>
</div>
<span v-else>-</span>
</el-descriptions-item>