r05/cats.html · 约 2203 字符
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-l">记账小程序 · 苏晓</div>
13 <div class="top-r">分类管理</div>
14 </header>
15 <main class="main">
16<div class="card">
17 <div class="row" style="margin-bottom:8px"><div class="sec-title" style="margin:0"><span>💸</span> 支出分类</div><button class="btn sm">＋ 新增</button></div>
18 <div class="cats" style="grid-template-columns:repeat(4,1fr)">
19 <div class="it"><span class="e">🍜</span>餐饮</div><div class="it"><span class="e">🚌</span>交通</div>
20 <div class="it"><span class="e">🛒</span>购物</div><div class="it"><span class="e">🎬</span>娱乐</div>
21 <div class="it"><span class="e">📱</span>生活</div><div class="it"><span class="e">🏥</span>医疗</div>
22 <div class="it"><span class="e">📚</span>学习</div><div class="it"><span class="e">💰</span>其他</div>
23 </div>
24</div>
25<div class="card">
26 <div class="row" style="margin-bottom:8px"><div class="sec-title" style="margin:0"><span>💰</span> 收入分类</div><button class="btn sm">＋ 新增</button></div>
27 <div class="cats" style="grid-template-columns:repeat(4,1fr)">
28 <div class="it"><span class="e">💼</span>工资</div><div class="it"><span class="e">💡</span>兼职</div>
29 <div class="it"><span class="e">📈</span>理财</div><div class="it"><span class="e">🎁</span>红包</div>
30 </div>
31</div>
32<div class="card row"><div class="muted">长按可排序，左滑可删除（演示）</div></div>
33</main>
34 <nav class="nav"><a class="" href="index.html"><span class="ic">📒</span>总览</a><a class="" href="bills.html"><span class="ic">📋</span>流水</a><a class="" href="add.html"><span class="ic">➕</span>记一笔</a><a class="" href="budget.html"><span class="ic">🎯</span>预算</a><a class="" href="mine.html"><span class="ic">👤</span>我的</a></nav>
35</div>
36<script></script>
37</body>
38</html>