底部 tabbar 角标 · 定位方案对照(375 逻辑宽,1rpx = 0.5px)
A 本轮修复前(right:0 + 取消出血)
item(60px) {"l":137,"t":110,"r":262,"b":170,"w":125,"h":60}
.xBadgeWrap {"l":183.5,"t":114.5,"r":215.5,"b":165.5,"w":32,"h":51} ← 角标的定位基准(半宽 16.0px)
.xBadge {"l":183.5,"t":114.5,"r":215.5,"b":165.5,"w":32,"h":51} ✓ 在 item 内
icon {"l":187.5,"t":114.5,"r":211.5,"b":138.5,"w":24,"h":24}
角标 {"l":187.5,"t":114.5,"r":215.5,"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":137,"t":215.8,"r":262,"b":275.8,"w":125,"h":60}
.xBadgeWrap {"l":183.5,"t":220.3,"r":215.5,"b":271.3,"w":32,"h":51} ← 角标的定位基准(半宽 16.0px)
.xBadge {"l":183.5,"t":220.3,"r":215.5,"b":271.3,"w":32,"h":51} ✓ 在 item 内
icon {"l":187.5,"t":220.3,"r":211.5,"b":244.3,"w":24,"h":24}
角标 {"l":197.5,"t":218.3,"r":225.5,"b":236.3,"w":28,"h":18} ← 实际宽 28px
⇒ 角标压住 icon:14.0 × 16.0 px(横向占 icon 的 58%)
⇒ 裁切检查:上溢 0.0 / 下溢 0.0 / 右溢 0.0 px ✓ 不会被裁
C 本轮定稿(left:44rpx,3 Tab)
item(60px) {"l":137,"t":321.5,"r":262,"b":381.5,"w":125,"h":60}
.xBadgeWrap {"l":183.5,"t":326,"r":215.5,"b":377,"w":32,"h":51} ← 角标的定位基准(半宽 16.0px)
.xBadge {"l":183.5,"t":326,"r":215.5,"b":377,"w":32,"h":51} ✓ 在 item 内
icon {"l":187.5,"t":326,"r":211.5,"b":350,"w":24,"h":24}
角标 {"l":205.5,"t":324,"r":233.5,"b":342,"w":28,"h":18} ← 实际宽 28px
⇒ 角标压住 icon:6.0 × 16.0 px(横向占 icon 的 25%)
⇒ 裁切检查:上溢 0.0 / 下溢 0.0 / 右溢 0.0 px ✓ 不会被裁
C 本轮定稿(left:44rpx,5 Tab 仓管端)
item(60px) {"l":162,"t":427.3,"r":237,"b":487.3,"w":75,"h":60}
.xBadgeWrap {"l":183.5,"t":431.8,"r":215.5,"b":482.8,"w":32,"h":51} ← 角标的定位基准(半宽 16.0px)
.xBadge {"l":183.5,"t":431.8,"r":215.5,"b":482.8,"w":32,"h":51} ✓ 在 item 内
icon {"l":187.5,"t":431.8,"r":211.5,"b":455.8,"w":24,"h":24}
角标 {"l":205.5,"t":429.8,"r":233.5,"b":447.8,"w":28,"h":18} ← 实际宽 28px
⇒ 角标压住 icon:6.0 × 16.0 px(横向占 icon 的 25%)
⇒ 裁切检查:上溢 0.0 / 下溢 0.0 / 右溢 0.0 px ✓ 不会被裁
C 本轮定稿(两位数角标,验证向右生长不回头)
item(60px) {"l":162,"t":533,"r":237,"b":593,"w":75,"h":60}
.xBadgeWrap {"l":183.5,"t":537.5,"r":215.5,"b":588.5,"w":32,"h":51} ← 角标的定位基准(半宽 16.0px)
.xBadge {"l":183.5,"t":537.5,"r":215.5,"b":588.5,"w":32,"h":51} ✓ 在 item 内
icon {"l":187.5,"t":537.5,"r":211.5,"b":561.5,"w":24,"h":24}
角标 {"l":205.5,"t":535.5,"r":233.5,"b":553.5,"w":28,"h":18} ← 实际宽 28px
⇒ 角标压住 icon:6.0 × 16.0 px(横向占 icon 的 25%)
⇒ 裁切检查:上溢 0.0 / 下溢 0.0 / 右溢 0.0 px ✓ 不会被裁
D 库默认「半出血」(对照:需要上方留白)
item(60px) {"l":137,"t":638.8,"r":262,"b":698.8,"w":125,"h":60}
.xBadgeWrap {"l":183.5,"t":643.3,"r":215.5,"b":694.3,"w":32,"h":51} ← 角标的定位基准(半宽 16.0px)
.xBadge {"l":183.5,"t":643.3,"r":215.5,"b":694.3,"w":32,"h":51} ✓ 在 item 内
icon {"l":187.5,"t":643.3,"r":211.5,"b":667.3,"w":24,"h":24}
角标 {"l":201.5,"t":639.3,"r":229.5,"b":657.3,"w":28,"h":18} ← 实际宽 28px
⇒ 角标压住 icon:10.0 × 14.0 px(横向占 icon 的 42%)
⇒ 裁切检查:上溢 0.0 / 下溢 0.0 / 右溢 0.0 px ✓ 不会被裁
B 上一轮的错解(right:-20rpx,按角标宽 18px 推算)
C 本轮定稿(left:44rpx,5 Tab 仓管端)