cebg-website/src/components/home/HeroSwiper.vue
huangjinming 0403d871ec new
2023-03-02 16:56:59 +08:00

446 lines
11 KiB
Vue

<template>
<div class="container">
<div class="hero-left">
<!-- <div class="hero-name">HERO</div> -->
<div class="hero-boder">
<!-- <img src="@/assets/img/home/hero/hero-boder.png" alt="" /> -->
</div>
<div class="hero-slogan">
<!-- CEBG has more than 8 heroes for players to choose, and each of them has
a distinguishing design, skills, and gameplay. All the entry-level
heroes are free for all the players, so there is no threshold to this
game. -->
<div class="hero-boder"></div>
<div v-for="(item, index) in HeroList" :key="index">
<XyzTransitionGroup class="item-group" xyz="fade down-100% back-5">
<div class="miffy-container-active" v-if="activeIndex == index">
<!-- <div class="miffy">{{ item.name }}</div> -->
<div class="miffy-slogan">
{{ item.slogan }}
</div>
</div>
</XyzTransitionGroup>
</div>
<div><img src="" alt="" /></div>
</div>
<div class="hero-right">
<div class="big_hero">
<swiper
@swiper="setHeroSwiper"
:slides-per-view="1"
:thumbs="{ swiper: heroThumbsSwiper }"
:modules="modules"
class="hero-big"
ref="myRef"
:navigation="{
nextEl: '.swiper-btn2-next',
prevEl: '.swiper-btn2-prev',
}"
>
<SwiperSlide v-for="(item, index) in heroList" :key="index">
<XyzTransitionGroup class="item-group" xyz="fade ease">
<div class="hero-big-img" :class="index >= 7 ? 'man-bg' :'woman-bg'">
<img
class="hero_big_image"
v-if="activeIndex == index"
:src="item.img"
/>
</div>
</XyzTransitionGroup>
</SwiperSlide>
</swiper>
<!-- <div
class="hero-bg"
:style="{ transform: 'rotate(' + rotate + 'deg)' }"
>
<img src="@/assets/img/home/hero-swiper-bg.png" alt="" />
</div> -->
<div class="swiper-btn2-prev">
<img src="@/assets/img/home/next.png" alt="" />
</div>
<div class="swiper-btn2-next">
<img src="@/assets/img/home/prev.png" alt="" />
</div>
</div>
<div class="thumbs_hero_container">
<Swiper
@swiper="setHeroThumbsSwiper"
:slides-per-view="5"
:modules="modules"
:space-between="0"
class="HeroThumbs"
:slideToClickedSlide="true"
:centeredSlidesBounds="true"
:multipleActiveThumbs="false"
>
<SwiperSlide
v-for="(slideContent, index) in heroAvatarList"
:key="index"
>
<div class="hero_thumb">
<img class="hero_thumb_img" :src="slideContent.img" />
<div v-if="test(index, slideContent)" class="weapon-bg">
<img
v-if="test(index, slideContent)"
class="hero_thumb_bg hero_thumb_bg-active"
:src="slideContent.img"
/>
<div class="line"></div>
<div class="arrowhead">
<img src="@/assets/img/home/hero/arrowhead.png" alt="" />
</div>
</div>
</div>
</SwiperSlide>
</Swiper>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, reactive, onMounted } from "vue";
import { Thumbs, FreeMode, Navigation, EffectFlip } from "swiper";
import { Swiper, SwiperSlide } from "swiper/vue";
import { HeroList } from "@/configs/information";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/thumbs";
import "swiper/css/effect-flip";
import "swiper/css/free-mode";
const heroList = reactive([
{ id: 1, img: require("@/assets/img/home/hero/001.png"), name: "midif" },
{ id: 2, img: require("@/assets/img/home/hero/002.png"), name: "ChipCard" },
{ id: 3, img: require("@/assets/img/home/hero/003.png"), name: "ChipCard" },
{ id: 4, img: require("@/assets/img/home/hero/004.png"), name: "ChipCard" },
{ id: 5, img: require("@/assets/img/home/hero/005.png"), name: "ChipCard" },
{ id: 6, img: require("@/assets/img/home/hero/006.png"), name: "ChipCard" },
{ id: 7, img: require("@/assets/img/home/hero/007.png"), name: "ChipCard" },
{ id: 8, img: require("@/assets/img/home/hero/008.png"), name: "ChipCard" },
{ id: 9, img: require("@/assets/img/home/hero/009.png"), name: "ChipCard" },
{ id: 10, img: require("@/assets/img/home/hero/010.png"), name: "ChipCard" },
]);
const heroAvatarList = reactive([
{ id: 1, img: require("@/assets/img/home/hero/avatar/0001.png") },
{ id: 2, img: require("@/assets/img/home/hero/avatar/0002.png") },
{ id: 3, img: require("@/assets/img/home/hero/avatar/0003.png") },
{ id: 4, img: require("@/assets/img/home/hero/avatar/0004.png") },
{ id: 5, img: require("@/assets/img/home/hero/avatar/0005.png") },
{ id: 6, img: require("@/assets/img/home/hero/avatar/0006.png") },
{ id: 7, img: require("@/assets/img/home/hero/avatar/0007.png") },
{ id: 8, img: require("@/assets/img/home/hero/avatar/0008.png") },
{ id: 9, img: require("@/assets/img/home/hero/avatar/0009.png") },
{ id: 10, img: require("@/assets/img/home/hero/avatar/0010.png") },
]);
const modules = [FreeMode, Navigation, Thumbs, EffectFlip];
const heroSwiper = ref(null);
const heroThumbsSwiper = ref(null);
const activeIndex = ref(0);
const rotate = ref(0);
const myRef = ref(null);
onMounted(() => {
setInterval(() => {
rotate.value += 5;
if (rotate.value >= 360) rotate.value = 0;
}, 100);
});
const setHeroThumbsSwiper = (swiper) => {
heroThumbsSwiper.value = swiper;
console.log("setHeroThumbsSwiper ", swiper);
// swiper.on('slideChange', function() {
// console.log('slide changed', swiper);
// activeIndex.value = swiper.activeIndex;
// })
};
const setHeroSwiper = (swiper) => {
heroSwiper.value = swiper;
swiper.on("slideChange", function () {
console.log("slide changed hero", swiper);
activeIndex.value = heroSwiper.value.activeIndex;
console.log(activeIndex.value, " activeIndex.value");
});
};
const onSlideChange = () => {
activeIndex.value = heroSwiper.value.activeIndex;
};
const handSlidePrev = () => {
if (activeIndex.value === 0) return false;
myRef.value?.$el.swiper.slidePrev();
};
const handSlideNext = () => {
if (activeIndex.value === 9) return false;
myRef.value?.$el.swiper.slideNext();
};
function test(index, sc) {
// console.log(index, "oo");
return activeIndex.value == index;
}
</script>
<style lang="scss" scoped>
.container {
display: flex;
justify-content: space-between;
.hero-left {
.hero-name {
font-size: 78px;
font-family: "Big John";
font-weight: 400;
color: #1c3045;
}
.hero-boder {
width: 695px;
height: 2px;
background-color: #ff3030;
opacity: 0.2;
top: 335px;
position: absolute;
}
.hero-slogan {
// width: 617px;
// height: 82px;
}
.miffy-container {
background: url("@/assets/img/home/miffy-bg.png") no-repeat;
background-size: contain;
opacity: 0;
top: 690px;
position: absolute;
}
.miffy-container-active {
opacity: 1;
top: 408px;
width: 695px;
height: 220px;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
transform: none;
background: url("@/assets/img/home/hero/introduce-bg.png") no-repeat;
background-size: cover;
}
.miffy {
font-size: 40px;
font-family: "BigJohn";
margin-bottom: 19px;
margin-left: 20px;
color: #ff5470;
line-height: 32px;
}
.miffy-slogan {
width: 585px;
height: 82px;
margin-left: 20px;
font-size: 16px;
font-family: Arial;
font-weight: bold;
color: #ffffff;
line-height: 32px;
}
}
}
.big_hero {
width: 854px;
height: 903px;
position: relative;
left: 740px;
.swiper-btn2-prev {
position: absolute;
top: 70px;
right: 280px;
width: 50px;
height: 50px;
z-index: 10;
cursor: pointer;
}
.swiper-btn2-next {
position: absolute;
top: 70px;
right: 179px;
width: 50px;
height: 50px;
z-index: 10;
cursor: pointer;
}
.hero-big-img {
width: 854px;
position: relative;
height: 903px;
bottom: 0;
display: flex;
// justify-content: center;
// align-items: center;
}
img {
position: absolute;
bottom: 0;
max-width: 100%;
height: auto;
object-fit: cover;
}
// .swiper-button-disabled {
// opacity: 0.5;
// pointer-events: none;
// cursor:not-allowed
// }
}
.woman-bg{
background: url('@/assets/img/home/hero/hero-bg.png')no-repeat;
background-position: center bottom;
}
.man-bg{
background: url('@/assets/img/home/hero/hero-active-bg.png')no-repeat;
background-position:center bottom;
}
.hero_big_image {
}
.hero-right {
position: relative;
}
.hero-bg {
position: absolute;
left: 52px;
top: 188px;
animation: "rotateImg" 10s linear infinite;
}
@keyframes rotateImg {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.thumbs_hero_container {
user-select: none;
position: absolute;
left: -42px;
top: 51px;
// padding: 0 40px;
width: 766px;
height: 200px;
.swiper-button-prev::after {
display: none;
}
.swiper-button-next::after {
display: none;
}
.swiper-btn-prev {
position: absolute;
right: 0;
}
.swiper-btn-next {
position: absolute;
right: 10px;
}
.swiper-button-disabled {
opacity: 0.5;
pointer-events: none;
cursor: not-allowed;
}
}
.hero_thumb {
// width: 90px;
// height: 184px;
padding-bottom: 100px;
}
.hero_thumb_img {
display: block;
position: absolute;
left: 100px;
top: 100px;
width: 106px;
height: 106px;
opacity: 0.6;
background: rgba(131, 188, 217, 0.3);
transform: translate(-50%, -50%);
}
.hero_thumb_bg {
display: block;
position: absolute;
left: 100px;
top: 100px;
width: 106px;
height: 106px;
background: rgba(255, 225, 117, 1);
transform: translate(-50%, -50%);
// clip-path: polygon(
// 10px 0,
// calc(100% - 10px) 0,
// 100% 0px,
// 100% calc(100% - 15px),
// calc(100% - 10px) 100%,
// 10px 100%,
// 0 calc(100% - 0px),
// 0 10px
// );
}
.weapon-bg {
position: relative;
height: 190px;
width: 176px;
// padding-bottom: 300px;
.line {
width: 2px;
background-color: #000;
transform: rotateY(180deg);
position: absolute;
opacity: 0.2;
z-index: 10px;
bottom: -95px;
// top: 180px;
left: 96px;
animation: myfirst 0.5s ease-in alternate 1 forwards;
}
@keyframes myfirst {
0% {
height: 0px;
}
100% {
height: 131px;
}
}
.arrowhead {
position: absolute;
// opacity: 0.2;
width: 100px;
height: 15px;
z-index: 10px;
bottom: -104px;
// top: 180px;
left: 47px;
}
}
.weapon-bg::before {
position: absolute;
content: "";
bottom: -170px;
left: 56px;
display: block;
width: 86px;
height: 17px;
background: url("./@/assets/img/home/weapon-bottom-boder.png") no-repeat;
background-size: contain;
}
.HeroThumbs {
}
</style>