39 lines
1.7 KiB
HTML
39 lines
1.7 KiB
HTML
<!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:#F5F7FA;}</style>
|
||
</head>
|
||
<body>
|
||
<div class="aa-radiocard-grid" 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' : '') + '" 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"></div></div>';
|
||
}).join('');
|
||
root.querySelectorAll('.aa-radiocard').forEach(function (el) {
|
||
el.addEventListener('click', function () { selected = el.dataset.value; render(); });
|
||
});
|
||
}
|
||
render();
|
||
</script>
|
||
</body>
|
||
</html>
|