💻 代码预览 · 小草医美

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="coupon-card" style="margin-top:12px">
13  <div class="cc-left"><b>商城新人 50 元券</b><span>护肤/仪器通用 · 满 199 可用</span></div>
14  <div class="cc-btn">领取</div>
15</div>
16<div class="section-title">🛍️ 院线好物 <span>正品验真 · 顺丰包邮</span></div>
17<div class="mall-grid" id="mallList"></div>
18<div style="height:20px"></div>
19
20
21<nav class="tabbar"><a class="" 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=" active" href="mine.html"><span class="icon">👤</span>我的</a></nav>
22<script src="data.js"></script>
23<script>
24  var ml = document.getElementById('mallList');
25  var h = '';
26  window.DATA.mall.forEach(function (m) {
27    h += '<div class="mall-item"><div class="mi-img">' + m.img + '</div>'
28      + '<div class="mi-name">' + m.name + '</div>'
29      + '<div class="mi-tags">' + m.tags.join(' · ') + '</div>'
30      + '<div class="mi-foot"><div class="mi-price">¥' + m.price + '</div><div class="mi-btn" data-toast="已加入购物车">加购</div></div></div>';
31  });
32  ml.innerHTML = h;
33</script>
34<script src="app.js"></script>
35</body>
36</html>