💻 代码预览 · 小草萌猫社区

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="section-title">🛒 猫奴刚需好物 <span>积分兑换 ›</span></div>
13<div class="mall-grid" id="mallList"></div>
14<div class="card" style="margin-top:0;text-align:center">
15  <div style="font-size:14px;font-weight:800;margin-bottom:8px">🪙 猫币商城</div>
16  <div style="font-size:12px;color:#a78a97;line-height:1.8;margin-bottom:12px">每日签到、发帖、点赞都能攒猫币，200 猫币兑猫零食，1000 猫币兑猫玩具</div>
17  <div class="btn btn-primary" data-toast="已跳转猫币商城">去赚猫币</div>
18</div>
19<div style="height:70px"></div>
20
21
22
23<script src="data.js"></script>
24<script>
25  var ml = document.getElementById('mallList');
26  var h=''; window.DATA.mall.forEach(function(m){
27    h+='<div class="mall-item"><div class="mi-img">'+m.emoji+'</div><div class="mi-name">'+m.name+'</div><div class="mi-price">¥'+m.price+'<span class="mi-old">¥'+m.old+'</span></div><div class="mi-btn" data-toast="已加入购物车：'+m.name+'">加入购物车</div></div>';
28  });
29  ml.innerHTML = h;
30</script>
31<script src="app.js"></script>
32</body>
33</html>