💻 代码预览 · 小草代账管家

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="search-bar"><span class="sb-ico">🔍</span><span class="sb-text">搜索客户 / 手机号 / 统一社会信用代码</span></div>
13<div class="client-tabs">
14  <div class="client-tab sel">全部</div>
15  <div class="client-tab">A类高价值</div>
16  <div class="client-tab">合同到期</div>
17  <div class="client-tab">应收逾期</div>
18  <div class="client-tab">流失预警</div>
19</div>
20<div class="section-title">客户列表 <span>共 128 家 · 本月新增 6 家</span></div>
21<div id="clientList"></div>
22
23
24<nav class="tabbar"><a class="" href="index.html"><span class="icon">🏠</span>工作台</a><a class=" active" href="clients.html"><span class="icon">👥</span>客户</a><a class="" href="contracts.html"><span class="icon">📄</span>合同</a><a class="" href="stats.html"><span class="icon">📊</span>报表</a><a class="" href="mine.html"><span class="icon">👤</span>我的</a></nav>
25<script src="data.js"></script>
26<script>
27  var cl = document.getElementById('clientList');
28  var h = '';
29  var stText = { 1: ['服务中', 's1'], 2: ['即将到期', 's2'], 3: ['应收逾期', 's3'] };
30  window.DATA.clients.forEach(function (c) {
31    var st = stText[c.status] || ['服务中', 's1'];
32    h += '<div class="client-card"><div class="cc-head">'
33      + '<div class="cc-avatar">' + c.avatar + '</div><div>'
34      + '<div class="cc-name">' + c.name + ' <span class="tag">' + c.tag + '</span></div>'
35      + '<div class="cc-meta">' + c.type + ' · ' + c.service + ' · 合作于 ' + c.since + '</div>'
36      + '</div></div>'
37      + '<div class="cc-rows">' + c.cell.map(function (x) { return '<div class="cc-cell">' + x + '</div>'; }).join('') + '</div>'
38      + '<div class="cc-foot"><span>月费 ¥' + c.fee + '</span><span class="st ' + st[1] + '">' + st[0] + '</span></div></div>';
39  });
40  cl.innerHTML = h;
41</script>
42<script src="app.js"></script>
43</body>
44</html>