bemarket/src/components/mobile/main/MobileFooter.vue

<template>
  <footer class="footer" >
    <div class="community-bar">
      <div class="title">JOIN OUR COMMUNITY</div>
      <div class="icon-list">
        <a href="https://discord.gg/8dWX6jpcME">
          <img src="@/assets/202202/discord-logo-color@2x.png" alt="discord"/>
        </a>
        <a href="https://t.me/CEBG_official">
          <img src="@/assets/202202/telegram-logo@2x.png" alt="telegram"/>
        </a>
        <a href="https://twitter.com/CebgGame">
          <img src="@/assets/202202/logowhite@2x.png" alt="twitter"/>
        </a>
      </div>
    </div>
    <div class="link-list">
      <div class="sub-list" :class="{'close': status[0]}">
        <div class="title" @click="toggleSublist(0)">
          <div>Product</div>
          <img class="btn-plus" src="@/assets/mobile/index/icon-plus.png" alt="plus"/>
        </div>
        <a href="/">Home</a>
        <a href="/gameplay/index.html">Gameplay</a>
        <a href="/tokenomic/index.html">Tokenomic</a>
        <a href="/nft/index.html">NFT</a>
        <a href="javascript:void(0);" @click="comingSoon">Marketplace</a>
      </div>
      <div class="sub-list" :class="{'close': status[1]}">
        <div class="title" @click="toggleSublist(1)">
          <div>Resources</div>
          <img class="btn-plus" src="@/assets/mobile/index/icon-plus.png" alt="plus"/>
        </div>
        <a href="https://whitepaper.cebg.games/">Whitepaper</a>
      </div>
      <div class="sub-list" :class="{'close': status[2]}">
        <div class="title" @click="toggleSublist(2)">
          <div>About</div>
          <img class="btn-plus" src="@/assets/mobile/index/icon-plus.png" alt="plus"/>
        </div>
        <a href="javascript:void(0);" @click="comingSoon">About</a>
        <a href="/roadmap/index.html" >Roadmap</a>
      </div>
      <div class="sub-list" :class="{'close': status[3]}">
        <div class="title" @click="toggleSublist(3)">
          <div>Policies</div>
          <img class="btn-plus" src="@/assets/mobile/index/icon-plus.png" alt="plus"/>
        </div>
        <a href="javascript:void(0);">Terms of use</a>
        <a href="javascript:void(0);" @click="comingSoon">Privacy Policy</a>
      </div>
      <div class="sub-list" :class="{'close': status[4]}">
        <div class="title" @click="toggleSublist(4)">
          <div>Contact us</div>
          <img class="btn-plus" src="@/assets/mobile/index/icon-plus.png" alt="plus"/>
        </div>
        <a href="mailto:contact@cebg.games">contact@cebg.games</a>
      </div>
    </div>
    <div class="copy-right">
      Copyright &copy; CEBG. All rights reserved.
    </div>
  </footer>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

@Component({
  name: 'MobileFooter',
  components: {

  }
})
export default class MobileFooter extends Vue {
  private status = [
    true, true, true, true, true
  ]

  toggleSublist(idx: number) {
    console.log('toggleSublist ', idx, this.status[idx])
    this.status.splice(idx, 1, !this.status[idx])
  }
}
</script>

<style lang="scss" scoped>
.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 8vw;
  .community-bar{
    width: 100vw;
    height: 13.7vw;
    background-image: linear-gradient(to right, #FFDF2C , #FF8613);
    display: flex;
    align-items: center;
    justify-content: space-between;
    .title{
      color: #404040;
      font-size: 4vw;
      margin-left: 8vw;
    }
    .icon-list{
      display: flex;
      margin-right: 8.5vw;
      gap: 5vw;
      img{
        width: 4.4vw;
        height: 4.4vw;
      }
    }
  }
  .link-list{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 86vw;
    margin-top: 34px;
    .sub-list{
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      color: #B4B4B4;
      border-top: white 1px solid;
      &:last-child{
        border-bottom: white 1px solid;
      }

      a{
        color: #B4B4B4;
        text-decoration: none;
        line-height: 8vw ;
        &:last-child{
          margin-bottom: 4vw;
        }
      }
      .title{
        color: #F4F4F4;
        font-size: 3.8vw;
        font-weight: bold;
        line-height: 11vw;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .btn-plus{
          width: 3.3vw;
          height: 3.3vw;
          margin-right: 2vw;
          transform: rotate(45deg);
        }
      }
      &.close{
        a {
          display: none;
        }
        .title {
          .btn-plus{
            transform: unset;
          }
        }
      }
    }
  }
  .copy-right{
    color: #B4B4B4;
    margin-bottom: 15vw;
    margin-top: 8vw;
    width: 86vw;
  }
}
</style>