fix(设备管理): 设备卡片标签与值分行显示,解决英文界面内容截断

This commit is contained in:
gx_ma
2026-11-03 17:27:27 +08:00
parent 37d6781e6a
commit fc285f09fe

View File

@@ -120,32 +120,28 @@
<div class="card-info"> <div class="card-info">
<div class="info-row"> <div class="info-row">
<span class="info-value" style="width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis"> <span class="info-label">{{ $t('device.device-edit.148398-4') }}</span>
{{ $t('device.device-edit.148398-4') }}: <el-tooltip :content="item.productName || '---'" placement="top">
<el-tooltip :content="item.productName || '---'" placement="top"> <span class="info-value">{{ item.productName || '---' }}</span>
<span>{{ item.productName || '---' }}</span> </el-tooltip>
</el-tooltip>
</span>
</div> </div>
<div class="info-row"> <div class="info-row">
<span class="info-value" style="width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis"> <span class="info-label">{{ $t('device.device-edit.148398-7') }}</span>
{{ $t('device.device-edit.148398-7') }}: <el-tooltip :content="item.serialNumber || '---'" placement="top">
<el-tooltip :content="item.serialNumber || '---'" placement="top"> <span class="info-value">{{ item.serialNumber || '---' }}</span>
<span>{{ item.serialNumber || '---' }}</span> </el-tooltip>
</el-tooltip>
</span>
</div> </div>
<div class="info-row" v-if="item.transport"> <div class="info-row" v-if="item.transport">
<span class="info-value">{{ $t('product.product-edit.473153-14') }}:{{ item.transport }}</span> <span class="info-label">{{ $t('product.product-edit.473153-14') }}</span>
<el-tooltip :content="item.transport" placement="top">
<span class="info-value">{{ item.transport }}</span>
</el-tooltip>
</div> </div>
<div class="info-row"> <div class="info-row">
<span class="info-value" style="width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis"> <span class="info-label">{{ $t('device.index.105953-23') }}</span>
{{ $t('device.index.105953-23') }}: <el-tooltip :content="item.protocolCode || '--'" placement="top">
<el-tooltip :content="item.protocolCode || '--'" placement="top"> <span class="info-value">{{ item.protocolCode || '--' }}</span>
<span>{{ item.protocolCode || '--' }}</span> </el-tooltip>
</el-tooltip>
</span>
</div> </div>
</div> </div>
@@ -575,16 +571,23 @@ export default {
.info-row { .info-row {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-width: 0;
.info-label { .info-label {
font-size: 12px; font-size: 12px;
color: #909399; color: #909399;
margin-bottom: 4px; margin-bottom: 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
.info-value { .info-value {
font-size: 13px; font-size: 13px;
color: #606266; color: #606266;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
} }
} }