本次只做 H5、APP 首页上部 Tab 导航与底部导航栏的 Icon 样式。H5 与 APP 在配置表中分列展示，不用 Tab 切换。只配选中 / 未选中两套图，不区分未登录与已登录，两端共用同一套 Icon。名称、数量、跳转、排序及其他业务保持现网不变。
| 字段（名称固定） | 未选中 Icon | 选中 Icon |
|---|---|---|
| V体育 | 可配 | 可配 |
| DB体育 | 可配 | 可配 |
| 娱乐 | 可配 | 可配 |
| 广场 | 可配 | 可配 |
| FE预测 | 可配 | 可配 |
| 字段（名称固定） | 未选中 Icon | 选中 Icon |
|---|---|---|
| 首页 | 可配 | 可配 |
| 充值 | 可配 | 可配 |
| 注单 | 可配 | 可配 |
| 优惠 | 可配 | 可配 |
| 我的 | 可配 | 可配 |
截图中底部左侧原「V SPORT」品牌位，按需求改为「首页」入口，与其余四项并列，仅换样式，不改跳转。
路径：运营管理 → 广告配置 → H5/APP客户端Icon配置
不做 Tab 切换，也不按登录态分区。站点仅展示「中越站」。H5 与 APP 在表格中分列同时可见；每一行只配选中 / 未选中。
| 列 | 说明 |
|---|---|
| 字段 | 固定名称，不可改 |
| H5 未选中 / H5 选中 | 蓝色表头；切图尺寸见第五章（参考值） |
| APP 未选中 / APP 选中 | 橙色表头；切图尺寸见第五章（参考值） |
右侧手机仅为预览，可切 H5/APP 看效果，不会把配置表藏成单套。登录前后共用本页配置的同一套图。
| 端 | 未选中（参考） | 选中（参考） | 格式（参考） |
|---|---|---|---|
| H5 | 48×48（@2x 96） | 48×48，橙底或高亮描边 | PNG 透明，≤200KB |
| APP | 72×72（@3x 216） | 72×72，与未选中构图对齐 | PNG 透明，≤200KB |
选中态参考品牌橙 #f6941d 实心底 + 白图标；未选中参考灰色线框。色号、描边、圆角、字号均以 UI 设计稿为准，本文不作为验收硬标准。
以下为 H5 / APP 真实客户端在领取后台配置后的交互约定。后台右侧手机仅为预览，真实端须按本表实现。
| 用户操作 | 客户端表现 |
|---|---|
| 进入首页默认态 | 「V体育」为选中：展示该槽位选中 Icon + 选中文字色；其余 4 项展示未选中 Icon + 灰色文字。 |
| 点击某一 Tab（如「广场」） | 被点项立刻切到选中 Icon 与选中文字色；原选中项立刻切回未选中 Icon 与灰色文字。页面内容按现网跳转逻辑切换，本次不改跳转 URL。 |
| 快速连续点击不同 Tab | 以最后一次点击为准，Icon 与文字色与当前频道一致，不允许出现两项同时选中。 |
| 从子页返回首页 | 上部 Tab 恢复为离开前的选中项（与现网一致），对应展示该套选中 / 未选中图。 |
| 用户操作 | 客户端表现 |
|---|---|
| 停留在首页 | 「首页」为选中 Icon + 选中色；充值 / 注单 / 优惠 / 我的为未选中。 |
| 点击底栏其他项（如「充值」） | 该项切为选中 Icon；「首页」及其余项切为未选中 Icon。跳转走现网路由，不因换图改变落地页。 |
| 在非首页时再点「首页」 | 回到首页，底栏「首页」恢复选中 Icon；上部 Tab 保持该用户上次频道选中态。 |
| 场景 | 客户端表现 |
|---|---|
| H5 与 APP | 各自拉取本端切图。H5 不展示 APP 槽位图，APP 不展示 H5 槽位图。 |
| 未登录 ↔ 已登录 | 上下导航 Icon 不切换。仅顶栏用户区变化（登录/注册 或 余额），菜单名称、数量、顺序不变。 |
| 后台点「保存配置」成功后 | 客户端约 1～3 分钟内同步新图（CDN / 配置下发）。未刷新期间可继续使用旧图，不阻塞点击与跳转。 |
| 冷启动 / 强刷 | 拉取当前已发布配置；若某槽位无图，按第八章回退规则展示，不得空白或错位。 |
选中 / 未选中的颜色、字号以 UI 设计稿为准（产品色号如 #f6941d 仅供参考）。文字色须与 Icon 选中态同步，不允许 Icon 已选中而文字仍为未选中色。
| 异常 | 处理 |
|---|---|
| 上传非图片或无法解析的文件 | 不写入槽位，轻提示「请上传图片文件」，保留原图。 |
| 文件超过 200KB | 不写入槽位，轻提示「超过 200KB」，保留原图。 |
| 图片宽高与参考尺寸不一致 | 允许保存，按槽位框等比裁切/留白预览；不拦截提交。切图以 UI 设计稿为准，第五章尺寸仅供参考。 |
| 只改了 H5 未改 APP（或相反） | 允许保存。未改的端继续用原图，互不影响。 |
| 选中槽位未上传、未选中已有图 | 允许保存。客户端选中态回退展示未选中图（见 8.2），后台预览同样回退。 |
| 保存接口超时 / 网络失败 | 轻提示「保存失败，请重试」；页面数据不丢，按钮恢复可点。禁止提示「保存成功」。 |
| 保存过程中再次点击保存 | 忽略重复点击，待上次请求结束。 |
| 保存成功 | 顶部轻提示「保存成功」。不弹模态框、不跳转页面。 |
| 点「恢复全部默认图」后未保存 | 仅当前页预览恢复默认；未点保存则不写入线上。离开页面时按后台统一未保存提示（若有）。 |
| 两人同时改同一站点后先后保存 | 以后一次保存覆盖；不做字段级合并。如需防覆盖，后续走版本/锁，不在本次范围。 |
| 异常 | 处理 |
|---|---|
| 选中 Icon 缺失或加载失败 | 该位置改用同一字段的未选中 Icon；文字仍用选中色，保证用户能看出当前项。 |
| 未选中 Icon 也缺失或加载失败 | 展示客户端内置默认 Icon（现网占位图），名称与跳转不变，禁止空白或错行。 |
| 配置接口失败 / 超时 | 沿用本地缓存的上一份成功配置；无缓存则用内置默认图。导航仍可点击跳转。 |
| 切图 URL 404 或 CDN 未刷新 | 单张失败不影响其他槽位；失败项走上述回退。用户点击、跳转不受影响。 |
| 新配置未下发到该端 | 继续展示旧图，交互与跳转正常，直到配置到达或用户下次冷启动拉取成功。 |
Q：H5 改了 APP 没变？同一行右侧 APP 列需单独更换，不再切 Tab。
Q：未登录和已登录要分别配图吗？不需要。本页不区分登录态，两端共用同一套选中 / 未选中图。
Q：点了没有选中效果？选中槽位未传图时会回退到未选中图，请补选中切图。
Q：保存后客户端为什么还是旧图？属正常同步窗口（约 1～3 分钟），请强刷或冷启动后再看；若仍旧图，查 CDN 与配置是否发布成功。
Q：想加第六个 Tab？超出本次范围，走原导航/产品需求，不在本页处理。