Home Verkennen Help
Registreren Inloggen
SWT-SXC
/
sxc-frontend
3
0
Vork 0
Bestanden Issues 0 Pull-aanvragen 0 Wiki
Boom: 83ac7d28a8
Aftakkingen Labels
sxc-frontend
/
web
/
CHANGES_SUMMARY.md

CHANGES_SUMMARY.md 4.2 KB
Geschiedenis Ruwe

1080x1920 设备适配修改总结

修改文件清单

1. 核心样式文件

  • web/src/assets/base.css
    • 添加 CSS 变量系统（字体、间距、圆角、触摸目标）
    • 添加 1080x1920 设备媒体查询
    • 优化 body 行高为 1.75

2. 组件样式更新

web/src/components/SsHeadline.vue

  • 使用 CSS 变量替代硬编码尺寸
  • 添加中等设备媒体查询
  • 增大标题和副标题间距

web/src/components/SsCommonProblem.vue

  • 最小高度从 16rem → 20rem
  • 标题从 1rem → 1.5rem
  • 列表项从 0.8rem → 1rem
  • 图标从 2.13rem → 3rem
  • 添加最小触摸目标 44px
  • 增强阴影效果

web/src/components/SsService.vue

  • 卡片高度从 7.5rem → 9rem
  • 标题从 0.88rem → 1.125rem
  • 中心卡片从 12rem → 14rem
  • 使用 CSS 变量管理间距
  • 添加最小触摸目标

web/src/components/SsInputBox.vue

  • Padding 从 1.25rem → 1.75rem
  • 使用 CSS 变量管理圆角和字体
  • 按钮增大至 44px 最小尺寸
  • 增强阴影从 0.25rem → 0.5rem
  • 输入框字体使用 --body-font-size

web/src/components/SsGridEntrance.vue

  • Padding 从 1.5rem → 2rem
  • 标题从 0.88rem → 1.25rem
  • 正文从 0.8rem → 1rem
  • 图标从 6rem → 7rem
  • 添加最小触摸目标

web/src/components/SsPanel.vue

  • 标题从 1rem → 1.25rem
  • 刷新按钮从 0.88rem → 1rem
  • 添加最小触摸目标 44px

web/src/components/SsHeader.vue

  • Logo 从 1.88rem → 2.5rem
  • 标题从 1rem → 1.25rem
  • 微信入口字体从 0.88rem → 1rem
  • Padding 从 1rem → 1.5rem

web/src/views/HomeView.vue

  • 添加垂直布局支持（.ss-row-vertical）
  • 服务导航占 100% 宽度，位于上方
  • 常见问题占 100% 宽度，位于下方
  • 顶部 padding 从 4rem → 5rem
  • 底部 padding 从 2rem → 3rem
  • 列间距从 0.9rem → 1rem
  • 行间距从 1.68rem → 2rem

3. 文档文件

  • web/DEVICE_OPTIMIZATION.md: 详细优化说明
  • web/CHANGES_SUMMARY.md: 本文件

关键设计决策

1. CSS 变量优先

使用 CSS 变量而非硬编码值，便于：

  • 统一管理尺寸
  • 快速调整适配
  • 保持一致性
  • 减少重复代码

2. 媒体查询策略

桌面端（>1200px）→ 1080x1920（751-1200px, >1800px高）→ 移动端（<750px）

3. 垂直布局

在 1080x1920 设备上：

  • 服务导航：100% 宽度，位于上方
  • 常见问题：100% 宽度，位于下方
  • 避免横向拥挤，提升可读性

4. 触摸优化

所有交互元素最小 44px × 44px：

  • 符合 WCAG 2.1 AAA 标准
  • 提升触摸准确性
  • 减少误触

5. 视觉层次

  • 增大阴影：0.25rem → 0.5rem
  • 增大圆角：1.25rem → 1.5rem
  • 增大间距：使用 --spacing-unit 倍数
  • 增强对比度

未修改的文件

以下组件未修改，因为：

  1. 不在首页显示
  2. 已有合适的响应式设计
  3. 不需要特殊优化
  • SsFooter.vue
  • SsNavigation.vue
  • SsRecording.vue
  • SsDisclaimer.vue
  • SsHotline.vue
  • SsOpinion.vue
  • ss_chat/* 组件

测试检查清单

  • 在 1080x1920 设备/模拟器中打开页面
  • 验证标题文字清晰可读（约 32px）
  • 验证输入框高度充足（≥50px）
  • 验证所有按钮可轻松点击（≥44px）
  • 验证服务导航垂直布局正确（位于上方）
  • 验证常见问题垂直布局正确（位于下方）
  • 验证卡片阴影和圆角效果
  • 验证文字行高舒适（1.75）
  • 验证间距合理，不拥挤
  • 验证滚动流畅
  • 验证不影响桌面端（>1200px）
  • 验证不影响移动端（<750px）

回滚方案

如需回滚，恢复以下文件：

  1. web/src/assets/base.css
  2. web/src/components/*.vue（所有修改的组件）
  3. web/src/views/HomeView.vue

或使用 Git：

git checkout HEAD -- web/src/assets/base.css
git checkout HEAD -- web/src/components/
git checkout HEAD -- web/src/views/HomeView.vue

后续优化建议

  1. 性能测试：在实际设备上测试渲染性能
  2. 用户测试：收集真实用户反馈
  3. 微调：根据反馈调整字体和间距
  4. 扩展：考虑其他中等尺寸设备（如 iPad）
  5. 动画：优化过渡动画在中等设备上的表现