<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()
</script>

<template>
  <div class="error-page flex-center flex-col">
    <div class="code">404</div>
    <div class="message">抱歉，您访问的页面不存在</div>
    <el-button type="primary" @click="router.push('/')">返回首页</el-button>
  </div>
</template>

<style scoped>
.error-page {
  height: 100vh;
  gap: 16px;
}

.code {
  font-size: 120px;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1;
}

.message {
  font-size: 18px;
  color: var(--color-text-secondary);
}
</style>
