PRDv1.0 · 2026.03.25

StrivoBr 产品需求文档

StrivoBr 是一款面向巴西及全球市场的体育赛事数据统计与博彩赔率展示平台，集赛事跟踪、赔率对比、下注试玩、娱乐游戏于一体。本文档描述各功能模块的需求与规格。

MODULE 01

项目概览

产品名称StrivoBr

定位体育赛事数据统计 + 博彩赔率对比 + 游戏娱乐平台

目标用户巴西及全球对体育赛事和博彩感兴趣的用户

支持语言简体中文（🇨🇳）、葡萄牙语（🇧🇷）

核心页面

首页 — Hero 横幅 + 体育分类入口 + 赛事列表
体育分类页 — 按运动项目浏览赛事
赛事详情页 — 比赛信息、赔率对比、统计数据
免费试玩页 — 积分下注演示系统
老虎机页 — 游戏列表展示
真人视讯页 — 游戏预告展示（即将开放）

MODULE 02

用户认证模块

2.1 登录 / 注册

入口顶部导航栏「登录」按钮；首页 Hero 区「免费试玩」按钮

交互方式全屏遮罩弹窗，分两步完成

步骤一 — 邮箱输入

用户输入电子邮件地址
系统验证邮箱格式，不合规则提示错误
点击「发送验证码」后生成一个 6 位数字 OTP
1 秒模拟发送延迟后进入步骤二

步骤二 — 验证码确认

显示验证码发送目标邮箱
演示模式下在界面内明文展示 OTP 供用户使用
用户输入 6 位验证码，与系统生成码比对
验证通过后完成登录，同时自动完成账号注册
支持「重新发送」和「修改邮箱」操作

首次登录奖励首次登录/注册自动赠送 10,000 试玩积分，后续登录不再重复赠送

登录态持久化登录状态存储于 localStorage，关闭浏览器后再次访问仍保持登录

退出登录顶部导航栏用户信息区点击退出图标，清除本地登录状态

2.2 登录态展示

未登录状态顶部导航栏右侧显示「登录」按钮

已登录状态

显示用户邮箱（超长截断显示）
若已注册（已获得积分），额外显示积分余额徽章，点击跳转试玩页
显示退出登录按钮

MODULE 03

首页

3.1 顶部导航栏（全局）

Logo左侧展示 StrivoBr 品牌 Logo，点击回到首页

主导航菜单

体育 → 首页
赌场（下拉菜单）→ 老虎机子项
真人视讯 → 真人视讯页

语言切换中文 / PT 双语切换，图标标识，高亮当前语言，实时切换全站文字

用户区域右侧根据登录状态显示登录按钮或用户信息

移动端折叠为汉堡菜单，点击展开右侧抽屉式导航面板，包含所有菜单项、语言切换及登录/退出

样式深色背景固定在顶部，含模糊毛玻璃效果，z-index 最高层

3.2 Hero 横幅区

背景巴西体育场景背景图，叠加从左到右渐变遮罩

内容标题文案、副标题描述、3 项核心数据统计（赛事/周、博彩平台数量、运动项目数）

CTA 按钮「免费试玩」按钮，未登录时触发登录弹窗，已登录时跳转试玩页

积分状态已登录且已注册用户在按钮副文案处显示当前积分余额；未注册用户显示注册赠送提示

3.3 体育分类区

展示形式6 张卡片网格，桌面 3 列、平板 2 列、手机 1 列

支持运动足球、篮球、排球、综合格斗（MMA）、网球、一级方程式

卡片内容运动场景配图、分类名称、赛事数量、标签（热门/NBA等）、对应图标

交互点击任意卡片直接跳转对应体育分类页，无需登录

3.4 赛事列表区

展示分区桌面端左右两列分别展示「直播中」和「即将开赛」；移动端顶部 Tab 切换

直播赛事标注红点脉冲动画 + 当前比赛时间，显示实时比分

即将开赛显示开赛时间

赔率市场切换每张赛事卡片顶部可切换 3 个盘口：胜负平(1X2)、亚盘让球、大小球

