💻 代码预览 · 小草兼职平台

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"><a class="back" onclick="history.back()">‹</a><h1>数据报表</h1><span class="right"></span></header>
12<div class="card" style="display:flex;text-align:center">
13  <div style="flex:1"><b style="font-size:19px;color:#1e3a8a;display:block">1,260</b><span style="font-size:11px;color:#7c8aa8">在招职位</span></div>
14  <div style="flex:1"><b style="font-size:19px;color:#1e3a8a;display:block">860</b><span style="font-size:11px;color:#7c8aa8">本月报名</span></div>
15  <div style="flex:1"><b style="font-size:19px;color:#1e3a8a;display:block">98.4%</b><span style="font-size:11px;color:#7c8aa8">按时结算率</span></div>
16  <div style="flex:1"><b style="font-size:19px;color:#1e3a8a;display:block">12</b><span style="font-size:11px;color:#7c8aa8">风控拦截</span></div>
17</div>
18<div class="card">
19  <div style="font-size:14px;font-weight:700;margin-bottom:12px">📉 兼职用工漏斗（本月）</div>
20  <div id="funnelList"></div>
21</div>
22<div class="section-title">🏆 热门兼职 TOP5</div>
23<div class="rank-list" id="rankList"></div>
24<div class="section-title">📋 经营分析</div>
25<div class="menu-list" style="margin-top:0">
26  <a data-toast="已生成用工成本分析"><span class="ml-l"><span class="ico">💰</span>用工成本分析（月/季/年）</span><span class="ml-r">›</span></a>
27  <a data-toast="已生成结算报表"><span class="ml-l"><span class="ico">🧾</span>结算与发票报表</span><span class="ml-r">›</span></a>
28  <a data-toast="已生成考勤汇总"><span class="ml-l"><span class="ico">🕐</span>考勤汇总与异常统计</span><span class="ml-r">18 异常</span></a>
29  <a data-toast="已生成风控报告"><span class="ml-l"><span class="ico">🛡️</span>风控与投诉分析</span><span class="ml-r">12 拦截</span></a>
30</div>
31
32
33<nav class="tabbar"><a class="" href="index.html"><span class="icon">🏠</span>工作台</a><a class="" href="jobs.html"><span class="icon">📋</span>职位审核</a><a class="" href="apps.html"><span class="icon">✅</span>报名考勤</a><a class="" href="settle.html"><span class="icon">💰</span>结算</a><a class=" active" href="stats.html"><span class="icon">📊</span>报表</a></nav>
34<script src="../data.js"></script>
35<script>
36  var fl = document.getElementById('funnelList');
37  var h = '';
38  window.DATA.funnel.forEach(function (f) {
39    h += '<div class="funnel-row"><span class="fr-label">' + f.label + '</span><div class="fr-bar"><i style="width:' + (f.val / 12.6) + '%"></i></div><span class="fr-val">' + f.val + '</span></div>';
40  });
41  fl.innerHTML = h;
42  var rl = document.getElementById('rankList');
43  var h2 = '';
44  window.DATA.rankJobs.forEach(function (r, i) {
45    h2 += '<div class="rank-item"><div class="rk-no">' + (i + 1) + '</div><div class="rk-name">' + r.name + '</div><div class="rk-val">' + r.val + '</div></div>';
46  });
47  rl.innerHTML = h2;
48</script>
49<script src="../app.js"></script>
50</body>
51</html>