r110/index.html · 约 7128 字符
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="index">
11
12<div class="hero">
13 <div class="row1">
14 <a class="bk" href="family.html">🏡 家庭日常账本 <span style="opacity:.8">▾</span></a>
15 <a class="bell" href="me.html">🔔<i></i></a>
16 </div>
17 <div class="mlab">2026 年 8 月 · 本月结余 <span class="eye" id="eye" style="cursor:pointer">👁</span></div>
18 <div class="big num" id="balBig"><small>¥</small>20,055.10</div>
19 <div class="kpi">
20 <div><div class="k">本月收入</div><div class="v num">32,442.30</div></div>
21 <div><div class="k">本月支出</div><div class="v num">12,387.20</div></div>
22 <div><div class="k">日均支出</div><div class="v num">2,064.53</div></div>
23 </div>
24</div>
25
26<div class="floatcard">
27 <div style="display:flex;align-items:center;gap:12px">
28 <div class="ring" id="ringBox" style="width:74px;height:74px"></div>
29 <div style="flex:1;min-width:0">
30 <div style="font-size:14px;font-weight:800">本月预算 ¥16,000</div>
31 <div class="fz12 muted mt6">已用 ¥12,386.90 · 剩余 <b style="color:#0f9d76">¥3,613.10</b></div>
32 <div class="fz11 muted" style="margin-top:3px">还剩 25 天 · 建议日均 ¥144.52</div>
33 </div>
34 <a class="btn sm pri" href="budget.html">管理</a>
35 </div>
36</div>
37
38<div class="sec"><h2>快速记一笔<small>长按可自定义</small></h2><a class="more" href="add.html">全部分类 ›</a></div>
39<div class="grid5" style="margin:8px 13px 0">
40 <a class="tile plain" href="add.html?cat=food"><div class="emo">🍜</div><div class="lb">餐饮</div></a>
41 <a class="tile plain" href="add.html?cat=grocery"><div class="emo">🥬</div><div class="lb">买菜</div></a>
42 <a class="tile plain" href="add.html?cat=traffic"><div class="emo">🚌</div><div class="lb">交通</div></a>
43 <a class="tile plain" href="add.html?cat=shop"><div class="emo">🛍️</div><div class="lb">购物</div></a>
44 <a class="tile plain" href="add.html?t=inc"><div class="emo">💰</div><div class="lb">收入</div></a>
45</div>
46
47<div class="sec"><h2>待办提醒<small>3 项</small></h2><span class="more" data-tip="演示版：提醒中心开发中">全部 ›</span></div>
48<div class="card tight" id="todoBox"></div>
49
50<div class="sec"><h2>今日流水<small>共 3 笔</small></h2><a class="more" href="bills.html">查看账单 ›</a></div>
51<div class="card tight"><div class="list" id="todayList"></div></div>
52
53<div class="sec"><h2>成员本月支出</h2><a class="more" href="family.html">家庭账本 ›</a></div>
54<div class="card"><div id="memBox"></div></div>
55
56<div class="sec"><h2>资产速览</h2><a class="more" href="assets.html">全部账户 ›</a></div>
57<div class="card">
58 <div style="display:flex;align-items:flex-end;gap:10px">
59 <div>
60 <div class="fz12 muted">家庭净资产</div>
61 <div class="num" style="font-size:24px;font-weight:800;margin-top:2px">¥251,309.95</div>
62 </div>
63 <div class="tag g" style="margin-bottom:5px">本月 +2.4%</div>
64 </div>
65 <div class="grid3 mt14">
66 <div style="background:var(--surface2);border-radius:12px;padding:9px 10px">
67 <div class="fz11 muted">资金账户</div><div class="num" style="font-weight:800;margin-top:2px">144,502</div>
68 </div>
69 <div style="background:var(--surface2);border-radius:12px;padding:9px 10px">
70 <div class="fz11 muted">投资账户</div><div class="num" style="font-weight:800;margin-top:2px">112,700</div>
71 </div>
72 <div style="background:var(--surface2);border-radius:12px;padding:9px 10px">
73 <div class="fz11 muted">信用负债</div><div class="num pay" style="font-weight:800;margin-top:2px">-5,607</div>
74 </div>
75 </div>
76</div>
77
78<div class="foot">家有账 · 全家一起记 · 数据仅存本地</div>
79
80<nav class="tabbar">
81<a href="index.html" class="on"><span class="ti">🏠</span>首页</a>
82<a href="bills.html" class=""><span class="ti">📒</span>账单</a>
83<a href="add.html" class="fab"><span class="fi">＋</span><span class="fl">记一笔</span></a>
84<a href="chart.html" class=""><span class="ti">📊</span>图表</a>
85<a href="me.html" class=""><span class="ti">👤</span>我的</a>
86</nav>
87<div class="mask" id="mask"></div>
88<div class="toast" id="toast"></div>
89<script src="data.js"></script>
90<script src="app.js"></script>
91<script>
92
93$('#ringBox').innerHTML = ringSvg(12386.9 / 16000, '#f59e0b', 74, 9) +
94 '<div class="in"><div class="p" style="font-size:16px">77%</div><div class="t" style="font-size:10px">已用</div></div>';
95
96var tb = TODOS.map(function (t) {
97 return '<div class="it"><div class="ico">' + t.e + '</div><div class="mn">' +
98 '<div class="n">' + t.n + '</div><div class="d">' + t.sub + '</div></div>' +
99 '<div class="amt num pay">' + money(t.amt) + '<small><span class="tag ' + t.lv + '">待处理</span></small></div></div>';
100}).join('');
101$('#todoBox').innerHTML = '<div class="list">' + tb + '</div>';
102
103var today = allBills().filter(function (b) { return b.date === '2026-08-06'; });
104$('#todayList').innerHTML = today.map(function (b) {
105 var c = catOf(b.cat), a = accOf(b.acc), m = memOf(b.mem);
106 return '<a class="it" href="detail.html?id=' + b.id + '">' +
107 '<div class="ico" style="background:' + c.c + '1a">' + c.e + '</div>' +
108 '<div class="mn"><div class="n">' + b.n + '</div>' +
109 '<div class="d">' + c.n + ' · ' + a.n + ' · ' + m.n + ' 记 · ' + b.time + '</div></div>' +
110 '<div class="amt num ' + (b.t === 'pay' ? 'pay' : 'inc') + '">' + money(b.amt, b.t) + '</div></a>';
111}).join('');
112
113var maxm = Math.max.apply(null, MEMBERS.map(function (m) { return m.month; }));
114$('#memBox').innerHTML = MEMBERS.map(function (m) {
115 return '<div style="display:flex;align-items:center;gap:10px;margin-bottom:11px">' +
116 '<div class="avt" style="background:' + m.c + '">' + m.e + '</div>' +
117 '<div style="flex:1;min-width:0">' +
118 '<div style="display:flex;font-size:13px;font-weight:700"><span>' + m.n + '</span>' +
119 '<span class="num" style="margin-left:auto">¥' + money0(m.month) + '</span></div>' +
120 '<div class="bar thin" style="margin-top:5px"><i style="width:' + (m.month / maxm * 100).toFixed(0) + '%;background:' + m.c + '"></i></div>' +
121 '<div class="fz11 muted" style="margin-top:3px">' + m.cnt + ' 笔 · ' + m.role + '</div></div></div>';
122}).join('');
123
124var hid = false;
125$('#eye').addEventListener('click', function () {
126 hid = !hid;
127 $('#balBig').innerHTML = hid ? '<small>¥</small>******' : '<small>¥</small>20,055.10';
128 $$('.hero .kpi .v').forEach(function (v, i) {
129 var raw = ['32,442.30', '12,387.20', '2,064.53'];
130 v.textContent = hid ? '****' : raw[i];
131 });
132 toast(hid ? '金额已隐藏' : '金额已显示');
133});
134
135</script>
136</body>
137</html>
138