小程序二维码入口和客服功能更新 - 2026-04-09
✅ 新增功能
1️⃣ 导航菜单"免费试用"入口
电脑端：
- 鼠标悬停在"免费试用"上
- 自动弹出小程序二维码
- 扫码即可免费试用
手机端：
- 点击"免费试用"菜单项
- 展开显示小程序二维码
- 再次点击收起
位置：
[首页] [操作手册] [客户案例] [关于我们] [免费试用▼]
↓
┌──────────────┐
│ [小程序码] │
│ 扫码免费试用 │
└──────────────┘
2️⃣ 右下角客服浮动按钮
功能：
- 页面右下角固定显示
- 紫色渐变圆形按钮
- 脉冲动画效果（吸引注意）
- 点击弹出客服二维码
样式：
页面右下角：
┌─────────────┐
│ │
│ [💬] │ ← 客服按钮（脉冲动画）
│ │
└─────────────┘
点击后：
┌─────────────────┐
│ [×] │ ← 关闭按钮
│ [客服二维码] │
│ 扫码联系客服 │
│ 工作时间：9-18点 │
└─────────────────┘
[💬]
📦 更新的文件
必须上传
✅ index.html （首页 - 完整功能）
✅ style.css （全局样式 - 所有样式）
✅ docs.html （文档页 - 完整功能）
✅ cases.html （案例页 - 完整功能）
✅ about.html （关于页 - 完整功能）
✅ images/
✅ mini-program-qr.jpg （产品云相册小程序码）
✅ service-qr.jpg （官方客服二维码）
打包文件
📄 product-website-final.tar.gz （331KB - 完整包）
🎨 视觉效果
导航栏效果
电脑端悬停：
- 按钮文字"免费试用"
- 向下箭头(▼)
- 鼠标悬停时箭头旋转180度
- 二维码从上向下滑入
- 半透明背景
手机端点击：
- 点击展开/收起二维码
- 二维码嵌入在菜单中
- 背景色区分
客服按钮效果
默认状态：
- 紫色渐变背景
- 白色💬图标
- 轻微脉冲动画
悬停状态：
- 放大1.1倍
- 阴影加深
点击后：
- 弹窗淡入上移
- 显示客服二维码
- 关闭按钮在右上角
💡 使用场景
场景一：客户想试用产品
- 打开网站
- 鼠标移到"免费试用"或点击
- 扫描小程序码
- 立即开始试用
场景二：客户有问题咨询
- 浏览网站过程中遇到问题
- 点击右下角客服按钮
- 扫描客服二维码
- 添加客服微信咨询
📱 移动端适配
免费试用入口
- 在移动端菜单中
- 点击展开/收起
- 二维码嵌入菜单流
客服按钮
- 固定在右下角
- 不会遮挡内容
- 点击弹出客服二维码
- 二维码大小适配手机屏幕
🚀 上传部署
方式一：使用上传脚本
cd docs/website
./upload.sh
方式二：FTP工具上传
上传这些文件：- index.html
- style.css
- docs.html
- cases.html
- about.html
- images/mini-program-qr.jpg
- images/service-qr.jpg
🔍 验证清单
部署后检查：
- [ ] 打开首页，看到导航栏"免费试用"
- [ ] 鼠标悬停"免费试用"，弹出小程序码
- [ ] 右下角有客服浮动按钮
- [ ] 点击客服按钮，弹出客服二维码
- [ ] 点击关闭按钮，弹窗关闭
- [ ] 用手机访问，点击"免费试用"展开二维码
- [ ] 客服按钮在所有页面都显示
📊 功能对比
| 功能 | 电脑端 | 手机端 |
|------|--------|--------|
| 免费试用入口 | 悬停显示 | 点击展开 |
| 客服按钮 | 右下角固定 | 右下角固定 |
| 二维码大小 | 150x150px | 150x150px |
| 动画效果 | 滑入+淡入 | 展开收起 |
更新时间：2026-04-09 20:01
文件大小：331KB（完整包）