rice-front/components/product/productItem.vue

<template>
	<view class="item"
	@click="$emit('click')">
		
		<view class="item-image">
			<image 
			:src="item.image || 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg'" 
			mode="aspectFill"></image>
		</view>
		
		<view class="info">
			<view class="title">
				小青蛙大米
			</view>
			<view class="desc">
				500g每罐*2罐
			</view>
			<view class="price">
				￥19.9
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props : {
			item : {
				default : {}
			}
		},
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style scoped lang="scss">
.item {
				padding: 10rpx 20rpx;
				align-items: center;
				margin-bottom: 20rpx;
				display: flex;
				width: 100%;
				box-sizing: border-box;
				.item-image {
					width: 140rpx;
					height: 140rpx;
					flex-shrink: 0;
					image{
						height: 100%;
						width: 100%;
						border-radius: 20rpx;
					}
				}
			
				.info {
					padding: 20rpx;
					color: #555;
					flex: 1;
					.title{
						font-size: 28rpx;
						font-weight: 900;
					}
					.desc{
						font-size: 22rpx;
						color: #777;
						margin-top: 10rpx;
					}
					.price{
						text-align: right;
						color: #f40;
						font-size: 30rpx;
						font-weight: 900;
					}
				}
			}
</style>