mp-pilates

Go to file

richarjiang 168968f073 feat: 将课程预约卡片改造为电影票风格设计

### 改动内容

#### 1. SlotCard 组件完全重新设计
- **新增票据风格装饰**：左右两侧添加圆角凹陷（打孔效果）
- **三栏布局**：
  - 左：时间（开始时间大号、分割线、结束时间小号）
  - 中：课程名称、时长、剩余名额 + 虚线分割符
  - 右：操作按钮或状态徽章
- **日期展示**：卡片上方显示完整日期 (YYYY-MM-DD)
- **状态指示器**：
  - 绿色：有空位
  - 橙色：接近满额（80% 以上）
  - 红色：已满
  - 灰色：已关闭/已过期
- **响应式样式**：根据预约、满额、已过期等状态自动调整背景颜色和透明度

#### 2. 预约页面 (booking/index.vue) 样式调整
- 移除卡片列表的间距（`gap: 20rpx` → `padding: 24rpx 0 0`）
- 更新日期摘要的内边距（`0 8rpx 4rpx` → `0 24rpx 16rpx`）
- 调整加载骨架屏的尺寸和间距
- 优化预加载动画匹配新卡片设计

### 设计特点
✨ 票据风格的视觉设计
🎯 改进的信息层级和易读性
🎨 精细的状态指示和颜色编码
📱 保持响应式和易用性

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

2026-04-06 17:12:53 +08:00