huijia-website/app/error.vue

<template>
  <div class="error-page flex-center flex-col min-h-100vh bg-#F6F8FD">
    <div class="error-content text-center">
      <div class="text-120px font-bold text-#0F67F8 mb-24px">{{ error?.statusCode }}</div>
      <h1 class="text-24px text-#091221 mb-16px font-bold">
        {{ error?.statusCode === 404 ? '页面未找到' : '系统出错了' }}
      </h1>
      <p class="text-16px text-#64748b mb-40px">
        {{
          error?.statusCode === 404
            ? '抱歉，您访问的页面不存在或已被移除'
            : '抱歉，服务器暂时无法处理您的请求，请稍后再试'
        }}
      </p>
      <button class="btn-primary" @click="handleError">返回首页</button>
    </div>
  </div>
</template>

<script setup lang="ts">
  import type { NuxtError } from '#app'

  const props = defineProps({
    error: Object as () => NuxtError,
  })

  const handleError = () => {
    clearError({ redirect: '/' })
  }
</script>

<style scoped lang="scss">
  .btn-primary {
    @apply px-32px py-12px bg-#0F67F8 text-white rounded-8px font-medium transition-all hover:opacity-90 active:scale-95;
    box-shadow: 0 4px 12px rgba(15, 103, 248, 0.25);
  }
</style>