aiot-app/pages/pda/workOrder/extrusionMolding/productionDetailed.vue

<template>
	<view>
		<u-popup :show="show" :mode='mode' :closeOnClickOverlay='false'>


			<view class="box_list">

				<u-list @scrolltolower="scrolltolower" class="z_list">




					<view v-for="(item, index) in firstTaskDetails" :key="index">
						<label class="listBox rx-bs">

							<view class="listBox-sel">
								<view class="round">{{ index + 1 }}</view>
							</view>

							<view class="listBox-con">


								<view class="listBox-bottom rx">

									<view class="items">
										<text>名称</text>{{ item.name }}
									</view>


									<view class="items">
										<text>编码</text>{{ item.code }}
									</view>

									<view class="items">
										<text>待投料数量</text>{{ item.waitFeedNum ||  0 }} {{ item.unit }}
									</view>

									<view class="items">
										<text>已投料数量</text>{{ item.feedNum ||  0 }} {{ item.unit }}
									</view>



								</view>

							</view>


						</label>

					</view>




				</u-list>

				<view class="operate_box  rx-bc">
					<u-button size="small" class="u-reset-button" @click="close">
						取消
					</u-button>
					<u-button type="success" size="small" class="u-reset-button" @click="close">
						确定
					</u-button>



				</view>



			</view>

		</u-popup>
	</view>


</template>

<script>





export default {
	data() {
		return {
			mode: 'center',
			show: false,
			topHight: 20 || 20,

			firstTaskDetails: []

		}
	},

	created() {

	},


	computed: {

	},


	methods: {
		open(obj) {
			this.firstTaskDetails = obj.firstTaskDetails;
			this.show = true
		},


		close() {

			this.show = false
		},




		scrolltolower() { },

	

	}
}
</script>

<style lang="scss" scoped>
.z_list {
	max-height: 860rpx;
	padding: 10rpx;
	box-sizing: border-box;
}

.box_list {
	min-height: 100rpx;
	width: 96vw;

	/deep/ .baseForm {
		padding: 0 20rpx;
	}
}

.operate_box {
	padding: 10rpx 32rpx;

	/deep/ .u-button {
		width: 28%;
	}
}

/deep/ .u-tabs__wrapper__nav {
	background: #f5f5f5 !important;
}



.listBox {
	margin-top: 8rpx;
	padding: 8rpx 24rpx;
	background: #fff;


	/deep/ .uni-checkbox-input-checked {
		background-color: $theme-color !important;
		border-color: $theme-color !important;
	}

	.listBox-sel {

		margin-top: 10rpx;
		margin-right: 8rpx;

		.round {
			width: 32rpx;
			height: 32rpx;
			line-height: 32rpx;
			text-align: center;
			border-radius: 50%;
			background: $theme-color;
			font-size: 24rpx;
			font-style: normal;
			font-weight: 400;
			color: #fff;
		}
	}


	.round {
		width: 32rpx;
		height: 32rpx;
		line-height: 32rpx;
		text-align: center;
		border-radius: 50%;
		background: $theme-color;
		font-size: 24rpx;
		font-style: normal;
		font-weight: 400;
		color: #fff;
	}

	.listBox-con {
		width: 650rpx;
		font-weight: 400;
	}

	.listBox-top {
		margin-top: 6rpx;
		color: #090A0A;
		font-size: 28rpx;
		font-style: normal;
		font-weight: 800;
	}

	.listBox-bottom {
		color: #090A0A;
		font-size: 24rpx;
		font-style: normal;
		flex-wrap: wrap;

		.items {

			width: calc(50% - 1px);
			border-left: 1rpx solid #E3E5E5;
			border-right: 1rpx solid #E3E5E5;
			border-bottom: 1rpx solid #E3E5E5;
			box-sizing: border-box;
			word-break: break-all;

			text {
				display: inline-block;
				background: #F7F9FA;
				padding: 8rpx 10rpx;
				color: #157A2C;

			}

			&:nth-child(1),
			&:nth-child(2) {
				border-top: 1rpx solid #E3E5E5;
				margin-top: 8rpx;
			}

		}

	}
}





.content_num {
	display: flex;
	align-items: center;
	padding: 0 4rpx;

	/deep/ .uni-input-input {
		border: 2rpx solid #F0F8F2;
		background: #F0F8F2;
		color: $theme-color;
	}


}
</style>