bemarket/src/components/nft/NftInfo.vue

<template>
  <div v-show="dialogTableVisible" class="el-dialog__wrapper" style="z-index: 2001;">
    <div role="dialog" aria-modal="true" aria-label="dialog" class="nft-info" :class="{'mobile': mobile}"  style="margin-top: 15vh;">
      <div class="header">
        <img class="close-btn" src="@/assets/202202/nft/close_btn.png" @click="closeMe" alt="close"/>
      </div>
      <div class="el-dialog__body" v-if="type === 0">
        <div class="title">Usage</div>
        <div class="desc">
          <p>Token rewards can only be obtained by</p>
          <p>playing the game with hero NFT.</p>
        </div>
        <div class="title">Types</div>
        <div class="desc">
          <p>There are 10 heroes in total, and different roles</p>
          <p>correspond to different original skills and attributes.</p>
        </div>
        <div class="title">Rarity</div>
        <div class="desc">
          <p>Each hero has 15 levels of rarity, you can increase rarity</p>
          <p>by combining heroes of the same type.</p>
          <p>Raise the rarity to obtain additional attributes and skills.</p>
        </div>
        <div class="title">Levels</div>
        <div class="desc">
          <p>Each hero can be upgraded up to level 20.</p>
          <p>Heroes of the same type at different levels have</p>
          <p>the same attribute types, and the higher the level,</p>
          <p>the greater the value.</p>
        </div>
        <div class="title">Destroy</div>
        <div class="desc">
          <p>When merging heroes to increase their rarity, the</p>
          <p>lower level heroes among them will be destroyed.</p>
        </div>
      </div>
      <div class="el-dialog__body" v-if="type === 1">
        <div class="title">Usage</div>
        <div class="desc">
          <p>Free to play, no need to buy</p>
          <p>Increase the hero's power and attack effect</p>
          <p>during battle, and increase the winning rate.</p>
        </div>
        <div class="title">Types</div>
        <div class="desc">
          <p>There are 7 categories of weapons, and different</p>
          <p>categories correspond to different original skills and</p>
          <p>attributes.</p>
        </div>
        <div class="title">Rarity</div>
        <div class="desc">
          <p>Each weapon has 15 levels of rarity, which can be</p>
          <p>increased by combining weapons of the same type. </p>
          <p>Raise the rarity to obtain additional attribute skills.</p>
        </div>
        <div class="title">Levels</div>
        <div class="desc">
          <p>Each weapon can be upgraded up to level 20. </p>
          <p>Weapons of the same type at different levels have</p>
          <p>the same attribute types, and the higher the level, </p>
          <p>the greater the value.</p>
        </div>
        <div class="title">Destroy</div>
        <div class="desc">
          <p>When merging weapons to increase their rarity, </p>
          <p>the lower level weapons will be destroyed.</p>
        </div>
      </div>
      <div class="el-dialog__body" v-if="type === 2">
        <div class="title">Usage</div>
        <div class="desc">
          <p>When heroes and weapons need to be</p>
          <p>upgraded, they can be upgraded with chips. </p>
          <p></p>
          <p>Upgrade heroes or weapons with chips to add</p>
          <p>additional attributes. </p>
          <p></p>
          <p>Rarity, levels and types </p>
          <p>Chips are not differentiated by level and type, </p>
          <p>only by rarity, with 4 rarities.</p>
          <p></p>
        </div>

        <div class="title">Destroy</div>
        <div class="desc">
          <p>It will be destroyed after use, and each chip can </p>
          <p>only be used once.</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { AppModule, DeviceType } from '@/store/modules/app'

declare module 'vue/types/vue' {
  interface Vue {
    dialogShow?: boolean
  }
}

@Component({
  name: 'NftInfo',
  components: {},
  props: ['dialogShow', 'type']
})
export default class extends Vue {
  get dialogTableVisible() {
    return !!this.dialogShow
  }

  set dialogTableVisible(val: boolean) {
    this.dialogShow = val
  }

  get mobile() {
    return AppModule.device === DeviceType.Mobile
  }

  closeMe() {
    console.log('info close')
    this.$emit('dialog-show', false)
  }
}
</script>

<style lang="scss" scoped>
.nft-info {
  background-image: url('../../assets/202202/nft/info_bg.png');
  background-repeat: no-repeat;
  background-position: top;
  background-size: 100% 100%;
  position: relative;
  margin: 0 auto 50px;
  margin-top: 15vh;
  border-radius: 2px;
  box-sizing: border-box;
  width: 760px;
  .header{
    display: flex;
    justify-content: flex-end;
    padding-top: 24px;
    padding-right: 24px;
    .close-btn{
      cursor: pointer;
    }
  }
  .title {
    color: white;
    font-size: 24px;
    margin-left: 84px;
  }
  .desc{
    color: #C7C5C5;
    font-size: 16px;
    margin-top: 27px;
    margin-left: 84px;
  }
  .desc p {
    font-family: 'Rajdhani',serif;
    font-weight: 500;
  }
}
.nft-info.mobile {
  width: 80vw;
  .header{
    padding-right: 6vw;
    .close-btn{
      width: 3.7vw;
      height: 3.7vw;
    }
  }
  .title{
    margin-left: 6vw;
    font-size: 3.2vw;
  }
  .desc{
    margin-left: 6vw;
    font-size: 2.8vw ;
    margin-top: 1vw;
    margin-bottom: 5vw;
  }
}
</style>