fix(components): 修复产品页展示异常问题

This commit is contained in:
ronger 2024-02-20 19:42:25 +08:00
parent 0c4fb25471
commit 1babc8d0d7

View File

@ -5,29 +5,31 @@
style="margin-bottom: 10px;"> style="margin-bottom: 10px;">
<el-card :body-style="{ padding: '20px' }"> <el-card :body-style="{ padding: '20px' }">
<div style="width: 96%;"> <div style="width: 96%;">
<img style="max-height: 300px;display: block;margin: 0 auto" :src="product.productImgUrl" object-fit="contain" ;/> <img style="max-height: 300px;display: block;margin: 0 auto" :src="product.productImgUrl"
object-fit="contain"/>
</div> </div>
<el-col :span="24"> <el-col :span="24">
<el-tag <el-tag
style="margin-right: 0.5rem;" style="margin-right: 0.5rem;"
v-for="tag in product.tags?.split(',') || []" v-for="tag in product.tags?.split(',') || []"
:key="tag" :key="tag"
size="small" size="small"
effect="plain"> effect="plain">
# {{ tag }} # {{ tag }}
</el-tag> </el-tag>
</el-col> </el-col>
<el-col :span="24" style="font-size: 16px;line-height: 22px;font-weight: 500;margin: 4px 0;text-align: center;"> <el-col :span="24"
<span style="font-weight: bolder;" v-html="product.productTitle"></span> style="font-size: 16px;line-height: 22px;font-weight: 500;margin: 4px 0;text-align: center;">
</el-col> <span style="font-weight: bolder;" v-html="product.productTitle"></span>
<el-col span="24"> </el-col>
<small class="text-container"> <el-col :span="24">
{{product.productDescription}} <small class="text-container">
</small> {{ product.productDescription }}
</el-col> </small>
<el-col :span="24" style="text-align: center;"> </el-col>
<el-button type="text" class="button" @click="handleClick(product.idProduct)">了解更多</el-button> <el-col :span="24" style="text-align: center;">
</el-col> <el-button type="text" class="button" @click="handleClick(product.idProduct)">了解更多</el-button>
</el-col>
</el-card> </el-card>
</el-col> </el-col>
</el-row> </el-row>
@ -168,6 +170,7 @@ h3, .h3 {
padding-right: 0.75rem; padding-right: 0.75rem;
padding-left: 0.75rem; padding-left: 0.75rem;
} }
.text-container { .text-container {
display: -webkit-box; display: -webkit-box;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;