1

2026-09-24 16:25:22 +08:00
commit 7428184f01
1198 changed files with 314515 additions and 0 deletions
@@ -0,0 +1,100 @@
+<!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>