💻 代码预览 · 小草谷子店

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 class="filter-tab">挂件</div>
21  <div class="filter-tab">盲盒</div>
22</div>
23<div class="sort-bar"><span class="on">综合排序</span><span>销量优先</span><span>价格从低到高</span></div>
24<div class="section-title">全部谷子 <span>共 1,286 款</span></div>
25<div id="goodsList"></div>
26
27
28<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="gacha.html"><span class="icon">🎰</span>抽卡</a><a class="" href="community.html"><span class="icon">💬</span>社区</a><a class="" href="mine.html"><span class="icon">👤</span>我的</a></nav>
29<script src="data.js"></script>
30<script>
31  var gl = document.getElementById('goodsList');
32  var h = '';
33  window.DATA.goods.forEach(function (f) {
34    h += '<div class="goods-card"><div class="gc-img">' + f.img + '</div><div class="gc-body">'
35      + '<div class="gc-name">' + f.name + (f.hot ? ' <span class="badge badge-hot">热</span>' : '') + (f.new ? ' <span class="badge badge-new">新</span>' : '') + '</div>'
36      + '<div class="gc-ip">IP：' + f.ip + ' · ' + f.jp + ' · <span class="badge ' + (f.jp === '日谷' ? 'badge-cyan' : 'badge-purple') + '">' + f.jp + '</span> · ' + f.stock + '</div>'
37      + '<div class="gc-meta">' + f.tags.join(' · ') + ' · 月销 ' + f.sales.toLocaleString() + '</div>'
38      + '<div class="gc-foot"><div class="gc-price">¥' + f.price + '<small> /原' + f.old + '</small></div>'
39      + '<div class="gc-btn">加入购物车</div></div></div></div>';
40  });
41  gl.innerHTML = h;
42</script>
43<script src="app.js"></script>
44</body>
45</html>