85 lines
3.7 KiB
HTML
85 lines
3.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 · Collapse (H5)</title>
|
||
<link rel="stylesheet" href="../.design_library/aurora-admin/colors_and_type.css">
|
||
<link rel="stylesheet" href="./Collapse.css">
|
||
<style>
|
||
.demo { padding: 24px; background: #F5F7FA; font-family: var(--font-family); }
|
||
h1 { font-size: 20px; margin: 0 0 4px; color: #1F2329; }
|
||
.sub { color: #8C8C8C; margin: 0 0 24px; font-size: 12px; }
|
||
.demo-block { max-width: 560px; margin-bottom: 24px; }
|
||
.demo-block > .hint { color: #8C8C8C; font-size: 12px; margin: 0 0 12px; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="demo">
|
||
<h1>Aurora Admin · Collapse 组件（纯 H5）</h1>
|
||
<p class="sub">对齐规范：标题栏高40px、左侧箭头旋转90°、内容分割线、手风琴模式</p>
|
||
|
||
<div class="demo-block">
|
||
<p class="hint">手风琴模式（同时仅展开一个）</p>
|
||
<div class="aa-collapse" data-accordion>
|
||
<div class="aa-collapse-item is-open">
|
||
<div class="aa-collapse-header"><span class="aa-collapse-arrow">▶</span><span class="aa-collapse-title">基本设置</span></div>
|
||
<div class="aa-collapse-content">系统名称、主题色、默认语言等基础配置。</div>
|
||
</div>
|
||
<div class="aa-collapse-item">
|
||
<div class="aa-collapse-header"><span class="aa-collapse-arrow">▶</span><span class="aa-collapse-title">通知设置</span></div>
|
||
<div class="aa-collapse-content" hidden>邮件、短信、站内信通知开关。</div>
|
||
</div>
|
||
<div class="aa-collapse-item">
|
||
<div class="aa-collapse-header"><span class="aa-collapse-arrow">▶</span><span class="aa-collapse-title">安全设置</span></div>
|
||
<div class="aa-collapse-content" hidden>登录保护、密码策略、IP 白名单。</div>
|
||
</div>
|
||
<div class="aa-collapse-item is-disabled">
|
||
<div class="aa-collapse-header"><span class="aa-collapse-arrow">▶</span><span class="aa-collapse-title">高级（无权限）</span></div>
|
||
<div class="aa-collapse-content" hidden>仅管理员可见的高级选项。</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="demo-block">
|
||
<p class="hint">非手风琴（可同时展开多个）</p>
|
||
<div class="aa-collapse">
|
||
<div class="aa-collapse-item is-open">
|
||
<div class="aa-collapse-header"><span class="aa-collapse-arrow">▶</span><span class="aa-collapse-title">订单管理</span></div>
|
||
<div class="aa-collapse-content">查看与处理所有订单。</div>
|
||
</div>
|
||
<div class="aa-collapse-item is-open">
|
||
<div class="aa-collapse-header"><span class="aa-collapse-arrow">▶</span><span class="aa-collapse-title">退款管理</span></div>
|
||
<div class="aa-collapse-content">退款审核与到账记录。</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
document.querySelectorAll('.aa-collapse').forEach(root => {
|
||
const accordion = root.hasAttribute('data-accordion');
|
||
root.addEventListener('click', (e) => {
|
||
const header = e.target.closest('.aa-collapse-header');
|
||
if (!header) return;
|
||
const item = header.parentElement;
|
||
if (item.classList.contains('is-disabled')) return;
|
||
const open = item.classList.toggle('is-open');
|
||
const content = item.querySelector('.aa-collapse-content');
|
||
if (content) content.hidden = !open;
|
||
|
||
if (accordion && open) {
|
||
root.querySelectorAll('.aa-collapse-item.is-open').forEach(other => {
|
||
if (other !== item) {
|
||
other.classList.remove('is-open');
|
||
const c = other.querySelector('.aa-collapse-content');
|
||
if (c) c.hidden = true;
|
||
}
|
||
});
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|