cosmetics_shop_wxapp/loginPages/distributionShop/index.vue

<template>
	<view class="distributionShop">
		<!-- header -->
		<cu-custom isBack bgColor="bg-gradual-blue"><view slot="content">分销商品</view></cu-custom>
		<!-- section -->
		<view class="section flex justify-center flex-wrap">
			<view @click="handler" v-for="(item, index) in 10" :key="index" class="item bg-white radius padding">
				<image lazy-load="true" src="https://gd-hbimg.huaban.com/d478a9c4bd0167adae79806c6ccaa2d7f59ded5dd101-WmmTdI_fw658/format/webp" mode="aspectFit"></image>
				<view class="text-xl">商品名称</view>
				<view class="text-gray">销量：1000</view>
				<view class="flex justify-between">
					<view class="text-red text-price">
						<cu-price value="100" size="32" />
					</view>
					<text class="cuIcon-cart text-xl"></text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
			}
		}
	}
</script>

<style lang="scss" scoped>
.distributionShop {
	.section {
		.item {
			width: calc(50vw - 60upx);
			box-sizing: border-box;
			margin: 15upx 30upx;
			image{
				width: calc(50vw - 60upx);
				height:  calc(50vw - 60upx);
			}
		}
		.item:nth-child(2n + 1) {
			margin-left: 15upx;
		}
		.item:nth-child(2n + 1) {
			margin-right: 15upx;
		}
	}
}
</style>