底部 tabbar 角标 · 定位方案对照(375 逻辑宽,1rpx = 0.5px)
A 本轮修复前(right:0 + 取消出血)
item(60px) {"l":44,"t":110,"r":76,"b":170,"w":32,"h":60}
.xBadgeWrap {"l":44,"t":114.5,"r":76,"b":165.5,"w":32,"h":51} ← 角标的定位基准(半宽 16.0px)
.xBadge {"l":44,"t":114.5,"r":76,"b":165.5,"w":32,"h":51} ✓ 在 item 内
icon {"l":48,"t":114.5,"r":72,"b":138.5,"w":24,"h":24}
角标 {"l":48,"t":114.5,"r":76,"b":132.5,"w":28,"h":18} ← 实际宽 28px
⇒ 角标压住 icon:24.0 × 18.0 px(横向占 icon 的 100%)
⇒ 裁切检查:上溢 0.0 / 下溢 0.0 / 右溢 0.0 px ✓ 不会被裁
B 上一轮的错解(right:-20rpx,按角标宽 18px 推算)
item(60px) {"l":44,"t":215.8,"r":76,"b":275.8,"w":32,"h":60}
.xBadgeWrap {"l":44,"t":220.3,"r":76,"b":271.3,"w":32,"h":51} ← 角标的定位基准(半宽 16.0px)
.xBadge {"l":44,"t":220.3,"r":76,"b":271.3,"w":32,"h":51} ✓ 在 item 内
icon {"l":48,"t":220.3,"r":72,"b":244.3,"w":24,"h":24}
角标 {"l":58,"t":218.3,"r":86,"b":236.3,"w":28,"h":18} ← 实际宽 28px
⇒ 角标压住 icon:14.0 × 16.0 px(横向占 icon 的 58%)
⇒ 裁切检查:上溢 0.0 / 下溢 0.0 / 右溢 10.0 px ⚠ 有被裁风险
C 本轮定稿(left:44rpx,3 Tab)
item(60px) {"l":44,"t":321.5,"r":76,"b":381.5,"w":32,"h":60}
.xBadgeWrap {"l":44,"t":326,"r":76,"b":377,"w":32,"h":51} ← 角标的定位基准(半宽 16.0px)
.xBadge {"l":44,"t":326,"r":76,"b":377,"w":32,"h":51} ✓ 在 item 内
icon {"l":48,"t":326,"r":72,"b":350,"w":24,"h":24}
角标 {"l":66,"t":324,"r":94,"b":342,"w":28,"h":18} ← 实际宽 28px
⇒ 角标压住 icon:6.0 × 16.0 px(横向占 icon 的 25%)
⇒ 裁切检查:上溢 0.0 / 下溢 0.0 / 右溢 18.0 px ⚠ 有被裁风险
C 本轮定稿(left:44rpx,5 Tab 仓管端)
item(60px) {"l":76,"t":427.3,"r":108,"b":487.3,"w":32,"h":60}
.xBadgeWrap {"l":76,"t":431.8,"r":108,"b":482.8,"w":32,"h":51} ← 角标的定位基准(半宽 16.0px)
.xBadge {"l":76,"t":431.8,"r":108,"b":482.8,"w":32,"h":51} ✓ 在 item 内
icon {"l":80,"t":431.8,"r":104,"b":455.8,"w":24,"h":24}
角标 {"l":98,"t":429.8,"r":126,"b":447.8,"w":28,"h":18} ← 实际宽 28px
⇒ 角标压住 icon:6.0 × 16.0 px(横向占 icon 的 25%)
⇒ 裁切检查:上溢 0.0 / 下溢 0.0 / 右溢 18.0 px ⚠ 有被裁风险
C 本轮定稿(两位数角标,验证向右生长不回头)
item(60px) {"l":76,"t":533,"r":108,"b":593,"w":32,"h":60}
.xBadgeWrap {"l":76,"t":537.5,"r":108,"b":588.5,"w":32,"h":51} ← 角标的定位基准(半宽 16.0px)
.xBadge {"l":76,"t":537.5,"r":108,"b":588.5,"w":32,"h":51} ✓ 在 item 内
icon {"l":80,"t":537.5,"r":104,"b":561.5,"w":24,"h":24}
角标 {"l":98,"t":535.5,"r":126,"b":553.5,"w":28,"h":18} ← 实际宽 28px
⇒ 角标压住 icon:6.0 × 16.0 px(横向占 icon 的 25%)
⇒ 裁切检查:上溢 0.0 / 下溢 0.0 / 右溢 18.0 px ⚠ 有被裁风险
D 库默认「半出血」(对照:需要上方留白)
item(60px) {"l":44,"t":638.8,"r":76,"b":698.8,"w":32,"h":60}
.xBadgeWrap {"l":44,"t":643.3,"r":76,"b":694.3,"w":32,"h":51} ← 角标的定位基准(半宽 16.0px)
.xBadge {"l":44,"t":643.3,"r":76,"b":694.3,"w":32,"h":51} ✓ 在 item 内
icon {"l":48,"t":643.3,"r":72,"b":667.3,"w":24,"h":24}
角标 {"l":62,"t":639.3,"r":90,"b":657.3,"w":28,"h":18} ← 实际宽 28px
⇒ 角标压住 icon:10.0 × 14.0 px(横向占 icon 的 42%)
⇒ 裁切检查:上溢 0.0 / 下溢 0.0 / 右溢 14.0 px ⚠ 有被裁风险
B 上一轮的错解(right:-20rpx,按角标宽 18px 推算)
C 本轮定稿(left:44rpx,5 Tab 仓管端)