赔率按钮点击任意赔率按钮跳转对应赛事详情页，无需登录

包含运动足球（Brasileirão、Copa do Brasil、Champions League）、篮球（NBB）、MMA（UFC）、网球（Roland Garros）

3.5 页脚

内容Logo、版权信息、条款/隐私/联系我们链接

移动端垂直堆叠布局，链接居中显示

MODULE 04

体育分类页

路由/category/[sport]，支持 futebol / basquete / volei / mma / tenis / formula1

Hero 区运动类型场景大图背景、标题、赛事数量统计、快速筛选 Tab

筛选功能

按状态筛选：全部 / 直播中 / 即将开赛
按联赛筛选：对应运动的主要联赛列表
搜索框：按队伍名称实时筛选

赛事卡片展示联赛名称、比赛状态（直播/即将/已结束）、两队名称与比分/时间、胜负平赔率

点击行为点击赛事卡片跳转赛事详情页

移动端适配英雄区高度/字体/间距全部响应式；卡片网格手机 1 列、平板 2 列、桌面 3 列

访问限制无需登录，任何用户可直接访问

MODULE 05

赛事详情页

5.1 比赛头部信息

路由/event/[id]

返回导航移动端展示左箭头返回按钮，桌面端保持页面标题区域简洁

联赛信息联赛名称 + 对应运动图标

直播状态红点脉冲 + 当前比赛时间标签

比赛主体主客队名称、队徽占位图、实时比分（直播中显示大号数字）；未开赛显示 vs 及开赛时间

场馆/时间场馆名称 + 比赛日期

移动端适配头部元素字体、间距、布局全部响应式

5.2 赔率对比模块

功能说明汇聚多家博彩平台赔率，以表格形式对比展示

市场切换支持多个盘口市场：胜负平(1X2)、亚盘让球、双重机会、大小球，以及更多扩展市场（上半场、正确比分、单双等）

标注逻辑各列中最高赔率标注绿色「最佳赔率」，最低赔率标注橙色，便于用户一眼识别

平台数据展示约 10 家主流博彩平台（Bet365、Betano、1xBet 等），每行含平台名、各盘口赔率值、更新时间

展开/收起默认展示主要市场，可点击「查看更多赔率」展开扩展市场列表

免责声明底部显示赔率实时变动提示及理性投注声明

5.3 比赛统计模块

统计项目控球率、射正次数、角球、犯规、黄牌（共 5 项）

展示方式主客双色进度条，两侧显示具体数值

5.4 近 5 场战绩模块

展示内容主队和客队各自最近 5 场比赛结果

视觉标识胜（绿色 W）、平（灰色 D）、负（红色 L）

图例说明底部含颜色图例说明

MODULE 06

免费试玩模块

6.1 页面概述

路由/demo

功能定位使用虚拟积分体验真实赔率下注流程的演示功能，积分无真实货币价值

访问限制无需登录，任何用户均可访问

积分提示未注册用户顶部展示赠送积分引导横幅

6.2 积分系统

初始积分首次登录/注册自动赠送 10,000 积分

积分扣除每次下注时从余额中扣除对应金额

积分增加开奖结果为「赢」时，原始本金 + 利润积分返还至余额

余额展示页面右上角实时显示当前积分余额，已登录且注册的用户在顶部导航栏也可见

持久化积分数据存储于 localStorage，刷新页面不丢失

6.3 赔率市场展示

演示赛事固定演示赛事：Real Madrid vs Man City（欧冠半决赛）

支持市场共 8 个盘口市场：

全场独赢 (1X2)
亚盘让球
全场大小球 (2.5球)
两队均进球 (BTTS)
上半场 1X2
上半场大小球 (0.5球)
平局退款 (DNB)
角球大小 (9.5)

选择交互点击某个赔率选项高亮选中，再次点击取消选中；选中后在桌面右侧注单区自动展示

6.4 下注单（Bet Slip）

桌面端右侧栏固定展示下注单组件

移动端底部悬浮按钮显示已选投注，点击弹出半屏浮层展示完整下注单

