r04/feedback.html · 约 4006 字符
1<!DOCTYPE html>
2<html lang="zh-CN">
3<head>
4<meta charset="utf-8">
5<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
6<title>反馈组件</title>
7<link rel="stylesheet" href="style.css">
8</head>
9<body>
10<div class="app">
11 <header class="top">
12 <div class="top-title">反馈组件</div>
13 <div class="sub">🎨 UI Kit</div>
14 </header>
15 <main class="main">
16
17<div class="card">
18 <h3><span class="dot"></span>Popup 弹层</h3>
19 <p class="muted">点击按钮从底部弹出操作面板。</p>
20 <button class="btn btn-primary" id="openSheet">打开底部弹层</button>
21</div>
22<div class="card">
23 <h3><span class="dot"></span>Toast 轻提示</h3>
24 <p class="muted">短暂浮层提示，2 秒后自动消失。</p>
25 <div class="row"><button class="btn btn-secondary" id="toast1">默认提示</button><button class="btn btn-ghost" id="toast2">成功提示</button></div>
26</div>
27<div class="card">
28 <h3><span class="dot"></span>Dialog 对话框</h3>
29 <button class="btn btn-danger" id="openDlg">删除确认</button>
30</div>
31<div class="card">
32 <h3><span class="dot"></span>Loading 加载</h3>
33 <div class="row" style="align-items:center;"><div class="sp" style="width:28px;height:28px;border:3px solid #e2e8f0;border-top-color:var(--primary);border-radius:50%;animation:spin 1s linear infinite;"></div><span class="muted">数据加载中…</span></div>
34 <style>@keyframes spin{to{transform:rotate(360deg)}}</style>
35</div>
36
37<div class="mask" id="sheetMask"><div class="sheet"><h4>分享到</h4>
38 <div class="grid"><div class="gcard" style="text-align:center"><div class="em">💬</div><div class="t">微信</div></div><div class="gcard" style="text-align:center"><div class="em">👬</div><div class="t">朋友圈</div></div><div class="gcard" style="text-align:center"><div class="em">🔗</div><div class="t">复制链接</div></div><div class="gcard" style="text-align:center"><div class="em">📤</div><div class="t">更多</div></div></div>
39 <button class="btn btn-secondary btn-block" style="margin-top:14px;" id="closeSheet">取消</button>
40</div></div>
41
42<div class="dialog-mask" id="dlgMask"><div class="dialog"><div style="font-size:34px;">⚠️</div><p>确定要删除这条记录吗？此操作不可恢复。</p>
43 <div class="row"><button class="btn btn-secondary" id="dlgCancel">取消</button><button class="btn btn-danger" id="dlgOk">删除</button></div>
44</div></div>
45
46<div class="toast" id="toast"></div>
47
48 </main>
49 <nav class="nav">
50 <a href="index.html" class="">🏠<span>总览</span></a>
51 <a href="basic.html" class="">🧩<span>组件</span></a>
52 <a href="form.html" class="">📝<span>表单</span></a>
53 <a href="feedback.html" class="on">💬<span>反馈</span></a>
54 <a href="about.html" class="">ℹ️<span>说明</span></a>
55 </nav>
56</div>
57<script>
58function showToast(msg){var t=document.getElementById('toast');t.textContent=msg;t.classList.add('show');setTimeout(function(){t.classList.remove('show');},1800);}
59document.getElementById('openSheet').onclick=function(){document.getElementById('sheetMask').classList.add('show');};
60document.getElementById('closeSheet').onclick=document.getElementById('sheetMask').onclick=function(e){if(e.target.id==='sheetMask'||e.target.id==='closeSheet')document.getElementById('sheetMask').classList.remove('show');};
61document.getElementById('toast1').onclick=function(){showToast('这是一条提示消息');};
62document.getElementById('toast2').onclick=function(){showToast('✅ 操作成功');};
63document.getElementById('openDlg').onclick=function(){document.getElementById('dlgMask').classList.add('show');};
64document.getElementById('dlgCancel').onclick=function(){document.getElementById('dlgMask').classList.remove('show');};
65document.getElementById('dlgOk').onclick=function(){document.getElementById('dlgMask').classList.remove('show');showToast('已删除');};
66</script>
67</body>
68</html>