feat: 修改瀑布流

components/shop/ping-item.vue

@@ -1,66 +1,89 @@
 <template>
-	<view class="shop-view" @click.stop="onClick">
-		<image :src="obj.url" class="top-img" mode="widthFix"></image>
-		<view class="shop-bottom-panel">
-			<text class="text-30 text-zu  text-overflow" style="padding-top:8rpx">{{obj.title}}</text>
-			<view class="flex-r-lr" style="width:100%;margin-top:10rpx;margin-bottom: 14px;">
-				<text class="text-28 text-zi text-bold">￥{{obj.price}}</text>
-				<text class="text-24 " style="color:#999">已售{{obj.sales}}件</text>
-			</view>
-		</view>
-	</view>
+  <view class="ping-item" @click.stop="onClick">
+    <image
+      class="top-img"
+      :src="obj.url"
+      mode="widthFix"
+      lazy-load
+    />
+    <view class="shop-bottom-panel">
+      <text class="title text-30 text-zu text-overflow">
+        {{ obj.title }}
+      </text>
+      <view class="flex-r-lr price-line">
+        <text class="text-28 text-zi text-bold">￥{{ obj.price }}</text>
+        <text class="text-24 sold">已售{{ obj.sales }}件</text>
+      </view>
+    </view>
+  </view>
 </template>
 
 <script>
-	import MyBtn from '@/components/common/my-btn.vue'
-	export default {
-		components:{MyBtn},
-		props:{
-			obj:{
-				type:Object,
-				default:()=>{}
-			},
-		},
-		mounted(){
-		},
-		methods: {
-			onClick(){
-				this.$emit('ok',this.obj.id);
-			}
-		}
-	}
+export default {
+  name: 'PingItem',
+  props: {
+    obj: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  methods: {
+    onClick() {
+      this.$emit('ok', this.obj.id);
+    }
+  }
+};
 </script>
 
 <style lang="scss" scoped>
-	.shop-view{
-		width:332rpx;
-		border-radius: 12rpx;
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: space-between;
-		box-sizing: border-box;
-		background-color: #fff;		
-		.top-img{
-			width:332rpx;
-			display: block;
-			border-radius: 12rpx;
-		}
-		.shop-bottom-panel{
-			width:100%;
-			padding: 0 12rpx;
-			box-sizing: border-box;
-			flex-direction: column;
-			justify-content: space-between;
-			display: flex;
-			
-		}
-		
-	}
-	.text-overflow {
-		display: inline-block;
-		overflow: hidden;         
-		text-overflow: ellipsis;  
-		white-space: nowrap; 
-	}
-</style>
+.ping-item {
+  width: 332rpx;
+  background: #fff;
+  border-radius: 12rpx;
+  overflow: hidden;
+  margin-bottom: 0;          /* 瀑布流父层控制间距，这里清零 */
+}
+
+.top-img {
+  width: 332rpx;
+  display: block;
+  border-radius: 12rpx 12rpx 0 0;
+}
+
+.shop-bottom-panel {
+  padding: 12rpx 16rpx 16rpx;
+}
+
+.title {
+  line-height: 40rpx;
+  max-width: 300rpx;
+}
+
+.price-line {
+  margin-top: 10rpx;
+}
+
+.sold {
+  color: #999;
+}
+
+/* 通用工具类（如已全局引入可删除） */
+.text-overflow {
+  display: block;
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.text-30 { font-size: 30rpx; }
+.text-28 { font-size: 28rpx; }
+.text-24 { font-size: 24rpx; }
+.text-zu  { color: #333; }
+.text-zi  { color: #7A35F6; }
+.text-bold { font-weight: bold; }
+.flex-r-lr {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+</style>