peihaoyu/nebula
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

产品列表页list样式修改

Browse Source
This commit is contained in:
祝梦园 2024-02-20 14:38:24 +08:00
parent b1322f090d
commit 37221e8b5a
1 changed files with 34 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
components/common/product/list.vue
View File

@ -1,31 +1,33 @@
<template> <template>
<div class="wrapper"> <div class="wrapper">
<el-row class="row-cards row-deck" :gutter="20"> <el-row class="row-cards row-deck" :gutter="20">
<el-col :xs="24" :sm="24" :md="10" :lg="10" :xl="10" v-for="product in products.list" :key="product.idProduct" style="margin-bottom: 10px;"> <el-col :xs="24" :sm="24" :md="10" :lg="10" :xl="10" v-for="product in products.list" :key="product.idProduct"
style="margin-bottom: 10px;">
<el-card :body-style="{ padding: '20px' }"> <el-card :body-style="{ padding: '20px' }">
<el-col :span="24"> <div style="width: 96%;">
<el-image :src="product.productImgUrl" <img style="max-height: 300px;display: block;margin: 0 auto" :src="product.productImgUrl" object-fit="contain" ;/>
style="border-radius: 10px;background: #f5f7fa;border: #f5f7fa solid 1px;" fit="cover"></el-image> </div>
</el-col> <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" style="font-size: 16px;line-height: 22px;font-weight: 500;margin: 4px 0;text-align: center;"> <span style="font-weight: bolder;" v-html="product.productTitle"></span>
<span style="font-weight: bolder;" v-html="product.productTitle"></span> </el-col>
</el-col> <el-col span="24">
<el-col span="24"> <small class="text-container">
<small v-html="product.productDescription"></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>
@ -166,5 +168,13 @@ h3, .h3 {
padding-right: 0.75rem; padding-right: 0.75rem;
padding-left: 0.75rem; padding-left: 0.75rem;
} }
.text-container {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
text-overflow: ellipsis;
}
</style> </style>