简介
这是一个仿原站视觉风格制作的产品介绍程序：左侧固定目录、右侧半透明内容页、柔和粉蓝渐变背景，以及适配手机端的抽屉导航。
程序适合用于软件官网、产品说明、更新日志、功能演示、教程说明和 FAQ。所有文案、按钮、图片、视频链接都可以在代码里直接替换。
界面组成
页面由静态 HTML、CSS 与原生 JavaScript 构成，不依赖框架，上传到任意静态服务器即可运行。
交互包含页面切换、移动端菜单、二级目录弹窗、折叠面板、功能树展开、媒体懒加载与图片预览。
您可能想找的
更新内容
版本 1.7 更新
新增独立静态版页面结构，所有导航、内容卡片和交互逻辑集中管理，方便后续维护。
优化移动端布局，侧边栏会收起为圆形菜单按钮，目录弹窗可在长内容页面快速跳转。
版本 1.6 更新
增加粉蓝渐变、毛玻璃内容卡、圆角按钮、柔和阴影与淡色边框，整体更接近参考网页的视觉语言。
版本 1.5 更新
增加媒体占位模块，可替换为图片或视频链接，并支持点击查看大图。
版本 1.4 更新
增加功能树组件，适合展示多级功能分类、模块能力、流程节点或产品路线图。
功能演示
点击分类查看子功能
产品功能树
图片
视频
说明文案
本页目录
平滑滚动
遮罩
动画
触控优化
双列
单列
标题
描述
锚点
下载
购买
联系
Nginx
宝塔
CDN
直接打开
HTTP 服务
介绍页主视觉
使用大圆角内容容器承载正文，标题采用粉色强调，下划线和边框使用低透明度粉色，正文使用偏蓝灰色。
这种结构适合产品说明页、教程页和资料站。用户可以通过左侧目录快速切换模块。
柔和产品介绍页面
Gradient background / glass content / soft navigation
媒体展示
卡片中的媒体区域可替换为真实截图、视频或产品图片。图片元素加上
feature-img 类后会自动启用预览。
▶
使用方法
部署方式
直接把整个
huohua-ui-program 文件夹上传到服务器网站目录即可。入口文件是 index.html。
如果在本机预览，可以双击打开
index.html，或者使用任意静态服务器托管该目录。
替换内容
导航在
index.html 顶部的侧栏区域。每个页面是一个 section.page，新增页面时同步增加导航项即可。
页面内部卡片使用
feature-card，标题使用 feature-title，正文使用 feature-desc。
替换媒体
需要真实图片时，把图片放进
assets 目录，然后将媒体占位替换为
<img class="feature-img" src="./assets/your-image.png" alt="说明">。
常见问题
如何改成自己的产品？
修改
index.html 中的标题、段落、卡片和联系方式即可。样式集中在 assets/styles.css。
如何换颜色？
修改 CSS 顶部
:root 里的颜色变量，例如 --pink、--blue、--text。
手机端是否可用？
已包含手机端断点。宽度小于 768px 时，左侧目录会变成抽屉，功能树会从四列变成两列。
是否需要后端？
不需要。该程序是纯前端静态页面。若后续要接后台或管理系统，可以把内容数据迁移为 JSON。
联系我们
邮箱：example@example.com
频道：请替换为你的社群或客服链接
提示：这里是占位联系方式，部署前请替换为自己的真实信息。