💻 代码预览 · 小草记账本

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="budget-overview">
7  <div class="bo-label">本月总预算</div>
8  <div class="bo-amount">¥7,300</div>
9  <div class="bo-bar"><div class="bo-fill" style="width:78%"></div></div>
10  <div class="bo-meta"><span>已用 ¥5,683</span><span>剩余 ¥1,617</span></div>
11</div>
12<div class="section-title">💰 分类预算</div>
13<div id="budget-list"></div>
14<div class="card" style="text-align:center;cursor:pointer" onclick="alert('＋ 新增预算分类')">
15  <span style="color:var(--primary);font-size:14px">＋ 新增预算分类</span>
16</div>
17<div style="height:70px"></div>
18<div class="tabbar">
19  <a href="index.html"><span class="icon">📒</span>记账</a>
20  <a href="record.html"><span class="icon">✏️</span>记一笔</a>
21  <a href="stats.html"><span class="icon">📊</span>统计</a>
22  <a href="mine.html"><span class="icon">👤</span>我的</a>
23</div>
24<script src="data.js"></script>
25<script src="app.js"></script>
26<script>renderBudget();</script>
27</body></html>