💻 代码预览 · 小草牛肉坊

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
16
17<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>
18<script src="data.js"></script>
19<script>
20  var ctw = document.querySelector('.cat-tabs');
21  var h0 = '';
22  window.DATA.categories.forEach(function (c, i) {
23    h0 += '<div class="cat-tab' + (i === 0 ? ' sel' : '') + '">' + c + '</div>';
24  });
25  ctw.innerHTML = h0;
26  var cl = document.getElementById('catList');
27  var h = '';
28  window.DATA.beefs.forEach(function (b) {
29    h += '<div class="beef-card" data-cat="' + b.cat + '"><div class="bc-img">' + b.img + '</div><div class="bc-body">'
30      + '<div class="bc-name">' + b.name + (b.hot ? ' <span class="badge badge-hot">热销</span>' : '') + (b.new ? ' <span class="badge badge-new">新品</span>' : '') + '</div>'
31      + '<div class="bc-desc">' + b.flavor + ' · ' + b.pack + ' · ' + b.spec + '</div>'
32      + '<div class="bc-meta">月销 ' + b.sales.toLocaleString() + '+ · ' + b.unit + '</div>'
33      + '<div class="bc-foot"><div class="bc-price">¥' + b.price + '<small> /原' + b.old + '</small></div>'
34      + '<div class="bc-add" data-toast="已加入购物车">+</div></div></div></div>';
35  });
36  cl.innerHTML = h;
37</script>
38<script src="app.js"></script>
39</body>
40</html>