aiot-app/components/ListOrder.vue

<template>
	<view class="list-cell" v-if="list">
		<view class="list-cell-flex">
			<view class="code">
				编号：{{list.jobe_code}}
			</view>
			<view class="time">
				{{list.time}}
			</view>
		</view>
		<view class="list-cell-flex">
			<view class="">
				<text class="span-dian">{{list.productName}}</text>
				<text class="span-dian span-dian1">{{list.lineCode}}</text>
			</view>
			<view class="btn-status">
				<view class="btn btn-warning" v-if="list.worksheetStatus == 0">
					未完成
				</view>
				<view class="btn btn-primary" v-else>
					已接单
				</view>
			</view>
		</view>
		<view class="list-cell-flex">
			<view class="">
				姓名：{{list.name}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"ListOrder",
		props:{
			list:{
				type: Object
			}
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss" scoped>
.list-cell{
	padding: 10rpx 0 10rpx 20rpx;
	font-size: $uni-font-size-base;
	color: $uni-text-regular-color;
	border-bottom: 1px solid #eee;
	.list-cell-flex{
		margin: 10rpx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.code{
		color: $uni-text-color;
	}
	.time{
		font-size: $uni-font-size-sm;
	}
	.span-dian{
		position: relative;
		padding-left: 30rpx;
		margin-right: 30rpx;
		:after{
			content: '';
			position: absolute;
			top: 2rpx;
			bottom: 0;
			left: 0;
			margin: auto 0;
			display: inline-block;
			width: 15rpx;
			height: 15rpx;
			background-color: $uni-color-success;
			border-radius: 50%;
		}
		&.span-dian1{
			:after{
				background-color: $uni-color-warning;
			}
		}
	}
	
	.btn-status{
		display: flex;
		font-size: $uni-font-size-sm;
		
	}
}
</style>