jp-floorlock-phone/pages/main/ahtml/mylock/bindLock.vue

<template>
	<view class="jpmain  ">
		<view class="body">
			<u-steps :list="numList" mode="number" :current="current" un-active-color="#999999"></u-steps>
			</view>
			<view class="list">
				<view class="item">
					<view class="name">
						<span>*</span>地锁编号

					</view>
					<view class="value">
						<view>1231231</view>
						<view><img class="img" src="@/assets/img/mylock/item3.png" alt=""></view>
					</view>
				</view>
			</view>

			<view class="list">
				<view class="item">
					<view class="name">
						<span>*</span>地锁编号

					</view>
					<view class="value">
						<input placeholder="请填写用户真实姓名" />
					</view>
				</view>
				<view class="item">
					<view class="name">
						<span>*</span>联系电话

					</view>
					<view class="value">
						<input placeholder="请填写用户联系电话" />
					</view>
				</view>
			</view>

			<view class="list">
				<view class="item">
					<view class="name">
						<span>*</span>所属停车场

					</view>
					<view class="value">
						<view>请选择所属停车场</view>
						<u-icon name="arrow-right" size="24" color="#BBBBBB"></u-icon>
					</view>
				</view>
				<view class="item">
					<view class="name">
						<span>*</span>车位类型


					</view>
					<view class="value">
						<view>请选择车位类型</view>
						<u-icon name="arrow-right" size="24" color="#BBBBBB"></u-icon>
					</view>
				</view>
				<view class="item">
					<view class="name">
						<span>*</span>车位编号


					</view>
					<view class="value">
						<input placeholder="如1号车位" />
					</view>
				</view>
				<view class="item">
					<view class="name">
						位置描述

					</view>
					<view class="value">
						<input placeholder="请描述车位位置信息" />
					</view>
				</view>
			<view class="floating-button">
				<view class="button">
					
					提交申请
				</view>
				
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				numList: [{
					name: '绑定地锁'
				}, {
					name: '等待审核'
				}, {
					name: '完成绑定'
				}],
			};
		}
	}
</script>

<style lang="scss">
	page {
		background-color: rgba(242, 244, 246, 1);
	}

	.body {
		padding: 32rpx;
	}
	.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;
					}
			}
		}
	}
	.uni-input-placeholder{
		color:#AAAAAA;
	}
	
	.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>