<template>
	<view class="content">
		<view class="form">
			<view class="formItem">
				<view class="icon">
					<image src="../../static/images/icon (18).png" mode=""></image>
				</view>
				<view class="inputW">
					<u--input v-model="FormData.phone" placeholder="请输入手机号" type="number" clearable></u--input>
				</view>
			</view>
			<view class="formItem">
				<view class="icon">
					<image src="../../static/images/icon (14).png" mode=""></image>
				</view>
				<view class="inputW">
					<u--input v-model="FormData.phone" placeholder="请输入密码"  clearable></u--input>
				</view>
			</view>
			<view class="formItem">
				<view class="inputW">
					<u--input v-model="FormData.phone" placeholder="请输入验证码" type="number" clearable></u--input>
				</view>
				<view class="sendCode">{{ sendCode }}</view>
			</view>
			<view class="formItem btnBg" @click="$goPage('/pages/index/index')">登录</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				FormData: {
				},
				sendCode: '获取验证码'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
	  .form {
		  width: 86%;
		  margin-top: 24%;
	    .formItem {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 112rpx;
			border-radius: 56rpx;
			background: #f4f7ff;
			margin-bottom: 44rpx;
			padding: 0 50rpx;
	      .icon {
			  width: 48rpx;
			  height: 48rpx;
	      }
	
	      .inputW {
			  flex: 1;
			  width: 0;
	        u--input {
	
	        }
	      }
		  .sendCode {
			  font-size: 26rpx;
			  color: rgb(192, 196, 204);;
		  }
		  &.btnBg {
			  background: $themC;
			  text-align: center;
			  font-size: 30rpx;
			  width: 100%;
			  letter-spacing: 1em;
			  opacity: 0.4;
			  &.actvie {
				  opacity: 1;
			  }
		  }
	    }
	  }
	}
</style>
