V体育 · H5

入口后台管理切换 PC →

未登录

🇺🇸 🇨🇦 🇲🇽 2026世界杯 · 决战美加墨

竞猜赢50万

投票预测总冠军，猜中瓜分奖池 · 全民皆赢

进行中

0 6 天

1 6 时

3 5 分

2 3 秒

活动时间

6.11-7.20

活动对象

全部会员

活动场馆

全场馆

📢

📝 活动内容

投票预测 2026 世界杯总冠军，猜中瓜分奖池 + 抽大奖；未猜中也可获得普照奖，全民皆赢！完成下方任务获取投票次数，每人可对多支球队投票。奖池与规则以活动公示为准。

🎟 获取票数

🎁

登录赠送

登录后领取今日票数

🎟 +1

0 / 1

未登录

💳

充值赠送

今日累计：¥--

进行中

⚽

投注赠送

今日累计：¥--

进行中

⚽ 赛事球队

💰 奖池分配

总奖池

¥500,000人民币

示意 · 总奖池 GIF

🏆 冠军竞猜 · 猜中瓜分 ¥200,000

🎁 幸运抽奖 ¥150,000

☀️ 普照奖（未猜中） ¥150,000

示意 · 明细静态图

📋 活动规则

1. 用户通过「登录赠送 / 充值赠送次数 / 投注赠送次数」获取投票次数；
2. 在活动期内对心仪球队投票，预测 2026 世界杯总冠军；
3. 决赛结束后，猜中用户按票数比例瓜分「猜中瓜分」奖池；未猜中用户可参与普照奖分配；
4. 同一用户可对多支球队投票，每投 1 票消耗 1 次投票次数；
5. 活动解释权归 V体育所有，最终规则以官方公告为准。

PRD · 中站 H5 对照

竞猜奖池 · H5 PRD（获取票数 / 登录赠送 / 充值赠送 / 投注赠送 / 领取明细 / 赛事球队 / 我投注的球队）

1. 页面加载优化

涉及端口：PC、H5、APP（昼夜模式统一）

点击活动进入详情页后，页面加载期间默认使用统一的黑色（#000000）背景作为加载背景，待活动数据及页面资源加载完成后，再渲染页面内容。

加载态仅展示黑底，不提前露出未就绪的活动内容，避免白屏闪烁与素材跳动。

2. 页面顶部 Banner

配置说明

PC Banner：后台上传，必填。
H5 Banner：后台上传，必填。

展示规则

PC 端展示 PC Banner。
H5 端展示 H5 Banner。
Banner 宽度 100% 展示，高度按图片原比例自适应。

3. 竞猜进行时间（倒计时）

展示规则

活动进行中时，页面展示活动倒计时。

展示内容

进行中：XX天 XX时 XX分 XX秒

倒计时规则

倒计时根据活动结束时间实时计算。
倒计时每秒刷新一次。
时间格式固定为：天 / 时 / 分 / 秒。
不足两位数时，前面补 0。

例子：

06天 08时 09分 05秒
00天 01时 02分 03秒

展示逻辑

活动未开始

进行中：00天 00时 00分 00秒

活动已结束

进行中：00天 00时 00分 00秒

倒计时停止，不再刷新。

页面刷新 / 前后台

页面保持打开：倒计时无需用户手动刷新；应每秒自动更新剩余时间。
重新进入页面：应根据当前活动状态重新获取最新剩余时间并展示，不使用本地缓存时间。
切到后台再返回（如切换 App、浏览器标签页）：应重新同步最新剩余时间，避免因页面挂起导致倒计时不准确。

4. 公告（跑马灯）

展示规则

根据后台配置的公告内容进行展示。
按后台配置的排序升序依次播放。
仅展示状态为启用的公告。
公告采用从右向左滚动的方式播放。
多条公告之间的间距以 UI 设计稿为准。
当前轮所有公告播放完成后，根据后台配置的重新播放间隔（秒）暂停，再从第一条公告开始循环播放；间隔为 0 则无停顿立即重播。
若后台仅配置一条公告，则循环播放该公告（同样遵守重新播放间隔）。
若后台未配置启用的公告，则不展示跑马灯区域。

