<template>
	<view class="list">
		<div class="list-item" v-for="(item,index) in list" :key="index" @click="itemClick">
			<image :src="item.cover" mode="aspectFill"></image>
			<div class="bottom">
			<div class="name">{{item.name}}</div>
			<div class="price">{{item.price}}</div>
			</div>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[
					{
						name:'便携手提包',
						price:'4000积分',
						cover:this.$util.img('/upload/weapp/user/cover.png'),
					},
					{
						name:'便携手提包',
						price:'4000积分',
						cover:this.$util.img('/upload/weapp/user/cover.png'),
					},
					{
						name:'便携手提包',
						price:'4000积分',
						cover:this.$util.img('/upload/weapp/user/cover.png'),
					},
					{
						name:'便携手提包',
						price:'4000积分',
						cover:this.$util.img('/upload/weapp/user/cover.png'),
					},
					{
						name:'便携手提包',
						price:'4000积分',
						cover:this.$util.img('/upload/weapp/user/cover.png'),
					},
				]
			};
		}
	}
</script>

<style lang="scss" scoped>
.list{
	padding: 32rpx;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	.list-item{
		margin-bottom: 32rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		width: 48%;
		.bottom{
			padding: 16rpx;
			.name{
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #222222;
				 overflow: hidden;
				  text-overflow: ellipsis;
				  display: -webkit-box;
				  -webkit-line-clamp: 1;
				  -webkit-box-orient: vertical;
			}
			.price{
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #21BBF3;
			}
		}
		image{
			border-radius: 16rpx 16rpx 0 0;
			width: 100%;
			height: 318rpx;
		}
	}
}
</style>
