feat(P4): precompute移植+app.js sources双向回填+回归1003/1003+验收体积/文件/data.json
This commit is contained in:
@@ -0,0 +1,38 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Aurora Admin · RadioCard(普通 H5)</title>
|
||||
<link rel="stylesheet" href="../.design_library/aurora-admin/colors_and_type.css" />
|
||||
<link rel="stylesheet" href="RadioCard.css" />
|
||||
<style>body{margin:0;padding:24px;background: var(--au-color-page-bg);}</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="aa-radiocard-grid" role="radio" tabindex="0" id="app" style="grid-template-columns:repeat(3,1fr)"></div>
|
||||
|
||||
<script>
|
||||
var DATA = [
|
||||
{ label: '基础版', value: 'basic', desc: '适合个人与小团队,包含核心功能。', icon: '🟢' },
|
||||
{ label: '专业版', value: 'pro', desc: '进阶报表与权限管理,适合成长型企业。', icon: '🔵' },
|
||||
{ label: '旗舰版', value: 'max', desc: '全功能 + 专属支持,适合大型组织。', icon: '🟣' }
|
||||
];
|
||||
var selected = 'pro';
|
||||
|
||||
function render() {
|
||||
var root = document.getElementById('app');
|
||||
root.innerHTML = DATA.map(function (o) {
|
||||
return '<div class="aa-radiocard ' + (o.value === selected ? 'is-selected' : '') + '" role="radio" tabindex="0" data-value="' + o.value + '">' +
|
||||
'<div class="aa-radiocard-icon">' + (o.icon || '') + '</div>' +
|
||||
'<div class="aa-radiocard-body"><div class="aa-radiocard-title">' + o.label + '</div>' +
|
||||
'<div class="aa-radiocard-desc">' + o.desc + '</div></div>' +
|
||||
'<div class="aa-radiocard-mark" role="radio" tabindex="0"></div></div>';
|
||||
}).join('');
|
||||
root.querySelectorAll('.aa-radiocard').forEach(function (el) {
|
||||
el.addEventListener('click', function () { selected = el.dataset.value; render(); });
|
||||
});
|
||||
}
|
||||
render();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user