285 lines
7.4 KiB
Vue
285 lines
7.4 KiB
Vue
<template>
|
|
<div class="container">
|
|
<div class="big_weapon">
|
|
<swiper
|
|
@swiper="setWeaponSwiper"
|
|
:slides-per-view="1"
|
|
:thumbs="{ swiper: weaponThumbsSwiper }"
|
|
:modules="modules"
|
|
:followFinger="false"
|
|
class="weapon-big"
|
|
:navigation="{
|
|
nextEl: '.swiper-button-next-btn',
|
|
prevEl: '.swiper-button-prev-btn',
|
|
}"
|
|
>
|
|
<SwiperSlide
|
|
v-for="(slideContent, index) in weaponListBig"
|
|
:key="index"
|
|
>
|
|
<div class="weapon-name" ><img :src="weapoName[index].name" alt="" /></div>
|
|
<Weapon3dLoader :filePath="slideContent.url"></Weapon3dLoader>
|
|
</SwiperSlide>
|
|
</swiper>
|
|
</div>
|
|
<div class="thumbs_weapon_container">
|
|
<Swiper
|
|
@swiper="setWeaponThumbsSwiper"
|
|
:slides-per-view="4"
|
|
:modules="modules"
|
|
:space-between="20"
|
|
class="weaponThumbs"
|
|
:slideToClickedSlide="true"
|
|
:centeredSlidesBounds="true"
|
|
:multipleActiveThumbs="false"
|
|
>
|
|
<SwiperSlide v-for="(slideContent, index) in weaponList" :key="index">
|
|
<div class="weapon_thumb">
|
|
<div
|
|
:class="
|
|
activeIndex == index
|
|
? 'weapon-moss-bg'
|
|
: 'weapon-moss-active-bg'
|
|
"
|
|
>
|
|
<img class="weapon_thumb_img" :src="slideContent.img" />
|
|
</div>
|
|
<div class="img-boder" v-if="activeIndex == index">
|
|
<img
|
|
src="@/assets/img/home/weapon/weapon-bottom-boder.png"
|
|
alt=""
|
|
srcset=""
|
|
/>
|
|
</div>
|
|
<div v-if="test(index, slideContent)" class="weapon-bg">
|
|
<!-- <img
|
|
v-if="test(index, slideContent)"
|
|
class="weapon_thumb_bg weapon_thumb_bg-active"
|
|
:src="slideContent.img"
|
|
/> -->
|
|
</div>
|
|
</div>
|
|
</SwiperSlide>
|
|
</Swiper>
|
|
<div class="swiper-button-prev-btn">
|
|
<img src="@/assets/img/home/weapon/next.png" alt="" />
|
|
</div>
|
|
<div class="swiper-button-next-btn">
|
|
<img src="@/assets/img/home/weapon/prev.png" alt="" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, reactive, computed } from "vue";
|
|
import { Thumbs, FreeMode, Navigation } from "swiper";
|
|
import { Swiper, SwiperSlide } from "swiper/vue";
|
|
import Weapon3dLoader from "./WeaponModelLoader.vue";
|
|
import "swiper/css";
|
|
import "swiper/css/navigation";
|
|
import "swiper/css/thumbs";
|
|
import "swiper/css/free-mode";
|
|
const modules = [FreeMode, Navigation, Thumbs];
|
|
const weaponSwiper = ref(null);
|
|
const weaponThumbsSwiper = ref(null);
|
|
const activeIndex = ref(0);
|
|
const weaponList = reactive([
|
|
{ id: 1, img: new URL("@/assets/img/home/weapon/70001.png", import.meta.url).href },
|
|
{ id: 2, img: new URL("@/assets/img/home/weapon/70002.png", import.meta.url).href },
|
|
{ id: 3, img: new URL("@/assets/img/home/weapon/70003.png", import.meta.url).href },
|
|
{ id: 4, img: new URL("@/assets/img/home/weapon/70004.png", import.meta.url).href },
|
|
{ id: 5, img: new URL("@/assets/img/home/weapon/70005.png", import.meta.url).href },
|
|
{ id: 6, img: new URL("@/assets/img/home/weapon/70006.png", import.meta.url).href },
|
|
{ id: 7, img: new URL("@/assets/img/home/weapon/70007.png", import.meta.url).href },
|
|
]);
|
|
const weaponListBig = reactive([
|
|
{ id: 1, url: "/70001.gltf" },
|
|
{ id: 2, url: "/70002.gltf" },
|
|
{ id: 3, url: "/70003.gltf" },
|
|
{ id: 4, url: "/70004.gltf" },
|
|
{ id: 5, url: "/70005.gltf" },
|
|
{ id: 6, url: "/70006.gltf" },
|
|
{ id: 7, url: "/70007.gltf" },
|
|
]);
|
|
const weapoName = reactive([
|
|
{
|
|
name: new URL("@/assets/img/home/weapon/name-7001.png", import.meta.url).href,
|
|
},{
|
|
name: new URL("@/assets/img/home/weapon/name-7002.png", import.meta.url).href,
|
|
},{
|
|
name: new URL("@/assets/img/home/weapon/name-7003.png", import.meta.url).href,
|
|
}, {
|
|
name: new URL("@/assets/img/home/weapon/name-7004.png", import.meta.url).href,
|
|
}, {
|
|
name: new URL("@/assets/img/home/weapon/name-7005.png", import.meta.url).href,
|
|
},{
|
|
name: new URL("@/assets/img/home/weapon/name-7006.png", import.meta.url).href,
|
|
},{
|
|
name: new URL("@/assets/img/home/weapon/name-7007.png", import.meta.url).href,
|
|
},
|
|
]);
|
|
|
|
const setWeaponThumbsSwiper = (swiper) => {
|
|
weaponThumbsSwiper.value = swiper;
|
|
console.log("setWeaponThumbsSwiper ", swiper);
|
|
// swiper.on('slideChange', function() {
|
|
// console.log('slide changed', swiper);
|
|
// activeIndex.value = swiper.activeIndex;
|
|
// })
|
|
};
|
|
|
|
const setWeaponSwiper = (swiper) => {
|
|
weaponSwiper.value = swiper;
|
|
console.log("slide changed", swiper);
|
|
swiper.on("slideChange", function () {
|
|
console.log("slide changed weapon", swiper);
|
|
activeIndex.value = weaponSwiper.value.activeIndex;
|
|
});
|
|
};
|
|
|
|
// const onSlideChange = () => {
|
|
// activeIndex.value = weaponSwiper.value.activeIndex;
|
|
// };
|
|
|
|
function test(index, sc) {
|
|
console.log(index, "oo");
|
|
return activeIndex.value == index;
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.container {
|
|
position: relative;
|
|
}
|
|
.big_weapon {
|
|
width: 1440px;
|
|
// margin-left: 156px;
|
|
height: 600px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
position: relative;
|
|
justify-content: center;
|
|
.weapon-name{
|
|
position: absolute;
|
|
left: 100px;
|
|
top: 40px;
|
|
}
|
|
}
|
|
// .weapon_big_image {
|
|
// width:400px;
|
|
// height:400px;
|
|
// }
|
|
.thumbs_weapon_container {
|
|
user-select: none;
|
|
position: relative;
|
|
// padding: 0 40px;
|
|
width: 940px;
|
|
height: 200px;
|
|
margin: 0 auto;
|
|
.swiper-button-prev::after {
|
|
display: none;
|
|
}
|
|
.swiper-button-next::after {
|
|
display: none;
|
|
}
|
|
.swiper-button-prev-btn {
|
|
position: absolute;
|
|
left: -120px;
|
|
top: -280px;
|
|
z-index: 5;
|
|
}
|
|
.swiper-button-next-btn {
|
|
position: absolute;
|
|
z-index: 6;
|
|
right: -120px;
|
|
top: -280px;
|
|
}
|
|
|
|
.swiper-button-disabled {
|
|
opacity: 0.35;
|
|
cursor: auto;
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
.weapon_thumb {
|
|
width: 240px;
|
|
// height: 115px;
|
|
padding-bottom: 100px;
|
|
}
|
|
.weapon_thumb_img {
|
|
display: block;
|
|
position: absolute;
|
|
left: 106px;
|
|
top: 60px;
|
|
max-width: 90%;
|
|
height: auto;
|
|
// opacity: 0.6;
|
|
// background: rgba(131, 188, 217, 0.3);
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
.weapon_thumb_bg {
|
|
display: block;
|
|
position: absolute;
|
|
left: 100px;
|
|
top: 100px;
|
|
width: 220px;
|
|
height: 84px;
|
|
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;
|
|
|
|
}
|
|
.weapon-bg::before {
|
|
position: absolute;
|
|
content: "";
|
|
bottom: -163px;
|
|
left: 15px;
|
|
display: block;
|
|
width: 170px;
|
|
height: 17px;
|
|
background: url("./@/assets/img/home/weapon-bottom-boder.png") no-repeat;
|
|
background-size: contain;
|
|
}
|
|
|
|
.HeroThumbs {
|
|
}
|
|
.weapon-moss-bg {
|
|
background: url("@/assets/img/home/weapon/weapon-active-bg.png") no-repeat;
|
|
background-size: contain;
|
|
height: 115px;
|
|
width: 220px;
|
|
position: relative;
|
|
}
|
|
.weapon-moss-active-bg {
|
|
background: url("@/assets/img/home/weapon/weapon-bg.png") no-repeat;
|
|
height: 115px;
|
|
width: 220px;
|
|
background-size: contain;
|
|
}
|
|
.weapon-moss-bg ::before {
|
|
width: 100%;
|
|
height: 8px;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 100px;
|
|
background: url("@/assets/img/home/weapon/weapon-bottom-boder.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
.img-boder {
|
|
margin-top: 10px;
|
|
}
|
|
</style>
|