yiliangyiyun-app/pages/task/viewDetail.vue

<template>
	<view class="center">
		<view class="data_css" v-for="(item,index) in dataList">
			<!-- <view class="data_item"> -->
				<!-- <view class="data_item_left">货源</view>
				<view class="data_item_right">{{item.customer}}</view> -->
				<!-- <u-form ref="uForm" >
				<u-form-item label-width='260' :borderBottom="false" class="label_css"  label="货源">
					<u-input v-model="item.customer" input-align="right" placeholder="--" disabled />
				</u-form-item>
				</u-form> -->
				<u-row customStyle="margin-bottom: 10px" class="row_css">
					<u-col span="6">
						<view class="demo-layout title_name">货源</view>
					</u-col>
					<u-col span="6">
						<view class="demo-layout value_css" >{{item.customer}}</view>
					</u-col>
				</u-row>
			<!-- </view> -->
			<view class="data_top_css">
				<u-row customStyle="margin-bottom: 10px" class="row_css">
					<u-col span="2">
						<view class="demo-layout title_name">车牌号</view>
					</u-col>
					<u-col span="4">
						<view class="demo-layout value_css" >{{item.carNo?item.carNo:'--'}}</view>
					</u-col>
					<u-col span="3">
						<view class="demo-layout title_name">水分(%)</view>
					</u-col>
					<u-col span="3">
						<view class="demo-layout value_css">{{item.waterContent?item.waterContent:'--'}}</view>
					</u-col>
				</u-row>
				<u-row customStyle="margin-bottom: 10px" class="row_css">
					<u-col span="3">
						<view class="demo-layout title_name">毛重(吨)</view>
					</u-col>
					<u-col span="3">
						<view class="demo-layout value_css">{{item.grossWeight?item.grossWeight:'--'}}</view>
					</u-col>
					<u-col span="3">
						<view class="demo-layout title_name">容重(g/L)</view>
					</u-col>
					<u-col span="3">
						<view class="demo-layout value_css">{{item.bulkDensity?item.bulkDensity:'--'}}</view>
					</u-col>
				</u-row>
				<u-row customStyle="margin-bottom: 10px" class="row_css">
					<u-col span="3">
						<view class="demo-layout title_name">皮重(吨)</view>
					</u-col>
					<u-col span="3">
						<view class="demo-layout value_css">{{item.tare?item.tare:'--'}}</view>
					</u-col>
					<u-col span="3">
						<view class="demo-layout title_name">杂质(%)</view>
					</u-col>
					<u-col span="3">
						<view class="demo-layout value_css">{{item.impurity?item.impurity:'--'}}</view>
					</u-col>
				</u-row>
				<u-row customStyle="margin-bottom: 10px" class="row_css">
					<u-col span="3">
						<view class="demo-layout title_name">净重(吨)</view>
					</u-col>
					<u-col span="3">
						<view class="demo-layout value_css">{{item.netWeight?item.netWeight:'--'}}</view>
					</u-col>
					<u-col span="3">
						<view class="demo-layout title_name">霉变粒(%)</view>
					</u-col>
					<u-col span="3">
						<view class="demo-layout value_css">{{item.mildewGrain?item.mildewGrain:'--'}}</view>
					</u-col>
				</u-row> 
				<u-row customStyle="margin-bottom: 10px" class="row_css">
					<u-col span="3">
						<view class="demo-layout title_name">单价(元/吨)</view>
					</u-col>
					<u-col span="3">
						<view class="demo-layout value_css">{{item.price?item.price:'--'}}</view>
					</u-col>
					<u-col span="3">
						<view class="demo-layout title_name">热损伤(%)</view>
					</u-col>
					<u-col span="3">
						<view class="demo-layout value_css">{{item. jiaorenli?item. jiaorenli:'--'}}</view>
					</u-col>
				</u-row>
				<u-row customStyle="margin-bottom: 10px" class="row_css">
					<u-col span="3">
						<view class="demo-layout title_name">粮款(元)</view>
					</u-col>
					<u-col span="3">
						<view class="demo-layout value_css">{{item.grainFund?item.grainFund:'--'}}</view>
					</u-col>
					<u-col span="4">
						<view class="demo-layout title_name">不完整粒(%)</view>
					</u-col>
					<u-col span="2"> 
						<view class="demo-layout value_css">{{item.imperfectGrain?item.imperfectGrain:'--'}}</view>
					</u-col>
				</u-row>
				<u-row customStyle="margin-bottom: 10px" class="row_css">
					<u-col span="3">
						<view class="demo-layout title_name">等级</view>
					</u-col>
					<u-col span="3">
						<view class="demo-layout value_css">{{item.grade?item.grade:'--'}}</view>
					</u-col>
				</u-row>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList: [],
			}
		},
		onLoad(options) {
			this.dataList = JSON.parse(options.data)
			console.log(this.dataList)
		},
		onShow() {

		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.center {
		padding: 30rpx 20rpx;
	}
	.u-form {
		// margin-bottom: 20rpx;
		background: #fff;
		border-radius: 10px;
		padding: 0rpx 10px;
	
		.u-form-item {
			line-height: 30px;
			padding: 0px 0;
			font-size: 26rpx;
			color: #878C9C;
		}
	}

	.data_css {
		background-color: #ffffff;
		border-radius: 20rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		.data_item {
			display: flex;
			.data_item_left,
			.data_item_right {
				width: 50%;
			}
			.data_item_left{
				margin-left: 10rpx;
			}

			.data_item_right {
				text-align: right;
			}
		}
		.data_top_css{
			margin-top: 10rpx;
			
		}
	}
	.row_css{
		margin-bottom: 10rpx;
	}
	.title_name{
		color: #8F8F8F;
	} 
	.value_css{
		color: #333333;
		text-align: right;
		margin-right: 40rpx;
	}
</style>