moxuan_takeaway_qishou_1/pages/login/running_rider/running_rider.vue

<template>
	<view class="content">
		<view class="user_box">
			<u-form :model="form" ref="uForm" label-position="top">
				<u-form-item label="姓名">
					<u-input v-model="form.name" height="60rpx" placeholder="可商议" />
				</u-form-item>
				<u-form-item label="出生日期">
					<u-input v-model="form.data" height="60rpx" placeholder="请填写 (必填)" />
				</u-form-item>
				<u-form-item label="地址">
					<u-input v-model="form.address" height="60rpx" placeholder="请填写 (选填)" />
				</u-form-item>
			</u-form>
		</view>
		<!-- 实名认证 -->
		<view class="user_upload">
			<view class="upload_name">实名认证</view>
			
			<view class="upload_box">
				<view class="upload" v-for="(item,index) in upload_list" :key="item.id">
					<view class="box">
						<view class="upload_image">
							<image :src="item.image"></image>
						</view>
						<view class="upload_tit">{{item.name}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 缴纳保证金 -->
		<view class="deposit">
			<view class="deposit_left">
				<view class="deposit_name">缴纳保证金</view>
				<view class="deposit_tit">满足订单量及好评率即可申请退还保证金</view>
			</view>
			<view class="deposit_right">
				￥200
			</view>
		</view>
		<!-- checkbox -->
		<view class="sure_submit">
			<u-checkbox-group>
				<u-checkbox v-model="checked" shape="circle">同意并接受《跑腿代购服务用户协议》</u-checkbox>
			</u-checkbox-group>
		</view>
		<!-- 底部 tabbar -->
		<view class="tabbar">
			<view class="tabbar_price">
				支付:<text>￥200</text>
			</view>
			<view class="tabbar_btn">
				<view class="btn">注册并支付</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					name: '',
					data: '',
					address: ''
				},
				upload_list: [{
					id: 1,
					name: '请拍摄身份证正面',
					image: '../../../static/login/add.png'
				}, {
					id: 1,
					name: '请拍摄身份证反面',
					image: '../../../static/login/add.png'
				}, {
					id: 1,
					name: '请拍摄手持身份证正面',
					image: '../../../static/login/add.png'
				}]
			}
		},
		methods: {

		}
	}
</script>

<style>
	body {
		background: #F5F5F5;
	}

	.content {
		width: 100%;
	}

	.user_box {
		width: 90%;
		margin: 0 auto;
		height: 360rpx;
		background: #ffffff;
		margin-top: 30rpx;
		border-radius: 18rpx;
		padding-top: 10rpx;
	}

	.u-form-item {
		padding: 0rpx 0 !important;
		font-weight: bold !important;
		/* margin-left: 40rpx !important; */
		line-height: 40rpx !important;
		margin-top: 20rpx;
	}

	.u-input__input {
		font-size: 25rpx !important;
		font-weight: 400 !important;
	}

	/* 实名认证 */
	.user_upload {
		width: 90%;
		margin: 0 auto;
		/* height: 500rpx; */
		background: #ffffff;
		margin-top: 50rpx;
		border-radius: 18rpx;
	}

	.upload_name {
		width: 90%;
		margin: 0 auto;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 27rpx;
		font-weight: bold;
	}

	.upload_box {
		width: 90%;
		margin: 0 auto;
	}

	.upload {
		width: 100%;
		height: 300rpx;
		border: 1rpx dashed;
		margin-bottom: 37rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.box {
		width: 300rpx;
		text-align: center;
	}

	.upload_image image {
		width: 73rpx;
		height: 60rpx;
	}

	.upload_tit {
		font-size: 23rpx;
		color: #353535;
	}

	/* 缴纳保证金 */
	.deposit {
		width: 90%;
		margin: 0 auto;
		height: 135rpx;
		margin-top: 20rpx;
		background: #FFFFFF;
		display: flex;
		border-radius: 18rpx;
	}

	.deposit_left {
		flex: 2;
		margin-left: 25rpx;
		margin-top: 25rpx;
	}

	.deposit_name {
		color: #FF9707;
		font-size: 26rpx;
		font-weight: bold;
		letter-spacing: 2rpx;
	}

	.deposit_tit {
		font-size: 22rpx;
		color: #999999;
		margin-top: 10rpx;
	}

	.deposit_right {
		flex: 1;
		color: #F1413D;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		margin-right: 25rpx;
	}

	.sure_submit {
		width: 90%;
		margin: 0 auto;
		height: 100rpx;
		display: flex;
		justify-content: left;
		align-items: center;
		margin-bottom: 90rpx;
	}

	/*  checkbox */
	.u-checkbox__label {
		font-size: 23rpx !important;
		color: #888888 !important;
	}

	.u-checkbox__icon-wrap--circle {
		width: 26rpx !important;
		height: 26rpx !important;
	}

	/* 底部 tabbar */
	.tabbar {
		width: 100%;
		height: 100rpx;
		background: #ffffff;
		position: fixed;
		bottom: 0rpx;
		left: 0rpx;
		right: 0rpx;
		display: flex;
	}

	.tabbar_price {
		flex: 1;
		margin-left: 50rpx;
		display: flex;
		justify-content: left;
		align-items: center;
		color: black;
		font-size: 30rpx;
		font-weight: bold;
		letter-spacing: 2rpx;
	}

	.tabbar_price text {
		color: red;
		font-weight: 500;
		font-size: 28rpx;
	}

	.tabbar_btn {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.btn {
		background: #ff6a04;
		border-radius: 41rpx;
		width: 220rpx;
		height: 74rpx;
		text-align: center;
		line-height: 74rpx;
		color: white;
		font-size: 25rpx;
		letter-spacing: 1rpx;
	}
	
	
</style>