💻 代码预览 · 小草员工管家

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="search-bar"><span class="sb-ico">🔍</span><span class="sb-text">搜索员工姓名 / 工号 / 部门</span></div>
13<div class="emp-tabs">
14  <div class="emp-tab sel">全部</div>
15  <div class="emp-tab">在职</div>
16  <div class="emp-tab">试用期</div>
17  <div class="emp-tab">待转正</div>
18  <div class="emp-tab">已离职</div>
19</div>
20<div class="section-title">员工列表 <span>共 8,426 人 · 本页演示</span></div>
21<div id="empList"></div>
22
23
24<nav class="tabbar"><a class="" href="index.html"><span class="icon">🏠</span>工作台</a><a class=" active" 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>
25<script src="data.js"></script>
26<script>
27  var el = document.getElementById('empList');
28  var h = '';
29  var stMap = { 1: ['在职', 's1'], 2: ['试用期', 's2'], 3: ['已离职', 's3'] };
30  window.DATA.emps.forEach(function (e) {
31    var st = stMap[e.status] || ['在职', 's1'];
32    h += '<div class="emp-card"><div class="ec-head">'
33      + '<div class="ec-avatar">' + e.avatar + '</div><div>'
34      + '<div class="ec-name">' + e.name + ' ' + e.tags.map(function (t) { return '<span class="tag">' + t + '</span>'; }).join('') + '</div>'
35      + '<div class="ec-meta">' + e.no + ' · ' + e.dept + ' · ' + e.post + '</div>'
36      + '</div></div>'
37      + '<div class="ec-rows"><div class="ec-cell">职级 ' + e.level + '</div><div class="ec-cell">' + e.type + '</div><div class="ec-cell">入职 ' + e.since + '</div></div>'
38      + '<div class="ec-foot"><span>合同到期 2027-03-31</span><span class="st ' + st[1] + '">' + st[0] + '</span></div></div>';
39  });
40  el.innerHTML = h;
41</script>
42<script src="app.js"></script>
43</body>
44</html>