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>Three.js 三维办公室管理</title>
  <style>
    * { box-sizing: border-box; }
    html, body {
      margin: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
      background: #eef3f9;
      color: #243042;
    }

    #app {
      display: flex;
      width: 100%;
      height: 100%;
    }

    #ui {
      width: 390px;
      max-width: 100%;
      height: 100%;
      overflow-y: auto;
      padding: 16px;
      background: linear-gradient(180deg, #f9fbff 0%, #f2f6fb 100%);
      border-right: 1px solid #dbe4ee;
      box-shadow: 0 0 24px rgba(27, 46, 75, 0.08);
    }

    #ui h1 {
      margin: 0 0 8px;
      font-size: 22px;
    }

    .sub {
      margin-bottom: 12px;
      color: #607086;
      font-size: 13px;
      line-height: 1.6;
    }

    .section {
      margin-bottom: 14px;
      padding: 14px;
      background: rgba(255, 255, 255, 0.88);
      border: 1px solid #dfe8f2;
      border-radius: 14px;
      box-shadow: 0 8px 18px rgba(32, 52, 84, 0.05);
    }

    .section h2 {
      margin: 0 0 12px;
      font-size: 16px;
    }

    .note {
      font-size: 12px;
      color: #68788f;
      line-height: 1.6;
    }

    .selection-grid {
      display: grid;
      gap: 10px;
    }

    .selection-card {
      padding: 10px 12px;
      border-radius: 12px;
      background: #f6f9fd;
      border: 1px solid #dde7f3;
    }

    .selection-title {
      margin-bottom: 6px;
      font-size: 13px;
      color: #6a7b91;
    }

    .selection-line {
      font-size: 13px;
      line-height: 1.7;
      color: #2a3b51;
      word-break: break-all;
    }

    .muted { color: #7e8ea4; }

    label {
      display: block;
      margin-bottom: 10px;
      font-size: 13px;
      color: #405068;
    }

    input, select, button, textarea {
      width: 100%;
      margin-top: 6px;
      border-radius: 10px;
      border: 1px solid #ccd8e6;
      padding: 10px 12px;
      font-size: 14px;
      outline: none;
      background: #fff;
      color: #243042;
    }

    textarea {
      min-height: 74px;
      resize: vertical;
    }

    input:focus, select:focus, textarea:focus {
      border-color: #4d8ef7;
      box-shadow: 0 0 0 3px rgba(77, 142, 247, 0.12);
    }

    .row2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .btn-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-top: 2px;
    }

    .btn-row.single-3 {
      grid-template-columns: 1fr 1fr 1fr;
    }

    button {
      cursor: pointer;
      border: none;
      background: linear-gradient(180deg, #4d8ef7 0%, #3a78dc 100%);
      color: #fff;
      font-weight: 600;
      transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
      box-shadow: 0 8px 16px rgba(58, 120, 220, 0.18);
    }

    button:hover { transform: translateY(-1px); }
    button:active { transform: translateY(0); }
    button.secondary {
      background: linear-gradient(180deg, #7f93ad 0%, #6d7f96 100%);
      box-shadow: 0 8px 16px rgba(95, 114, 137, 0.16);
    }
    button.danger {
      background: linear-gradient(180deg, #f06767 0%, #d84a4a 100%);
      box-shadow: 0 8px 16px rgba(216, 74, 74, 0.16);
    }
    button.success {
      background: linear-gradient(180deg, #37b26c 0%, #26985a 100%);
      box-shadow: 0 8px 16px rgba(38, 152, 90, 0.16);
    }

    #message {
      min-height: 42px;
      margin-bottom: 12px;
      padding: 10px 12px;
      border-radius: 12px;
      background: #eef4ff;
      border: 1px solid #d6e4ff;
      color: #2b4b7c;
      font-size: 13px;
      line-height: 1.5;
      transition: all 0.2s ease;
    }

    #message.error {
      background: #fff2f2;
      border-color: #ffd3d3;
      color: #b13a3a;
    }

    #message.success {
      background: #eefcf4;
      border-color: #cbeed7;
      color: #226b46;
    }

    .list {
      display: grid;
      gap: 10px;
    }

    .card {
      padding: 12px;
      border-radius: 12px;
      border: 1px solid #dde6f2;
      background: #fbfdff;
      transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
      cursor: pointer;
    }

    .card:hover {
      transform: translateY(-1px);
      box-shadow: 0 8px 18px rgba(33, 51, 79, 0.06);
    }

    .card.selected {
      border-color: #4d8ef7;
      box-shadow: 0 0 0 3px rgba(77, 142, 247, 0.13);
      background: #f5faff;
    }

    .card-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 6px;
    }

    .name {
      font-size: 14px;
      font-weight: 700;
      color: #243042;
    }

    .badge {
      display: inline-block;
      padding: 4px 8px;
      border-radius: 999px;
      font-size: 12px;
      color: #fff;
      white-space: nowrap;
    }

    .meta, .task-text {
      font-size: 12px;
      color: #5e7087;
      line-height: 1.7;
      word-break: break-all;
    }

    .task-text {
      margin: 6px 0 8px;
      color: #31445d;
    }

    .progress {
      width: 100%;
      height: 10px;
      overflow: hidden;
      border-radius: 999px;
      background: #e6edf6;
    }

    .progress > span {
      display: block;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, #58a2ff 0%, #3f7cf0 100%);
    }

    .progress-label {
      margin-top: 6px;
      font-size: 12px;
      color: #607086;
    }

    .empty {
      padding: 12px;
      border-radius: 12px;
      background: #f7fafe;
      border: 1px dashed #d6e0ee;
      color: #78889d;
      font-size: 13px;
      text-align: center;
    }

    #sceneWrap {
      position: relative;
      flex: 1;
      min-width: 0;
      height: 100%;
    }

    #threeCanvas {
      display: block;
      width: 100%;
      height: 100%;
    }

    #sceneHint {
      position: absolute;
      top: 16px;
      right: 16px;
      z-index: 2;
      padding: 10px 12px;
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.92);
      border: 1px solid rgba(219, 228, 238, 0.9);
      box-shadow: 0 10px 20px .........完整代码请登录后点击上方下载按钮下载查看