r04/basic.html · 约 3122 字符
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>Button 按钮</h3>
19 <div class="row"><button class="btn btn-primary">主要按钮</button><button class="btn btn-secondary">次要</button><button class="btn btn-ghost">描边</button><button class="btn btn-danger">危险</button></div>
20 <div class="row" style="margin-top:10px;"><button class="btn btn-primary btn-sm">小号</button><button class="btn btn-primary btn-block">块级按钮</button></div>
21</div>
22<div class="card">
23 <h3><span class="dot"></span>Cell 单元格</h3>
24 <div class="cell"><div class="ic">👤</div><div><div class="tt">个人资料</div><div class="ds">查看与编辑账户信息</div></div><div class="ar">›</div></div>
25 <div class="cell"><div class="ic">🔔</div><div><div class="tt">消息通知</div><div class="ds">推送与提醒设置</div></div><div class="ar">›</div></div>
26 <div class="cell"><div class="ic">⚙️</div><div><div class="tt">通用设置</div><div class="ds">主题、语言、隐私</div></div><div class="ar">›</div></div>
27</div>
28<div class="card">
29 <h3><span class="dot"></span>Tag 标签 & Badge 角标</h3>
30 <div><span class="tag">默认</span><span class="tag g">成功</span><span class="tag r">警告</span><span class="tag v">推荐</span></div>
31 <div style="margin-top:14px;" class="row">
32 <div class="badge"><div class="ic" style="width:40px;height:40px;font-size:20px;">📧</div><div class="b">5</div></div>
33 <div class="badge"><div class="ic" style="width:40px;height:40px;font-size:20px;">🔔</div><div class="b">99+</div></div>
34 <div class="badge"><div class="ic" style="width:40px;height:40px;font-size:20px;">🛒</div><div class="b">2</div></div>
35 </div>
36</div>
37<div class="card">
38 <h3><span class="dot"></span>Icon 图标</h3>
39 <div class="igrid">
40 <div class="it">⭐<span>star</span></div><div class="it">❤️<span>like</span></div><div class="it">🔍<span>search</span></div><div class="it">🏠<span>home</span></div><div class="it">⚙️<span>set</span></div>
41 <div class="it">📷<span>camera</span></div><div class="it">📍<span>pin</span></div><div class="it">🔒<span>lock</span></div><div class="it">✅<span>ok</span></div><div class="it">📎<span>file</span></div>
42 </div>
43</div>
44
45 </main>
46 <nav class="nav">
47 <a href="index.html" class="">🏠<span>总览</span></a>
48 <a href="basic.html" class="on">🧩<span>组件</span></a>
49 <a href="form.html" class="">📝<span>表单</span></a>
50 <a href="feedback.html" class="">💬<span>反馈</span></a>
51 <a href="about.html" class="">ℹ️<span>说明</span></a>
52 </nav>
53</div>
54<script></script>
55</body>
56</html>