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 <div
v-for="item of showingDescription" v-for="item of showingDescription"
:key="item.key" :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 }" :style="{ width: item.width }"
> >
<div class="whitespace-nowrap text-[var(--color-text-4)]"> <div class="whitespace-nowrap text-[var(--color-text-4)]">
{{ t(item.locale) }} {{ t(item.locale) }}
</div> </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 /> <MsTagGroup v-if="item.value.length > 0" :tag-list="item.value" size="small" is-string-tag />
<div v-else>-</div> <div v-else>-</div>
</div> </div>

View File

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