快捷金额4 个预设金额按钮（100 / 500 / 1000 / 2000 积分）

自定义金额支持手动输入任意金额

预计赢取实时计算并显示预计赢取总额（含本金）

确认下注

点击「确认下注」扣除积分，注单进入待开奖状态
下注成功后显示成功提示
积分不足时禁用按钮并提示

6.5 下注记录

Tab 切换「待开奖」和「历史记录」两个 Tab

待开奖

展示所有待揭晓注单
每张注单显示：市场名、所选选项、赔率、下注金额、下注时间
点击「揭晓结果」按钮模拟开奖，以赔率隐含概率随机决定胜负
开奖后注单移入历史记录

历史记录

展示所有已开奖注单及 5 条预设历史样本数据
赢/输状态用绿色/红色标签区分
赢则显示利润金额

6.6 演示赛事头部

内容参赛队伍、赛事信息、实时比分、比赛时间、场馆、控球率与角球数据概览

样式直播中状态红点脉冲动画标识

MODULE 07

老虎机页

路由/casino/slots

游戏列表展示 16 款知名老虎机游戏，包含游戏封面图、名称、供应商、RTP、游戏标签（热/新/奖池）

筛选功能

全部 / 热门 / 最新 / 经典 / 累积奖池 5 个分类 Tab
搜索框：按游戏名称或供应商名称实时过滤

游戏卡片交互

鼠标悬停展示「即将上线」浮层遮罩
游戏封面图 hover 时微缩放效果

空状态搜索无结果时显示「没有找到相关游戏」提示

供应商覆盖Pragmatic Play、NetEnt、Novomatic、Play n GO、Push Gaming、Microgaming、Relax Gaming

MODULE 08

真人视讯页

路由/live-casino

当前状态预告展示，游戏功能尚未开放（「即将开放」状态）

游戏分类展示4 个游戏类型卡片：真人百家乐、真人轮盘、真人 21 点、真人扑克

卡片交互hover 显示「即将上线」浮层提示

即将开放区块底部大型 CTA 区块，展示「即将开放」说明、平台特色标签（HD 直播、24/7 全天候等）

MODULE 09

多语言支持

支持语言简体中文（zh）、巴西葡萄牙语（pt）

切换方式顶部导航栏语言切换按钮，实时生效，无需刷新页面

覆盖范围

全局导航（Header / Footer）
首页 Hero 区、分类区、赛事列表区
体育分类页、赛事详情页（含统计、近况）
赔率对比模块（全部市场名称、选项名称）
免费试玩页（所有 UI 文字、市场名、选项名、历史记录）
老虎机页、真人视讯页
登录/注册弹窗

翻译管理所有翻译字符串集中维护于 lib/translations.ts，按模块分组

语言持久化切换语言通过 Context 全局同步，页面跳转后语言选择保持

MODULE 10

界面与交互规范

10.1 视觉风格

主色调品牌绿色 #22c55e（按钮、高亮、强调）

背景色深海军蓝 #050d1a（全站主背景）

卡片背景#0d1b2e，轻微边框 border-white/5

字体色白色为主文本，灰色（gray-400/500）为辅助文本

风格定位沉浸式深色主题，运动/博彩行业风格

10.2 响应式布局

断点移动端 < md（768px）、平板 md~lg、桌面 > lg

导航栏桌面横向导航，移动端折叠为抽屉式侧边菜单

内容区桌面多列网格，移动端单列垂直堆叠

试玩页桌面左内容右侧边栏布局；移动端底部悬浮注单栏 + 半屏弹出

赛事列表桌面左直播右即将；移动端 Tab 切换

10.3 通用交互规范

可点击元素所有可交互元素必须有鼠标手型（cursor-pointer）

按钮防换行所有按钮添加 whitespace-nowrap，禁止文字换行

动画效果

直播状态：红点脉冲动画（animate-pulse）
卡片 hover：轻微缩放 scale-[1.02] + 边框高亮
图片 hover：内部微缩放 scale-105
箭头 hover：水平位移 translate-x-1

弹窗背景遮罩 + 毛玻璃模糊，点击遮罩区域关闭，含关闭按钮

