小草医美/index.html · 约 4282 字符
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
11<div class="banner">
12 <div>
13 <div class="bn-title">小草医美</div>
14 <div class="bn-sub">持证医师 · 正品验真 · 透明价<br/>让每一次变美，都安心又高级</div>
15 <div class="bn-badge">🎁 新人专享 3 重礼 · 最高省 1200</div>
16 </div>
17 <div class="bn-emoji">💎</div>
18</div>
19<div class="ai-card">
20 <div class="ai-icon">🪞</div>
21 <div class="ai-body">
22 <div class="ai-title">AI 魔镜测脸</div>
23 <div class="ai-sub">上传素颜照 · 智能分析肤质脸型<br/>一键生成专属变美方案</div>
24 </div>
25 <div class="ai-btn" data-toast="正在启动 AI 魔镜测脸…">免费测脸</div>
26</div>
27<div class="quick-grid">
28 <a href="category.html"><div class="qicon">💧</div>皮肤管理</a>
29 <a href="category.html"><div class="qicon">💉</div>注射微整</a>
30 <a href="category.html"><div class="qicon">✨</div>光电抗衰</a>
31 <a href="category.html"><div class="qicon">👁️</div>整形外科</a>
32 <a href="category.html"><div class="qicon">🌿</div>植发养发</a>
33 <a href="category.html"><div class="qicon">🦷</div>口腔美学</a>
34 <a href="category.html"><div class="qicon">🤰</div>产后修复</a>
35 <a href="doctor.html"><div class="qicon">👩⚕️</div>找医师</a>
36</div>
37<div class="coupon-card">
38 <div class="cc-left"><b>新人 200 元无门槛券</b><span>首单立减 · 7 天内有效</span></div>
39 <div class="cc-btn">立即领取</div>
40</div>
41<div class="section-title">🔥 今日爆款项目 <span>月销 10 万+ ›</span></div>
42<div id="hotList"></div>
43<div class="trust-bar">
44 <div class="tb-item"><div class="tb-ico">🏥</div><div class="tb-t">持证机构</div><div class="tb-s">资质可查</div></div>
45 <div class="tb-item"><div class="tb-ico">👩⚕️</div><div class="tb-t">认证医师</div><div class="tb-s">实名公示</div></div>
46 <div class="tb-item"><div class="tb-ico">✅</div><div class="tb-t">扫码验真</div><div class="tb-s">假一赔十</div></div>
47 <div class="tb-item"><div class="tb-ico">🛡️</div><div class="tb-t">先行赔付</div><div class="tb-s">保险护航</div></div>
48</div>
49<div class="section-title">📍 附近门店</div>
50<div id="clinicList"></div>
51
52
53<nav class="tabbar"><a class=" active" href="index.html"><span class="icon">🏠</span>首页</a><a class="" href="category.html"><span class="icon">💎</span>项目</a><a class="" href="doctor.html"><span class="icon">👩⚕️</span>医师</a><a class="" href="appointment.html"><span class="icon">📅</span>预约</a><a class="" href="mine.html"><span class="icon">👤</span>我的</a></nav>
54<script src="data.js"></script>
55<script>
56 var hl = document.getElementById('hotList');
57 var h = '';
58 window.DATA.projects.filter(function (f) { return f.hot; }).slice(0, 4).forEach(function (f) {
59 h += '<div class="proj-card"><div class="pc-img">' + f.img + '</div><div class="pc-body">'
60 + '<div class="pc-name">' + f.name + ' <span class="badge badge-hot">热销</span></div>'
61 + '<div class="pc-desc">' + f.desc + '</div>'
62 + '<div class="pc-meta">⭐' + f.star + ' · 月销 ' + f.sales.toLocaleString() + ' · ' + f.tags.join(' · ') + '</div>'
63 + '<div class="pc-foot"><div class="pc-price">¥' + f.price + '<small> /原' + f.old + '</small></div>'
64 + '<div class="pc-btn">立即预约</div></div></div></div>';
65 });
66 hl.innerHTML = h;
67 var cl = document.getElementById('clinicList');
68 var c = '';
69 window.DATA.clinics.slice(0, 2).forEach(function (x) {
70 c += '<div class="card" style="margin-top:0;display:flex;justify-content:space-between;align-items:center"><div><div style="font-size:14px;font-weight:700">' + x.name + '</div><div style="font-size:11px;color:#b08ba3;margin-top:3px">' + x.addr + '</div></div><div style="color:var(--primary);font-weight:700">' + x.dist + ' ›</div></div>';
71 });
72 cl.innerHTML = c;
73</script>
74<script src="app.js"></script>
75</body>
76</html>