💻 代码预览 · 小草二手电动车交易网

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="list.html"><span class="icon">🔍</span>找车</a><a class="" href="sell.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 === '问答' ? 'qa' : (p.type === '用车' ? 'cost' : 'share');
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      + (p.img ? '<div class="pc-img">' + p.img + '</div>' : '')
30      + '<div class="pc-actions"><span>👍 ' + p.likes + '</span><span>💬 评论</span><span>🔗 转发</span></div></div>';
31  });
32  pl.innerHTML = h;
33</script>
34<script src="app.js"></script>
35</body>
36</html>