r04/index.html · 约 2796 字符
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="top" style="position:static;border-radius:0;margin:-14px -14px 14px;background:var(--primary-grad);">
18 <div>
19 <div style="font-size:20px;font-weight:800;">移动端通用 UI 组件库</div>
20 <div style="font-size:12px;opacity:.9;margin-top:4px;">零依赖 · 原生 CSS · 30+ 组件 · 主题可定制</div>
21 </div>
22</div>
23<div class="stats">
24 <div class="s"><b>30+</b><span>组件数量</span></div>
25 <div class="s"><b>0</b><span>框架依赖</span></div>
26 <div class="s"><b>6</b><span>模块分类</span></div>
27 <div class="s"><b>🌗</b><span>主题换肤</span></div>
28</div>
29<div class="card">
30 <h3><span class="dot"></span>组件模块</h3>
31 <div class="grid">
32 <a class="gcard" href="basic.html"><div class="em">🧱</div><div class="t">基础组件</div><div class="d">Button / Cell / Tag</div></a>
33 <a class="gcard" href="form.html"><div class="em">📝</div><div class="t">表单组件</div><div class="d">Input / Switch</div></a>
34 <a class="gcard" href="feedback.html"><div class="em">💬</div><div class="t">反馈组件</div><div class="d">Toast / Popup</div></a>
35 <a class="gcard" href="nav.html"><div class="em">🧭</div><div class="t">导航组件</div><div class="d">Tabs / Swiper</div></a>
36 <a class="gcard" href="data.html"><div class="em">📊</div><div class="t">数据展示</div><div class="d">List / Progress</div></a>
37 <a class="gcard" href="theme.html"><div class="em">🌗</div><div class="t">主题定制</div><div class="d">CSS 变量换肤</div></a>
38 </div>
39</div>
40<div class="card">
41 <h3><span class="dot"></span>快速体验</h3>
42 <p class="muted">点击下方任意模块查看组件示例，或前往「实战示例」看组件组合效果。</p>
43 <div class="row" style="margin-top:10px;">
44 <a class="btn btn-primary" href="showcase.html">🚀 实战示例</a>
45 <a class="btn btn-ghost" href="about.html">使用说明</a>
46 </div>
47</div>
48
49 </main>
50 <nav class="nav">
51 <a href="index.html" class="on">🏠<span>总览</span></a>
52 <a href="basic.html" class="">🧩<span>组件</span></a>
53 <a href="form.html" class="">📝<span>表单</span></a>
54 <a href="feedback.html" class="">💬<span>反馈</span></a>
55 <a href="about.html" class="">ℹ️<span>说明</span></a>
56 </nav>
57</div>
58<script></script>
59</body>
60</html>