r83/charts.html · 约 2491 字符
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">
6<title>图表统计</title>
7<link rel="stylesheet" href="style.css">
8</head>
9<body>
10<div class="app">
11 <header class="top">
12 <div class="top-l">账本 · 林晓</div>
13 <div class="top-r">图表统计</div>
14 </header>
15 <main class="main">
16<div class="card">
17 <div class="sec-title"><span>🥧</span> 本月支出构成</div>
18 <div class="pie"></div>
19 <div class="legend">
20 <div class="li"><span class="dot" style="background:var(--pri)"></span>餐饮 ¥1,180（34%）</div>
21 <div class="li"><span class="dot" style="background:var(--pri2)"></span>购物 ¥1,036（24%）</div>
22 <div class="li"><span class="dot" style="background:#a7f3d0"></span>娱乐 ¥980（20%）</div>
23 <div class="li"><span class="dot" style="background:#bbf7d0"></span>交通 ¥420（11%）</div>
24 <div class="li"><span class="dot" style="background:#d9f99d"></span>其他 ¥564（11%）</div>
25 </div>
26</div>
27<div class="card">
28 <div class="sec-title"><span>📈</span> 近 6 月支出趋势</div>
29 <div class="trend">
30 <div class="col"><div class="b" style="height:62%"><i style="height:100%"></i></div><div class="m">2月</div></div><div class="col"><div class="b" style="height:48%"><i style="height:100%"></i></div><div class="m">3月</div></div><div class="col"><div class="b" style="height:70%"><i style="height:100%"></i></div><div class="m">4月</div></div><div class="col"><div class="b" style="height:55%"><i style="height:100%"></i></div><div class="m">5月</div></div><div class="col"><div class="b" style="height:40%"><i style="height:100%"></i></div><div class="m">6月</div></div><div class="col"><div class="b" style="height:42%"><i style="height:100%"></i></div><div class="m">7月</div></div>
31 </div>
32 <div class="row" style="margin-top:10px"><span class="muted">月均支出 ¥3,940</span><span class="tag">↓ 较上月 -3%</span></div>
33</div>
34</main>
35 <nav class="nav"><a class="" href="index.html"><span class="ic">💰</span>总览</a><a class="" href="bills.html"><span class="ic">📋</span>流水</a><a class="" href="add.html"><span class="ic">➕</span>记一笔</a><a class="" href="budget.html"><span class="ic">🎯</span>预算</a><a class="" href="mine.html"><span class="ic">👤</span>我的</a></nav>
36</div>
37<script></script>
38</body>
39</html>