jewelry-front/components/user/productList.vue

<template>
	<view class="list">
		<view class="item"
		v-for="(item, index) in list"
		@click="$utils.navigateTo('/pages_order/product/productDetail?id=' + item.id)"
		:key="index">
			<image 
			class="image"
			:src="item.image &&
			item.image.split(',')[0]" mode=""></image>
			<view class="info">
				<view class="title">
					{{ item.title }}
				</view>
				<view style="display: flex;align-items: flex-end;">
					<view class="price">
						<text>￥{{ item.price }}</text>/件
					</view>
					<view class="oldPrice">
						<text>￥{{ item.oldPrice }}</text>/件
					</view>
				</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",
		props : {
			list : {
				default : []
			},
		},
		data() {
			return {
				
			};
		},
		methods : {
			
		},
	}
</script>

<style scoped lang="scss">
.list{
	display: flex;
	flex-wrap: wrap;
	.item{
		position: relative;
		width: 300rpx;
		padding: 20rpx;
		// padding-bottom: 50rpx;
		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: 24rpx;
			.title{
				font-size: 28rpx;
				overflow:hidden; //超出的文本隐藏
				text-overflow:ellipsis; //溢出用省略号显示
				white-space:nowrap; //溢出不换行
			}
			.price{
				color: $uni-color;
				margin-top: 6rpx;
				text{
					font-size: 30rpx;
					font-weight: 900;
				}
			}
			.oldPrice{
				color: #888;
				text-decoration: line-through;
			}
			.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{
			padding: 10rpx 20rpx;
			border-radius: 10rpx;
			font-size: 24rpx;
			color: #fff;
			margin-left: auto;
			width: fit-content;
			background-color: $uni-color;
		}
	}
}
</style>