65 lines
1.4 KiB
Markdown
65 lines
1.4 KiB
Markdown
|
# 数字人位置调整
|
|||
|
|
|
|||
|
|
## 📍 位置变更
|
|||
|
|
|
|||
|
|
**从右下角移动到右上角**
|
|||
|
|
|
|||
|
|
### 原因
|
|||
|
|
右下角的数字人圆圈会遮挡底部操作栏的关闭按钮，影响老人的操作。
|
|||
|
|
|
|||
|
|
### 变更详情
|
|||
|
|
|
|||
|
|
**之前：**
|
|||
|
|
```tsx
|
|||
|
|
<div className="absolute bottom-6 right-6 z-20">
|
|||
|
|
{/* 数字人在右下角 */}
|
|||
|
|
</div>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
**现在：**
|
|||
|
|
```tsx
|
|||
|
|
<div className="absolute top-20 right-6 z-20">
|
|||
|
|
{/* 数字人在右上角 */}
|
|||
|
|
</div>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 🎨 新布局
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
┌─────────────────────┐
|
|||
|
|
│ [标题：小米秋游] │
|
|||
|
|
│ ● │ ← 数字人（右上角）
|
|||
|
|
│ │
|
|||
|
|
│ │
|
|||
|
|
│ 照片/视频内容 │
|
|||
|
|
│ │
|
|||
|
|
│ │
|
|||
|
|
│ │
|
|||
|
|
│ [👍喜欢][👎不喜欢][×]│ ← 不被遮挡
|
|||
|
|
└─────────────────────┘
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## ✅ 优势
|
|||
|
|
|
|||
|
|
1. **不遮挡按钮** - 底部操作按钮完全可见可点击
|
|||
|
|
2. **视野更好** - 右上角位置更符合视线习惯
|
|||
|
|
3. **陪伴感** - 仍然随时可见，保持陪伴
|
|||
|
|
4. **提示气泡** - 改为在圆圈下方，更自然
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 📐 具体数值
|
|||
|
|
|
|||
|
|
- **位置**：top-20 (80px), right-6 (24px)
|
|||
|
|
- **尺寸**：w-24 h-24 (96px × 96px)
|
|||
|
|
- **提示气泡**：-bottom-10（圆圈下方 40px）
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
*更新时间：2025-11-13*
|
|||
|
|
*版本：v2.1.1*
|