446 lines
11 KiB
Vue
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>
|