fix

src/assets/text/text.css

@@ -10,3 +10,9 @@
     font-weight: normal;
     font-style: normal;
 }
+@font-face {
+    font-family: 'Poppins';
+    font-style: normal;
+    font-weight: 600;
+    src: url('./Poppins-SemiBold.ttf') format('truetype');
+  }

src/components/home/Text.vue

@@ -40,11 +40,12 @@ onMounted(() => {
   ScrollTrigger.create({
     trigger: slogan.value,
     start: "top-=240px center",
-    end: 'bottom center',
+    end: "bottom+=20px center",
-    scrub: true ,
+    scrub: true,
     onEnter: animateElement,
     onLeaveBack: resetAnimation,
   });
+  // markers: true,
 });
 </script>
 <style lang="scss" scoped>
@@ -54,16 +55,16 @@ onMounted(() => {
 p {
   box-sizing: border-box;
   font-size: 18px;
-  font-family: sans-serif;
+  font-family: "Poppins";
   background-image: linear-gradient(#ffffff 100%, #ffffff 100%, #ffffff 100%);
   background-repeat: repeat-y;
   background-repeat: no-repeat;
   background-position: center center;
   font-size: 16px;
-  font-family: Arial;
   font-weight: bold;
   color: #ffffff;
   line-height: 28px;
+  word-spacing: 2px;
   background-clip: text;
   -webkit-background-clip: text;
   color: transparent;

src/components/home/WhatCebg.vue

@@ -103,12 +103,14 @@
         <img src="@/assets/img/home/what-bg.png" alt="" />
       </div>
     </div>
+    <!-- <Moster></Moster> -->
   </div>
 </template>
 
 <script setup>
 import { ref, onMounted, onBeforeUnmount } from "vue";
 import Text from "./Text.vue";
+import Moster from "./Moster.vue";
 import { gsap } from "gsap";
 const Y1 = ref(0);
 const ratio = ref(0.2); //视差偏移率
@@ -255,6 +257,7 @@ function handleScroll() {
         left: -190px;
         opacity: 1;
       }
+      
       .content-right {
         z-index: 2;
         width: 792px;