From 37221e8b5a9f5a402ddc3631e1f5617e23aafec2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A5=9D=E6=A2=A6=E5=9B=AD?= <zhumengyua@qq.com>
Date: Tue, 20 Feb 2024 14:38:24 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BA=A7=E5=93=81=E5=88=97=E8=A1=A8=E9=A1=B5li?=
 =?UTF-8?q?st=E6=A0=B7=E5=BC=8F=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/common/product/list.vue | 58 +++++++++++++++++-------------
 1 file changed, 34 insertions(+), 24 deletions(-)

diff --git a/components/common/product/list.vue b/components/common/product/list.vue
index b955abb..5a36d76 100644
--- a/components/common/product/list.vue
+++ b/components/common/product/list.vue
@@ -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>