three实现三维办公室工位员工派活管理场景代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：three实现三维办公室工位员工派活管理场景代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>加班有限公司 · 3D 摸鱼办公室</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=ZCOOL+QingKe+HuangYou&family=Noto+Sans+SC:wght@400;500;700;900&display=swap" rel="stylesheet">
<style>
:root{
  --bg0:#0a0f16; --panel:#151d29; --panel2:#1c2736; --line:#2b3a4f;
  --ink:#e9f0f7; --sub:#8ea3bd; --amber:#ffb703; --amber2:#fb8500;
  --teal:#2ee6a8; --red:#ff5d73; --blue:#4cc9f0; --purple:#c77dff;
  --disp:'ZCOOL QingKe HuangYou','Noto Sans SC',sans-serif;
  --shadow:4px 4px 0 rgba(0,0,0,.38);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:var(--bg0);
  font-family:'Noto Sans SC',sans-serif;color:var(--ink);-webkit-user-select:none;user-select:none}
#scene{position:fixed;inset:0}
#scene canvas{display:block;touch-action:none}
#vig{position:fixed;inset:0;pointer-events:none;z-index:5;
  background:radial-gradient(ellipse at 50% 42%,transparent 55%,rgba(4,8,14,.55) 100%)}
.hud{position:fixed;inset:0;z-index:10;pointer-events:none}
.hud>*{pointer-events:auto}

/* ---------- 顶栏 ---------- */
#topbar{position:absolute;top:12px;left:14px;right:14px;display:flex;gap:10px;align-items:stretch;flex-wrap:wrap}
.brand{background:var(--amber);color:#161616;padding:8px 16px 9px;transform:rotate(-.7deg);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%);
  box-shadow:var(--shadow)}
.brand h1{font-family:var(--disp);font-size:25px;letter-spacing:2px;line-height:1;font-weight:400}
.brand small{display:block;font-size:10px;font-weight:900;letter-spacing:3px;opacity:.72;margin-top:2px}
.brand .stripe{height:5px;margin-top:6px;
  background:repeating-linear-gradient(45deg,#161616 0 7px,var(--amber) 7px 14px)}
.pill{background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);
  padding:6px 14px 7px;min-width:92px;display:flex;flex-direction:column;justify-content:center;
  clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,0 100%);transition:transform .15s}
.pill:hover{transform:translateY(-2px)}
.pill span{font-size:10px;letter-spacing:2px;color:var(--sub);font-weight:700}
.pill b{font-family:var(--disp);font-size:21px;font-weight:400;color:var(--amber);line-height:1.15}
.pill.teal b{color:var(--teal)} .pill.blue b{color:var(--blue)}
.pill.hot{border-color:var(--red);animation:hotpulse 1s infinite}
.pill.hot b{color:var(--red)}
.pill.neg b{color:var(--red)}
@keyframes hotpulse{0%,100%{box-shadow:var(--shadow)}50%{box-shadow:4px 4px 0 rgba(255,93,115,.45)}}
#btns{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.btn{font:700 12px 'Noto Sans SC';letter-spacing:1px;padding:9px 13px;cursor:pointer;color:#dfe9f5;
  background:#223047;border:1px solid #35486b;box-shadow:3px 3px 0 rgba(0,0,0,.4);transition:.14s;
  clip-path:polygon(0 0,100% 0,100% 100%,8px 100%,0 calc(100% - 8px))}
.btn:hover{transform:translate(-1px,-2px);box-shadow:5px 6px 0 rgba(0,0,0,.45);background:#2c3d59}
.btn:active{transform:translate(1px,1px);box-shadow:1px 1px 0 rgba(0,0,0,.4)}
.btn.primary{background:var(--amber);border-color:#c98f00;color:#181818}
.btn.primary:hover{background:#ffc733}
.btn.on{background:var(--teal);border-color:#1fae7c;color:#062a1d}
.btn.warn.on{background:var(--red);border-color:#c23a52;color:#fff}

/* ---------- 通用面板 ---------- */
.panel{background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%)}
.ph{font-family:var(--disp);font-weight:400;font-size:15px;letter-spacing:2px;color:#fff;
  display:flex;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid var(--line);
  background:var(--panel2)}
.ph::before{content:'';width:9px;height:9px;background:var(--teal);flex:none}
.ph.red::before{background:var(--red)} .ph.amber::before{background:var(--amber)}

/* ---------- 员工名册 ---------- */
#roster{position:absolute;left:14px;top:86px;bottom:14px;width:232px;display:flex;flex-direction:column}
#rosterList{overflow-y:auto;flex:1;scrollbar-width:thin;scrollbar-color:#33466b transparent}
.emp{display:grid;grid-template-columns:12px 1fr auto;gap:9px;align-items:center;
  padding:8px 11px;border-bottom:1px dashed #263650;cursor:pointer;transition:.12s}
.emp:hover{background:#21304a;transform:translateX(3px)}
.emp.sel{background:#243650;box-shadow:inset 3px 0 0 var(--amber)}
.dot{width:11px;height:11px;border-radius:50%;box-shadow:0 0 0 2px rgba(255,255,255,.12)}
.emp .nm{font-size:13px;font-weight:700;line-height:1.2}
.emp .rl{font-size:10px;color:var(--sub)}
.emp .mini{width:46px;height:4px;background:#0c121c;margin-top:3px}
.emp .mini i{display:block;height:100%;background:var(--teal);transition:width .3s}
.chip{font-size:10px;font-weight:700;padding:2px 8px;border-radius:20px;white-space:nowrap;color:#0d1320}
.chip.slack{animation:chipblink .8s infinite}
@keyframes chipblink{50%{opacity:.45}}

/* ---------- 详情面板 ---------- */
#detail{position:absolute;right:14px;top:86px;width:268px;max-height:calc(100% - 180px);
  display:flex;flex-direction:column}
#detailBody{padding:12px;overflow-y:auto;scrollbar-width:thin}
.dhead{display:flex;gap:10px;align-items:center;margin-bottom:10px}
.dhead .avatar{width:44px;height:44px;flex:none;display:grid;place-items:center;
  font-family:var(--disp);font-size:22px;color:#10151f;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%)}
.dhead .nm{font-family:var(--disp);font-size:21px;letter-spacing:1px}
.dhead .rl{font-size:11px;color:var(--sub)}
.drow{display:flex;justify-content:space-between;align-items:center;font-size:12px;margin:7px 0}
.drow .k{color:var(--sub);letter-spacing:1px}
.bar{height:9px;background:#0c121c;border:1px solid #2a3a55;position:relative}
.bar i{position:absolute;inset:1px;transform-origin:left;background:var(--teal);transition:width .25s}
.bar.big{height:12px}
#dTaskBox{margin:10px 0;padding:9px;background:var(--panel2);border:1px dashed #33466b}
#dTaskBox .tn{font-weight:700;font-size:13px;margin-bottom.........完整代码请登录后点击上方下载按钮下载查看