欢迎访问!!!!!
我来先查看您上传的参考图片和网站风格,然后为您实现这个有质感的金融教育网页。
我已经了解了参考风格——深色背景、科技感渐变、简洁卡片设计。现在让我读取技能文件,然后为您打造一个有质感的金融教育网页。
现在我来创建设计PRD,融合科技感深色风格与春节金融教育主题:
设计文档已完成。现在初始化项目并开始开发:
项目初始化成功。现在安装动画库并开始开发:
现在创建全局样式和主应用结构:
现在创建各个页面区块组件:
需要修复一些TypeScript错误:
构建成功!现在部署网站:
网站已部署成功!让我访问查看效果:
让我测试支付功能:
网站已成功部署!![]()
完成总结
我已经为您打造了一个有质感的春节数字金库金融教育网页,融合了您要求的科技感深色风格与春节主题。
在线访问
核心功能
模块 功能描述
3D金库展示 鼠标视差效果、金额数字跳动动画、金色脉冲光晕
模拟支付流程 支付弹窗、加载动画、支付方式选择
红包奖励系统 红包弹出动画、粒子爆炸效果、收益展示
金融知识教育 资金池原理、时间价值、风险收益三个概念卡片
体验记录 累计存入/收益统计、历史列表(localStorage存储)
合规提示 底部固定免责声明、可展开详细说明、单日3次限制
设计亮点
- 深色科技风格:参考iflow.cn的深蓝黑背景 + 金色/红色渐变强调
- 玻璃态卡片:半透明背景 + 模糊效果 + 金色边框
- 流畅动画:Framer Motion实现页面入场、悬停、弹窗动画
- 粒子背景:Canvas绘制的金色光点连线效果
- 响应式设计:完美适配手机和桌面端
技术栈
- React + TypeScript + Vite
- Tailwind CSS + shadcn/ui
- Framer Motion 动画库
您可以点击"存入0.1元 开启体验"按钮测试完整的支付流程!




