r110/assets.html · 约 7663 字符
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="assets">
11
12<div class="hero" style="padding-bottom:40px">
13 <div class="row1">
14 <a class="bk" href="index.html">‹ 返回</a>
15 <span class="bell" data-tip="演示版：资产明细导出开发中">⋯</span>
16 </div>
17 <div class="mlab">家庭净资产（资产 - 负债）</div>
18 <div class="big num"><small>¥</small>251,309.95</div>
19 <div class="kpi">
20 <div><div class="k">总资产</div><div class="v num">256,916.35</div></div>
21 <div><div class="k">总负债</div><div class="v num">5,606.50</div></div>
22 <div><div class="k">本月增长</div><div class="v num">+2.4%</div></div>
23 </div>
24</div>
25
26<div class="floatcard">
27 <div class="ttl">📈 近 6 月净资产走势 <span class="rt">累计 +¥28,640</span></div>
28 <div id="assetLine"></div>
29</div>
30
31<div class="sec"><h2>资金账户<small>5 个</small></h2><span class="more" data-tip="演示版：新增账户开发中">＋ 添加</span></div>
32<div class="card" id="fundBox"></div>
33
34<div class="sec"><h2>信用账户<small>2 张</small></h2><span class="more" data-tip="演示版：还款提醒已开启">还款提醒</span></div>
35<div id="creditBox"></div>
36
37<div class="sec"><h2>投资账户<small>2 个</small></h2></div>
38<div class="card" id="investBox"></div>
39
40<div class="sec"><h2>储蓄目标<small>3 个进行中</small></h2><span class="more" data-sheet="#shGoal">＋ 新目标</span></div>
41<div class="card" id="goalBox"></div>
42<div style="height:8px"></div>
43
44<div class="sheet" id="shGoal">
45 <div class="sh"><h3>新建储蓄目标</h3><span class="x" data-close>✕</span></div>
46 <div class="frm">
47 <div class="fi"><div class="lb">目标名称</div><input class="tx" id="gName" placeholder="如：年度旅行基金"></div>
48 <div class="fi"><div class="lb">目标金额</div><input class="tx" id="gAmt" placeholder="如：30000" inputmode="decimal"></div>
49 <div class="fi"><div class="lb">目标日期</div><div class="vl">2027-12-31</div></div>
50 <div class="fi"><div class="lb">自动攒钱</div><div class="vl">每月 5 日自动转入 ¥1,000</div></div>
51 </div>
52 <button class="btn pri block" style="margin-top:13px" id="gOk">创建目标</button>
53</div>
54
55
56<div class="mask" id="mask"></div>
57<div class="toast" id="toast"></div>
58<script src="data.js"></script>
59<script src="app.js"></script>
60<script>
61
62var HIS = [222670, 228400, 233900, 239600, 245400, 251310];
63var mx = Math.max.apply(null, HIS), mn = Math.min.apply(null, HIS);
64var pts = HIS.map(function (v, i) {
65 var x = 12 + i * ((330 - 24) / (HIS.length - 1));
66 var y = 70 - (v - mn) / (mx - mn) * 52;
67 return x.toFixed(1) + ',' + y.toFixed(1);
68});
69$('#assetLine').innerHTML = '<svg viewBox="0 0 330 88" style="width:100%;height:88px">' +
70 '<polyline points="12,82 ' + pts.join(' ') + ' 318,82" fill="rgba(15,157,118,.12)" stroke="none"/>' +
71 '<polyline points="' + pts.join(' ') + '" fill="none" stroke="#0f9d76" stroke-width="2.5" stroke-linejoin="round"/>' +
72 ['3月', '4月', '5月', '6月', '7月', '8月'].map(function (m, i) {
73 var x = 12 + i * ((330 - 24) / 5);
74 return '<text x="' + x + '" y="86" font-size="9" fill="#7b8b86" text-anchor="middle">' + m + '</text>';
75 }).join('') + '</svg>';
76
77$('#fundBox').innerHTML = '<div class="list">' + ACCOUNTS.filter(function (a) { return a.kind === 'fund'; }).map(function (a) {
78 return '<div class="it" data-tip="演示版：账户流水筛选开发中"><div class="ico" style="background:' + a.c + '1a">' + a.e + '</div>' +
79 '<div class="mn"><div class="n">' + a.n + (a.tail ? ' · ' + a.tail : '') + '</div>' +
80 '<div class="d">本月流入 ¥' + money0(a.bal * 0.18) + ' · 流出 ¥' + money0(a.bal * 0.11) + '</div></div>' +
81 '<div class="amt num">' + money(a.bal) + '</div></div>';
82}).join('') + '</div>';
83
84$('#creditBox').innerHTML = ACCOUNTS.filter(function (a) { return a.kind === 'credit'; }).map(function (a) {
85 var used = Math.abs(a.bal), pct = used / a.limit;
86 return '<div class="card"><div style="display:flex;align-items:center;gap:11px">' +
87 '<div class="ico lg" style="background:' + a.c + '1a">' + a.e + '</div>' +
88 '<div style="flex:1;min-width:0"><div style="font-size:14.5px;font-weight:800">' + a.n + ' · ' + a.tail + '</div>' +
89 '<div class="fz11 muted mt6">账单日 ' + a.bill + ' · 还款日 ' + a.due + '</div></div>' +
90 '<div style="text-align:right"><div class="fz11 muted">待还</div>' +
91 '<div class="num pay" style="font-weight:800;font-size:16px">' + money(used) + '</div></div></div>' +
92 '<div class="bar" style="margin-top:11px"><i class="' + (pct > 0.7 ? 'r' : 'a') + '" style="width:' + (pct * 100).toFixed(0) + '%"></i></div>' +
93 '<div style="display:flex;margin-top:6px" class="fz11 muted">' +
94 '<span>额度使用 ' + (pct * 100).toFixed(1) + '%</span>' +
95 '<span style="margin-left:auto">可用 ¥' + money0(a.limit - used) + ' / ' + money0(a.limit) + '</span></div>' +
96 '<div style="display:flex;gap:8px;margin-top:11px">' +
97 '<button class="btn sm pri" style="flex:1" data-tip="演示版：跳转还款需绑定真实银行">立即还款</button>' +
98 '<button class="btn sm" style="flex:1" data-tip="演示版：账单分期开发中">账单分期</button>' +
99 '<button class="btn sm" style="flex:1" data-tip="演示版：已设置还款提醒">还款提醒</button></div></div>';
100}).join('');
101
102$('#investBox').innerHTML = '<div class="list">' + ACCOUNTS.filter(function (a) { return a.kind === 'invest'; }).map(function (a) {
103 return '<div class="it" data-tip="演示版：投资明细开发中"><div class="ico" style="background:' + a.c + '1a">' + a.e + '</div>' +
104 '<div class="mn"><div class="n">' + a.n + '</div>' +
105 '<div class="d">' + (a.profit ? '累计收益 <b style="color:#e5484d">+¥' + money0(a.profit) + '</b>' : '按月缴存 · 不可支取') + '</div></div>' +
106 '<div class="amt num">' + money(a.bal) + '</div></div>';
107}).join('') + '</div>';
108
109function renderGoal() {
110 $('#goalBox').innerHTML = GOALS.map(function (g) {
111 var pct = g.saved / g.target;
112 return '<div style="display:flex;align-items:center;gap:11px;margin-bottom:13px">' +
113 '<div class="ico" style="background:var(--brand-l)">' + g.e + '</div>' +
114 '<div style="flex:1;min-width:0">' +
115 '<div style="display:flex;font-size:13.5px;font-weight:700"><span>' + g.n + '</span>' +
116 '<span class="num" style="margin-left:auto;font-size:12.5px">' + money0(g.saved) + ' / ' + money0(g.target) + '</span></div>' +
117 '<div class="bar" style="margin-top:6px"><i style="width:' + (pct * 100).toFixed(0) + '%"></i></div>' +
118 '<div class="fz11 muted" style="margin-top:3px">已完成 ' + (pct * 100).toFixed(1) + '% · 目标日期 ' + g.due + '</div>' +
119 '</div></div>';
120 }).join('');
121}
122renderGoal();
123$('#gOk').addEventListener('click', function () {
124 var n = $('#gName').value.trim(), v = parseFloat($('#gAmt').value || '0');
125 if (!n || !(v > 0)) { toast('请填写目标名称与金额'); return; }
126 GOALS.push({ n: n, e: '🎯', target: v, saved: 0, due: '2027-12-31' });
127 renderGoal(); closeSheet(); $('#gName').value = ''; $('#gAmt').value = '';
128 toast('目标「' + n + '」已创建');
129});
130
131</script>
132</body>
133</html>
134