小草驾考宝典_H5/subject.html · 约 3351 字符
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="header"><span class="back" onclick="history.back()">‹</span><h1>科二科三 · 视频教学</h1><span class="right">🎬</span></div>
3<div class="card">
4 <div style="display:flex;gap:8px" id="cat-tabs">
5 <span class="tag" style="flex:1;text-align:center;padding:10px 0;background:var(--primary);color:#fff">🚗 科目二</span>
6 <span class="tag" style="flex:1;text-align:center;padding:10px 0">🛣️ 科目三</span>
7 </div>
8 <div style="font-size:12px;color:#8a97ad;margin-top:8px">💡 3D模拟点位 + 实拍教学，手机随时随地看</div>
9</div>
10<div class="section-title">精选教学视频</div>
11<div id="video-list"></div>
12<div class="section-title">考试项目速览</div>
13<div class="card">
14 <div id="s2-items" style="display:block">
15 <div class="tag" style="margin:3px">倒车入库</div><div class="tag" style="margin:3px">侧方停车</div><div class="tag" style="margin:3px">坡道定点</div><div class="tag" style="margin:3px">直角转弯</div><div class="tag" style="margin:3px">曲线行驶</div><div class="tag" style="margin:3px">窄路掉头</div>
16 </div>
17 <div id="s3-items" style="display:none">
18 <div class="tag" style="margin:3px">上车准备</div><div class="tag" style="margin:3px">灯光模拟</div><div class="tag" style="margin:3px">直线行驶</div><div class="tag" style="margin:3px">加减档</div><div class="tag" style="margin:3px">靠边停车</div><div class="tag" style="margin:3px">掉头变道</div>
19 </div>
20</div>
21<div class="card" style="text-align:center">
22 <div style="font-size:32px">🎓</div>
23 <div style="font-size:14px;font-weight:700;margin-top:4px">找不到教练？约个陪练</div>
24 <div style="font-size:12px;color:#8a97ad;margin:4px 0 10px">科二 68元/小时 · 科三 78元/小时 · 好评率99%</div>
25 <button class="btn btn-primary">立即约陪练</button>
26</div>
27<div style="height:80px"></div>
28<div class="tabbar">
29 <a href="index.html"><span class="icon">🏠</span>首页</a>
30 <a href="practice.html"><span class="icon">📝</span>练习</a>
31 <a href="exam.html"><span class="icon">📋</span>考试</a>
32 <a class="active" href="school.html"><span class="icon">🏫</span>驾校</a>
33 <a href="mine.html"><span class="icon">👤</span>我的</a>
34</div>
35<script src="data.js"></script><script src="app.js"></script>
36<script>
37$('#video-list').innerHTML=VIDEOS.map(v=>`
38 <div class="video-card">
39 <div class="vc-thumb">${v.emoji}<span class="vc-tag">${v.tag}</span><span class="vc-play">▶</span></div>
40 <div class="vc-body">
41 <div class="vc-name">${v.name}</div>
42 <div class="vc-meta">时长 ${v.time} · ${v.views} 次观看</div>
43 </div>
44 </div>`).join('');
45$('#cat-tabs span').forEach((el,i)=>el.onclick=()=>{
46 $$('#cat-tabs span').forEach(x=>{x.style.background='';x.style.color='#5a6a8a'});
47 el.style.background='var(--primary)';el.style.color='#fff';
48 $('#s2-items').style.display=i===0?'block':'none';
49 $('#s3-items').style.display=i===1?'block':'none';
50});
51</script>
52</body></html>