25 lines
2.0 KiB
Markdown
25 lines
2.0 KiB
Markdown
# 首页主打（Hero）素材 · 前端配置说明（2026-09-12）
|
||
|
||
轮播顺序（用户指定）：01 琼明神女录 → 02 欲镜 → 03 触手乐园 → 04 PRISM：魔盗女团 → 05 废柴杂役。每部 5 个文件，命名 `NN-slug-用途.jpg`：
|
||
|
||
| 用途 | 文件 | 尺寸 | 用在哪 |
|
||
|---|---|---|---|
|
||
| 横版母版（清晰） | `NN-slug-land.jpg` | 1920×1080 | PC hero 右侧主视觉卡 600×338（object-fit: cover），母版自带金字剧名，不要再叠文字 |
|
||
| 模糊大图 | `NN-slug-land-blur.jpg` | 1920×1080，高斯模糊 26px | PC hero 全幅氛围底图；前端自行叠遮罩（见下） |
|
||
| 模糊压暗版 | `NN-slug-land-blur-dark.jpg` | 1920×1080 | 已把页底色 #0B0B0D 85% 混合 + 左/顶/底三层遮罩烘进去，与 Figma 稿完全一致；不想写遮罩时直接用这张 |
|
||
| H5 顶图 | `NN-slug-port-top.jpg` | 900 宽（约 900×1040） | H5 hero 顶部 375×433 区域（object-fit: cover; object-position: top），已裁掉海报自带剧名，文字区在其下 |
|
||
| 3:4 封面 | `NN-slug-cover.jpg` | 480×640 | 轮播缩略图 52×70 / 44×58，与作品区封面同一张 |
|
||
|
||
## 若用 `-land-blur.jpg` 自己叠遮罩（对齐 Figma）
|
||
```css
|
||
.hero{position:relative;background:#0B0B0D}
|
||
.hero .bg{position:absolute;inset:0;background:url(01-qiongming-land-blur.jpg) center/cover;opacity:.85}
|
||
.hero .scrim-l{position:absolute;inset:0;background:linear-gradient(90deg,#0B0B0D 0%,rgba(11,11,13,.6) 30%,rgba(11,11,13,0) 62%)}
|
||
.hero .scrim-b{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,11,13,0) 50%,#0B0B0D 100%)}
|
||
.hero .scrim-t{position:absolute;left:0;right:0;top:0;height:24%;background:linear-gradient(180deg,#0B0B0D 0%,rgba(11,11,13,.6) 35%,rgba(11,11,13,0) 100%)}
|
||
```
|
||
切换主打时：底图交叉淡入 1s，卡片 / 文字 0.5s 上浮；缩略图选中态 2px #EC237F 描边；进度线 6s 一格。
|
||
|
||
## 来源
|
||
`~/Desktop/AI短劇系列平面/` 各剧的「橫版封面-母版」「豎版封面-母版」「3比4」；欲镜没有 9:16 豎版，H5 顶图取自 3:4 直版上 70%。
|