<template>
	<!-- 鉴权页面 -->
	<div class="Authorize container-login100">
		<div class="center">
			<label>
				<div class="padlock">
					<svg id="lock" viewbox="0 0 64 64">
						<circle stroke-width="2" fill="none" cx="32" cy="32" r="31" />
						<path
							d="M40.2,29v-4c0-4.5-3.7-8.2-8.2-8.2s-8.2,3.7-8.2,8.2v4H21v15h22V29H40.2z M27.2,25 c0-2.6,2.1-4.8,4.8-4.8s4.8,2.1,4.8,4.8v4h-9.5V25z" />
					</svg>
				</div>
			</label>
			<div class="input-icon">
				<input class="password" v-model="password" placeholder="请输入访问密码" type="password" @keyup.enter="submitpwd">
				<div class="arrow-icon">
					<svg id="arrow" viewbox="0 0 48 44">
						<polygon
							points="27.7,13.3 26.3,14.7 31.6,20 14,20 14,22 31.6,22 26.3,27.3 27.7,28.7 35.4,21 " />
					</svg>
				</div>
				<!-- <div class="error-message">Please try again.</div> -->
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				password:"",
			}
		},
		methods:{
			//密码输入事件
			submitpwd(){
				console.info("password",this.password);
				if(this.password=="luma108@"){
					this.$message({
					  message: '身份认证成功!',
					  type: 'success'
					});
					this.password = "";
					
					localStorage.isauthorize = "1";//认证
					this.$router.push("/");
					
				}else{
					localStorage.isauthorize = "0";//认证
					this.$message.error("密码错误");
					this.password = "";
				}
			},
		}
		
	}
</script>

<style scoped="scoped">
	.container-login100 {
		
		width: 100%;
		min-height: 100vh;
		align-items: center;
		padding: 15px;
		background-image: url("~@/assets/news/bg-01.jpg");
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
	}

	body {
		margin: 0;
		background: #f2f2f2;
		text-align: center;
		font-family: Arial, sans-serif;
		font-weight: 100
	}

	svg {
		width: 100%;
		height: 100%;
		
		width: 64px;
		height: 64px;
	}

	.center {
		text-align: center;
		position: absolute;
		top: 50%;
		left: 50%;
		-ms-transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%)
	}

	label {
		position: relative;
		margin: 0 auto 25px auto;
		display: inline-block
	}

	.padlock {
		position: relative;
		width: 64px;
		height: 64px;
		opacity: 1;
		-webkit-transition: .3s ease-in-out;
		transition: .3s ease-in-out
	}

	.padlock.hide {
		opacity: 0
	}

	.padlock svg circle {
		stroke: #a2a2a2
	}

	.padlock svg path {
		fill: #a2a2a2
	}

	.padlock.unlock svg circle {
		stroke: #1fd34a
	}

	.padlock.unlock svg path {
		fill: #1fd34a
	}

	.input-icon {
		position: relative;
		-webkit-transition: .3s ease-in-out;
		transition: .3s ease-in-out
	}

	.arrow-icon {
		position: absolute;
		top: 0;
		right: 0;
		width: 50px;
		height: 100%;
		background: #fff;
		display: none;
		z-index: -2
	}

	.arrow-icon.show {
		display: block;
		z-index: 2
	}

	.arrow-icon svg {
		fill: #d8d8d8
	}

	.arrow-icon:hover svg {
		fill: #444
	}

	.password {
		position: relative;
		width: 220px;
		height: 45px;
		letter-spacing: 0.05em;
		line-height: 1em;
		margin: 0;
		padding: 2px 70px 2px 15px;
		outline: none;
		border: none;
		border-radius: 1px;
		font-size: 14px;
		-webkit-transition: box-shadow 0.25s ease;
		transition: box-shadow 0.25s ease;
		-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
		box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2)
	}

	.input-icon.unlock {
		opacity: 0
	}

	.error-message {
		width: 275px;
		text-align: left;
		font-size: 14px;
		line-height: 1em;
		background-color: #f0523d;
		color: #fff;
		position: absolute;
		padding: 15px;
		opacity: 0;
		z-index: -1
	}

	.error-message.show {
		opacity: 1
	}
</style>
