huangjinming/cebg-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

组件拆分

Browse Source
This commit is contained in:
huangjinming 2023-02-17 15:33:16 +08:00
parent 771deb5be9
commit fa5729e6bd
10 changed files with 602 additions and 161 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

127
src/components/Banner.vue Normal file
View File

@ -0,0 +1,127 @@
<template>
<div>
<div class="banner">
<div class="content">
<div class="sologan">
<img src="../assets/img/home/slogan.png" alt="" />
</div>
<div class="download-center">
<div class="download-item">
<img src="../assets/img/home/google.png" alt="" />
</div>
<div class="download-item">
<img src="../assets/img/home/andriod.png" alt="" />
</div>
<div class="download-item">
<img src="../assets/img/home/apple.png" alt="" />
</div>
</div>
<div class="posters">
<div class="poster poster-one"></div>
<div class="poster poster-tow"></div>
<div class="poster poster-there"></div>
</div>
</div>
<div class="banner-bg">
<img src="../assets/img/home/banner-out.jpg" alt="" />
</div>
<div class="boder-bottom">
<img src="../assets/img/home/banner-boder.png" alt="" />
</div>
</div>
</div>
</template>
<script setup></script>
<style lang="scss" scoped>
.banner {
width: 100%;
height: 100vh;
// height: 937px;
// padding-top: 60px;
// background: url("../assets/img/home/banner-out.jpg") no-repeat;
// background-size: 100% 100%;
// object-fit: cover;
position: relative;
.content {
position: absolute;
bottom: -100px;
left: 50%;
transform: translate(-50%, -50%);
.sologan {
width: 850px;
img {
width: 100%;
}
}
.download-center {
display: flex;
width: 526px;
margin: 0 auto;
justify-content: space-between;
.download-item {
width: 162px;
height: 50px;
cursor: pointer;
}
}
.posters {
position: relative;
margin-bottom: 12px;
margin-top: 74px;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
.poster {
width: 100%;
height: 23px;
background-image: url("../assets/img/home/poster.png");
background-repeat: no-repeat;
background-position: center 0;
background-color: transparent;
background-size: auto;
-webkit-animation-name: arrow;
animation-name: arrow;
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.poster-one {
top: 0;
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
.poster-tow {
top: 12px;
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.poster-there {
top: 24px;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
@keyframes arrow {
50% {
opacity: 0;
}
}
}
}
.boder-bottom {
width: 100%;
z-index: 3;
position: absolute;
bottom: 0;
img {
max-width: 100%;
height: auto;
}
}
}
</style>

7
src/components/NavBar.vue
View File

@ -13,7 +13,6 @@
<span> {{ nav.name }}</span></a
>
<div class="login-btn login-btn-active">
<!-- <img src="../assets/img/home/login-btn.png" alt="" /> -->
</div>
</div>
</div>
@ -21,17 +20,17 @@
</template>
<script setup>
import { ref, reactive, onMounted } from "vue";
import { ref,reactive, onMounted } from "vue";
const curentid = ref(0);
const navList = reactive([
{ name: "HOME", path: "/home" },
{ name: "ABOUT", path: "#/about" },
{ name: "ABOUT", path: "/about" },
{ name: "GALLERY", path: "/news" },
{ name: "MARKETPLACE", path: "/marketpalce" },
{ name: "CONTACT US", path: "/contact" },
]);
//发送请求
function handNavCurent(i) {
curentid.value = i;
}

0
src/components/TestView.vue → src/components/WeaponSwiper.vue
View File

411
src/components/WhatCebg.vue Normal file
View File

@ -0,0 +1,411 @@
<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="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-cebg.png" alt="" />
</div>
<div class="slogan">
<p>CEBG stands for Crypto Elite's: BATTLEGROUNDS,</p>
<p>the first blockchain-based game consisting of Moba,</p>
<p>
and Battleroyal. It's funded by more than 7 institutional
investors,
</p>
<p>including Kucoin,Hashkey Capital,</p>
<p>
Initiate Capital, Kernel Ventures, SNZ, Betterverse DAO, etc.
</p>
<p>
Feel free to join the game in PVP or PVE with play-to-earn and
free-to-play
</p>
</div>
</div>
<div class="monster">
<img src="../assets/img/home/monster.png" alt="" />
</div>
</div>
<div class="gameplay">
<div class="title">
<img src="../assets/img/home/gameplay-title.png" alt="" />
</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="gameplay-content">
<div class="gameplay-left">
<div class="pve-img">
<img
v-if="isPveTab"
src="../assets/img/home/pve-img.png"
alt=""
/>
<img v-else src="../assets/img/home/pve-img.png" alt="" />
</div>
</div>
<div class="gameplay-right">
<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>
</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; //原始高度-滚动距离*视差系数
console.log(mTab.value, "mTab");
console.log(positionY1.value + "-------------------3");
}
</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: 240px;
font-family: "BigJohn";
font-weight: 400;
color: #020304;
line-height: 30px;
opacity: 0.5;
position: absolute;
text-transform: uppercase;
top: 45px;
right: 0;
z-index: 1;
// line-height: 30px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.gameplay-name {
position: absolute;
text-transform: uppercase;
top: 400px;
right: 0;
z-index: 1;
font-size: 240px;
font-family: "BigJohn";
font-weight: 400;
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: 152px;
padding-bottom: 226px;
margin: 0 auto;
display: flex;
// align-items: center;
flex-direction: column;
// justify-content: space-between;
position: relative;
.what-content {
display: flex;
.monster {
// position: absolute;
// top: 57px;
// left: 64px;
z-index: 2;
width: 484px;
height: 465px;
}
.content-right {
z-index: 2;
width: 792px;
// margin: 0 auto;
padding-bottom: 202px;
text-align: center;
.title {
font-size: 90px;
font-family: "JCuYuan";
font-weight: 400;
font-style: italic;
color: #e6f8ff;
// white-space: ;
}
.slogan {
width: 631px;
// height: 168px;
margin: 0 auto;
text-align: center;
font-size: 18px;
font-family: Arial;
font-weight: bold;
color: #daf1fa;
}
.what-cebg-img {
width: 100%;
padding-top: 23px;
padding-bottom: 23px;
img {
max-width: 100%;
height: auto;
object-fit: cover;
}
}
}
}
.gameplay {
z-index: 2;
display: flex;
// align-items: center;
flex-direction: column;
// justify-content: space-between;
.title {
width: 544px;
// font-size: 90px;
// font-family: "JCuYuan";
// font-weight: 400;
// font-style: italic;
// color: #263641;
}
.gameplay-img {
width: 100%;
height: 25px;
padding-top: 37px;
padding-bottom: 42px;
img {
max-width: 100%;
height: auto;
}
}
.pve {
display: flex;
justify-content: flex-end;
.pve-left {
margin-top: 30px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
width: 119px;
height: 44px;
line-height: 44px;
cursor: pointer;
font-size: 28px;
font-family: "MEurostile";
font-weight: 400;
color: #263641;
padding: 2px; //边框的宽度
background: linear-gradient(135deg, transparent 5px, #263641 0);
background-size: 100% 100%;
background-repeat: no-repeat;
.in-rect {
width: 100%;
height: 100%;
background: linear-gradient(135deg, transparent 4px, #67a0cb 0);
background-size: 100% 100%;
background-repeat: no-repeat;
}
}
.pve-left-active {
margin-top: 30px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
line-height: 44px;
width: 119px;
height: 44px;
font-size: 28px;
font-family: "MEurostile";
font-weight: 400;
color: #263641;
cursor: pointer;
padding: 2px; //边框的宽度
background: url("../assets/img/home/PVP.png") no-repeat;
background-size: contain;
background-repeat: no-repeat;
// .in-rect-active {
// background: url('../assets/img/home/PVP.png')no-repeat;
// background-size: contain;
// }
}
.pve-right {
margin-top: 30px;
display: flex;
cursor: pointer;
align-items: center;
justify-content: center;
text-align: center;
font-size: 28px;
font-family: "MEurostile";
font-weight: 400;
color: #263641;
width: 119px;
height: 44px;
padding: 2px;
line-height: 44px;
background: linear-gradient(-135deg, transparent 5px, #263641 0) top
right;
background-size: 100% 100%;
background-repeat: no-repeat;
.in-rect {
width: 100%;
height: 100%;
background: linear-gradient(-135deg, transparent 4px, #67a0cb 0) top
right;
background-size: 100% 100%;
background-repeat: no-repeat;
}
}
.pve-right-active {
margin-top: 30px;
display: flex;
cursor: pointer;
align-items: center;
justify-content: center;
font-size: 28px;
font-family: "MEurostile";
font-weight: 400;
color: #263641;
width: 119px;
height: 44px;
padding: 2px;
background: url("../assets/img/home/PVE.png") no-repeat;
background-size: contain;
// transform: rotate(180deg);
background-repeat: no-repeat;
}
}
.gameplay-content {
display: flex;
background: #59a2d0;
.gameplay-left {
.pve-img {
width: 732px;
height: 336px;
}
}
.gameplay-right {
width: 767px;
height: 333px;
background: rgba(89, 162, 208, 0.6);
// opacity: 0.6;
.slogan {
width: 636px;
height: 164px;
margin: 0 auto;
margin-top: 54px;
font-size: 18px;
line-height: 30px;
font-family: Arial;
font-weight: bold;
color: #1d2931;
}
}
}
}
}
}
</style>

4
src/router/index.js
View File

@ -1,6 +1,6 @@
import { createRouter,createWebHistory } from "vue-router";
import Home from "../views/home.vue";
import About from "../views/about.vue";
import Home from "../views/HomeView.vue";
import About from "../views/AboutView.vue";
const routes = [

0
src/views/about.vue → src/views/AboutView.vue
View File

13
src/views/ContactUsView.vue Normal file
View File

@ -0,0 +1,13 @@
<template>
<div>
</div>
</template>
<script setup>
</script>
<style lang="scss" scoped>
</style>

7
src/views/GalleryView.vue Normal file
View File

@ -0,0 +1,7 @@
<template>
<div></div>
</template>
<script setup></script>
<style lang="scss" scoped></style>

177
src/views/home.vue → src/views/HomeView.vue
View File

@ -1,143 +1,13 @@
<template>
<div class="home-box">
<NavBar></NavBar>
<div class="banner">
<div class="content">
<div class="sologan">
<img src="../assets/img/home/slogan.png" alt="" />
</div>
<div class="download-center">
<div class="download-item">
<img src="../assets/img/home/google.png" alt="" />
</div>
<div class="download-item">
<img src="../assets/img/home/andriod.png" alt="" />
</div>
<div class="download-item">
<img src="../assets/img/home/apple.png" alt="" />
</div>
</div>
<div class="posters">
<div class="poster poster-one"></div>
<div class="poster poster-tow"></div>
<div class="poster poster-there"></div>
</div>
</div>
<div class="banner-bg">
<img src="../assets/img/home/banner-out.jpg" alt="" />
</div>
<div class="boder-bottom">
<img src="../assets/img/home/banner-boder.png" alt="" />
</div>
</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="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-cebg.png" alt="" />
</div>
<div class="slogan">
<p>CEBG stands for Crypto Elite's: BATTLEGROUNDS,</p>
<p>the first blockchain-based game consisting of Moba,</p>
<p>
and Battleroyal. It's funded by more than 7 institutional
investors,
</p>
<p>including Kucoin,Hashkey Capital,</p>
<p>
Initiate Capital, Kernel Ventures, SNZ, Betterverse DAO, etc.
</p>
<p>
Feel free to join the game in PVP or PVE with play-to-earn and
free-to-play
</p>
</div>
</div>
<div class="monster">
<img src="../assets/img/home/monster.png" alt="" />
</div>
</div>
<div class="gameplay">
<div class="title">
<img src="../assets/img/home/gameplay-title.png" alt="" />
</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="gameplay-content">
<div class="gameplay-left">
<div class="pve-img">
<img
v-if="isPveTab"
src="../assets/img/home/pve-img.png"
alt=""
/>
<img v-else src="../assets/img/home/pve-img.png" alt="" />
</div>
</div>
<div class="gameplay-right">
<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>
</div>
</div>
<div class="what-bg">
<img src="../assets/img/home/what-bg.jpg" alt="" />
</div>
</div>
<Banner></Banner>
<WhatCebg></WhatCebg>
<div class="hero-swiper">
<div class="centent">
<div class="centent-left">
<heroSwiper></heroSwiper>
<HeroSwiper></HeroSwiper>
<div
class="hero-title"
:style="{ transform: 'translateY(' + -positionY1 + 'px)' }"
@ -173,7 +43,7 @@
the right weapon, you must be a brave and wise warrior. Likewise, all
the entry-level of weapons are free to use.
</div>
<SwiperDemo></SwiperDemo>
<WeaponSwiper></WeaponSwiper>
</div>
<div class="weapon-bg">
<img src="../assets/img/home/weapon-bg.jpg" alt="" />
@ -317,25 +187,22 @@
<div class="sloagn">
CEBG is proud to work with so many DAOs and guilds to embrac
</div>
<card></card>
<DameplaySwiperCard></DameplaySwiperCard>
</div>
</div>
<FooterBar></FooterBar>
</div>
</template>
<script setup>
import { getCurrentInstance, ref, computed, reactive, onMounted } from "vue";
import { useRouter } from "vue-router";
// import { useStore } from "pinia";
import NavBar from "../components/NavBar.vue";
import FooterBar from "../components/FooterBar.vue";
// import Parallax from "../components/Parallax.vue";
// import demoSwiper from "../components/demoSwiper.vue";
// import gameSwiper from "../components/gameSwiper.vue";
import SwiperDemo from "../components/TestView.vue";
import heroSwiper from "../components/heroSwiper.vue";
import card from "../components/DameplaySwiperCard.vue";
import NavBar from "../components/NavBar.vue";
import FooterBar from "../components/FooterBar.vue";
import Banner from "../components/Banner.vue";
import WhatCebg from "../components/WhatCebg.vue";
import WeaponSwiper from "../components/WeaponSwiper.vue";
import HeroSwiper from "../components/HeroSwiper.vue";
import DameplaySwiperCard from "../components/DameplaySwiperCard.vue";
import { Swiper, SwiperSlide } from "swiper/vue";
// 引入swiper样式（按需导入）
import "swiper/css";
@ -369,7 +236,10 @@ const handTabActive = (isTab) => {
let timer = null;
function backTop() {
timer = setInterval(() => {
const backTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
const backTop =
window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop;
const speedTop = backTop / 10;
document.documentElement.scrollTop = backTop - speedTop;
if (backTop === 0) {
@ -378,12 +248,16 @@ function backTop() {
}, 10);
}
function scrollToTop() {
const pageLookHeight = document.documentElement.clientHeight || document.body.clientHeight;
const pageLookHeight =
document.documentElement.clientHeight || document.body.clientHeight;
const scroll = document.documentElement.scrollTop;
btnShow.value = scroll >= pageLookHeight * 0.618;
}
function handleScroll() {
const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
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");
@ -584,7 +458,7 @@ function handleScroll() {
color: #263641;
cursor: pointer;
padding: 2px; //边框的宽度
background: url('../assets/img/home/PVP.png')no-repeat;
background: url("../assets/img/home/PVP.png") no-repeat;
background-size: contain;
background-repeat: no-repeat;
// .in-rect-active {
@ -633,12 +507,10 @@ function handleScroll() {
width: 119px;
height: 44px;
padding: 2px;
background: url('../assets/img/home/PVE.png')no-repeat;
background: url("../assets/img/home/PVE.png") no-repeat;
background-size: contain;
// transform: rotate(180deg);
background-repeat: no-repeat;
}
}
.gameplay-content {
@ -1186,6 +1058,5 @@ function handleScroll() {
}
}
}
}
</style>

13
src/views/MarketplaceView.vue Normal file
View File

@ -0,0 +1,13 @@
<template>
<div>
</div>
</template>
<script setup>
</script>
<style lang="scss" scoped>
</style>