bemarket/src/components/market/NftInfo.vue

<template>
  <div class="card-info-outlet">
  <a class="card-root" :href="data.id? `/item/${data.id}`: 'javascript:void(0)'">
    <hero-nft :data="data" class="item"></hero-nft>
    <div class="attr-div">
<!--      <div class="one-col-info nft-id-mobile">-->
<!--        <div class="one-info">-->
<!--          <div class="info-title">Token ID</div>-->
<!--          <div class="info-val token-color">#{{data.id}}</div>-->
<!--        </div>-->
<!--      </div>-->
      <div class="one-col-info">
        <div class="one-info">
          <div class="info-title">Level</div>
          <div class="info-val">{{data.info.level}}</div>
        </div>
      </div>
      <div class="two-col-info">
        <div class="one-info">
          <div class="info-title">HP</div>
          <div class="info-val">{{data.info.hp}}</div>
        </div>
        <div class="one-info">
          <div class="info-title">Speed</div>
          <div class="info-val">{{data.info.speed}}</div>
        </div>
      </div>
      <div class="two-col-info">
        <div class="one-info">
          <div class="info-title">Attack</div>
          <div class="info-val">{{data.info.atk}}</div>
        </div>
        <div class="one-info">
          <div class="info-title">Defence</div>
          <div class="info-val">{{data.info.def}}</div>
        </div>
      </div>
      <div class="one-col-info">
        <div class="one-info">
          <div class="info-title">Advanced Count</div>
          <div class="info-val">{{data.info.advancedCount}}</div>
        </div>
      </div>
    </div>
  </a>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { ISpineData } from '@/utils/SpineRender'
import NftItem from '@/components/market/NftItem.vue'
import HeroNft from '@/components/market/nft/HeroNft.vue'

declare module 'vue/types/vue' {
  interface Vue {
    data: ISpineData
  }
}

@Component({
  name: 'NftInfo',
  components: {
    HeroNft,
    NftItem
  },
  props: ['data']
})
export default class extends Vue {

}
</script>

<style lang="scss" scoped>
.card-info-outlet{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  .nft-id {
    //display: none;
  }
}
  .card-root{
    text-decoration: none;
    display: flex;
    flex-direction: column;
    width: 14em;
    .card{
      height: 18em;
      width: 100%;
      position: relative;
    }
    .nft-id {
      color: #46E0F4;
      display: unset;
    }
    .attr-div{
      border: 10px solid #211638;
      background-color: #211638;
      border-image-source: url('../../assets/main/detail/border-attr.png');
      border-image-slice: 10;
      margin-top: 12px;
      display: flex;
      color: white;
      flex-direction: column;
      font-size: 11px;
      .two-col-info {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        div {
          width: 50%;
        }
      }
      .one-col-info {
        display: flex;
        flex-direction: row;
        width: 100%;
        .one-info{
          width: 100%;
          justify-content: flex-start;
          .info-title{
            width: auto;
          }
          .info-val{
            width: auto;
            margin-left: 10px;
          }
        }
        &.nft-id-mobile{
          display: none;
        }
      }
      .one-info{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        .info-title {
          width: 60%;
        }
        .info-val {
          color: #3CF562;
          width: 40%;
        }
      }
    }
  }
  @media (max-width: 767px) {
    .card-info-outlet{
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100vw;
      .nft-id {
        width: 100%;
        color: #46E0F4;
        text-decoration: none;
        margin-bottom: 5px;
        display: unset;
      }
    }
    .card-root{
      width: 85vw;
      flex-direction: row;
      justify-content: space-between;
      .card{
        width: 50vw;
      }
      .nft-id{
        display: none;
      }
      .attr-div{
        width: 35vw;
        margin-top: 16px;
        margin-left: 0;
        .two-col-info {
          display: flex;
          flex-direction: column;
          div{
            width: 100%;
          }
        }
        .one-col-info {
          &.nft-id-mobile {
            display: flex;
          }
        }
        .one-info{
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          margin-bottom: 8px;
          .info-title {
            width: 40%;
          }
          .info-val {
            color: #3CF562;
            width: 60%;
            padding-left: 5px;
          }
        }
      }
    }
    .token-color{
      color: #46E0F4!important;
    }
  }
</style>