Files

T

2026-09-15 16:25:45 +07:00

8.8 KiB

Raw Permalink Blame History

黄果短剧落地页设计规格（电脑版 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` 顶部常量，易替换）

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. 图片压缩流程（用户明确要求）

从 Figma 导出 PNG：背景用 1×（1920×1080），不用 2×，控制体积；图标/封面按需 1×~2×。
跑 pnpm webp（convertToWebp.js，sharp quality: 80）批量生成 .webp 同名副本。
模板用 <picture><source type="image/webp" :srcset="xxxW" /><img :src="xxx" /></picture> 优先吃 webp、png 后备。
build 时 vite-plugin-vsharp 再压一次。
背景为最大体积项，重点核对压后单张体积（目标尽量 < 300KB webp，必要时降质量或尺寸）。

10. 开放项（实作前/中确认）

商务合作 / 渠道合作链接 — 用户提供后替换占位。
二维码是否改固定下载链接 — 默认维持现状。
手机分支过渡方案 — 默认简单占位。
favicon / og:image 黄果素材 — 默认暂留现有。
是否删除 / 保留旧 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 节列明，不阻塞电脑版实作。

8.8 KiB Raw Permalink Blame History Unescape Escape