Jingde-town-wechat-uniapp/pages_order/mine/volunteer.vue

<template>
	<!-- 加入志愿者 -->
	<view class="volunteer">
		<navbar title="加入志愿者" leftClick @leftClick="$utils.navigateBack" />
		<view class="volunteer-form">
			<view class="volunteer-form-title">
				<view>志愿者信息</view>
			</view>
			<view class="volunteer-form-sheet">
				<view>
					<uv-input placeholder="请输入您的姓名" border="none" fontSize="28rpx"
						:custom-style="{backgroundColor: '#fff'}">
						<template #prefix>
							<view style="background-color: #FCFAF3;">
								<uv-text size="28rpx" margin="30rpx 50rpx 30rpx 0rpx" text="姓名" />
							</view>
						</template>
					</uv-input>
				</view>
				<view>
					<uv-input placeholder="请输入证件号码" border="none" fontSize="28rpx"
						:custom-style="{backgroundColor: '#fff'}">
						<template #prefix>
							<view style="background-color: #FCFAF3;">
								<uv-text size="28rpx" margin="30rpx 30rpx 30rpx 0rpx" text="证件号码" />
							</view>
						</template>
					</uv-input>
				</view>
				<view>
					<uv-input placeholder="请输入手机号码" border="none" fontSize="28rpx"
						:custom-style="{backgroundColor: '#fff'}">
						<template #prefix>
							<view style="background-color: #FCFAF3;">
								<uv-text size="28rpx" margin="30rpx 50rpx 30rpx 0rpx" text="手机号码" />
							</view>
						</template>
					</uv-input>
				</view>
				<view>
					<uv-input placeholder="请输入验证码" border="none" fontSize="28rpx"
						:custom-style="{backgroundColor: '#fff'}">
						<template #prefix>
							<view style="background-color: #FCFAF3;">
								<uv-text size="28rpx" margin="30rpx 50rpx 30rpx 0rpx" text="姓名" />
							</view>
						</template>
					</uv-input>
				</view>

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

<script>
</script>

<style scoped lang="scss">
	.volunteer {
		.volunteer-form {
			width: 94%;
			margin-top: 40rpx;
			margin-left: 3%;

			.volunteer-form-title {
				color: #333;
				font-size: 36rpx;
				font-weight: 600;
				padding: 0rpx 0rpx 0rpx 8rpx;
				border-left: 8rpx solid #F6732D;
			}

			.volunteer-form-sheet {
				display: flex;
				height: 500rpx;
				flex-direction: column;
				justify-content: space-around;
			}
		}
	}
</style>