💻 代码预览 · 小草记账本

1<!DOCTYPE html><html lang="zh-CN"><head>
2<meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
3<title>统计 - 小草记账本</title><link rel="stylesheet" href="style.css">
4</head><body>
5<div class="header"><span class="back" onclick="history.back()">‹</span><h1>统计</h1><span class="right">📅</span></div>
6<div class="stat-cards">
7  <div class="stat-card"><div class="sc-icon">💰</div><div class="sc-num" id="s-in">¥0</div><div class="sc-label">本月收入</div></div>
8  <div class="stat-card"><div class="sc-icon">💸</div><div class="sc-num" id="s-out">¥0</div><div class="sc-label">本月支出</div></div>
9  <div class="stat-card"><div class="sc-icon">📊</div><div class="sc-num" id="s-avg">¥0</div><div class="sc-label">日均支出</div></div>
10  <div class="stat-card"><div class="sc-icon">🎯</div><div class="sc-num" id="s-budget">¥0</div><div class="sc-label">预算剩余</div></div>
11</div>
12<div class="chart-card">
13  <div class="cc-title">📈 本周支出趋势</div>
14  <div class="bar-chart" id="week-chart"></div>
15</div>
16<div class="chart-card">
17  <div class="cc-title">🍩 支出分类占比</div>
18  <div class="pie-legend" id="pie-legend"></div>
19</div>
20<div class="chart-card">
21  <div class="cc-title">📅 本月日历热度</div>
22  <div style="display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center;font-size:11px">
23    ${['一','二','三','四','五','六','日'].map(d=>`<div style="color:#999;padding:4px">${d}</div>`).join('')}
24    ${['','',1,2,3,4,5,6,7,8,9,10,11].map(d=>d===''
25      ?'<div style="padding:6px"></div>'
26      :`<div style="padding:6px;border-radius:6px;background:${d<=5?'rgba(19,194,194,.6)':d<=9?'rgba(19,194,194,.25)':'rgba(19,194,194,.08)'};font-weight:${d===11?'700':''}">${d}</div>`).join('')}
27  </div>
28</div>
29<div style="height:70px"></div>
30<div class="tabbar">
31  <a href="index.html"><span class="icon">📒</span>记账</a>
32  <a href="record.html"><span class="icon">✏️</span>记一笔</a>
33  <a href="stats.html" class="active"><span class="icon">📊</span>统计</a>
34  <a href="mine.html"><span class="icon">👤</span>我的</a>
35</div>
36<script src="data.js"></script>
37<script src="app.js"></script>
38<script>renderStats();</script>
39</body></html>