💻 代码预览 · 小草记账本

1<!DOCTYPE html><html lang="zh-CN"><head>
2<meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
3<title>记一笔 - 小草记账本</title><link rel="stylesheet" href="style.css">
4</head><body>
5<div class="header"><span class="back" onclick="history.back()">‹</span><h1>记一笔</h1><span class="right"></span></div>
6<div class="record-tabs">
7  <div class="rt-btn active" id="tab-out" onclick="switchTab('out')">支出</div>
8  <div class="rt-btn" id="tab-in" onclick="switchTab('in')">收入</div>
9</div>
10<div class="amount-input">
11  <div class="ai-label">金额</div>
12  <div class="ai-value">¥<span id="amount-val">0.00</span></div>
13</div>
14<div class="section-title">选择分类</div>
15<div class="cat-grid" id="cat-grid"></div>
16<div class="form-group">
17  <div class="fg-row"><span class="fg-label">备注</span><input type="text" id="note" placeholder="选填，记录用途"></div>
18  <div class="fg-row"><span class="fg-label">账户</span><input type="text" value="微信零钱" style="color:#999"></div>
19  <div class="fg-row"><span class="fg-label">日期</span><input type="text" value="2025-08-11" style="color:#999"></div>
20</div>
21<div class="numpad" style="background:#fff;margin:12px;border-radius:12px;overflow:hidden">
22  <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#f0f0f0">
23    ${['1','2','3','4','5','6','7','8','9','.','0','⌫'].map(k=>`<button onclick="press('${k}')" style="padding:16px;border:none;font-size:20px;background:#fff;cursor:pointer">${k}</button>`).join('')}
24  </div>
25  <button onclick="saveRecord()" style="width:100%;padding:16px;border:none;background:linear-gradient(135deg,#08979c,#13c2c2);color:#fff;font-size:16px;font-weight:600;cursor:pointer">保存</button>
26</div>
27<script src="data.js"></script>
28<script src="app.js"></script>
29<script>initRecord();</script>
30</body></html>