小草谷子店/index.html · 约 4011 字符
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<div class="banner">
12 <div>
13 <div class="bn-title">小草谷子店</div>
14 <div class="bn-sub">国谷日谷一站吃谷 · 正版授权放心冲<br/>吧唧/立牌/手办/盲盒全品类 · 抽卡抽赏上新</div>
15 <div class="bn-badge">🎉 新人 20 元无门槛券 · 签到抽卡券</div>
16 </div>
17 <div class="bn-emoji">🎏</div>
18</div>
19<div class="quick-grid">
20 <a href="category.html"><div class="qicon">📛</div>吧唧</a>
21 <a href="category.html"><div class="qicon">🖼️</div>立牌</a>
22 <a href="category.html"><div class="qicon">🎎</div>手办</a>
23 <a href="category.html"><div class="qicon">🃏</div>卡牌</a>
24 <a href="category.html"><div class="qicon">🧸</div>毛绒</a>
25 <a href="category.html"><div class="qicon">🎁</div>盲盒</a>
26 <a href="ip.html"><div class="qicon">⚔️</div>IP专区</a>
27 <a href="gacha.html"><div class="qicon">🎰</div>抽卡</a>
28</div>
29<div class="coupon-card">
30 <div class="cc-left"><b>新人礼 20 元无门槛券</b><span>首单立减 · 7 天内有效</span></div>
31 <div class="cc-btn">立即领取</div>
32</div>
33<div class="section-title">🔥 吃谷爆款 <span>月销 5 万+ ›</span></div>
34<div id="hotList"></div>
35<div class="section-title">🏆 消费排行榜 <span>本周 ›</span></div>
36<div class="rank-card" id="spendRank"></div>
37<div class="section-title">🔥 IP 热度榜 <span>实时 ›</span></div>
38<div class="rank-card" id="ipRank"></div>
39<div class="section-title">🎰 今日欧气 <span>抽卡专区 ›</span></div>
40<div class="card" style="margin-top:0;font-size:12px;color:#5b3a72;line-height:2">
41 ✨ 单抽 ¥9.9 · 十连 ¥99 保底 B 赏以上<br/>
42 🏆 SP 隐藏赏稀有度拉满 · 抽到即赚<br/>
43 📦 抽赏奖品顺丰包邮 · 支持自提
44</div>
45
46
47<nav class="tabbar"><a class=" active" href="index.html"><span class="icon">🏠</span>首页</a><a class="" 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>
48<script src="data.js"></script>
49<script>
50 var hl = document.getElementById('hotList');
51 var h = '';
52 window.DATA.goods.filter(function (f) { return f.hot; }).slice(0, 4).forEach(function (f) {
53 h += '<div class="goods-card"><div class="gc-img">' + f.img + '</div><div class="gc-body">'
54 + '<div class="gc-name">' + f.name + ' <span class="badge badge-hot">热</span></div>'
55 + '<div class="gc-ip">IP：' + f.ip + ' · ' + f.jp + '</div>'
56 + '<div class="gc-meta">月销 ' + f.sales.toLocaleString() + ' · ' + f.tags.join(' · ') + '</div>'
57 + '<div class="gc-foot"><div class="gc-price">¥' + f.price + '<small> /原' + f.old + '</small></div>'
58 + '<div class="gc-btn">立即吃谷</div></div></div></div>';
59 });
60 hl.innerHTML = h;
61 var sr = document.getElementById('spendRank');
62 var h2 = '';
63 window.DATA.spendRank.forEach(function (r, i) {
64 h2 += '<div class="rc-row"><div class="rc-no ' + (i < 3 ? 'top' : '') + '">' + (i + 1) + '</div>'
65 + '<div class="rc-body">' + r.name + '</div><div class="rc-val">' + r.val + '</div></div>';
66 });
67 sr.innerHTML = h2;
68 var ir = document.getElementById('ipRank');
69 var h3 = '';
70 window.DATA.ipRank.forEach(function (r, i) {
71 h3 += '<div class="rc-row"><div class="rc-no ' + (i < 3 ? 'top' : '') + '">' + (i + 1) + '</div>'
72 + '<div class="rc-body">' + r.name + '</div><div class="rc-val">' + r.val + '</div></div>';
73 });
74 ir.innerHTML = h3;
75</script>
76<script src="app.js"></script>
77</body>
78</html>