101 lines
4.1 KiB
HTML
101 lines
4.1 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>xRadioButton 分段切换预览</title>
|
||
<style>
|
||
* { box-sizing: border-box; }
|
||
body { margin:0; padding:22px 16px 30px; background:#F3F4F6;
|
||
font-family:-apple-system,"PingFang SC","Microsoft YaHei","Helvetica Neue",sans-serif; }
|
||
h1 { font-size:15px; font-weight:600; color:#1F2937; margin:0 0 4px; }
|
||
.sub { font-size:12px; color:#6B7280; margin:0 0 18px; }
|
||
.case { margin-bottom:18px; }
|
||
.case-t { font-size:12px; color:#6B7280; margin-bottom:7px; }
|
||
.phone { width:375px; padding:0 16px; }
|
||
.track { display:flex; flex-direction:row; height:32px; padding:2px; border-radius:11px;
|
||
background:#E5E7EB; overflow:visible; }
|
||
.wrap { position:relative; flex:1; height:100%; }
|
||
.btns { position:absolute; z-index:5; left:0; top:0; width:100%; height:100%; display:flex; flex-direction:row; }
|
||
.item { flex:1; display:flex; align-items:center; justify-content:center; padding:0 12px;
|
||
font-size:11px; font-weight:bold; white-space:nowrap; overflow:hidden;
|
||
text-overflow:ellipsis; cursor:pointer; user-select:none; position:relative; z-index:2;
|
||
color:#6B7280; }
|
||
.item.on { color:#FFFFFF; }
|
||
.bg { position:absolute; left:0; top:0; height:100%; background:#2563EB; border-radius:18px;
|
||
transition:transform .35s cubic-bezier(.18,.89,.32,1); z-index:1; }
|
||
.old { display:flex; flex-direction:row; padding-bottom:2px; }
|
||
.chip { display:flex; align-items:center; height:28px; padding:0 11px; border-radius:9px;
|
||
font-size:13.4px; font-weight:bold; color:#6B7280; background:#FFFFFF;
|
||
border:1px solid #E5E7EB; margin-right:7px; }
|
||
.chip.on { background:#2563EB; border-color:#2563EB; color:#FFFFFF; }
|
||
.note { font-size:11px; color:#9CA3AF; margin-top:6px; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<h1>xRadioButton 分段切换（替换 hr-row + hr-chip）</h1>
|
||
<p class="sub">5 处筛选控件已改造：学习中心 / 错题本 / 消息中心(救护端) / 消息中心(物资端) / 处置记录</p>
|
||
|
||
<div class="case">
|
||
<div class="case-t">改造前 · hr-row + hr-chip（横向滚动，可左右拖）</div>
|
||
<div class="phone">
|
||
<div class="old">
|
||
<div class="chip on">全部 12</div>
|
||
<div class="chip">心肺复苏 5</div>
|
||
<div class="chip">气道管理 4</div>
|
||
<div class="chip">AED 3</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="case">
|
||
<div class="case-t">改造后 · x-radio-button（等宽分段，滑块跟随；点击可试）</div>
|
||
<div class="phone" id="ph"></div>
|
||
<div class="note">轨道 64rpx / 内间隙 4rpx / 圆角 22rpx / 字号 22rpx 加粗 · 底色 #E5E7EB ↦ 选中 #2563EB</div>
|
||
</div>
|
||
|
||
<div class="case">
|
||
<div class="case-t">其它四处（默认选中第 1 项，点击可试）</div>
|
||
<div class="phone" id="ph2"></div>
|
||
</div>
|
||
|
||
<script>
|
||
var sets = [
|
||
['全部 12','心肺复苏 5','气道管理 4','AED 3'],
|
||
['全部 5','派单通知 2','系统消息 3'],
|
||
['全部 9','库存预警 4','借用审批 3','系统 2'],
|
||
['全部 4','止血 1','循环 1','分级 2']
|
||
];
|
||
function build(host, labels, i0){
|
||
var t = document.createElement('div'); t.className = 'track';
|
||
var w = document.createElement('div'); w.className = 'wrap';
|
||
var b = document.createElement('div'); b.className = 'btns';
|
||
var bg = document.createElement('div'); bg.className = 'bg';
|
||
bg.style.width = (100/labels.length) + '%';
|
||
labels.forEach(function(s, i){
|
||
var it = document.createElement('div');
|
||
it.className = 'item' + (i === i0 ? ' on' : '');
|
||
it.textContent = s;
|
||
it.onclick = function(){ select(i); };
|
||
b.appendChild(it);
|
||
});
|
||
function select(i){
|
||
bg.style.transform = 'translateX(' + (i*100) + '%)';
|
||
var items = b.querySelectorAll('.item');
|
||
for (var k=0;k<items.length;k++){
|
||
items[k].className = 'item' + (k === i ? ' on' : '');
|
||
}
|
||
}
|
||
w.appendChild(b); w.appendChild(bg); t.appendChild(w); host.appendChild(t);
|
||
select(i0);
|
||
}
|
||
build(document.getElementById('ph'), sets[0], 0);
|
||
sets.slice(1).forEach(function(s){
|
||
var c = document.createElement('div');
|
||
c.style.marginTop = '10px';
|
||
document.getElementById('ph2').appendChild(c);
|
||
build(c, s, 0);
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|