update nft page

src/components/nft/ChipSection.vue

@@ -1,7 +1,10 @@
 <template>
-  <section id="weapon-section" data-anchor="weapon">
+  <section id="chip-section" data-anchor="weapon">
     <div class="section-container">
-      <title-bar :title-img="require('@/assets/202202/nft/chip.png')"></title-bar>
+      <title-bar
+        :title-img="require('@/assets/202202/nft/chip.png')"
+        @dialog-show="showInfo"
+      ></title-bar>
       <div class="nft-list">
         <img v-for="c in datas" :key="c.name" :src="c.img" class="weapon" :alt="c.name"/>
       </div>
@@ -45,6 +48,11 @@ export default class extends Vue {
     }
   }
 
+  showInfo() {
+    console.log('show info')
+    this.$emit('dialog-show', true)
+  }
+
   comingSoon() {
     Message({
       message: 'coming soon',
@@ -56,7 +64,7 @@ export default class extends Vue {
 </script>
 
 <style lang="scss" scoped>
-#weapon-section{
+#chip-section{
   box-sizing: border-box;
   width: 1920px;
   position: relative;

src/components/nft/NftInfo.vue

@@ -0,0 +1,103 @@
+<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" 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">
+        <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>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+
+declare module 'vue/types/vue' {
+  interface Vue {
+    dialogShow: boolean
+  }
+}
+
+@Component({
+  name: 'NftInfo',
+  components: {},
+  props: ['dialogShow']
+})
+export default class extends Vue {
+  get dialogTableVisible() {
+    return this.dialogShow
+  }
+
+  set dialogTableVisible(val: boolean) {
+    this.dialogShow = val
+  }
+
+  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;
+  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;
+  }
+}
+</style>

src/components/nft/NftSection.vue

@@ -1,7 +1,10 @@
 <template>
   <section id="nft-section" data-anchor="nft">
     <div class="section-container">
-      <title-bar :title-img="require('@/assets/202202/nft/hero.png')"></title-bar>
+      <title-bar
+        :title-img="require('@/assets/202202/nft/hero.png')"
+        @dialog-show="showInfo"
+      ></title-bar>
       <div class="nft-list">
         <img v-for="c in datas" :key="c.name" :src="c.img" class="card" :alt="c.name"/>
       </div>
@@ -46,6 +49,11 @@ export default class extends Vue {
     }
   }
 
+  showInfo() {
+    console.log('show info')
+    this.$emit('dialog-show', true)
+  }
+
   comingSoon() {
     Message({
       message: 'coming soon',

src/components/nft/TitleBar.vue

@@ -2,7 +2,7 @@
   <div class="title">
     <div class="left-part">
       <img :src="titleImg" alt="hero"/>
-      <div class="desc">DESC. >></div>
+      <div class="desc" @click="showInfo">DESC. >></div>
     </div>
     <div class="right-part">
       <img src="@/assets/202202/nft/button-get.png" alt="got it"/>
@@ -26,7 +26,9 @@ declare module 'vue/types/vue' {
   props: ['titleImg']
 })
 export default class extends Vue {
-
+  showInfo() {
+    this.$emit('dialog-show', true)
+  }
 }
 </script>
 
@@ -44,6 +46,7 @@ export default class extends Vue {
     .desc{
       margin-bottom: -6px;
       margin-left: 20px;
+      cursor: pointer;
     }
   }
 }

src/components/nft/WeaponSection.vue

@@ -1,7 +1,10 @@
 <template>
   <section id="weapon-section" data-anchor="weapon">
     <div class="section-container">
-      <title-bar :title-img="require('@/assets/202202/nft/weapon.png')"></title-bar>
+      <title-bar
+        :title-img="require('@/assets/202202/nft/weapon.png')"
+        @dialog-show="showInfo"
+      ></title-bar>
       <div class="nft-list">
         <img v-for="c in datas" :key="c.name" :src="c.img" class="weapon" :alt="c.name"/>
       </div>
@@ -39,6 +42,11 @@ export default class extends Vue {
     }
   }
 
+  showInfo() {
+    console.log('show info')
+    this.$emit('dialog-show', true)
+  }
+
   comingSoon() {
     Message({
       message: 'coming soon',

src/views/NFT.vue

@@ -2,10 +2,11 @@
   <div class="container" :style="cstyle">
     <desktop-header current-section="nft"></desktop-header>
     <top-section></top-section>
-    <nft-section></nft-section>
-    <weapon-section></weapon-section>
-    <chip-section></chip-section>
+    <nft-section @dialog-show="infoShowStatusChange" ></nft-section>
+    <weapon-section @dialog-show="infoShowStatusChange"></weapon-section>
+    <chip-section @dialog-show="infoShowStatusChange"></chip-section>
     <desktop-footer></desktop-footer>
+    <nft-info :dialog-show="infoShow" @dialog-show="infoShowStatusChange"></nft-info>
   </div>
 </template>
 
@@ -17,10 +18,12 @@ import TopSection from '@/components/nft/TopSection.vue'
 import NftSection from '@/components/nft/NftSection.vue'
 import WeaponSection from '@/components/nft/WeaponSection.vue'
 import ChipSection from '@/components/nft/ChipSection.vue'
+import NftInfo from '@/components/nft/NftInfo.vue'
 
 @Component({
   name: 'Nft',
   components: {
+    NftInfo,
     ChipSection,
     WeaponSection,
     NftSection,
@@ -32,6 +35,8 @@ import ChipSection from '@/components/nft/ChipSection.vue'
 export default class extends Vue {
   private scale = 1.0
   private initWidth = 1920
+  private infoShow = false
+
   get cstyle() {
     return {
       // transform: `scale(${this.scale})`
@@ -51,6 +56,15 @@ export default class extends Vue {
     window.removeEventListener('resize', this.resizeHandler)
   }
 
+  showInfo() {
+    this.infoShow = true
+  }
+
+  infoShowStatusChange(val: boolean) {
+    console.log('infoShowStatusChange: ', val)
+    this.infoShow = val
+  }
+
   resizeHandler() {
     const documentWidth = document.body.clientWidth
     if (documentWidth < this.initWidth) {