cosmetics_shop_wxapp/pages/index/index.vue

<template>
	<view class="index">
		<!-- 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>
		<!-- footer -->
		<cu-bar active="0" />
	</view>
</template>

<script>
export default {
	data() {
		return {};
	},
	onLoad() {},
	methods: {
		handler(){
			uni.navigateTo({
				url:"/pages/detail/index"
			})
		}
	},
	onShareAppMessage() {
		return {};
	},
	onShareTimeline() {
		return {};
	}
};
</script>

<style lang="scss" scoped>
.index {
	.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>