bemarket/src/views/desktop/Mall.vue

<template>
  <div>
    <top-menu class="desk-top" :current-tab="currentTab"></top-menu>
    <section class="root">
      <div class="container">
        <div class="box-info">
          <div class="info-title">CEBG BOX</div>
          <div class="info-desc">
            <p>CEBG box contains various heroes with certain drop rates.</p>
          </div>
        </div>
        <div class="detail-info-bar">
          <div class="detailBox">
            <svg-icon name="clock" class="circle"></svg-icon>
            <div class="content">
              <span class="info">Unlimited</span>
              <span class="title">Time Remaining</span>
            </div>
          </div>

        </div>
        <div class="box-list">
          <one-box v-for="data in boxDatas" :key="data.level" :box-data="data"></one-box>
          <comming-box></comming-box>
        </div>
      </div>
    </section>
    <base-footer :auto-size="true">></base-footer>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import TopMenu from '@/components/market/TopMenu.vue'
import BaseFooter from '@/components/layout/BaseFooter.vue'
import OneBox, { IBoxData } from '@/components/market/mall/OneBox.vue'
import CommingBox from '@/components/market/mall/CommingBox.vue'

@Component({
  components: {
    CommingBox,
    OneBox,
    BaseFooter,
    TopMenu
  }
})
export default class Official extends Vue {
  mobileFilterShow = false;
  currentTab = 'official';
  nftType = 0;
  private boxDatas: IBoxData[] = [
    {
      level: 'common',
      id: 1
    },
    {
      level: 'epic',
      id: 2
    },
    {
      level: 'legendary',
      id: 3
    }
  ]

  onNftTypeClicked(id: number) {
    console.log('nft type clicked: ', id)
    this.nftType = id
  }

  showFilter(val: boolean) {
    this.mobileFilterShow = val
  }
}
</script>
<style lang="scss" scoped>
@import '../../scss/breakpoints.scss';

.root {
  display: flex;
  flex-direction: column;
  align-items: center;

  .container {
    display: flex;
    flex-direction: column;
    width: 1440px;
    max-width: 100%;
    box-sizing: border-box;
    align-items: center;

    .box-info {
      width: 100%;
      color: white;
      display: flex;
      flex-direction: column;
      align-items: center;

      .info-title {
        font-size: 50px;
        padding: 60px 20px 20px 20px;
      }
    }
  }
}

.box-list {
  width: 100%;
  display: flex;
  flex-direction: row;
  margin-top: 2.5em;
  flex-wrap: wrap;
  row-gap: 2em;
  column-gap: 3em;
  justify-content: center;
}

.detail-info-bar {
  width: toEm(969px);
  max-width: 100%;
  height: toEm(93px);
  margin-top: toEm(32px);
  display: flex;
  justify-content: center;
  .detailBox {
    width: toEm(302px);
    border-radius: toEm(8px);
    padding: 0 toEm(36px);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    background: rgba(4, 4, 34, 0.56);
    transform: matrix(0.98, 0, -0.19, 1, 0, 0);
    .circle {
      width: toEm(57px);
      height: toEm(57px);
      fill: currentColor;
      stroke: none;
      margin-right: toEm(24px);
      transform: skewX(11deg);
    }
    .content {
      display: flex;
      flex-direction: column;
      transform: skewX(11deg);
      .title {
        font-style: normal;
        text-transform: uppercase;
        font-size: toEm(14px);
        line-height: 1.57;
        color: #c9c5db;
      }
      .info {
        font-style: normal;
        font-weight: bold;
        font-size: toEm(24px);
        line-height: 1.25;
        text-transform: uppercase;
        color: #ffffff;
        margin-bottom: toEm(8px);
        display: flex;
        flex-direction: row;
        align-items: center;

        .total {
          color: #8a8ab2;
        }
      }
      .timeUp {
        color: #ff5c5c;
      }
      .unavailableTime {
        font-size: 1.125em;
        text-transform: none;
      }
    }
  }
}

@include media('<wide') {
  .root {
    font-size: 11px;
  }
  .root .container {
    width: 1024px;
    max-width: 100%;
  }
}

@include media('<desktop') {
  .root {
    font-size: 20px;

    .container {
      width: 768px;
      flex-direction: column;

      .box-list {
        flex-direction: column;
        align-items: center;
      }
    }
  }
}

@include media('<tablet') {
  .root {
    font-size: 11px;

    .container {
      width: 375px;
    }
  }
}

@include media('<phone') {
  .root {
    font-size: 9px;
  }
}

</style>
<style lang="scss">
.circle {
  rect {
    fill: #4B1BFF;
  }
  path {
    fill: white;
  }
}
</style>