💻 代码预览 · 小草医美

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"><span class="back"></span><h1>项目分类</h1><span class="right">🔍</span></header>
12<div class="filter-tabs">
13  <div class="filter-tab sel">全部</div>
14  <div class="filter-tab">皮肤管理</div>
15  <div class="filter-tab">注射微整</div>
16  <div class="filter-tab">光电抗衰</div>
17  <div class="filter-tab">整形外科</div>
18  <div class="filter-tab">口腔美学</div>
19  <div class="filter-tab">产后修复</div>
20</div>
21<div class="sort-bar"><span class="on">综合排序</span><span>好评优先</span><span>销量优先</span><span>价格从低到高</span></div>
22<div class="section-title">全部项目 <span>共 328 项</span></div>
23<div id="projList"></div>
24
25
26<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>
27<script src="data.js"></script>
28<script>
29  var fl = document.getElementById('projList');
30  var h = '';
31  window.DATA.projects.forEach(function (f) {
32    h += '<div class="proj-card" onclick="location.href='detail.html'"><div class="pc-img">' + f.img + '</div><div class="pc-body">'
33      + '<div class="pc-name">' + f.name + (f.hot ? ' <span class="badge badge-hot">热</span>' : '') + (f.new ? ' <span class="badge badge-new">新</span>' : '') + '</div>'
34      + '<div class="pc-desc">' + f.desc + '</div>'
35      + '<div class="pc-meta">⭐' + f.star + ' · 月销 ' + f.sales.toLocaleString() + ' · 时长' + f.dur + ' · 恢复' + f.rec + '</div>'
36      + '<div class="pc-foot"><div class="pc-price">¥' + f.price + '<small> /原' + f.old + '</small></div>'
37      + '<div class="pc-btn" data-toast="已加入预约清单">预约</div></div></div></div>';
38  });
39  fl.innerHTML = h;
40</script>
41<script src="app.js"></script>
42</body>
43</html>