first commit

2026-08-31 17:34:49 +08:00
commit cc65fea299
13 changed files with 2881 additions and 0 deletions
--- a/src/views/index/index.vue
+++ b/src/views/index/index.vue
@@ -0,0 +1,161 @@
+<script setup>
+import { onMounted, onBeforeUnmount, ref } from 'vue'
+
+const canvasRef = ref(null)
+canvasRef.value = undefined;
+let animationId = null
+
+onMounted(() => {
+  const canvas = canvasRef.value
+  if (!canvas) return
+  const ctx = canvas.getContext('2d')
+
+  const resize = () => {
+    canvas.width = window.innerWidth
+    canvas.height = window.innerHeight
+  }
+  resize()
+  window.addEventListener('resize', resize)
+
+  // 圆点粒子数组
+  const particles = []
+  const PARTICLE_COUNT = 60
+
+  // 创建单个粒子
+  const createParticle = (randomY = true) => {
+    return {
+      x: Math.random() * canvas.width,
+      y: randomY ? Math.random() * canvas.height : canvas.height + 20,
+      radius: Math.random() * 8 + 2,
+      speedY: Math.random() * 1.2 + 0.3,
+      speedX: (Math.random() - 0.5) * 0.5,
+      opacity: Math.random() * 0.5 + 0.15,
+      // 用于呼吸/交融效果的相位
+      phase: Math.random() * Math.PI * 2,
+      phaseSpeed: Math.random() * 0.02 + 0.005,
+    }
+  }
+
+  // 初始化粒子
+  for (let i = 0; i < PARTICLE_COUNT; i++) {
+    particles.push(createParticle(true))
+  }
+
+  const animate = () => {
+    ctx.clearRect(0, 0, canvas.width, canvas.height)
+
+    for (let i = particles.length - 1; i >= 0; i--) {
+      const p = particles[i]
+
+      // 更新位置
+      p.y -= p.speedY
+      p.x += p.speedX
+      p.phase += p.phaseSpeed
+
+      // 呼吸效果：透明度和大小微微波动
+      const breathe = Math.sin(p.phase) * 0.3 + 1
+      const currentRadius = p.radius * breathe
+      const currentOpacity = p.opacity * (0.7 + Math.sin(p.phase) * 0.3)
+
+      // 绘制带径向渐变的圆点（交融效果）
+      const gradient = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, currentRadius * 2.5)
+      gradient.addColorStop(0, `rgba(220, 38, 38, ${currentOpacity})`)
+      gradient.addColorStop(0.4, `rgba(239, 68, 68, ${currentOpacity * 0.6})`)
+      gradient.addColorStop(1, `rgba(248, 113, 113, 0)`)
+
+      ctx.beginPath()
+      ctx.arc(p.x, p.y, currentRadius * 2.5, 0, Math.PI * 2)
+      ctx.fillStyle = gradient
+      ctx.fill()
+
+      // 核心实心圆点
+      ctx.beginPath()
+      ctx.arc(p.x, p.y, currentRadius, 0, Math.PI * 2)
+      ctx.fillStyle = `rgba(220, 38, 38, ${currentOpacity * 0.9})`
+      ctx.fill()
+
+      // 超出屏幕顶部后重置到底部
+      if (p.y + p.radius * 3 < 0) {
+        particles[i] = createParticle(false)
+      }
+    }
+
+    animationId = requestAnimationFrame(animate)
+  }
+
+  animate()
+})
+
+onBeforeUnmount(() => {
+  if (animationId) cancelAnimationFrame(animationId)
+  window.removeEventListener('resize', () => {})
+})
+</script>
+
+<template>
+  <div class="main_div">
+    <!-- 背景粒子动画层 -->
+    <canvas ref="canvasRef" class="particle-canvas"></canvas>
+
+    <div class="title_div">
+
+      <h1 class="red head_text">Error Page</h1>
+      <h1 class="red head_text">错误页面</h1>
+
+      <div class="message_div">
+        <div class="text_black">
+          <p>Sorry, the page you visited does not exist or is abnormal.</p>
+          <p>抱歉，您访问的页面不存在或异常。</p>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.main_div {
+  display: flex;
+  width: 100%;
+  height: 98vh;
+  position: relative;
+  overflow: hidden;
+}
+
+.particle-canvas {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 0;
+  pointer-events: none;
+}
+
+.message_div {
+  display: flex;
+  margin-top: 100px;
+}
+.red {
+  color: red;
+}
+.text_black {
+  color: black;
+  text-align: center;
+  font-size: 20px;
+  letter-spacing: 1px;
+  line-height: 30px;
+}
+.head_text {
+  text-align: center;
+  font-size: 3em;
+  letter-spacing: 1px;
+  line-height: 40px;
+}
+.title_div {
+  display: initial;
+  margin: 50px auto;
+  position: relative;
+  z-index: 1;
+}
+</style>