r83/add.html · 约 2419 字符
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="seg" style="margin-bottom:14px"><div class="sg on"><button>支出</button></div><div class="sg"><button>收入</button></div></div>
17<div class="card" style="text-align:center">
18 <div class="muted">金额</div>
19 <div style="font-size:40px;font-weight:800;margin:6px 0;color:var(--tx)">¥ 0.00</div>
20 <div class="search" style="margin:0">点击数字键盘输入金额</div>
21</div>
22<div class="card">
23 <div class="sec-title"><span>🏷️</span> 分类</div>
24 <div class="cats">
25 <div class="it on"><span class="e">🍜</span>餐饮</div><div class="it"><span class="e">🚌</span>交通</div>
26 <div class="it"><span class="e">🛒</span>购物</div><div class="it"><span class="e">🎬</span>娱乐</div>
27 <div class="it"><span class="e">📱</span>生活</div><div class="it"><span class="e">🏥</span>医疗</div>
28 <div class="it"><span class="e">📚</span>学习</div><div class="it"><span class="e">💰</span>其他</div>
29 </div>
30</div>
31<div class="card">
32 <div class="field" style="margin-bottom:0"><div class="lab">账户</div>
33 <div class="search" style="margin:0">💳 招商银行（储蓄卡） ›</div></div>
34</div>
35<div class="card">
36 <div class="field" style="margin-bottom:0"><div class="lab">备注</div>
37 <input class="input" placeholder="添加备注，如：午餐"></div>
38</div>
39<a class="btn full" href="bills.html" style="text-decoration:none;text-align:center">保存</a>
40<div class="muted" style="text-align:center">保存即写入本月账单（演示数据为测试模拟数据）</div>
41</main>
42 <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=" on" 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>
43</div>
44<script></script>
45</body>
46</html>