fix

package-lock.json

@@ -31,6 +31,7 @@
         "vue": "^3.2.45",
         "vue-3d-loader": "^2.1.5",
         "vue-router": "^4.1.6",
+        "vue-youtube-embed": "^2.2.2",
         "web3": "^1.8.2"
       },
       "devDependencies": {
@@ -10426,6 +10427,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/vue-youtube-embed": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmmirror.com/vue-youtube-embed/-/vue-youtube-embed-2.2.2.tgz",
+      "integrity": "sha512-l/EJuFMRK43AN73N+qxJnN0LB3uPl2xAghmr3dCvODWGCRWGjmGfrHaOtD93fu9J4co+CZLv1KP3akAsldC1aw=="
+    },
     "node_modules/warning": {
       "version": "4.0.3",
       "resolved": "https://registry.npmmirror.com/warning/-/warning-4.0.3.tgz",
@@ -18710,6 +18716,11 @@
         }
       }
     },
+    "vue-youtube-embed": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmmirror.com/vue-youtube-embed/-/vue-youtube-embed-2.2.2.tgz",
+      "integrity": "sha512-l/EJuFMRK43AN73N+qxJnN0LB3uPl2xAghmr3dCvODWGCRWGjmGfrHaOtD93fu9J4co+CZLv1KP3akAsldC1aw=="
+    },
     "warning": {
       "version": "4.0.3",
       "resolved": "https://registry.npmmirror.com/warning/-/warning-4.0.3.tgz",

package.json

@@ -33,7 +33,8 @@
     "vue": "^3.2.45",
     "vue-3d-loader": "^2.1.5",
     "vue-router": "^4.1.6",
-    "web3": "^1.8.2"
+    "web3": "^1.8.2",
+    "youtube-player": "^5.6.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.0.0",

src/App.vue

@@ -1,10 +1,10 @@
 <template>
   <div>
-    <layout></layout>
+    <Layout></Layout>
   </div>
 </template>
 <script setup>
-import layout from "@/components/layout/index.vue";
+import Layout from "@/components/layout/index.vue";
 </script>
 
 <style lang="scss">

src/components/about/LatestNews.vue

@@ -32,6 +32,7 @@
         }"
         :modules="modules"
         :loop="true"
+        :autoplay="{ delay: 3500, disableOnInteraction: false }"
         class="mySwiper"
         ref="myRef"
       >
