r110/me.html · 约 7393 字符
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="me">
11
12<div class="hero" style="padding-bottom:38px">
13 <div class="row1">
14 <div style="font-size:15px;font-weight:800">我的</div>
15 <a class="bell" href="me.html" data-tip="演示版：设置中心开发中">⚙️</a>
16 </div>
17 <div style="display:flex;align-items:center;gap:12px;margin-top:14px;position:relative;z-index:2">
18 <div class="avt" style="width:54px;height:54px;font-size:26px;background:rgba(255,255,255,.22);border:2px solid rgba(255,255,255,.4)">🙋</div>
19 <div style="flex:1;min-width:0">
20 <div style="font-size:18px;font-weight:800">林小满</div>
21 <div class="fz12" style="opacity:.9;margin-top:2px">家庭日常账本 · 管理员</div>
22 </div>
23 <span class="tag" style="background:rgba(255,255,255,.2);color:#fff;border-color:rgba(255,255,255,.3)">🏅 记账达人</span>
24 </div>
25</div>
26
27<div class="floatcard">
28 <div class="grid4" style="text-align:center">
29 <div><div class="num" style="font-size:19px;font-weight:800;color:var(--brand-d)">128</div><div class="fz11 muted">连续记账天</div></div>
30 <div><div class="num" style="font-size:19px;font-weight:800">1,286</div><div class="fz11 muted">累计笔数</div></div>
31 <div><div class="num" style="font-size:19px;font-weight:800">3.2</div><div class="fz11 muted">记账年数</div></div>
32 <div><div class="num" style="font-size:19px;font-weight:800;color:var(--accent-d)">37%</div><div class="fz11 muted">平均结余率</div></div>
33 </div>
34 <div class="divider"></div>
35 <div style="display:flex;align-items:center;gap:9px">
36 <div class="fz12 muted" style="flex:none">本月打卡</div>
37 <div style="flex:1;display:flex;gap:3px" id="dotBox"></div>
38 <div class="fz11" style="color:var(--brand-d);font-weight:700;flex:none">6/6 天</div>
39 </div>
40</div>
41
42<div class="sec"><h2>常用功能</h2></div>
43<div class="grid4" style="margin:8px 13px 0">
44 <a class="tile" href="recur.html"><div class="emo">🔁</div><div class="lb">周期账单</div></a>
45 <a class="tile" href="assets.html"><div class="emo">🏦</div><div class="lb">资产账户</div></a>
46 <a class="tile" href="budget.html"><div class="emo">🎯</div><div class="lb">预算管理</div></a>
47 <a class="tile" href="family.html"><div class="emo">🏡</div><div class="lb">家庭账本</div></a>
48 <div class="tile" data-tip="演示版：分类管理开发中"><div class="emo">🏷️</div><div class="lb">分类管理</div></div>
49 <div class="tile" data-sheet="#shExp"><div class="emo">📤</div><div class="lb">导出账单</div></div>
50 <div class="tile" data-tip="演示版：云备份需登录账号"><div class="emo">☁️</div><div class="lb">云端备份</div></div>
51 <div class="tile" data-tip="演示版：账单模板开发中"><div class="emo">⭐</div><div class="lb">账单模板</div></div>
52</div>
53
54<div class="card">
55 <div class="ttl">🔔 记账提醒</div>
56 <div class="frm">
57 <div class="fi"><div class="lb">每日提醒</div><div class="vl">21:30 提醒记账</div><span class="ar" data-tip="演示版：提醒时间可调">›</span></div>
58 <div class="fi"><div class="lb">预算提醒</div><div class="vl">超 80% 时推送</div><span class="ar" data-tip="演示版：阈值可调">›</span></div>
59 <div class="fi"><div class="lb">还款提醒</div><div class="vl">提前 3 天提醒</div><span class="ar" data-tip="演示版：提前天数可调">›</span></div>
60 <div class="fi"><div class="lb">成员动态</div><div class="vl">家人记账时通知我</div><span class="ar" data-tip="演示版：通知开关可切换">›</span></div>
61 </div>
62</div>
63
64<div class="card">
65 <div class="ttl">🔐 安全与数据</div>
66 <div class="list">
67 <div class="it" data-tip="演示版：手势/指纹锁需真机"><div class="ico">🔒</div><div class="mn"><div class="n">隐私锁</div><div class="d">指纹 / 手势密码保护账本</div></div><span class="tag">未开启</span></div>
68 <div class="it" data-tip="演示版：多端同步需登录"><div class="ico">🔄</div><div class="mn"><div class="n">多端同步</div><div class="d">手机、平板、网页实时同步</div></div><span class="tag g">已开启</span></div>
69 <div class="it" id="clearBtn"><div class="ico">🧹</div><div class="mn"><div class="n">清空本地演示数据</div><div class="d">仅清除本机新增的账单记录</div></div><span class="ar">›</span></div>
70 <div class="it" data-tip="家有账 · 演示版 v1.0.0"><div class="ico">ℹ️</div><div class="mn"><div class="n">关于家有账</div><div class="d">版本 v1.0.0 · 纯前端演示</div></div><span class="ar">›</span></div>
71 </div>
72</div>
73<div class="foot">家有账 · 让每一笔家用都心里有数</div>
74<div style="height:6px"></div>
75
76<div class="sheet" id="shExp">
77 <div class="sh"><h3>导出账单</h3><span class="x" data-close>✕</span></div>
78 <div class="list">
79 <div class="it" data-tip="演示版：已生成 Excel 文件（模拟）"><div class="ico">📊</div><div class="mn"><div class="n">导出 Excel 表格</div><div class="d">含全部字段，可用于报销与年度汇总</div></div><span class="ar">›</span></div>
80 <div class="it" data-tip="演示版：已生成 CSV 文件（模拟）"><div class="ico">📄</div><div class="mn"><div class="n">导出 CSV</div><div class="d">通用格式，可导入其他记账软件</div></div><span class="ar">›</span></div>
81 <div class="it" data-tip="演示版：已生成 PDF 月报（模拟）"><div class="ico">🧾</div><div class="mn"><div class="n">生成 PDF 月度报告</div><div class="d">图文报表，适合打印归档</div></div><span class="ar">›</span></div>
82 </div>
83 <div class="frm" style="margin-top:6px">
84 <div class="fi"><div class="lb">时间范围</div><div class="vl">2026-08-01 ~ 2026-08-31</div></div>
85 <div class="fi"><div class="lb">包含账本</div><div class="vl">家庭日常账本</div></div>
86 </div>
87</div>
88
89<nav class="tabbar">
90<a href="index.html" class=""><span class="ti">🏠</span>首页</a>
91<a href="bills.html" class=""><span class="ti">📒</span>账单</a>
92<a href="add.html" class="fab"><span class="fi">＋</span><span class="fl">记一笔</span></a>
93<a href="chart.html" class=""><span class="ti">📊</span>图表</a>
94<a href="me.html" class="on"><span class="ti">👤</span>我的</a>
95</nav>
96<div class="mask" id="mask"></div>
97<div class="toast" id="toast"></div>
98<script src="data.js"></script>
99<script src="app.js"></script>
100<script>
101
102var dots = [];
103for (var i = 1; i <= 31; i++) {
104 var on = i <= 6;
105 dots.push('<i style="flex:1;height:9px;border-radius:2px;background:' + (on ? '#0f9d76' : '#e6ecea') + ';display:block"></i>');
106}
107$('#dotBox').innerHTML = dots.join('');
108
109$('#clearBtn').addEventListener('click', function () {
110 SG.set('bills', []);
111 toast('本地演示数据已清空');
112 var b = $('#tabBadge'); if (b) b.style.display = 'none';
113});
114
115</script>
116</body>
117</html>
118