后台「公告文案」可配：启用开关、排序、内容、重新播放间隔。例：3 条启用公告播完一轮后，等待 X 秒再从第 1 条重播。

5. 活动内容 · 活动规则

模板：竞猜奖池模板（PC / H5 / APP 同源逻辑）

展示规则

非必填：活动内容、活动规则均为非必填项；后台可不配置。
空则隐藏：若后台未配置对应模块（无有效文案/图片），前端整块隐藏（含标题），不占用页面空间。
区域背景：前端采用固定背景样式展示（非后台上传底图）。
内容来源：后台输入文字（亦可配图片块；文本与图片互斥按后台录入）。
文案默认左对齐，支持自动换行。
内容区域宽度固定，高度随文案自适应撑开。
支持页面纵向滚动查看全部内容。

联调要点：后台「活动内容 / 活动规则」保存后写入配置； PC 用 Web 图、H5/APP 用 APP 图；空数组或无可渲染块 → 模块 display:none。

宽屏：H5 原型居中，PRD 直接显示在旁边对照；真机/窄屏仅看原型，不展示 PRD。

6. 获取票数（H5）

展示规则

获取票数方式包括：登录赠送、充值赠送、投注赠送。

根据后台配置展示对应的获取票数方式：

配置 1 种，则展示 1 个 Tab；
配置 2 种，则展示 2 个 Tab；
配置 3 种，则展示 3 个 Tab。
未配置的获取票数方式不展示。 （三种均关闭时，整块「获取票数」区域隐藏，含 Tab 导航与内容区。）

Tab 导航

多个 Tab 平均分配导航栏宽度，保持等宽展示（1 个占满一行；2 个各 50%；3 个各约 33%）。
点击 Tab 可切换查看对应的获取票数内容。未登录也可自由切换三个 Tab 浏览规则与档位；仅「去登录 / 去充值 / 去投注 / 领取」等操作才要求登录。
默认选中从左到右第一个已配置的 Tab，并展示对应内容。
展示顺序与后台配置一致，从左到右： 登录赠送 → 充值赠送 → 投注赠送（仅展示已开启项，相对顺序不变）。

Tab 内容区高度

Tab 内容区域高度根据当前 Tab的内容自适应展示。
不同 Tab 之间高度无需保持一致 （与 PC 多卡并排等高规则不同，H5 为单栏切换）。

联调要点：后台「获取竞猜次数」各方式「是否开启」控制 Tab 显隐；前端按开启数量设置 grid-template-columns: repeat(n, 1fr)；切换 Tab 只切换内容面板，高度随面板内容变化。

例：仅开启「充值赠送 + 投注赠送」→ 导航 2 个等宽 Tab，顺序为「充值赠送 | 投注赠送」，默认选中「充值赠送」。

6.1 登录赠送

字段说明

今日已领 +X：X 表示本次登录赠送的票数，由后台配置。
领取进度：X/Y
X：今日已领取票数。
Y：今日登录可领取总票数（后台配置）。
示例：未登录 0/5；已登录 X/Y。
领取明细：展示用户今日登录赠送记录，包括领取时间及获得票数。

展示规则

Logo为可选展示项；若未配置 Logo，则隐藏 Logo，不占用页面空间。
名称固定展示为「登录赠送」。
提示语展示后台配置内容，支持自动换行。

活动未开始

未登录、已登录用户统一展示以下内容。
提示文案统一展示：活动未开始。
进度条左侧展示本次登录可获得票数。
进度条右侧展示领取进度（如：0/Y，Y 为后台配置的今日登录可领取总票数）。
按钮统一展示为未开始，按钮置灰，不可点击。
不支持登录赠送及相关操作。
领取明细仅支持查看，不新增领取记录。

活动进行中

未登录：

提示文案展示：登录后领取今日票数。
进度条左侧展示本次登录可获得票数。
进度条右侧展示领取进度（如：0/5）。
按钮展示为去登录。
点击去登录，跳转登录页面（无额外提示）。

