SayYesTo.Me 💕

一个温馨浪漫的约会邀请网页应用，帮助您用可爱的方式邀请心仪的人一起出去玩！

✨ 特色功能

• 🎯 温馨邀请界面 - 可爱的邀请页面，搭配动态GIF表情
• 📅 时间选择 - 选择周末的日期和时间段
• 🍽️ 美食选择 - 3x3网格布局的美食选择界面
• 💫 流畅交互 - 平滑的页面切换和按钮动画效果
• 🎨 精美设计 - 渐变背景和现代化的UI设计

🚀 快速开始

环境要求

• Node.js 18+
• npm 或 yarn

安装依赖

npm install

启动开发服务器

npm run dev

访问 http://localhost:5173 查看应用

构建生产版本

npm run build

📁 项目结构

src/
├── components/
│   ├── InvitePage.vue     # 邀请页面
│   ├── RejectPage.vue     # 拒绝页面
│   ├── AcceptPage.vue     # 接受页面（时间选择）
│   └── FoodSelectionPage.vue # 食物选择页面
├── assets/
│   ├── main.css          # 主样式文件
│   ├── please.gif        # 邀请GIF
│   └── sad.gif          # 伤心GIF
├── App.vue              # 主应用组件
└── main.ts             # 应用入口

🎮 使用流程

1. 邀请页面 - 显示温馨的邀请信息和两个选择按钮
2. 接受邀请 - 进入时间选择页面，选择约会时间
3. 食物选择 - 进入3x3网格的美食选择界面
4. 完成邀请 - 所有选择完成后显示确认信息

🛠️ 技术栈

• Vue 3 - 渐进式JavaScript框架
• TypeScript - 类型安全的JavaScript超集
• Tailwind CSS - 实用优先的CSS框架
• Vite - 快速的前端构建工具
• Naive UI - Vue 3组件库

🎨 设计特色

• 色彩方案: 使用柔和的蓝色和粉色渐变背景
• 按钮样式: 圆角按钮带有悬停动画效果
• 交互反馈: 按钮点击时的微动效和颜色变化
• 响应式设计: 适配各种屏幕尺寸

📦 依赖说明

主要依赖

• vue - Vue.js框架
• naive-ui - UI组件库
• tailwindcss - CSS框架

开发依赖

• typescript - TypeScript支持
• vite - 构建工具
• vue-tsc - Vue TypeScript编译器

🔧 自定义配置

修改主题颜色

在相应的Vue组件中修改CSS变量：

bg-[#4A6FA5] /* 主要按钮颜色 */
bg-[#3A5A8A] /* 按钮悬停颜色 */

添加新的食物选项

在 FoodSelectionPage.vue 中修改 foodOptions 数组：

const foodOptions = [
  { id: 1, name: '火锅', image: '' },
  // 添加更多食物选项...
]

🤝 贡献指南

1. Fork 本项目
2. 创建特性分支 (git checkout -b feature/AmazingFeature)
3. 提交更改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 打开Pull Request

📄 许可证

本项目采用 MIT 许可证 - 查看 LICENSE 文件了解详情

🙏 致谢

• 灵感来源于 canyougooutwith.me
• 感谢所有贡献者和使用者

---

💖 用心制作，为爱而生 - 希望这个小小应用能帮助您成功邀请到心仪的人！