413 lines
10 KiB
Vue
413 lines
10 KiB
Vue
<template>
|
|
<div>
|
|
<div class="footer">
|
|
<div class="content">
|
|
<div class="cooperation-logo">
|
|
<a href="#" class="snz">
|
|
<img src="@/assets/img/mobile-home/footer/snz.png" alt=""
|
|
/></a>
|
|
<a href="#" class="initiate">
|
|
<img src="@/assets/img/mobile-home/footer/initiate-catital.png" alt=""
|
|
/></a>
|
|
<a href="#" class="kernel">
|
|
<img src="@/assets/img/mobile-home/footer/kernel.png" alt=""
|
|
/></a>
|
|
<a href="#" class="betterversedao">
|
|
<img src="@/assets/img/mobile-home/footer/betterversedao.png" alt=""
|
|
/></a>
|
|
<a href="#" class="hashkey">
|
|
<img src="@/assets/img/mobile-home/footer/hashkey.png" alt=""
|
|
/></a>
|
|
</div>
|
|
<div class="cooperation-logo">
|
|
<a href="#" class="youbiocapital">
|
|
<img src="@/assets/img/mobile-home/footer/YOUBI.png" alt=""
|
|
/></a>
|
|
<a href="#" class="kucoin">
|
|
<img src="@/assets/img/mobile-home/footer/kucoin.png" alt=""
|
|
/></a>
|
|
<a href="#" class="capltal">
|
|
<img src="@/assets/img/mobile-home/footer/AT.png" alt=""
|
|
/></a>
|
|
<a href="#" class="grs">
|
|
<img src="@/assets/img/mobile-home/footer/GSR.png" alt=""
|
|
/></a>
|
|
</div>
|
|
<div class="content-img-top">
|
|
<div class="center">
|
|
<img src="@/assets/img/mobile-home/footer-title-boder.png" alt="" />
|
|
</div>
|
|
</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/mobile-home/top-icon.png" alt="" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="footer-bottom">
|
|
<div class="follow">
|
|
<a href="https://discord.gg/8dWX6jpcME" class="dosccord">
|
|
<img src="@/assets/svg/discord.svg" alt=""
|
|
/></a>
|
|
<a href="https://t.me/CEBG_official" class="telegram">
|
|
<img src="@/assets/svg/telegram.svg" alt=""
|
|
/></a>
|
|
<a href="https://twitter.com/CEBG_GAME" class="twiter">
|
|
<img src="@/assets/svg/twitter.svg" alt=""
|
|
/></a>
|
|
</div>
|
|
<div class="mailbox">COPYRIGHT © CEBG.ALL RIGHTS RESERVED.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref ,onMounted,onUnmounted} from "vue";
|
|
const scrollTop = ref(0)
|
|
const btnFlag = ref(false)
|
|
|
|
function backTop() {
|
|
let timer = setInterval(() => {
|
|
let ispeed = Math.floor(-scrollTop.value / 5)
|
|
document.documentElement.scrollTop = document.body.scrollTop = scrollTop.value + ispeed
|
|
if (scrollTop.value === 0) {
|
|
clearInterval(timer)
|
|
}
|
|
}, 16)
|
|
}
|
|
|
|
function scrollToTop() {
|
|
scrollTop.value = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
|
|
if (scrollTop.value > 60) {
|
|
btnFlag.value = true
|
|
} else {
|
|
btnFlag.value = false
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
window.addEventListener('scroll', scrollToTop)
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
window.removeEventListener('scroll', scrollToTop)
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.footer {
|
|
width: 100%;
|
|
// position: fixed;
|
|
// bottom: 0;
|
|
// left: 0;
|
|
// right: 0;
|
|
padding-top: 59px;
|
|
background-color: #f1f1f1;
|
|
.content {
|
|
// padding-top: 133px;
|
|
max-width: 1440px;
|
|
margin: 0 auto;
|
|
.cooperation-logo {
|
|
display: flex;
|
|
width: 90%;
|
|
margin: 0 auto;
|
|
padding-bottom: 40px;
|
|
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: 691px;
|
|
height: 64px;
|
|
margin: 0 auto;
|
|
img {
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
}
|
|
}
|
|
.footer-logo {
|
|
width: 100%;
|
|
padding-top: 52px;
|
|
// display: flex;
|
|
// justify-content: stretch;
|
|
.go-start {
|
|
flex: 1;
|
|
}
|
|
.go-content {
|
|
flex: 1;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
img {
|
|
width: 131px;
|
|
height: 127px;
|
|
}
|
|
padding-bottom: 89px;
|
|
}
|
|
.go-top {
|
|
flex: 1;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding-bottom: 144px;
|
|
.rise-top {
|
|
display: flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
// font-size: 18px;
|
|
// font-family: Arial;
|
|
// font-weight: 900;
|
|
// color: #000000;
|
|
.rise-title {
|
|
margin-right: 5px;
|
|
font-size: 28px;
|
|
font-family: Arial;
|
|
font-weight: 900;
|
|
color: #000000;
|
|
}
|
|
}
|
|
img {
|
|
margin-left: 29px;
|
|
width: 66px;
|
|
height: 66px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.footer-about {
|
|
padding-top: 102px;
|
|
.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;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
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 {
|
|
margin-bottom: 46px;
|
|
font-size: 30px;
|
|
font-family: Arial;
|
|
font-weight: bold;
|
|
color: #000000;
|
|
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: rgba(215, 68, 88, 1);
|
|
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: rgba(215, 68, 88, 1);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// .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;
|
|
flex-direction: column;
|
|
padding-bottom: 46px;
|
|
.mailbox {
|
|
font-size: 18px;
|
|
font-family: Arial;
|
|
font-weight: bold;
|
|
color: #797979;
|
|
}
|
|
.follow {
|
|
display: flex;
|
|
padding-bottom: 120px;
|
|
a {
|
|
margin-left: 29px;
|
|
}
|
|
.twiter {
|
|
img {
|
|
width: 54px;
|
|
height: 44px;
|
|
}
|
|
}
|
|
.dosccord {
|
|
img {
|
|
width: 57px;
|
|
height: 44px;
|
|
}
|
|
}
|
|
.telegram {
|
|
img {
|
|
width: 52px;
|
|
height: 44px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|