fix

src/components/about/IntroductionBanner.vue

@@ -24,7 +24,7 @@
         </div>
       </div>
       <div class="content-right">
-        <div class="moster">
+        <div class="moster" ref="mosterElement">
           <img src="@/assets/img/about/moster.png" alt="" />
         </div>
       </div>
@@ -44,38 +44,18 @@ import { gsap } from "gsap";
 import ScrollAnimatedText from "../global/ScrollAnimatedText.vue";
 import { ScrollTrigger } from "gsap/ScrollTrigger";
 const textElement = ref(null);
+const mosterElement = ref(null);
 
 gsap.registerPlugin(ScrollTrigger);
 
 const slogan = ref(null);
 
-// const animateElement = () => {
-//   gsap.to(slogan.value, {
-//     opacity: 1,
-//     y: 0,
-//     duration: 1,
-//     ease: "power2.out",
-//   });
-//   slogan.value.classList.add("animate");
-// };
-
-// onMounted(() => {
-//   ScrollTrigger.create({
-//     trigger: slogan.value,
-//     start: "top-=240px center",
-//     onEnter: animateElement,
-//   });
-// });
 const handleScroll = () => {
   const scrollY = window.scrollY;
 
-  // 计算透明度和放大比例
   const opacity = 1 - Math.min(scrollY / 500, 1);
-
-  // 将最大放大比例从2减小到1.5
   const scale = 1 + Math.min(scrollY / 1000, 0.5);
 
-  // 设置文本的样式
   if (textElement.value) {
     textElement.value.style.opacity = opacity;
     textElement.value.style.transform = `scale(${scale})`;
@@ -84,6 +64,17 @@ const handleScroll = () => {
 
 onMounted(() => {
   window.addEventListener("scroll", handleScroll);
+
+  if (mosterElement.value) {
+    mosterElement.value.style.transform = "translateX(950px)";
+  }
+
+  gsap.to(mosterElement.value, {
+    x: 0,
+    delay: 0.5,
+    duration: 1,
+    ease: "power2.out",
+  });
 });
 
 onUnmounted(() => {

src/components/about/LatestNews.vue

@@ -19,6 +19,7 @@
         :centeredSlides="true"
         slidesPerView="3"
         :spaceBetween="50"
+        :autoplay="{ delay: 1500, disableOnInteraction: false }"
         :coverflowEffect="{
           rotate: 0,
           stretch: 10,
@@ -32,7 +33,6 @@
         }"
         :modules="modules"
         :loop="true"
-        :autoplay="{ delay: 3500, disableOnInteraction: false }"
         class="mySwiper"
         ref="myRef"
       >
@@ -46,6 +46,7 @@
       <div class="swiper-btn-next" @click="handSlideNext">
         <img src="@/assets/img/home/game-swiper-card/prev.png" alt="" />
       </div> -->
+      
     </div>
   </div>
 </template>
@@ -60,7 +61,7 @@ import {
   Navigation,
   Pagination,
 } from "swiper";
-import { Swiper, SwiperSlide,  } from "swiper/vue";
+import { Swiper, SwiperSlide } from "swiper/vue";
 import "swiper/css";
 import "swiper/css/navigation";
 import "swiper/css/thumbs";
@@ -71,37 +72,22 @@ const ratio = ref(0.2); //视差偏移率
 const positionY1 = ref(0); //背景Y轴偏移量
 const box = ref(null);
 const myRef = ref(null);
-const modules = [Pagination, Autoplay];
+const modules = [Pagination,Autoplay];
 const imageList = reactive([
   {
-    imgSrc: new URL(
-      "@/assets/img/home/game-swiper-card/01.png",
-      import.meta.url
-    ).href,
+    imgSrc: new URL("@/assets/img/about/latest/001.png", import.meta.url).href,
   },
   {
-    imgSrc: new URL(
-      "@/assets/img/home/game-swiper-card/02.png",
-      import.meta.url
-    ).href,
+    imgSrc: new URL("@/assets/img/about/latest/002.png", import.meta.url).href,
   },
   {
-    imgSrc: new URL(
-      "@/assets/img/home/game-swiper-card/03.png",
-      import.meta.url
-    ).href,
+    imgSrc: new URL("@/assets/img/about/latest/003.png", import.meta.url).href,
   },
   {
-    imgSrc: new URL(
-      "@/assets/img/home/game-swiper-card/04.png",
-      import.meta.url
-    ).href,
+    imgSrc: new URL("@/assets/img/about/latest/004.png", import.meta.url).href,
   },
   {
-    imgSrc: new URL(
-      "@/assets/img/home/game-swiper-card/05.png",
-      import.meta.url
-    ).href,
+    imgSrc: new URL("@/assets/img/about/latest/005.png", import.meta.url).href,
   },
 ]);
 
@@ -181,6 +167,7 @@ function handleScroll() {
 .swiper-slide img {
   display: block;
   width: 100%;
+  height: 100%;
 }
 .swiper-content {
   position: relative;
@@ -227,4 +214,27 @@ function handleScroll() {
   padding-top: 136px;
   padding-bottom: 300px;
 }
+.mySwiper .swiper-slide {
+  // border: 3px solid #04d8d8;
+  border-radius: 12px;
+}
+.mySwiper .swiper-slide:hover {
+  opacity: 1;
+  border-radius: 12px;
+  border: 3px solid #04d8d8;
+
+  cursor: pointer;
+}
+.mySwiper .swiper-slide-active{
+  border-radius: 12px;
+  border: 3px solid #04d8d8;
+}
+ :deep(.swiper-slide-duplicate.swiper-slide-active){
+  border-radius: 12px;
+  border: 3px solid #04d8d8;
+}
+.mySwiper .swiper-slide-thumb-active {
+  // border: 3px solid #04d8d8;
+  border-radius: 12px;
+}
 </style>

src/components/about/Roadmap.vue

@@ -112,6 +112,7 @@ onMounted(() => {
 });
 
 function handleScroll() {
+  
   const scrollTop =
     window.pageYOffset ||
     document.documentElement.scrollTop ||
@@ -223,7 +224,7 @@ function handleScroll() {
         border-radius: 12px;
         background: url("../../assets/img/about/history-bg.png")no-repeat;
         background-size: contain;
-        font-size: 16px;
+        font-size: 15px;
         font-family: 'Poppins';
         font-weight: 400;
         color: #ffffff;
@@ -231,6 +232,7 @@ function handleScroll() {
         display: flex;flex-direction: column;
         justify-content:center ;
         align-items: center;
+        transition: transform 0.3s;
         .item{
             padding-left: 10px;
         .text{
@@ -249,6 +251,9 @@ function handleScroll() {
         }
         }
       }
+      .card-item:hover {
+        transform: translateY(-10px) scale(1.06);
+      }
     }
   }
 }

src/components/about/VisionMission.vue

@@ -10,7 +10,7 @@
     </div>
     <div class="content">
       <div class="content-top">
-        <div class="content-left">
+        <div class="content-left" ref="contentLeft">
           <div class="mission">
             <img src="@/assets/img/about/mission.png" alt="" />
           </div>
@@ -66,9 +66,15 @@
 import { ref, computed, reactive, onMounted } from "vue";
 import Grid9Panel from "./Grid9Panel.vue";
 import ScrollAnimatedText from "../global/ScrollAnimatedText.vue";
+import { gsap } from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+
+gsap.registerPlugin(ScrollTrigger);
 const Y1 = ref(0);
 const ratio = ref(0.2); //视差偏移率
 const positionY1 = ref(0); //背景Y轴偏移量
+const contentLeft = ref(null);
+const animationTriggered = ref(false);
 const cardText = [
   {
     name: "Michael Yue",
@@ -97,9 +103,25 @@ onMounted(() => {
   window.addEventListener("scroll", handleScroll); //创建滚动监听，页面滚动回调handleScroll方法
   let bgTest = document.getElementById("bgTest");
   Y1.value = bgTest.offsetTop * ratio.value;
+  contentLeftAnimation();
 });
-
+function contentLeftAnimation() {
+  gsap.from(contentLeft.value, {
+    x: -1000,
+    duration: 1,
+    ease: "power2.out",
+  });
+}
+function isContentLeftVisible() {
+  const rect = contentLeft.value.getBoundingClientRect();
+  const windowHeight = (window.innerHeight || document.documentElement.clientHeight);
+  return rect.top <= windowHeight && rect.bottom >= 0;
+}
 function handleScroll() {
+  if (!animationTriggered.value && isContentLeftVisible()) {
+    contentLeftAnimation();
+    animationTriggered.value = true;
+  }
   const scrollTop =
     window.pageYOffset ||
     document.documentElement.scrollTop ||
@@ -110,8 +132,6 @@ function handleScroll() {
 
 <style lang="scss" scoped>
 .container {
-  //   padding-top: 62px;
-  //   background-color: #ffffff;
   padding-bottom: 116px;
   position: relative;
   .banner-boder {
@@ -218,9 +238,7 @@ function handleScroll() {
           background: rgba(236, 46, 91, 1);
           border-radius: 12px;
           height: 456px;
-          // display: flex;
-          // justify-content: center;
-          // align-items: center;
+
           overflow: hidden;
           .child {
             position: absolute;
@@ -228,49 +246,20 @@ function handleScroll() {
             height: 270px;
             left: 30px;
             top: 30px;
-            // margin-left: 30px;
-            // margin-top: 40px;
+
             background-image: url("@/assets/img/about/card-bg.png");
-            background-size: cover; /* 或者使用 contain */
-            // border-radius: 50%;
+            background-size: cover;
+
             transition: transform 0.5s ease-in-out;
             transform: scale(1);
           }
-
-          // .cardbg {
-          //   position: absolute;
-          //   // left: 30px;
-          //   // top: 40px;
-          //   animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-          //   animation: myfirstcard2 0.5s 1 alternate forwards;
-          //   border-radius: 12px;
-          //   img {
-          //     width: 100%;
-          //     height: 100%;
-          //     object-fit: cover;
-          //     border-radius: 12px;
-          //   }
-          // }
         }
         .card-item:hover .child {
           transform: scale(1.78);
           opacity: 0.3;
-          // left: 0px;
-          //   top: 0px;
+
           top: 80px;
-          // margin-left: 30px;
-          //   margin-top: 40px;
         }
-        // .card-item:hover .cardbg {
-        //   border-radius: 12px;
-        //   animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-        //   animation: myfirstcard1 0.5s 1 alternate forwards;
-        //   img {
-        //     border-radius: 12px;
-        //     opacity: 0.3;
-        //     filter: blur(3px);
-        //   }
-        // }
       }
     }
   }

src/components/home/DameplaySwiperCard.vue

@@ -65,11 +65,11 @@ const box = ref(null);
 const myRef = ref(null);
 const { tilt, roll, source } = useParallax(box);
 const imageList = reactive([
-  { imgSrc: new URL("@/assets/img/home/game-swiper-card/01.png", import.meta.url).href },
-  { imgSrc: new URL("@/assets/img/home/game-swiper-card/02.png", import.meta.url).href },
-  { imgSrc: new URL("@/assets/img/home/game-swiper-card/03.png", import.meta.url).href },
-  { imgSrc: new URL("@/assets/img/home/game-swiper-card/04.png", import.meta.url).href },
-  { imgSrc: new URL("@/assets/img/home/game-swiper-card/05.png", import.meta.url).href },
+  { imgSrc: new URL("@/assets/img/home/game-swiper-card/01.jpg", import.meta.url).href },
+  { imgSrc: new URL("@/assets/img/home/game-swiper-card/02.jpg", import.meta.url).href },
+  { imgSrc: new URL("@/assets/img/home/game-swiper-card/03.jpg", import.meta.url).href },
+  { imgSrc: new URL("@/assets/img/home/game-swiper-card/04.jpg", import.meta.url).href },
+  { imgSrc: new URL("@/assets/img/home/game-swiper-card/05.jpg", import.meta.url).href },
 ]);
 const modules = [EffectCoverflow, Pagination,Autoplay];
 const boxStyle4 = computed(() => ({

src/components/home/GalleryBanner.vue

@@ -14,8 +14,8 @@
       }"
     >
       <swiper-slide v-for="(item, index) of imageList" :key="index">
-        <!-- <YoutubeVideo :id="item.id" :src="item.videoSrc" :width="1200" :height="600">
-        </YoutubeVideo> -->
+        <YoutubeVideo :id="item.id" :src="item.videoSrc" :width="1200" :height="600">
+        </YoutubeVideo>
         <!-- <img class="img" @click="handleClick(item)" :src="item.imgSrc" /> -->
       </swiper-slide>
     </swiper>

src/components/home/HeroSwiper.vue

@@ -282,7 +282,7 @@ function test(index, sc) {
     }
 
     .miffy-container {
-      background: url("@/assets/img/home/miffy-bg.png") no-repeat;
+      // background: url("@/assets/img/home/miffy-bg.png") no-repeat;
       background-size: contain;
       opacity: 0;
       top: 690px;

src/components/home/Slogan.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="glitch">
-    <img src="@/assets/img/home/slogan.png" alt=""/>
+    <!-- <img src="@/assets/img/home/slogan.png" alt=""/> -->
     <div class="glitch__layer"></div>
     <div class="glitch__layer"></div>
     <div class="glitch__layer"></div>
@@ -38,7 +38,7 @@
 	right: 0;
 	top: 0;
 	bottom: 0;
-     background-image: url('@/assets/img/home/slogan.png');
+    //  background-image: url('@/assets/img/home/slogan.png');
 	background-repeat: no-repeat;
 	background-position: 0 0;
 }