uniapp-shop-templates/components/user/productList.vue

<template>
	<view class="list">
		<view class="item"
		v-for="(item, index) in 10"
		@click="$utils.navigateTo('/pages_order/product/productDetail?id=123')"
		:key="index">
			<image 
			class="image"
			src="https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg" mode=""></image>
			<view class="info">
				<view class="title">
					桌布租赁
				</view>
				<view class="price">
					<text>￥58</text>元/起
				</view>
				<view class="favorable">
					<view class="t">
						限时优惠
					</view>
					<view class="p">
						￥48
					</view>
				</view>
				<view class="num">
					已售卖5000+件
				</view>
			</view>
			<view class="btn">
				<uv-icon name="shopping-cart"
				color="#fff"></uv-icon>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"productList",
		data() {
			return {
				
			};
		},
		methods : {
			
		},
	}
</script>

<style scoped lang="scss">
.list{
	display: flex;
	flex-wrap: wrap;
	.item{
		position: relative;
		width: 300rpx;
		padding: 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		margin-top: 20rpx;
		&:nth-child(odd){
			margin-right: 20rpx;
		}
		.image{
			width: 300rpx;
			height: 250rpx;
			border-radius: 20rpx;
		}
		.info{
			font-size: 26rpx;
			.title{
				font-size: 30rpx;
			}
			.price{
				color: #D03F25;
				margin-top: 6rpx;
				text{
					font-size: 34rpx;
					font-weight: 900;
				}
			}
			.favorable{
				display: flex;
				background-image: url(/static/image/product/favorable.png);
				background-size: 100% 100%;
				width: fit-content;
				padding: 5rpx 10rpx;
				font-size: 18rpx;
				margin-top: 6rpx;
				.p{
					color: #fff;
					margin-left: 10rpx;
				}
			}
			.num{
				margin-top: 6rpx;
				font-size: 22rpx;
				color: #888;
			}
		}
		.btn{
			position: absolute;
			right: 20rpx;
			bottom: 20rpx;
			padding: 10rpx;
			border-radius: 50%;
			background-color: $uni-color;
		}
	}
}
</style>