<template>
	<view class="vertical-goods-item sh-flex  m-b-20">
		<view class="goods-content   sh-autoFullHig p-r-10 sh-flex sh-flex-row" >
			<view class="goods-img ">
				<u-image radius="10" :showLoading="true" :src="goods.goodphoto" width="75px" height="75px" @click="click"></u-image>
			</view>
			<view class="goods-info">
				<view class="name fz-28 m-b-15">{{goods.goodsName}} </view>
				<view class="spec fz-24 m-b-15">{{goods.attrvalStr}}</view>
			</view>	 
		</view>  
		<view class="goods-price-rt  m-b-20 ">
			<view class="goods-price ">
				{{goods.unitPrice}}
			</view>
			<view class="goods-num ">
				共{{goods.qty}}件
			</view>
		</view>	
		
		
		
		
	</view>
</template>
<script>
	/**
	 * verticalGoods-card 竖向的树
	 *  @description 该组件用于订单页
	 * 	@description 该组件用于订单页
	 */
	export default {
		props:{
			goods:{
				type:Object,
				default:{}
			}
		},
		data(){
			return {
				src: 'https://cdn.uviewui.com/uview/album/1.jpg',
			}
		}
	}
</script>
<style lang="scss" scoped>
	.vertical-goods-item{
		align-items: center;
		.goods-img{
			// width: 150rpx;
			margin-right: 20rpx;
			background-color: #f5f5f5;
			padding: 10rpx;
			border-radius: 20rpx;
		}
		.goods-content{
			.name{
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
			}
			.spec{
				color:$uni-text-color-grey ;
			}
			
		}
		.goods-price-rt{
			width: 150rpx;
			text-align: right;
			.price{
				color: $theme-color;
			}
			.goods-num{
				color:$uni-text-color-grey;
			}
		}
	}
</style>