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

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="filter-tabs">
13  <div class="filter-tab sel">全部</div>
14  <div class="filter-tab">特斯拉</div>
15  <div class="filter-tab">比亚迪</div>
16  <div class="filter-tab">小米</div>
17  <div class="filter-tab">理想</div>
18  <div class="filter-tab">蔚来</div>
19  <div class="filter-tab">极氪</div>
20  <div class="filter-tab">雅迪</div>
21  <div class="filter-tab">两轮</div>
22</div>
23<div class="sort-bar"><span class="on">综合排序</span><span>价格从低到高</span><span>里程最少</span><span>车龄最短</span></div>
24<div class="section-title">全部车源 <span id="carCount"></span></div>
25<div id="carList"></div>
26<div style="height:70px"></div>
27
28
29<nav class="tabbar"><a class="" href="index.html"><span class="icon">🏠</span>首页</a><a class=" active" href="list.html"><span class="icon">🔍</span>找车</a><a class="" href="sell.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>
30<script src="data.js"></script>
31<script>
32  var gl = document.getElementById('carList');
33  var h = '';
34  window.DATA.cars.forEach(function (f) {
35    h += '<div class="car-card"><div class="cc-img">' + f.img + '</div><div class="cc-body">'
36      + '<div class="cc-name">' + f.title + (f.hot ? ' <span class="badge badge-hot">热</span>' : '') + (f.type === '两轮' ? ' <span class="badge badge-cyan">两轮</span>' : '') + '</div>'
37      + '<div class="cc-meta">' + f.year + ' · ' + f.mile + 'km · 续航' + f.range + 'km · 电池' + f.battery + '%</div>'
38      + '<div class="cc-meta">' + f.city + ' · ' + f.tags.join(' · ') + '</div>'
39      + '<div class="cc-foot"><div class="cc-price">¥' + f.price + '万<small>¥' + f.old + '万</small></div>'
40      + '<div class="badge badge-green">看详情</div></div></div></div>';
41  });
42  gl.innerHTML = h;
43  document.getElementById('carCount').textContent = '共 ' + window.DATA.cars.length + ' 辆';
44</script>
45<script src="app.js"></script>
46</body>
47</html>