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

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="client-tabs">
13  <div class="client-tab sel">全部合同</div>
14  <div class="client-tab">即将到期</div>
15  <div class="client-tab">已到期未续</div>
16  <div class="client-tab">增值服务</div>
17</div>
18<div class="section-title">合同与续费管理 <span>本月 4 份待续费</span></div>
19<div id="contractList"></div>
20
21
22<nav class="tabbar"><a class="" href="index.html"><span class="icon">🏠</span>工作台</a><a class="" href="clients.html"><span class="icon">👥</span>客户</a><a class=" active" 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>
23<script src="data.js"></script>
24<script>
25  var cl = document.getElementById('contractList');
26  var h = '';
27  var stMap = { on: ['服务中', 'on'], warn: ['即将到期', 'warn'], exp: ['已到期', 'exp'] };
28  window.DATA.contracts.forEach(function (c) {
29    var st = stMap[c.status] || ['服务中', 'on'];
30    h += '<div class="contract-card"><div class="cc-head">' + c.name
31      + '<span class="st ' + st[1] + '">' + st[0] + '</span></div>'
32      + '<div class="cc-body"><div class="cc-cell">' + c.type + '</div><div class="cc-cell">' + c.period + '</div><div class="cc-cell">¥' + c.amount + '/年</div></div>'
33      + '<div style="font-size:11px;color:#b0b9cc;margin-top:8px">⏰ ' + c.days + '</div>'
34      + '<div class="cc-foot"><i>查看</i><i>续费提醒</i><i class="main" data-toast="续费申请已提交">发起续费</i></div></div>';
35  });
36  cl.innerHTML = h;
37</script>
38<script src="app.js"></script>
39</body>
40</html>