174 lines
8.8 KiB
Markdown
174 lines
8.8 KiB
Markdown
# 黄果短剧落地页设计规格（电脑版 5 变体）
|
||
|
||
> **用户规则覆盖（最高优先级）：**
|
||
> - 不强制 TDD：不写"先写测试"步骤。
|
||
> - 收尾只做静态检查（`tsc --noEmit` / lint / `pnpm build`），不自动跑单测/E2E。
|
||
> - 不自动 commit / push / 建 PR：除非用户明确说"提交"。
|
||
|
||
**日期：** 2026-05-29
|
||
**范围：** 本规格只覆盖**电脑版 5 个变体**。手机版 Figma 用户稍后提供，届时另起规格沿用同一套架构。
|
||
|
||
---
|
||
|
||
## 1. 目标
|
||
|
||
把当前 repo（残留的"逼哩逼哩 bili"模板）改造为**黄果短剧**落地页。电脑版有 5 个变体，版面结构完全相同，仅**背景大图**与**底部 5 张封面**不同。进站随机分流到其中之一（5 路 A~E，各 20%），并复用现有埋点。
|
||
|
||
设计来源 Figma：`yD7lloED2Okdp1FJTYvhe3`
|
||
- 变体 1 `73:53`、变体 2 `73:111`、变体 3 `73:168`、变体 4 `73:224`、变体 5 `73:280`
|
||
|
||
---
|
||
|
||
## 2. 架构总览
|
||
|
||
沿用现有技术栈：Vue 3 `<script setup lang="ts">` + Vite + SCSS，电脑端 `zoom` 缩放方案（基于 1920×1080）。**不引入新依赖**。
|
||
|
||
```
|
||
src/
|
||
├── pages/index.vue # 入口：设备检测 + 5 路随机分流 A~E
|
||
├── components/landing/PcLanding.vue # 电脑版共用模板（本次重点）
|
||
├── components/landing/MobileLanding.vue # 手机版共用模板（占位，后续做）
|
||
├── components/desktop/qrcode.vue # 复用现有二维码组件
|
||
├── config/variants.ts # 变体 → 素材映射表 + 导航链接常量
|
||
└── assets/image/hg/
|
||
├── common/ # 5 变体共用素材
|
||
│ ├── logo.png / .webp # 左上 logo 锁定组（图标+黄果短剧+标语）
|
||
│ ├── theme.png / .webp # 主文案大图（每一帧都能… + 副标）
|
||
│ ├── qr-text.png / .webp # 二维码旁文字块（安卓手机 / UC扫码 / 安装提示）
|
||
│ ├── icon-tg.png / .webp # 官方群组图标
|
||
│ ├── icon-biz.png / .webp # 商务合作图标
|
||
│ └── icon-channel.png / .webp # 渠道合作图标
|
||
└── pc/ # 每变体一份
|
||
├── bg1.png … bg5.png / .webp # 背景大图 1920×1080
|
||
└── covers1.png … covers5.png / .webp # 底部封面长条 606×152（静态，5 张烤成一张）
|
||
```
|
||
|
||
**核心思路：版面只写一次。** `PcLanding.vue` 接收 `variant`（0~4）prop，从 `variants.ts` 取该变体的 `bg` 与 `covers` 图，其余元素（导航、主文案、二维码区）5 变体完全共用。
|
||
|
||
---
|
||
|
||
## 3. 版面坐标（取自 Figma 变体 1 `73:53`，5 变体共用）
|
||
|
||
画布 1920×1080，全部为绝对坐标。
|
||
|
||
| 元素 | 位置 (x,y) | 尺寸 | 说明 |
|
||
|---|---|---|---|
|
||
| 背景大图 | 0,0 | 1920×1080 | **每变体不同**，含底部深色渐变压暗（保证文字可读） |
|
||
| 顶部 pill 导航条 | 360,0 | 1200×70 | 半透明圆角条，水平居中 |
|
||
| ├ logo 锁定组 | 420,15 | 154×40 | 图标 40×40 + "黄果短剧" + 标语，烤成一张图 |
|
||
| └ 联系方式（3 项） | 1094,23 | 406×24 | 官方群组 / 商务合作 / 渠道合作，项间有圆点分隔 |
|
||
| 主文案 | 204,308 | 630×381 | 标题"每一幀都能 解你的色" + 副标，烤成一张图 |
|
||
| 二维码区 | 204,750 | 706×180 | 左二维码 + 右文字块 |
|
||
| ├ 二维码本体 | 204,750 | 180×180 | 白底圆角，内 150×150 动态二维码 |
|
||
| └ 二维码文字块 | 408,757 | 502×166 | 安卓手机 / 建议使用UC浏览器扫码 / 安装提示，烤成一张图 |
|
||
| 底部封面行 | 1184,778 | 606×152 | **每变体不同**，5 张 110×152 封面，间距 14px，烤成一张长条图 |
|
||
|
||
> 实作计画阶段会逐变体拉取背景与封面的 imageRef / 导出节点。3 个联系方式项的精确间距（item1@0 / 分隔@124 / item2@156 / 分隔@280 / item3@312，相对 406 宽容器）届时核对。
|
||
|
||
---
|
||
|
||
## 4. 烤图 vs 程式画（沿用 pc2 约定）
|
||
|
||
| 元素 | 做法 | 共用/变体 |
|
||
|---|---|---|
|
||
| 背景大图 | `<picture>` webp+png | **变体** bg1–bg5 |
|
||
| 底部 5 封面 | 烤成 606×152 长条图 | **变体** covers1–covers5 |
|
||
| logo 锁定组 | 烤图 | 共用 |
|
||
| 主文案 | 烤图 | 共用 |
|
||
| 二维码旁文字 | 烤图 | 共用 |
|
||
| 3 个导航项（图标+文字） | **程式画**：可点击、可埋点 | 共用 |
|
||
| 二维码本体 | 动态 `DesktopQrcode`（编码当前网址） | 共用 |
|
||
|
||
---
|
||
|
||
## 5. 路由 / 分流 / 埋点
|
||
|
||
改造 `src/pages/index.vue`：
|
||
|
||
- 设备检测沿用现有 UA 正则。
|
||
- 把当前 `Math.random() < 0.5 ? "A" : "B"` 扩成 **5 路随机**：`variantIndex = Math.floor(Math.random() * 5)`（0~4），`version = ["A","B","C","D","E"][variantIndex]`。
|
||
- 桌面 → `<PcLanding :variant="variantIndex" />`。
|
||
- 埋点照旧：`trackLandingPageView({ landing_page_id: 'JHA-126' + version })`，点击埋点 `handleClick` 逻辑保留不动。
|
||
- **手机分支（过渡）：** 黄果手机版尚未做。本期先让手机分支渲染一个简单的黄果占位（或暂时保留现有 mobile 组件），等手机 Figma 到位后换成 `<MobileLanding :variant="variantIndex" />`。**实作时确认**取哪种过渡（默认：简单占位）。
|
||
|
||
---
|
||
|
||
## 6. 导航链接（`config/variants.ts` 顶部常量，易替换）
|
||
|
||
```ts
|
||
export const NAV_LINKS = {
|
||
group: 'https://t.me/huangguoshortdrama', // 官方群组（已定）
|
||
biz: '#TODO-business', // 商务合作（待用户提供）
|
||
channel: '#TODO-channel', // 渠道合作（待用户提供）
|
||
}
|
||
```
|
||
|
||
- 商务合作 / 渠道合作链接**用户尚未提供**，先放占位常量，给到网址后改一行即可。
|
||
- 点击导航项跳转 `window.location.href = NAV_LINKS.xxx`，并经由现有 `handleClick`（监听 window click，按 alt/innerText 取 tab_key）上报埋点。
|
||
|
||
---
|
||
|
||
## 7. 二维码行为
|
||
|
||
维持现状：`DesktopQrcode` 编码 `window.location.href`（手机扫码 → 打开当前落地页的手机版）。
|
||
> 用户尚未决定是否改成固定 APK/下载链接。若后续要改，只需把 `qrcode.vue` 的 `URL.value` 来源换成固定值，影响面单一。
|
||
|
||
---
|
||
|
||
## 8. index.html SEO 改造（简体，黄果短剧）
|
||
|
||
| 字段 | 新值 |
|
||
|---|---|
|
||
| `lang` | 保持 `zh-CN` |
|
||
| `<title>` | 黄果短剧官网 - 竖屏短剧APP下载 \| 黄果 |
|
||
| `description` | 黄果短剧官网 —— 竖屏短剧新世代。强情节、快节奏、随时随地，把最上瘾的好故事装进你的每一个碎片时间。支持安卓/iOS下载，海量都市情感、甜宠恋爱、古装传奇、悬疑反转短剧，免费在线看。 |
|
||
| `keywords` | 用户提供的整串清单（黄果 / 黄果短剧 / 短剧 / 竖屏短剧 / 下载 / 安卓 / iOS / 各题材 / 竞品词 等，逗号分隔） |
|
||
| `og:title` | 黄果短剧 \| 竖屏短剧APP下载官方入口 |
|
||
| `og:site_name` | 黄果短剧 |
|
||
| `og:url` / `canonical` | https://huangguo.com |
|
||
| `og:description` / twitter 同 description |
|
||
| `theme-color` 等 | 保留 |
|
||
|
||
- `favicon` / `og:image`：暂保留现有，等黄果素材到位再换（**实作开放项**）。
|
||
- 移除 `rating: adult` / RTA 等 bili 专用、与黄果无关的 meta（实作时确认）。
|
||
|
||
---
|
||
|
||
## 9. 图片压缩流程（用户明确要求）
|
||
|
||
1. 从 Figma 导出 PNG：背景用 **1×（1920×1080）**，不用 2×，控制体积；图标/封面按需 1×~2×。
|
||
2. 跑 `pnpm webp`（`convertToWebp.js`，sharp `quality: 80`）批量生成 `.webp` 同名副本。
|
||
3. 模板用 `<picture><source type="image/webp" :srcset="xxxW" /><img :src="xxx" /></picture>` 优先吃 webp、png 后备。
|
||
4. build 时 `vite-plugin-vsharp` 再压一次。
|
||
5. 背景为最大体积项，重点核对压后单张体积（目标尽量 < 300KB webp，必要时降质量或尺寸）。
|
||
|
||
---
|
||
|
||
## 10. 开放项（实作前/中确认）
|
||
|
||
1. 商务合作 / 渠道合作 链接 — 用户提供后替换占位。
|
||
2. 二维码是否改固定下载链接 — 默认维持现状。
|
||
3. 手机分支过渡方案 — 默认简单占位。
|
||
4. favicon / og:image 黄果素材 — 默认暂留现有。
|
||
5. 是否删除 / 保留旧 bili 页面（pc/pc2/mobile/mobile2）与 `project.md` — 默认**先保留**，不在本期清理。
|
||
|
||
---
|
||
|
||
## 11. 不在本期范围
|
||
|
||
- 手机版 5 变体（等 Figma）。
|
||
- 删除旧 bili 页面 / 重写 project.md。
|
||
- 新增后端接口 / 埋点字段。
|
||
- 自动 commit / 部署。
|
||
|
||
---
|
||
|
||
## 12. 自检
|
||
|
||
- ✅ 5 变体共用版面 → `PcLanding.vue` 单组件 + `variants.ts` 映射。
|
||
- ✅ 仅背景+封面随变体变 → 素材分 `common/` 与 `pc/`。
|
||
- ✅ 5 路随机分流 + 埋点 A~E → `index.vue` 改造。
|
||
- ✅ 图片压缩 → `pnpm webp` + `<picture>` + vsharp。
|
||
- ✅ 官方群组链接已定，其余占位易替换。
|
||
- ⚠️ 占位项（biz/channel 链接、二维码、手机过渡、favicon）已在第 10 节列明，不阻塞电脑版实作。
|