<template>
	<div class="personal-sign">
		<form action="">
			<div><span>*</span><span>用户名：</span><input type="text" placeholder="请输入用户名作为账号" v-model="username">
			<p v-if="username.length > 3 && username.length < 10"><img src="../../../assets/reg_tips_proper.png" alt="">输入正确</p>
			<p v-else><img src="../../../assets/reg_tips_err.png" alt="">输入错误！用户名不能为空或长度过短过长</p>
			</div>
			<div><span>*</span><span>密码：</span><input type="password" placeholder="请输入6-20位(字母,数字符号)" v-model="passage1">
			<p v-if="passage1.length >= 6 && passage1.length <=20"><img src="../../../assets/reg_tips_proper.png" alt="">输入正确</p>
			<p v-else><img src="../../../assets/reg_tips_err.png" alt="">输入错误！密码不能为空或长度过短过长</p>
			<div class="passagepower">
			<span>密码强度：</span>
			<div class="poweritem1" v-if="passage1.length >= 6 && passage1.length <= 20"></div>
			<div class="poweritem2" v-if="passage1.length >= 10 && passage1.length <= 20"></div>
			<div class="poweritem3" v-if="passage1.length >= 15 && passage1.length <= 20"></div>
			</div>
			</div>
			<div><span>*</span><span>确认密码：</span><input type="password" placeholder="请输入您的密码" v-model="passage2">
			<p v-if="passage2 == passage1 && passage2.length >= 6 && passage2.length <= 20"><img src="../../../assets/reg_tips_proper.png" alt="">输入正确</p>
			<p v-else><img src="../../../assets/reg_tips_err.png" alt="">输入错误！密码不一致</p>
			</div>
			<div><span>*</span><span>真实姓名：</span><input type="text" placeholder="请输入你的真实姓名" v-model="turename">
			<p v-if="turename && turename.length < 10"><img src="../../../assets/reg_tips_proper.png" alt="">输入正确</p>
			<p v-else><img src="../../../assets/reg_tips_err.png" alt="">输入错误！</p>
			</div>
			<button class="reg-btn" type="submit" @click="signup()">立即注册</button>
			<p class="reg-p">点击注册表示你同意<a href="">用户协议</a></p>
			</form>
		</div>
	</div>
</template>

<script>
	export default{
		name:'personalsign',
		data(){
			return{
				username:'',
				passage1:'',
				passage2:'',
				turename:''
			}
		}
	}
</script>

<style>
	.personal-sign{
		width: 480px;
		height: 560px;
		background-color: #fcfcfe;
		margin: 30rem;
		line-height: 5rem;
		position: relative;
	}
	.personal-sign > form > div > span:nth-child(1){
		color: red;
		margin-left: 5rem;
		justify-content: center;
		align-items: center;
	}
	.personal-sign > form > div > span:nth-child(2){
		color: #6f6f71;
		justify-content: center;
		align-items: center;
	}
	.personal-sign > form > div{
		position: relative;
	}
	.personal-sign > form > div > p{
		position: absolute;
		font-size: 5px;
		top: 2rem;
		left: 12.8rem;
	}
	.personal-sign > form > div > p:nth-child(1){
		color: #477f3e;
	}
	.personal-sign > form > div > p:nth-child(2){
		color: #801d22;
	}
	.personal-sign > form > div > p > img{
		width: 10px;
		height: 10px;
	}
	.personal-sign > form > div > input{
		width: 150px;
		height: 26px;
		border: 1px solid #b7bbd4;
		outline: none;
		position: absolute;
		right: 8rem;
		margin-top: 1.8rem;
		z-index: 100;
	}
	.personal-sign > form > div > input:hover{
		background-color: lightgoldenrodyellow;
	}
	.reg-btn{
		background-color: #4297e8;
		width: 152px;
		height: 26px;
		color: #edffff;
		margin-left: 12.5rem;
		cursor: pointer;
		outline: none;
		border: none;
		}
	.reg-p{
		color: #767678;
		font-size: 5px;
		margin-top: -2rem;
		margin-left: 12.5rem;
	}
	.reg-p > a{
		text-decoration: none;
		margin-left: 1rem;
		color: #6057a6;
	}
	.reg-p > a:hover{
		color: darkred;
	}
	.passagepower{
		width: 300px;
		height: 15px;
		position: relative;
	}
	.passagepower > span{
		color: #c2c2c4;
		font-size: 9px;
		position: absolute;
		top: -1.7rem;
		left: 12.9rem;
	}
	.poweritem1{
		background-color: #ff1e00;
		color: #b1b1b3;
		width: 20px;
		height: 10px;
		position: absolute;
		top: 0.4rem;
		left: 16.4rem;
	}
	.poweritem2{
		background-color: #f3e723;
		color: #b1b1b3;
		width: 20px;
		height: 10px;
		font-size: 5px;
		position: absolute;
		top: 0.4rem;
		left: 18rem;
	}
	.poweritem3{
		background-color: #b7e17f;
		color: #b1b1b3;
		width: 20px;
		height: 10px;
		font-size: 10px;
		position: absolute;
		top: 0.4rem;
		left: 19.6rem;
	}
</style>