xiaocao-fitness/stats.html · 约 4425 字符
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-grid">
7 <div class="stat-card"><div class="sc-icon">🔥</div><div class="sc-num" id="s-cal"></div><div class="sc-label">累计消耗(千卡)</div></div>
8 <div class="stat-card"><div class="sc-icon">⏱️</div><div class="sc-num" id="s-min"></div><div class="sc-label">累计运动(分钟)</div></div>
9 <div class="stat-card"><div class="sc-icon">📅</div><div class="sc-num" id="s-days"></div><div class="sc-label">运动天数</div></div>
10 <div class="stat-card"><div class="sc-icon">🎯</div><div class="sc-num" id="s-avg"></div><div class="sc-label">日均消耗(千卡)</div></div>
11</div>
12<div class="chart-card">
13 <div class="cc-title">📊 本周卡路里消耗</div>
14 <div class="week-chart" id="week-chart"></div>
15</div>
16<div class="chart-card">
17 <div class="cc-title">🎯 月度目标完成度</div>
18 <div style="display:flex;align-items:center;gap:20px">
19 <div class="ring-chart">
20 <svg width="120" height="120">
21 <circle cx="60" cy="60" r="50" fill="none" stroke="#f0f0f0" stroke-width="10"/>
22 <circle cx="60" cy="60" r="50" fill="none" stroke="url(#grad)" stroke-width="10" stroke-dasharray="314" stroke-dashoffset="47" stroke-linecap="round"/>
23 <defs><linearGradient id="grad" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="#00b96b"/><stop offset="100%" stop-color="#52c41a"/></linearGradient></defs>
24 </svg>
25 <div class="rc-center"><div class="rc-num">85%</div><div class="rc-label">已完成</div></div>
26 </div>
27 <div style="flex:1;font-size:13px;line-height:2">
28 <div style="display:flex;justify-content:space-between"><span style="color:#999">目标消耗</span><span>20,000 千卡</span></div>
29 <div style="display:flex;justify-content:space-between"><span style="color:#999">已消耗</span><span style="color:var(--primary);font-weight:600">15,680 千卡</span></div>
30 <div style="display:flex;justify-content:space-between"><span style="color:#999">还需消耗</span><span style="color:var(--accent)">4,320 千卡</span></div>
31 <div style="display:flex;justify-content:space-between"><span style="color:#999">预计完成</span><span>8月20日</span></div>
32 </div>
33 </div>
34</div>
35<div class="chart-card">
36 <div class="cc-title">🏃 运动类型分布</div>
37 <div style="display:flex;gap:8px;flex-wrap:wrap">
38 <div style="flex:1;min-width:80px;text-align:center;padding:12px;background:var(--primary-light);border-radius:8px"><div style="font-size:24px">🏃</div><div style="font-size:14px;font-weight:600;color:var(--primary);margin-top:4px">42%</div><div style="font-size:11px;color:#999">跑步</div></div>
39 <div style="flex:1;min-width:80px;text-align:center;padding:12px;background:#fff0e6;border-radius:8px"><div style="font-size:24px">🔥</div><div style="font-size:14px;font-weight:600;color:var(--accent);margin-top:4px">28%</div><div style="font-size:11px;color:#999">HIIT</div></div>
40 <div style="flex:1;min-width:80px;text-align:center;padding:12px;background:#f9f0ff;border-radius:8px"><div style="font-size:24px">🧘</div><div style="font-size:14px;font-weight:600;color:var(--purple);margin-top:4px">18%</div><div style="font-size:11px;color:#999">瑜伽</div></div>
41 <div style="flex:1;min-width:80px;text-align:center;padding:12px;background:#e6f7ff;border-radius:8px"><div style="font-size:24px">💪</div><div style="font-size:14px;font-weight:600;color:var(--blue);margin-top:4px">12%</div><div style="font-size:11px;color:#999">力量</div></div>
42 </div>
43</div>
44<div style="height:70px"></div>
45<div class="tabbar">
46 <a href="index.html"><span class="icon">🏠</span>首页</a>
47 <a href="train.html"><span class="icon">📋</span>训练</a>
48 <a href="stats.html" class="active"><span class="icon">📊</span>统计</a>
49 <a href="mine.html"><span class="icon">👤</span>我的</a>
50</div>
51<script src="data.js"></script>
52<script src="app.js"></script>
53<script>renderStats();</script>
54</body></html>