小草员工管家_H5/index.html · 约 4321 字符
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<div class="welcome">
12 <div class="wc-date">2026-08-14 星期五 · 晴</div>
13 <div class="wc-hello">👋 早上好，HR 经理</div>
14 <div class="wc-role">集团人力共享中心 · 管理员工 8,426 人 · 下属组织 26 个</div>
15</div>
16<div class="stat-panel">
17 <div class="sp-item"><b>8,426</b><span>在职员工</span></div>
18 <div class="sp-item"><b>+12</b><span>本月入职</span></div>
19 <div class="sp-item"><b>-4</b><span>本月离职</span></div>
20 <div class="sp-item"><b>6</b><span>考勤异常</span></div>
21</div>
22<div class="quick-grid">
23 <a href="employees.html"><div class="qicon">📇</div>员工花名册</a>
24 <a href="attendance.html"><div class="qicon">🕐</div>考勤打卡</a>
25 <a href="salary.html"><div class="qicon">💰</div>薪酬绩效</a>
26 <a href="recruitment.html"><div class="qicon">🎯</div>招聘管理</a>
27 <a href="training.html"><div class="qicon">📚</div>培训晋升</a>
28 <a data-toast="组织架构 26 个部门已同步"><div class="qicon">🏢</div>组织架构</a>
29 <a data-toast="人力共享中心 12 单待处理"><div class="qicon">🧑💼</div>HR 共享</a>
30 <a data-toast="已生成人力分析报表"><div class="qicon">📊</div>数据看板</a>
31</div>
32<div class="section-title">⚡ 待办与预警 <span>共 8 项</span></div>
33<div class="alert-list" id="alertList"></div>
34<div class="section-title">📈 本月人力指标</div>
35<div class="card" style="margin-top:0">
36 <div class="funnel-row" style="display:flex;align-items:center;gap:10px;margin-bottom:10px;font-size:11px;color:#5a6a92"><span style="width:52px">离职率</span><div style="flex:1;height:14px;background:#eef1f8;border-radius:7px;overflow:hidden"><i style="display:block;height:100%;width:32%;background:linear-gradient(90deg,#1e40af,#3b82f6);border-radius:7px"></i></div><span style="width:36px;text-align:right">3.2%</span></div>
37 <div class="funnel-row" style="display:flex;align-items:center;gap:10px;margin-bottom:10px;font-size:11px;color:#5a6a92"><span style="width:52px">招聘完成</span><div style="flex:1;height:14px;background:#eef1f8;border-radius:7px;overflow:hidden"><i style="display:block;height:100%;width:75%;background:linear-gradient(90deg,#1e40af,#3b82f6);border-radius:7px"></i></div><span style="width:36px;text-align:right">75%</span></div>
38 <div class="funnel-row" style="display:flex;align-items:center;gap:10px;margin-bottom:10px;font-size:11px;color:#5a6a92"><span style="width:52px">培训完成</span><div style="flex:1;height:14px;background:#eef1f8;border-radius:7px;overflow:hidden"><i style="display:block;height:100%;width:86%;background:linear-gradient(90deg,#6d28d9,#8b5cf6);border-radius:7px"></i></div><span style="width:36px;text-align:right">86%</span></div>
39 <div class="funnel-row" style="display:flex;align-items:center;gap:10px;margin-bottom:0;font-size:11px;color:#5a6a92"><span style="width:52px">绩效达标</span><div style="flex:1;height:14px;background:#eef1f8;border-radius:7px;overflow:hidden"><i style="display:block;height:100%;width:91%;background:linear-gradient(90deg,#16a34a,#4ade80);border-radius:7px"></i></div><span style="width:36px;text-align:right">91%</span></div>
40</div>
41
42
43<nav class="tabbar"><a class=" active" href="index.html"><span class="icon">🏠</span>工作台</a><a class="" href="employees.html"><span class="icon">👥</span>员工</a><a class="" href="attendance.html"><span class="icon">🕐</span>考勤</a><a class="" href="recruitment.html"><span class="icon">🎯</span>招聘</a><a class="" href="mine.html"><span class="icon">👤</span>我的</a></nav>
44<script src="data.js"></script>
45<script>
46 var al = document.getElementById('alertList');
47 var h = '';
48 window.DATA.alerts.forEach(function (a) {
49 h += '<div class="alert-item"><div class="ai-dot ' + a.dot + '"></div><div class="ai-body">' + a.text + '</div><div class="ai-time">' + a.time + '</div></div>';
50 });
51 al.innerHTML = h;
52</script>
53<script src="app.js"></script>
54</body>
55</html>