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