小草驾考宝典_H5/index.html · 约 3591 字符
1<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><title>小草驾考宝典</title><link rel="stylesheet" href="style.css"></head><body>
2<div class="banner">
3 <div>
4 <div class="bn-title">🚗 小草驾考宝典</div>
5 <div class="bn-sub">2026新题库 · 科一科四免费刷题</div>
6 <span class="bn-badge">📖 题库已更新至 2026-08</span>
7 </div>
8 <div class="bn-emoji">🚦</div>
9</div>
10<div class="progress-hero">
11 <div class="ph-ring"><b>61%</b></div>
12 <div class="ph-info">
13 <b>科目一学习进度</b>
14 <span>已做 820 / 1334 题 · 正确率 92%</span>
15 <span style="display:block;margin-top:4px">🔥 连续打卡 12 天 · 超过 85% 学员</span>
16 </div>
17</div>
18<div class="section-title">学车流程 <span>报名到拿本</span></div>
19<div class="card" style="padding:10px 16px">
20 <div class="flow-steps" id="flow"></div>
21</div>
22<div class="section-title">四大科目 <span>点击进入学习</span></div>
23<div class="subject-grid" id="subjects"></div>
24<div class="section-title">练习模式 <span>科一/科四通用</span></div>
25<div class="subject-grid" id="modes"></div>
26<div class="section-title">口碑驾校 <span>距离近 · 拿本快</span></div>
27<div class="card" id="schools"></div>
28<div style="height:80px"></div>
29<div class="tabbar">
30 <a class="active" href="index.html"><span class="icon">🏠</span>首页</a>
31 <a href="practice.html"><span class="icon">📝</span>练习</a>
32 <a href="exam.html"><span class="icon">📋</span>考试</a>
33 <a href="school.html"><span class="icon">🏫</span>驾校</a>
34 <a href="mine.html"><span class="icon">👤</span>我的</a>
35</div>
36<script src="data.js"></script><script src="app.js"></script>
37<script>
38$('#flow').innerHTML=FLOW.map((s,i)=>'<div class="fs '+(i<=1?'done':'')+(i===1?' now':'')+'"><span class="dot">'+s.emoji+'</span>'+s.name+'</div>').join('');
39$('#subjects').innerHTML=SUBJECTS.map(s=>`
40 <div class="subject-card" onclick="location.href='${s.id===1?'practice.html':s.id===2||s.id===3?'subject.html':'exam.html'}'">
41 <span class="sc-tag badge ${s.tag==='重点'?'badge-hot':'badge-new'}">${s.tag}</span>
42 <div class="sc-emoji">${s.emoji}</div>
43 <div class="sc-name">${s.name}</div>
44 <div class="sc-desc">${s.desc}</div>
45 ${s.total>100?'<div class="sc-progress"><i style="width:'+s.percent+'%"></i></div><div class="sc-percent">已完成 '+s.percent+'%</div>':'<div class="sc-desc" style="color:var(--orange)">点击查看教学视频</div>'}
46 </div>`).join('');
47$('#modes').innerHTML=PRACTICE_MODES.map(m=>`
48 <div class="subject-card" onclick="location.href='practice.html?mode=${m.id}'">
49 <div class="sc-emoji">${m.emoji}</div>
50 <div class="sc-name">${m.name}</div>
51 <div class="sc-desc">${m.desc}</div>
52 </div>`).join('');
53$('#schools').innerHTML=SCHOOLS.slice(0,3).map(s=>`
54 <div class="school-item" onclick="location.href='school.html'">
55 <div class="si-logo">${s.logo}</div>
56 <div class="si-body">
57 <div class="si-name">${s.name} <span class="si-score">★ ${s.score}</span></div>
58 <div class="si-meta">${s.dist} · 学员${s.students} · ${s.tags.join(' / ')}</div>
59 </div>
60 <div style="text-align:right"><div class="si-price"><em>¥</em>${s.price}<small style="color:#8a97ad;font-weight:400">起</small></div><div style="font-size:10px;color:var(--primary)">立即咨询 ›</div></div>
61 </div>`).join('');
62</script>
63</body></html>