js+css实现ai多agent可视化运行展示代码-html代码-BFW代码库

js+css实现ai多agent可视化运行展示代码

代码语言：html

代码描述：js+css实现ai多agent可视化运行展示代码，鼠标悬浮单个agent可看到工作内容及进度。

下面为部分代码预览，完整代码请点击下载或在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>AI Agent 办公室</title>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">
    <style>
        *{margin:0;padding:0;box-sizing:border-box;}
        body{
            font-family:'Noto Sans SC',sans-serif;
            background:#1a1a2e;
            min-height:100vh;
            overflow-x:hidden;
        }
        /* 办公室背景 - 地板纹理 */
        .office-bg{
            position:fixed;inset:0;z-index:0;
            background:
                radial-gradient(ellipse at 50% 0%, #252542 0%, #1a1a2e 60%),
                repeating-linear-gradient(90deg, transparent, transparent 59px, rgba(255,255,255,0.015) 59px, rgba(255,255,255,0.015) 60px),
                repeating-linear-gradient(0deg, transparent, transparent 59px, rgba(255,255,255,0.01) 59px, rgba(255,255,255,0.01) 60px);
        }
        /* 顶部灯光 */
        .ceiling-light{
            position:fixed;top:-60px;left:50%;transform:translateX(-50%);
            width:500px;height:200px;
            background:radial-gradient(ellipse,rgba(255,240,210,0.08) 0%,transparent 70%);
            pointer-events:none;z-index:1;
        }

        /* 头部 */
        header{
            position:relative;z-index:2;
            text-align:center;padding:36px 20px 10px;
        }
        header h1{
            font-size:1.6rem;font-weight:700;color:#e8e6e3;
            letter-spacing:1px;
        }
        header p{
            font-size:0.82rem;color:rgba(255,255,255,0.35);margin-top:4px;
        }
        .stats{
            display:flex;justify-content:center;gap:24px;margin-top:14px;flex-wrap:wrap;
        }
        .stats span{
            font-size:0.75rem;color:rgba(255,255,255,0.4);
            display:flex;align-items:center;gap:5px;
        }
        .stats .val{color:#e8e6e3;font-weight:600;font-size:0.9rem;}
        .dot{width:6px;height:6px;border-radius:50%;display:inline-block;}
        .dot-green{background:#22c55e;box-shadow:0 0 6px #22c55e55;}
        .dot-yellow{background:#eab308;}
        .dot-blue{background:#6366f1;}

        /* 办公网格 */
        .office-grid{
            position:relative;z-index:2;
            display:grid;
            grid-template-columns:repeat(3,1fr);
            gap:20px;
            max-width:960px;margin:20px auto 40px;padding:0 20px;
        }

        /* 工位卡片 */
        .desk-card{
            position:relative;
            background:#22223a;
            border-radius:18px;
            overflow:hidden;
            cursor:default;
            transition:transform 0.3s ease, box-shadow 0.3s ease;
        }
        .desk-card:hover{
            transform:translateY(-3px);
            box-shadow:0 12px 40px -8px rgba(0,0,0,0.6);
        }

        /* 场景容器 */
        .scene{
            position:relative;
            height:240px;
            overflow:hidden;
            display:flex;
            align-items:flex-end;
            justify-content:center;
        }

        /* 墙壁背景 */
        .wall{
            position:absolute;top:0;left:0;right:0;height:55%;
            background:linear-gradient(180deg,#2a2a48 0%,#252542 100%);
        }
        .wall::after{
            content:'';position:absolute;bottom:0;left:0;right:0;height:1px;
            background:rgba(255,255,255,0.04);
        }

        /* 地板 */
        .floor-area{
            position:absolute;bottom:0;left:0;right:0;height:45%;
            background:linear-gradient(180deg,#1e1e36 0%,#1a1a30 100%);
        }

        /* 桌子 */
        .desk-table{
            position:absolute;
            bottom:50px;
            left:50%;transform:translateX(-50%);
            z-index:5;
        }
        .desk-top{
            width:180px;height:10px;
            background:linear-gradient(180deg,#4a4a68,#3e3e5a);
            border-radius:3px;
            position:relative;
        }
        .desk-top::before{
            content:'';position:absolute;top:0;left:0;right:0;height:2px;
     .........完整代码请登录后点击上方下载按钮下载查看