加载状态按钮内 loading 时显示旋转图标

返回网站首页

PRDv1.0 · 2026.03.25

StrivoBr 产品需求文档

MODULE 01

项目概览

产品名称StrivoBr

定位体育赛事数据统计 + 博彩赔率对比 + 游戏娱乐平台

目标用户巴西及全球对体育赛事和博彩感兴趣的用户

支持语言简体中文（🇨🇳）、葡萄牙语（🇧🇷）

核心页面

首页 — Hero 横幅 + 体育分类入口 + 赛事列表
体育分类页 — 按运动项目浏览赛事
赛事详情页 — 比赛信息、赔率对比、统计数据
免费试玩页 — 积分下注演示系统
老虎机页 — 游戏列表展示
真人视讯页 — 游戏预告展示（即将开放）

MODULE 02

用户认证模块

2.1 登录 / 注册

入口顶部导航栏「登录」按钮；首页 Hero 区「免费试玩」按钮

交互方式全屏遮罩弹窗，分两步完成

步骤一 — 邮箱输入

用户输入电子邮件地址
系统验证邮箱格式，不合规则提示错误
点击「发送验证码」后生成一个 6 位数字 OTP
1 秒模拟发送延迟后进入步骤二

步骤二 — 验证码确认

显示验证码发送目标邮箱
演示模式下在界面内明文展示 OTP 供用户使用
用户输入 6 位验证码，与系统生成码比对
验证通过后完成登录，同时自动完成账号注册
支持「重新发送」和「修改邮箱」操作

首次登录奖励首次登录/注册自动赠送 10,000 试玩积分，后续登录不再重复赠送

登录态持久化登录状态存储于 localStorage，关闭浏览器后再次访问仍保持登录

退出登录顶部导航栏用户信息区点击退出图标，清除本地登录状态

2.2 登录态展示

未登录状态顶部导航栏右侧显示「登录」按钮

已登录状态

显示用户邮箱（超长截断显示）
若已注册（已获得积分），额外显示积分余额徽章，点击跳转试玩页
显示退出登录按钮

MODULE 03

首页

3.1 顶部导航栏（全局）

Logo左侧展示 StrivoBr 品牌 Logo，点击回到首页

主导航菜单

体育 → 首页
赌场（下拉菜单）→ 老虎机子项
真人视讯 → 真人视讯页

语言切换中文 / PT 双语切换，图标标识，高亮当前语言，实时切换全站文字

用户区域右侧根据登录状态显示登录按钮或用户信息

移动端折叠为汉堡菜单，点击展开右侧抽屉式导航面板，包含所有菜单项、语言切换及登录/退出

样式深色背景固定在顶部，含模糊毛玻璃效果，z-index 最高层

3.2 Hero 横幅区

背景巴西体育场景背景图，叠加从左到右渐变遮罩

内容标题文案、副标题描述、3 项核心数据统计（赛事/周、博彩平台数量、运动项目数）

CTA 按钮「免费试玩」按钮，未登录时触发登录弹窗，已登录时跳转试玩页

积分状态已登录且已注册用户在按钮副文案处显示当前积分余额；未注册用户显示注册赠送提示

3.3 体育分类区

展示形式6 张卡片网格，桌面 3 列、平板 2 列、手机 1 列

支持运动足球、篮球、排球、综合格斗（MMA）、网球、一级方程式

卡片内容运动场景配图、分类名称、赛事数量、标签（热门/NBA等）、对应图标

交互点击任意卡片直接跳转对应体育分类页，无需登录

3.4 赛事列表区

展示分区桌面端左右两列分别展示「直播中」和「即将开赛」；移动端顶部 Tab 切换

直播赛事标注红点脉冲动画 + 当前比赛时间，显示实时比分

即将开赛显示开赛时间

赔率市场切换每张赛事卡片顶部可切换 3 个盘口：胜负平(1X2)、亚盘让球、大小球

赔率按钮点击任意赔率按钮跳转对应赛事详情页，无需登录

