144 lines
7.3 KiB
HTML
144 lines
7.3 KiB
HTML
<!DOCTYPE html>
|
||
<html><head><meta charset="utf-8"><style>
|
||
/* 375 逻辑宽：1rpx = 0.5px */
|
||
* { box-sizing: border-box; }
|
||
body { margin:0; padding:16px; width:375px; background:#F3F4F6;
|
||
font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif; color:#1F2937; }
|
||
h1 { font-size:15px; margin:0 0 4px; }
|
||
.sub { font-size:10px; color:#6B7280; margin-bottom:14px; line-height:1.6; }
|
||
.card { background:#fff; border-radius:9px; padding:14px 14px 10px; margin-bottom:14px;
|
||
box-shadow:0 1px 3px rgba(15,23,42,.08); }
|
||
.card h2 { font-size:12px; margin:0 0 12px; color:#374151; }
|
||
.tag { display:inline-block; font-size:10px; padding:1px 6px; border-radius:5px; margin-left:6px; }
|
||
.tag-bad { background:#FEF2F2; color:#DC2626; }
|
||
.tag-ok { background:#EFF6FF; color:#2563EB; }
|
||
|
||
/* ---- 库组件 x-badge 自身样式 ---- */
|
||
.xBadge-countAndLabel { position:absolute; z-index:3; border-radius:100px; padding:0px 4px;
|
||
display:flex; flex-direction:row; align-items:center; justify-content:center; }
|
||
.xBadge-countAndLabelText { line-height:1.5; text-align:center; }
|
||
|
||
/* ---- 改后：与基准一致（rpx 已折算）---- */
|
||
.xBadge-countAndLabel.fixed { min-width:18px; height:18px; padding:0 5px; border-radius:9px; }
|
||
.xBadge-countAndLabel.fixed .xBadge-countAndLabelText { font-size:11.2px; line-height:1; font-weight:bold; }
|
||
|
||
/* ---- 自写基准角标 .hr-badge ---- */
|
||
.hr-badge { min-width:18px; height:18px; padding-left:5px; padding-right:5px; border-radius:9px;
|
||
background-color:#DC2626; display:flex; flex-direction:row; align-items:center; justify-content:center; }
|
||
.hr-badge-t { font-size:11.2px; font-weight:bold; color:#fff; }
|
||
|
||
.row { display:flex; flex-direction:row; align-items:center; }
|
||
.grow { flex:1; }
|
||
|
||
.cmp { display:flex; flex-direction:row; align-items:flex-end; gap:34px; padding:6px 4px 2px; }
|
||
.cmp-item { display:flex; flex-direction:column; align-items:center; }
|
||
.cmp-item .lbl { font-size:10px; color:#6B7280; margin-top:8px; text-align:center; line-height:1.5; }
|
||
.stage { width:64px; height:40px; display:flex; align-items:center; justify-content:center; }
|
||
|
||
/* 列表行 */
|
||
.lrow { display:flex; flex-direction:row; align-items:center; padding:11px 0; border-bottom:1px solid #F3F4F6; }
|
||
.lrow:last-child { border-bottom:0; }
|
||
.lic { width:30px; height:30px; border-radius:8px; background:#FFF7ED; color:#D97706;
|
||
display:flex; align-items:center; justify-content:center; font-size:15px; margin-right:9px; }
|
||
.lt { font-size:14px; }
|
||
.ls { font-size:11px; color:#9CA3AF; margin-top:2px; }
|
||
.lval { font-size:15px; color:#D1D5DB; margin-left:6px; }
|
||
|
||
/* 底部 tabbar 预览 */
|
||
.tb { display:flex; flex-direction:row; background:#fff; border-top:1px solid #F3F4F6; border-radius:0 0 9px 9px; }
|
||
.tb-i { flex:1; display:flex; flex-direction:column; align-items:center; padding:8px 0 6px; position:relative; }
|
||
.tb-ic { width:17px; height:17px; border-radius:5px; background:#D1D5DB; }
|
||
.tb-ic.on { background:#2563EB; }
|
||
.tb-l { font-size:13px; color:#9CA3AF; margin-top:3px; }
|
||
.tb-l.on { color:#2563EB; }
|
||
.tb-b { position:absolute; top:2px; left:50%; margin-left:2px; }
|
||
.tb-badge-wrap { position:relative; }
|
||
.tb-badge-wrap .b { position:absolute; top:0; right:0; transform:translate(50%,-50%); }
|
||
|
||
/* 顶部 tabs 预览 */
|
||
.tabs { display:flex; flex-direction:row; background:#fff; border-radius:9px 9px 0 0; border-bottom:1px solid #F3F4F6; }
|
||
.tab-i { flex:1; display:flex; align-items:center; justify-content:center; height:44px; position:relative; }
|
||
.tab-t { font-size:14px; color:#6B7280; }
|
||
.tab-t.on { color:#2563EB; font-weight:bold; }
|
||
.tab-b { position:absolute; top:9px; left:50%; margin-left:16px; }
|
||
.tab-b .b { position:absolute; top:0; left:0; transform:translate(0,-50%); }
|
||
</style></head>
|
||
<body>
|
||
|
||
<h1>角标尺寸统一 · 效果对照</h1>
|
||
<div class="sub">基准 = 「我的」页 · 消息中心 item 右侧角标（高 36rpx / 圆角 18rpx / 字号 22.4rpx）· 375 逻辑宽按 1rpx = 0.5px 渲染</div>
|
||
|
||
<div class="card">
|
||
<h2>① 角标特写：改前 / 改后 / 基准</h2>
|
||
<div class="cmp">
|
||
<div class="cmp-item">
|
||
<div class="stage">
|
||
<div style="position:relative">
|
||
<div class="xBadge-countAndLabel" style="background:#DC2626;left:0;top:0;position:relative">
|
||
<span class="xBadge-countAndLabelText" style="color:#fff;font-size:9px">4</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="lbl">改前 · xBadge 默认<span class="tag tag-bad">偏小</span><br>26 × 13.5 px</div>
|
||
</div>
|
||
<div class="cmp-item">
|
||
<div class="stage">
|
||
<div style="position:relative">
|
||
<div class="xBadge-countAndLabel fixed" style="background:#DC2626;left:0;top:0;position:relative">
|
||
<span class="xBadge-countAndLabelText" style="color:#fff">4</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="lbl">改后 · 组件库角标<span class="tag tag-ok">已统一</span><br>28 × 18 px</div>
|
||
</div>
|
||
<div class="cmp-item">
|
||
<div class="stage"><div class="hr-badge"><span class="hr-badge-t">4</span></div></div>
|
||
<div class="lbl">基准 · 列表行自写角标<br>28 × 18 px</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card" style="padding:0;overflow:hidden">
|
||
<div class="tabs">
|
||
<div class="tab-i"><span class="tab-t on">进行中</span>
|
||
<div class="tab-b"><div class="xBadge-countAndLabel fixed b" style="background:#6B7280"><span class="xBadge-countAndLabelText" style="color:#fff">2</span></div></div>
|
||
</div>
|
||
<div class="tab-i"><span class="tab-t">待接收</span>
|
||
<div class="tab-b"><div class="xBadge-countAndLabel fixed b" style="background:#DC2626"><span class="xBadge-countAndLabelText" style="color:#fff">4</span></div></div>
|
||
</div>
|
||
<div class="tab-i"><span class="tab-t">历史</span>
|
||
<div class="tab-b"><div class="xBadge-countAndLabel fixed b" style="background:#6B7280"><span class="xBadge-countAndLabelText" style="color:#fff">7</span></div></div>
|
||
</div>
|
||
</div>
|
||
<div style="padding:10px 14px 4px;font-size:12px;color:#374151">② 事件列表页 · 顶部切换栏（x-tabs 角标）<span class="tag tag-ok">已统一</span></div>
|
||
<div class="tb" style="border-radius:0">
|
||
<div class="tb-i"><div class="tb-ic"></div><span class="tb-l">首页</span></div>
|
||
<div class="tb-i">
|
||
<div class="tb-badge-wrap"><div class="tb-ic on"></div>
|
||
<div class="xBadge-countAndLabel fixed b" style="background:#DC2626"><span class="xBadge-countAndLabelText" style="color:#fff">4</span></div>
|
||
</div>
|
||
<span class="tb-l on">事件</span>
|
||
</div>
|
||
<div class="tb-i"><div class="tb-ic"></div><span class="tb-l">我的</span></div>
|
||
</div>
|
||
<div style="padding:8px 14px 12px;font-size:12px;color:#374151">③ 事件页 · 底部 tabbar（x-tabbar 角标）<span class="tag tag-ok">已统一</span></div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h2>④ 与基准同源的两处列表行角标</h2>
|
||
<div class="lrow">
|
||
<div class="lic">✉</div>
|
||
<div class="grow"><div class="lt">消息中心</div><div class="ls">4 条未读</div></div>
|
||
<div class="hr-badge"><span class="hr-badge-t">4</span></div>
|
||
<span class="lval">›</span>
|
||
</div>
|
||
<div class="lrow">
|
||
<div class="lic">⚠</div>
|
||
<div class="grow"><div class="lt">事件告警</div><div class="ls">新的派单会推送给你</div></div>
|
||
<div class="hr-badge"><span class="hr-badge-t">4</span></div>
|
||
<span class="lval">›</span>
|
||
</div>
|
||
</div>
|
||
|
||
</body></html>
|