有帮助文档，HTML代码在线实时编辑、实时预览

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213

            
            <!DOCTYPE html>
<html>
<head>
  <title>公司产品平台</title>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>
  <style>
    body {
      margin: 0;
      overflow: hidden;
      font-family: 'Arial', sans-serif;
      color: white;
      background-color: #000;
    }

    /* 星空背景容器 */
    #canvas-container {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
    }

    /* 标题样式（完全匹配图片） */
    .main-title {
      position: absolute;
      top: 20px;
      left: 0;
      width: 100%;
      text-align: center;
      font-size: 2.5em;
      color: white;
      text-shadow: 0 0 10px rgba(255,255,255,0.5);
      z-index: 100;
    }

    /* 工作台按钮（匹配图片样式） */
    .workspace-btn {
      position: absolute;
      top: 20px;
      right: 20px;
      padding: 8px 15px;
      background: rgba(100, 100, 120, 0.3);
      color: #CCCCCC;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      z-index: 100;
    }

    /* 右侧案例展示区 */
    .project-showcase {
      position: absolute;
      top: 30%;
      right: 5%;
      width: 30%;
      display: flex;
      flex-direction: column;
      gap: 20px;
      z-index: 10;
    }

    /* 案例卡片样式（完全匹配图片） */
    .project-card {
      padding: 15px;
      background: rgba(0, 0, 0, 0.7);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 5px;
    }
    .project-title {
      color: #1E90FF; /* 图片中的蓝色文字 */
      font-size: 1.2em;
      margin-bottom: 8px;
    }
    .project-desc {
      color: #CCCCCC;
      font-size: 0.9em;
      line-height: 1.5;
    }

    /* 左侧导航栏（居中） */
    .main-nav {
      position: fixed;
      bottom: 50%;
      left: 5%;
      transform: translateY(50%);
      width: 30%;
      display: flex;
      flex-direction: column;
      gap: 12px;
      z-index: 100;
    }

    /* 导航按钮样式（匹配图片中的灰色按钮） */
    .nav-btn {
      padding: 12px 20px;
      background: rgba(100, 100, 120, 0.3);
      color: #CCCCCC;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      text-align: center;
    }
  </style>
</head>
<body>
  <!-- 星空背景 -->
  <div id="canvas-container"></div>

  <!-- 标题（完全匹配图片文字） -->
  <h1 class="main-title">公司产品平台</h1>
  
  <!-- 右上角工作台按钮 -->
  <button class="workspace-btn">进入工作台</button>

  <!-- 右侧案例展示（三个案例） -->
  <div class="project-showcase">
    <div class="project-card">
      <div class="project-title">面向对象业务系统</div>
      <div class="project-desc">基于Three.js的智能仓储管理系统，实现货物可视化追踪</div>
    </div>
    <div class="project-card">
      <div class="project-title">检测业务系统</div>
      <div class="project-desc">实时监控设备状态和环境数据的数字孪生解决方案</div>
    </div>
    <div class="project-card">
      <div class="project-title">原材料管理服务平台</div>
      <div class="project-desc">使用粒子系统模拟城市交通流量和拥堵预测</div>
    </div>
  </div>

  <!-- 左侧导航（五个按钮居中） -->
  <div class="main-nav">
    <button class="nav-btn">项目案例</button>
    <button class="nav-btn">智能体开发平台</button>
    <button class="nav-btn">帮助文档</button>
    <button class="nav-btn">AI问答</button>
    <button class="nav-btn">智能体</button>
  </div>

  <script>
    // 初始化Three.js场景
    let camera, scene, renderer, particles;
    
    function init() {
      // 相机设置
      camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 2000);
      camera.position.z = 500;

      // 场景设置
      scene = new THREE.Scene();
      scene.fog = new THREE.FogExp2(0x0000ff, 0.001);

      // 粒子系统
      const geometry = new THREE.BufferGeometry();
      const vertices = [];
      const size = 1500;

      for (let i = 0; i < 10000; i++) {
        const x = (Math.random() * size * 2) - size;
        const y = (Math.random() * size * 2) - size;
        const z = (Math.random() * size * 2) - size;
        vertices.push(x, y, z);
      }

      geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));
      
      const material = new THREE.PointsMaterial({
        size: 2,
        color: 0xffffff,
        transparent: true,
        opacity: 0.8
      });

      particles = new THREE.Points(geometry, material);
      scene.add(particles);

      // 渲染器设置
      renderer = new THREE.WebGLRenderer({ 
        antialias: true,
        alpha: true
      });
      renderer.setPixelRatio(window.devicePixelRatio);
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.getElementById('canvas-container').appendChild(renderer.domElement);

      window.addEventListener('resize', onWindowResize);
    }

    function onWindowResize() {
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();
      renderer.setSize(window.innerWidth, window.innerHeight);
    }

    function animate() {
      requestAnimationFrame(animate);
      render();
    }

    function render() {
      particles.rotation.x += 0.001;
      particles.rotation.y += 0.002;
      renderer.render(scene, camera);
    }

    // 初始化场景
    init();
    animate();
  </script>
</body>
</html>
编辑器加载中