r110/budget.html · 约 7019 字符
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,viewport-fit=cover">
6<meta name="theme-color" content="#0f9d76">
7<title>预算管理 · 家有账家庭记账工具</title>
8<link rel="stylesheet" href="style.css">
9</head>
10<body data-page="budget">
11
12<div class="navbar grn"><a class="bk" href="index.html">‹</a><div class="tt">预算管理</div><div class="rt" data-sheet="#shBud">＋ 新增</div></div>
13
14<div class="card" style="text-align:center;padding:18px 14px 15px">
15 <div class="ring" id="bigRing" style="margin:0 auto"></div>
16 <div style="display:flex;margin-top:14px">
17 <div style="flex:1"><div class="fz11 muted">月度预算</div><div class="num" style="font-weight:800;font-size:15px">¥16,000</div></div>
18 <div style="flex:1;border-left:1px solid var(--border);border-right:1px solid var(--border)">
19 <div class="fz11 muted">已支出</div><div class="num pay" style="font-weight:800;font-size:15px">¥12,386.90</div></div>
20 <div style="flex:1"><div class="fz11 muted">可用余额</div><div class="num inc" style="font-weight:800;font-size:15px">¥3,613.10</div></div>
21 </div>
22</div>
23
24<div class="card tight" style="background:linear-gradient(135deg,#fff8e6,#fff3d6);border:1px solid #f6e2b0">
25 <div style="display:flex;align-items:center;gap:10px">
26 <div class="ico" style="background:#fff">⏳</div>
27 <div style="flex:1">
28 <div style="font-size:13.5px;font-weight:800;color:var(--accent-d)">本月还剩 25 天，日均可用 ¥144.52</div>
29 <div class="fz11" style="color:#a9761a;margin-top:2px">按当前速度预计月末超支 ¥1,280，建议压缩购物与聚餐</div>
30 </div>
31 </div>
32</div>
33
34<div class="sec"><h2>分类预算<small>8 项</small></h2><span class="more" data-tip="演示版：智能建议预算开发中">智能建议 ›</span></div>
35<div class="card" id="budList"></div>
36
37<div class="card">
38 <div class="ttl">🚨 超支预警 <span class="rt">1 项已超</span></div>
39 <div class="list">
40 <div class="it"><div class="ico" style="background:#fdeced">🛍️</div>
41 <div class="mn"><div class="n">购物 已超支 ¥182.00</div><div class="d">预算 ¥1,500 · 已用 ¥1,682（112%）</div></div>
42 <span class="tag r">超支</span></div>
43 <div class="it"><div class="ico" style="background:#fef3c7">🍜</div>
44 <div class="mn"><div class="n">餐饮 接近上限</div><div class="d">预算 ¥2,800 · 已用 ¥2,186（78%）</div></div>
45 <span class="tag a">预警</span></div>
46 <div class="it"><div class="ico" style="background:#e6f6ea">🚌</div>
47 <div class="mn"><div class="n">交通 控制良好</div><div class="d">预算 ¥600 · 已用 ¥386（64%）</div></div>
48 <span class="tag g">健康</span></div>
49 </div>
50</div>
51
52<div class="card">
53 <div class="ttl">⚙️ 预算规则</div>
54 <div class="frm">
55 <div class="fi"><div class="lb">预算周期</div><div class="vl">自然月（每月 1 日重置）</div><span class="ar" data-tip="演示版：支持自然月/发薪日周期">›</span></div>
56 <div class="fi"><div class="lb">超支提醒</div><div class="vl">达到 80% 时推送</div><span class="ar" data-tip="演示版：提醒阈值可调">›</span></div>
57 <div class="fi"><div class="lb">结余滚存</div><div class="vl">开启（结余累加到下月）</div><span class="ar" data-tip="演示版：滚存开关可切换">›</span></div>
58 <div class="fi"><div class="lb">不计预算</div><div class="vl">房贷、投资转账</div><span class="ar" data-tip="演示版：可勾选排除分类">›</span></div>
59 </div>
60</div>
61<div style="height:8px"></div>
62
63<div class="sheet" id="shBud">
64 <div class="sh"><h3>新增分类预算</h3><span class="x" data-close>✕</span></div>
65 <div class="grid5" id="pickCat" style="gap:6px;margin-bottom:12px"></div>
66 <div class="frm">
67 <div class="fi"><div class="lb">预算金额</div><input class="tx" id="budAmt" placeholder="请输入金额" inputmode="decimal"></div>
68 <div class="fi"><div class="lb">周期</div><div class="vl">按月</div></div>
69 </div>
70 <button class="btn pri block" style="margin-top:13px" id="budOk">确认添加</button>
71</div>
72
73
74<div class="mask" id="mask"></div>
75<div class="toast" id="toast"></div>
76<script src="data.js"></script>
77<script src="app.js"></script>
78<script>
79
80$('#bigRing').innerHTML = ringSvg(BUDGET_TOTAL.used / BUDGET_TOTAL.limit, '#f59e0b', 136, 13) +
81 '<div class="in"><div class="p">77.4%</div><div class="t">预算已用</div></div>';
82$('#bigRing').style.width = '136px'; $('#bigRing').style.height = '136px';
83
84function renderBud() {
85 $('#budList').innerHTML = BUDGETS.map(function (b) {
86 var c = catOf(b.cat), pct = b.used / b.limit, over = pct > 1;
87 return '<div style="display:flex;align-items:center;gap:10px;margin-bottom:13px">' +
88 '<div class="ico" style="background:' + c.c + '1a">' + c.e + '</div>' +
89 '<div style="flex:1;min-width:0">' +
90 '<div style="display:flex;align-items:center;font-size:13.5px;font-weight:700">' +
91 '<span>' + c.n + '</span>' +
92 (over ? '<span class="tag r" style="margin-left:6px">超 ' + money0(b.used - b.limit) + '</span>' : '') +
93 '<span class="num" style="margin-left:auto;font-size:12.5px">' +
94 '<b class="' + (over ? 'pay' : '') + '">' + money0(b.used) + '</b>' +
95 '<span class="muted"> / ' + money0(b.limit) + '</span></span></div>' +
96 '<div class="bar" style="margin-top:6px"><i class="' + (over ? 'r' : pct > 0.8 ? 'a' : '') + '" style="width:' +
97 Math.min(100, pct * 100).toFixed(0) + '%"></i></div>' +
98 '<div class="fz11 muted" style="margin-top:3px">' + (pct * 100).toFixed(0) + '% · 剩余 ' +
99 (over ? '0（已超支）' : '¥' + money0(b.limit - b.used)) + '</div></div></div>';
100 }).join('');
101}
102renderBud();
103
104var pick = 'travel';
105function renderPick() {
106 $('#pickCat').innerHTML = ['travel', 'pet', 'beauty', 'sport', 'car', 'phone', 'baby', 'cloth', 'repay', 'other'].map(function (id) {
107 var c = catOf(id), on = id === pick;
108 return '<div class="tile' + (on ? '' : ' plain') + '" data-c="' + id + '"' +
109 (on ? ' style="border:1px solid ' + c.c + '"' : '') + '><div class="emo">' + c.e + '</div><div class="lb">' + c.n + '</div></div>';
110 }).join('');
111 $$('#pickCat .tile').forEach(function (t) {
112 t.addEventListener('click', function () { pick = t.getAttribute('data-c'); renderPick(); });
113 });
114}
115renderPick();
116$('#budOk').addEventListener('click', function () {
117 var v = parseFloat($('#budAmt').value || '0');
118 if (!(v > 0)) { toast('请输入预算金额'); return; }
119 BUDGETS.push({ cat: pick, limit: v, used: 0 });
120 renderBud(); closeSheet(); $('#budAmt').value = '';
121 toast('已为「' + catOf(pick).n + '」设置月预算 ¥' + money0(v));
122});
123
124</script>
125</body>
126</html>
127