aiot-app/pages/outbound/components/OrderList.vue

<template>
	<view class="list">
		<view class="list-cell">
			<text class="font-text">{{lable1}}{{value1}}<text v-if="btnText" class="btn"
					:class="btnClass">{{btnText}}</text></text>
			<text>{{lable2}}{{value2}}</text>
		</view>
		<view class="list-cell font-sm">
			<text>{{lable3}}{{value3}}</text>
			<text>{{lable4}}{{value4}}</text>
		</view>
		<view class="list-cell font-sm">
			<text v-if="value5" class="span" :class="'type-'+ type">{{lable5}}{{value5}}</text>
			<text>{{lable6}}{{value6}}</text>

		</view>
		<view class="list-cell font-sm">
			<text>{{lable7}}{{value7}}</text>
		</view>
		<slot></slot>
	</view>
</template>

<script>
	export default {
		props: [
			'lable1', 'value1',
			'lable2', 'value2',
			'lable3', 'value3',
			'lable4', 'value4',
			'lable5', 'value5',
			'lable6', 'value6',
			'lable7', 'value7',
			'btnText', 'btnClass',
			'type',
		],
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.list {
		padding: 10rpx 0;
		color: $uni-text-color-grey;
		border-bottom: 2rpx solid #d8d8d8;
		font-size: $uni-font-size-base;

		.list-cell {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 5rpx 20rpx;
		}

		.span {
			padding: 5rpx 10rpx;
			margin-left: 10rpx;
			border-radius: 10rpx;
		}

		.font-sm {
			font-size: $uni-font-size-sm;
		}

		.font-text {
			color: $uni-text-color;
		}

		.font-order-error {
			color: $uni-color-order-error
		}

		.type-1 {
			background-color: $uni-color-warning-opacity;
			color: $uni-color-warning;
			border: 1px solid $uni-color-warning;
		}

		.type-2 {
			background-color: $uni-color-primary-opacity;
			color: $uni-color-primary;
			border: 1px solid $uni-color-primary;

		}

		.type-3 {
			background-color: $uni-color-success-opacity;
			color: $uni-color-success;
			border: 1px solid $uni-color-success;
		}

		.type-4 {
			background-color: $uni-color-error-opacity;
			color: $uni-color-error;
			border: 1px solid $uni-color-error;
		}
	}

	.btn {
		padding: 2rpx 6rpx;
		font-size: $uni-font-size-sm;
	}
</style>