💻 代码预览 · 小草谷子店

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"><a class="back" onclick="history.back()">‹</a><h1>晒谷社区</h1><span class="right"></span></header>
12<div class="cmt-tabs">
13  <a class="active">全部</a><a>晒谷</a><a>闲置</a>
14</div>
15<div id="postList"></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="" href="category.html"><span class="icon">🛍️</span>分类</a><a class="" href="gacha.html"><span class="icon">🎰</span>抽卡</a><a class=" active" 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 pl = document.getElementById('postList');
23  var h = '';
24  window.DATA.community.forEach(function (p) {
25    var typeCls = p.type === '闲置' ? 'idle' : 'show';
26    h += '<div class="post-card"><div class="pc-head"><div class="pc-avatar">' + p.avatar + '</div><div>' + p.name + '</div>'
27      + '<div class="pc-type ' + typeCls + '">' + p.type + '</div></div>'
28      + '<div class="pc-text">' + p.text + '</div>'
29      + '<div class="pc-img">' + p.img + '</div>'
30      + (p.price ? '<div class="pc-price">出谷价 ' + p.price + '（原价更高）</div>' : '')
31      + '<div class="pc-actions"><span>👍 ' + p.likes + '</span><span>💬 评论</span><span>🔗 转发</span></div></div>';
32  });
33  pl.innerHTML = h;
34</script>
35<script src="app.js"></script>
36</body>
37</html>