invoices.html · 约 2772 字符
1<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>发票与付款 · WorkDesk</title><link rel="stylesheet" href="css/style.css"></head><body><header class="topbar"><div class="topbar-inner">
2 <div class="logo">⚡ WorkDesk</div>
3 <nav class="nav"><a href="index.html" class=""><span>📊</span>Dashboard</a><a href="jobs.html" class=""><span>📋</span>Jobs</a><a href="technicians.html" class=""><span>🔧</span>Technicians</a><a href="calendar.html" class=""><span>📅</span>Calendar</a><a href="customers.html" class=""><span>👥</span>Customers</a><a href="invoices.html" class="on"><span>💳</span>Invoices & Payments</a></nav>
4 <div class="user"><div class="avatar">JD</div><span>John Doe</span></div>
5 </div></header><main class="container"><div class="page-header"><div><h1>发票与付款</h1><div class="date">2026 年 5 月</div></div><div class="actions"><button class="btn primary">+ 新增发票</button></div></div>
6<div class="grid grid-2">
7 <div class="card kpi-card">
8 <div>
9 <div class="t">待收款总额</div>
10 <div class="n" style="color:#EF4444">$176,772</div>
11 <div class="delta">↑ 12% 较上月</div>
12 </div>
13 </div>
14 <div class="card kpi-card">
15 <div>
16 <div class="t">已收款总额</div>
17 <div class="n" style="color:#10B981">$122,644</div>
18 <div class="delta">↑ 8% 较上月</div>
19 </div>
20 </div>
21</div>
22<div class="card">
23 <div class="card-title">发票与付款</div>
24 <table class="table">
25 <thead><tr><th>发票号</th><th>客户</th><th>日期</th><th>金额</th><th>支付方式</th><th>状态</th></tr></thead>
26 <tbody>
27 <tr><td><b>INV-2026-001</b></td><td>蓝天物业</td><td>2026-05-21</td><td>$1,200.00</td><td>银行转账</td><td><span class="badge green">已付</span></td></tr>
28 <tr><td><b>INV-2026-002</b></td><td>星河办公</td><td>2026-05-20</td><td>$850.00</td><td>支付宝</td><td><span class="badge green">已付</span></td></tr>
29 <tr><td><b>INV-2026-003</b></td><td>绿岛园区</td><td>2026-05-18</td><td>$2,000.00</td><td>微信支付</td><td><span class="badge orange">未付</span></td></tr>
30 <tr><td><b>INV-2026-004</b></td><td>红石工厂</td><td>2026-05-15</td><td>$1,500.00</td><td>银行转账</td><td><span class="badge red">逾期</span></td></tr>
31 <tr><td><b>INV-2026-005</b></td><td>金海酒店</td><td>2026-05-12</td><td>$3,200.00</td><td>对公账户</td><td><span class="badge green">已付</span></td></tr>
32 </tbody>
33 </table>
34</div>
35</main><footer>WorkDesk PC 端管理系统演示 · 由 驰旭教育 分享</footer><script src="js/main.js"></script></body></html>