业务和功能介绍
1. 立项背景：为科技公司打造酷炫、现代化的品牌形象首页，突出科技感与创新性。2. 核心功能模块：动态粒子背景增强沉浸感；全屏Hero区域展示企业口号；服务卡片展示核心业务；关于与统计数据展示实力；团队成员展示；联系CTA和页脚。3. 业务流程/功能路径：用户滚动页面触发滚动视差和入场动画，点击导航平滑定位至各模块，移动端适配菜单，通过交互提升品牌信任度。
项目实现
1. 整体架构和设计思路，不同模块使用的技术栈
整体采用“单页滚动 + 视觉沉浸”架构：HTML5 搭建语义化骨架，CSS3 负责毛玻璃、渐变文字、Flex/Grid 响应式布局，JavaScript 驱动交互与 Canvas 粒子背景。设计思路以“科技蓝紫渐变 + 动态粒子网络”为视觉基调，利用 backdrop-filter 营造层次感，通过 ScrollReveal 库实现滚动渐现动画，增强浏览节奏。技术栈区分：全局粒子系统（原生 Canvas）、导航滚动高亮（JS + getBoundingClientRect）、服务/团队卡片（CSS 悬停过渡）、移动端菜单（JS 切换 class）。
2. “我”的负责模块和结果（尽可能量化）
我独立完成了全部模块的开发与调试。
- 粒子背景系统：实现 140 个动态粒子，鼠标跟随影响半径 150px，粒子连线距离阈值 130px，帧率稳定 60fps。
- 响应式导航栏：支持 PC/平板/手机，移动端菜单点击展开/收起，滚动超过 50px 时改变样式。
- 内容动画集成：配置 ScrollReveal 对 12 个核心元素（Hero、服务卡×3、关于文本、团队卡×4、CTA）设置入场效果，延迟阶梯 120-200ms。
- 最终成果：页面首屏加载时间 <1.2s（未压缩），Chrome 性能评分 95+，兼容主流浏览器及移动设备。
3. “我”遇到的难点、坑，和解决方案
- 难点 1：Canvas 粒子在窗口 resize 时位置错乱、连线断裂。
解决：监听 resize 事件重设画布宽高，重新调用 initParticles() 生成粒子并保留随机分布。
- 难点 2：移动端菜单点击链接后侧边栏未自动关闭，且点击外部无法收起。
解决：为每个导航链接添加 click 事件移除 active 类；全局监听点击，若菜单展开且目标不是菜单区域和按钮，则关闭。
- 难点 3：滚动高亮导航时，由于 Hero 区块高度小导致“首页”高亮不准确。
解决：调整滚动偏移阈值（scrollY + 100），并使用 offsetTop 与 offsetHeight 精确判断当前可视区块。
整体采用“单页滚动 + 视觉沉浸”架构：HTML5 搭建语义化骨架，CSS3 负责毛玻璃、渐变文字、Flex/Grid 响应式布局，JavaScript 驱动交互与 Canvas 粒子背景。设计思路以“科技蓝紫渐变 + 动态粒子网络”为视觉基调，利用 backdrop-filter 营造层次感，通过 ScrollReveal 库实现滚动渐现动画，增强浏览节奏。技术栈区分：全局粒子系统（原生 Canvas）、导航滚动高亮（JS + getBoundingClientRect）、服务/团队卡片（CSS 悬停过渡）、移动端菜单（JS 切换 class）。
2. “我”的负责模块和结果（尽可能量化）
我独立完成了全部模块的开发与调试。
- 粒子背景系统：实现 140 个动态粒子，鼠标跟随影响半径 150px，粒子连线距离阈值 130px，帧率稳定 60fps。
- 响应式导航栏：支持 PC/平板/手机，移动端菜单点击展开/收起，滚动超过 50px 时改变样式。
- 内容动画集成：配置 ScrollReveal 对 12 个核心元素（Hero、服务卡×3、关于文本、团队卡×4、CTA）设置入场效果，延迟阶梯 120-200ms。
- 最终成果：页面首屏加载时间 <1.2s（未压缩），Chrome 性能评分 95+，兼容主流浏览器及移动设备。
3. “我”遇到的难点、坑，和解决方案
- 难点 1：Canvas 粒子在窗口 resize 时位置错乱、连线断裂。
解决：监听 resize 事件重设画布宽高，重新调用 initParticles() 生成粒子并保留随机分布。
- 难点 2：移动端菜单点击链接后侧边栏未自动关闭，且点击外部无法收起。
解决：为每个导航链接添加 click 事件移除 active 类；全局监听点击，若菜单展开且目标不是菜单区域和按钮，则关闭。
- 难点 3：滚动高亮导航时，由于 Hero 区块高度小导致“首页”高亮不准确。
解决：调整滚动偏移阈值（scrollY + 100），并使用 offsetTop 与 offsetHeight 精确判断当前可视区块。
示例图片视频
相似推荐
医院DIP2.0按病种分值付费分组匹配系统
立项背景：为响应国家医保局DIP（按病种分值付费）支付方式改革，医院需对住院病例进行自动分组与分值测算，替代人工查表，提升医保结算准确率与效率。
核心功能：
1. 编码标准化：对诊断编码（ICD-10）和手术操作编码（ICD-9-CM3）进行自动补零、格式校验，统一为国临版与医保版2.0标准格式；
2. 编码对照映射：通过诊断对照库、手术对照库，将国临版编码自动映射为医保版2.0编码，支持23个手术操作字段批量对照；
3. DIP智能分组引擎：基于主诊断+主操作组合，实现+组合匹配、/或规则匹配、单码精准匹配、规则组匹配、编码范围匹配、s(n)/a(n)四级兜底等多层匹配策略，自动输出DIP病种ID；
4. 最优候选选择：当多个病种同时命中时，按匹配编码数量、是否包含主操作、操作位置优先级自动选优；
5. 分值计算：关联分值总表，自动计算每个病例的DIP病种分值，输出完整匹配结果表。
业务流程：原始住院病例数据 → 诊断/手术编码补零标准化 → 国临版转医保版对照 → DIP分组引擎多层匹配 → 最优病种选择 → 分值关联 → 输出结算结果。
企业级CRM数据清洗与迁移工具-DataBridge（个人演示项目）
本案例为个人演示项目，面向中小企业更换CRM或整合多来源客户资料时的数据整理需求。用户可导入Excel或CSV文件，配置字段映射规则，完成手机号、邮箱和公司名称标准化，并按组合条件识别重复记录；系统随后展示异常数据、冲突字段和处理建议，用户确认后可导出目标CRM可直接导入的数据文件及清洗报告。整个流程覆盖导入、预览、映射、去重、校验、修复和导出，重点降低人工反复核对带来的遗漏与时间成本。
基于本地化GUI的AI助手客户端-智语助手
立项背景与目标：
在日常工作与学习中，用户频繁需要获取AI辅助回答，但网页端使用需频繁切换浏览器，效率较低。本项目旨在开发一款轻量级桌面AI助手，提供一键式智能问答体验，降低使用门槛，提升日常信息获取效率。
软件功能：
用户输入问题后，点击提交或回车键，程序自动调用AI模型生成回答，并即时显示在窗口中，支持长文本自动换行。
核心功能模块：
1. 用户输入模块（Entry控件）
2. AI接口调用模块（requests + 智谱AI API）
3. 结果显示模块（Label控件 + 自动换行）
业务流程：
用户输入问题 → 点击提交 → 程序获取输入 → 调用AI接口 → 返回结果 → 窗口显示回答
功能路径：
启动程序 → 输入框输入问题 → 点击“提交”按钮 → 查看AI回答 → 输入框自动清空，等待下一次提问
AI智能体平台-AI智能体
Dify，Ragflow,langraph运行平台。
MCP展示执行平台。
RuoYi应用框架做载体。
SpringCloud alibaba 做微服务支持。实现业务系统智能体在平台运行展示结果。
使用RuoYi框架的权限体系和系统管理，支撑整个平台业务。平台实现API调用和API生成来支持执行和结果展示。用RuoYi框架的权限体系和系统管理，支撑整个平台业务。平台实现API调用和API生成来支持执行和结果展示。用RuoYi框架的权限体系和系统管理，支撑整个平台业务。平台实现API调用和API生成来支持执行和结果展示。
数据在线采集
本项目为产业数据直报系统：
1、管理端（省/市/县区三级监管）和填报端（企业、非经营单位）提供端到端的数字化数据采集、审核、统计与导出能力。
2、系统按报告期（年/季/月）驱动 10 张业务表单的填报，涵盖企业基础档案、种植、生产加工、销售、文旅、税收贸易，以及景气调查问卷（含数字选项码与多选字段）。
3、审核采用三级联审机制，支持企业撤回修改、各角色取回、县区退回需第三方评估等精细化规则。
4、管理端提供按地区维度的仪表盘统计（应填/已填/待审/退回率、部分填报识别）、填报进度追踪（按企业/表单维度）和 Excel 导出（问卷选项码转中文、密码加密、填报端仅导出本单位），形成采集-审核-分析闭环。
帮助文档
Copyright @ 2021-2024 程聚宝 | 浙ICP备2021014372号
人工客服