From 3b4a2f9a78ab1a11f14fd2c5ba4fc5254180585a Mon Sep 17 00:00:00 2001
From: RyRh <3123294924@qq.com>
Date: Wed, 26 Aug 2026 18:16:09 +0800
Subject: [PATCH] =?UTF-8?q?=E5=95=86=E5=93=81=E5=88=97=E8=A1=A8=E6=A0=87?=
 =?UTF-8?q?=E7=AD=BE=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/products/components/ProductGrid.vue | 41 ++++++++++++++++-------
 1 file changed, 28 insertions(+), 13 deletions(-)

diff --git a/pages/products/components/ProductGrid.vue b/pages/products/components/ProductGrid.vue
index 1b4168d..edf50bb 100644
--- a/pages/products/components/ProductGrid.vue
+++ b/pages/products/components/ProductGrid.vue
@@ -37,7 +37,12 @@
               mode="aspectFill"
               v-if="item.image"
             ></image>
-            <view class="product-badges">
+          </view>
+          <!-- 商品信息 -->
+          <view class="product-info">
+            <text class="product-name">{{ item.name }}</text>
+            <!-- 标签 - 商品名下方、价格上方 (Figma 1523:344) -->
+            <view class="product-badges" v-if="item.tags && item.tags.length > 0">
               <view
                 class="product-badge"
                 :style="{ background: tag.bg, color: tag.color }"
@@ -45,11 +50,11 @@
                 :key="tIdx"
               >{{ tag.text }}</view>
             </view>
-          </view>
-          <!-- 商品信息 -->
-          <view class="product-info">
-            <text class="product-name">{{ item.name }}</text>
-            <text class="product-price">￥{{ item.price }}</text>
+            <!-- 价格 + "起"字 -->
+            <view class="price-row">
+              <text class="product-price">￥{{ item.price }}</text>
+              <text class="price-unit">起</text>
+            </view>
           </view>
         </view>
       </view>
@@ -183,14 +188,12 @@ export default {
   width: 100%;
   height: 100%;
 }
+/* 标签 - 位于商品名下方、价格上方，横向排列 */
 .product-badges {
-  position: absolute;
-  top: 12rpx;
-  left: 12rpx;
   display: flex;
-  flex-direction: column;
+  flex-wrap: wrap;
   gap: 8rpx;
-  z-index: 1;
+  margin-top: 8rpx;
 }
 .product-badge {
   padding: 4rpx 12rpx;
@@ -213,15 +216,27 @@ export default {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+/* 价格行 - 价格 + "起"字横向排列 */
+.price-row {
+  display: flex;
+  align-items: baseline;
+  margin-top: 16rpx;
+}
 /* 价格 15px Heavy #FF0000 红色 */
 .product-price {
-  display: block;
-  margin-top: 16rpx;
   font-size: 30rpx;
   font-weight: 900;
   color: #ff0000;
   line-height: 1.2;
 }
+/* "起"字 - 比价格字体小，其他样式相同 */
+.price-unit {
+  font-size: 22rpx;
+  font-weight: 900;
+  color: #ff0000;
+  line-height: 1.2;
+  margin-left: 4rpx;
+}
 
 /* 底部加载提示 */
 .load-tip {