💻 代码预览 · 家教预约平台H5移动端功能演示

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<link rel="stylesheet" href="style.css">
8</head>
9<body>
10<div class="app">
11  <header class="top">
12    <div class="top-l">家长端 · 晓雯妈妈</div>
13    <div class="top-r">首页</div>
14  </header>
15  <main class="main">
16<div class="banner"><div class="b1">👩‍🏫 为孩子找到合拍的好老师</div>
17<div class="b2">1,280+ 认证教员 · 免费试讲 · 不满意全额退</div></div>
18<div class="search">🔍 搜索科目 / 年级，如「高中数学」</div>
19<div class="chips">
20  <div class="chip on">🔥 热门推荐</div><div class="chip">📐 数学</div><div class="chip">🔤 英语</div>
21  <div class="chip">⚛️ 物理</div><div class="chip">🧪 化学</div>
22</div>
23<div class="card">
24  <div class="sec-title"><span class="em">⭐</span> 本周精选教员</div>
25  <a class="guide" href="detail.html" style="text-decoration:none;color:inherit"><div class="thumb">👩‍🏫</div><div class="info"><div class="nm">林若曦 · 高中数学</div><div class="sub">985 硕士 · 8 年教龄 · 高一~高三</div><div class="meta">★4.9 · 220/课时 · 📍1.2km</div></div></a><a class="guide" href="detail.html" style="text-decoration:none;color:inherit"><div class="thumb">🧑‍🏫</div><div class="info"><div class="nm">陈嘉宁 · 初中英语</div><div class="sub">北外毕业 · TESOL 认证 · 初一~初三</div><div class="meta">★4.8 · 180/课时 · 📍2.4km</div></div></a><a class="guide" href="detail.html" style="text-decoration:none;color:inherit"><div class="thumb">👨‍🏫</div><div class="info"><div class="nm">王浩然 · 高中物理</div><div class="sub">重点中学在职 · 竞赛教练 · 高一~高三</div><div class="meta">★4.9 · 240/课时 · 📍0.8km</div></div></a><a class="guide" href="detail.html" style="text-decoration:none;color:inherit"><div class="thumb">👩‍🎓</div><div class="info"><div class="nm">苏晓彤 · 小学语文/作文</div><div class="sub">师范本科 · 5 年教龄 · 小学全段</div><div class="meta">★4.7 · 150/课时 · 📍3.1km</div></div></a>
26  <a class="btn full" href="list.html" style="text-decoration:none;text-align:center;margin-top:4px">查看全部教员</a>
27</div>
28<div class="card">
29  <div class="sec-title"><span class="em">📊</span> 平台数据</div>
30  <div class="grid">
31    <div class="kpi"><div class="n">1,280</div><div class="l">认证教员</div></div>
32    <div class="kpi"><div class="n">4.8</div><div class="l">平均评分</div></div>
33    <div class="kpi"><div class="n">98%</div><div class="l">试讲满意率</div></div>
34    <div class="kpi"><div class="n">3.6w</div><div class="l">累计课时</div></div>
35  </div>
36</div>
37</main>
38  <nav class="nav"><a class=" on" href="home.html"><span class="ic">🏠</span>首页</a><a class="" href="list.html"><span class="ic">🔍</span>找教员</a><a class="" href="my.html"><span class="ic">📋</span>我的预约</a><a class="" href="mine.html"><span class="ic">👤</span>我的</a></nav>
39</div>
40<script></script>
41</body>
42</html>