悬浮球样式优化 · Demo v4（CB + AT 完整：药丸 / hover 滑出 / 角标）

2026-06-15 ｜ 粉 #FCE7EE · 红 #F03D30 · 绿 #1c8a3c · 券粉 #E84B8A ｜ 数值占位

一、右侧内容药丸（静态展开，对齐截图）

AT 优惠券 · 数量
×
12 Coupons
优惠券：「12 Coupons」
AT 优惠券 · 数量+省额（可选）
×
12 Coupons
也可只显数量；线上文案见角标/滑出
CB 返利 · 比例
×
5%
单费率「5%」（也支持 $2.99 / 5.2%-12.89%）
CB 返利 · 已激活（绿）
×
✓ 5% Active
已激活：药丸转绿 + ✓

二、hover 往左滑出（静默只露球 → 移上去整组左滑露出内容）

↓ 把鼠标移进灰框，看药丸从右缘往左滑出。

AT · 滑出「12 Coupons」
hover →
12 Coupons
↑ 鼠标移进灰框
AT · 滑出「12 Coupons Available」
hover →
12 Coupons Available
↑ 鼠标移进灰框
CB · 滑出「5%」(未激活)
hover →
5%
↑ 鼠标移进灰框
CB · 滑出「5% Active」(已激活, 绿)
hover →
✓ 5% Active
↑ 鼠标移进灰框

三、左上角标（持续驻留）

AT 优惠券角标

券形+数字（数字在前）
12🎟
「12🎟」数字在图标前
数字+Coupons
12 Coupons
「12 Coupons」最直白（略宽）
券形打头
🎟 12
「🎟 12」券 icon + 数字

CB 返利角标（右下角=激活态 橙!/绿✓）

纯比例（推荐）
5%!
5%✓
「5%」最小；左未激活/右已激活
币标+比例
💰5%!
💰5%✓
「💰5%」语义更明确
建议：CB 角标用纯「5%」（想强化返利语义退选「💰5%」）；AT 角标用券形+数字「12🎟」（想直白用「12 Coupons」）。右侧滑出药丸 AT=「12 Coupons / 12 Coupons Available」、CB=「5% / $2.99 / 区间 / ✓5% Active」。激活态：CB 右下角橙!→绿✓ + 药丸变色。
数值线上动态填充；CB 取不到或 0 → 不展示。支付页补提醒沿用 CB 同样式。AT 券数建议取可用/验证过的张数避免虚高。多语言：Coupons / Cash Back 配 6 语言（中文 现金返还/現金回饋）。logo 为占位示意。