change index page background

web/src/views/Index.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="index-page" :style="{height: winHeight+'px'}">
+    <div class="bg"></div>
     <div class="menu-box">
       <el-menu
           mode="horizontal"
@@ -46,7 +47,7 @@
         <i class="iconfont icon-xmind"></i>
         <span>思维导图</span>
       </el-button>
-      <div id="animation-container"></div>
+      <!--      <div id="animation-container"></div>-->
     </div>
 
     <div class="footer">
@@ -57,7 +58,7 @@
 
 <script setup>
 
-import * as THREE from 'three';
+// import * as THREE from 'three';
 import {onMounted, ref} from "vue";
 import {useRouter} from "vue-router";
 import FooterBar from "@/components/FooterBar.vue";
@@ -69,7 +70,7 @@ const router = useRouter()
 const title = ref("Geek-AI 创作系统")
 const logo = ref("/images/logo.png")
 const slogan = ref("我辈之人，先干为敬，陪您先把 AI 用起来")
-const size = Math.max(window.innerWidth * 0.5, window.innerHeight * 0.8)
+// const size = Math.max(window.innerWidth * 0.5, window.innerHeight * 0.8)
 const winHeight = window.innerHeight - 150
 
 onMounted(() => {
@@ -83,59 +84,59 @@ onMounted(() => {
 })
 
 const init = () => {
-  // 创建场景
+  // // 创建场景
-  // 创建场景
+  // // 创建场景
-  const scene = new THREE.Scene();
+  // const scene = new THREE.Scene();
-
+  //
-  // 创建相机
+  // // 创建相机
-  const camera = new THREE.PerspectiveCamera(30, 1, 0.1, 1000);
+  // const camera = new THREE.PerspectiveCamera(30, 1, 0.1, 1000);
-  camera.position.z = 3.88;
+  // camera.position.z = 3.88;
-
+  //
-  // 创建渲染器
+  // // 创建渲染器
-  const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
+  // const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
-  renderer.setSize(size, size);
+  // renderer.setSize(size, size);
-  renderer.setClearColor(0x000000, 0);
+  // renderer.setClearColor(0x000000, 0);
-  const container = document.getElementById('animation-container');
+  // const container = document.getElementById('animation-container');
-  container.appendChild(renderer.domElement);
+  // container.appendChild(renderer.domElement);
-
+  //
-  // 加载地球纹理
+  // // 加载地球纹理
-  const loader = new THREE.TextureLoader();
+  // const loader = new THREE.TextureLoader();
-  loader.load(
+  // loader.load(
-      '/images/land_ocean_ice_cloud_2048.jpg',
+  //     '/images/land_ocean_ice_cloud_2048.jpg',
-      function (texture) {
+  //     function (texture) {
-        // 创建地球球体
+  //       // 创建地球球体
-        const geometry = new THREE.SphereGeometry(1, 32, 32);
+  //       const geometry = new THREE.SphereGeometry(1, 32, 32);
-        const material = new THREE.MeshPhongMaterial({
+  //       const material = new THREE.MeshPhongMaterial({
-          map: texture,
+  //         map: texture,
-          bumpMap: texture, // 使用同一张纹理作为凹凸贴图
+  //         bumpMap: texture, // 使用同一张纹理作为凹凸贴图
-          bumpScale: 0.05, // 调整凹凸贴图的影响程度
+  //         bumpScale: 0.05, // 调整凹凸贴图的影响程度
-          specularMap: texture, // 高光贴图
+  //         specularMap: texture, // 高光贴图
-          specular: new THREE.Color('#007bff'), // 高光颜色
+  //         specular: new THREE.Color('#01193B'), // 高光颜色
-        });
+  //       });
-        const earth = new THREE.Mesh(geometry, material);
+  //       const earth = new THREE.Mesh(geometry, material);
-        scene.add(earth);
+  //       scene.add(earth);
-
+  //
-        // 添加环境光和点光源
+  //       // 添加环境光和点光源
-        const ambientLight = new THREE.AmbientLight(0xffffff, 0.3);
+  //       const ambientLight = new THREE.AmbientLight(0xffffff, 0.3);
-        scene.add(ambientLight);
+  //       scene.add(ambientLight);
-        const pointLight = new THREE.PointLight(0xffffff, 0.8);
+  //       const pointLight = new THREE.PointLight(0xffffff, 0.8);
-        pointLight.position.set(5, 5, 5);
+  //       pointLight.position.set(5, 5, 5);
-        scene.add(pointLight);
+  //       scene.add(pointLight);
-
+  //
-        // 创建动画
+  //       // 创建动画
-        const animate = function () {
+  //       const animate = function () {
-          requestAnimationFrame(animate);
+  //         requestAnimationFrame(animate);
-
+  //
-          // 使地球自转和公转
+  //         // 使地球自转和公转
-          earth.rotation.y += 0.0006;
+  //         earth.rotation.y += 0.0006;
-
+  //
-          renderer.render(scene, camera);
+  //         renderer.render(scene, camera);
-        };
+  //       };
-
+  //
-        // 执行动画
+  //       // 执行动画
-        animate();
+  //       animate();
-      }
+  //     }
-  );
+  // );
 }
 </script>
 
@@ -143,7 +144,6 @@ const init = () => {
 @import '@/assets/iconfont/iconfont.css'
 .index-page {
   margin: 0
-  background-color #007bff /* 科技蓝色背景 */
   overflow hidden
   color #ffffff
   display flex
@@ -151,6 +151,18 @@ const init = () => {
   align-items baseline
   padding-top 150px
 
+  .bg {
+    position absolute
+    top 0
+    left 0
+    width 100vw
+    height 100vh
+    background-image url("~@/assets/img/ai-bg.jpg")
+    //filter: blur(8px);
+    background-size: cover;
+    background-position: center;
+  }
+
   .menu-box {
     position absolute
     top 0