产品云相册官网
一个专业的产品云相册静态官网，完美适配手机和电脑，采用左侧导航 + 右侧内容的文档展示方式。
✨ 核心特性
📱 响应式设计
- 桌面端：左侧固定导航栏 + 右侧内容区
- 手机端：侧边栏可收起，点击按钮展开
- 断点适配：1024px / 768px / 480px
📖 专业文档展示
- 左侧导航：功能分类清晰，点击即可切换
- 右侧内容：完整的操作步骤和说明
- 单页应用：无需跳转多个页面，体验流畅
🎨 视觉区分
- PC端文档：蓝色主题 (#2563eb) - 面向管理员
- 手机端文档：绿色主题 (#10b981) - 面向终端客户
📁 文件结构
website/
├── index.html # 首页
├── docs.html # 文档中心概览
├── cases.html # 客户案例
├── about.html # 关于我们
│
├── docs/
│ ├── pc/ # 💻 PC端文档
│ │ └── index.html # ✅ 左侧导航 + 右侧内容（包含所有文档）
│ │
│ └── mobile/ # 📱 手机端文档
│ └── index.html # ✅ 左侧导航 + 右侧内容（包含所有文档）
│
├── README.md # 本文档
└── DOC-PLAN.md # 文档规划清单
🚀 如何查看
方法一：直接打开（最快）
open docs/website/index.html
方法二：启动本地服务器（推荐）
cd docs/website
python -m http.server 8000
📖 文档说明
💻 PC端操作文档（管理员）
访问地址：docs/pc/index.html
包含内容：
- 🚀 快速入门
- 快速入门指南
- 📦 产品管理
- 产品管理操作手册
- 分类管理操作手册
- 批量导入产品
- 💬 询盘管理
- 询盘管理操作手册
- 询盘通知设置
- 📊 数据分析
- 数据分析操作手册
- 访客追踪功能
- ⚙️ 小程序设置
- 小程序基础设置
- 主题样式自定义
- 二维码使用指南
特色：
- 左侧菜单可点击切换
- 右侧显示对应的操作步骤
- 移动端自动收起侧边栏
📱 手机端操作文档（小程序）
访问地址：docs/mobile/index.html
包含内容：
- 🚀 快速入门
- 小程序快速入门
- 首次使用指南
- 👀 产品浏览
- 浏览产品目录
- 搜索产品
- 收藏与分享
- 💬 询价功能
- 提交询价
- 查看询价记录
- 👤 个人中心
- 个人中心功能
- 小程序设置
🎨 设计特色
左侧导航
- 固定定位：滚动时始终可见
- 分类清晰：按功能模块分组
- 高亮显示：当前选中的文档高亮
- 平滑滚动：切换内容时自动滚动到顶部
右侧内容
- 标题醒目：蓝色/绿色左边框标识
- 步骤清晰：Step by step 操作指引
- 提示框：重要信息突出显示
- 截图预留：预留截图位置
移动端优化
- 汉堡菜单：点击按钮展开侧边栏
- 遮罩层：侧边栏打开时显示遮罩
- 触控优化：按钮和链接大小适配手指操作
📊 文档统计
| 分类 | PC端 | 手机端 | 合计 |
|------|------|--------|------|
| 文档数量 | 10篇 | 9篇 | 19篇 |
| 页面文件 | 1个 | 1个 | 2个 |
🔧 技术栈
- HTML5：语义化标签
- CSS3：Flexbox + Grid 布局
- JavaScript：原生JS实现导航切换
- 响应式设计：媒体查询适配多端
- 无框架依赖：纯静态页面，加载快速
📝 后续优化
功能优化
- [ ] 添加文档搜索功能
- [ ] 添加返回顶部按钮
- [ ] 添加打印样式
- [ ] 添加暗色模式
内容补充
- [ ] 补充真实的后台截图
- [ ] 添加视频教程链接
- [ ] 补充更多客户案例
SEO优化
- [ ] 添加 meta 标签
- [ ] 添加 sitemap.xml
- [ ] 优化页面结构化数据
📞 联系方式
- 邮箱：contact@chengguoit.com
- 公司：成小果AI技术有限公司
© 2026 成小果AI技术有限公司 | 产品云相册