包含运动足球（Brasileirão、Copa do Brasil、Champions League）、篮球（NBB）、MMA（UFC）、网球（Roland Garros）

3.5 页脚

内容Logo、版权信息、条款/隐私/联系我们链接

移动端垂直堆叠布局，链接居中显示

MODULE 04

体育分类页

路由/category/[sport]，支持 futebol / basquete / volei / mma / tenis / formula1

Hero 区运动类型场景大图背景、标题、赛事数量统计、快速筛选 Tab

筛选功能

按状态筛选：全部 / 直播中 / 即将开赛
按联赛筛选：对应运动的主要联赛列表
搜索框：按队伍名称实时筛选

赛事卡片展示联赛名称、比赛状态（直播/即将/已结束）、两队名称与比分/时间、胜负平赔率

点击行为点击赛事卡片跳转赛事详情页

移动端适配英雄区高度/字体/间距全部响应式；卡片网格手机 1 列、平板 2 列、桌面 3 列

访问限制无需登录，任何用户可直接访问

MODULE 05

赛事详情页

5.1 比赛头部信息

路由/event/[id]

返回导航移动端展示左箭头返回按钮，桌面端保持页面标题区域简洁

联赛信息联赛名称 + 对应运动图标

直播状态红点脉冲 + 当前比赛时间标签

比赛主体主客队名称、队徽占位图、实时比分（直播中显示大号数字）；未开赛显示 vs 及开赛时间

场馆/时间场馆名称 + 比赛日期

移动端适配头部元素字体、间距、布局全部响应式

5.2 赔率对比模块

功能说明汇聚多家博彩平台赔率，以表格形式对比展示

市场切换支持多个盘口市场：胜负平(1X2)、亚盘让球、双重机会、大小球，以及更多扩展市场（上半场、正确比分、单双等）

标注逻辑各列中最高赔率标注绿色「最佳赔率」，最低赔率标注橙色，便于用户一眼识别

平台数据展示约 10 家主流博彩平台（Bet365、Betano、1xBet 等），每行含平台名、各盘口赔率值、更新时间

展开/收起默认展示主要市场，可点击「查看更多赔率」展开扩展市场列表

免责声明底部显示赔率实时变动提示及理性投注声明

5.3 比赛统计模块

统计项目控球率、射正次数、角球、犯规、黄牌（共 5 项）

展示方式主客双色进度条，两侧显示具体数值

5.4 近 5 场战绩模块

展示内容主队和客队各自最近 5 场比赛结果

视觉标识胜（绿色 W）、平（灰色 D）、负（红色 L）

图例说明底部含颜色图例说明

MODULE 06

免费试玩模块

6.1 页面概述

路由/demo

功能定位使用虚拟积分体验真实赔率下注流程的演示功能，积分无真实货币价值

访问限制无需登录，任何用户均可访问

积分提示未注册用户顶部展示赠送积分引导横幅

6.2 积分系统

初始积分首次登录/注册自动赠送 10,000 积分

积分扣除每次下注时从余额中扣除对应金额

积分增加开奖结果为「赢」时，原始本金 + 利润积分返还至余额

余额展示页面右上角实时显示当前积分余额，已登录且注册的用户在顶部导航栏也可见

持久化积分数据存储于 localStorage，刷新页面不丢失

6.3 赔率市场展示

演示赛事固定演示赛事：Real Madrid vs Man City（欧冠半决赛）

支持市场共 8 个盘口市场：

全场独赢 (1X2)
亚盘让球
全场大小球 (2.5球)
两队均进球 (BTTS)
上半场 1X2
上半场大小球 (0.5球)
平局退款 (DNB)
角球大小 (9.5)

选择交互点击某个赔率选项高亮选中，再次点击取消选中；选中后在桌面右侧注单区自动展示

6.4 下注单（Bet Slip）

桌面端右侧栏固定展示下注单组件

移动端底部悬浮按钮显示已选投注，点击弹出半屏浮层展示完整下注单

快捷金额4 个预设金额按钮（100 / 500 / 1000 / 2000 积分）

自定义金额支持手动输入任意金额

