513 lines
14 KiB
Vue
513 lines
14 KiB
Vue
<template>
|
||
<div>
|
||
<div class="what-cebg">
|
||
<div
|
||
class="cebg-game"
|
||
id="bgTest"
|
||
:style="{ transform: 'translateY(' + -positionY1 + 'px)' }"
|
||
>
|
||
CEBG GAME
|
||
</div>
|
||
<div
|
||
class="gameplay-name"
|
||
:style="{ transform: 'translateY(' + -positionY1 + 'px)' }"
|
||
>
|
||
GAMEPLAY
|
||
</div>
|
||
<div class="content">
|
||
<div class="content-left">
|
||
<img src="" alt="" />
|
||
</div>
|
||
<div class="what-content">
|
||
<div class="monster">
|
||
<img src="@/assets/img/home/monster.png" alt="" />
|
||
</div>
|
||
<div class="content-right">
|
||
<div class="title">
|
||
<img src="@/assets/img/home/what-title.png" alt="" />
|
||
</div>
|
||
<div class="what-cebg-img">
|
||
<img src="@/assets/img/home/what-boder.png" alt="" />
|
||
</div>
|
||
<div class="slogan">
|
||
CEBG stands for Crypto Elite's: BATTLEGROUNDS,the first
|
||
blockchain-based game consisting of Moba,and Battleroyal. It's
|
||
funded by more than 7 institutional investors.CEBG stands for
|
||
Crypto Elite's: BATLEGROUNDS,the first blockchain-based game
|
||
consisting of Moba,and Battleroyal. It's funded by more than 7
|
||
institutional investors.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="gameplay">
|
||
<div class="gameplay-content">
|
||
<div class="gameplay-right">
|
||
<div class="title">GAMEPLAY</div>
|
||
<div class="gameplay-img">
|
||
<img src="@/assets/img/home/gameplay.png" alt="" />
|
||
</div>
|
||
<div class="pve">
|
||
<div
|
||
:class="isPveTab == true ? 'pve-left-active' : 'pve-left'"
|
||
@click="handTabActive(true)"
|
||
>
|
||
<div :class="isPveTab == true ? 'in-rect-active' : 'in-rect'">
|
||
<!-- PVP -->
|
||
</div>
|
||
</div>
|
||
<div
|
||
:class="isPveTab == false ? 'pve-right-active' : 'pve-right'"
|
||
@click="handTabActive(false)"
|
||
>
|
||
<div
|
||
:class="isPveTab == false ? 'in-rect-active' : 'in-rect'"
|
||
>
|
||
<!-- PVE -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="pve-content">
|
||
<div class="slogan">
|
||
Each battle contains 40 players by matching through the ELO
|
||
value 2 types of PVP modes: <br />
|
||
Matchmaking: no restrictions, players can earn a certain
|
||
amount of Gold and in-game rewards <br />
|
||
Qualifying: Matching by the monthly rank, and the top players
|
||
to share the amount of CEBG token
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="gameplay-left">
|
||
<div class="pve-img">
|
||
<img
|
||
v-if="isPveTab"
|
||
src="@/assets/img/home/pve-img.jpg"
|
||
alt=""
|
||
/>
|
||
<img v-else src="@/assets/img/home/pve-img.jpg" alt="" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="what-bg">
|
||
<img src="@/assets/img/home/what-bg.jpg" alt="" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted } from "vue";
|
||
|
||
const Y1 = ref(0);
|
||
const ratio = ref(0.2); //视差偏移率
|
||
const isPveTab = ref(false);
|
||
const positionY1 = ref(0); //背景Y轴偏移量
|
||
|
||
const handTabActive = (isTab) => {
|
||
isPveTab.value = isTab;
|
||
};
|
||
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; //原始高度-滚动距离*视差系数
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.what-cebg {
|
||
// background: rgba(38, 54, 67, 1);
|
||
// background:url('@/assets/img/home/what-bg.jpg') no-repeat;
|
||
position: relative;
|
||
.what-bg {
|
||
position: absolute;
|
||
height: 100%;
|
||
width: 100%;
|
||
left: 0;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
color: transparent;
|
||
img {
|
||
position: absolute;
|
||
height: 100%;
|
||
width: 100%;
|
||
left: 0;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
z-index: 0;
|
||
color: transparent;
|
||
}
|
||
}
|
||
.cebg-game {
|
||
font-size: 180px;
|
||
font-family: "Big John";
|
||
font-weight: 400;
|
||
color: #16252d;
|
||
opacity: 0.5;
|
||
position: absolute;
|
||
text-transform: uppercase;
|
||
top: -85px;
|
||
right: 0;
|
||
z-index: 1;
|
||
-webkit-user-select: none;
|
||
-moz-user-select: none;
|
||
-ms-user-select: none;
|
||
user-select: none;
|
||
}
|
||
.gameplay-name {
|
||
position: absolute;
|
||
text-transform: uppercase;
|
||
top: 500px;
|
||
left: 0;
|
||
z-index: 1;
|
||
font-size: 180px;
|
||
font-family: "BigJohn";
|
||
color: #3e7ea6;
|
||
line-height: 30px;
|
||
opacity: 0.4;
|
||
-webkit-user-select: none;
|
||
-moz-user-select: none;
|
||
-ms-user-select: none;
|
||
user-select: none;
|
||
}
|
||
|
||
.content {
|
||
width: 1440px;
|
||
padding-top: 62px;
|
||
padding-bottom: 168px;
|
||
margin: 0 auto;
|
||
display: flex;
|
||
flex-direction: column;
|
||
position: relative;
|
||
.what-content {
|
||
display: flex;
|
||
.monster {
|
||
position: absolute;
|
||
top: 20px;
|
||
left: -210px;
|
||
z-index: 2;
|
||
width: 521px;
|
||
height: 482px;
|
||
img {
|
||
width: 521px;
|
||
height: 482px;
|
||
}
|
||
}
|
||
.content-right {
|
||
z-index: 2;
|
||
width: 792px;
|
||
margin: 0 auto;
|
||
padding-bottom: 202px;
|
||
.title {
|
||
width: 100%;
|
||
font-size: 90px;
|
||
font-family: "JCuYuan";
|
||
font-style: italic;
|
||
color: #e6f8ff;
|
||
// white-space: ;
|
||
img {
|
||
width: 100%;
|
||
}
|
||
}
|
||
.slogan {
|
||
width: 683px;
|
||
margin: 0 auto;
|
||
text-align: center;
|
||
font-size: 16px;
|
||
font-family: Arial;
|
||
font-weight: bold;
|
||
color: #ffffff;
|
||
}
|
||
.what-cebg-img {
|
||
width: 100%;
|
||
padding-top: 23px;
|
||
padding-bottom: 63px;
|
||
img {
|
||
max-width: 100%;
|
||
height: auto;
|
||
object-fit: cover;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.gameplay {
|
||
z-index: 2;
|
||
display: flex;
|
||
flex-direction: column;
|
||
position: relative;
|
||
.title {
|
||
// width: 544px;
|
||
font-size: 44px;
|
||
font-family: "Big John";
|
||
font-weight: 400;
|
||
color: #010001;
|
||
padding-bottom: 111px;
|
||
}
|
||
.gameplay-img {
|
||
width: 721px;
|
||
height: 71px;
|
||
left: -80px;
|
||
top: 70px;
|
||
position: absolute;
|
||
padding-bottom: 40px;
|
||
img {
|
||
width: 721px;
|
||
height: 71px;
|
||
}
|
||
}
|
||
.pve {
|
||
display: flex;
|
||
margin-left: 92px;
|
||
// justify-content: flex-end;
|
||
.pve-left {
|
||
// margin-top: 30px;
|
||
width: 196px;
|
||
height: 62px;
|
||
position: relative;
|
||
margin-right: 30px;
|
||
color: #263641;
|
||
cursor: pointer;
|
||
background-image: url("@/assets/img/home/pve-btn.png");
|
||
background-position: center;
|
||
background-repeat: no-repeat;
|
||
background-size: cover;
|
||
// border: 1px solid #333;
|
||
// overflow: hidden;
|
||
transition: background-image 0.3s;
|
||
}
|
||
.pve-left:hover {
|
||
// background-image: none;
|
||
}
|
||
.pve-left::after {
|
||
content: "";
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
background: url("@/assets/img/home/pve-btn-active.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.25s ease-in;
|
||
}
|
||
.pve-left: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.25s ease-in;
|
||
transform: scaleX(1,1);
|
||
}
|
||
.pve-left-active {
|
||
margin-top: 30px;
|
||
width: 196px;
|
||
height: 62px;
|
||
margin-right: 30px;
|
||
position: relative;
|
||
cursor: pointer;
|
||
background-image: url("@/assets/img/home/pve-btn-active.png");
|
||
background-position: center;
|
||
background-repeat: no-repeat;
|
||
background-size: cover;
|
||
overflow: hidden;
|
||
transition: background-image 1s ease-in-out;
|
||
}
|
||
.pve-left-active::after {
|
||
content: "";
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
background: url("@/assets/img/home/pve-btn.png") no-repeat;
|
||
background-size:100% 100%;
|
||
opacity: 0;
|
||
transform: scaleX(1.1);
|
||
clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
|
||
|
||
transition: transform 0.25s ease-in-out;
|
||
}
|
||
.pve-left-active:hover::after {
|
||
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)
|
||
);
|
||
opacity: 1;
|
||
transform: scaleX(1,1);
|
||
transition: all 0.25s ease-in;
|
||
}
|
||
.pve-right {
|
||
// margin-top: 30px;
|
||
width: 196px;
|
||
height: 62px;
|
||
position: relative;
|
||
background-image: url("@/assets/img/home/pvp-btn.png");
|
||
background-position: center;
|
||
background-repeat: no-repeat;
|
||
background-size: cover;
|
||
// border: 1px solid #333;
|
||
// overflow: hidden;
|
||
transition: background-image 1s;
|
||
}
|
||
.pve-right::after {
|
||
content: "";
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
background: url("@/assets/img/home/pvp-btn-active.png") no-repeat;
|
||
background-size:100% 100%;
|
||
opacity: 1;
|
||
transform: scaleX(1,1);
|
||
clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
|
||
transition: all 0.3s ease-in;
|
||
}
|
||
.pve-right:hover:after {
|
||
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)
|
||
);
|
||
opacity: 1;
|
||
transition: all 0.25s ease-in;
|
||
transform: scaleX(1,1);
|
||
}
|
||
// .pve-right-active {
|
||
// // margin-top: 30px;
|
||
// width: 196px;
|
||
// height: 62px;
|
||
// position: relative;
|
||
// background-image: url("@/assets/img/home/pvp-btn.png") ;
|
||
// background-position: center;
|
||
// background-repeat: no-repeat;
|
||
// background-size: cover;
|
||
// transition: background-image 1s;
|
||
// }
|
||
|
||
// .pve-right-active::after {
|
||
// content: "";
|
||
// position: absolute;
|
||
// left: 0;
|
||
// right: 0;
|
||
// top: 0;
|
||
// bottom: 0;
|
||
// background: url("@/assets/img/home/pvp-btn-active.png")no-repeat;
|
||
// background-size:100% 100%;
|
||
// transform: scaleX(1,1);
|
||
// opacity: 1;
|
||
// clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
|
||
// // transform-origin: center;
|
||
// transition: transform 0.3s ease-in;
|
||
// }
|
||
// .pve-right-active: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: transform 0.3s ease-in;
|
||
// transform: scaleX(1,1);
|
||
// }
|
||
}
|
||
.pve-right-active {
|
||
// margin-top: 30px;
|
||
width: 196px;
|
||
height: 62px;
|
||
position: relative;
|
||
margin-right: 30px;
|
||
color: #263641;
|
||
cursor: pointer;
|
||
background-image: url("@/assets/img/home/pvp-btn.png");
|
||
background-position: center;
|
||
background-repeat: no-repeat;
|
||
background-size: cover;
|
||
// border: 1px solid #333;
|
||
// overflow: hidden;
|
||
transition: background-image 0.3s;
|
||
}
|
||
.pve-right-active:hover {
|
||
// background-image: none;
|
||
}
|
||
.pve-right-active::after {
|
||
content: "";
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
background: url("@/assets/img/home/pvp-btn-active.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;
|
||
}
|
||
.pve-right-active: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);
|
||
}
|
||
.gameplay-content {
|
||
display: flex;
|
||
// background: #59a2d0;
|
||
.gameplay-left {
|
||
.pve-img {
|
||
width: 710px;
|
||
height: 400px;
|
||
}
|
||
}
|
||
.gameplay-right {
|
||
width: 767px;
|
||
height: 333px;
|
||
|
||
.slogan {
|
||
width: 636px;
|
||
height: 164px;
|
||
margin: 0 auto;
|
||
margin-top: 38px;
|
||
font-size: 18px;
|
||
line-height: 30px;
|
||
font-family: Arial;
|
||
font-weight: bold;
|
||
color: #1d2931;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|