index.html · 约 6179 字符
1<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Dashboard · 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="on"><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=""><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>Dashboard</h1><div class="date">Thursday, 12 May</div></div><div class="actions"><button class="btn ghost">🤖 Auto Questionnaire</button><button class="btn primary">+ Add Job</button></div></div>
6<div class="grid grid-3">
7 <div class="card">
8 <div class="card-title">Upcoming Jobs <span class="badge blue">3 today</span></div>
9 <div class="job-card orange"><h4>#006 AAA AAD1</h4><p>客户：蓝天物业 · 空调检修</p><p>技师：刘师傅</p><span class="tag">14:00 PM, 21 May</span></div>
10 <div class="job-card blue"><h4>#007 AAA AAD2</h4><p>客户：星河办公 · 网络维护</p><p>技师：王师傅</p><span class="tag">16:00 PM, 21 May</span></div>
11 <div class="job-card green"><h4>#008 AAA AAD3</h4><p>客户：绿岛园区 · 门禁调试</p><p>技师：张师傅</p><span class="tag">09:00 AM, 22 May</span></div>
12 </div>
13 <div class="card">
14 <div class="card-title">Today's Stats <span class="sub">Updated just now</span></div>
15 <div class="stat-row"><span class="k">Money</span><span class="v">$120.00</span></div>
16 <div class="stat-row"><span class="k">Money Collected</span><span class="v">$61.00</span></div>
17 <div class="stat-row"><span class="k">Money Refunded</span><span class="v">$24.00</span></div>
18 <div class="stat-row"><span class="k">Jobs Completed</span><span class="v">14</span></div>
19 <div class="stat-row"><span class="k">Jobs Assigned</span><span class="v">19</span></div>
20 <div class="stat-row"><span class="k">Jobs Created</span><span class="v">23</span></div>
21 </div>
22 <div class="card">
23 <div class="card-title">Incoming Jobs <div class="tabs"><button class="on">Today</button><button>This Week</button><button>This Month</button></div></div>
24 <div style="text-align:center;margin-bottom:10px"><span style="font-size:34px;font-weight:800;color:#3B82F6">27</span><div style="font-size:12px;color:#6B7280">New Jobs</div></div>
25 <svg viewBox="0 0 300 120" style="width:100%;height:180px"><path d="M10,110 30,95 60,85 90,92 120,70 150,55 180,68 210,40 240,50 270,35 290,45 290,110 Z" fill="#3B82F6" opacity="0.1"/><polyline points="10,95 30,88 60,78 90,85 120,68 150,55 180,65 210,42 240,52 270,38 290,45" fill="none" stroke="#3B82F6" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><circle cx="210" cy="42" r="5" fill="#3B82F6"/></svg>
26 <div style="display:flex;justify-content:space-between;font-size:12px;color:#9CA3AF;margin-top:8px"><span>MON</span><span>TUE</span><span>WED</span><span>THU</span><span>FRI</span><span>SAT</span><span>SUN</span></div>
27 </div>
28</div>
29<div class="grid grid-3">
30 <div class="card" style="text-align:center">
31 <div class="card-title">Jobs Assigned</div>
32 <svg viewBox="0 0 120 120" width="130" height="130" style="margin:auto"><circle cx="60" cy="60" r="40" fill="none" stroke="#E5E7EB" stroke-width="10"/><circle cx="60" cy="60" r="40" fill="none" stroke="#3B82F6" stroke-width="10" stroke-dasharray="145.5 105.7" stroke-linecap="round" transform="rotate(-90 60 60)"/><text x="60" y="58" text-anchor="middle" font-size="18" font-weight="800" fill="#1F2937">58%</text><text x="60" y="74" text-anchor="middle" font-size="10" fill="#6B7280">Assigned</text></svg>
33 <div style="display:flex;justify-content:space-around;margin-top:16px;font-size:12px"><div><span style="color:#3B82F6;font-weight:800">●</span> Total Assigned</div><div><span style="color:#6B7280;font-weight:800">●</span> Total Incoming</div></div>
34 </div>
35 <div class="card">
36 <div class="card-title">Invoicing</div>
37 <div style="display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:16px">
38 <div><div style="font-size:12px;color:#EF4444">Due</div><div style="font-size:22px;font-weight:800;color:#EF4444">$176,772</div></div>
39 <div><div style="font-size:12px;color:#10B981;text-align:right">Paid</div><div style="font-size:22px;font-weight:800;color:#10B981;text-align:right">$122,644</div></div>
40 </div>
41 <div style="height:8px;background:#F3F4F6;border-radius:999px;overflow:hidden;margin-bottom:20px"><div style="width:59%;height:100%;background:#10B981;border-radius:999px"></div></div>
42 <div class="stat-row"><span class="k">Currently Invoices Due</span><span class="v">49</span></div>
43 <div class="stat-row"><span class="k">All time paid invoices</span><span class="v">543</span></div>
44 </div>
45 <div class="card">
46 <div class="card-title">Income Summary</div>
47 <div class="summary">
48 <div class="sum-item"><div class="label">In Transit</div><div class="value">$400.00</div></div>
49 <div class="sum-item"><div class="label">Overdue</div><div class="value">$125.77</div></div>
50 <div class="sum-item"><div class="label">Due</div><div class="value">$443.74</div></div>
51 <div class="sum-item up"><div class="label">Successful</div><div class="value">$1,342.00</div></div>
52 <div class="sum-item down"><div class="label">Failed</div><div class="value">$125.77</div></div>
53 <div class="sum-item"><div class="label">Pending</div><div class="value">$200.00</div></div>
54 </div>
55 </div>
56</div>
57</main><footer>WorkDesk PC 端管理系统演示 · 由 驰旭教育 分享</footer><script src="js/main.js"></script></body></html>