422 lines
10 KiB
Vue
422 lines
10 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">GALLERY</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">
|
||
We are honoured to create CEBG Metaworld.
|
||
</div>
|
||
</div>
|
||
<div class="gallery-banner">
|
||
<div v-for="(item, index) in imageList" :key="index">
|
||
<img class="gallery-img" :src="item.imgSrc" alt="" />
|
||
</div>
|
||
</div>
|
||
<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">GAMEPLAY</div>
|
||
<div class="boder">
|
||
<img src="@/assets/img/home/gameplay-bottom-boder.png" alt="" />
|
||
</div>
|
||
<div class="sloagn">
|
||
CEBG is proud to work with so many DAOs and guilds to embrac
|
||
</div>
|
||
<DameplaySwiperCard></DameplaySwiperCard>
|
||
</div>
|
||
<div class="gameplay-bottom-viodboder">
|
||
<img src="@/assets/img/home/viod-boder.png" alt="" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, computed, reactive, onMounted } from "vue";
|
||
import DameplaySwiperCard from "./DameplaySwiperCard.vue";
|
||
import { Swiper, SwiperSlide } from "swiper/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: require("@/assets/img/home/game/001.png") },
|
||
{ imgSrc: require("@/assets/img/home/game/002.png") },
|
||
{ imgSrc: require("@/assets/img/home/game/003.png") },
|
||
{ imgSrc: require("@/assets/img/home/game/004.png") },
|
||
{ imgSrc: require("@/assets/img/home/game/005.png") },
|
||
{ imgSrc: require("@/assets/img/home/game/006.png") },
|
||
]);
|
||
const Y1 = ref(0);
|
||
const ratio = ref(0.2); //视差偏移率
|
||
|
||
const positionY1 = ref(0); //背景Y轴偏移量
|
||
|
||
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; //原始高度-滚动距离*视差系数
|
||
// console.log(mTab.value, "mTab");
|
||
console.log(positionY1.value + "-------------------3");
|
||
}
|
||
</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;
|
||
}
|
||
.title {
|
||
position: absolute;
|
||
right: 0%;
|
||
top: -750px;
|
||
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{
|
||
width: 100%;
|
||
display: flex;
|
||
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 ease-in-out;
|
||
}
|
||
.go-to-btn:hover {
|
||
// background-image: none;
|
||
}
|
||
.go-to-btn::before {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-image: url("@/assets/img/home/go-to-btn-active.png");
|
||
background-position: center;
|
||
background-repeat: no-repeat;
|
||
background-size: cover;
|
||
transform: scaleX(0);
|
||
transform-origin: center;
|
||
transition: transform 0.3s ease-in-out;
|
||
}
|
||
.go-to-btn:hover::before {
|
||
transform: scaleX(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: 18px;
|
||
font-family: Arial;
|
||
font-weight: bold;
|
||
color: #fff;
|
||
line-height: 32px;
|
||
}
|
||
}
|
||
}
|
||
.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: -960px;
|
||
// 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: 108px;
|
||
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>
|