<template>
	<div class="login-wrapper">
		<div class="login-box">
			<!-- 头像容器 -->
			
			<!-- 表单容器 -->
			<div class="login-form-box">
				<el-form label-width="0px" ref="loginFormRef" class="login-form" :model="loginForm" :rules="loginRules">
					<!--用户名-->
					<el-form-item prop="username">
						<el-input placeholder="请输入用户名" prefix-icon="el-icon-s-custom"
							v-model="loginForm.username"></el-input>
					</el-form-item>
					<!--密码-->
					<el-form-item prop="password">
						<el-input placeholder="请输入密码" prefix-icon='el-icon-s-goods' v-model="loginForm.password"
							type="password"></el-input>
					</el-form-item>
					<!--按钮-->
					<el-form-item class="btns">
						<el-button type="primary" @click="login">登录</el-button>
						<el-button type="info" @click="resetLoginForm">重置</el-button>
					</el-form-item>
				</el-form>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		name: "Login",
		data() {
			return {
				loginForm: {
					username: 'admin',
					password: '123456'
				},
				loginRules: {
					username: [{
							required: true,
							message: "请输入用户名",
							trigger: 'blur'
						},
						{
							min: 5,
							max: 10,
							message: "请输入正确的用户名",
							trigger: 'blur'
						}
					],
					password: [{
							required: true,
							message: "请输入密码",
							trigger: 'blur'
						},
						{
							min: 5,
							max: 16,
							message: "请输入正确的密码",
							trigger: 'blur'
						}
					]
				}
			}
		},
		methods: {
			resetLoginForm() {
				this.$refs.loginFormRef.resetFields()
			},
			login() {
				this.$router.push("/home")

			}
		}
	};
</script>

<style Lang='scss' scoped>
	.login-wrapper {
 position : absolute;
 	width : 100%;
 	height : 100%;
}

.login-box {
  width: 450px;
  height: 250px;
  background-color: #fff;
  padding-top: 50px;
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  margin: auto;
}
.avatar-box {
  width: 130px;
  height: 130px;
  border: 1px solid #eee;
  border-radius: 50%;
  /* position: absolute; */
  box-shadow: 0 0 10px #ddd;
  align-self: center;
  transform: translate(0, -50%);
  background-color: #fff;
}
.avatar-box img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.login-form-box {
  width: 410px;
  height: 200px;
  padding: 60px 20px 0;
  justify-self:end;
  transform: translate(0,-10%);
}
.btns {
  display: flex;
  justify-content: flex-end;
}
</style>