docs: design ticket home video cover

This commit is contained in:
2026-08-11 11:56:52 +08:00
parent 182e7101c0
commit e4f281bf14

View File

@@ -0,0 +1,18 @@
# TicketHome 视频封面设计
## 目标
`TicketHome.vue``homeData.coverImage` 同时支持图片和 MP4 视频,保持景区头图现有尺寸、渐变遮罩、导航与文字信息不变。
## 实现
-`TicketHome.vue` 内新增 `isMp4Video(url)`,与现有 `ExploreCards``PanoramicHome` 规则一致字符串去除首尾空格及查询参数、hash 后,不区分大小写判断是否以 `.mp4` 结尾。
- `coverImage` 是 MP4 时渲染铺满头图区的 `<video>`;视频启用 `autoplay``loop``muted`,关闭 controls、播放按钮、全屏按钮、静音按钮和进度手势使用 `object-fit="cover"`
- `coverImage` 非 MP4 时继续渲染 `<image mode="aspectFill">`
- `coverImage` 为空时不渲染媒体元素,保留头图区背景色。
- 不抽取公共媒体工具,不修改其他页面或接口字段。
## 验证
- 先在 `view-contract.test.mjs` 添加失败测试,覆盖视频分支、图片回退、播放器属性和带查询参数的 MP4 判断。
- 测试转绿后运行完整票务视图契约、票务模型测试、`git diff --check``yarn dev:mp-weixin`