💻 代码预览 · 小草律所

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="field-tabs"></div>
13<div class="section-title">执业律师 <span>共 30+ 位</span></div>
14<div id="lawyerList"></div>
15
16
17<nav class="tabbar"><a class="" href="index.html"><span class="icon">🏛️</span>首页</a><a class=" active" href="lawyers.html"><span class="icon">👨‍⚖️</span>律师</a><a class="" href="consult.html"><span class="icon">💬</span>咨询</a><a class="" href="cases.html"><span class="icon">📁</span>案例</a><a class="" href="mine.html"><span class="icon">👤</span>我的</a></nav>
18<script src="data.js"></script>
19<script>
20  var ftw = document.querySelector('.field-tabs');
21  var h0 = '';
22  window.DATA.fields.forEach(function (f, i) {
23    h0 += '<div class="field-tab' + (i === 0 ? ' sel' : '') + '">' + f + '</div>';
24  });
25  ftw.innerHTML = h0;
26  var ll = document.getElementById('lawyerList');
27  var h = '';
28  window.DATA.lawyers.forEach(function (l) {
29    h += '<div class="lawyer-card" data-field="' + l.field + '"><div class="lc-avatar">' + l.avatar + '</div><div class="lc-body">'
30      + '<div class="lc-name">' + l.name + '</div><div class="lc-title">' + l.title + '</div>'
31      + '<div class="lc-meta">' + l.field + ' · ' + l.meta + '</div>'
32      + '</div><div class="lc-btn" data-toast="正在联系 ' + l.name + ' 律师">咨询</div></div>';
33  });
34  ll.innerHTML = h;
35</script>
36<script src="app.js"></script>
37</body>
38</html>