315 lines
21 KiB
HTML
315 lines
21 KiB
HTML
<!DOCTYPE html>
|
||
<html><head>
|
||
<meta charset="utf-8">
|
||
<title>tabbar 角标遮挡 icon · 方案对照</title>
|
||
<style>
|
||
/* 375 逻辑宽：1rpx = 0.5px（浏览器不认 rpx，必须折算）。
|
||
不设 box-sizing，与 uvue view 的默认（content-box）一致 ——
|
||
这一点很关键：min-width 是「内容盒」最小值，角标实际宽 = 18 + 10 = 28px。 */
|
||
body {
|
||
margin: 0;
|
||
padding: 12px;
|
||
background: #F3F4F6;
|
||
color: #1F2937;
|
||
font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
|
||
}
|
||
|
||
/* ===== 库组件 x-tabbar / x-badge 真实样式（抄自 uni_modules 源码） ===== */
|
||
.xTabbar {
|
||
width: 100%;
|
||
}
|
||
|
||
.xTabbarWrap {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-around;
|
||
align-items: flex-start;
|
||
width: 100%;
|
||
}
|
||
|
||
.xTabbarItem {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex: 1;
|
||
}
|
||
|
||
/* view 在 uvue 上默认是 flex column */
|
||
.xBadge {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
overflow: visible;
|
||
}
|
||
|
||
.xBadgeWrap {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
overflow: visible;
|
||
position: relative;
|
||
}
|
||
|
||
.xBadge-countAndLabel {
|
||
position: absolute;
|
||
z-index: 3;
|
||
border-radius: 100px;
|
||
padding: 0rpx 4px;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
/* 角标尺寸 = hr-design.css 的 !important 覆盖值（36rpx 高 / 22.4rpx 字 / padding 10rpx） */
|
||
.xBadge-countAndLabel {
|
||
min-width: 18px;
|
||
height: 18px;
|
||
padding: 0 5px;
|
||
border-radius: 9px;
|
||
}
|
||
|
||
.xBadge-countAndLabelText {
|
||
font-size: 11.2px;
|
||
line-height: 1;
|
||
font-weight: bold;
|
||
}
|
||
|
||
/* hr-design.css：.xBadge { padding: 0 !important } —— 去掉库为「半出血」预留的内边距 */
|
||
.xBadge {
|
||
padding: 0;
|
||
}
|
||
|
||
/* ---- A：库默认 + 取消出血（= 本轮修复前的状态，right:0） ---- */
|
||
.A .xBadge-countAndLabel {
|
||
top: 0;
|
||
right: 0;
|
||
left: auto;
|
||
transform: none;
|
||
}
|
||
|
||
/* ---- B：上一轮的错解（右移 20rpx）—— 假设角标宽 18px 才会成立，实际 28px ---- */
|
||
.B .xBadge-countAndLabel {
|
||
top: -2px;
|
||
right: -10px;
|
||
left: auto;
|
||
transform: none;
|
||
}
|
||
|
||
/* ---- C：本轮定稿（左锚定 44rpx = 22px，宽度无关） ---- */
|
||
.C .xBadge-countAndLabel {
|
||
top: -2px;
|
||
left: 22px;
|
||
right: auto;
|
||
transform: none;
|
||
}
|
||
|
||
/* 库默认「半出血」（仅供对照，需要上方留白） */
|
||
.D .xBadge-countAndLabel {
|
||
top: 5px;
|
||
right: 0;
|
||
left: auto;
|
||
transform: translate(50%, -50%);
|
||
}
|
||
|
||
.frame {
|
||
width: 375px;
|
||
background: #fff;
|
||
border-radius: 10px;
|
||
box-shadow: 0 1px 3px rgba(15, 23, 42, .1);
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.frame .tip {
|
||
font-size: 10.5px;
|
||
color: #374151;
|
||
padding: 6px 12px 0;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.sim {
|
||
width: 375px;
|
||
height: 76px;
|
||
background: #F9FAFB;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
/* item 框辅助线：用于判断角标是否被裁 */
|
||
.sim .xTabbarItem {
|
||
outline: 1px dashed #93C5FD;
|
||
outline-offset: -1px;
|
||
}
|
||
|
||
h2 {
|
||
font-size: 13px;
|
||
margin: 0 0 7px;
|
||
}
|
||
|
||
pre {
|
||
background: #111827;
|
||
color: #A7F3D0;
|
||
font-size: 10.5px;
|
||
padding: 8px 10px;
|
||
border-radius: 8px;
|
||
margin: 0 0 12px;
|
||
line-height: 1.55;
|
||
white-space: pre-wrap;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<h2>底部 tabbar 角标 · 定位方案对照（375 逻辑宽，1rpx = 0.5px）</h2>
|
||
<pre id="out">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 ✓ 不会被裁</pre>
|
||
<div id="host"><div class="frame"><div class="tip">A 本轮修复前（right:0 + 取消出血）</div><div class="sim"><div class="xTabbar A" id="tb0"><div class="xTabbarWrap"><div class="xTabbarItem" style="height:60px"><div class="xBadge"><div class="xBadgeWrap"><div style="height:30px;padding:0px 4px"><span class="ic" style="display:block;width:24px;height:24px;background:#9CA3AF;border-radius:6px"></span></div><span class="lb" style="font-size:13px;color:#9CA3AF;padding-top:4px">首页</span></div></div></div><div class="xTabbarItem" style="height:60px"><div class="xBadge"><div class="xBadgeWrap"><div class="xBadge-countAndLabel" style="background:#DC2626"><span class="xBadge-countAndLabelText" style="color:#fff">4</span></div><div style="height:30px;padding:0px 4px"><span class="ic" style="display:block;width:24px;height:24px;background:#2563EB;border-radius:6px"></span></div><span class="lb" style="font-size:13px;color:#2563EB;padding-top:4px">事件</span></div></div></div><div class="xTabbarItem" style="height:60px"><div class="xBadge"><div class="xBadgeWrap"><div style="height:30px;padding:0px 4px"><span class="ic" style="display:block;width:24px;height:24px;background:#9CA3AF;border-radius:6px"></span></div><span class="lb" style="font-size:13px;color:#9CA3AF;padding-top:4px">我的</span></div></div></div></div></div></div></div><div class="frame"><div class="tip">B 上一轮的错解（right:-20rpx，按角标宽 18px 推算）</div><div class="sim"><div class="xTabbar B" id="tb1"><div class="xTabbarWrap"><div class="xTabbarItem" style="height:60px"><div class="xBadge"><div class="xBadgeWrap"><div style="height:30px;padding:0px 4px"><span class="ic" style="display:block;width:24px;height:24px;background:#9CA3AF;border-radius:6px"></span></div><span class="lb" style="font-size:13px;color:#9CA3AF;padding-top:4px">首页</span></div></div></div><div class="xTabbarItem" style="height:60px"><div class="xBadge"><div class="xBadgeWrap"><div class="xBadge-countAndLabel" style="background:#DC2626"><span class="xBadge-countAndLabelText" style="color:#fff">4</span></div><div style="height:30px;padding:0px 4px"><span class="ic" style="display:block;width:24px;height:24px;background:#2563EB;border-radius:6px"></span></div><span class="lb" style="font-size:13px;color:#2563EB;padding-top:4px">事件</span></div></div></div><div class="xTabbarItem" style="height:60px"><div class="xBadge"><div class="xBadgeWrap"><div style="height:30px;padding:0px 4px"><span class="ic" style="display:block;width:24px;height:24px;background:#9CA3AF;border-radius:6px"></span></div><span class="lb" style="font-size:13px;color:#9CA3AF;padding-top:4px">我的</span></div></div></div></div></div></div></div><div class="frame"><div class="tip">C 本轮定稿（left:44rpx，3 Tab）</div><div class="sim"><div class="xTabbar C" id="tb2"><div class="xTabbarWrap"><div class="xTabbarItem" style="height:60px"><div class="xBadge"><div class="xBadgeWrap"><div style="height:30px;padding:0px 4px"><span class="ic" style="display:block;width:24px;height:24px;background:#9CA3AF;border-radius:6px"></span></div><span class="lb" style="font-size:13px;color:#9CA3AF;padding-top:4px">首页</span></div></div></div><div class="xTabbarItem" style="height:60px"><div class="xBadge"><div class="xBadgeWrap"><div class="xBadge-countAndLabel" style="background:#DC2626"><span class="xBadge-countAndLabelText" style="color:#fff">4</span></div><div style="height:30px;padding:0px 4px"><span class="ic" style="display:block;width:24px;height:24px;background:#2563EB;border-radius:6px"></span></div><span class="lb" style="font-size:13px;color:#2563EB;padding-top:4px">事件</span></div></div></div><div class="xTabbarItem" style="height:60px"><div class="xBadge"><div class="xBadgeWrap"><div style="height:30px;padding:0px 4px"><span class="ic" style="display:block;width:24px;height:24px;background:#9CA3AF;border-radius:6px"></span></div><span class="lb" style="font-size:13px;color:#9CA3AF;padding-top:4px">我的</span></div></div></div></div></div></div></div><div class="frame"><div class="tip">C 本轮定稿（left:44rpx，5 Tab 仓管端）</div><div class="sim"><div class="xTabbar C" id="tb3"><div class="xTabbarWrap"><div class="xTabbarItem" style="height:60px"><div class="xBadge"><div class="xBadgeWrap"><div style="height:30px;padding:0px 4px"><span class="ic" style="display:block;width:24px;height:24px;background:#9CA3AF;border-radius:6px"></span></div><span class="lb" style="font-size:13px;color:#9CA3AF;padding-top:4px">扫码</span></div></div></div><div class="xTabbarItem" style="height:60px"><div class="xBadge"><div class="xBadgeWrap"><div style="height:30px;padding:0px 4px"><span class="ic" style="display:block;width:24px;height:24px;background:#9CA3AF;border-radius:6px"></span></div><span class="lb" style="font-size:13px;color:#9CA3AF;padding-top:4px">仓库</span></div></div></div><div class="xTabbarItem" style="height:60px"><div class="xBadge"><div class="xBadgeWrap"><div class="xBadge-countAndLabel" style="background:#DC2626"><span class="xBadge-countAndLabelText" style="color:#fff">4</span></div><div style="height:30px;padding:0px 4px"><span class="ic" style="display:block;width:24px;height:24px;background:#2563EB;border-radius:6px"></span></div><span class="lb" style="font-size:13px;color:#2563EB;padding-top:4px">事件</span></div></div></div><div class="xTabbarItem" style="height:60px"><div class="xBadge"><div class="xBadgeWrap"><div style="height:30px;padding:0px 4px"><span class="ic" style="display:block;width:24px;height:24px;background:#9CA3AF;border-radius:6px"></span></div><span class="lb" style="font-size:13px;color:#9CA3AF;padding-top:4px">消息</span></div></div></div><div class="xTabbarItem" style="height:60px"><div class="xBadge"><div class="xBadgeWrap"><div style="height:30px;padding:0px 4px"><span class="ic" style="display:block;width:24px;height:24px;background:#9CA3AF;border-radius:6px"></span></div><span class="lb" style="font-size:13px;color:#9CA3AF;padding-top:4px">我</span></div></div></div></div></div></div></div><div class="frame"><div class="tip">C 本轮定稿（两位数角标，验证向右生长不回头）</div><div class="sim"><div class="xTabbar C" id="tb4"><div class="xTabbarWrap"><div class="xTabbarItem" style="height:60px"><div class="xBadge"><div class="xBadgeWrap"><div style="height:30px;padding:0px 4px"><span class="ic" style="display:block;width:24px;height:24px;background:#9CA3AF;border-radius:6px"></span></div><span class="lb" style="font-size:13px;color:#9CA3AF;padding-top:4px">扫码</span></div></div></div><div class="xTabbarItem" style="height:60px"><div class="xBadge"><div class="xBadgeWrap"><div style="height:30px;padding:0px 4px"><span class="ic" style="display:block;width:24px;height:24px;background:#9CA3AF;border-radius:6px"></span></div><span class="lb" style="font-size:13px;color:#9CA3AF;padding-top:4px">仓库</span></div></div></div><div class="xTabbarItem" style="height:60px"><div class="xBadge"><div class="xBadgeWrap"><div class="xBadge-countAndLabel" style="background:#DC2626"><span class="xBadge-countAndLabelText" style="color:#fff">99</span></div><div style="height:30px;padding:0px 4px"><span class="ic" style="display:block;width:24px;height:24px;background:#2563EB;border-radius:6px"></span></div><span class="lb" style="font-size:13px;color:#2563EB;padding-top:4px">事件</span></div></div></div><div class="xTabbarItem" style="height:60px"><div class="xBadge"><div class="xBadgeWrap"><div style="height:30px;padding:0px 4px"><span class="ic" style="display:block;width:24px;height:24px;background:#9CA3AF;border-radius:6px"></span></div><span class="lb" style="font-size:13px;color:#9CA3AF;padding-top:4px">消息</span></div></div></div><div class="xTabbarItem" style="height:60px"><div class="xBadge"><div class="xBadgeWrap"><div style="height:30px;padding:0px 4px"><span class="ic" style="display:block;width:24px;height:24px;background:#9CA3AF;border-radius:6px"></span></div><span class="lb" style="font-size:13px;color:#9CA3AF;padding-top:4px">我</span></div></div></div></div></div></div></div><div class="frame"><div class="tip">D 库默认「半出血」（对照：需要上方留白）</div><div class="sim"><div class="xTabbar D" id="tb5"><div class="xTabbarWrap"><div class="xTabbarItem" style="height:60px"><div class="xBadge"><div class="xBadgeWrap"><div style="height:30px;padding:0px 4px"><span class="ic" style="display:block;width:24px;height:24px;background:#9CA3AF;border-radius:6px"></span></div><span class="lb" style="font-size:13px;color:#9CA3AF;padding-top:4px">首页</span></div></div></div><div class="xTabbarItem" style="height:60px"><div class="xBadge"><div class="xBadgeWrap"><div class="xBadge-countAndLabel" style="background:#DC2626"><span class="xBadge-countAndLabelText" style="color:#fff">4</span></div><div style="height:30px;padding:0px 4px"><span class="ic" style="display:block;width:24px;height:24px;background:#2563EB;border-radius:6px"></span></div><span class="lb" style="font-size:13px;color:#2563EB;padding-top:4px">事件</span></div></div></div><div class="xTabbarItem" style="height:60px"><div class="xBadge"><div class="xBadgeWrap"><div style="height:30px;padding:0px 4px"><span class="ic" style="display:block;width:24px;height:24px;background:#9CA3AF;border-radius:6px"></span></div><span class="lb" style="font-size:13px;color:#9CA3AF;padding-top:4px">我的</span></div></div></div></div></div></div></div></div>
|
||
|
||
<script>
|
||
var ICON_PX = 24; /* hr-tabbar 传 icon-size="48rpx" = 24px */
|
||
var FS = 13; /* hr-tabbar 传 font-size="26rpx" = 13px */
|
||
|
||
/* 按 x-tabbar 的真实结构生成一屏 tabbar：
|
||
.xTabbarItem > .xBadge > .xBadgeWrap > [角标, icon盒(30px,padding 0 4px), 文字] */
|
||
function tabbar(v) {
|
||
var items = v.count === 3
|
||
? [['首页', '#9CA3AF'], ['事件', '#2563EB'], ['我的', '#9CA3AF']]
|
||
: [['扫码', '#9CA3AF'], ['仓库', '#9CA3AF'], ['事件', '#2563EB'], ['消息', '#9CA3AF'], ['我', '#9CA3AF']];
|
||
var badgeIdx = v.count === 3 ? 1 : 2;
|
||
|
||
var out = [];
|
||
items.forEach(function(it, i) {
|
||
var badge = i === badgeIdx
|
||
? '<div class="xBadge-countAndLabel" style="background:#DC2626">' +
|
||
'<span class="xBadge-countAndLabelText" style="color:#fff">' + v.label + '</span></div>'
|
||
: '';
|
||
out.push(
|
||
'<div class="xTabbarItem" style="height:60px">' +
|
||
'<div class="xBadge">' +
|
||
'<div class="xBadgeWrap">' + badge +
|
||
/* icon 盒：库内写死 height:30px + padding:0px 4px */
|
||
'<div style="height:30px;padding:0px 4px">' +
|
||
'<span class="ic" style="display:block;width:' + ICON_PX + 'px;height:' + ICON_PX +
|
||
'px;background:' + it[1] + ';border-radius:6px"></span>' +
|
||
'</div>' +
|
||
/* 文字：库内内联 fontSize=26rpx + paddingTop:4px */
|
||
'<span class="lb" style="font-size:' + FS + 'px;color:' + it[1] + ';padding-top:4px">' +
|
||
it[0] + '</span>' +
|
||
'</div>' +
|
||
'</div>' +
|
||
'</div>');
|
||
});
|
||
return '<div class="xTabbar ' + v.cls + '"><div class="xTabbarWrap">' + out.join('') + '</div></div>';
|
||
}
|
||
|
||
var variants = [
|
||
{ cls: 'A', count: 3, label: '4', title: 'A 本轮修复前（right:0 + 取消出血）' },
|
||
{ cls: 'B', count: 3, label: '4', title: 'B 上一轮的错解（right:-20rpx，按角标宽 18px 推算）' },
|
||
{ cls: 'C', count: 3, label: '4', title: 'C 本轮定稿（left:44rpx，3 Tab）' },
|
||
{ cls: 'C', count: 5, label: '4', title: 'C 本轮定稿（left:44rpx，5 Tab 仓管端）' },
|
||
{ cls: 'C', count: 5, label: '99', title: 'C 本轮定稿（两位数角标，验证向右生长不回头）' },
|
||
{ cls: 'D', count: 3, label: '4', title: 'D 库默认「半出血」（对照：需要上方留白）' }
|
||
];
|
||
|
||
var html = '';
|
||
variants.forEach(function(v, i) {
|
||
html += '<div class="frame"><div class="tip">' + v.title + '</div><div class="sim">' +
|
||
tabbar(v).replace('class="xTabbar ' + v.cls + '"', 'class="xTabbar ' + v.cls + '" id="tb' + i + '"') +
|
||
'</div></div>';
|
||
});
|
||
document.getElementById('host').innerHTML = html;
|
||
|
||
function rect(el) {
|
||
var r = el.getBoundingClientRect();
|
||
return { l: +r.left.toFixed(1), t: +r.top.toFixed(1), r: +r.right.toFixed(1), b: +r.bottom.toFixed(1), w: +r.width.toFixed(1), h: +r.height.toFixed(1) };
|
||
}
|
||
|
||
function report(v, i) {
|
||
var root = document.getElementById('tb' + i);
|
||
var badgeIdx = v.count === 3 ? 1 : 2;
|
||
var item = root.querySelectorAll('.xTabbarItem')[badgeIdx];
|
||
var wrap = rect(item.querySelector('.xBadgeWrap'));
|
||
var bx = rect(item.querySelector('.xBadge'));
|
||
var ic = rect(item.querySelector('.ic'));
|
||
var bd = rect(item.querySelector('.xBadge-countAndLabel'));
|
||
var it = rect(item);
|
||
|
||
var ox = Math.max(0, Math.min(ic.r, bd.r) - Math.max(ic.l, bd.l));
|
||
var oy = Math.max(0, Math.min(ic.b, bd.b) - Math.max(ic.t, bd.t));
|
||
var clipTop = Math.max(0, it.t - bd.t);
|
||
var clipBot = Math.max(0, bd.b - it.b);
|
||
var clipR = Math.max(0, bd.r - it.r);
|
||
|
||
return v.title + '\n' +
|
||
' item(60px) ' + JSON.stringify(it) + '\n' +
|
||
' .xBadgeWrap ' + JSON.stringify(wrap) + ' ← 角标的定位基准（半宽 ' + (wrap.w / 2).toFixed(1) + 'px）\n' +
|
||
' .xBadge ' + JSON.stringify(bx) + (bx.t < it.t - 0.5 || bx.b > it.b + 0.5 ? ' ⚠ 超出 item' : ' ✓ 在 item 内') + '\n' +
|
||
' icon ' + JSON.stringify(ic) + '\n' +
|
||
' 角标 ' + JSON.stringify(bd) + ' ← 实际宽 ' + bd.w + 'px\n' +
|
||
' ⇒ 角标压住 icon：' + ox.toFixed(1) + ' × ' + oy.toFixed(1) + ' px' +
|
||
'（横向占 icon 的 ' + (ox / ic.w * 100).toFixed(0) + '%）\n' +
|
||
' ⇒ 裁切检查：上溢 ' + clipTop.toFixed(1) + ' / 下溢 ' + clipBot.toFixed(1) + ' / 右溢 ' + clipR.toFixed(1) + ' px' +
|
||
((clipTop === 0 && clipBot === 0 && clipR === 0) ? ' ✓ 不会被裁' : ' ⚠ 有被裁风险');
|
||
}
|
||
|
||
var out = [];
|
||
variants.forEach(function(v, i) { out.push(report(v, i)); });
|
||
document.getElementById('out').textContent = out.join('\n\n');
|
||
</script>
|
||
|
||
|
||
</body></html>
|