💻 代码预览 · 某杰废品回收站

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 style="text-align:center;font-size:11px;color:#8fc2b4;padding:10px 0 0">价格随行情每日更新 · 上门实称实结算，不以预估价为准</div>
13<div class="cat-tabs" style="margin-top:8px"></div>
14<div class="sort-bar"><span class="on">综合排序</span><span>回收价从高</span><span>推荐优先</span></div>
15<div id="catList"></div>
16<div class="cart-float">
17  <div class="cf-cart"><span class="ico">📋<span class="num">3</span></span>回收单</div>
18  <div class="cf-total">预估 <b>¥86</b></div>
19  <div class="cf-btn" data-toast="已跳转回收单">去预约</div>
20</div>
21
22
23<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>
24<script src="data.js"></script>
25<script>
26  var ctw = document.querySelector('.cat-tabs');
27  var h0 = '<div class="cat-tab sel">全部</div>';
28  window.DATA.categories.forEach(function (c) {
29    h0 += '<div class="cat-tab">' + c + '</div>';
30  });
31  ctw.innerHTML = h0;
32  var cl = document.getElementById('catList');
33  var h = '';
34  window.DATA.products.forEach(function (b) {
35    h += '<div class="goods-card" data-cat="' + b.cat + '"><div class="gc-img">' + b.img + '</div><div class="gc-body">'
36      + '<div class="gc-name">' + b.name + (b.hot ? ' <span class="badge badge-hot">高价</span>' : '') + (b.new ? ' <span class="badge badge-new">新收</span>' : '') + '</div>'
37      + '<div class="gc-desc">' + b.desc + '</div>'
38      + '<div class="gc-meta">月收 ' + b.sales.toLocaleString() + ' · ' + b.origin + ' · ' + b.tags.join('/') + '</div>'
39      + '<div class="gc-foot"><div class="gc-price">¥' + b.price + '<small> /' + b.unit + (b.old ? ' 涨' + b.old : '') + '</small></div>'
40      + '<div class="gc-add" data-toast="已加入回收单">+</div></div></div></div>';
41  });
42  cl.innerHTML = h;
43</script>
44<script src="app.js"></script>
45</body>
46</html>