预计赢取实时计算并显示预计赢取总额（含本金）

确认下注

点击「确认下注」扣除积分，注单进入待开奖状态
下注成功后显示成功提示
积分不足时禁用按钮并提示

6.5 下注记录

Tab 切换「待开奖」和「历史记录」两个 Tab

待开奖

展示所有待揭晓注单
每张注单显示：市场名、所选选项、赔率、下注金额、下注时间
点击「揭晓结果」按钮模拟开奖，以赔率隐含概率随机决定胜负
开奖后注单移入历史记录

历史记录

展示所有已开奖注单及 5 条预设历史样本数据
赢/输状态用绿色/红色标签区分
赢则显示利润金额

6.6 演示赛事头部

内容参赛队伍、赛事信息、实时比分、比赛时间、场馆、控球率与角球数据概览

样式直播中状态红点脉冲动画标识

MODULE 07

老虎机页

路由/casino/slots

游戏列表展示 16 款知名老虎机游戏，包含游戏封面图、名称、供应商、RTP、游戏标签（热/新/奖池）

筛选功能

全部 / 热门 / 最新 / 经典 / 累积奖池 5 个分类 Tab
搜索框：按游戏名称或供应商名称实时过滤

游戏卡片交互

鼠标悬停展示「即将上线」浮层遮罩
游戏封面图 hover 时微缩放效果

空状态搜索无结果时显示「没有找到相关游戏」提示

供应商覆盖Pragmatic Play、NetEnt、Novomatic、Play n GO、Push Gaming、Microgaming、Relax Gaming

MODULE 08

真人视讯页

路由/live-casino

当前状态预告展示，游戏功能尚未开放（「即将开放」状态）

游戏分类展示4 个游戏类型卡片：真人百家乐、真人轮盘、真人 21 点、真人扑克

卡片交互hover 显示「即将上线」浮层提示

即将开放区块底部大型 CTA 区块，展示「即将开放」说明、平台特色标签（HD 直播、24/7 全天候等）

MODULE 09

多语言支持

支持语言简体中文（zh）、巴西葡萄牙语（pt）

切换方式顶部导航栏语言切换按钮，实时生效，无需刷新页面

覆盖范围

全局导航（Header / Footer）
首页 Hero 区、分类区、赛事列表区
体育分类页、赛事详情页（含统计、近况）
赔率对比模块（全部市场名称、选项名称）
免费试玩页（所有 UI 文字、市场名、选项名、历史记录）
老虎机页、真人视讯页
登录/注册弹窗

翻译管理所有翻译字符串集中维护于 lib/translations.ts，按模块分组

语言持久化切换语言通过 Context 全局同步，页面跳转后语言选择保持

MODULE 10

界面与交互规范

10.1 视觉风格

主色调品牌绿色 #22c55e（按钮、高亮、强调）

背景色深海军蓝 #050d1a（全站主背景）

卡片背景#0d1b2e，轻微边框 border-white/5

字体色白色为主文本，灰色（gray-400/500）为辅助文本

风格定位沉浸式深色主题，运动/博彩行业风格

10.2 响应式布局

断点移动端 < md（768px）、平板 md~lg、桌面 > lg

导航栏桌面横向导航，移动端折叠为抽屉式侧边菜单

内容区桌面多列网格，移动端单列垂直堆叠

试玩页桌面左内容右侧边栏布局；移动端底部悬浮注单栏 + 半屏弹出

赛事列表桌面左直播右即将；移动端 Tab 切换

10.3 通用交互规范

可点击元素所有可交互元素必须有鼠标手型（cursor-pointer）

按钮防换行所有按钮添加 whitespace-nowrap，禁止文字换行

动画效果

直播状态：红点脉冲动画（animate-pulse）
卡片 hover：轻微缩放 scale-[1.02] + 边框高亮
图片 hover：内部微缩放 scale-105
箭头 hover：水平位移 translate-x-1

弹窗背景遮罩 + 毛玻璃模糊，点击遮罩区域关闭，含关闭按钮

加载状态按钮内 loading 时显示旋转图标

返回网站首页