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 {