业务和功能介绍
本项目是为经典恋爱冒险游戏《甜蜜女友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算法稳定性，通过动态切片处理。
示例图片视频
相似推荐
爬虫脚本-爬虫
自动获取建筑社多页面数据，并进行多次的核心数据获取，同时将数据存放入表格中方便后续数据分析，可自行选择删改数据，并且可跟随网站的数据页面变更获取更多页面的数据可根据自身意愿清除添加数据。
分布式任务调度中心后台管理系统-可视化调度运维平台
立项背景与目标
企业多业务存在大量定时数据同步、批量计算、日志清理等定时任务，传统单机定时脚本存在分散难管控、执行失败无告警、运行数据无法追溯、执行状态不透明等问题。本项目搭建统一分布式任务调度平台，实现全量任务集中管控、执行过程可视化监控、异常自动告警，保障批量任务稳定可靠执行。
核心功能模块
任务基础管理：统一录入、启停、编辑定时任务，当前在线运行任务共 8 个，支持自定义执行周期、重试策略；
分布式执行器管控：对接 1 台在线执行器机器，实现任务远程分发、资源隔离、负载均衡；
调度数据可视化报表：基于 ECharts 实现日期分布折线图、任务成功率饼图，统计周期内累计调度 115429 次，直观区分成功 / 失败 / 进行中三类任务状态；
异常运维模块：任务执行失败实时推送告警，留存全量调度日志，支持按日期筛选历史记录、定位故障任务。
业务流程
运维人员在后台创建定时任务并配置调度规则，调度中心按时间规则自动向执行器下发任务；任务执行后自动采集运行结果，写入数据库统计数据；前端实时渲染可视化报表，出现失败任务时触发消息告警，运维可查看报表与日志排查问题。
露营地前后端-趣汇友
本项目面向房车露营、自驾游及车友社群用户，建设集营地查询、路线规划、活动资讯、内容浏览、即时交流和会员服务于一体的综合平台。项目目标是解决营地信息分散、路线决策困难、用户互动不足等问题，提升用户从“找营地、看路线”到“交流分享、服务转化”的整体体验。核心功能包括地图找营地、营地详情、线路推荐、车友圈动态、打卡互动、群聊私聊、个人中心和订单会员等，整体形成“首页进入-搜索发现-详情查看-互动交流-收藏下单”的完整业务流程闭环。
北京地铁展厅程序
## 立项背景和目标
京投展厅需要一套可快速配置内容、支持多种互动形式、具备实时通信能力的数字化管理平台。目标是实现展厅内容"零代码"更新、观众互动数据实时采集与展示、多终端协同控制，提升展厅运营效率和观众体验。
### 核心功能模块
| 模块 | 功能说明 |
|------|---------|
| 单页内容管理（Pages） | 通过配置表单动态渲染编辑页面，支持文本、图片、视频、音频、富文本编辑器等多种字段类型，实现展厅各展项内容的灵活配置 |
| 媒体资源管理（Media） | 管理展厅图片、视频等媒体资源，支持投票功能及排行榜展示 |
| 人员管理（Person） | 管理展厅相关人物信息展示 |
| 文章管理（Article） | 展厅资讯、新闻等内容管理 |
| 投票系统（Vote） | 支持观众对展项进行投票，实时排行榜展示 |
| 摇一摇互动（Shake） | 基于WebSocket的实时摇一摇互动，统计观众摇动次数 |
| AI助手（Assistant） | 集成讯飞AI，支持智能问答和语音听写 |
| 人脸融合（FaceMerge） | 集成百度AI人脸融合能力 |
| 内容审核（Censor） | 集成百度AI文本/图片内容审核 |
| 系统权限管理 | 基于RBAC的权限体系，支持节点+分类（cid）双维度权限控制 |
| 操作日志 | 全量记录后台操作行为，支持审计追溯 |
| 数据导入导出 | 基于PhpSpreadsheet的Excel批量导入导出 |
大音平台任务库
主要负责省侧大音平台任务库的维护与开发，根据需求对任务库各种类型的工单信息进行对应的增删改查，完成后进行开发自测，撰写开发自测报考，自测无误后与集团进行联调，最后与测试人员共同进行上线，提交代码以及脚本。
2.自定义接口文件根据集团领导要求建设差评修复闭环管理，将总部同步用后即评差评用户进行自行修复，修复完成后将修复数据通过文件接口同步至大音平台。
3.给大音平台上报采集订购办理时长、产品寄送时长、勘察设计时长、安装时长等指标，调用网络部接口获取数据，并进行封装，逻辑处理后以文件的形式每月10号之前上报到大音平台。
帮助文档
Copyright @ 2021-2024 程聚宝 | 浙ICP备2021014372号
人工客服