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

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="detail-head">
13  <div class="dh-avatar">👨‍💻</div>
14  <div>
15    <div class="dh-name">李明 <span style="font-size:11px;opacity:.8">E10086</span></div>
16    <div class="dh-meta">技术部 · 高级前端工程师 · P6 · 全职</div>
17    <div class="dh-actions"><i data-toast="已发送工资条">💰 工资条</i><i data-toast="已发起转正/调岗流程">🔄 调岗调薪</i><i data-toast="已生成异动单">📋 异动</i></div>
18  </div>
19</div>
20<div class="section-title">基础信息</div>
21<div class="info-grid">
22  <div class="info-item">部门岗位<b>技术部 · 高级前端工程师</b></div>
23  <div class="info-item">职级职等<b>P6 · 核心骨干</b></div>
24  <div class="info-item">入职日期<b>2021-04-01（5 年 4 个月）</b></div>
25  <div class="info-item">用工类型<b>全日制 · 固定期限</b></div>
26  <div class="info-item">劳动合同<b>2027-03-31 到期</b></div>
27  <div class="info-item">社保公积金<b style="color:#16a34a">正常缴纳</b></div>
28  <div class="info-item">直属上级<b>王总监</b></div>
29  <div class="info-item">工作地点<b>西安 · 高新区总部</b></div>
30</div>
31<div class="sub-tabs">
32  <a class="active">异动轨迹</a><a>考勤</a><a>薪酬</a><a>绩效</a><a>培训</a>
33</div>
34<div class="section-title">任职异动轨迹</div>
35<div class="timeline" id="tlList"></div>
36<div class="card" style="text-align:center">
37  <div class="btn btn-primary" style="width:60%;display:inline-block" data-toast="已发起流程申请">发起异动流程</div>
38</div>
39
40
41<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>
42<script src="data.js"></script>
43<script>
44  var tl = document.getElementById('tlList');
45  var h = '';
46  window.DATA.timeline.forEach(function (t) {
47    h += '<div class="tl-item ' + (t.now ? 'now' : 'done') + '"><div class="tl-dot"></div><div>'
48      + '<div class="tl-title">' + t.title + '</div><div class="tl-time">' + t.time + '</div></div></div>';
49  });
50  tl.innerHTML = h;
51</script>
52<script src="app.js"></script>
53</body>
54</html>