auth-web/src/components/Error/403.vue

<script lang="ts" setup>
import { useRouter } from 'vue-router';
import noAccess from '@/assets/status/403.svg?component';
import { $t } from '@/plugins/i18n';

defineOptions({
	name: '403',
});

const router = useRouter();
</script>

<template>
	<div class="flex justify-center items-center h-[640px]">
		<noAccess />
		<div class="ml-12">
			<p v-motion :enter="{ opacity: 1, y: 0, transition: { delay: 80 } }" :initial="{ opacity: 0, y: 100 }" class="font-medium text-4xl mb-4 dark:text-white">403</p>
			<p v-motion :enter="{ opacity: 1, y: 0, transition: { delay: 120 } }" :initial="{ opacity: 0, y: 100 }" class="mb-4 text-gray-500">
				{{ $t('sorryNoAccess') }}
			</p>
			<el-button v-motion :enter="{ opacity: 1, y: 0, transition: { delay: 160 } }" :initial="{ opacity: 0, y: 100 }" type="primary" @click="router.push('/')">
				{{ $t('returnToHomepage') }}
			</el-button>
		</div>
	</div>
</template>