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>