r04/data.html · 约 2204 字符
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>List 列表</h3>
19 <div class="list"><div class="kv"><span>今日访问</span><b>1,284</b></div><div class="kv"><span>新增用户</span><b>86</b></div><div class="kv"><span>转化率</span><b>12.4%</b></div><div class="kv"><span>待处理</span><b>3</b></div></div>
20</div>
21<div class="card">
22 <h3><span class="dot"></span>Card 卡片</h3>
23 <div class="grid"><div class="gcard"><div class="em">📈</div><div class="t">周报</div><div class="d">本周增长 +18%</div></div><div class="gcard"><div class="em">🏆</div><div class="t">榜单</div><div class="d">排名 No.2</div></div></div>
24</div>
25<div class="card">
26 <h3><span class="dot"></span>Progress 进度条</h3>
27 <div class="muted">下载进度</div><div class="prog"><i style="width:72%"></i></div>
28 <div class="muted">资料完整度</div><div class="prog"><i style="width:45%"></i></div>
29 <div class="muted">会员进度</div><div class="prog"><i style="width:90%"></i></div>
30</div>
31<div class="card">
32 <h3><span class="dot"></span>Steps 步骤条</h3>
33 <div class="steps">
34 <div class="st done"><div class="cir"></div>提交</div>
35 <div class="st done"><div class="cir"></div>审核</div>
36 <div class="st"><div class="cir">3</div>发货</div>
37 <div class="st"><div class="cir">4</div>完成</div>
38 </div>
39</div>
40
41 </main>
42 <nav class="nav">
43 <a href="index.html" class="">🏠<span>总览</span></a>
44 <a href="basic.html" class="">🧩<span>组件</span></a>
45 <a href="form.html" class="">📝<span>表单</span></a>
46 <a href="feedback.html" class="">💬<span>反馈</span></a>
47 <a href="about.html" class="">ℹ️<span>说明</span></a>
48 </nav>
49</div>
50<script></script>
51</body>
52</html>