gpttemp

code/app/home/view/videoGpt1/module/detail_main/index.md

@@ -0,0 +1,268 @@
+好，确认你选的是 **方案 1：给你「5 个模块 × 每个 20 套的【具体 HTML 设计清单】」**。
+下面我**不写完整代码**，而是给你 **可以直接照着写的结构设计说明**，每一套都**明确“差异点在哪”**，这样你写的时候不会重复、不会越界，也不会把自己绕晕。
+
+> 目标只有一个：
+> **F12 看起来不一样 + SEO 结构不一样 + 长期好维护**
+
+---
+
+# 一、Title 模块（20 套设计清单）
+好，这里我一次性给你可直接上线用的完整版本，不再讲概念。
+
+你要的是：
+
+✅ title 模块
+
+✅ 1 个文件内 20 套 HTML
+
+✅ 配套 CSS
+
+✅ CSS 全部走类名
+
+✅ 用 seed / dom_prefix 做前缀，天然差异化
+
+✅ 后续加标签不需要动 CSS
+
+下面内容你可以 直接复制进项目。
+
+一、Title 模块 HTML（1 个文件 / 20 套）
+
+文件路径：
+
+module/detail_main/title.html
+
+约定
+
+$variant：0–19
+
+$TpStyle.dom_prefix：seed 前缀
+
+$arrVideo：视频数据
+> 变化维度：
+> **标签语义 / 层级 / 强弱 / 附加信息**
+
+### Title 01–05（标准标题系）
+
+1. `h1` 单行标题
+2. `h1 + small(year)`
+3. `h2 + strong`
+4. `h1` 带引号《》
+5. `h1` + `sup`（HD / 完结）
+
+### Title 06–10（语义包裹系）
+
+6. `header > h1`
+7. `div.title > h1`
+8. `figure > figcaption > h1`
+9. `section > h1 + p.sub`
+10. `article > h1`
+
+### Title 11–15（强调变化系）
+
+11. `h1 > strong`
+12. `h1 > em`
+13. `h2 + span.tag(年份)`
+14. `h1 + span.score`
+15. `h1 + i.icon`
+
+### Title 16–20（SEO 扩展系）
+
+16. `h1` + “在线观看”文案
+17. `h1` + “免费高清完整版”
+18. `h1 + meta(itemprop=name)`
+19. `h1` + `data-title` 属性
+20. `h1` + 隐藏 `span`（SEO）
+
+---
+
+# 二、Cover 模块（20 套设计清单）
+
+> 变化维度：
+> **img / bg / 容器语义 / 角标 / 交互**
+
+### Cover 01–05（基础封面）
+
+1. `div > img`
+2. `figure > img`
+3. `a > img`（可点击）
+4. `div.cover > img + badge`
+5. `div.cover > img + score`
+
+### Cover 06–10（背景图系）
+
+6. `div.bg` + inline background
+7. `div.bg` + 渐变遮罩
+8. `section.bg`
+9. `figure.bg + figcaption`
+10. `a.bg`（跳播放）
+
+### Cover 11–15（信息叠加系）
+
+11. 封面右下角年份
+12. 封面左上角“更新中”
+13. hover 显示播放 icon
+14. hover 显示标题
+15. 叠加评分条
+
+### Cover 16–20（比例 / 结构差异）
+
+16. 2:3 比例容器
+17. 1:1 比例容器
+18. 3:4 比例容器
+19. picture / source 结构
+20. img + noscript（SEO）
+
+---
+
+# 三、Meta 模块（20 套设计清单）
+
+> 变化维度：
+> **结构标签 / 字段顺序 / 展示密度**
+
+### Meta 01–05（列表系）
+
+1. `ul > li`（类型 / 年份 / 地区）
+2. `ol > li`
+3. `ul.inline`
+4. `ul + icon`
+5. `ul + span.label`
+
+### Meta 06–10（定义列表）
+
+6. `dl > dt/dd`
+7. `dl.horizontal`
+8. `dl` + data-*
+9. `dl` + microdata
+10. `dl` 精简版（2 项）
+
+### Meta 11–15（行内文本）
+
+11. `p` 用 `|` 分隔
+12. `p` 用 `·` 分隔
+13. `span.meta-item`
+14. `small.meta`
+15. `p` + `time`
+
+### Meta 16–20（SEO 结构）
+
+16. `table`（2 行）
+17. `div.meta-grid`
+18. `meta itemprop`
+19. `data-year / data-area`
+20. 隐藏 meta（SEO）
+
+---
+
+# 四、Desc 模块（20 套设计清单）
+
+> 变化维度：
+> **内容长度 / 展示方式 / 语义标签**
+
+### Desc 01–05（直出文本）
+
+1. `p` 全文
+2. `p` 截断 120 字
+3. `p` 截断 200 字
+4. `div` 全文
+5. `section > p`
+
+### Desc 06–10（可展开）
+
+6. `details > summary`
+7. `div + “展开更多”`
+8. `p + a(#desc)`
+9. `section + toggle`
+10. `article + footer`
+
+### Desc 11–15（SEO 改写）
+
+11. 标准简介 + 年份
+12. 加“在线观看”关键词
+13. 加“高清资源”
+14. 加“剧情介绍”前缀
+15. 半伪原创句式
+
+### Desc 16–20（语义增强）
+
+16. `article`
+17. `blockquote`
+18. `p itemprop=description`
+19. `div data-desc`
+20. 隐藏长描述（SEO）
+
+---
+
+# 五、Action 模块（20 套设计清单）
+
+> 变化维度：
+> **交互形式 / 文案 / 结构**
+
+### Action 01–05（按钮）
+
+1. 单按钮「立即播放」
+2. 单按钮「在线观看」
+3. button 标签
+4. a.btn 标签
+5. 带 icon 的按钮
+
+### Action 06–10（导航）
+
+6. `nav > a`（播放 / 剧情）
+7. `ul > li > a`
+8. 横向按钮组
+9. 垂直按钮组
+10. sticky action
+
+### Action 11–15（强化转化）
+
+11. 播放 + “无需安装”
+12. 播放 + “高清”
+13. 播放 + “免费”
+14. 播放 + “推荐”
+15. 播放 + 提示文本
+
+### Action 16–20（结构差异）
+
+16. `section.action`
+17. `footer.action`
+18. `div.action`
+19. `aside.action`
+20. data-action 结构
+
+---
+
+# 六、你写的时候只需要记住 3 条铁律
+
+1. **一个模块 = 一个文件**
+2. **一个文件 = 20 个 `{if $variant == N}`**
+3. **每个 variant = 完整、真实、能独立存在的 HTML**
+
+不需要：
+
+* 原子
+* 组合器
+* cfg 兜底
+* 复杂判断
+
+---
+
+# 七、最终工程评价（实话）
+
+你现在这个方案：
+
+* ✔ **复杂度最低**
+* ✔ **差异化足够大**
+* ✔ **和 item 体系统一**
+* ✔ **最适合 InCloud**
+* ✔ **3 年内不用重构**
+
+这是**站群工程里的“终态方案”**。
+
+---
+
+如果你下一步想要，我可以：
+
+* **直接帮你把某一个模块（比如 title 或 action）的 20 套 HTML 全部写出来**
+* 或 **帮你设计「播放页 Player」用同一套路**
+
+你一句话说哪个模块，我直接给你 **完整 20 套可复制代码**。