💻 代码预览 · 小草谷子店

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>IP 角色专区 · 小草谷子店</title>
7<link rel="stylesheet" href="style.css"/>
8</head>
9<body>
10
11<header class="header"><a class="back" onclick="history.back()">‹</a><h1>IP 角色专区</h1><span class="right"></span></header>
12<div class="section-title">🔥 热门 IP 专区</div>
13<div class="ip-grid" id="ipList"></div>
14<div class="section-title">⚔️ 咒术回战 · 角色墙</div>
15<div class="role-wall" id="roleWall"></div>
16<div style="height:70px"></div>
17
18
19<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>
20<script src="data.js"></script>
21<script>
22  var il = document.getElementById('ipList');
23  var h = '';
24  window.DATA.ips.forEach(function (ip) {
25    h += '<div class="ip-card"><div class="ic-top"><div class="ic-emoji">' + ip.emoji + '</div><div class="ic-name">' + ip.name + (ip.hot ? ' <span class="badge badge-hot">热</span>' : '') + '</div></div>'
26      + '<div class="ic-desc">' + ip.desc + '</div>'
27      + '<div class="ic-foot"><span>角色 ' + ip.role + '</span><span>商品 ' + ip.goods + ' 款</span><span>' + ip.members + ' 成员</span></div></div>';
28  });
29  il.innerHTML = h;
30  var rw = document.getElementById('roleWall');
31  var roles = [
32    { e: "👁️", n: "五条悟", t: "最强咒术师" },
33    { e: "🩹", n: "虎杖悠仁", t: "主人公" },
34    { e: "💇", n: "伏黑惠", t: "禅院家" },
35    { e: "🌸", n: "钉崎野蔷薇", t: "大阪女孩" },
36    { e: "💀", n: "两面宿傩", t: "诅咒之王" }
37  ];
38  var h2 = '';
39  roles.forEach(function (r) {
40    h2 += '<div class="rw-row"><div class="rw-emoji">' + r.e + '</div><div class="rw-body"><b>' + r.n + '</b><span>' + r.t + '</span></div><div class="rw-tags">想入手 ›</div></div>';
41  });
42  rw.innerHTML = h2;
43</script>
44<script src="app.js"></script>
45</body>
46</html>