565 lines
14 KiB
Vue
565 lines
14 KiB
Vue
<template>
|
||
<div>
|
||
<div class="gallerp">
|
||
<div
|
||
class="title"
|
||
ref="mTab"
|
||
id="bgTest"
|
||
:style="{ transform: 'translateY(' + -positionY1 + 'px)' }"
|
||
>
|
||
GALLERY
|
||
</div>
|
||
<div class="gallerp-bg">
|
||
<img src="@/assets/img/home/gallerp-bg.png" alt="" />
|
||
</div>
|
||
<div class="gallerp-bottom-boder">
|
||
<img src="@/assets/img/home/gallerp-bottom-boder.png" alt="" />
|
||
</div>
|
||
<div class="content">
|
||
<div class="gallery-title">GAME VIDEO</div>
|
||
<div class="gallery-boder">
|
||
<img src="@/assets/img/home/gallery-boder.png" alt="" />
|
||
</div>
|
||
<div class="slogan">
|
||
<!-- <div class="slogan-title">CEBG WORK IN-PROCESS WORK SHOW.</div> -->
|
||
<div class="slogan-text">
|
||
Come to be COMMENDER! Enjoy 3D CEBG and fight against other players!
|
||
</div>
|
||
</div>
|
||
<!-- <div class="gallery-banner">
|
||
<div
|
||
v-for="(item, index) in imageList"
|
||
:key="index"
|
||
@click="handleClick(item)"
|
||
>
|
||
<img class="gallery-img" :src="item.imgSrc" alt="" />
|
||
</div>
|
||
</div> -->
|
||
<GalleryBanner></GalleryBanner>
|
||
<div class="btn">
|
||
<div class="go-to-btn"></div>
|
||
</div>
|
||
<!-- <swiper
|
||
:modules="modules"
|
||
:loop="true"
|
||
:slides-per-view="3.5"
|
||
:space-between="15"
|
||
:autoplay="{ delay: 10000, disableOnInteraction: false }"
|
||
>
|
||
<swiper-slide v-for="(item, index) in imageList" :key="index">
|
||
<div class="hero-container">
|
||
<div class="mask">
|
||
<div class="background-tripple-corners-rectange">
|
||
<img
|
||
src="@/assets/img/home/gallery-botom-boder.png"
|
||
alt=""
|
||
/>
|
||
</div>
|
||
<div class="video-btn">
|
||
<img src="@/assets/img/home/video-btn.png" alt="" />
|
||
</div>
|
||
</div>
|
||
<img class="gallery-img" :src="item.imgSrc" alt="" />
|
||
</div>
|
||
</swiper-slide>
|
||
</swiper> -->
|
||
</div>
|
||
</div>
|
||
<div class="gameplay-bottom">
|
||
<div
|
||
class="gameplay-bottom-title"
|
||
:style="{ transform: 'translateY(' + -positionY1 + 'px)' }"
|
||
>
|
||
GAMEPLAY
|
||
</div>
|
||
<div class="gameplay-bottom-bg">
|
||
<img src="@/assets/img/home/gallerp-bottom-bg.jpg" alt="" />
|
||
</div>
|
||
<div class="content">
|
||
<div class="title">GAME FEATURE</div>
|
||
<div class="boder">
|
||
<img src="@/assets/img/home/gameplay-bottom-boder.png" alt="" />
|
||
</div>
|
||
<div class="sloagn">
|
||
Undefinable pattern, incredible gaming experience and excited NFT in
|
||
CEBG!
|
||
</div>
|
||
<DameplaySwiperCard></DameplaySwiperCard>
|
||
</div>
|
||
<div class="gameplay-bottom-viodboder">
|
||
<img src="@/assets/img/home/viod-boder.png" alt="" />
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<iframe
|
||
:src="videoSrc"
|
||
frameborder="0"
|
||
allowfullscreen="true"
|
||
scrolling="no"
|
||
width="100%"
|
||
height="100%"
|
||
></iframe>
|
||
</div>
|
||
<VideoModal ref="videoModal" :video-src="videoSrc"> </VideoModal>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, computed, reactive, onMounted } from "vue";
|
||
import DameplaySwiperCard from "./DameplaySwiperCard.vue";
|
||
import { Swiper, SwiperSlide } from "swiper/vue";
|
||
import VideoModal from "./VideoModal.vue";
|
||
import GalleryBanner from "./GalleryBanner.vue";
|
||
// 引入swiper样式（按需导入）
|
||
import "swiper/css";
|
||
import "swiper/css/pagination"; // 轮播图底面的小圆点
|
||
import "swiper/css/navigation"; // 轮播图两边的左右箭头
|
||
import "swiper/css/scrollbar"; // 轮播图的滚动条
|
||
// 引入swiper核心和所需模块
|
||
import { Autoplay, Pagination, Navigation, Scrollbar } from "swiper";
|
||
|
||
const modules = [Autoplay, Pagination, Navigation, Scrollbar];
|
||
const imageList = reactive([
|
||
{
|
||
imgSrc: new URL("@/assets/img/home/game/001.png", import.meta.url).href,
|
||
videoSrc: "https://embersword.com/videos/hero-animate-h264.mp4",
|
||
},
|
||
{
|
||
imgSrc: new URL("@/assets/img/home/game/002.png", import.meta.url).href,
|
||
videoSrc: "https://embersword.com/videos/hero-animate-h264.mp4",
|
||
},
|
||
{
|
||
imgSrc: new URL("@/assets/img/home/game/003.png", import.meta.url).href,
|
||
videoSrc: "https://embersword.com/videos/hero-animate-h264.mp4",
|
||
},
|
||
{
|
||
imgSrc: new URL("@/assets/img/home/game/004.png", import.meta.url).href,
|
||
videoSrc: "https://embersword.com/videos/hero-animate-h264.mp4",
|
||
},
|
||
{
|
||
imgSrc: new URL("@/assets/img/home/game/005.png", import.meta.url).href,
|
||
videoSrc: "https://embersword.com/videos/hero-animate-h264.mp4",
|
||
},
|
||
{
|
||
imgSrc: new URL("@/assets/img/home/game/006.png", import.meta.url).href,
|
||
videoSrc: "https://embersword.com/videos/hero-animate-h264.mp4",
|
||
},
|
||
]);
|
||
const Y1 = ref(0);
|
||
const ratio = ref(0.2); //视差偏移率
|
||
|
||
const positionY1 = ref(0); //背景Y轴偏移量
|
||
const videoSrc = ref("");
|
||
|
||
const videoModal = ref(null);
|
||
onMounted(() => {
|
||
window.addEventListener("scroll", handleScroll); //创建滚动监听，页面滚动回调handleScroll方法
|
||
let bgTest = document.getElementById("bgTest");
|
||
Y1.value = bgTest.offsetTop * ratio.value;
|
||
});
|
||
|
||
function handleScroll() {
|
||
const scrollTop =
|
||
window.pageYOffset ||
|
||
document.documentElement.scrollTop ||
|
||
document.body.scrollTop;
|
||
positionY1.value = Y1.value - scrollTop * ratio.value; //原始高度-滚动距离*视差系数
|
||
}
|
||
const fullscreen = ref(false);
|
||
function toggleFullScreen() {
|
||
if (this.isFullScreen) {
|
||
// 退出全屏
|
||
document.exitFullscreen();
|
||
this.isFullScreen = false;
|
||
} else {
|
||
// 进入全屏
|
||
const de = document.documentElement;
|
||
if (de.requestFullscreen) {
|
||
de.requestFullscreen();
|
||
} else if (de.mozRequestFullScreen) {
|
||
de.mozRequestFullScreen();
|
||
} else if (de.webkitRequestFullScreen) {
|
||
de.webkitRequestFullScreen();
|
||
} else if (de.msRequestFullscreen) {
|
||
de.msRequestFullscreen();
|
||
}
|
||
this.isFullScreen = true;
|
||
}
|
||
}
|
||
function openFullscreen() {
|
||
const elem = document.documentElement;
|
||
|
||
if (elem.requestFullscreen) {
|
||
elem.requestFullscreen();
|
||
fullscreen.value = true;
|
||
} else if (elem.webkitRequestFullscreen) {
|
||
elem.webkitRequestFullscreen();
|
||
fullscreen.value = true;
|
||
} else {
|
||
// fallback to showing the modal
|
||
fullscreen.value = false;
|
||
openModal();
|
||
}
|
||
}
|
||
|
||
const handleClick = (item) => {
|
||
if (fullscreen.value) {
|
||
return;
|
||
}
|
||
videoSrc.value = item.videoSrc;
|
||
console.log(videoModal.value, "videoModal");
|
||
videoModal.value.open();
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.gallerp {
|
||
// height: 800px;
|
||
// background: rgba(82, 206, 252, 1);
|
||
position: relative;
|
||
// padding-bottom: 736px;
|
||
.gallerp-bg {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
right: 0;
|
||
z-index: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
.gallerp-bottom-boder {
|
||
position: absolute;
|
||
bottom: 0;
|
||
width: 100%;
|
||
// height: 100%;
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
.title {
|
||
position: absolute;
|
||
right: 0%;
|
||
top: -302px;
|
||
text-align: center;
|
||
font-size: 190px;
|
||
font-family: "Big John";
|
||
color: #e09162;
|
||
line-height: 30px;
|
||
opacity: 0.3;
|
||
z-index: 1;
|
||
}
|
||
.content {
|
||
width: 1440px;
|
||
margin: 0 auto;
|
||
padding-top: 157px;
|
||
padding-bottom: 310px;
|
||
position: relative;
|
||
|
||
z-index: 3;
|
||
.gallery-title {
|
||
width: 573px;
|
||
height: 60px;
|
||
margin: 0 auto;
|
||
text-align: center;
|
||
font-size: 76px;
|
||
font-family: "Big John";
|
||
|
||
color: #0f0e0e;
|
||
}
|
||
.gallery-boder {
|
||
margin-top: 59px;
|
||
width: 607px;
|
||
margin: 59px auto;
|
||
margin-bottom: 71px;
|
||
}
|
||
.btn {
|
||
padding-top: 30px;
|
||
}
|
||
.btn {
|
||
width: 100%;
|
||
padding-top: 30px;
|
||
display: flex;
|
||
height: 102px;
|
||
justify-content: center;
|
||
}
|
||
// .go-to-btn {
|
||
// margin-top: 30px;
|
||
// width: 196px;
|
||
// height: 62px;
|
||
// position: relative;
|
||
// margin-right: 30px;
|
||
// color: #263641;
|
||
// cursor: pointer;
|
||
// background-image: url("@/assets/img/home/go-to-btn.png");
|
||
// background-position: center;
|
||
// background-repeat: no-repeat;
|
||
// background-size: cover;
|
||
// overflow: hidden;
|
||
// transition: background-image 0.3s;
|
||
// }
|
||
// .go-to-btn:hover {
|
||
// // background-image: none;
|
||
// }
|
||
// .go-to-btn::after {
|
||
// position: absolute;
|
||
// left: 0;
|
||
// right: 0;
|
||
// top: 0;
|
||
// bottom: 0;
|
||
// opacity: 1;
|
||
// // transition: 0.5s;
|
||
// background: url("@/assets/img/home/go-to-btn-active.png") no-repeat;
|
||
// background-size: 100% 100%;
|
||
// transform: scaleX(1, 1);
|
||
// z-index: -1;
|
||
// clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
|
||
// transition: all 0.3s ease-in-out;
|
||
// }
|
||
// .go-to-btn:hover:after {
|
||
// opacity: 1;
|
||
// clip-path: polygon(
|
||
// calc(50% + 0px) calc(50% + 150px),
|
||
// calc(50% + 150px) calc(50% + 0px),
|
||
// calc(50% + 0px) calc(50% - 150px),
|
||
// calc(50% - 150px) calc(50% - 0px)
|
||
// );
|
||
// transition: all 0.3s ease-in-out;
|
||
// transform: scaleX(1, 1);
|
||
// }
|
||
.go-to-btn {
|
||
// padding-top: 30px;
|
||
width: 196px;
|
||
height: 62px;
|
||
position: relative;
|
||
margin-right: 30px;
|
||
color: #263641;
|
||
cursor: pointer;
|
||
background-image: url("@/assets/img/home/go-to-btn-active.png");
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
// border: 1px solid #333;
|
||
// overflow: hidden;
|
||
transition: background-image 0.3s;
|
||
}
|
||
.pve-right-active:hover {
|
||
// background-image: none;
|
||
}
|
||
.go-to-btn::after {
|
||
content: "";
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
background: url("@/assets/img/home/go-to-btn.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
transform: scaleX(1, 1);
|
||
opacity: 1;
|
||
// z-index: -1;
|
||
clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
|
||
transition: all 0.3s ease-in;
|
||
}
|
||
.go-to-btn:hover:after {
|
||
opacity: 1;
|
||
clip-path: polygon(
|
||
calc(50% + 0px) calc(50% + 150px),
|
||
calc(50% + 150px) calc(50% + 0px),
|
||
calc(50% + 0px) calc(50% - 150px),
|
||
calc(50% - 150px) calc(50% - 0px)
|
||
);
|
||
transition: all 0.3s ease-in;
|
||
transform: scaleX(1, 1);
|
||
}
|
||
.slogan {
|
||
font-size: 18px;
|
||
font-family: Arial;
|
||
font-weight: bold;
|
||
color: #afdff0;
|
||
line-height: 32px;
|
||
width: 556px;
|
||
margin: 0 auto;
|
||
text-align: center;
|
||
margin-bottom: 113px;
|
||
// height: 50px;
|
||
.slogan-title {
|
||
font-size: 22px;
|
||
font-family: Arial;
|
||
font-weight: bold;
|
||
color: #fff;
|
||
line-height: 32px;
|
||
}
|
||
.slogan-text {
|
||
font-size: 16px;
|
||
font-family: Arial;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
}
|
||
.gallery-banner {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
padding-top: 100px;
|
||
// padding-bottom: 310px;
|
||
.gallery-img {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
margin-bottom: 50px;
|
||
cursor: pointer;
|
||
border-radius: 15px;
|
||
width: 453px;
|
||
height: 288px;
|
||
flex: 0 0 33.33333333%;
|
||
justify-content: center;
|
||
overflow: hidden;
|
||
object-fit: cover;
|
||
transition: 0.2s;
|
||
}
|
||
.gallery-img:hover {
|
||
transform: scale(1.05);
|
||
}
|
||
|
||
// position: absolute;
|
||
// right: 0;
|
||
// bottom: 373px;
|
||
// .hero-container {
|
||
// position: relative;
|
||
// }
|
||
|
||
// .mask {
|
||
// position: absolute;
|
||
// cursor: pointer;
|
||
// left: 0;
|
||
// top: 0;
|
||
// width: 100%;
|
||
// height: 100%;
|
||
// opacity: 0;
|
||
// background: rgba(34, 35, 36, 0.3);
|
||
// // clip-path: polygon(100px 0, calc(100% - 100px) 0);
|
||
|
||
// .background-tripple-corners-rectange {
|
||
// position: absolute;
|
||
// left: 0;
|
||
// top: 0;
|
||
// width: 90%;
|
||
// height: 100%;
|
||
// padding-top: 10px;
|
||
// padding-left: 10px;
|
||
// opacity: 0;
|
||
// background: rgba(34, 35, 36, 0.3);
|
||
|
||
// img {
|
||
// max-width: 96%;
|
||
// height: auto;
|
||
// }
|
||
// }
|
||
// .video-btn {
|
||
// margin-top: 90px;
|
||
// margin-left: 180px;
|
||
// }
|
||
// }
|
||
|
||
// .mask:hover {
|
||
// opacity: 1;
|
||
// }
|
||
// .background-tripple-corners-rectange {
|
||
// position: absolute;
|
||
// opacity: 0;
|
||
// }
|
||
// .background-tripple-corners-rectange:hover {
|
||
// position: absolute;
|
||
// opacity: 1;
|
||
// width: 100%;
|
||
// height: 100%;
|
||
// }
|
||
}
|
||
}
|
||
.gameplay-bottom {
|
||
// background: linear-gradient(to bottom, #161f27, #334d62, #689fcb);
|
||
position: relative;
|
||
padding-bottom: 400px;
|
||
.gameplay-bottom-bg {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
right: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
z-index: -10;
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
.gameplay-bottom-viodboder {
|
||
position: absolute;
|
||
bottom: 0;
|
||
width: 100%;
|
||
// height: 100%;
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
.gameplay-bottom-title {
|
||
position: absolute;
|
||
left: 0%;
|
||
top: -560px;
|
||
// padding-top: 40px;
|
||
text-align: center;
|
||
font-size: 190px;
|
||
font-family: "Big John";
|
||
|
||
color: #13293a;
|
||
line-height: 30px;
|
||
opacity: 0.3;
|
||
z-index: -1;
|
||
// transform: translate(-50%, -50%);
|
||
// transform: translateZ(-3px);
|
||
}
|
||
|
||
.content {
|
||
width: 1440px;
|
||
margin: 0 auto;
|
||
text-align: center;
|
||
// padding-bottom: 900px;
|
||
.title {
|
||
width: 691px;
|
||
// height: 95px;
|
||
margin: 0 auto;
|
||
padding-top: 60px;
|
||
font-size: 76px;
|
||
font-family: "Big John";
|
||
|
||
color: #e6f8ff;
|
||
}
|
||
.boder {
|
||
width: 608px;
|
||
height: 10px;
|
||
margin: 0 auto;
|
||
// margin-top: 46px;
|
||
margin-bottom: 146px;
|
||
}
|
||
.sloagn {
|
||
text-align: center;
|
||
font-size: 18px;
|
||
font-family: Arial;
|
||
|
||
color: #e6f8ff;
|
||
line-height: 32px;
|
||
margin-bottom: 71px;
|
||
}
|
||
}
|
||
}
|
||
</style>
|