修复了部分显示bug

src/views/ProductSummary.vue

@@ -32,7 +32,7 @@
         <button class="button" @click="$router.push(`/product/${firstProduct.id}`)">立即购买</button>
       </div>
     </div>
-    <div v-for="product in products" :key="product.id" class="product-card">
+    <div v-for="product in products.filter(p => p.id !== firstProduct.id)" :key="product.id" class="product-card">
       <!-- 轮播图部分 -->
       <div class="product-image">
         <el-carousel
@@ -252,6 +252,7 @@ onMounted(() => {
   margin-top: auto; /* 推到卡片底部 */
   padding-top: 12px; /* 添加顶部间距 */
   border-top: 1px solid #f0f0f0; /* 可选：添加分隔线 */
+  min-height: 70px; /* 确保有足够高度 */
 }
 
 .small-image {
@@ -267,9 +268,9 @@ onMounted(() => {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  height: 60px;
-  flex-grow: 1;
+  flex: 1;
   min-width: 0;
+  padding-right: 8px; /* 为详情链接留出空间 */
 }
 
 .product-name {
@@ -282,8 +283,8 @@ onMounted(() => {
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
-  margin-bottom: 0;
-  width: 200px;
+  margin-bottom: 8px;
+  word-break: break-word; /* 允许长单词换行 */
 }
 
 .product-price {
@@ -293,6 +294,18 @@ onMounted(() => {
   display: flex;
   align-items: center;
   gap: 4px;
+  margin-top: auto; /* 推到底部 */
+}
+
+.link {
+  color: #409eff;
+  font-size: 14px;
+  cursor: pointer;
+  text-decoration: none;
+  flex-shrink: 0;
+  align-self: flex-start;
+  margin-top: 4px;
+  white-space: nowrap;
 }
 /* 修改部分结束 */
 
@@ -343,6 +356,7 @@ onMounted(() => {
   /* 响应式调整 */
   .product-details {
     gap: 10px;
+    min-height: 60px;
   }
   
   .small-image {
@@ -351,16 +365,21 @@ onMounted(() => {
   }
   
   .product-info {
-    height: 50px;
+    padding-right: 6px;
   }
   
   .product-name {
     font-size: 14px;
+    margin-bottom: 6px;
   }
   
   .product-price {
     font-size: 16px;
   }
+  
+  .link {
+    font-size: 12px;
+  }
 }
 
 @media (max-width: 480px) {
@@ -381,6 +400,7 @@ onMounted(() => {
   /* 响应式调整 */
   .product-details {
     gap: 8px;
+    min-height: 55px;
   }
   
   .small-image {
@@ -389,15 +409,20 @@ onMounted(() => {
   }
   
   .product-info {
-    height: 45px;
+    padding-right: 4px;
   }
   
   .product-name {
     font-size: 13px;
+    margin-bottom: 4px;
   }
   
   .product-price {
     font-size: 15px;
   }
+  
+  .link {
+    font-size: 11px;
+  }
 }
 </style>