已登录：

提示文案展示：今日已领 +X（X 为后台配置的登录赠送票数）。
进度条左侧展示本次登录获得票数。
进度条右侧展示领取进度（如：X/Y）。
按钮展示为已完成，不可点击。
登录成功后，右侧领取明细新增一条登录赠送记录。

活动已结束

提示文案统一展示：活动已结束（登录 / 未登录相同）。
进度条展示活动结束时的领取结果。
按钮统一展示为已结束，不可点击。
不支持登录赠送及相关操作。
领取明细仅支持查看历史记录，不支持新增记录。

联调：活动阶段以后台「活动上架时间 + 活动进行时间」为准；未上架/未到开始时间 → 未开始；进行窗口内 → 进行中；超过结束时间 → 已结束。保存后同步 PC/H5。

6.2 充值赠送

展示规则

名称固定展示为：充值赠送。
提示语展示后台配置内容，支持自动换行。
展示今日累计充值金额，格式：今日累计：¥XX。
金额展示规则（前端统一）： 所有金额（今日累计、档位门槛、下一档提示、toast 等）均 保留两位小数，整数部分每 三位用千分位分隔符「,」隔开。例：¥1,234.50、¥100.00、¥1,000.00；无数据时展示 ¥--（不加小数）。

活动未开始

未登录、已登录用户统一展示以下内容。
提示文案统一展示：未开始（同时展示后台配置的提示文案与档位数据）。
今日累计充值金额展示为：¥--。
各充值档位均展示为未开始状态（门槛金额仍按两位小数 + 千分位展示）。
按钮统一展示为未开始，按钮置灰，不可点击。
不支持充值赠送及相关操作（不可跳转充值、不可新增领取明细）。

活动进行中 · 前端交互

未登录：

今日累计充值金额展示为：¥--。
按钮统一展示为去登录；点击跳转登录页面。
展示后台配置的充值档位列表；不展示个人完成进度（不标记已达成 / 进行中）。

已登录：

今日累计充值金额根据接口实时展示，格式： 今日累计：¥X,XXX.XX（两位小数 + 千分位）。
根据后台配置的充值档位展示对应门槛（如：¥100.00、¥500.00、¥1,000.00）。
当前未完成档位，状态展示为：进行中。
已完成档位，状态展示为：已达成。
当前进行中的档位进度文案展示：下一档 ¥XX（XX 为下一档充值金额，两位小数 + 千分位）。
当前进行中的档位按钮展示为：去充值；点击跳转充值页面。
完成当前档位后，自动更新为已达成，并切换下一档位为进行中。
当所有充值档位全部完成后，所有档位均展示为已达成，并给提示；「去充值」按钮依然保留。
每完成一个充值档位，领取明细新增一条「充值赠送」记录。

活动已结束

未登录、已登录用户统一展示以下内容（含后台配置的提示文案与档位数据）。
提示文案统一展示：已结束。
按钮统一展示为已结束，按钮置灰，不可点击。
不支持充值赠送及相关操作。
已完成的充值档位保持已达成状态；未完成档位保持活动结束时的状态，不再变化。未登录无个人进度时，仍展示后台档位配置，状态不展示个人达成结果。
领取明细仅支持查看历史记录，不支持新增记录。

联调：充值档位、提示文案、开关、Logo以后台「获取竞猜次数 · 充值赠送」为准；活动阶段与 6.1 相同；金额展示统一两位小数 + 千分位。保存后同步 PC/H5。

6.3 投注赠送

规则与 6.2 充值赠送一致，差异仅为：统计对象改为「累计有效投注」、名称/按钮/领取明细渠道文案改为「投注赠送 / 去投注」。

展示规则

