aiot-app/pages/pda/picking/components/pickCard.vue

<template>
    <view>
		
		
		<view class="card_box"  v-for="(item, index) in List" :key='index'>
			<view class="item_box rx-sc">
				<view class="round">{{item.index}}</view>
				<view class="orderId">{{item.code}}  </view>
			</view>
		
			<view class="item_box rx-bc">
				<view class="item_one perce50 rx-sc">
					<view class="lable">产品编码：</view>
					<view>{{item.productCode}}</view>
				</view>
				<view class="item_one perce50 rx-sc">
					<view>名称：</view>
					<view>{{item.productName}}</view>
				</view>
			</view>
		
		
			<view class="item_box rx-bc">
				<view class="item_one perce50 rx-sc">
					<view class="lable">牌号：</view>
					<view>{{item.brandNo}}</view>
				</view>
				<view class="item_one perce50 rx-sc">
					<view>型号：</view>
					<view>{{item.model}}</view>
				</view>
			</view>
		
		
			<view class="item_box rx-bc">
				<view class="item_one perce50 rx-sc">
					<view class="lable">生产数量：</view>
					<view>{{item.formingWeight}}</view>
				</view>
				<view class="item_one perce50 rx-sc">
					<view>状态：</view>
					<view>{{statusList[item.status]}}</view>
				</view>
			</view>
		
		
			<view class="item_box rx-sc">
				<view class="item_one rx-sc">
					<view class="lable">工艺路线：</view>
					<view class="gylx">{{item.produceRoutingName}}</view>
				</view>
		
			</view>
		
		
		
		
		</view>
		
		
	</view>
</template>

<script>
	export default {
		props: {
			List: {
				type: Array,
				default: () => []
			},
		},
		
		data() {
			return {
				statusList:{
					4:'待生产',
					5:'生产中',
					6:'已完成',
					7:'已延期',
					8:'待下达'
				}
			}
		},
		methods: {
	
		}

	}
</script>


<style lang="scss" scoped>
	.card_box {
		width: 750rpx;
		padding: 16rpx 32rpx;
		box-sizing: border-box;
		border-bottom: 2rpx solid #E1E1E1;


		.item_box {
			margin-top: 10rpx;

			.round {
				width: 40rpx;
				height: 40rpx;
				line-height: 40rpx;
				border-radius: 50%;
				background: $theme-color;
				color: #fff;
				text-align: center;
				font-size: 20rpx;
			}

			.orderId {
				color: #000;
				font-family: PingFang HK;
				font-size: 28rpx;
				font-style: normal;
				font-weight: 600;
				margin-left: 16rpx;
			}

			.item_one {
				width: 100%;
				font-size: 26rpx;
				font-style: normal;
				font-weight: 400;
				line-height: 38rpx;
				word-wrap: break-word;
			}

			.gylx {
				color: $theme-color;
			}

			.perce50 {
				width: 50%;
			}
		}
	}
</style>