业务和功能介绍
本项目是为经典恋爱冒险游戏《甜蜜女友3》制作的粉丝应援网站，旨在通过精美的视觉设计和流畅的交互体验，展示游戏世界观、五位女主角信息、官方宣传视频及游戏CG画廊。
核心功能模块包括：
1. 全屏沉浸式首屏主视觉，带视差缩放动画。
2. Canvas樱花粒子系统，80瓣花瓣实时飘落，随窗口自适应。
3. 五位女主角卡片展示区，支持3D透视倾斜交互。
4. 视觉画廊，随机选取18张游戏原画，支持灯箱大图预览。
5. 宣传视频嵌入，支持自动播放与暂停。
6. 完整的响应式布局，适配桌面、平板、手机。
核心功能模块包括：
1. 全屏沉浸式首屏主视觉，带视差缩放动画。
2. Canvas樱花粒子系统，80瓣花瓣实时飘落，随窗口自适应。
3. 五位女主角卡片展示区，支持3D透视倾斜交互。
4. 视觉画廊，随机选取18张游戏原画，支持灯箱大图预览。
5. 宣传视频嵌入，支持自动播放与暂停。
6. 完整的响应式布局，适配桌面、平板、手机。
项目实现
本项目采用纯原生前端技术栈开发，零依赖，结构清晰，便于后续维护和扩展。
我的主要工作包括：
1. 整体架构设计与视觉还原：通过CSS自定义属性构建统一的设计系统（配色、间距、圆角、阴影），确保全局风格一致。
2. Canvas动画实现：手写花瓣粒子类，包含位置更新、边界循环、高光绘制等逻辑，80瓣粒子流畅运行。
3. 交互体验优化：使用Intersection Observer API实现滚动揭示动画；实现女主角卡片的3D透视跟随鼠标效果；使用Fisher-Yates洗牌算法实现画廊图片随机展示。
4. 灯箱组件开发：手写灯箱大图预览组件，支持点击放大、ESC键关闭。
5. 响应式适配：通过CSS媒体查询完成3个断点（桌面/平板/手机）的适配。
遇到的难点：浅色主题下花瓣可见度不足，通过加深颜色数组透明度范围解决；画廊图片列表较短时Fisher-Yates算法稳定性，通过动态切片处理。
我的主要工作包括：
1. 整体架构设计与视觉还原：通过CSS自定义属性构建统一的设计系统（配色、间距、圆角、阴影），确保全局风格一致。
2. Canvas动画实现：手写花瓣粒子类，包含位置更新、边界循环、高光绘制等逻辑，80瓣粒子流畅运行。
3. 交互体验优化：使用Intersection Observer API实现滚动揭示动画；实现女主角卡片的3D透视跟随鼠标效果；使用Fisher-Yates洗牌算法实现画廊图片随机展示。
4. 灯箱组件开发：手写灯箱大图预览组件，支持点击放大、ESC键关闭。
5. 响应式适配：通过CSS媒体查询完成3个断点（桌面/平板/手机）的适配。
遇到的难点：浅色主题下花瓣可见度不足，通过加深颜色数组透明度范围解决；画廊图片列表较短时Fisher-Yates算法稳定性，通过动态切片处理。
示例图片视频
相似推荐
欧冠小程序
欧冠小程序是面向全球欧冠球迷的一站式足球服务平台，聚焦欧冠联赛全周期服务，整合赛事资讯、实时数据、互动社区、周边商城、会员权益于一体，依托微信生态即用即走，满足球迷“看赛、聊球、玩竞猜、买周边、享专属福利”的核心需求，打造轻量化、高体验的官方球迷服务入口。
管理系统-人员技能通关培训管理平台
项目介绍：人员技能通关培训管理平台，主要用于管理人员统一查看各工种学员的课程学习、技能考核及通关进度。平台按初级工、中级工、高级工、技师多等级进行分类管理；首页集成多类数据可视化图表，包含常规统计图与三维图表，直观展示培训数据、通关率及人员整体学习情况，方便管理员高效统筹管控。
技术栈
基于 Vue3 + Element Plus 搭建整体项目架构；集成 ECharts、Highcharts 实现多元化数据可视化及三维图表展示；搭配 Vue Router、Vuex 完成路由管控与全局状态管理。
水库数字孪生项目-石门黄坡数字孪生可视化大屏
项目介绍：石门黄坡为二个项目，功能一样，只是接口数据和UE三维场景不同。在虚拟的场景通过和
现实同样的经纬度坐标在场景中放置渗压计，水位计，雨量计所有设备通过真实设备接口获取真实数
据来直观显示数据，项目中有开闸放水，防洪四预，溃坝模块前端通过调用UE方法，场景会执行相应
的动画效果，通过虚拟的场景来模拟现实真实的情况。首页有各种场景切换，泄洪闸，水电站，泄洪
道等，项目中还通过three.js来展示各类设备的模型，以及各类模型的各个部件展示。还有在场景漫游
动画和实时天气的模拟，有下雨下雪阴天晴天的动画模拟。
技 术 栈：vue2框架，前端和UE场景通信，sse设备实时数据的推送，three.js展示fbx格式模型，以
及模型切换，管理员账号登陆时优先获取三维场景。
toc平台电商网站-景区购票
一、立项背景和目标
1.立项背景
市场需求：旅游业数字化转型加速，用户对线上旅游产品预订的需求日益增长。
用户体验：传统旅游平台交互复杂，需构建更现代化、响应式的前端应用。
管理效率：需完善的后台管理系统（前端+后端），支撑商品、订单、用户等业务的高效运营。
2.核心目标
前端：构建高性能、现代化前端应用，保障代码质量与可维护性。
后端：构建景区门票/旅游产品后台管理系统，实现产品数字化管理。
二、软件功能、核心功能模块介绍
软件功能：构建完整的在线旅游服务平台，为用户提供景区/旅游产品一站式服务，同时支撑运营人员高效管理业务。
2. 核心功能模块
用户管理：支持登录（验证码+JWT）、注册（MD5密码加密）、信息维护、4级权限控制（普通用户→演示账号→管理员→超级管理员）、敏感数据脱敏。
景区/产品管理：实现产品CRUD、分类与标签管理、访问量/收藏量等统计、封面图片本地存储。
订单管理：自动生成订单、订单状态管控（待支付→已支付/已取消）、订单查询与取消、库存自动扣减与回补。
支付模块：集成支付宝沙盒环境，支持二维码支付、SSE实时推送支付状态、异步回调处理、支付成功积分奖励。
社交互动：支持评论、点赞、收藏、心愿单功能。
运营支撑：广告/公告管理、用户地址管理、图形验证码生成。
数据看板：系统信息监控、业务数据统计、热门景区排名、流量趋势分析
三、业务流程、功能路径描述
1. 核心业务流程
用户访问平台→（未登录可浏览，登录可进入个人中心）→搜索/筛选景区/产品→查看详情→可选择收藏、加入心愿单或立即预订→订单确认（选择/新增地址）→提交订单→前往支付→支付成功（订单状态更新、库存扣减、积分奖励）/支付失败/取消（订单状态更新、库存回补）→支付成功后可查看订单、发表评价；管理员登录后台→进行产品、订单、用户、运营相关管理及数据查看。
2. 功能路径
首页（/portal）→搜索页（/search）→详情页（/detail?id=xxx）→订单确认页（/confirm）→支付页（/pay）；登录（/login）后可进入用户中心（/user），访问订单、评论、地址等子模块。
（2）管理后台路径
管理员登录（/admin/login）→总览仪表盘（/admin/overview）→可进入订单管理（/admin/order）、商品管理（/admin/thing）、用户管理（/admin/user）、评论管理（/admin/comment）等各类运营管理模块，以及日志监控、系统信息等辅助模块。
软赢AI-软著申请材料生产
是一款利用AI技术，为软著代理机构降本增效的辅助工具。其核心业务是通过自动生成高质量的申请材料，帮助代理机构在激烈的市场竞争中降低成本、提高利润空间
四大核心功能
1.一键生成所有材料：这是软赢AI的基础功能。用户只需输入软件名称和简介，系统就能在30分钟内自动生成一套完整的申请材料，包括60页源代码、操作手册和申请表，且所有材料均以Word格式提供下载。
2.个性化定制，避免模板化：系统会根据项目名称和简介定制代码与界面，实现“一案一材料”，有效降低了查重风险，每套材料包含 20+页文档和15+张高质量配图，内容真实可信。
3.高质量代码文档：生成的60页源代码包含超过3000行代码，注释详尽、格式规范，项目配置真实可运行，让审核人员更容易通过。
4.售后保障与持续优化：软赢AI提供双重兜底服务。如果因材料问题导致申请被补正（官方要求补充修改材料），用户可以免费获得补正材料，或者将额度退还到账户用于下次生成。
帮助文档
Copyright @ 2021-2024 程聚宝 | 浙ICP备2021014372号
人工客服