@@ -55,10 +56,11 @@ import {
   EffectCoverflow,
   Thumbs,
   FreeMode,
+  Autoplay,
   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";
@@ -69,13 +71,38 @@ const ratio = ref(0.2); //视差偏移率
 const positionY1 = ref(0); //背景Y轴偏移量
 const box = ref(null);
 const myRef = ref(null);
-const modules = [Pagination];
+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/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.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,
+  },
 ]);
 
 const handSlidePrev = () => {
@@ -141,7 +168,7 @@ function handleScroll() {
 }
 .swiper {
   width: 100%;
-// padding-bottom: 50px;
+  // padding-bottom: 50px;
 }
 
 .swiper-slide {
@@ -157,7 +184,6 @@ function handleScroll() {
 }
 .swiper-content {
   position: relative;
-  
 }
 .mySwiper {
   position: relative;
@@ -167,7 +193,6 @@ function handleScroll() {
     left: -640px;
   }
   img {
-    
   }
 }
 
@@ -193,15 +218,13 @@ function handleScroll() {
 :deep(.swiper-slide-next) {
   margin-top: 100px;
   position: relative;
- 
 }
 :deep(.swiper-slide-prev) {
   opacity: 0;
   position: relative;
-
 }
 .swiper-content {
-    padding-top: 136px;
+  padding-top: 136px;
   padding-bottom: 300px;
 }
 </style>

src/components/global/VideomModal.vue

@@ -0,0 +1,84 @@
+<template>
+    <div @click="openModal">
+      <h3>点击这里打开视频弹框</h3>
+      <a-modal
+        :visible="visible"
+        :destroyOnClose="true"
+        :closable="false"
+        :maskClosable="false"
+        :footer="null"
+        :wrapClassName="['video-modal']"
+        @cancel="closeModal"
+      >
+        <youtube :video-id="videoId" ref="youtubePlayer" :player-vars="playerOptions" @ready="onPlayerReady"></youtube>
+      </a-modal>
+    </div>
+  </template>
+  
+  <script setup>
+  import { ref, watch } from 'vue';
+  import { Modal } from 'ant-design-vue';
+  import VueYoutubeEmbed from 'vue-youtube-embed';
+  import 'ant-design-vue/dist/antd.css';
+  
+  const visible = ref(false);
+  const videoId = 'REPLACE_WITH_YOUR_VIDEO_ID';
+  
+  const openModal = () => {
+    visible.value = true;
+  };
+  
+  const closeModal = () => {
+    visible.value = false;
+  };
+  
+  const playerOptions = {
+    autoplay: 1,
+    controls: 1,
+    showinfo: 0,
+    rel: 0,
+    fs: 1,
+    iv_load_policy: 3,
+  };
+  
+  const youtubePlayer = ref(null);
+  
+  const onPlayerReady = (event) => {
+    if (event.target) {
+      event.target.playVideo();
+      event.target.getIframe().requestFullscreen().catch((error) => {
+        console.warn('无法全屏播放', error);
+      });
+    }
+  };
+  
+  watch(visible, (value) => {
+    if (!value && youtubePlayer.value) {
+      youtubePlayer.value.player.stopVideo();
+    }
+  });
+  </script>
+  
+  <style scoped>
+  .video-modal {
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+  
+  .video-modal .ant-modal {
+    top: 0;
+    margin: 0;
+  }
+  
+  .video-modal .ant-modal-content {
+    width: 100%;
+    height: 100%;
+  }
+  
+  .video-modal .ant-modal-body {
+    padding: 0;
+    height: 100%;
+  }
+  </style>

src/components/global/YouTubeVideo.vue

@@ -0,0 +1,91 @@
+<script setup>
+import { ref, watch, onMounted, onBeforeUnmount } from "vue";
+import YouTubePlayer from "youtube-player";
+
+const props = defineProps({
+  id: { type: String, default: "" },
+  src: { type: String, required: true },
+  width: { type: Number, default: 0 },
+  height: { type: Number, default: 0 }
+});
+
+const emit = defineEmits(["ended", "play", "pause"]);
+
+onMounted(() => {
+  initPlayer();
+  loadPlayer();
+});
+
+onBeforeUnmount(() => {
+  player && player.destroy();
+});
+
+const getVideoId = () => {
+  try {
+    const url = new URL(props.src);
+    return url.searchParams.get("v") || "";
+  } catch (error) {
+    return "";
+  }
+};
+
+let player = null;
+const initPlayer = () => {
+  try {
+    player = YouTubePlayer(`youtube-${props.id}`, {
+      host: "https://www.youtube.com",
+      width: props.width,
+      height: props.height,
+      videoId: getVideoId(),
+      playsinline: 1,
+      rel: 0
+    });
+  } catch (error) {
+    console.log(error);
+  }
+};
+
+const loadPlayer = () => {
+  try {
+    player.loadVideoById(getVideoId());
+  } catch (error) {
+    console.log(error);
+  }
+};
+
+const play = () => player && player.playVideo();
+const pause = () => player && player.pauseVideo();
+
+// -1（未开始）0（已结束）1（正在播放）2（已暂停）3（正在缓冲）5（视频已插入）
+let stateChangeListener;
+const addStateChange = () => {
+  stateChangeListener = player?.on("stateChange", (event) => {
+    if (event.data === 0) emit("ended");
+    if (event.data === 1) emit("play");
+    if (event.data === 2) emit("pause");
+  });
+};
+const removeStateChange = () => {
+  if (stateChangeListener && player) player.off(stateChangeListener);
+};
+
+watch(
+  () => props.src,
+  () => loadPlayer()
+);
+
+defineExpose({ play, pause });
+</script>
+
+<template>
+  <div class="youtube-video">
+    <div :id="'youtube-' + id"></div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.youtube-video {
+  width: 100%;
+  overflow: hidden;
+}
+</style>

src/components/home/DameplaySwiperCard.vue

@@ -19,6 +19,7 @@
         }"
         :modules="modules"
         :loop="true"
+        :autoplay="{ delay: 3000, disableOnInteraction: false }"
         class="mySwiper"
         ref="myRef"
         :navigation="{
@@ -47,6 +48,7 @@ import {
   EffectCoverflow,
   Thumbs,
   FreeMode,
+  Autoplay,
   Navigation,
   Pagination,
 } from "swiper";
@@ -68,7 +70,7 @@ const imageList = reactive([
   { 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 },
 ]);
-const modules = [EffectCoverflow, Pagination];
+const modules = [EffectCoverflow, Pagination,Autoplay];
 const boxStyle4 = computed(() => ({
   perspective: "300px",
   transition: "0s",

src/components/home/GalleryBanner.vue

@@ -5,6 +5,8 @@
       :thumbs="{ swiper: thumbsSwiper }"
       :modules="modules"
       class="mySwiper2"
+      :loop="true"
+      :autoplay="{ delay: 3500, disableOnInteraction: false }"
       ref="myRef"
       :navigation="{
         nextEl: '.swiper-button1-next',
@@ -55,8 +57,8 @@ import "swiper/css";
 import "swiper/css/free-mode";
 import "swiper/css/navigation";
 import "swiper/css/thumbs";
-import { FreeMode, Navigation, Thumbs } from "swiper";
-const modules = [Thumbs, FreeMode];
+import { FreeMode, Navigation, Thumbs , Autoplay} from "swiper";
+const modules = [Thumbs, FreeMode,Autoplay];
 const myRef = ref(null);
 const activeIndex = ref(null);
 const imageList = reactive([

src/components/home/GameGallerp.vue

@@ -21,48 +21,15 @@
           <img src="@/assets/img/home/gallery-boder.png" alt="" />
         </div>
         <div class="slogan">
-          <!-- <div class="slogan-title">CEBG WORK IN-PROCESS WORK SHOW.</div> -->
           <div class="slogan-text">
             Come to be COMMENDER! Enjoy 3D CEBG and fight against other players!
           </div>
         </div>
-        <!-- <div class="gallery-banner">
-          <div
-            v-for="(item, index) in imageList"
-            :key="index"
-            @click="handleClick(item)"
-          >
-            <img class="gallery-img" :src="item.imgSrc" alt="" />
-          </div>
-        </div> -->
+
         <GalleryBanner></GalleryBanner>
         <div class="btn">
-          <div class="go-to-btn"></div>
+          <!-- <div class="go-to-btn"></div> -->
         </div>
-        <!-- <swiper
-          :modules="modules"
-          :loop="true"
-          :slides-per-view="3.5"
-          :space-between="15"
-          :autoplay="{ delay: 10000, disableOnInteraction: false }"
-        >
-          <swiper-slide v-for="(item, index) in imageList" :key="index">
-            <div class="hero-container">
-              <div class="mask">
-                <div class="background-tripple-corners-rectange">
-                  <img
-                    src="@/assets/img/home/gallery-botom-boder.png"
-                    alt=""
-                  />
-                </div>
-                <div class="video-btn">
-                  <img src="@/assets/img/home/video-btn.png" alt="" />
-                </div>
-              </div>
-              <img class="gallery-img" :src="item.imgSrc" alt="" />
-            </div>
-          </swiper-slide>
-        </swiper> -->
       </div>
     </div>
     <div class="gameplay-bottom">
@@ -90,16 +57,6 @@
         <img src="@/assets/img/home/viod-boder.png" alt="" />
       </div>
     </div>
-    <div>
-      <iframe
-        :src="videoSrc"
-        frameborder="0"
-        allowfullscreen="true"
-        scrolling="no"
-        width="100%"
-        height="100%"
-      ></iframe>
-    </div>
     <VideoModal ref="videoModal" :video-src="videoSrc"> </VideoModal>
   </div>
 </template>

src/components/home/HeroSwiper.vue

@@ -23,6 +23,7 @@
           <swiper
             @swiper="setHeroSwiper"
             :slides-per-view="1"
+            :autoplay="{ delay: 3000, disableOnInteraction: false }"
             :thumbs="{ swiper: heroThumbsSwiper }"
             :modules="modules"
             class="hero-big"

src/components/layout/NavBar.vue

@@ -18,7 +18,7 @@
           <div class="dropdown">
             <ul>
               <li v-for="(item, index) in nav.submenu" :key="index">
-                <a class="link-name" href="#" v-if="i !== 2">
+                <a class="link-name" :href="item.link" v-if="i !== 2">
                   {{ item.label }}
                   <img
                     class="link-img"
@@ -129,11 +129,11 @@ const navList = reactive([
     name: "COMMUNITY",
     path: "/contact",
     submenu: [
-      { label: "Twitter", link: "/products/1" },
-      { label: "Youtube", link: "/products/2" },
-      { label: "Facebook", link: "/products/3" },
-      { label: "Medium", link: "/products/3" },
-      { label: "Telegram", link: "/products/3" },
+      { label: "Twitter", link: "https://twitter.com/CEBG_GAME" },
+      { label: "Youtube", link: "https://youtube.com/c/CryptoElitesBattlegrounds" },
+      { label: "Facebook", link: "https://www.facebook.com/profile.php?id=100090965821157&mibextid=LQQJ4d" },
+      { label: "Medium", link: "https://medium.com/@CEBG-BATTLEGROUNDS" },
+      { label: "Telegram", link: "https://t.me/CEBG_Rally" },
     ],
   },
 ]);

src/components/layout/demo.vue

@@ -1,47 +0,0 @@
-<template>
-    <nav>
-      <ul>
-        <li
-          v-for="(navItem, index) in navItems"
-          :key="navItem.name"
-          @click="navigate(navItem.path, index)"
-          :class="{ 'active': activeIndex === index }"
-        >
-          {{ navItem.name }}
-        </li>
-      </ul>
-    </nav>
-  </template>
-  
-  <script setup>
-  import { ref, watchEffect } from 'vue';
-  import { useRouter, useRoute } from 'vue-router';
-  
-  const navItems = [
-    { name: 'Home', path: '/' },
-    { name: 'About', path: '/about' },
-    // Add more items as needed
-  ];
-  
-  const router = useRouter();
-  const route = useRoute();
-  const activeIndex = ref(0);
-  
-  const navigate = (path, index) => {
-    activeIndex.value = index;
-    router.push(path);
-  };
-  
-  watchEffect(() => {
-    const index = navItems.findIndex((navItem) => navItem.path === route.path);
-    activeIndex.value = index !== -1 ? index : 0;
-  });
-  </script>
-  
-  <style scoped>
-  .active {
-    /* Add your active style here */
-    font-weight: bold;
-    color: blue;
-  }
-  </style>

src/main.js

@@ -1,16 +1,16 @@
-import { createApp } from 'vue'
+import { createApp } from "vue";
 // import './style.css'
-import './style/rest.css';
-import 'normalize.css';
+import "./style/rest.css";
+import "normalize.css";
 import "@/assets/text/text.css";
-import Antd from 'ant-design-vue';
-import 'ant-design-vue/dist/antd.css';
+import Antd from "ant-design-vue";
+import "ant-design-vue/dist/antd.css";
 import pinia from "@/store";
 import router from "./router/index";
-import VueAnimXyz from '@animxyz/vue3'
-import '@animxyz/core' // Import css here if you haven't elsewhere
-import App from './App.vue'
+import VueAnimXyz from "@animxyz/vue3";
+import "@animxyz/core"; // Import css here if you haven't elsewhere
+import App from "./App.vue";
 import vue3dLoader from "vue-3d-loader";
 
 const app = createApp(App);
-app.use(pinia).use(VueAnimXyz).use(vue3dLoader).use(Antd).use(router).mount('#app')
+app.use(pinia).use(VueAnimXyz).use(vue3dLoader).use(Antd).use(router).mount("#app");

src/views/AboutView.vue

@@ -1,12 +1,10 @@
 <template>
   <div>
-    <!-- <NavBar></NavBar> -->
     <IntroductionBanner></IntroductionBanner>
     <VisionMission></VisionMission>
     <Roadmap></Roadmap>
     <Whitepaper></Whitepaper>
     <LatestNews></LatestNews>
-    <!-- <FooterBar></FooterBar> -->
   </div>
 </template>