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>
<div class="wrapper">
<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-col :span="24">
<el-image :src="product.productImgUrl"
style="border-radius: 10px;background: #f5f7fa;border: #f5f7fa solid 1px;" fit="cover"></el-image>
</el-col>
<el-col :span="24">
<el-tag
style="margin-right: 0.5rem;"
v-for="tag in product.tags?.split(',') || []"
:key="tag"
size="small"
effect="plain">
# {{ tag }}
</el-tag>
</el-col>
<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>
</el-col>
<el-col span="24">
<small v-html="product.productDescription"></small>
</el-col>
<el-col :span="24" style="text-align: center;">
<el-button type="text" class="button" @click="handleClick(product.idProduct)">了解更多</el-button>
</el-col>
<div style="width: 96%;">
<img style="max-height: 300px;display: block;margin: 0 auto" :src="product.productImgUrl" object-fit="contain" ;/>
</div>
<el-col :span="24">
<el-tag
style="margin-right: 0.5rem;"
v-for="tag in product.tags?.split(',') || []"
:key="tag"
size="small"
effect="plain">
# {{ tag }}
</el-tag>
</el-col>
<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>
</el-col>
<el-col span="24">
<small class="text-container">
{{product.productDescription}}
</small>
</el-col>
<el-col :span="24" style="text-align: center;">
<el-button type="text" class="button" @click="handleClick(product.idProduct)">了解更多</el-button>
</el-col>
</el-card>
</el-col>
</el-row>
@ -166,5 +168,13 @@ h3, .h3 {
padding-right: 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>