<template>
	<div class="index">
		<div class="header">
			<span class="tip">{{ $t('AlphaVersion') }}</span>
			<img src="@/assets/images/logo-1.png" class="logo" />
			<p class="split"></p>
			<button class="login" @click="onLogin">{{ $t('Login.login') }}</button>
			<button class="register" @click="onRegister">{{ $t('Login.signUp') }}</button>
		</div>
		<img src="@/assets/images/login/index-title.png" class="title" draggable="false" />
		<img src="@/assets/images/login/index-zhuangshi.png" class="zhuangshi" draggable="false" />
		<div class="tip">{{ $t('Login.indexTip') }}</div>
	</div>
</template>

<script setup lang="ts">
	import { computed } from 'vue'
	import { useRouter } from 'vue-router'
	const router = useRouter()
	const onLogin = () => {
		router.push({ name: 'login' })
	}
	const onRegister = () => {
		router.push({ name: 'register' })
	}
</script>

<style lang="less" scoped>
	.index {
		width: 100%;
		height: 100%;
		overflow: hidden;
		position: relative;
		background-image: url('@/assets/images/login/index-bg.png');
		background-size: cover;
		background-position: center;
		> .header {
			position: absolute;
			top: 3rem;
			left: 0;
			width: 100%;
			display: flex;
			justify-content: center;
			> * {
				position: relative;
				z-index: 1;
			}
			> .tip {
				position: absolute;
				width: 100%;
				top: 0;
				left: 0;
				font-size: 3rem;
				text-align: center;
				font-family: Regular;
				color: #fff;
				z-index: 0;
			}
			> .logo {
				width: auto;
				height: 2.5rem;
				margin-left: 3.8rem;
			}
			> .split {
				margin: 0 auto;
			}
			> button {
				margin-right: 3rem;
				width: 20rem;
				height: 5.2rem;
				border-radius: 5rem;
				border: none;
				outline: none;
				font-size: 2.2rem;
				font-weight: 600;
				font-family: SemiBold;
				border: 0.2rem solid #fff;
				&:active {
					opacity: 0.8;
				}
			}
			> .login {
				background-color: #fff;
				color: #713e1f;
			}
			> .register {
				background-color: transparent;
				color: #ffffff;
				backdrop-filter: blur(10px);
			}
		}
		> .zhuangshi,
		> .title,
		> .tip {
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
		}
		> .title {
			width: 55%;
			height: auto;
			top: 20.5rem;
		}
		> .zhuangshi {
			width: 21.5rem;
			height: auto;
			bottom: 13.4rem;
		}
		> .tip {
			font-size: 2.8rem;
			font-family: Regular;
			color: #fff;
			bottom: 8rem;
		}
	}
</style>
