index.html · 约 27575 字符
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<script src="../_vendor/jquery.min.js"></script>
8<style>
9 * { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
10 :root{
11 --bg:#fff7f4; --card:#fff; --text:#2a1812; --soft:#8d6e63; --line:#ffe8e0;
12 --primary:#f97316; --primary-light:#ffedd5; --accent:#ef4444; --green:#22c55e; --blue:#3b82f6;
13 --radius:18px; --shadow:0 4px 18px rgba(249,115,22,.12);
14 }
15 body{ font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
16 background:var(--bg); color:var(--text); }
17 .app{ max-width:430px; margin:0 auto; min-height:100vh; background:var(--bg);
18 position:relative; box-shadow:0 0 28px rgba(0,0,0,.08); display:flex; flex-direction:column; }
19 .topbar{ padding:12px 18px 8px; display:flex; align-items:center; justify-content:space-between; flex-shrink:0; background:linear-gradient(135deg,var(--primary),var(--accent)); color:#fff; }
20 .topbar .tt{ font-size:18px; font-weight:800; }
21 .topbar .icr{ display:flex; gap:14px; font-size:20px; }
22 .main{ flex:1; overflow-y:auto; padding:0 16px 90px; }
23 .main::-webkit-scrollbar{ display:none; }
24 .view{ display:none; }
25 .view.active{ display:block; animation:fade .22s ease; }
26 @keyframes fade{ from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
27
28 /* 首页/日记 */
29 .date-bar{ display:flex; align-items:center; justify-content:space-between; margin:16px 0; }
30 .date-bar .t{ font-size:18px; font-weight:900; }
31 .date-bar .sub{ font-size:13px; color:var(--soft); }
32 .cal-card{ background:var(--card); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow); margin-bottom:16px; }
33 .cal-card .hd{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
34 .cal-card .hd .t{ font-size:16px; font-weight:900; }
35 .cal-card .hd .more{ font-size:12px; color:var(--soft); }
36 .cal-ring{ display:flex; align-items:center; justify-content:space-around; }
37 .ring{ width:120px; height:120px; border-radius:50%; background:conic-gradient(var(--primary) 0% 65%, var(--line) 65% 100%); display:flex; align-items:center; justify-content:center; position:relative; }
38 .ring::before{ content:""; position:absolute; width:90px; height:90px; background:#fff; border-radius:50%; }
39 .ring .txt{ position:relative; text-align:center; }
40 .ring .txt .v{ font-size:22px; font-weight:900; color:var(--primary); }
41 .ring .txt .l{ font-size:11px; color:var(--soft); }
42 .nutri{ display:flex; flex-direction:column; gap:10px; }
43 .nutri .row{ display:flex; align-items:center; gap:10px; font-size:13px; }
44 .nutri .row .dot{ width:8px; height:8px; border-radius:50%; background:var(--primary); }
45 .nutri .row .n{ font-weight:900; margin-left:auto; }
46 .section{ margin-bottom:16px; }
47 .section-title{ font-size:16px; font-weight:900; margin-bottom:12px; display:flex; align-items:center; justify-content:space-between; }
48 .section-title .more{ font-size:12px; color:var(--soft); font-weight:600; }
49 .meal-card{ background:var(--card); border-radius:var(--radius); padding:14px; box-shadow:var(--shadow); margin-bottom:10px; cursor:pointer; }
50 .meal-card .hd{ display:flex; align-items:center; gap:12px; }
51 .meal-card .icon{ width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:22px; }
52 .meal-card .info{ flex:1; }
53 .meal-card .info .t{ font-size:15px; font-weight:900; }
54 .meal-card .info .sub{ font-size:12px; color:var(--soft); margin-top:2px; }
55 .meal-card .cal{ font-size:16px; font-weight:900; color:var(--primary); }
56 .body-card{ background:var(--card); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); margin-bottom:16px; }
57 .body-card .hd{ font-size:15px; font-weight:900; margin-bottom:14px; display:flex; justify-content:space-between; }
58 .body-card .grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
59 .body-card .grid .item{ text-align:center; }
60 .body-card .grid .item .v{ font-size:20px; font-weight:900; }
61 .body-card .grid .item .l{ font-size:11px; color:var(--soft); margin-top:2px; }
62 .water-card{ background:linear-gradient(135deg,#60a5fa,#3b82f6); border-radius:var(--radius); padding:16px; color:#fff; box-shadow:var(--shadow); margin-bottom:16px; }
63 .water-card .hd{ display:flex; justify-content:space-between; margin-bottom:10px; }
64 .water-card .v{ font-size:28px; font-weight:900; }
65 .water-card .bar{ height:8px; background:rgba(255,255,255,.25); border-radius:999px; overflow:hidden; }
66 .water-card .bar .fill{ height:100%; background:#fff; border-radius:999px; }
67
68 /* 饮食记录 */
69 .summary-card{ background:linear-gradient(135deg,var(--primary),var(--accent)); border-radius:var(--radius); padding:18px; color:#fff; margin:16px 0; }
70 .summary-card .row{ display:flex; justify-content:space-around; text-align:center; }
71 .summary-card .item .v{ font-size:24px; font-weight:900; }
72 .summary-card .item .l{ font-size:12px; opacity:.9; margin-top:4px; }
73 .diet-section{ background:var(--card); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); margin-bottom:16px; }
74 .diet-section .hd{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
75 .diet-section .hd .t{ font-size:15px; font-weight:900; }
76 .diet-section .hd .add{ font-size:20px; color:var(--primary); }
77 .food-item{ display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); }
78 .food-item:last-child{ border-bottom:none; }
79 .food-item .emoji{ font-size:24px; }
80 .food-item .info{ flex:1; }
81 .food-item .info .t{ font-size:14px; font-weight:700; }
82 .food-item .info .sub{ font-size:12px; color:var(--soft); }
83 .food-item .cal{ font-weight:900; color:var(--primary); }
84
85 /* 训练计划 */
86 .plan-hero{ background:linear-gradient(135deg,var(--primary),var(--accent)); border-radius:var(--radius); padding:20px; color:#fff; margin:16px 0; position:relative; overflow:hidden; }
87 .plan-hero::before{ content:""; position:absolute; top:-30px; right:-30px; width:140px; height:140px; background:rgba(255,255,255,.12); border-radius:50%; }
88 .plan-hero .t{ font-size:14px; opacity:.9; margin-bottom:8px; }
89 .plan-hero .tt2{ font-size:22px; font-weight:900; margin-bottom:12px; }
90 .plan-hero .meta{ display:flex; align-items:center; gap:8px; font-size:13px; }
91 .plan-hero .play{ position:absolute; right:20px; bottom:20px; width:48px; height:48px; background:rgba(255,255,255,.25); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:22px; }
92 .encourage{ background:var(--card); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); margin-bottom:16px; display:flex; align-items:center; gap:14px; }
93 .encourage .avatar{ width:60px; height:60px; border-radius:50%; background:var(--primary-light); display:flex; align-items:center; justify-content:center; font-size:32px; }
94 .encourage .txt{ flex:1; }
95 .encourage .txt .t{ font-size:15px; font-weight:900; }
96 .encourage .txt .sub{ font-size:12px; color:var(--soft); margin-top:4px; }
97 .body-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
98 .body-grid .cell{ background:var(--card); border-radius:var(--radius); padding:18px; text-align:center; box-shadow:var(--shadow); cursor:pointer; }
99 .body-grid .cell .ic{ width:60px; height:60px; margin:0 auto 10px; border-radius:50%; background:var(--primary-light); display:flex; align-items:center; justify-content:center; font-size:28px; }
100 .body-grid .cell .t{ font-size:14px; font-weight:900; }
101
102 /* 部位训练 */
103 .body-hero{ background:linear-gradient(135deg,var(--primary),var(--accent)); border-radius:var(--radius); padding:20px; color:#fff; margin:16px 0; }
104 .body-hero .tt2{ font-size:20px; font-weight:900; margin-bottom:6px; }
105 .body-hero .sub{ font-size:13px; opacity:.9; }
106 .body-hero .back{ display:inline-flex; align-items:center; gap:6px; font-size:13px; opacity:.9; margin-bottom:10px; cursor:pointer; }
107 .focus-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:16px; }
108 .focus-card{ background:var(--card); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); cursor:pointer; }
109 .focus-card .ic{ font-size:36px; text-align:center; margin-bottom:8px; }
110 .focus-card .t{ font-size:15px; font-weight:900; text-align:center; }
111 .focus-card .sub{ font-size:12px; color:var(--soft); text-align:center; margin-top:4px; }
112 .question{ background:var(--card); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); }
113 .question .t{ font-size:15px; font-weight:900; margin-bottom:12px; }
114 .question .btn{ width:100%; border:none; border-radius:999px; padding:12px; margin-bottom:10px; font-size:14px; font-weight:800; cursor:pointer; }
115 .question .btn.primary{ background:var(--primary); color:#fff; }
116 .question .btn.secondary{ background:var(--bg); color:var(--soft); }
117
118 /* 课程中心 */
119 .search-box{ background:var(--card); border-radius:999px; padding:10px 16px; margin:16px 0; display:flex; align-items:center; gap:8px; box-shadow:var(--shadow); }
120 .search-box input{ flex:1; border:none; background:transparent; font-size:14px; outline:none; color:var(--text); }
121 .search-box .ic{ font-size:18px; color:var(--soft); }
122 .course-tabs{ display:flex; gap:8px; margin-bottom:16px; }
123 .course-tabs .tab{ flex:1; background:var(--card); border-radius:999px; padding:10px; text-align:center; font-size:14px; font-weight:700; color:var(--soft); cursor:pointer; box-shadow:var(--shadow); }
124 .course-tabs .tab.on{ background:var(--primary); color:#fff; }
125 .course-hori{ display:flex; gap:12px; overflow-x:auto; padding-bottom:6px; }
126 .course-hori::-webkit-scrollbar{ display:none; }
127 .course-hori .card{ min-width:160px; background:var(--card); border-radius:var(--radius); padding:14px; box-shadow:var(--shadow); }
128 .course-hori .card .thumb{ height:90px; border-radius:12px; background:linear-gradient(135deg,var(--primary),var(--accent)); display:flex; align-items:center; justify-content:center; font-size:36px; margin-bottom:10px; }
129 .course-hori .card .t{ font-size:14px; font-weight:900; }
130 .course-hori .card .sub{ font-size:12px; color:var(--soft); margin-top:4px; }
131 .course-hori .card .meta{ display:flex; gap:8px; font-size:11px; color:var(--soft); margin-top:8px; }
132 .course-list .card{ background:var(--card); border-radius:var(--radius); padding:14px; box-shadow:var(--shadow); margin-bottom:12px; display:flex; gap:12px; }
133 .course-list .card .thumb{ width:80px; height:80px; border-radius:12px; background:linear-gradient(135deg,#3b82f6,#60a5fa); display:flex; align-items:center; justify-content:center; font-size:32px; flex-shrink:0; }
134 .course-list .card .info{ flex:1; }
135 .course-list .card .info .t{ font-size:15px; font-weight:900; }
136 .course-list .card .info .sub{ font-size:12px; color:var(--soft); margin-top:4px; }
137 .course-list .card .info .meta{ display:flex; gap:10px; font-size:11px; color:var(--soft); margin-top:8px; }
138
139 /* 个人中心 */
140 .me-card{ background:linear-gradient(135deg,var(--primary),var(--accent)); border-radius:var(--radius); padding:20px; color:#fff; margin:16px 0; position:relative; overflow:hidden; }
141 .me-card::before{ content:""; position:absolute; top:-30px; right:-30px; width:130px; height:130px; background:rgba(255,255,255,.12); border-radius:50%; }
142 .me-card .row{ display:flex; align-items:center; gap:14px; position:relative; z-index:1; }
143 .me-card .avatar{ width:60px; height:60px; border-radius:50%; background:rgba(255,255,255,.25); display:flex; align-items:center; justify-content:center; font-size:32px; border:2px solid rgba(255,255,255,.45); }
144 .me-card .name{ font-size:18px; font-weight:900; }
145 .me-card .id{ font-size:12px; opacity:.85; margin-top:4px; }
146 .me-card .qr{ background:rgba(255,255,255,.22); border:1px solid rgba(255,255,255,.35); color:#fff; border-radius:10px; padding:6px 10px; font-size:12px; font-weight:700; }
147 .me-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:16px; }
148 .me-stats .item{ background:var(--card); border-radius:var(--radius); padding:14px 4px; text-align:center; box-shadow:var(--shadow); }
149 .me-stats .item .v{ font-size:18px; font-weight:900; color:var(--primary); }
150 .me-stats .item .l{ font-size:11px; color:var(--soft); margin-top:4px; }
151 .menu-card{ background:var(--card); border-radius:var(--radius); padding:8px 16px; box-shadow:var(--shadow); margin-bottom:16px; }
152 .menu-card .row{ display:flex; align-items:center; gap:12px; padding:14px 0; border-bottom:1px solid var(--line); cursor:pointer; }
153 .menu-card .row:last-child{ border-bottom:none; }
154 .menu-card .row .ic{ font-size:22px; width:28px; text-align:center; }
155 .menu-card .row .txt{ flex:1; font-size:14px; font-weight:700; }
156 .menu-card .row .arr{ color:var(--soft); font-size:18px; }
157
158 .tabbar{ position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:430px;
159 height:66px; background:#fff; border-top:1px solid var(--line); display:flex; z-index:20; }
160 .tabbar button{ flex:1; border:none; background:none; font-size:11px; color:var(--soft); font-weight:700;
161 display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; cursor:pointer; }
162 .tabbar button .ti{ font-size:22px; }
163 .tabbar button.on{ color:var(--primary); }
164 .toast{ position:fixed; left:50%; top:42%; transform:translate(-50%,-50%) scale(.9); z-index:50;
165 background:rgba(42,24,18,.92); color:#fff; padding:13px 22px; border-radius:12px; font-size:14px;
166 font-weight:700; opacity:0; pointer-events:none; transition:.2s; }
167 .toast.show{ opacity:1; transform:translate(-50%,-50%) scale(1); }
168</style>
169</head>
170<body>
171<div class="app">
172 <header class="topbar" id="topbar">
173 <span></span>
174 <span class="tt" id="topTitle">燃动健身</span>
175 <span class="icr"><span>🔔</span><span>⚙️</span></span>
176 </header>
177
178 <main class="main" id="main">
179 <!-- 首页/日记 -->
180 <section class="view active" id="view-home">
181 <div class="date-bar">
182 <span class="t">我的日记</span>
183 <span class="sub">7 月 16 日 ›</span>
184 </div>
185 <div class="cal-card">
186 <div class="hd"><span class="t">健康用餐</span><span class="more">详情 ›</span></div>
187 <div class="cal-ring">
188 <div class="ring"><div class="txt"><div class="v">1502</div><div class="l">已摄入 / kcal</div></div></div>
189 <div class="nutri">
190 <div class="row"><span class="dot" style="background:var(--primary)"></span>碳水 <span class="n">1128g</span></div>
191 <div class="row"><span class="dot" style="background:var(--green)"></span>蛋白质 <span class="n">102g</span></div>
192 <div class="row"><span class="dot" style="background:var(--blue)"></span>脂肪 <span class="n">45g</span></div>
193 </div>
194 </div>
195 </div>
196 <div class="section">
197 <div class="section-title">今天的饭菜<span class="more">管理 ›</span></div>
198 <div class="meal-card" data-go="diet">
199 <div class="hd">
200 <div class="icon" style="background:#fff7ed">🍳</div>
201 <div class="info"><div class="t">早餐</div><div class="sub">燕麦牛奶 + 水煮蛋</div></div>
202 <div class="cal">525</div>
203 </div>
204 </div>
205 <div class="meal-card" data-go="diet">
206 <div class="hd">
207 <div class="icon" style="background:#eff6ff">🥗</div>
208 <div class="info"><div class="t">午餐</div><div class="sub">鸡胸肉沙拉 + 杂粮饭</div></div>
209 <div class="cal">602</div>
210 </div>
211 </div>
212 <div class="meal-card" data-go="diet">
213 <div class="hd">
214 <div class="icon" style="background:#fef2f2">🍉</div>
215 <div class="info"><div class="t">加餐</div><div class="sub">西瓜 + 坚果一小把</div></div>
216 <div class="cal">180</div>
217 </div>
218 </div>
219 </div>
220 <div class="body-card">
221 <div class="hd"><span>身体测量</span><span style="font-size:12px;color:var(--soft)">今天 ›</span></div>
222 <div class="grid">
223 <div class="item"><div class="v">72.6</div><div class="l">体重 kg</div></div>
224 <div class="item"><div class="v">185</div><div class="l">身高 cm</div></div>
225 <div class="item"><div class="v">20%</div><div class="l">体脂率</div></div>
226 </div>
227 </div>
228 <div class="water-card">
229 <div class="hd"><span>今日饮水</span><span style="font-size:12px;opacity:.9">目标 2500 ml</span></div>
230 <div class="v">1500 <span style="font-size:14px">ml</span></div>
231 <div class="bar"><div class="fill" style="width:60%"></div></div>
232 </div>
233 </section>
234
235 <!-- 饮食记录 -->
236 <section class="view" id="view-diet">
237 <div class="summary-card">
238 <div class="row">
239 <div class="item"><div class="v">1502</div><div class="l">已摄入</div></div>
240 <div class="item"><div class="v">2200</div><div class="l">目标</div></div>
241 <div class="item"><div class="v">698</div><div class="l">剩余</div></div>
242 </div>
243 </div>
244 <div class="diet-section">
245 <div class="hd"><span class="t">早餐</span><span class="add">+</span></div>
246 <div class="food-item"><span class="emoji">🍳</span><div class="info"><div class="t">水煮蛋 2 个</div><div class="sub">140 kcal · 12g 蛋白质</div></div><span class="cal">140</span></div>
247 <div class="food-item"><span class="emoji">🥛</span><div class="info"><div class="t">燕麦牛奶 250ml</div><div class="sub">180 kcal · 8g 蛋白质</div></div><span class="cal">180</span></div>
248 </div>
249 <div class="diet-section">
250 <div class="hd"><span class="t">午餐</span><span class="add">+</span></div>
251 <div class="food-item"><span class="emoji">🥗</span><div class="info"><div class="t">鸡胸肉沙拉</div><div class="sub">350 kcal · 35g 蛋白质</div></div><span class="cal">350</span></div>
252 <div class="food-item"><span class="emoji">🍚</span><div class="info"><div class="t">杂粮饭 150g</div><div class="sub">252 kcal · 6g 蛋白质</div></div><span class="cal">252</span></div>
253 </div>
254 <div class="diet-section">
255 <div class="hd"><span class="t">加餐</span><span class="add">+</span></div>
256 <div class="food-item"><span class="emoji">🍉</span><div class="info"><div class="t">西瓜 200g</div><div class="sub">60 kcal</div></div><span class="cal">60</span></div>
257 <div class="food-item"><span class="emoji">🥜</span><div class="info"><div class="t">混合坚果 20g</div><div class="sub">120 kcal</div></div><span class="cal">120</span></div>
258 </div>
259 </section>
260
261 <!-- 训练计划 -->
262 <section class="view" id="view-workout">
263 <div class="date-bar">
264 <span class="t">训练</span>
265 <span class="sub">‹ 7 月 16 日 ›</span>
266 </div>
267 <div class="plan-hero">
268 <div class="t">你的计划</div>
269 <div class="tt2">下一次锻炼<br>美腿和在家锻炼臀肌</div>
270 <div class="meta"><span>⏱ 58 分钟</span><span>🔥 320 kcal</span></div>
271 <div class="play">▶</div>
272 </div>
273 <div class="encourage">
274 <div class="avatar">🏃</div>
275 <div class="txt"><div class="t">你做得很好！</div><div class="sub">继续坚持下去，保持健康节奏！</div></div>
276 </div>
277 <div class="section">
278 <div class="section-title">重点部位<span class="more">更多 ›</span></div>
279 <div class="body-grid">
280 <div class="cell" data-go="body"><div class="ic">🍑</div><div class="t">臀大肌</div></div>
281 <div class="cell" data-go="body"><div class="ic">🦾</div><div class="t">腹肌</div></div>
282 <div class="cell" data-go="body"><div class="ic">🦵</div><div class="t">腿部</div></div>
283 <div class="cell" data-go="body"><div class="ic">💪</div><div class="t">肱二头肌</div></div>
284 </div>
285 </div>
286 </section>
287
288 <!-- 部位训练 -->
289 <section class="view" id="view-body">
290 <div class="body-hero">
291 <div class="back" data-go="workout">‹ 返回训练</div>
292 <div class="tt2">重点部位训练</div>
293 <div class="sub">选择你想要重点强化的身体部位</div>
294 </div>
295 <div class="focus-grid">
296 <div class="cell"><div class="ic">🍑</div><div class="t">臀大肌</div><div class="sub">12 个动作</div></div>
297 <div class="cell"><div class="ic">🦾</div><div class="t">腹肌</div><div class="sub">9 个动作</div></div>
298 <div class="cell"><div class="ic">🦵</div><div class="t">腿部</div><div class="sub">15 个动作</div></div>
299 <div class="cell"><div class="ic">💪</div><div class="t">肱二头肌</div><div class="sub">8 个动作</div></div>
300 <div class="cell"><div class="ic">🦴</div><div class="t">背部</div><div class="sub">10 个动作</div></div>
301 <div class="cell"><div class="ic">🫁</div><div class="t">核心</div><div class="sub">11 个动作</div></div>
302 </div>
303 <div class="question">
304 <div class="t">想获得更精准的训练推荐？</div>
305 <button class="btn primary">参加体能测试</button>
306 <button class="btn secondary">创建我的训练程序</button>
307 </div>
308 </section>
309
310 <!-- 课程中心 -->
311 <section class="view" id="view-courses">
312 <div class="search-box"><span class="ic">🔍</span><input type="text" placeholder="搜索课程 / 部位 / 教练"></div>
313 <div class="course-tabs">
314 <div class="tab on">初学者</div>
315 <div class="tab">进阶</div>
316 <div class="tab">全部</div>
317 </div>
318 <div class="section">
319 <div class="section-title">适合初学者<span class="more">查看更多 ›</span></div>
320 <div class="course-hori">
321 <div class="card">
322 <div class="thumb">🧘</div>
323 <div class="t">3 个月瑜伽入门</div>
324 <div class="sub">每周 3 练 · 零基础</div>
325 <div class="meta"><span>⏱ 30min</span><span>🔥 120kcal</span></div>
326 </div>
327 <div class="card">
328 <div class="thumb" style="background:linear-gradient(135deg,#ef4444,#f97316)">🏃</div>
329 <div class="t">7 天瘦腹部计划</div>
330 <div class="sub">每天 15 分钟</div>
331 <div class="meta"><span>⏱ 15min</span><span>🔥 90kcal</span></div>
332 </div>
333 <div class="card">
334 <div class="thumb" style="background:linear-gradient(135deg,#22c55e,#4ade80)">🤸</div>
335 <div class="t">居家全身燃脂</div>
336 <div class="sub">无器械 · 入门</div>
337 <div class="meta"><span>⏱ 25min</span><span>🔥 200kcal</span></div>
338 </div>
339 </div>
340 </div>
341 <div class="section">
342 <div class="section-title">进阶课程</div>
343 <div class="course-list">
344 <div class="card">
345 <div class="thumb">🏋️</div>
346 <div class="info"><div class="t">高强度间歇训练 HIIT</div><div class="sub">提升心肺 · 燃脂塑形</div><div class="meta"><span>⏱ 40min</span><span>🔥 450kcal</span></div></div>
347 </div>
348 <div class="card">
349 <div class="thumb" style="background:linear-gradient(135deg,#8b5cf6,#a78bfa)">💪</div>
350 <div class="info"><div class="t">力量增肌特训</div><div class="sub">哑铃负重 · 肌肥大</div><div class="meta"><span>⏱ 50min</span><span>🔥 380kcal</span></div></div>
351 </div>
352 </div>
353 </div>
354 </section>
355
356 <!-- 个人中心 -->
357 <section class="view" id="view-me">
358 <div class="me-card">
359 <div class="row">
360 <div class="avatar">🏋️</div>
361 <div class="info">
362 <div class="name">林小燃</div>
363 <div class="id">燃动会员 · Lv.6</div>
364 </div>
365 <button class="qr">二维码</button>
366 </div>
367 </div>
368 <div class="me-stats">
369 <div class="item"><div class="v">156</div><div class="l">训练次数</div></div>
370 <div class="item"><div class="v">48h</div><div class="l">训练时长</div></div>
371 <div class="item"><div class="v">8.2k</div><div class="l">消耗 kcal</div></div>
372 <div class="item"><div class="v">12</div><div class="l">连续打卡</div></div>
373 </div>
374 <div class="menu-card">
375 <div class="row"><span class="ic">📊</span><span class="txt">运动数据</span><span class="arr">›</span></div>
376 <div class="row"><span class="ic">🍽️</span><span class="txt">饮食记录</span><span class="arr">›</span></div>
377 <div class="row"><span class="ic">🏆</span><span class="txt">我的成就</span><span class="arr">›</span></div>
378 <div class="row"><span class="ic">📅</span><span class="txt">训练计划</span><span class="arr">›</span></div>
379 </div>
380 <div class="menu-card">
381 <div class="row"><span class="ic">⚙️</span><span class="txt">系统设置</span><span class="arr">›</span></div>
382 <div class="row"><span class="ic">❓</span><span class="txt">帮助中心</span><span class="arr">›</span></div>
383 </div>
384 </section>
385 </main>
386
387 <nav class="tabbar">
388 <button data-go="home" class="on"><span class="ti">📔</span>日记</button>
389 <button data-go="workout"><span class="ti">🏋️</span>训练</button>
390 <button data-go="courses"><span class="ti">📚</span>课程</button>
391 <button data-go="me"><span class="ti">👤</span>我的</button>
392 </nav>
393</div>
394<div class="toast" id="toast"></div>
395
396<script>
397function toast(m){ var t=$("#toast"); t.text(m).addClass("show"); setTimeout(function(){t.removeClass("show");},1500); }
398function showView(v){
399 $(".view").removeClass("active");
400 $("#view-"+v).addClass("active");
401 var titles={home:"燃动健身",diet:"饮食记录",workout:"燃动健身",body:"重点部位",courses:"课程中心",me:"个人中心"};
402 $("#topTitle").text(titles[v]||"燃动健身");
403 $(".tabbar button").removeClass("on");
404 $(".tabbar button[data-go='"+v+"']").addClass("on");
405 $(".main").scrollTop(0);
406}
407$(function(){
408 $(document).on("click",".tabbar button[data-go]",function(){ showView($(this).data("go")); });
409 $(document).on("click","[data-go]",function(e){ e.stopPropagation(); showView($(this).data("go")); });
410 $(document).on("click",".meal-card, .food-item, .add, .play, .body-grid .cell, .focus-card, .question .btn, .course-tabs .tab, .course-hori .card, .course-list .card, .menu-card .row, .icr span",function(){ toast("功能演示中"); });
411});
412window.showFitnessView = function(v){ showView(v); };
413</script>
414</body>
415</html>