💻 代码预览 · 小草花坊

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>
21<div class="sort-bar"><span class="on">综合排序</span><span>销量优先</span><span>价格从低到高</span></div>
22<div class="section-title">全部鲜花 <span>共 268 款</span></div>
23<div id="flowerList"></div>
24
25
26<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="subscribe.html"><span class="icon">📅</span>订阅</a><a class="" href="orders.html"><span class="icon">📦</span>订单</a><a class="" href="mine.html"><span class="icon">👤</span>我的</a></nav>
27<script src="data.js"></script>
28<script>
29  var fl = document.getElementById('flowerList');
30  var h = '';
31  window.DATA.flowers.forEach(function (f) {
32    h += '<div class="flower-card"><div class="fc-img">' + f.img + '</div><div class="fc-body">'
33      + '<div class="fc-name">' + f.name + (f.hot ? ' <span class="badge badge-hot">热</span>' : '') + (f.new ? ' <span class="badge badge-new">新</span>' : '') + '</div>'
34      + '<div class="fc-desc">' + f.desc + '</div>'
35      + '<div class="fc-meta">' + f.tags.join(' · ') + ' · 月销 ' + f.sales.toLocaleString() + '</div>'
36      + '<div class="fc-foot"><div class="fc-price">¥' + f.price + '<small> /原' + f.old + '</small></div>'
37      + '<div class="fc-btn">加入购物车</div></div></div></div>';
38  });
39  fl.innerHTML = h;
40</script>
41<script src="app.js"></script>
42</body>
43</html>