💻 代码预览 · 小草面馆自助点餐

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">3</span></span>合计</div>
17  <div class="cf-total"><b>¥62</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.noodles.forEach(function (b) {
34    h += '<div class="noodle-card" data-cat="' + b.cat + '"><div class="nc-img">' + b.img + '</div><div class="nc-body">'
35      + '<div class="nc-name">' + b.name + (b.hot ? ' <span class="badge badge-hot">热销</span>' : '') + (b.new ? ' <span class="badge badge-new">新品</span>' : '') + '</div>'
36      + '<div class="nc-desc">' + b.desc + '</div>'
37      + '<div class="nc-meta">月销 ' + b.sales.toLocaleString() + '+ · ' + b.tags.join('/') + '</div>'
38      + '<div class="nc-foot"><div class="nc-price">¥' + b.price + (b.old ? '<small> /原' + b.old + '</small>' : '') + '</div>'
39      + '<div class="nc-add" data-toast="已加入购物车">+</div></div></div></div>';
40  });
41  cl.innerHTML = h;
42</script>
43<script src="app.js"></script>
44</body>
45</html>