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"
>
-
+
+
+
+ {{ item.name }}
+
+
{{ tag.text }}
-
-
-
- {{ item.name }}
- ¥{{ item.price }}
+
+
+ ¥{{ item.price }}
+ 起
+
@@ -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 {