<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>
