<template>
	<view class="goods-info">
		<image
			:src="img"
			mode="aspectFit"></image>
		<view class="text">
			<text class="name">{{name}}</text>
			<text class="spec">{{desc}}</text>
			<text class="price">{{price}}</text>
		</view>
		<view class="num">x{{num}}</view>
	</view>
</template>

<script>
	export default {
		props: {
			img: {
				type: String,
				default: ''
			},
			name: {
				type: String,
				default: ''
			},
			desc: {
				type: String,
				default: ''
			},
			price: {
				type: String,
				default: ''
			},
			num: {
				type: [String, Number],
				default: 1
			}
		}
	}
</script>

<style lang="scss" scoped>
	.goods-info {
		@include flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		width: calc(100% 60rpx);
		height: 240rpx;
		padding: 20rpx 30rpx;
		background-color: #FFFFFF;
	
		image {
			width: 180rpx;
			height: 180rpx;
			border-radius: 10rpx;
			background-color: $uni-bg-color-grey;
		}
	
		.text {
			flex: 1;
			height: 180rpx;
			display: inline-block;
			margin: 0 20rpx;
	
			text {
				display: block;
			}
	
			.name {
				font-size: $uni-font-size-base;
				color: $uni-text-color;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				line-clamp: 2;
				-webkit-box-orient: vertical;
				font-weight: bold;
			}
	
			.spec {
				font-size: $uni-font-size-base;
				color: $uni-text-color-placeholder;
				margin: 10rpx 0;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				line-clamp: 1;
				-webkit-box-orient: vertical;
			}
	
			.price {
				font-size: $uni-font-size-lg;
				color: $uni-color-error;
			}
		}
	
		.num {
			font-size: $uni-font-size-base;
		}
	}
</style>
