CounterFireGames/src/components/about/AboutFooter.vue

<template>
  <div class="follow-container">
    <div class="follow-content">
      <img
        class="background-img"
        src="../../assets/img/about/gameWeb_aboutP5_bg.png"
        alt=""
      />
      <div class="whitepaper">
        <div class="title">Whitepaper</div>
        <div class="slogan">
          <a href="https://counterfire-whitepaper.gitbook.io/counterfire-whitepaper" target="_blank"
            >Learn more about our studio mission >></a
          >
        </div>
      </div>
    </div>

    <div class="partner-logos">
      <!-- 使用v-for循环渲染伙伴的logo -->
      <img v-for="logo in logos" :src="logo.imgeSrc" class="partner-logo" :key="logo.imgeSrc" />
    </div>

    <div class="footer">
      <div class="copyright">
        <div>
          <a href="#">
            <img src="../../assets/img/home/game_logo02.png" alt=""
          /></a>
        </div>
        <div class="footer-text">
          ©  2024 Counter Fire All Rights Reserved.
        </div>
      </div>

      <div class="footer-links">
        <div><a href="/privacy">Privacy Policy</a><a href="/terms">Terms of use</a></div>
        <div class="go-top" @click="backTop">
          <img src="../../assets/img/home/gotoTop.png" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
const logos = ref([
  {
    imgeSrc: new URL("@/assets/img/home/investor_hashkey.png", import.meta.url)
      .href,
  },
  {
    imgeSrc: new URL("@/assets/img/home/investor_snz.png", import.meta.url)
      .href,
  },
  {
    imgeSrc: new URL(
      "@/assets/img/home/investor_initiate-catita.png",
      import.meta.url
    ).href,
  },
  {
    imgeSrc: new URL("@/assets/img/home/investor_kernel.png", import.meta.url)
      .href,
  },
  {
    imgeSrc: new URL(
      "@/assets/img/home/investor_betterversedao.png",
      import.meta.url
    ).href,
  },
  {
    imgeSrc: new URL(
      "@/assets/img/home/investor_YOUBICAPITAL.png",
      import.meta.url
    ).href,
  // },
  // {
  //   imgeSrc: new URL("@/assets/img/home/investor_kucoin.png", import.meta.url)
  //     .href,
  },
  {
    imgeSrc: new URL("@/assets/img/home/investor_A&T.png", import.meta.url)
      .href,
  },
  {
    imgeSrc: new URL("@/assets/img/home/investor_GSR.png", import.meta.url)
      .href,
  },
  {
    imgeSrc: new URL("@/assets/img/home/investor_lmmutable.png", import.meta.url)
      .href,
  },
  {
    imgeSrc: new URL("@/assets/img/home/investor_LiquidX.png", import.meta.url)
      .href,
  },
  {
    imgeSrc: new URL("@/assets/img/home/investor_Foresight.png", import.meta.url)
      .href,
  }
]);
const emit = defineEmits(["goToSlide"]);

function backTop() {
  emit("goToSlide", 0);
}
</script>

<style lang="scss" scoped>
.follow-container {
  font-family: "Arial", sans-serif;
  //   background-color: #1c1c1c; // 你的背景颜色
  width: 100%;
  height: 100%;
  background: #0e0e0e;

  padding-top: 84px;
}
.follow-content {
  padding-left: 213px;
  padding-right: 386px;
  height: 468px;
  display: flex;
  padding-top: 190px;
  justify-content: flex-end;
  // padding-bottom: 80px;
  position: relative;

  z-index: 1;
  .background-img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    object-fit: cover;
  }
}
.whitepaper {
  text-align: left;
  line-height: 60px;
  .title {
    font-size: 72px;
    font-family: "Anton";
    font-weight: 400;
    color: #BB7FFF;
  }
  .slogan {
    a {
      font-size: 36px;
      font-family: "Poppins-Regular";
      font-weight: 400;
      color: #f3f0ff;
    }
  }
}
.follow-us {
  .follow--title-img {
    //margin-top: 17px;
    padding-top: 17px;
  }

 
}

.partner-logos {
  display: flex;
  // gap: 66px;
  width: 100%;
  background: #342d3b;

  padding-top: 31px;
  padding-bottom: 31px;
  padding-left: 64px;
  padding-right: 64px;
  align-items: center;
  justify-content: space-between;

  .partner-logo {
    height: 28px; // Set a fixed height for all logos
    width: auto; // Let the width adjust based on the log
    &:nth-child(1) {
      width: 112px;
      height: 18px;
    }
    &:nth-child(2) {
      width: 67px;
      height: 37px;
    }
    &:nth-child(3) {
      width: 107px;
      height: 29px;
    }
    &:nth-child(4) {
      width: 104px;
      height: 30px;
    }
    &:nth-child(5) {
      width: 119px;
      height: 29px;
    }
    &:nth-child(6) {
      width: 93px;
      height: 55px;
    }
    &:nth-child(7) {
      width: 137px;
      height: 35px;
    }
    &:nth-child(8) {
      width: 133px;
      height: 22px;
    }
    &:nth-child(9) {
      width: 157px;
      height: 35px;
    }
    &:nth-child(10) {
      width: 120px;
      height: 20px;
    }
    &:nth-child(11) {
      width: 106px;
      height: 23px;
    }
  }
}

.footer {
  display: flex;
  //   margin-top: 120px;
  padding-top: 120px;
  padding-left: 213px;
  height: 281px;
  padding-right: 213px;
  padding-bottom: 120px;
  background: #1d1924;
  justify-content: space-between;
  align-items: center;

  .copyright {
    font-size: 20px;
    font-family: "Poppins";
    font-weight: 400;
    color: #7E7686;
    display: flex;
    gap: 58px;
    align-items: center;
    .footer-text {
      padding-top: 10px;
    }
    img {
      width: 235px;
      height: 51px;
    }
    .span {
      margin-left: 10px;
    }
  }

  .footer-links {
    display: flex;
    align-items: center;
    margin-top: 10px;
    a {
      color: #fff;
      font-size: 20px;
      font-family: "Poppins";
      font-weight: bold;
      text-decoration: none;
      margin: 0 0.5rem;
      text-decoration: underline;
      &:hover {
        color: #b87aff;
        font-size: 20px;
        font-family: "Poppins";
        font-weight: bold;
      }
    }
  }
  .go-top {
    cursor: pointer;
    margin-left: 128px;
    width: 119px;
    height: 120px;
    img{
      width: 100%;
      height: 100%;
    }
  }
}
</style>