<template>
  <div class="not-found-page">
    <h1>404</h1>
    <p>页面不存在</p>
    <router-link to="/">返回首页</router-link>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'NotFoundPage'
});
</script>

<style lang="scss" scoped>
.not-found-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  text-align: center;
  
  h1 {
    font-size: 6rem;
    margin-bottom: 1rem;
    color: #e74c3c;
  }
  
  p {
    font-size: 1.5rem;
    margin-bottom: 2rem;
    color: #333;
  }
  
  a {
    color: #3498db;
    text-decoration: none;
    font-size: 1.2rem;
    
    &:hover {
      text-decoration: underline;
    }
  }
}
</style> 