322 lines
7.5 KiB
Vue
322 lines
7.5 KiB
Vue
<template>
|
|
<div class="game-swiper">
|
|
<swiper
|
|
:spaceBetween="10"
|
|
:thumbs="{ swiper: thumbsSwiper }"
|
|
:modules="modules"
|
|
:autoplay="{ delay: 3500, disableOnInteraction: false }"
|
|
class="mySwiper2"
|
|
ref="myRef"
|
|
:navigation="{
|
|
nextEl: '.swiper-button1-next',
|
|
prevEl: '.swiper-button1-prev',
|
|
disabledClass: 'swiper-button-disabled',
|
|
}"
|
|
>
|
|
<swiper-slide v-for="(item, index) of imageList" :key="index">
|
|
<YoutubeVideo :id="item.id" :src="item.videoSrc" :width="1200" :height="600">
|
|
</YoutubeVideo>
|
|
<!-- <img class="img" @click="handleClick(item)" :src="item.imgSrc" /> -->
|
|
</swiper-slide>
|
|
</swiper>
|
|
<swiper
|
|
@swiper="setThumbsSwiper"
|
|
:spaceBetween="50"
|
|
:slidesPerView="5"
|
|
:freeMode="true"
|
|
:watchSlidesProgress="true"
|
|
:modules="modules"
|
|
class="mySwiper"
|
|
>
|
|
<swiper-slide v-for="(item, index) of imageList" :key="index">
|
|
<img class="img" :src="item.imgSrc" />
|
|
</swiper-slide>
|
|
</swiper>
|
|
<div
|
|
class="swiper-button1-next"
|
|
:class="activeIndex == 0 ? 'swiper-button-disabled' : ''"
|
|
@click="handSlidePrev"
|
|
>
|
|
<img src="@/assets/img/home/next.png" alt="" />
|
|
</div>
|
|
<div
|
|
class="swiper-button1-prev"
|
|
:class="activeIndex == 6 ? 'swiper-button-disabled' : ''"
|
|
@click="handSlideNext"
|
|
>
|
|
<img src="@/assets/img/home/prev.png" alt="" />
|
|
</div>
|
|
</div>
|
|
<!-- <VideoModal ref="videoModal"
|
|
></VideoModal> -->
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, reactive, onMounted } from "vue";
|
|
import { Swiper, SwiperSlide } from "swiper/vue";
|
|
import YoutubeVideo from "./../global/YouTubeVideoDemo.vue";
|
|
import VideoModal from "./../global/VideomModal.vue";
|
|
// Import Swiper styles
|
|
import "swiper/css";
|
|
import "swiper/css/free-mode";
|
|
import "swiper/css/navigation";
|
|
import "swiper/css/thumbs";
|
|
import { FreeMode, Navigation, Thumbs, Autoplay } from "swiper";
|
|
const modules = [Thumbs, FreeMode, Autoplay];
|
|
const myRef = ref(null);
|
|
const activeIndex = ref(null);
|
|
const videoModal = ref("");
|
|
const videoSrc = ref("");
|
|
|
|
const imageList = reactive([
|
|
{
|
|
imgSrc: new URL("@/assets/img/home/game/001.png", import.meta.url).href,
|
|
videoSrc: "https://www.youtube.com/watch?v=_SZ5pVCxmro",
|
|
id:'_SZ5pVCxmro'
|
|
},
|
|
{
|
|
imgSrc: new URL("@/assets/img/home/game/002.png", import.meta.url).href,
|
|
videoSrc: "https://www.youtube.com/watch?v=b-Dt2UvK4c4",
|
|
id:'b-Dt2UvK4c4'
|
|
},
|
|
{
|
|
imgSrc: new URL("@/assets/img/home/game/003.png", import.meta.url).href,
|
|
videoSrc: "https://www.youtube.com/watch?v=t8SZPxlqzMI",
|
|
id:'t8SZPxlqzMI'
|
|
},
|
|
{
|
|
imgSrc: new URL("@/assets/img/home/game/004.png", import.meta.url).href,
|
|
videoSrc: "https://www.youtube.com/watch?v=_trHtuEsmDY",
|
|
id:'_trHtuEsmDY'
|
|
},
|
|
{
|
|
imgSrc: new URL("@/assets/img/home/game/005.png", import.meta.url).href,
|
|
videoSrc: "https://www.youtube.com/watch?v=ru1TNcZoS98",
|
|
id:'ru1TNcZoS98'
|
|
},
|
|
{
|
|
imgSrc: new URL("@/assets/img/home/game/006.png", import.meta.url).href,
|
|
videoSrc: "https://www.youtube.com/watch?v=0hSr0KJtgmI",
|
|
id:'0hSr0KJtgmI'
|
|
},
|
|
]);
|
|
const thumbsSwiper = ref(null);
|
|
|
|
const setThumbsSwiper = (swiper) => {
|
|
thumbsSwiper.value = swiper;
|
|
};
|
|
const handleClick = (item) => {
|
|
videoSrc.value = item.videoSrc;
|
|
console.log(videoModal.value, "videoModal");
|
|
videoModal.value.open();
|
|
};
|
|
onMounted(() => {
|
|
handSlidePrev();
|
|
handSlideNext();
|
|
});
|
|
// const handSlidePrev = () => {
|
|
// if (activeIndex.value == 0) {
|
|
// return false;
|
|
// }
|
|
// // console.log(myRef.value?.$el.swiper.activeIndex, " myRef.value");
|
|
// myRef.value?.$el.swiper.slidePrev();
|
|
// activeIndex.value = myRef.value?.$el.swiper.activeIndex;
|
|
// // console.log(activeIndex, "activeIndex00");
|
|
// };
|
|
// const handSlideNext = () => {
|
|
// if (activeIndex.value == 6) {
|
|
// return false;
|
|
// } else {
|
|
// myRef.value?.$el.swiper.slideNext();
|
|
// activeIndex.value = myRef.value?.$el.swiper.activeIndex;
|
|
// console.log(activeIndex.value, "activeIndex.value01");
|
|
// }
|
|
// };
|
|
|
|
const handSlidePrev = () => {
|
|
if (activeIndex.value === 0) return false;
|
|
myRef.value?.$el.swiper.slidePrev();
|
|
activeIndex.value = myRef.value?.$el.swiper.activeIndex;
|
|
};
|
|
const handSlideNext = () => {
|
|
if (activeIndex.value === 6) return false;
|
|
myRef.value?.$el.swiper.slideNext();
|
|
activeIndex.value = myRef.value?.$el.swiper.activeIndex;
|
|
console.log(activeIndex.value, "activeIndex.value01");
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.game-swiper {
|
|
position: relative;
|
|
.swiper-button1-next {
|
|
width: 74px;
|
|
height: 74px;
|
|
cursor: pointer;
|
|
top: 0;
|
|
left: 0;
|
|
// z-index: 10;
|
|
top: 263px;
|
|
position: absolute;
|
|
// border-radius: 50%;
|
|
// background: #1b1b1b;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.swiper-button1-prev {
|
|
width: 74px;
|
|
height: 74px;
|
|
cursor: pointer;
|
|
top: 263px;
|
|
right: 0;
|
|
// z-index: ;
|
|
// border-radius: 50%;
|
|
position: absolute;
|
|
// background: #1b1b1b;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.swiper-button-disabled {
|
|
opacity: 0.5;
|
|
// cursor: auto;
|
|
pointer-events: none;
|
|
cursor: not-allowed;
|
|
}
|
|
}
|
|
.swiper-button-next {
|
|
/*先将原始箭头的颜色设置为透明的 然后设置一个背景图片 达到修改按钮样式的目的*/
|
|
right: 1.5%;
|
|
left: auto;
|
|
color: rgba(0, 0, 0, 0) !important;
|
|
/* background: url("../../assets/images/start/left.png") center center no-repeat; */
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.swiper-button-prev {
|
|
left: 1.5%;
|
|
right: auto;
|
|
color: rgba(0, 0, 0, 0) !important;
|
|
/* background: url("../../assets/images/start/right.png") center center no-repeat; */
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
/* swiper样式 */
|
|
.swiper {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.swiper-slide {
|
|
text-align: center;
|
|
font-size: 18px;
|
|
background: #fff;
|
|
|
|
/* Center slide text vertically */
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
-webkit-box-pack: center;
|
|
-ms-flex-pack: center;
|
|
-webkit-justify-content: center;
|
|
justify-content: center;
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
-webkit-align-items: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.swiper-slide img {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.swiper {
|
|
width: 100%;
|
|
height: 100%;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.swiper-slide {
|
|
background-size: cover;
|
|
background-position: center;
|
|
}
|
|
|
|
.mySwiper2 {
|
|
position: relative;
|
|
/* float: left; */
|
|
height: 600px;
|
|
width: 1200px;
|
|
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.mySwiper {
|
|
position: relative;
|
|
margin-top: 30px;
|
|
/* float: left; */
|
|
/* margin-left: 3%; */
|
|
width: 1200px;
|
|
height: 80%;
|
|
box-sizing: border-box;
|
|
padding: 10px 0;
|
|
}
|
|
|
|
.swiper-cover {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 30%;
|
|
background-color: rgba(0, 0, 0, 0.6);
|
|
bottom: 0%;
|
|
right: 0%;
|
|
z-index: 100;
|
|
}
|
|
|
|
.swipercover-top {
|
|
margin-left: 5%;
|
|
margin-right: 5%;
|
|
width: 90%;
|
|
height: 30%;
|
|
color: white;
|
|
border-bottom: 2px solid dodgerblue;
|
|
}
|
|
|
|
.swipercover-top-text {
|
|
width: 15%;
|
|
height: 100%;
|
|
border-bottom: 2px solid red;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.swipercover-bottom {
|
|
margin-left: 10%;
|
|
width: 100%;
|
|
height: 70%;
|
|
}
|
|
|
|
.mySwiper .swiper-slide {
|
|
width: 100%;
|
|
height: 33%;
|
|
opacity: 0.4;
|
|
border-radius: 4%;
|
|
}
|
|
|
|
.mySwiper .swiper-slide-thumb-active {
|
|
opacity: 1;
|
|
}
|
|
|
|
.swiper-slide img {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
</style>
|