diff --git a/package-lock.json b/package-lock.json index 3dc17df..ac7dc21 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 178e5bf..b31e555 100644 --- a/package.json +++ b/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", diff --git a/src/App.vue b/src/App.vue index bb99c5e..cd40b33 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,10 +1,10 @@ diff --git a/src/components/global/VideomModal.vue b/src/components/global/VideomModal.vue new file mode 100644 index 0000000..6b7fd77 --- /dev/null +++ b/src/components/global/VideomModal.vue @@ -0,0 +1,84 @@ + + + + + \ No newline at end of file diff --git a/src/components/global/YouTubeVideo.vue b/src/components/global/YouTubeVideo.vue new file mode 100644 index 0000000..a593e1c --- /dev/null +++ b/src/components/global/YouTubeVideo.vue @@ -0,0 +1,91 @@ + + + + + diff --git a/src/components/home/DameplaySwiperCard.vue b/src/components/home/DameplaySwiperCard.vue index e6efd28..89c5105 100644 --- a/src/components/home/DameplaySwiperCard.vue +++ b/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", diff --git a/src/components/home/GalleryBanner.vue b/src/components/home/GalleryBanner.vue index 37b8dc0..828be3a 100644 --- a/src/components/home/GalleryBanner.vue +++ b/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([ diff --git a/src/components/home/GameGallerp.vue b/src/components/home/GameGallerp.vue index 755d530..eb3e01b 100644 --- a/src/components/home/GameGallerp.vue +++ b/src/components/home/GameGallerp.vue @@ -21,48 +21,15 @@
-
Come to be COMMENDER! Enjoy 3D CEBG and fight against other players!
- +
-
+
-
@@ -90,16 +57,6 @@
-
- -
diff --git a/src/components/home/HeroSwiper.vue b/src/components/home/HeroSwiper.vue index 4d1a237..dd6a23f 100644 --- a/src/components/home/HeroSwiper.vue +++ b/src/components/home/HeroSwiper.vue @@ -23,6 +23,7 @@