<template>
	<div class="content">
		<div class="desc">403</div>
		<div class="descZH">
			<span class="sorry">{{ $t('common.sorry') }}</span>
			<span class="page">{{ $t('common.useLess') }}</span>
		</div>
	</div>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'

defineOptions({ name: 'forbidden' })

const router = useRouter()
const countdown = ref(3)

onMounted(() => {
	// const timer = setInterval(() => {
	//     countdown.value--
	//     if (countdown.value === 0) {
	//         clearInterval(timer)
	//         router.replace({ path: '/' })
	//     }
	// }, 1000)
})
</script>
<style scoped lang="less">
.content {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: #121826;

	.desc {
		font-size: 120px;
		font-weight: 900;
		line-height: 180px;
		color: #757c85;
	}

	.descZH {
		color: #757c85;
		font-weight: 900;

		.sorry {
			font-size: 60px;
		}

		.page {
			font-size: 40px;
		}
	}

	.descEN {
		color: #757c85;
		font-size: 48px;
	}

	.countdown {
		color: #757c85;
		font-size: 48px;
		margin-top: 50px;
	}
}
</style>
