商品列表标签修改

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="price-row">
-          <view class="product-info">
-            <text class="product-name">{{ item.name }}</text>
               <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 {