update

2026-05-06 14:51:24 +08:00
parent 132b2fc310
commit b248d526d2
9 changed files with 2450 additions and 37 deletions
@@ -0,0 +1,126 @@
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue'
+
+const wrapper = ref(null)
+const mouseX = ref(0)
+const mouseY = ref(0)
+
+const handleMouseMove = (e) => {
+  if (!wrapper.value) return
+  const rect = wrapper.value.getBoundingClientRect()
+  const x = e.clientX - rect.left - rect.width / 2
+  const y = e.clientY - rect.top - rect.height / 2
+  mouseX.value = x * 0.1
+  mouseY.value = y * 0.1
+}
+
+onMounted(() => {
+  window.addEventListener('mousemove', handleMouseMove)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('mousemove', handleMouseMove)
+})
+
+const icons = [
+  { char: '💬', top: '10%', left: '20%', size: '3rem', delay: '0s', z: 2 },
+  { char: '👍', top: '70%', left: '10%', size: '2.5rem', delay: '-2s', z: 3 },
+  { char: '📰', top: '15%', left: '75%', size: '2.8rem', delay: '-1s', z: 1 },
+  { char: '💡', top: '65%', left: '80%', size: '3.5rem', delay: '-3s', z: 4 },
+  { char: '📝', top: '40%', left: '85%', size: '2.2rem', delay: '-1.5s', z: 2 },
+  { char: '🧩', top: '80%', left: '50%', size: '2.6rem', delay: '-0.5s', z: 1 },
+  { char: '💎', top: '30%', left: '10%', size: '2.4rem', delay: '-2.5s', z: 3 },
+  { char: '🔥', top: '40%', left: '45%', size: '4.5rem', delay: '-0.8s', z: 5 }, // 中心醒目
+]
+</script>
+
+<template>
+  <div class="hero-anim-wrapper" ref="wrapper" :style="{ transform: `translate(${mouseX}px, ${mouseY}px)` }">
+    <div class="glow-bg"></div>
+    <div v-for="(icon, idx) in icons" :key="idx" class="floating-icon" :style="{
+      top: icon.top,
+      left: icon.left,
+      fontSize: icon.size,
+      animationDelay: icon.delay,
+      zIndex: icon.z
+    }">
+      <div class="icon-inner">
+        {{ icon.char }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.hero-anim-wrapper {
+  position: relative;
+  width: 100%;
+  height: 320px;
+  max-width: 400px;
+  margin: 0 auto;
+  transition: transform 0.1s ease-out;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  perspective: 1000px;
+}
+
+.glow-bg {
+  position: absolute;
+  width: 200px;
+  height: 200px;
+  background: radial-gradient(circle, rgba(34, 150, 242, 0.4) 0%, rgba(34, 150, 242, 0) 70%);
+  border-radius: 50%;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  animation: pulse 4s infinite alternate;
+  z-index: 0;
+}
+
+.floating-icon {
+  position: absolute;
+  will-change: transform;
+  animation: float 6s ease-in-out infinite;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  filter: drop-shadow(0 8px 16px rgba(34,150,242,0.3));
+}
+
+.icon-inner {
+  background: rgba(255, 255, 255, 0.8);
+  border-radius: 20px;
+  padding: 10px;
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.5);
+  backdrop-filter: blur(8px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.3s;
+  cursor: pointer;
+}
+
+.dark .icon-inner {
+  background: rgba(30, 30, 30, 0.7);
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.icon-inner:hover {
+  transform: scale(1.2) rotate(10deg);
+}
+
+@keyframes float {
+  0% { transform: translateY(0px) rotate(0deg); }
+  33% { transform: translateY(-15px) rotate(5deg); }
+  66% { transform: translateY(10px) rotate(-5deg); }
+  100% { transform: translateY(0px) rotate(0deg); }
+}
+
+@keyframes pulse {
+  0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.5; }
+  100% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
+}
+</style>
@@ -1,4 +1,13 @@
 import DefaultTheme from 'vitepress/theme'
 import './styles.css'
+import HeroAnim from './components/HeroAnim.vue'
+import { h } from 'vue'

-export default DefaultTheme
+export default {
+  ...DefaultTheme,
+  Layout() {
+    return h(DefaultTheme.Layout, null, {
+      'home-hero-image': () => h(HeroAnim)
+    })
+  }
+}
@@ -1,18 +1,57 @@
 :root {
-  --vp-c-brand-1: #424242;
-  --vp-c-brand-2: #5f5f5f;
-  --vp-c-brand-3: #232321;
+  --vp-c-brand-1: #2296F2;
+  --vp-c-brand-2: #4ba8f5;
+  --vp-c-brand-3: #1a7ecf;
+  --vp-nav-bg-color: rgba(255, 255, 255, 0.7);
  --vp-home-hero-name-color: transparent;
-  --vp-home-hero-name-background: linear-gradient(120deg, #232321 30%, #6b7280);
-  --vp-home-hero-image-background-image: linear-gradient(-45deg, #424242 50%, #d1d5db 50%);
-  --vp-home-hero-image-filter: blur(56px);
+  --vp-home-hero-name-background: linear-gradient(135deg, #2296F2 0%, #4ba8f5 50%, #87cdff 100%);
+  --vp-home-hero-image-background-image: linear-gradient(-45deg, #e5e7eb 0%, #9ca3af 50%, #f3f4f6 100%);
+  --vp-home-hero-image-filter: blur(52px);
 }

+.dark {
+  --vp-nav-bg-color: rgba(27, 27, 31, 0.7);
+}
+
+/* 导航栏毛玻璃效果 */
+.VPNav {
+  backdrop-filter: blur(8px);
+}
+
+/* Hero 图片 */
 .VPHomeHero .image-src {
-  max-width: 600px;
-  border-radius: 1rem;
+  max-width: 320px;
+  border-radius: 1.2rem;
 }

+/* Feature 卡片 */
 .VPFeature {
-  border-color: rgba(66, 66, 66, 0.12);
+  border-color: rgba(34, 150, 242, 0.15);
+  transition: box-shadow 0.25s, border-color 0.25s;
+}
+
+.VPFeature:hover {
+  box-shadow: 0 4px 20px rgba(34, 150, 242, 0.12);
+  border-color: rgba(34, 150, 242, 0.35);
+}
+
+/* 首页预览截图 */
+.vp-doc img {
+  display: block;
+  margin: 1.5rem auto;
+  max-width: 100%;
+  border-radius: 12px;
+  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
+  border: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+/* 暗色模式 */
+.dark .VPFeature:hover {
+  box-shadow: 0 4px 20px rgba(255, 255, 255, 0.06);
+  border-color: rgba(255, 255, 255, 0.18);
+}
+
+.dark .VPHome .vp-doc img {
+  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.45);
+  border-color: rgba(255, 255, 255, 0.08);
 }