名称固定展示为：投注赠送。
提示语展示后台配置内容，支持自动换行。
展示今日累计有效投注金额，格式：今日累计：¥XX。
金额展示规则（前端统一，与 6.2 相同）： 所有金额（今日累计、档位门槛、下一档提示、toast 等）均 保留两位小数，整数部分每 三位用千分位分隔符「,」隔开。例：¥1,234.50、¥500.00、¥5,000.00；无数据时展示 ¥--（不加小数）。
档位条件文案格式：累计有效投注 ≥ ¥X,XXX.XX （门槛与赠送次数以后台「投注赠送」档位表为准）。

活动未开始

未登录、已登录用户统一展示以下内容。
提示文案统一展示：未开始（同时展示后台配置的提示文案与档位数据）。
今日累计有效投注金额展示为：¥--。
各投注档位均展示为未开始状态（门槛金额仍按两位小数 + 千分位展示）。
按钮统一展示为未开始，按钮置灰，不可点击。
不支持投注赠送及相关操作（不可跳转投注、不可新增领取明细）。

活动进行中 · 前端交互

未登录：

今日累计有效投注金额展示为：¥--。
按钮统一展示为去登录；点击跳转登录页面。
展示后台配置的投注档位列表；不展示个人完成进度（不标记已达成 / 进行中）。

已登录：

今日累计有效投注金额根据接口实时展示，格式： 今日累计：¥X,XXX.XX（两位小数 + 千分位）。
根据后台配置的投注档位展示对应门槛（如：¥500.00、¥2,000.00、¥5,000.00）。
当前未完成档位，状态展示为：进行中。
已完成档位，状态展示为：已达成。
当前进行中的档位进度文案展示：下一档 ¥XX（XX 为下一档投注金额，两位小数 + 千分位）。
当前进行中的档位按钮展示为：去投注；点击跳转投注页面（跳转地址以后台配置为准）。
完成当前档位后，自动更新为已达成，并切换下一档位为进行中。
当所有投注档位全部完成后，所有档位均展示为已达成，并给提示；「去投注」按钮依然保留。
每完成一个投注档位，领取明细新增一条「投注赠送」记录。

活动已结束

未登录、已登录用户统一展示以下内容（含后台配置的提示文案与档位数据）。
提示文案统一展示：已结束。
按钮统一展示为已结束，按钮置灰，不可点击。
不支持投注赠送及相关操作。
已完成的投注档位保持已达成状态；未完成档位保持活动结束时的状态，不再变化。未登录无个人进度时，仍展示后台档位配置，状态不展示个人达成结果。
领取明细仅支持查看历史记录，不支持新增记录。

联调：投注档位、提示文案、开关、Logo、场馆/跳转以后台「获取竞猜次数 · 投注赠送」为准；活动阶段与 6.1 / 6.2 相同；金额展示统一两位小数 + 千分位。保存后同步 PC/H5。

6.4 领取明细

展示规则

顶部展示累计获得票数及剩余票数。
累计获得 XX 票：展示当前活动累计获得的总票数。
剩余 XX 票：展示当前活动当前剩余可用票数。
用户每获得票数后，累计获得票数及剩余票数实时更新。
用户每完成一次竞猜投票后，剩余票数实时扣减，并同步刷新展示。
累计获得票数仅随获得票数增加，不因投票消耗而减少。
明细列表根据领取时间倒序展示（最新记录排在最前）。

展示格式

时间格式：MM-DD HH:mm（例如：07-29 03:35）。
获得来源根据实际业务展示，例如：登录赠送、充值赠送、投注赠送。
获得票数统一展示为：+X（X 为本次获得票数）。

列表示例：

07-29 03:35　投注赠送　+5
07-29 01:20　充值赠送　+10
07-28 20:18　登录赠送　+5

交互规则

明细默认展示数量及高度按照 UI 设计稿实现。
当明细数据超过展示区域时，支持列表区域上下滚动查看。
滚动过程中，顶部累计获得票数及剩余票数固定展示，不随列表滚动。

空状态

未登录或暂无领取记录时，列表展示：暂无数据。

入口：获取票数区域「剩余票数 / 明细」。打开后顶部汇总固定，下方列表可滚动。

7. 赛事球队（H5）

展示规则

