baqing-shop/shop-app/components/mall/GoodsGrid.vue

<template>
	<view class="goods-grid">
		<view
			v-for="item in list"
			:key="item.goodsId"
			class="goods-card"
			@click="emit('item-click', item)"
		>
			<image-preview class="goods-card__pic" :src="item.mainPic" />
			<view class="goods-card__body">
				<text class="goods-card__name">{{ item.goodsName }}</text>
				<view class="goods-card__price">
					<text class="goods-card__symbol">¥</text>
					<text class="goods-card__num">{{ item.priceText }}</text>
				</view>
				<text class="goods-card__shop">{{ item.shopName || '—' }}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
defineProps({
	list: {
		type: Array,
		default: () => []
	}
})
const emit = defineEmits(['item-click'])
</script>

<style lang="scss" scoped>
.goods-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 0 24rpx;
}
.goods-card {
	width: 48%;
	margin-bottom: 20rpx;
	background: #fff;
	border-radius: 12rpx;
	overflow: hidden;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
}
.goods-card__pic {
	width: 100%;
	height: 320rpx;
	background: #eee;
	display: block;
}
.goods-card__body {
	padding: 16rpx;
}
.goods-card__name {
	font-size: 26rpx;
	color: #333;
	line-height: 1.4;
	height: 72rpx;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.goods-card__price {
	margin-top: 8rpx;
	color: #e53935;
	font-weight: 600;
}
.goods-card__symbol {
	font-size: 22rpx;
}
.goods-card__num {
	font-size: 34rpx;
}
.goods-card__shop {
	display: block;
	margin-top: 8rpx;
	font-size: 22rpx;
	color: #999;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
</style>