style(接口测试): 定义-预览-基本信息标签内容过长的样式问题

--bug=1045009 --user=吕梦园
https://www.tapd.cn/55049933/bugtrace/bugs/view/1155049933001045009
This commit is contained in:
teukkk 2024-08-13 17:00:20 +08:00 committed by 刘瑞斌
parent c6111c7d12
commit 0936767f66
2 changed files with 10 additions and 4 deletions

View File

@ -18,13 +18,17 @@
<div
v-for="item of showingDescription"
:key="item.key"
class="flex w-[calc(100%/3)] items-center gap-[8px]"
:class="[
`ms-detail-card-desc-item ${
Array.isArray(item.value) && item.value.length > 0 ? 'ms-detail-card-desc-tag' : ''
} flex w-[calc(100%/3)] items-center gap-[8px]`,
]"
:style="{ width: item.width }"
>
<div class="whitespace-nowrap text-[var(--color-text-4)]">
{{ t(item.locale) }}
</div>
<div v-if="Array.isArray(item.value)">
<div v-if="Array.isArray(item.value)" class="pr-[24px]">
<MsTagGroup v-if="item.value.length > 0" :tag-list="item.value" size="small" is-string-tag />
<div v-else>-</div>
</div>

View File

@ -193,12 +193,14 @@
:deep(.ms-detail-card) {
gap: 12px;
.ms-detail-card-desc {
column-gap: 24px;
row-gap: 8px;
& > div:nth-of-type(n) {
.ms-detail-card-desc-item {
width: auto;
max-width: 300px;
}
.ms-detail-card-desc-tag {
max-width: fit-content;
}
}
}
</style>