<template>
	<view class="content">
		<view class="applyForm">
			<view class="formCol">
				<view class="title"><image src="../../static/icon_xingming@2x.png"></image><text>我的姓名</text></view>
				<view class="formOuter">
					<input type="text"/>
				</view>
			</view>
			<view class="formCol">
				<view class="title"><image src="../../static/icon_shouji@2x.png"></image><text>我的手机号</text></view>
				<view class="formOuter">
					<input type="text"/>
				</view>
			</view>
			<view class="formCol">
				<view class="title"><image src="../../static/icon_xingbie@2x.png"></image><text>我的性别</text></view>
				<view class="sexOuter">
						<view class="selCol"><text class="iconfont icon-circle"></text>男</view>
						<view class="selCol"><text class="iconfont icon-success"></text>女</view>
				</view>
			</view>
			<view class="formCol">
				<view class="title"><image src="../../static/icon_chanqi@2x.png"></image><text>我的预产期/宝宝生日</text></view>
				<view class="formOuter">
					<input type="text"/>
				</view>
			</view>
			<view class="formCol">
				<view class="title"><image src="../../static/icon_dizhi@2x.png"></image><text>我的地址</text></view>
				<view class="formOuter">
					<input type="text"/>
				</view>
				<view class="areaOuter">
					<textarea placeholder-style="color:#CCCCCC" placeholder="详细地址"/>					
				</view>
			</view>	
			<view class="formCol">
				<view class="title"><image src="../../static/icon_huodong@2x.png"></image><text>之前参与过优孕课堂的活动吗?</text></view>
				<view class="formOuter">
					<input type="text"/>
				</view>
			</view>	
			<navigator url="../regSuccess/regSuccess">
			<view class="pinkBtn">确认提交</view>
			</navigator>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {			
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	page{background: #fff;}
</style>
<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.applyForm{
		width:100%;
		padding:0 40rpx;
		box-sizing: border-box;
		.title{
			margin-top:40rpx;
			font-size: 32rpx;
			font-weight: 500;
			color: #333333;	
			display: flex;
			justify-content: flex-start;
			align-items: center;
			align-content: center;
			image{width:32rpx;height:32rpx;display: block;margin-right:15rpx;}
		}
		.formOuter{
			position: relative;
			box-sizing: border-box;
			height: 84rpx;
			border-radius: 7rpx;
			border: 1rpx solid #DEDEDE;		
			width:100%;
			margin-top:40rpx;
			input{
				position: absolute;
				width:100%;
				height:100%;
				top:0;left:0;
				box-sizing: border-box;
				padding:0 32rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #333333;	
			}
		}
		.sexOuter{
			height: 44rpx;
			width:100%;
			margin-top:40rpx;
			display:flex;
			flex-direction: flex-start;
			align-items: center;
			align-content: center;
			.selCol{
				font-size: 32rpx;color:#333;flex:1;
				.iconfont{font-size:36rpx;margin-right:8rpx;}
				.icon-circle{color:#999;}
				.icon-success{color:#FF578A;}
			}
		}
		.areaOuter{
			box-sizing: border-box;
			border-radius: 7rpx;
			border: 1rpx solid #DEDEDE;		
			width:100%;
			margin-top:40rpx;	
			textarea{height:150rpx;font-size: 28rpx;padding:30rpx;box-sizing: border-box;width:100%;}		
		}
		.pinkBtn{
			width: 670rpx;
			height: 88rpx;
			background: linear-gradient(90deg, #FF7E95 0%, #FF447B 100%);
			border-radius: 44rpx;
			font-size: 36rpx;
			font-weight: 500;
			color: #FFFFFF;		
			text-align: center;
			line-height:88rpx;
			margin:80rpx auto;
			
		}
	}
	
</style>
