jp-floorlock-Inspection/pages/task/infoTask.vue

<template>
	<view  class="jpmain  ">
		<u-navbar  title="故障详情" title-color="#101010"></u-navbar>
		<view class="list" >
			
			<view class="item">
				<view class="name">
					地锁编号
			
				</view>
				<view class="value">
					123123123
				</view>
			</view>
			<view class="item">
				<view class="name">
					负责人
			
				</view>
				<view class="value">
					11111111
				</view>
			</view>
			<view class="item">
				<view class="name">
					联系电话
			
				</view>
				<view class="value" style=" color:#1677FF;">
					123123123
				</view>
			</view>
		</view>
		
		
		
		<view class="list" >
			
			<view class="item">
				<view class="name">
					认领时间
			
				</view>
				<view class="value">
					123123123
				</view>
			</view>
			<view class="item">
				<view class="name">
					负责人
			
				</view>
				<view class="value">
					11111111
				</view>
			</view>
			
		</view>
		
		
		
		<view class="list" >
			<view class="item">
				<view class="name">
					处理时间
			
				</view>
				<view class="value">
					123123123
				</view>
			</view>
			<view class="item">
				<view class="name">
					处理结果
			
				</view>
				<view class="value">
					123123123
				</view>
			</view>
			<view class="item">
				<view class="name">
					现场照片
			
				</view>
				<view class="value">
					11111111
				</view>
			</view>
			
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
.jpmain{padding-bottom: 120rpx;}
.list{
		background-color: rgba(255,255,255,1);
		
		margin: 20rpx 0;
		.item:not(:last-child) {
		  border-bottom:1px solid rgba(232,232,232,1);
		}
		.item{
			padding: 32rpx;
			display: flex;
			    justify-content: space-between;
			.name{
				    width: 40%;
					font-size: 32rpx;
					color: #777777;
					span{
						color:red
					}
					white-space: pre;
			}
			.value{
				font-size: 32rpx;
				    width: 60%;
				display: flex;
				    justify-content: space-between;
					input::placeholder{
						color:#AAAAAA;
					}
					.img{
						width: 40rpx;
						height: 40rpx;
						
					}
					.textarea{
						background-color: rgba(241,242,245,1);
						width: 100%;
						border-radius: 4px;
					}
					
			}
		}
		.item-plus{
			flex-direction: column;
			.value,.name{
				   width: 100%;
			}
			.name{
				    padding-bottom: 32rpx;
			}
		}
	}
</style>