cbz/components/pur-order/pur-order.vue

<template>
	<view class="pur_order vflex">
		<view class="top hflex acenter jbetween">
			<view class="order_no">订单号：{{order_no}}</view>
			<view class="type">{{type}}</view>
		</view>
		<view class="name">{{name}}</view>
		<view class="box hflex acenter">
			<view class="text">联系人：</view>
			<view class="text1">{{contacts}}</view>
		</view>
		<view class="box hflex acenter">
			<view class="text">手机号：</view>
			<view class="text1">{{phone}}</view>
		</view>
		<view class="box hflex acenter">
			<view class="text">交货日期：</view>
			<view class="text1">{{delivery_date}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"pur-order",
		props: {
			order_no: {
				type: String,
				value: '' 
			},
			type: {
				type: String,
				value: '' 
			},
			name: {
				type: String,
				value: '' 
			},
			contacts: {
				type: String,
				value: '' 
			},
			phone: {
				type: String,
				value: '' 
			},
			delivery_date: {
				type: String,
				value: '' 
			}
		},
		data() {
			return {
			};
		}
	}
</script>

<style lang="scss">
.pur_order {
	width: 100%;
	background-color: #f5f5f5;
	box-sizing: border-box;
	border-radius: 24rpx;
	padding: 26rpx 20rpx;
	.top {
		width: 100%;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #dfdfdf;
		.order_no {
			font-size: 24rpx;
			color: #444;
		}
		.type {
			background-color: #54d2c5;
			border-radius: 12rpx 4rpx 12rpx 4rpx;
			box-sizing: border-box;
			padding: 4rpx 8rpx;
			color: #fff;
			font-size: 20rpx;
		}
		
	}
	.name {
		margin-top: 20rpx;
		font-size: 32rpx;
		color: #222;
		font-weight: 500;
	}
	.box {
		margin: 10rpx 0 0;
		.text {
			font-size: 24rpx;
			color: #888;
			margin-right: 26rpx;
		}
		.text1 {
			font-size: 24rpx;
			color: #222;
		}
	}
}
</style>