1.6 KiB
1.6 KiB
平台首页响应式布局优化设计
更新时间：2026-04-24
1. 问题结论
当前平台首页桌面端视觉方向成立，但移动端存在明显横向溢出：Hero 右侧按钮、底部导航末项和部分卡片会被裁切。问题根因不是数据逻辑，而是桌面式固定宽度、外层 padding 与若干卡片最小宽度在窄屏下叠加，超过了 100vw。
2. 本次目标
- 移动端优先保证首页不横向滚动、不裁切底部导航。
- Hero 在手机宽度下改为紧凑单列，标题、按钮和标签都完整显示。
- 桌面端降低外框视觉噪声，让主内容和 CTA 更清晰。
- 空状态区域收敛高度，避免首屏出现大面积空白。
3. 编码落点
src/components/rpg-runtime-shell/RpgRuntimeStageRouter.tsx- 平台壳移动端使用更小边距，避免根容器加宽。
src/components/rpg-entry/RpgEntryHomeView.tsx- 移动端根节点显式
min-w-0与overflow-hidden。 - 底部导航外层不再额外制造宽度。
- Hero/内容卡片补充
min-w-0，窄屏内按容器收缩。
- 移动端根节点显式
src/index.css- 全局与平台壳禁止横向溢出。
- 移动端压缩底部导航间距、字号和图标壳尺寸。
- 移动端收敛
platform-page-stage圆角与边框层级。 - 桌面端保留卡片质感，但弱化多层外框阴影。
4. 验收标准
390px宽度截图中，首页内容、Hero 按钮和底部四个导航项完整可见。- 桌面端首页仍保持顶部栏、侧边导航、主推荐区和右侧趋势区结构。
- 页面不新增功能说明类 UI 文案。
- 修改中文文件后通过编码检查。