<template>
  <div class="not-found-page">
    <div class="container">
      <div class="error-content">
        <div class="error-code">404</div>
        <div class="error-divider" />
        <h1 class="error-title">页面未找到</h1>
        <p class="error-message">抱歉，您访问的页面不存在</p>
        <router-link to="/" class="home-button">
          <span class="button-icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
              <polyline points="9 22 9 12 15 12 15 22" />
            </svg>
          </span>
          返回首页
        </router-link>
      </div>
      <div class="error-illustration">
        <svg width="300" height="200" viewBox="0 0 300 200" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M260 160H40C35.5817 160 32 156.418 32 152V48C32 43.5817 35.5817 40 40 40H260C264.418 40 268 43.5817 268 48V152C268 156.418 264.418 160 260 160Z" fill="#E6EDF5"/>
          <path d="M150 70L180 120H120L150 70Z" fill="#3498db"/>
          <circle cx="150" cy="130" r="10" fill="#3498db"/>
          <path d="M32 48C32 43.5817 35.5817 40 40 40H260C264.418 40 268 43.5817 268 48V60H32V48Z" fill="#3498db"/>
          <circle cx="46" cy="50" r="4" fill="white"/>
          <circle cx="58" cy="50" r="4" fill="white"/>
          <circle cx="70" cy="50" r="4" fill="white"/>
        </svg>
      </div>
    </div>
  </div>
</template>

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

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

<style lang="scss" scoped>
.not-found-page {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #f8fafc;
  
  
  .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 800px;
    padding: 2rem;
    
    @media (min-width: 768px) {
      flex-direction: row;
      justify-content: space-between;
    }
  }
  
  .error-content {
    text-align: center;
    margin-bottom: 2rem;
    
    @media (min-width: 768px) {
      text-align: left;
      margin-right: 2rem;
      margin-bottom: 0;
    }
  }
  
  .error-code {
    font-size: 6rem;
    font-weight: 700;
    color: #3498db;
    line-height: 1;
    margin-bottom: 1rem;
  }
  
  .error-divider {
    height: 4px;
    width: 60px;
    background-color: #3498db;
    margin: 1.5rem auto;
    
    @media (min-width: 768px) {
      margin: 1.5rem 0;
    }
  }
  
  .error-title {
    font-size: 2rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 1rem;
  }
  
  .error-message {
    font-size: 1.1rem;
    color: #7f8c8d;
    margin-bottom: 2rem;
    line-height: 1.5;
  }
  
  .home-button {
    display: inline-flex;
    align-items: center;
    background-color: #3498db;
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 4px 6px rgba(52, 152, 219, 0.2);
    
    &:hover {
      background-color: #2980b9;
      transform: translateY(-2px);
      box-shadow: 0 6px 8px rgba(52, 152, 219, 0.3);
    }
    
    .button-icon {
      display: inline-flex;
      margin-right: 0.5rem;
    }
  }
  
  .error-illustration {
    flex-shrink: 0;
  }
}
</style> 