436 lines
11 KiB
Vue
436 lines
11 KiB
Vue
<template>
|
|
<div>
|
|
<div class="footer">
|
|
<div class="footer-top">
|
|
<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>
|
|
<div class="content">
|
|
<div class="follow-content">
|
|
<div></div>
|
|
<div class="follow">
|
|
<a href="https://twitter.com/_CounterFire" class="twiter">
|
|
<!-- <img src="../../assets/img/home/logo/twiter.png" alt="" /> -->
|
|
</a>
|
|
<!-- <a href="https://t.me/CEBG_official" class="telegram">
|
|
|
|
</a> -->
|
|
<a href="https://discord.com/invite/fNSn2NHUvf" class="dosccord">
|
|
<!-- <img src="../../assets/img/home/logo/discord.png" alt="" /> -->
|
|
</a>
|
|
</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.png" 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-logo">
|
|
<!-- <div class="go-start"></div> -->
|
|
<div class="go-content">
|
|
<img src="@/assets/img/home/logo.png" alt="" />
|
|
</div>
|
|
</div>
|
|
<div class="footer-bottom">
|
|
<div class="mailbox">
|
|
COPYRIGHT © Candy Bubble Global Limited.ALL RIGHTS RESERVED.
|
|
</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%;
|
|
// padding-top: 47px;
|
|
background-color: #000000;
|
|
.footer-top {
|
|
// padding-top: 47px;
|
|
background-color: #1d1d1d;
|
|
height: 123px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
.cooperation-logo {
|
|
width: 1440px;
|
|
// margin: 0 auto;
|
|
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 {
|
|
// padding-top: 133px;
|
|
max-width: 1440px;
|
|
margin: 0 auto;
|
|
|
|
.follow-content {
|
|
display: flex;
|
|
padding-top: 30px;
|
|
align-items: center;
|
|
.go-top {
|
|
// flex: 1;
|
|
display: flex;
|
|
margin-left: 413px;
|
|
// align-items: center;
|
|
// justify-content: flex-end;
|
|
.rise-top {
|
|
display: flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
font-family: "Poppins";
|
|
font-weight: bold;
|
|
color: rgba(255, 186, 0, 1);
|
|
.rise-title {
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
}
|
|
.twiter {
|
|
width: 48px;
|
|
height: 48px;
|
|
background: url("../../assets/img/home/logo/twiter.png") no-repeat;
|
|
background-size: contain;
|
|
// img {
|
|
// width: 47px;
|
|
// height: 34px;
|
|
// }
|
|
&:hover {
|
|
width: 48px;
|
|
height: 48px;
|
|
background: url("../../assets/img/home/logo/twiter-active.png") no-repeat;
|
|
background-size: contain;
|
|
}
|
|
}
|
|
// .twiter:hover {
|
|
// width: 47px;
|
|
// height: 34px;
|
|
// background: url("../../assets/svg/google-play-red.svg") no-repeat;
|
|
// background-size: contain;
|
|
// }
|
|
|
|
.dosccord {
|
|
width: 48px;
|
|
height: 48px;
|
|
background: url("../../assets/img/home/logo/discord.png") no-repeat;
|
|
background-size: contain;
|
|
}
|
|
.dosccord:hover {
|
|
width: 48px;
|
|
height: 48px;
|
|
background: url("../../assets/img/home/logo/discord-active.png") no-repeat;
|
|
background-size: contain;
|
|
}
|
|
.telegram {
|
|
width: 48px;
|
|
height: 48px;
|
|
background: url("../../assets/img/home/logo/telegram.png") no-repeat;
|
|
background-size: contain;
|
|
}
|
|
.telegram:hover {
|
|
width: 48px;
|
|
height: 48px;
|
|
background: url("../../assets/img/home/logo/telegram-active.png") no-repeat;
|
|
background-size: contain;
|
|
}
|
|
}
|
|
.follow {
|
|
// padding-top: 30px;
|
|
width: 130px;
|
|
display: flex;
|
|
margin-left: 670px;
|
|
justify-content: space-between;
|
|
// margin: 0 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: 188px;
|
|
height: 44px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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-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 {
|
|
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: 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: #f8f8f8;
|
|
}
|
|
.footer-bottom {
|
|
display: flex;
|
|
padding-bottom: 69px;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
.mailbox {
|
|
padding-top: 30px;
|
|
font-size: 15px;
|
|
font-family: "Poppins";
|
|
font-weight: bold;
|
|
color: #7b7979;
|
|
}
|
|
.follow {
|
|
display: flex;
|
|
a {
|
|
margin-left: 29px;
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.follow a:hover svg {
|
|
fill: red;
|
|
}
|
|
</style>
|