FiDA_Front/src/views/login/index.vue

<template>
	<div class="index background-pink">
		<div class="header">
			<p class="split"></p>
			<button class="login" @click="onLogin">{{ $t('Login.Login') }}</button>
			<button class="register" @click="onRegister">{{ $t('Login.SignUp') }}</button>
		</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;
		> .header {
			position: absolute;
			top: 3rem;
			left: 0;
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			> .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;
				&:active {
					opacity: 0.8;
				}
			}
			> .login {
				background-color: #ff7a51;
				color: #fff;
			}
			> .register {
				background-color: #fff;
				color: #232323;
			}
		}
	}
</style>