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

<template>
	<view  class="jpmain  " >
			<u-navbar  title="故障上报" title-color="#101010"></u-navbar>
			<u-picker mode="selector"
			 v-model="isswitchshow" 
			 :range="columns" range-key="label"
			  :default-selector="columnsindex"
			   @confirm="switchBtn" ></u-picker>
			<view class="list" >
				<view class="item"  >
					<view class="name">
						<span>*</span>选择地锁
				
					</view>
					<view class="value" @click="isswitchshowBtn">
						<view :style="taskInfo.parkingIdN?'':'color:#BBB'"
						>{{taskInfo.parkingIdN?taskInfo.parkingIdN:'请选择所属停车场'}}</view>
						<u-icon name="arrow-right" size="24" color="#BBBBBB"></u-icon>
					</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 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">
						<span>*</span>选择地锁
				
					</view>
					<view class="value" @click="isswitchshowBtn">
						<view :style="taskInfo.parkingIdN?'':'color:#BBB'"
						>{{taskInfo.parkingIdN?taskInfo.parkingIdN:'请选择所属停车场'}}</view>
						<u-icon name="arrow-right" size="24" color="#BBBBBB"></u-icon>
					</view>
				</view>
				<view class="item item-plus"  >
					<view class="name">
						问题描述
				
					</view>
					<view class="value" >
						<textarea placeholder="请简单描述处理内容" class="textarea"></textarea>
					</view>
				</view>
				<view class="item item-plus"  >
					<view class="name">
						上传图片
				
					</view>
					<view class="value" >
						<u-upload></u-upload>
					</view>
				</view>
			</view>
			
			<view class="floating-button">
				<view class="button"  @click="submit" >
					
					提交
				</view>
				
			</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				taskInfo:{}
			};
		}
	}
</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;
			}
		}
	}
	
	.floating-button {
		position: fixed; 
		  bottom: 0;    /* 距离底部 20px */
		    width: 100%;
			 display: flex;
			  height: 120rpx;
			    justify-content: center;
			background-color: rgba(255,255,255,1);
			.button{
				margin-top: 24rpx;
				border-radius: 50px;
			 height: 80rpx;
				width: 80%;
				display: flex;
				    align-items: center;
				    justify-content: center;
					padding:12rpx;
					
					background-color: rgba(22,119,255,1);
					color: rgba(255,255,255,1);
					font-size: 36rpx;
			}
	}
</style>