yiqiu f7f2c0a716 优化移动端 banner-list：分离布局、调整方向、移除圆角 ...

layout 优化：
- margin-top：从负值改为正值，确保不重叠幻灯片区域
  * 767px：-50px → 20px
  * 480px：-40px → 16px
  * 360px：-20px → 12px

卡片方向改变：
- flex-direction：column → row（图标改为左边排列）
- text-align：center → left（文字左对齐）
- align-items：center → flex-start（文字顶对齐）

尺寸优化：
- 移除 min-height 限制，改为 max-height 控制
- 767px：110px → auto, max-height: 60px
- 480px：115px → auto, max-height: 60px
- 360px：105px → auto, max-height: 55px

图标调整：
- margin-bottom → margin-right: 8px（改为右边间距）
- 图标尺寸缩小
- flex-shrink: 0（防止挤压）

圆角移除：
- border-radius：8px/7px/6px → 0（所有断点）

其他改进：
- 添加背景和边框提升视觉层次
- 字体、颜色调整保持一致性
- 内容区域自适应宽度

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

2025-12-15 21:39:17 +08:00

85 KiB

Raw Blame History

View Raw