null/pages/order/components/pro.vue

<template>
       <view class="flex-row pro-item">
       	<image src="/static/temp/pro.png" class="image" mode="aspectFill" />
       	<view class="flex-col group_5">
       		<text class="text_9 clamp">幸福西饼Rice盲盒</text>
       		<view class="group_6"><text class="text_11">随机获得四拼蛋糕，奶油慕斯蛋糕二选一精致蛋挞、南瓜蛋糕二选一</text></view>
       	</view>
       	<view class="flex-col items-end group_7">
       		<text class="text_17">￥80.40</text>
       		<text class="text_19">×1</text>
       	</view>
       </view>
</template>

<script>
	export default {
		props: {
			//请求数据
			sendData:{
				type:Object,
				default:()=>({})
			},
			//请求地址
			url:{
				type:String,
				default:''
			}
		},
		data() {
			return {
			}
		},
	}
</script>

<style lang="scss" scoped>
.pro-item{
	margin-top: 23rpx;
	padding-left: 24rpx;
	padding-right: 17rpx;
	.image {
		flex-shrink: 0;
		width: 154rpx;
		height: 154rpx;
		border-radius: 10rpx;
	}
	.group_5 {
		margin-left: 23rpx;
		margin-bottom: 5rpx;
		flex: 1 1 auto;
	}
	.text_9 {
		align-self: flex-start;
		color: #333333;
		font-size: 30rpx;
		font-family: PingFang;
		max-width: 360rpx;
	}
	.group_6 {
		margin-top: 15.5rpx;
		line-height: 37rpx;
	}
	.text_11 {
		color: #999999;
		font-size: 24rpx;
		font-family: PingFang;
		line-height: 37rpx;
	}
	.group_7 {
		margin-left: 3rpx;
		flex-shrink: 0;
	}
	.text_17 {
		color: #ff3e3e;
		font-size: 30rpx;
		font-family: PingFang;
		line-height: 23rpx;
	}
	.text_19 {
		margin-right: 14rpx;
		margin-top: 16rpx;
		color: #999999;
		font-size: 24rpx;
		font-family: PingFang;
		line-height: 18rpx;
	}
}
</style>