r05/charts.html · 约 2494 字符
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:#8b5cf6"></span>餐饮 ¥980（34%）</div>
21 <div class="li"><span class="dot" style="background:#ec4899"></span>购物 ¥860（24%）</div>
22 <div class="li"><span class="dot" style="background:#c4b5fd"></span>娱乐 ¥780（20%）</div>
23 <div class="li"><span class="dot" style="background:#f9a8d4"></span>交通 ¥360（11%）</div>
24 <div class="li"><span class="dot" style="background:#ddd6fe"></span>其他 ¥640（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:58%"><i style="height:100%"></i></div><div class="m">2月</div></div><div class="col"><div class="b" style="height:46%"><i style="height:100%"></i></div><div class="m">3月</div></div><div class="col"><div class="b" style="height:72%"><i style="height:100%"></i></div><div class="m">4月</div></div><div class="col"><div class="b" style="height:52%"><i style="height:100%"></i></div><div class="m">5月</div></div><div class="col"><div class="b" style="height:38%"><i style="height:100%"></i></div><div class="m">6月</div></div><div class="col"><div class="b" style="height:45%"><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,510</span><span class="tag pink">↓ 较上月 -4%</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>