# 爱情表白网页 **Repository Path**: waynelee/love-confession-website ## Basic Information - **Project Name**: 爱情表白网页 - **Description**: 感谢所有为爱情付出的人们，愿每一份真挚的感情都能得到美好的回应。 让爱情在代码中绽放，让浪漫在数字中流淌 💕 这是一个充满爱意的项目，献给所有相信爱情的人们 - **Primary Language**: NodeJS - **License**: MPL-2.0 - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 1 - **Created**: 2025-12-05 - **Last Updated**: 2026-01-07 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 💕 爱情网站 - 浪漫求婚表白网站 💕 一个充满爱意的浪漫网站，专为求婚、表白和纪念爱情而设计。包含精美的信封开屏动画、多页面爱情故事展示、求婚页面和温馨的回忆页面。 ## ✨ 功能特性 ### 🎭 信封开屏动画 - **3D信封动画**：真实的信封翻盖、侧边、底部折叠展开效果 - **动态背景**：飘浮粒子、爱心、蝴蝶、闪光效果 - **音效系统**：信封打开音效、背景音乐 - **土味情话**：油腻到掉牙的浪漫文案切换 - **邮票装饰**：左上角寄件人、右下角地址、左下角邮票 ### 🌟 页面功能 - **首页**：温馨的爱情故事展示 - **记忆页**：珍贵的回忆时光 - **生日页**：特别的生日祝福 - **求婚页**：浪漫的求婚仪式 - 3D戒指展示 - 打字机效果求婚文案 - 未来规划展示 - 烟花庆祝效果 - "我愿意"按钮动画 - **爱情页**：甜蜜的爱情宣言 ### 🎨 视觉效果 - **响应式设计**：支持手机、平板、电脑 - **动画效果**：GSAP动画、CSS3过渡 - **粒子系统**：每个页面独特的粒子背景 - **字体特效**：自定义浪漫字体 ## 🛠️ 技术栈 - **前端框架**：Vue.js 3 (Composition API) - **构建工具**：Vite - **动画库**：GSAP - **粒子效果**：Particles.js - **字体**：自定义浪漫字体 - **样式**：CSS3 + SCSS - **音效**：Web Audio API ## 📦 项目结构 ``` LOVE001/ ├── public/ # 静态资源 │ ├── heart.svg # 爱心图标 │ ├── LOVE.ttf # 浪漫字体 │ ├── music/ # 背景音乐 │ │ └── romantic-background.mp3 │ └── sounds/ # 音效文件 │ ├── click.mp3 │ ├── heartbeat.mp3 │ ├── paper-open.mp3 │ ├── success.mp3 │ └── README.md ├── src/ │ ├── components/ # Vue组件 │ │ ├── EnvelopeAnimation.vue # 信封动画组件 │ │ ├── AudioControl.vue # 音效控制 │ │ └── ResetButton.vue # 重置按钮 │ ├── views/ # 页面组件 │ │ ├── Home.vue # 首页 │ │ ├── Memory.vue # 记忆页 │ │ ├── Birthday.vue # 生日页 │ │ ├── Proposal.vue # 求婚页 │ │ └── Love.vue # 爱情页 │ ├── config/ # 配置文件 │ │ └── love-config.js # 爱情配置 │ ├── utils/ # 工具函数 │ │ ├── audioManager.js # 音效管理 │ │ └── particles.js # 粒子系统 │ ├── router/ # 路由配置 │ │ └── index.js │ ├── App.vue # 主应用 │ ├── main.js # 入口文件 │ └── style.css # 全局样式 ├── package.json # 项目配置 ├── vite.config.js # Vite配置 └── README.md # 项目说明 ``` ## 🚀 快速开始 ### 环境要求 - Node.js >= 16.0.0 - npm >= 8.0.0 ### 安装依赖 ```bash npm install ``` ### 开发运行 ```bash npm run dev ``` 访问 http://localhost:5173 ### 构建生产版本 ```bash npm run build ``` ### 预览生产版本 ```bash npm run preview ``` ## ⚙️ 配置说明 ### 自定义爱情配置 在 `src/config/love-config.js` 中修改： ```javascript export const loveConfig = { boy: { name: '张三' // 男方姓名 }, girl: { name: '李四' // 女方姓名 }, // 未来规划 futurePlans: [ { icon: '🏠', title: '温馨的家', description: '我们一起布置属于我们的小窝' } // ... 更多规划 ] } ``` ### 自定义音效 将音效文件放入 `public/sounds/` 目录： - `click.mp3` - 点击音效 - `heartbeat.mp3` - 心跳音效 - `paper-open.mp3` - 信封打开音效 - `success.mp3` - 成功音效 ### 自定义背景音乐 将背景音乐放入 `public/music/` 目录： - `romantic-background.mp3` - 浪漫背景音乐 ## 🎯 使用场景 - 💍 **求婚现场**：在浪漫的求婚仪式上展示 - 💝 **情人节表白**：向心爱的人表达爱意 - 🎂 **生日惊喜**：特别的生日礼物 - 📅 **纪念日**：重要的爱情纪念日 - 💌 **情书传递**：现代版的浪漫情书 ## 🌈 特色亮点 1. **真实信封体验**：3D折叠动画，真实还原信封开合 2. **沉浸式音效**：环绕音效增强情感体验 3. **个性化定制**：轻松配置个人信息和内容 4. **响应式适配**：完美适配各种设备 5. **浪漫动效**：丰富的动画和粒子效果 6. **土味情话**：油腻到可爱的浪漫文案 ## 🔧 开发说明 ### 添加新页面 1. 在 `src/views/` 创建新页面组件 2. 在 `src/router/index.js` 添加路由 3. 在 `src/utils/particles.js` 配置粒子效果 ### 自定义动画 - 信封动画：修改 `src/components/EnvelopeAnimation.vue` - 粒子效果：修改 `src/utils/particles.js` - GSAP动画：在各页面组件中使用 ### 样式定制 - 全局样式：修改 `src/style.css` - 组件样式：在各组件中使用 `