改版

Author: luke94nb666

summit/package-lock.json

@@ -26,6 +26,7 @@
     "sass": "^1.63.5",
     "slick-carousel": "^1.8.1",
     "stripe": "^13.5.0",
+    "three": "^0.162.0",
     "vue": "^3.2.47",
     "vue-i18n": "^9.2.2",
     "vue-number-animation": "^2.0.2",

summit/package.json

@@ -53,11 +53,13 @@ export default {
   top: 0;
   left: 0;
   width: 100%;
-  background-color: #fff; /* 添加背景色，便于查看位置 */
   z-index: 1000;
+  background: rgba(255,255,255,.6);
+  backdrop-filter: blur(10px);
 }
 .main-router{
   width: 100%;
   margin: 0 auto;
+
 }
 </style>

summit/src/App.vue

@@ -24,8 +24,8 @@
     margin-top: .4rem;
 }
 
-body,html {
-   
+.bg {
+   background: #F4F9FF;
 }
 
 *::-webkit-scrollbar {

summit/src/assets/images/genaisummit.png

@@ -1,13 +1,12 @@
 <template>
   <div class="header">
-    <div class="logo2">
+    <div class="logo-content">
+      <div class="logo2">
         <img src="../assets/images/gptdaoLogo2.png" alt="">
-        
-    </div>
-
-    <div class="logo3">
-      <img src="../assets/images/genaisummit.png" alt="">
-
+      </div>
+      <div class="logo3" v-if="screenWidth > 600">
+        <img src="../assets/images/genaisummit.png" alt="">
+      </div>
     </div>
     <div class="nav-list" v-if="screenWidth > 600">
         <ul>
@@ -37,7 +36,6 @@
 
     <div class="logo">
         <img src="../assets/images/microsoftAI.png" alt="">
-        
     </div>
   </div>
 </template>
@@ -115,13 +113,12 @@ export default {
     align-items: center;
     width: 100%;
     margin: 0 auto;
-    max-width: 1200px;
+    max-width: 1500px;
     padding: 0 .5rem;
-    background: #FFFFFF;
-    .logo{
-        img{
-            width: 3.57rem;
-        }
+
+    .logo-content{
+        display: flex;
+        align-items: center;
     }
     .logo2{
       img{
@@ -133,6 +130,11 @@ export default {
             width: 5rem;
         }
     }
+    .logo{
+      img{
+        width: 3rem;
+      }
+    }
     .text{
       font-size: .4rem;
       color: #78808F;
@@ -149,7 +151,7 @@ export default {
                     text-decoration: none;
                     font-family: HarmonyOS Sans SC Bold;
                     font-weight: 400;
-                    font-size: .296rem;
+                    font-size: .278rem;
                     color: #78808F;
                     text-align: left;
                     font-style: normal;

summit/src/assets/images/icon-n.2.png

@@ -1,6 +1,6 @@
 <template>
     <div ref="counterContainer" class="number-counter">
-      <span :key="transitionKey" class="number">{{ displayNumber }}+</span>
+      <span :key="transitionKey" class="number">{{ formatNumber(displayNumber) }}+</span>
     </div>
   </template>
 
@@ -66,11 +66,23 @@
       onMounted(() => {
         window.addEventListener('scroll', handleScroll);
       });
-  
+      const formatNumber = (num) => {
+        if(!num){
+          return 0
+        }
+        if(num == '--'){
+          return '--'
+        }
+        num = Number(num).toFixed(6) - 0
+        const parts = num.toString().split('.')
+        parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+        return parts.join('.')
+      }
       return {
         displayNumber,
         transitionKey,
-        counterContainer
+        counterContainer,
+        formatNumber,
       };
     }
   };

summit/src/assets/images/icon-n.4.png

@@ -0,0 +1,147 @@
+<template>
+  <div class="bgstart" ref="container"></div>
+</template>
+
+<script>
+import { onMounted, onUnmounted, ref } from 'vue';
+import * as THREE from 'three';
+
+export default {
+  name: 'ThreeJsParticlesWaves',
+
+  setup() {
+    const container = ref(null);
+    let camera, scene, renderer, particles;
+    let mouseX = 0, mouseY = 0;
+    let windowHalfX = window.innerWidth / 2;
+    let windowHalfY = window.innerHeight / 2;
+    let count = 0;
+    const SEPARATION = 100, AMOUNTX = 50, AMOUNTY = 50;
+
+    const init = () => {
+      camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
+      camera.position.z = 1000;
+
+      scene = new THREE.Scene();
+
+      particles = new Array();
+
+      const PI2 = Math.PI * 2;
+      const material = new THREE.SpriteMaterial({
+        color: 0xffffff,
+        // 使用圆形纹理代替自定义program绘制
+        map: new THREE.TextureLoader().load('../src/assets/images/yuan.png'),
+    });
+
+      let i = 0;
+      for (let ix = 0; ix < AMOUNTX; ix++) {
+        for (let iy = 0; iy < AMOUNTY; iy++) {
+          let particle = new THREE.Sprite(material);
+          particle.position.x = ix * SEPARATION - ((AMOUNTX * SEPARATION) / 2);
+          particle.position.z = iy * SEPARATION - ((AMOUNTY * SEPARATION) / 2);
+          scene.add(particle);
+          particles[i++] = particle;
+        }
+      }
+
+      renderer = new THREE.WebGLRenderer({ alpha: true }); // 启用透明背景
+      renderer.setSize(window.innerWidth, window.innerHeight);
+      container.value.appendChild(renderer.domElement);
+      document.addEventListener( 'mousemove', onDocumentMouseMove, false );
+      document.addEventListener( 'touchstart', onDocumentTouchStart, false );
+      document.addEventListener( 'touchmove', onDocumentTouchMove, false );
+      window.addEventListener('resize', onWindowResize, false);
+    };
+
+    function onDocumentMouseMove( event ) {
+
+        mouseX = event.clientX - windowHalfX;
+        mouseY = event.clientY - windowHalfY;
+
+        }
+
+        function onDocumentTouchStart( event ) {
+
+        if ( event.touches.length === 1 ) {
+
+            event.preventDefault();
+
+            mouseX = event.touches[ 0 ].pageX - windowHalfX;
+            mouseY = event.touches[ 0 ].pageY - windowHalfY;
+
+        }
+
+        }
+
+        function onDocumentTouchMove( event ) {
+
+        if ( event.touches.length === 1 ) {
+
+            event.preventDefault();
+
+            mouseX = event.touches[ 0 ].pageX - windowHalfX;
+            mouseY = event.touches[ 0 ].pageY - windowHalfY;
+
+        }
+
+        }
+
+    const onWindowResize = () => {
+      windowHalfX = window.innerWidth / 2;
+      windowHalfY = window.innerHeight / 2;
+
+      camera.aspect = window.innerWidth / window.innerHeight;
+      camera.updateProjectionMatrix();
+
+      renderer.setSize(window.innerWidth, window.innerHeight);
+    };
+
+    const animate = () => {
+      requestAnimationFrame(animate);
+      render();
+    };
+
+    const render = () => {
+      camera.position.x += (mouseX - camera.position.x) * .05;
+      camera.position.y += (-mouseY - camera.position.y) * .05;
+      camera.lookAt(scene.position);
+
+      let i = 0;
+
+      for (let ix = 0; ix < AMOUNTX; ix++) {
+        for (let iy = 0; iy < AMOUNTY; iy++) {
+          let particle = particles[i++];
+          particle.position.y = (Math.sin((ix + count) * 0.3) * 50) + (Math.sin((iy + count) * 0.5) * 50);
+          particle.scale.x = particle.scale.y = (Math.sin((ix + count) * 0.3) + 1) * 2 + (Math.sin((iy + count) * 0.5) + 1) * 2;
+        }
+      }
+
+      renderer.render(scene, camera);
+
+      count += 0.1;
+    };
+
+    onMounted(() => {
+      init();
+      animate();
+    });
+
+    onUnmounted(() => {
+      window.removeEventListener('resize', onWindowResize);
+    });
+
+    return {
+      container,
+    };
+  },
+};
+</script>
+
+<style>
+.bgstart{
+    position: absolute;
+    top: -20%;
+    left: 0;
+}
+
+</style>