
<template>
	<view class="goods--list">
		<view class="goods--item" v-for="(item, index) in list" :key="index">
			<view class="cover">
				<image class="cover--src" :src="item.cover" mode="aspectFill" />
			</view>
			<view class="content">
				<view class="title">{{item.title}}</view>
				<view class="content-flex">
					<view class="price">{{item.price}}<text>易币</text></view>
					<view class="sales">已易{{item.sales}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name	: 'goodsList',
	props	: {
		list: {
			type	: Array,
			default	: () => {
				return new Array
			}
		}
	}
};
</script>

<style lang="scss" scoped>
	.goods--list{
		padding: calc(#{$padding} - 10rpx);
		display: flex;
		flex-wrap: wrap;
		.goods--item{
			background: white;
			box-sizing: border-box;
			width: calc(50% - 20rpx);
			margin: 10rpx;
			border-radius: $radius/4;
			overflow: hidden;
			.cover{
				position: relative;
				width: 100%;
				padding-top: 100%;
				.cover--src{
					position: absolute;
					height: 100%;
					width: 100%;
					top: 0;
					left: 0;
				}
			}
			.content{
				padding: $padding/2;
				.title{
					font-size: $title-size-lg;
					line-height: 40rpx;
					height: 80rpx;
				}
				.content-flex{
					display: flex;
					justify-content: space-between;
					align-items: flex-end;
					padding-top: $padding/2;
					.price{
						color: $text-price;
						font-weight: bold;
						font-size: $title-size + 8;
						text{
							font-size: $title-size-sm;
							font-weight: normal;
							padding-left: $padding/4;
							line-height: 50rpx;
						}
					}
					.sales{
						font-size: $title-size-sm;
						color: $text-gray;
						line-height: 50rpx;
					}
				}
			}
		}
	}
</style>
