<template>
  <div class="not-found">
    <!-- 背景装饰 -->
    <div class="background-decoration">
      <div class="floating-shape shape-1"></div>
      <div class="floating-shape shape-2"></div>
      <div class="floating-shape shape-3"></div>
      <div class="floating-shape shape-4"></div>
    </div>

    <div class="not-found-content">
      <!-- 404图标区域 -->
      <div class="error-illustration">
        <div class="error-code">
          <span class="digit">4</span>
          <div class="zero-container">
            <div class="zero-outer">
              <div class="zero-inner">
                <div class="sad-face">
                  <div class="eye left-eye"></div>
                  <div class="eye right-eye"></div>
                  <div class="mouth"></div>
                </div>
              </div>
            </div>
          </div>
          <span class="digit">4</span>
        </div>
      </div>

      <!-- 文字信息 -->
      <div class="error-info">
        <h1 class="error-title">页面未找到</h1>
        <p class="error-description">抱歉，您访问的页面不存在或已被移除</p>
      </div>

      <!-- 操作按钮 -->
      <div class="actions">
        <button class="action-btn primary-btn" @click="goHome">
          <svg class="btn-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M3 12L5 10M5 10L12 3L19 10M5 10V20C5 20.5523 5.44772 21 6 21H9M19 10L21 12M19 10V20C19 20.5523 18.5523 21 18 21H15M9 21C9.55228 21 10 20.5523 10 20V16C10 15.4477 10.4477 15 11 15H13C13.5523 15 14 15.4477 14 16V20C14 20.5523 14.4477 21 15 21M9 21H15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
          返回首页
        </button>
        <button class="action-btn secondary-btn" @click="goBack">
          <svg class="btn-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M19 12H5M12 19L5 12L12 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
          返回上页
        </button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'NotFound',
  methods: {
    goHome() {
      this.$router.push('/')
    },
    goBack() {
      this.$router.go(-1)
    }
  }
}
</script>

<style scoped>
/* 主容器 */
.not-found {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
  padding: 20px;
  position: relative;
  overflow: hidden;
}

/* 背景装饰动画 */
.background-decoration {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.floating-shape {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  animation: float 6s ease-in-out infinite;
}

.shape-1 {
  width: 80px;
  height: 80px;
  top: 20%;
  left: 10%;
  animation-delay: 0s;
}

.shape-2 {
  width: 120px;
  height: 120px;
  top: 60%;
  right: 10%;
  animation-delay: 2s;
}

.shape-3 {
  width: 60px;
  height: 60px;
  top: 30%;
  right: 25%;
  animation-delay: 4s;
}

.shape-4 {
  width: 100px;
  height: 100px;
  bottom: 20%;
  left: 20%;
  animation-delay: 1s;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
    opacity: 0.7;
  }
  50% {
    transform: translateY(-20px) rotate(180deg);
    opacity: 1;
  }
}

/* 内容容器 */
.not-found-content {
  text-align: center;
  color: white;
  max-width: 600px;
  position: relative;
  z-index: 2;
  animation: fadeInUp 1s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 404错误图标设计 */
.error-illustration {
  margin-bottom: 40px;
}

.error-code {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 120px;
  font-weight: 800;
  font-family: 'Arial', sans-serif;
  text-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  margin-bottom: 0;
}

.digit {
  color: #fff;
  animation: bounce 2s infinite;
}

.digit:first-child {
  animation-delay: 0.1s;
}

.digit:last-child {
  animation-delay: 0.3s;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

/* 0字符设计（圆形带表情） */
.zero-container {
  margin: 0 20px;
  animation: bounce 2s infinite;
  animation-delay: 0.2s;
}

.zero-outer {
  width: 120px;
  height: 120px;
  border: 8px solid #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  position: relative;
}

.zero-inner {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 表情设计 */
.sad-face {
  position: relative;
  width: 60px;
  height: 60px;
}

.eye {
  position: absolute;
  width: 8px;
  height: 8px;
  background: #fff;
  border-radius: 50%;
  animation: blink 3s infinite;
}

.left-eye {
  top: 18px;
  left: 15px;
}

.right-eye {
  top: 18px;
  right: 15px;
}

.mouth {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 10px;
  border: 2px solid #fff;
  border-top: none;
  border-radius: 0 0 20px 20px;
}

@keyframes blink {
  0%, 90%, 100% {
    transform: scaleY(1);
  }
  95% {
    transform: scaleY(0.1);
  }
}

/* 文字信息 */
.error-info {
  margin-bottom: 40px;
}

.error-title {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 16px;
  color: #fff;
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  letter-spacing: -0.5px;
}

.error-description {
  font-size: 18px;
  opacity: 0.9;
  margin-bottom: 0;
  line-height: 1.6;
  color: #f8f9fa;
}

/* 按钮设计 */
.actions {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border: none;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  min-width: 160px;
  justify-content: center;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.btn-icon {
  width: 20px;
  height: 20px;
}

.primary-btn {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.primary-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.secondary-btn {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.2);
}

.secondary-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .error-code {
    font-size: 80px;
  }

  .zero-outer {
    width: 80px;
    height: 80px;
  }

  .zero-inner {
    width: 60px;
    height: 60px;
  }

  .sad-face {
    width: 40px;
    height: 40px;
  }

  .eye {
    width: 6px;
    height: 6px;
  }

  .left-eye {
    top: 12px;
    left: 10px;
  }

  .right-eye {
    top: 12px;
    right: 10px;
  }

  .mouth {
    bottom: 10px;
    width: 15px;
    height: 8px;
  }

  .error-title {
    font-size: 28px;
  }

  .error-description {
    font-size: 16px;
  }

  .actions {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .action-btn {
    width: 200px;
    padding: 12px 24px;
    font-size: 15px;
  }

  .floating-shape {
    display: none;
  }
}

@media (max-width: 480px) {
  .not-found {
    padding: 16px;
  }

  .error-code {
    font-size: 60px;
    margin-bottom: 20px;
  }

  .zero-outer {
    width: 60px;
    height: 60px;
    border-width: 4px;
  }

  .zero-inner {
    width: 40px;
    height: 40px;
  }

  .sad-face {
    width: 30px;
    height: 30px;
  }

  .eye {
    width: 4px;
    height: 4px;
  }

  .left-eye {
    top: 8px;
    left: 7px;
  }

  .right-eye {
    top: 8px;
    right: 7px;
  }

  .mouth {
    bottom: 6px;
    width: 12px;
    height: 6px;
  }

  .error-title {
    font-size: 24px;
  }

  .error-description {
    font-size: 14px;
  }

  .error-info {
    margin-bottom: 30px;
  }
}
</style> 