💻 代码预览 · 小草文具店

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="cat-tabs"></div>
13<div class="sort-bar"><span class="on">综合排序</span><span>销量优先</span><span>价格从低到高</span></div>
14<div id="catList"></div>
15<div class="cart-float">
16  <div class="cf-cart"><span class="ico">🛒<span class="num">5</span></span>购物车</div>
17  <div class="cf-total"><b>¥86</b></div>
18  <div class="cf-btn" data-toast="已跳转购物车">去结算</div>
19</div>
20
21
22<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="cart.html"><span class="icon">🛒</span>购物车</a><a class="" href="member.html"><span class="icon">👑</span>会员</a><a class="" href="mine.html"><span class="icon">👤</span>我的</a></nav>
23<script src="data.js"></script>
24<script>
25  var ctw = document.querySelector('.cat-tabs');
26  var h0 = '<div class="cat-tab sel">全部</div>';
27  window.DATA.categories.forEach(function (c) {
28    h0 += '<div class="cat-tab">' + c + '</div>';
29  });
30  ctw.innerHTML = h0;
31  var cl = document.getElementById('catList');
32  var h = '';
33  window.DATA.products.forEach(function (b) {
34    h += '<div class="beef-card" data-cat="' + b.cat + '"><div class="bc-img">' + b.img + '</div><div class="bc-body">'
35      + '<div class="bc-name">' + b.name + (b.hot ? ' <span class="badge badge-hot">热卖</span>' : '') + (b.new ? ' <span class="badge badge-new">新品</span>' : '') + '</div>'
36      + '<div class="bc-desc">' + b.desc + '</div>'
37      + '<div class="bc-meta">月供 ' + b.sales.toLocaleString() + '+ · ' + b.origin + ' · ' + b.tags.join('/') + '</div>'
38      + '<div class="bc-foot"><div class="bc-price">¥' + b.price + '<small> /' + b.unit + (b.old ? ' 原' + b.old : '') + '</small></div>'
39      + '<div class="bc-add" data-toast="已加入购物车">+</div></div></div></div>';
40  });
41  cl.innerHTML = h;
42</script>
43<script src="app.js"></script>
44</body>
45</html>