newcebg
This commit is contained in:
huangjinming
parent
6789a56a63
commit
771deb5be9
15
.gitignore
vendored
Normal file
15
.gitignore
vendored
Normal file
@ -0,0 +1,15 @@
|
||||
.DS_Store
|
||||
node_modules/
|
||||
/dist/
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# Editor directories and files
|
||||
.idea
|
||||
.vscode
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
|
||||
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||
|
Before Width: | Height: | Size: 1.5 KiB |
@ -93,12 +93,10 @@ const boxStyle4 = computed(() => ({
|
||||
}));
|
||||
const handSlidePrev = () => {
|
||||
myRef.value?.$el.swiper.slidePrev();
|
||||
// activeIndex.value = myRef.value?.$el.swiper.activeIndex;
|
||||
};
|
||||
const handSlideNext = () => {
|
||||
myRef.value?.$el.swiper.slideNext();
|
||||
// activeIndex.value = myRef.value?.$el.swiper.activeIndex;
|
||||
// console.log(activeIndex.value, "activeIndex.value01");
|
||||
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
394
src/components/FooterBar.vue
Normal file
394
src/components/FooterBar.vue
Normal file
@ -0,0 +1,394 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="footer">
|
||||
<div class="content">
|
||||
<div class="cooperation-logo">
|
||||
<a href="#" class="hashkey">
|
||||
<img src="../assets/img/home/logo/hashkey.png" alt=""
|
||||
/></a>
|
||||
<a href="#" class="snz">
|
||||
<img src="../assets/img/home/logo/snz.png" alt=""
|
||||
/></a>
|
||||
<a href="#" class="initiate">
|
||||
<img src="../assets/img/home/logo/initiate-catital.png" alt=""
|
||||
/></a>
|
||||
<a href="#" class="kernel">
|
||||
<img src="../assets/img/home/logo/kernel.png" alt=""
|
||||
/></a>
|
||||
<a href="#" class="betterversedao">
|
||||
<img src="../assets/img/home/logo/betterversedao.png" alt=""
|
||||
/></a>
|
||||
<a href="#" class="youbiocapital">
|
||||
<img src="../assets/img/home/logo/youbiocapital.png" alt=""
|
||||
/></a>
|
||||
<a href="#" class="kucoin">
|
||||
<img src="../assets/img/home/logo/kucoin.png" alt=""
|
||||
/></a>
|
||||
<a href="#" class="capltal">
|
||||
<img src="../assets/img/home/logo/capltal.png" alt=""
|
||||
/></a>
|
||||
<a href="#" class="grs">
|
||||
<img src="../assets/img/home/logo/grs.png" alt=""
|
||||
/></a>
|
||||
</div>
|
||||
<div class="footer-logo">
|
||||
<div class="go-start"></div>
|
||||
<div class="go-content">
|
||||
<!-- <img src="../assets/img/home/logo.png" alt="" /> -->
|
||||
</div>
|
||||
<div class="go-top">
|
||||
<div class="rise-top" @click="backTop">
|
||||
<div class="rise-title">RISE TO THE TOP</div>
|
||||
<div><img src="../assets/img/home/rise.jpg" alt="" /></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-img-top">
|
||||
<div class="center">
|
||||
<img src="../assets/img/home/footer-boder.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-about">
|
||||
<div class="about-lable-child">
|
||||
<div class="child-item">
|
||||
<a href="#" class="about-item-title">PRODUCT</a>
|
||||
<a href="#" class="about-item">Home</a>
|
||||
<a href="#/about" class="about-item">Gameplay</a>
|
||||
<a href="#" class="about-item">Tokenomic</a>
|
||||
<a href="#" class="about-item">NFT</a>
|
||||
<a href="#" class="about-item">Marketplace</a>
|
||||
</div>
|
||||
<div class="child-item">
|
||||
<a href="/about" class="about-item-title">RESOURCES</a>
|
||||
<a href="#" class="about-item">Whitepaper</a>
|
||||
</div>
|
||||
<div class="child-item">
|
||||
<a href="#" class="about-item-title">ABOUT</a>
|
||||
<a href="#" class="about-item">Team</a>
|
||||
<a href="#" class="about-item">Roadmp</a>
|
||||
</div>
|
||||
<div class="child-item">
|
||||
<a href="#" class="about-item-title">POLICIES</a>
|
||||
<a href="#" class="about-item">Terms of use</a>
|
||||
<a href="#" class="about-item">Privacy Policy</a>
|
||||
</div>
|
||||
<div class="child-item">
|
||||
<a href="#" class="about-item-title">CONTACT US</a>
|
||||
<a href="#" class="about-item">contact@cebg,games</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-bottom">
|
||||
<div class="mailbox">COPYRIGHT © CEBG.ALL RIGHTS RESERVED.</div>
|
||||
<div class="follow">
|
||||
<a href="#" class="twiter">
|
||||
<img src="../assets/img/home/logo/twiter.png" alt=""
|
||||
/></a>
|
||||
<a href="#" class="telegram">
|
||||
<img src="../assets/img/home/logo/telegram.png" alt=""
|
||||
/></a>
|
||||
<a href="#" class="dosccord">
|
||||
<img src="../assets/img/home/logo/doscord.png" alt=""
|
||||
/></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
let timer = null;
|
||||
function backTop() {
|
||||
timer = setInterval(() => {
|
||||
const backTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
|
||||
const speedTop = backTop / 10;
|
||||
document.documentElement.scrollTop = backTop - speedTop;
|
||||
if (backTop === 0) {
|
||||
clearInterval(timer);
|
||||
}
|
||||
}, 10);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.footer {
|
||||
width: 100%;
|
||||
|
||||
.content {
|
||||
padding-top: 133px;
|
||||
max-width: 1440px;
|
||||
margin: 0 auto;
|
||||
.cooperation-logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
-webkit-filter: grayscale(100%);
|
||||
filter: grayscale(100%);
|
||||
.hashkey {
|
||||
width: 112px;
|
||||
height: 18px;
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
.snz {
|
||||
width: 67px;
|
||||
height: 37px;
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
.initiate {
|
||||
width: 116px;
|
||||
height: 38px;
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
.kernel {
|
||||
width: 113px;
|
||||
height: 39px;
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
.betterversedao {
|
||||
width: 119px;
|
||||
height: 29px;
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
.youbiocapital {
|
||||
width: 93px;
|
||||
height: 55px;
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
.capltal {
|
||||
width: 137px;
|
||||
height: 35px;
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
.kucoin {
|
||||
width: 95px;
|
||||
height: 29px;
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
.grs {
|
||||
width: 95px;
|
||||
height: 29px;
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
.content-img-top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-top: 36px;
|
||||
.center {
|
||||
width: 100%;
|
||||
height: 26px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
.footer-logo {
|
||||
padding-top: 75px;
|
||||
display: flex;
|
||||
justify-content: stretch;
|
||||
.go-start {
|
||||
flex: 1;
|
||||
}
|
||||
.go-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
img {
|
||||
width: 132px;
|
||||
height: 127px;
|
||||
}
|
||||
}
|
||||
.go-top {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
.rise-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
font-family: Arial;
|
||||
font-weight: bold;
|
||||
color: #000000;
|
||||
.rise-title {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer-about {
|
||||
padding-top: 40px;
|
||||
.about-lable {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-bottom: 40px;
|
||||
border-bottom: 1px solid #d0d0d0;
|
||||
a {
|
||||
font-size: 20px;
|
||||
font-family: Arial;
|
||||
font-weight: bold;
|
||||
color: #000000;
|
||||
font-weight: 900;
|
||||
text-transform: uppercase;
|
||||
transition-property: color;
|
||||
transition-duration: 0.15s;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
a:hover {
|
||||
font-size: 20px;
|
||||
font-family: Arial;
|
||||
font-weight: 900;
|
||||
text-transform: uppercase;
|
||||
transition-property: color;
|
||||
transition-duration: 0.15s;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
color: #1fc8ff;
|
||||
}
|
||||
.about-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
.about-lable-child {
|
||||
display: flex;
|
||||
position: relative;
|
||||
justify-content: space-evenly;
|
||||
// align-items: center;
|
||||
padding-bottom: 24px;
|
||||
margin-top: 40px;
|
||||
|
||||
.child-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
// justify-content: space-between;
|
||||
// align-items: center;
|
||||
|
||||
flex-direction: column;
|
||||
a {
|
||||
font-size: 18px;
|
||||
margin-bottom: 46px;
|
||||
font-family: Arial;
|
||||
font-weight: bold;
|
||||
color: #6a6d74;
|
||||
transition-property: color;
|
||||
transition-duration: 0.15s;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
a:hover {
|
||||
font-size: 18px;
|
||||
margin-bottom: 46px;
|
||||
font-family: Arial;
|
||||
font-weight: bold;
|
||||
color: #1fc8ff;
|
||||
transition-property: color;
|
||||
transition-duration: 0.15s;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.about-item-title {
|
||||
font-size: 20px;
|
||||
font-family: Arial;
|
||||
font-weight: bold;
|
||||
color: #000000;
|
||||
font-weight: 900;
|
||||
padding-bottom: 14px;
|
||||
// text-transform: uppercase;
|
||||
transition-property: color;
|
||||
transition-duration: 0.15s;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.about-item-title:hover {
|
||||
font-size: 20px;
|
||||
font-family: Arial;
|
||||
font-weight: 900;
|
||||
// text-transform: uppercase;
|
||||
transition-property: color;
|
||||
transition-duration: 0.15s;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
color: #1fc8ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.about-lable-child::after {
|
||||
content: "";
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
left: 0;
|
||||
top: 46px;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
background: #d0d0d0;
|
||||
}
|
||||
.footer-bottom {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 46px;
|
||||
.mailbox {
|
||||
font-size: 18px;
|
||||
font-family: Arial;
|
||||
font-weight: bold;
|
||||
color: #797979;
|
||||
}
|
||||
.follow {
|
||||
display: flex;
|
||||
a {
|
||||
margin-left: 29px;
|
||||
}
|
||||
.twiter {
|
||||
img {
|
||||
width: 47px;
|
||||
height: 34px;
|
||||
}
|
||||
}
|
||||
.dosccord {
|
||||
img {
|
||||
width: 47px;
|
||||
height: 34px;
|
||||
}
|
||||
}
|
||||
.telegram {
|
||||
img {
|
||||
width: 37px;
|
||||
height: 37px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
182
src/components/NavBar.vue
Normal file
182
src/components/NavBar.vue
Normal file
@ -0,0 +1,182 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="header header-top">
|
||||
<div class="nav">
|
||||
<a
|
||||
:href="nav.path"
|
||||
class="nav-item duration-200"
|
||||
v-for="(nav, i) in navList"
|
||||
:class="i == curentid ? 'active-nav-item' : ''"
|
||||
:key="i"
|
||||
@click="handNavCurent(i)"
|
||||
>
|
||||
<span> {{ nav.name }}</span></a
|
||||
>
|
||||
<div class="login-btn login-btn-active">
|
||||
<!-- <img src="../assets/img/home/login-btn.png" alt="" /> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from "vue";
|
||||
const curentid = ref(0);
|
||||
const navList = reactive([
|
||||
{ name: "HOME", path: "/home" },
|
||||
{ name: "ABOUT", path: "#/about" },
|
||||
{ name: "GALLERY", path: "/news" },
|
||||
{ name: "MARKETPLACE", path: "/marketpalce" },
|
||||
{ name: "CONTACT US", path: "/contact" },
|
||||
]);
|
||||
|
||||
//发送请求
|
||||
function handNavCurent(i) {
|
||||
curentid.value = i;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.header {
|
||||
position: fixed;
|
||||
z-index: 10;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: rgb(255, 255, 255);
|
||||
width: 100%;
|
||||
// height: 60px;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
|
||||
0 2px 4px -2px rgba(0, 0, 0, 0.1);
|
||||
|
||||
.nav {
|
||||
padding-left: 252px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 1130px;
|
||||
// position: relative;
|
||||
a {
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
.nav-item {
|
||||
font-size: 16px;
|
||||
font-family: "JCuYuan";
|
||||
// font-weight: 400;
|
||||
position: relative;
|
||||
font-weight: 800;
|
||||
transition-property: color;
|
||||
transition-duration: 0.15s;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
color: #ccc;
|
||||
}
|
||||
.duration-200 {
|
||||
transition-duration: 0.2s;
|
||||
}
|
||||
.nav-item:hover {
|
||||
transition-property: color;
|
||||
transition-duration: 0.15s;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
color: rgba(31, 200, 255, 1);
|
||||
}
|
||||
.nav-item::after {
|
||||
content: "";
|
||||
height: 7px;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
left: -7%;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
width: 120%;
|
||||
// background: #1fc8ff;
|
||||
background: url("../assets/img/home/nav-boder.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
transform: scaleX(0);
|
||||
transition: all 1s;
|
||||
}
|
||||
.nav-item:hover::after {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
.active-nav-item {
|
||||
font-size: 16px;
|
||||
font-family: "JCuYuan";
|
||||
// font-weight: 400;
|
||||
position: relative;
|
||||
font-weight: 800;
|
||||
transition-property: color;
|
||||
transition-duration: 1s;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
color: #1fc8ff;
|
||||
}
|
||||
|
||||
.active-nav-item::after {
|
||||
content: "";
|
||||
height: 8px;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
left: -7%;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
width: 120%;
|
||||
// background: #1fc8ff;
|
||||
background: url("../assets/img/home/nav-boder.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
transform: scaleX(0);
|
||||
transition: all 1s;
|
||||
}
|
||||
.active-nav-item::after {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
// .header-top {
|
||||
// position: relative;
|
||||
// }
|
||||
.login-btn-active {
|
||||
position: relative;
|
||||
}
|
||||
.login-btn {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: 170px;
|
||||
height: 69px;
|
||||
cursor: pointer;
|
||||
background: url("../assets/img/home/login-btn.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
z-index: 0;
|
||||
transition: background-image 1s;
|
||||
// transition:background-image 1s linear;
|
||||
// transform: scaleX(1);
|
||||
// transition: all 0.15s;
|
||||
// transition-property: background;
|
||||
// transition-duration: 0.15s;
|
||||
// transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.login-btn::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
opacity: 0;
|
||||
// transition: 0.5s;
|
||||
background: url("../assets/img/home/login-active.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
transform: scaleX(0);
|
||||
transition: all 0.5s ease-in-out;
|
||||
z-index: -1;
|
||||
// transition:background-image 1s linear;
|
||||
// transform: scaleX(0.98);
|
||||
}
|
||||
.login-btn:hover:after {
|
||||
opacity: 1;
|
||||
transition: all 0.5s ease-in-out;
|
||||
transform: scaleX(1);
|
||||
}
|
||||
.login-btn:active:after {
|
||||
opacity: 1;
|
||||
transform: scaleX(1);
|
||||
}
|
||||
</style>
|
||||
14
src/main.js
14
src/main.js
@ -5,18 +5,6 @@ import 'normalize.css';
|
||||
import { createPinia } from "pinia";
|
||||
import router from "./router/index";
|
||||
import App from './App.vue'
|
||||
// if (process.env.NODE_ENV === 'development') {
|
||||
// const devConfig = await import('./config/dev')
|
||||
// // 使用开发环境的配置
|
||||
// app.config.globalProperties.$config = devConfig.default
|
||||
// } else if (process.env.NODE_ENV === 'testing') {
|
||||
// const testConfig = await import('./config/test')
|
||||
// // 使用测试环境的配置
|
||||
// app.config.globalProperties.$config = testConfig.default
|
||||
// } else if (process.env.NODE_ENV === 'production') {
|
||||
// const prodConfig = await import('./config/prod')
|
||||
// // 使用生产环境的配置
|
||||
// app.config.globalProperties.$config = prodConfig.default
|
||||
// }
|
||||
|
||||
const app = createApp(App);
|
||||
app.use(createPinia()).use(router).mount('#app')
|
||||
|
||||
@ -1,23 +1,6 @@
|
||||
<template>
|
||||
<div class="home-box">
|
||||
<div class="header header-top">
|
||||
<div class="nav">
|
||||
<a
|
||||
:href="nav.path"
|
||||
|
||||
class="nav-item duration-200"
|
||||
v-for="(nav, i) in navList"
|
||||
:class="i == curentid ? 'active-nav-item' : ''"
|
||||
:key="i"
|
||||
@click="handNavCurent(i)"
|
||||
>
|
||||
<span> {{ nav.name }}</span></a
|
||||
>
|
||||
<div class="login-btn login-btn-active">
|
||||
<!-- <img src="../assets/img/home/login-btn.png" alt="" /> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<NavBar></NavBar>
|
||||
<div class="banner">
|
||||
<div class="content">
|
||||
<div class="sologan">
|
||||
@ -337,113 +320,22 @@
|
||||
<card></card>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div class="content">
|
||||
<div class="cooperation-logo">
|
||||
<a href="#" class="hashkey">
|
||||
<img src="../assets/img/home/logo/hashkey.png" alt=""
|
||||
/></a>
|
||||
<a href="#" class="snz">
|
||||
<img src="../assets/img/home/logo/snz.png" alt=""
|
||||
/></a>
|
||||
<a href="#" class="initiate">
|
||||
<img src="../assets/img/home/logo/initiate-catital.png" alt=""
|
||||
/></a>
|
||||
<a href="#" class="kernel">
|
||||
<img src="../assets/img/home/logo/kernel.png" alt=""
|
||||
/></a>
|
||||
<a href="#" class="betterversedao">
|
||||
<img src="../assets/img/home/logo/betterversedao.png" alt=""
|
||||
/></a>
|
||||
<a href="#" class="youbiocapital">
|
||||
<img src="../assets/img/home/logo/youbiocapital.png" alt=""
|
||||
/></a>
|
||||
<a href="#" class="kucoin">
|
||||
<img src="../assets/img/home/logo/kucoin.png" alt=""
|
||||
/></a>
|
||||
<a href="#" class="capltal">
|
||||
<img src="../assets/img/home/logo/capltal.png" alt=""
|
||||
/></a>
|
||||
<a href="#" class="grs">
|
||||
<img src="../assets/img/home/logo/grs.png" alt=""
|
||||
/></a>
|
||||
</div>
|
||||
<div class="footer-logo">
|
||||
<div class="go-start"></div>
|
||||
<div class="go-content">
|
||||
<!-- <img src="../assets/img/home/logo.png" alt="" /> -->
|
||||
</div>
|
||||
<div class="go-top">
|
||||
<div class="rise-top" @click="backTop">
|
||||
<div class="rise-title">RISE TO THE TOP</div>
|
||||
<div><img src="../assets/img/home/rise.jpg" alt="" /></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-img-top">
|
||||
<div class="center">
|
||||
<img src="../assets/img/home/footer-boder.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-about">
|
||||
<div class="about-lable-child">
|
||||
<div class="child-item">
|
||||
<a href="#" class="about-item-title">PRODUCT</a>
|
||||
<a href="#" class="about-item">Home</a>
|
||||
<a href="#/about" class="about-item">Gameplay</a>
|
||||
<a href="#" class="about-item">Tokenomic</a>
|
||||
<a href="#" class="about-item">NFT</a>
|
||||
<a href="#" class="about-item">Marketplace</a>
|
||||
</div>
|
||||
<div class="child-item">
|
||||
<a href="/about" class="about-item-title">RESOURCES</a>
|
||||
<a href="#" class="about-item">Whitepaper</a>
|
||||
</div>
|
||||
<div class="child-item">
|
||||
<a href="#" class="about-item-title">ABOUT</a>
|
||||
<a href="#" class="about-item">Team</a>
|
||||
<a href="#" class="about-item">Roadmp</a>
|
||||
</div>
|
||||
<div class="child-item">
|
||||
<a href="#" class="about-item-title">POLICIES</a>
|
||||
<a href="#" class="about-item">Terms of use</a>
|
||||
<a href="#" class="about-item">Privacy Policy</a>
|
||||
</div>
|
||||
<div class="child-item">
|
||||
<a href="#" class="about-item-title">CONTACT US</a>
|
||||
<a href="#" class="about-item">contact@cebg,games</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-bottom">
|
||||
<div class="mailbox">COPYRIGHT © CEBG.ALL RIGHTS RESERVED.</div>
|
||||
<div class="follow">
|
||||
<a href="#" class="twiter">
|
||||
<img src="../assets/img/home/logo/twiter.png" alt=""
|
||||
/></a>
|
||||
<a href="#" class="telegram">
|
||||
<img src="../assets/img/home/logo/telegram.png" alt=""
|
||||
/></a>
|
||||
<a href="#" class="dosccord">
|
||||
<img src="../assets/img/home/logo/doscord.png" alt=""
|
||||
/></a>
|
||||
</div>
|
||||
</div>
|
||||
</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";
|
||||
// 引入swiper组件
|
||||
import { Swiper, SwiperSlide } from "swiper/vue";
|
||||
// 引入swiper样式（按需导入）
|
||||
import "swiper/css";
|
||||
@ -453,28 +345,10 @@ import "swiper/css/scrollbar"; // 轮播图的滚动条
|
||||
// 引入swiper核心和所需模块
|
||||
import { Autoplay, Pagination, Navigation, Scrollbar } from "swiper";
|
||||
|
||||
// 在modules加入要使用的模块
|
||||
// import { httpGet } from "@/api/http.js";
|
||||
|
||||
const modules = [Autoplay, Pagination, Navigation, Scrollbar];
|
||||
const rotate = ref(0);
|
||||
|
||||
const router = useRouter();
|
||||
// const store = useStore();
|
||||
|
||||
|
||||
const navList = reactive([
|
||||
{ name: "HOME", path: "/home" },
|
||||
{ name: "ABOUT", path: "#/about" },
|
||||
{ name: "GALLERY", path: "/news" },
|
||||
{ name: "MARKETPLACE", path: "/marketpalce" },
|
||||
{ name: "CONTACT US", path: "/contact" },
|
||||
]);
|
||||
const curentid = ref(0);
|
||||
//发送请求
|
||||
function handNavCurent(i) {
|
||||
curentid.value = i;
|
||||
}
|
||||
const btnShow = ref(false);
|
||||
const positionY1 = ref(0); //背景Y轴偏移量
|
||||
const Y1 = ref(0);
|
||||
@ -487,36 +361,7 @@ onMounted(() => {
|
||||
let bgTest = document.getElementById("bgTest");
|
||||
Y1.value = bgTest.offsetTop * ratio.value;
|
||||
});
|
||||
// let timer = null;
|
||||
// function backTop() {
|
||||
// timer = setInterval(function () {
|
||||
// let backTop =
|
||||
// window.pageYOffset ||
|
||||
// document.documentElement.scrollTop ||
|
||||
// document.body.scrollTop;
|
||||
// let speedTop = backTop / 10;
|
||||
// document.documentElement.scrollTop = backTop - speedTop;
|
||||
// if (backTop === 0) {
|
||||
// clearInterval(timer);
|
||||
// }
|
||||
// }, 10);
|
||||
// }
|
||||
// function scrollToTop() {
|
||||
// let pageLookHeight =
|
||||
// document.documentElement.clientHeight || document.body.clientHeight;
|
||||
// let scroll = document.documentElement.scrollTop;
|
||||
// btnShow.value = scroll >= pageLookHeight * 0.618;
|
||||
// }
|
||||
|
||||
// function handleScroll() {
|
||||
// let 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");
|
||||
// }
|
||||
const handTabActive = (isTab) => {
|
||||
isPveTab.value = isTab;
|
||||
};
|
||||
@ -549,148 +394,7 @@ function handleScroll() {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
.header {
|
||||
position: fixed;
|
||||
z-index: 10;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: rgb(255, 255, 255);
|
||||
width: 100%;
|
||||
// height: 60px;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
|
||||
0 2px 4px -2px rgba(0, 0, 0, 0.1);
|
||||
|
||||
.nav {
|
||||
padding-left: 252px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 1130px;
|
||||
// position: relative;
|
||||
a {
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
.nav-item {
|
||||
font-size: 16px;
|
||||
font-family: "JCuYuan";
|
||||
// font-weight: 400;
|
||||
position: relative;
|
||||
font-weight: 800;
|
||||
transition-property: color;
|
||||
transition-duration: 0.15s;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
color: #ccc;
|
||||
}
|
||||
.duration-200 {
|
||||
transition-duration: 0.2s;
|
||||
}
|
||||
.nav-item:hover {
|
||||
transition-property: color;
|
||||
transition-duration: 0.15s;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
color: rgba(31, 200, 255, 1);
|
||||
}
|
||||
.nav-item::after {
|
||||
content: "";
|
||||
height: 7px;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
left: -7%;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
width: 120%;
|
||||
// background: #1fc8ff;
|
||||
background: url("../assets/img/home/nav-boder.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
transform: scaleX(0);
|
||||
transition: all 1s;
|
||||
}
|
||||
.nav-item:hover::after {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
.active-nav-item {
|
||||
font-size: 16px;
|
||||
font-family: "JCuYuan";
|
||||
// font-weight: 400;
|
||||
position: relative;
|
||||
font-weight: 800;
|
||||
transition-property: color;
|
||||
transition-duration: 1s;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
color: #1fc8ff;
|
||||
}
|
||||
|
||||
.active-nav-item::after {
|
||||
content: "";
|
||||
height: 8px;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
left: -7%;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
width: 120%;
|
||||
// background: #1fc8ff;
|
||||
background: url("../assets/img/home/nav-boder.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
transform: scaleX(0);
|
||||
transition: all 1s;
|
||||
}
|
||||
.active-nav-item::after {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
// .header-top {
|
||||
// position: relative;
|
||||
// }
|
||||
.login-btn-active {
|
||||
position: relative;
|
||||
}
|
||||
.login-btn {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: 170px;
|
||||
height: 69px;
|
||||
cursor: pointer;
|
||||
background: url("../assets/img/home/login-btn.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
z-index: 0;
|
||||
transition: background-image 1s;
|
||||
// transition:background-image 1s linear;
|
||||
// transform: scaleX(1);
|
||||
// transition: all 0.15s;
|
||||
// transition-property: background;
|
||||
// transition-duration: 0.15s;
|
||||
// transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.login-btn::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
opacity: 0;
|
||||
// transition: 0.5s;
|
||||
background: url("../assets/img/home/login-active.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
transform: scaleX(0);
|
||||
transition: all 0.5s ease-in-out;
|
||||
z-index: -1;
|
||||
// transition:background-image 1s linear;
|
||||
// transform: scaleX(0.98);
|
||||
}
|
||||
.login-btn:hover:after {
|
||||
opacity: 1;
|
||||
transition: all 0.5s ease-in-out;
|
||||
transform: scaleX(1);
|
||||
}
|
||||
.login-btn:active:after {
|
||||
opacity: 1;
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
|
||||
.what-cebg {
|
||||
// background: rgba(38, 54, 67, 1);
|
||||
// background:url('../assets/img/home/what-bg.jpg') no-repeat;
|
||||
@ -1482,284 +1186,6 @@ function handleScroll() {
|
||||
}
|
||||
}
|
||||
}
|
||||
.footer {
|
||||
width: 100%;
|
||||
|
||||
.content {
|
||||
padding-top: 133px;
|
||||
max-width: 1440px;
|
||||
margin: 0 auto;
|
||||
.cooperation-logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
-webkit-filter: grayscale(100%);
|
||||
filter: grayscale(100%);
|
||||
.hashkey {
|
||||
width: 112px;
|
||||
height: 18px;
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
.snz {
|
||||
width: 67px;
|
||||
height: 37px;
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
.initiate {
|
||||
width: 116px;
|
||||
height: 38px;
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
.kernel {
|
||||
width: 113px;
|
||||
height: 39px;
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
.betterversedao {
|
||||
width: 119px;
|
||||
height: 29px;
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
.youbiocapital {
|
||||
width: 93px;
|
||||
height: 55px;
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
.capltal {
|
||||
width: 137px;
|
||||
height: 35px;
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
.kucoin {
|
||||
width: 95px;
|
||||
height: 29px;
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
.grs {
|
||||
width: 95px;
|
||||
height: 29px;
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
.content-img-top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-top: 36px;
|
||||
.center {
|
||||
width: 100%;
|
||||
height: 26px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
.footer-logo {
|
||||
padding-top: 75px;
|
||||
display: flex;
|
||||
justify-content: stretch;
|
||||
.go-start {
|
||||
flex: 1;
|
||||
}
|
||||
.go-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
img {
|
||||
width: 132px;
|
||||
height: 127px;
|
||||
}
|
||||
}
|
||||
.go-top {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
.rise-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
font-family: Arial;
|
||||
font-weight: bold;
|
||||
color: #000000;
|
||||
.rise-title {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer-about {
|
||||
padding-top: 40px;
|
||||
.about-lable {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-bottom: 40px;
|
||||
border-bottom: 1px solid #d0d0d0;
|
||||
a {
|
||||
font-size: 20px;
|
||||
font-family: Arial;
|
||||
font-weight: bold;
|
||||
color: #000000;
|
||||
font-weight: 900;
|
||||
text-transform: uppercase;
|
||||
transition-property: color;
|
||||
transition-duration: 0.15s;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
a:hover {
|
||||
font-size: 20px;
|
||||
font-family: Arial;
|
||||
font-weight: 900;
|
||||
text-transform: uppercase;
|
||||
transition-property: color;
|
||||
transition-duration: 0.15s;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
color: #1fc8ff;
|
||||
}
|
||||
.about-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
.about-lable-child {
|
||||
display: flex;
|
||||
position: relative;
|
||||
justify-content: space-evenly;
|
||||
// align-items: center;
|
||||
padding-bottom: 24px;
|
||||
margin-top: 40px;
|
||||
|
||||
.child-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
// justify-content: space-between;
|
||||
// align-items: center;
|
||||
|
||||
flex-direction: column;
|
||||
a {
|
||||
font-size: 18px;
|
||||
margin-bottom: 46px;
|
||||
font-family: Arial;
|
||||
font-weight: bold;
|
||||
color: #6a6d74;
|
||||
transition-property: color;
|
||||
transition-duration: 0.15s;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
a:hover {
|
||||
font-size: 18px;
|
||||
margin-bottom: 46px;
|
||||
font-family: Arial;
|
||||
font-weight: bold;
|
||||
color: #1fc8ff;
|
||||
transition-property: color;
|
||||
transition-duration: 0.15s;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.about-item-title {
|
||||
font-size: 20px;
|
||||
font-family: Arial;
|
||||
font-weight: bold;
|
||||
color: #000000;
|
||||
font-weight: 900;
|
||||
padding-bottom: 14px;
|
||||
// text-transform: uppercase;
|
||||
transition-property: color;
|
||||
transition-duration: 0.15s;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.about-item-title:hover {
|
||||
font-size: 20px;
|
||||
font-family: Arial;
|
||||
font-weight: 900;
|
||||
// text-transform: uppercase;
|
||||
transition-property: color;
|
||||
transition-duration: 0.15s;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
color: #1fc8ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.about-lable-child::after {
|
||||
content: "";
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
left: 0;
|
||||
top: 46px;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
background: #d0d0d0;
|
||||
}
|
||||
.footer-bottom {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 46px;
|
||||
.mailbox {
|
||||
font-size: 18px;
|
||||
font-family: Arial;
|
||||
font-weight: bold;
|
||||
color: #797979;
|
||||
}
|
||||
.follow {
|
||||
display: flex;
|
||||
a {
|
||||
margin-left: 29px;
|
||||
}
|
||||
.twiter {
|
||||
img {
|
||||
width: 47px;
|
||||
height: 34px;
|
||||
}
|
||||
}
|
||||
.dosccord {
|
||||
img {
|
||||
width: 47px;
|
||||
height: 34px;
|
||||
}
|
||||
}
|
||||
.telegram {
|
||||
img {
|
||||
width: 37px;
|
||||
height: 37px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user