独角数卡添加右下角在线客服功能

### 功能概述
右下角在线客服是一个悬浮式客服联系方式展示功能，为用户提供便捷的QQ和微信客服接入方式。

✨ 核心功能特点 1. 悬浮客服按钮

• 位置 ：固定在页面右下角（距离右边 30px，距离底部 30px）
• 样式 ：圆形按钮，白色背景，带有阴影效果
• 图标 ：使用客服图标（SVG格式）
• 毛玻璃效果 ：使用 backdrop-filter: blur(10px) 实现磨砂玻璃质感
• 悬停效果 ：鼠标悬停时按钮上移 2px，背景变为蓝色，阴影加深 2. 客服弹窗
• 触发方式 ：点击客服按钮后弹出

• 关闭方式 ：

  • 点击弹窗外部区域自动关闭
  • 点击弹窗内部不会关闭（事件冒泡处理）
• 动画效果 ：淡入动画（fadeInUp），从下方滑入并渐显 3. 双客服支持
  同时支持 QQ 和微信两种联系方式：
  QQ 客服
• 二维码展示 ：显示从后台配置的 QQ 二维码图片
• QQ号显示 ：显示从后台配置的 QQ 号
• 一键复制 ：点击 QQ 号可复制到剪贴板
• 图标标识 ：蓝色圆形徽章（#4299e1）
• 未上传提示 ：如果未配置二维码，显示"请上传QQ二维码"灰色提示 微信客服
• 二维码展示 ：显示从后台配置的微信二维码图片
• 微信号显示 ：显示从后台配置的微信号
• 一键复制 ：点击微信号可复制到剪贴板
• 图标标识 ：绿色圆形徽章（#48bb78）
• 未上传提示 ：如果未配置二维码，显示"请上传微信二维码"灰色提示 4. 后台配置管理
  在后台"系统设置"→"基本设置"中可配置：
• QQ号 ：文本输入框，填写客服 QQ 号
• QQ二维码 ：图片上传，上传 QQ 二维码图片
• 微信号 ：文本输入框，填写客服微信号
• 微信二维码 ：图片上传，上传微信二维码图片 5. 视觉设计特点 毛玻璃风格
• 使用 backdrop-filter: blur(10px) 实现背景模糊效果
• 半透明白色背景（rgba(255,255,255,0.98)）
• 柔和的阴影效果 优雅动画
• 按钮悬停： transform: translateY(-2px) 向上浮动
• 弹窗进入： fadeInUp 动画，从下方淡入
• 过渡效果： transition: all 0.3s ease 平滑过渡 响应式布局
• 使用 Flexbox 布局
• 二维码区域水平排列
• 适配不同屏幕尺寸 高优先级显示
• 客服按钮： z-index: 1000
• 客服弹窗： z-index: 1001

• 确保始终显示在页面最上层

  🎨 设计理念

• 用户体验优先

  • 悬浮按钮不遮挡主要内容
  • 一键操作，快速复制联系方式
  • 清晰的视觉反馈（悬停、点击效果）

• 现代化设计风格

  • 毛玻璃效果符合现代 UI 趋势
  • 圆形按钮和徽章增加品牌识别度
  • 柔和的动画提升交互体验

• 灵活配置

  • 通过后台管理，无需修改代码
  • 支持自定义二维码和联系方式
  • 未配置时显示友好提示

• 多渠道支持

  • 同时支持 QQ 和微信两大主流通讯工具
  • 满足不同用户的使用习惯