小草医美/detail.html · 约 4272 字符
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<header class="header"><a class="back" onclick="history.back()">‹</a><h1>项目详情</h1><span class="right"></span></header>
12<div class="detail-img"><div class="di-badge">📷 12 张实拍案例</div>💧</div>
13<div class="detail-price">
14 <div class="dp-num">¥680<small> /次</small> <span style="color:#e11d48;font-size:13px">新人直降 ¥300</span></div>
15 <div class="dp-meta">水光针补水嫩肤 · 进口玻尿酸中胚层补水 · 提亮肤色改善细纹 · 0 恢复期即做即走</div>
16 <div class="dp-row">
17 <div class="dp-cell">💧 无创</div>
18 <div class="dp-cell">⏱ 30 分钟</div>
19 <div class="dp-cell">🔄 恢复 0 天</div>
20 <div class="dp-cell">✅ 验真保真</div>
21 </div>
22</div>
23<div class="spec-box">
24 <div class="sb-title">选择规格</div>
25 <div class="spec-row"><span class="sr-label">产品</span><div class="sr-opts"><div class="spec-opt sel">进口基础款</div><div class="spec-opt">进口加强款</div><div class="spec-opt">国产平价款</div></div></div>
26 <div class="spec-row"><span class="sr-label">次数</span><div class="sr-opts"><div class="spec-opt sel">单次体验</div><div class="spec-opt">3 次卡</div><div class="spec-opt">5 次卡</div></div></div>
27 <div class="spec-row"><span class="sr-label">门店</span><div class="sr-opts"><div class="spec-opt sel">旗舰院</div><div class="spec-opt">高新分院</div><div class="spec-opt">曲江店</div></div></div>
28 <div class="spec-row"><span class="sr-label">数量</span><div class="sr-num"><i>-</i><b>1</b><i>+</i></div></div>
29</div>
30<div class="doctor-mini">
31 <div class="dm-avatar">👩⚕️</div>
32 <div class="dm-body">
33 <div class="dm-name">林婉清 · 主任医师</div>
34 <div class="dm-info">从业 15 年 · 擅长光电抗衰/皮肤管理<br/>累计案例 8600+ · 好评率 99%</div>
35 </div>
36 <div class="dm-btn" data-toast="已发起视频面诊预约">视频面诊</div>
37</div>
38<div class="section-title">📸 真实案例对比</div>
39<div class="case-compare">
40 <div class="cc-head"><span>术前</span><span>术后 28 天</span></div>
41 <div class="cc-imgs"><div class="cc-before">😶</div><div class="cc-after">😊</div></div>
42 <div class="cc-desc">肤色明显提亮 · 斑点淡化 · 上妆更服帖，顾客反馈「素颜也敢出门了」。</div>
43</div>
44<div class="gift-box" style="background:linear-gradient(135deg,#fef3c7,#fde68a);margin:12px;border-radius:14px;padding:14px;font-size:12px;color:#92400e;line-height:1.9">
45 💌 <b>安心承诺：</b>药品耗材扫码验真 · 项目配套医美保险 · 不满意先行赔付 · 到店礼赠术后修护面膜 1 片
46</div>
47<div class="section-title">💬 用户评价（2.3 万+）</div>
48<div id="evalList"></div>
49<div style="height:70px"></div>
50<div class="buy-bar">
51 <div class="bb-cart"><span class="ico">🛒<span class="num">1</span></span>购物车</div>
52 <div class="bb-btn cart" data-toast="已加入购物车">加入购物车</div>
53 <div class="bb-btn now" data-toast="预约提交成功">立即预约</div>
54</div>
55
56
57<nav class="tabbar"><a class="" href="index.html"><span class="icon">🏠</span>首页</a><a class=" active" 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>
58<script src="data.js"></script>
59<script>
60 var el = document.getElementById('evalList');
61 var h = '';
62 window.DATA.evals.forEach(function (x) {
63 h += '<div class="eval-card"><div class="ev-head"><div class="ev-avatar">' + x.avatar + '</div>'
64 + '<div>' + x.name + '</div><div class="ev-star">' + x.star + '</div>'
65 + '</div><div class="ev-text">' + x.text + '</div></div>';
66 });
67 el.innerHTML = h;
68</script>
69<script src="app.js"></script>
70</body>
71</html>