💻 代码预览 · 小草二手房

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-bar">
13  <span class="on">区域 <i class="arr">▾</i></span>
14  <span>价格 <i class="arr">▾</i></span>
15  <span>户型 <i class="arr">▾</i></span>
16  <span>更多 <i class="arr">▾</i></span>
17</div>
18<div class="section-title">共 2368 套在售房源</div>
19<div id="houseList"></div>
20<script>
21  var hl = document.getElementById('houseList');
22  var h = '';
23  window.DATA.houses.forEach(function (x) {
24    h += '<div class="house-card" data-toast="查看房源详情">'
25      + '<div class="hc-img">' + x.img + '</div><div class="hc-body">'
26      + '<div class="hc-price">' + x.price + ' 万<small> 单价 ' + x.unit + ' 元/㎡</small></div>'
27      + '<div class="hc-name">' + x.name + '</div>'
28      + '<div class="hc-meta">' + x.area + ' · ' + x.loc + '</div>'
29      + '<div class="hc-tags">' + x.tags.map(function (t) { return '<span class="tag">' + t + '</span>'; }).join('') + '</div>'
30      + '</div></div>';
31  });
32  hl.innerHTML = h;
33</script>
34
35<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="calculator.html"><span class="icon">🧮</span>房贷</a><a class="" href="agent.html"><span class="icon">🤝</span>经纪人</a><a class="" href="mine.html"><span class="icon">👤</span>我的</a></nav>
36<script src="data.js"></script>
37<script src="app.js"></script>
38</body>
39</html>