295 lines
17 KiB
HTML
295 lines
17 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=430, initial-scale=1.0, user-scalable=no">
|
||
<title>基准测试页 v3</title>
|
||
<style>
|
||
*{margin:0;padding:0;box-sizing:border-box;}
|
||
html,body{scrollbar-width:none;-ms-overflow-style:none;}
|
||
::-webkit-scrollbar{display:none;}
|
||
body{width:430px;font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif;background:#f5f5f5;color:#333;overflow-x:hidden;position:relative;}
|
||
|
||
/* 右侧贯穿彩条 — absolute，高度=视口高度752px */
|
||
.ruler-strip{position:absolute;top:0;right:0;width:10px;z-index:9999;display:flex;flex-direction:column;}
|
||
.ruler-bar{width:10px;height:752px;border-left:1px solid #000;}
|
||
.ruler-bar.blue{background:#0052d9;}
|
||
.ruler-bar.green{background:#00a870;}
|
||
|
||
/* 通用 section */
|
||
.sec{padding:6px 0 6px 0;border-bottom:1px solid #ddd;margin-right:10px;}
|
||
.sec-t{font-size:11px;font-weight:600;color:#0052d9;padding:0 0 4px 4px;}
|
||
|
||
/* 行 */
|
||
.row{display:flex;align-items:center;padding:2px 4px;}
|
||
.lbl{font-size:10px;color:#999;width:80px;flex-shrink:0;}
|
||
.val{flex:1;}
|
||
|
||
/* 横条 */
|
||
.bar{display:flex;align-items:center;color:#fff;font-size:9px;padding-left:4px;}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- 右侧贯穿彩条 -->
|
||
<div class="ruler-strip" id="rulerStrip"></div>
|
||
<script>
|
||
(function(){
|
||
var c=document.getElementById('rulerStrip');
|
||
for(var i=0;i<4;i++){
|
||
var d=document.createElement('div');
|
||
d.className='ruler-bar '+(i%2===0?'blue':'green');
|
||
c.appendChild(d);
|
||
}
|
||
})();
|
||
</script>
|
||
|
||
<!-- 1. font-size -->
|
||
<div class="sec">
|
||
<div class="sec-t">1. font-size</div>
|
||
<div class="row"><span class="lbl">10px</span><span class="val" style="font-size:10px;">中文ABC123</span></div>
|
||
<div class="row"><span class="lbl">11px</span><span class="val" style="font-size:11px;">中文ABC123</span></div>
|
||
<div class="row"><span class="lbl">12px</span><span class="val" style="font-size:12px;">中文ABC123</span></div>
|
||
<div class="row"><span class="lbl">13px</span><span class="val" style="font-size:13px;">中文ABC123</span></div>
|
||
<div class="row"><span class="lbl">14px</span><span class="val" style="font-size:14px;">中文ABC123</span></div>
|
||
<div class="row"><span class="lbl">16px</span><span class="val" style="font-size:16px;">中文ABC123</span></div>
|
||
<div class="row"><span class="lbl">18px</span><span class="val" style="font-size:18px;">中文ABC123</span></div>
|
||
<div class="row"><span class="lbl">20px</span><span class="val" style="font-size:20px;">中文ABC123</span></div>
|
||
<div class="row"><span class="lbl">24px</span><span class="val" style="font-size:24px;">中文ABC123</span></div>
|
||
<div class="row"><span class="lbl">28px</span><span class="val" style="font-size:28px;">中文ABC123</span></div>
|
||
<div class="row"><span class="lbl">32px</span><span class="val" style="font-size:32px;">中文ABC123</span></div>
|
||
</div>
|
||
|
||
<!-- 2. font-weight -->
|
||
<div class="sec">
|
||
<div class="sec-t">2. font-weight</div>
|
||
<div class="row"><span class="lbl">300</span><span class="val" style="font-size:16px;font-weight:300;">中文ABC123</span></div>
|
||
<div class="row"><span class="lbl">400</span><span class="val" style="font-size:16px;font-weight:400;">中文ABC123</span></div>
|
||
<div class="row"><span class="lbl">500</span><span class="val" style="font-size:16px;font-weight:500;">中文ABC123</span></div>
|
||
<div class="row"><span class="lbl">600</span><span class="val" style="font-size:16px;font-weight:600;">中文ABC123</span></div>
|
||
<div class="row"><span class="lbl">700</span><span class="val" style="font-size:16px;font-weight:700;">中文ABC123</span></div>
|
||
</div>
|
||
|
||
<!-- 3. line-height -->
|
||
<div class="sec">
|
||
<div class="sec-t">3. line-height (14px)</div>
|
||
<div style="font-size:14px;line-height:1.0;background:#ecf2fe;padding:2px 4px;margin-bottom:2px;margin-right:10px;">LH1.0 中文测试文字验证行高</div>
|
||
<div style="font-size:14px;line-height:1.25;background:#e8f8f0;padding:2px 4px;margin-bottom:2px;margin-right:10px;">LH1.25 中文测试文字验证行高</div>
|
||
<div style="font-size:14px;line-height:1.5;background:#ecf2fe;padding:2px 4px;margin-bottom:2px;margin-right:10px;">LH1.5 中文测试文字验证行高</div>
|
||
<div style="font-size:14px;line-height:2.0;background:#e8f8f0;padding:2px 4px;margin-right:10px;">LH2.0 中文测试文字验证行高</div>
|
||
</div>
|
||
|
||
<!-- 4. letter-spacing -->
|
||
<div class="sec">
|
||
<div class="sec-t">4. letter-spacing</div>
|
||
<div class="row"><span class="lbl">0px</span><span class="val" style="font-size:14px;letter-spacing:0px;">中文ABC123</span></div>
|
||
<div class="row"><span class="lbl">0.5px</span><span class="val" style="font-size:14px;letter-spacing:0.5px;">中文ABC123</span></div>
|
||
<div class="row"><span class="lbl">1px</span><span class="val" style="font-size:14px;letter-spacing:1px;">中文ABC123</span></div>
|
||
<div class="row"><span class="lbl">2px</span><span class="val" style="font-size:14px;letter-spacing:2px;">中文ABC123</span></div>
|
||
</div>
|
||
|
||
<!-- 5. width bars (25%/50%/75%/100%) -->
|
||
<div class="sec">
|
||
<div class="sec-t">5. width bars</div>
|
||
<div class="bar" style="width:108px;height:30px;background:#0052d9;margin-bottom:2px;">108 (25%)</div>
|
||
<div class="bar" style="width:215px;height:30px;background:#00a870;margin-bottom:2px;">215 (50%)</div>
|
||
<div class="bar" style="width:323px;height:30px;background:#ed7b2f;margin-bottom:2px;">323 (75%)</div>
|
||
<div class="bar" style="width:420px;height:30px;background:#e34d59;">420 (≈100%-10)</div>
|
||
</div>
|
||
|
||
<!-- 6. height bars -->
|
||
<div class="sec">
|
||
<div class="sec-t">6. height bars</div>
|
||
<div style="display:flex;gap:4px;align-items:flex-end;padding:0 4px;">
|
||
<div style="width:40px;height:20px;background:#0052d9;color:#fff;font-size:8px;display:flex;align-items:center;justify-content:center;">20</div>
|
||
<div style="width:40px;height:40px;background:#00a870;color:#fff;font-size:8px;display:flex;align-items:center;justify-content:center;">40</div>
|
||
<div style="width:40px;height:60px;background:#ed7b2f;color:#fff;font-size:8px;display:flex;align-items:center;justify-content:center;">60</div>
|
||
<div style="width:40px;height:80px;background:#e34d59;color:#fff;font-size:8px;display:flex;align-items:center;justify-content:center;">80</div>
|
||
<div style="width:40px;height:100px;background:#0052d9;color:#fff;font-size:8px;display:flex;align-items:center;justify-content:center;">100</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 7. padding -->
|
||
<div class="sec">
|
||
<div class="sec-t">7. padding</div>
|
||
<div style="display:flex;gap:4px;flex-wrap:wrap;padding:0 4px;">
|
||
<div style="padding:4px;background:#ecf2fe;border:1px solid #0052d9;font-size:9px;color:#0052d9;">p4</div>
|
||
<div style="padding:8px;background:#ecf2fe;border:1px solid #0052d9;font-size:9px;color:#0052d9;">p8</div>
|
||
<div style="padding:12px;background:#ecf2fe;border:1px solid #0052d9;font-size:9px;color:#0052d9;">p12</div>
|
||
<div style="padding:16px;background:#ecf2fe;border:1px solid #0052d9;font-size:9px;color:#0052d9;">p16</div>
|
||
<div style="padding:20px;background:#ecf2fe;border:1px solid #0052d9;font-size:9px;color:#0052d9;">p20</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 8. margin -->
|
||
<div class="sec">
|
||
<div class="sec-t">8. margin</div>
|
||
<div style="background:#f0f0f0;padding:2px 0;">
|
||
<div style="margin-left:0;width:80px;height:20px;background:#0052d9;color:#fff;font-size:8px;display:flex;align-items:center;padding-left:2px;margin-bottom:2px;">ml:0</div>
|
||
<div style="margin-left:10px;width:80px;height:20px;background:#00a870;color:#fff;font-size:8px;display:flex;align-items:center;padding-left:2px;margin-bottom:2px;">ml:10</div>
|
||
<div style="margin-left:20px;width:80px;height:20px;background:#ed7b2f;color:#fff;font-size:8px;display:flex;align-items:center;padding-left:2px;margin-bottom:2px;">ml:20</div>
|
||
<div style="margin-left:40px;width:80px;height:20px;background:#e34d59;color:#fff;font-size:8px;display:flex;align-items:center;padding-left:2px;">ml:40</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 9. border-radius -->
|
||
<div class="sec">
|
||
<div class="sec-t">9. border-radius</div>
|
||
<div style="display:flex;gap:6px;flex-wrap:wrap;padding:0 4px;">
|
||
<div style="width:40px;height:40px;border-radius:2px;background:#00a870;color:#fff;font-size:8px;display:flex;align-items:center;justify-content:center;">r2</div>
|
||
<div style="width:40px;height:40px;border-radius:4px;background:#00a870;color:#fff;font-size:8px;display:flex;align-items:center;justify-content:center;">r4</div>
|
||
<div style="width:40px;height:40px;border-radius:8px;background:#00a870;color:#fff;font-size:8px;display:flex;align-items:center;justify-content:center;">r8</div>
|
||
<div style="width:40px;height:40px;border-radius:12px;background:#00a870;color:#fff;font-size:8px;display:flex;align-items:center;justify-content:center;">r12</div>
|
||
<div style="width:40px;height:40px;border-radius:20px;background:#00a870;color:#fff;font-size:8px;display:flex;align-items:center;justify-content:center;">r20</div>
|
||
<div style="width:40px;height:40px;border-radius:50%;background:#00a870;color:#fff;font-size:8px;display:flex;align-items:center;justify-content:center;">50%</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 10. border-width -->
|
||
<div class="sec">
|
||
<div class="sec-t">10. border-width</div>
|
||
<div style="display:flex;gap:6px;padding:0 4px;">
|
||
<div style="width:50px;height:30px;border:1px solid #333;font-size:8px;display:flex;align-items:center;justify-content:center;">1px</div>
|
||
<div style="width:50px;height:30px;border:2px solid #333;font-size:8px;display:flex;align-items:center;justify-content:center;">2px</div>
|
||
<div style="width:50px;height:30px;border:3px solid #333;font-size:8px;display:flex;align-items:center;justify-content:center;">3px</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 11. gap -->
|
||
<div class="sec">
|
||
<div class="sec-t">11. gap</div>
|
||
<div style="padding:0 4px;">
|
||
<div style="font-size:9px;color:#999;">gap:4px</div>
|
||
<div style="display:flex;gap:4px;margin-bottom:4px;">
|
||
<div style="width:24px;height:24px;background:#ed7b2f;"></div>
|
||
<div style="width:24px;height:24px;background:#ed7b2f;"></div>
|
||
<div style="width:24px;height:24px;background:#ed7b2f;"></div>
|
||
<div style="width:24px;height:24px;background:#ed7b2f;"></div>
|
||
<div style="width:24px;height:24px;background:#ed7b2f;"></div>
|
||
</div>
|
||
<div style="font-size:9px;color:#999;">gap:8px</div>
|
||
<div style="display:flex;gap:8px;margin-bottom:4px;">
|
||
<div style="width:24px;height:24px;background:#ed7b2f;"></div>
|
||
<div style="width:24px;height:24px;background:#ed7b2f;"></div>
|
||
<div style="width:24px;height:24px;background:#ed7b2f;"></div>
|
||
<div style="width:24px;height:24px;background:#ed7b2f;"></div>
|
||
<div style="width:24px;height:24px;background:#ed7b2f;"></div>
|
||
</div>
|
||
<div style="font-size:9px;color:#999;">gap:12px</div>
|
||
<div style="display:flex;gap:12px;margin-bottom:4px;">
|
||
<div style="width:24px;height:24px;background:#ed7b2f;"></div>
|
||
<div style="width:24px;height:24px;background:#ed7b2f;"></div>
|
||
<div style="width:24px;height:24px;background:#ed7b2f;"></div>
|
||
<div style="width:24px;height:24px;background:#ed7b2f;"></div>
|
||
<div style="width:24px;height:24px;background:#ed7b2f;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 12. box-shadow -->
|
||
<div class="sec">
|
||
<div class="sec-t">12. box-shadow</div>
|
||
<div style="display:flex;gap:10px;padding:4px;">
|
||
<div style="width:60px;height:40px;background:#fff;border-radius:6px;box-shadow:0 1px 3px rgba(0,0,0,0.08);font-size:8px;display:flex;align-items:center;justify-content:center;color:#999;">sm</div>
|
||
<div style="width:60px;height:40px;background:#fff;border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,0.1);font-size:8px;display:flex;align-items:center;justify-content:center;color:#999;">md</div>
|
||
<div style="width:60px;height:40px;background:#fff;border-radius:6px;box-shadow:0 8px 24px rgba(0,0,0,0.12);font-size:8px;display:flex;align-items:center;justify-content:center;color:#999;">lg</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 13. 色板 -->
|
||
<div class="sec">
|
||
<div class="sec-t">13. colors</div>
|
||
<div style="display:flex;gap:2px;flex-wrap:wrap;padding:0 4px;">
|
||
<div style="width:36px;height:20px;background:#0052d9;border-radius:2px;color:#fff;font-size:7px;display:flex;align-items:center;justify-content:center;">pri</div>
|
||
<div style="width:36px;height:20px;background:#00a870;border-radius:2px;color:#fff;font-size:7px;display:flex;align-items:center;justify-content:center;">suc</div>
|
||
<div style="width:36px;height:20px;background:#ed7b2f;border-radius:2px;color:#fff;font-size:7px;display:flex;align-items:center;justify-content:center;">wrn</div>
|
||
<div style="width:36px;height:20px;background:#e34d59;border-radius:2px;color:#fff;font-size:7px;display:flex;align-items:center;justify-content:center;">err</div>
|
||
<div style="width:36px;height:20px;background:#f5f5f5;border-radius:2px;color:#333;font-size:7px;display:flex;align-items:center;justify-content:center;">g1</div>
|
||
<div style="width:36px;height:20px;background:#eee;border-radius:2px;color:#333;font-size:7px;display:flex;align-items:center;justify-content:center;">g2</div>
|
||
<div style="width:36px;height:20px;background:#999;border-radius:2px;color:#fff;font-size:7px;display:flex;align-items:center;justify-content:center;">g6</div>
|
||
<div style="width:36px;height:20px;background:#333;border-radius:2px;color:#fff;font-size:7px;display:flex;align-items:center;justify-content:center;">g13</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 14. text-align -->
|
||
<div class="sec">
|
||
<div class="sec-t">14. text-align</div>
|
||
<div style="font-size:12px;text-align:left;background:#ecf2fe;padding:2px 4px;margin-bottom:1px;margin-right:10px;">left 左对齐</div>
|
||
<div style="font-size:12px;text-align:center;background:#e8f8f0;padding:2px 4px;margin-bottom:1px;margin-right:10px;">center 居中</div>
|
||
<div style="font-size:12px;text-align:right;background:#ecf2fe;padding:2px 4px;margin-right:10px;">right 右对齐</div>
|
||
</div>
|
||
|
||
<!-- 15. text-overflow -->
|
||
<div class="sec">
|
||
<div class="sec-t">15. text-overflow</div>
|
||
<div style="width:200px;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:#ecf2fe;padding:2px 4px;margin-bottom:2px;">这是一段很长的文字用于测试文本溢出省略号效果展示</div>
|
||
<div style="width:200px;font-size:12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;background:#e8f8f0;padding:2px 4px;line-height:1.4;">这是一段很长的文字用于测试多行文本溢出省略号效果展示两行截断</div>
|
||
</div>
|
||
|
||
<!-- 16. flex布局 -->
|
||
<div class="sec">
|
||
<div class="sec-t">16. flex layout</div>
|
||
<div style="padding:0 4px;">
|
||
<div style="font-size:9px;color:#999;">space-between</div>
|
||
<div style="display:flex;justify-content:space-between;margin-bottom:4px;">
|
||
<div style="width:50px;height:24px;background:#0052d9;"></div>
|
||
<div style="width:50px;height:24px;background:#00a870;"></div>
|
||
<div style="width:50px;height:24px;background:#ed7b2f;"></div>
|
||
</div>
|
||
<div style="font-size:9px;color:#999;">space-around</div>
|
||
<div style="display:flex;justify-content:space-around;margin-bottom:4px;">
|
||
<div style="width:50px;height:24px;background:#0052d9;"></div>
|
||
<div style="width:50px;height:24px;background:#00a870;"></div>
|
||
<div style="width:50px;height:24px;background:#ed7b2f;"></div>
|
||
</div>
|
||
<div style="font-size:9px;color:#999;">center</div>
|
||
<div style="display:flex;justify-content:center;gap:8px;">
|
||
<div style="width:50px;height:24px;background:#0052d9;"></div>
|
||
<div style="width:50px;height:24px;background:#00a870;"></div>
|
||
<div style="width:50px;height:24px;background:#ed7b2f;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 17. 综合卡片 -->
|
||
<div class="sec">
|
||
<div class="sec-t">17. card</div>
|
||
<div style="background:#fff;border-radius:8px;padding:10px;margin:0 4px;box-shadow:0 1px 4px rgba(0,0,0,0.06);">
|
||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;">
|
||
<span style="font-size:14px;font-weight:600;">经营一览</span>
|
||
<span style="font-size:9px;background:#ecf2fe;color:#0052d9;padding:2px 6px;border-radius:4px;">本月</span>
|
||
</div>
|
||
<div style="font-size:22px;font-weight:600;margin-bottom:4px;">¥128,560.00</div>
|
||
<div style="font-size:11px;color:#999;">较上月 +12.5%</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 18. 列表项 -->
|
||
<div class="sec">
|
||
<div class="sec-t">18. list items</div>
|
||
<div style="padding:0 4px;">
|
||
<div style="display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid #eee;">
|
||
<span style="font-size:13px;">台费收入</span><span style="font-size:13px;font-weight:600;">¥85,200</span>
|
||
</div>
|
||
<div style="display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid #eee;">
|
||
<span style="font-size:13px;">商品收入</span><span style="font-size:13px;font-weight:600;">¥32,100</span>
|
||
</div>
|
||
<div style="display:flex;justify-content:space-between;align-items:center;padding:6px 0;">
|
||
<span style="font-size:13px;">助教收入</span><span style="font-size:13px;font-weight:600;">¥11,260</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 19. 全宽色条 -->
|
||
<div class="sec" style="border-bottom:none;">
|
||
<div class="sec-t">19. full-width bars</div>
|
||
<div style="display:flex;height:16px;margin-right:10px;">
|
||
<div style="flex:1;background:#0052d9;"></div>
|
||
<div style="flex:1;background:#00a870;"></div>
|
||
<div style="flex:1;background:#ed7b2f;"></div>
|
||
<div style="flex:1;background:#e34d59;"></div>
|
||
</div>
|
||
</div>
|
||
|
||
</body>
|
||
</html> |