aiot-app/pages/maintenance/components/OrderDetail.vue

<template>
	<view class="position">
		<view class="list" :class="border ? 'border' : ''">
			<view class="list-cell">
				<text class="font-text">{{lable1}}{{value1}} <text v-if="btn1" class="btn" :class="'btn-'+ btn1.id">{{btn1.name}}</text></text>
				<text class="font-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>{{lable5}}{{value5}}</text>
				<text>{{lable6}}{{value6}}</text>
			</view>
			<slot name="custSlot"></slot>
		</view>
		<slot></slot>
	</view>
	
</template>

<script>
	export default{
		props: [
			'lable1', 'value1','btn1',
			'lable2', 'value2',
			'lable3', 'value3',
			'lable4', 'value4',
			'lable5', 'value5',
			'lable6', 'value6',
			'type','border'
		],
		methods:{
			
		}
	}
</script>

<style lang="scss" scoped>
	.position{
		position: relative;
		width: 100%;
	}
	.list{
		padding: 10rpx 20rpx;
		color: $uni-text-color-grey;
		font-size: $uni-font-size-base;
		line-height: 1.5;
		.list-cell{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 5rpx 20rpx;
		}
	
		.font-sm{
			font-size: $uni-font-size-sm;
		}
		.font-text{
			color: $uni-text-color;
		}
	}
	.list.border{
		
		border-bottom: 2rpx solid #d8d8d8;
	}
	.list.more{
		padding: 10rpx 35rpx 10rpx 20rpx;
	}
	
	.btn-1{
		padding: 2rpx 10rpx;
		color: $uni-color-primary;
		background-color: $uni-color-primary-opacity;
	}
	.btn-2{
		padding: 2rpx 10rpx;
		color: $uni-color-warning;
		background-color: $uni-color-warning-opacity;
	}
</style>