赛事球队根据后台配置展示。
排序规则按照后台配置排序，排序值越小越靠前，自上而下依次展示。
前端按照从上到下的顺序依次展示。
每行固定展示 1 个赛事球队。

默认展示

默认展示 6 行（共 6 个赛事球队）。
当赛事球队数量 ≤6 个时， 不展示「查看更多」按钮。
当赛事球队数量＞6 个时，底部展示查看更多按钮。

查看更多 / 收起

点击查看更多按钮，展开展示全部赛事球队。
展开后，按钮文案切换为收起。
点击收起按钮，恢复默认展示 6 行。
展开、收起过程中，赛事球队排序保持不变，不重新排序。

列表卡片字段说明

每支球队一张卡片，字段含义如下：

队名 / 图标：展示后台配置的队名与 APP/H5（或 Web）图标；未配图标可用默认占位。
已投 X / Y：
- X（左侧）：当前登录用户对该队的已投票数。未登录时固定展示 0。
- Y（右侧）：该队当前总票数 = 后台配置的初始票数（假数据） + 真实用户累计投票。用于展示热度，避免开赛冷场。
示例：已投 2 / 132,564 表示「我投了 2 票，该队共 132,564 票」。
进度条 + 百分比：表示该队总票数占全部启用球队总票之和的占比，公式：round(该队总票 / 全部球队总票 × 100)。该队总票为 0 时展示 0%；有票但占比不足 1% 时，进度条至少展示 1% 便于辨认。
按钮： 未对该队投过票展示投票；已投过展示再投。点击后走投票确认（需登录、活动进行中、票数充足）。

联调：球队列表、图标、初始票数、排序、启用状态以后台「竞猜球队」为准； H5 单列布局，默认 slice(0, 6)；保存后同步 PC/H5。

7.1 我投注的球队（H5）

触发方式

用户点击「我投注的球队」入口后，从页面底部弹出弹窗。
弹窗高度按照 UI 设计稿展示。
点击页面遮罩区域或右上角关闭按钮，关闭弹窗。

页面展示 · 顶部

已选 X 支：已投票球队数量。
累计投出 X 票：当前活动累计投出票数。
数据根据接口实时返回。

球队列表

根据用户已投票球队展示列表。
排序规则：按照首次投票时间倒序展示（最新投票球队排在最前）。
每条数据展示：

球队 Logo
球队名称
已投票数（如：我已投 3 票）
【再投 1 票】按钮

当数据超过页面展示区域时，支持列表上下滑动。

空状态

无数据时展示：暂无投票记录。

再投 1 票

点击【再投 1 票】按钮：

投票成功

满足以下条件：

活动进行中
剩余票数 ≥ 1

执行成功后：

当前球队「我已投 X 票」实时 +1。
顶部累计投出票数实时 +1。
页面剩余票数实时 -1。
球队实时票数同步刷新。
当前弹窗不关闭。

投票失败

以下情况不可投票，并对应提示：

剩余票数不足 → 剩余票数不足
活动已结束 → 活动已结束
接口异常 → 投票失败，请稍后重试

按钮规则

按钮文案统一：再投 1 票。
按钮点击一次，仅消耗 1 票。
连续点击时：以上一次接口返回结果为准。接口未返回前，按钮进入 Loading 状态，不可重复点击；接口返回成功后恢复可点击状态。

页面刷新

投票成功后，以下数据实时刷新：

当前球队票数
已选球队数量（新增球队时实时 +1）
累计投出票数
剩余票数
我的投注球队列表

用户可对同一支球队重复投票，也可同时对多支不同球队投票，投票次数仅受剩余票数限制。

7.2 竞猜结果（并入「我投注的球队」）

不再单独提供「我的奖励」弹窗；结果展示在「我投注的球队」列表行内。
后台「同步到列表」仅运营核对，会员端不展示结果（可提示「结果核对中」）。
后台「同步给会员」后：对应球队行显示猜中/未中；猜中可展示奖项/金额说明（红利发放，本页仅展示）。
已同步结果的球队行，右侧「再投」改为结果标签。