修改nft页面芯片的布局

src/components/nft/ChipSection.vue

@@ -6,7 +6,7 @@
         @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"/>
+        <one-chip v-for="c in heroNames" :key="c" :data="c" class="card" />
       </div>
     </div>
   </section>
@@ -14,45 +14,29 @@
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
-import { Message } from 'element-ui'
 import TitleBar from '@/components/nft/TitleBar.vue'
-import { IHeroData } from '@/components/index/HeroScroller.vue'
 import { AppModule, DeviceType } from '@/store/modules/app'
+import OneChip from '@/components/nft/OneChip.vue'
 
 @Component({
   name: 'ChipSection',
   components: {
+    OneChip,
     TitleBar
   }
 })
 export default class extends Vue {
   private heroNames = [
-    'healing',
-    'lucky_value',
-    'reload',
-    'rate',
-    'rate_of_fire',
-    'attack',
-    'hp',
-    'vision',
-    'movement_speed'
+    'green',
+    'blue',
+    'orange',
+    'purple'
   ]
 
-  private datas:IHeroData[] = []
-
   get mobile() {
     return AppModule.device === DeviceType.Mobile
   }
 
-  mounted() {
-    for (let i = 0; i < this.heroNames.length; i++) {
-      this.datas.push({
-        name: this.heroNames[i],
-        img: require(`@/assets/202202/nft/${this.heroNames[i]}.png`)
-      })
-    }
-  }
-
   showInfo() {
     console.log('show info')
     this.$emit('dialog-show', true)
@@ -89,18 +73,19 @@ export default class extends Vue {
 }
 #chip-section.mobile{
   width: 100vw;
+  overflow: hidden;
   .section-container{
     width: 100vw;
+    padding: 0;
     .nft-list{
       grid-template-columns: repeat(2, 1fr);
       grid-row-gap: 5vw;
+      justify-content: space-around;
+      padding: 5vw;
       .card{
         width: 39vw;
         height: 40vw;
       }
-      .card:nth-child(even) {
-        margin-left: 3vw;
-      }
     }
   }
 }

src/components/nft/NftSection.vue

@@ -101,7 +101,7 @@ export default class extends Vue {
         height: 55vw;
       }
       .card:nth-child(odd) {
-        margin-right: -11vw;
+        margin-right: -4vw;
       }
       .card:nth-child(even) {
         margin-left: -3vw;

src/components/nft/OneChip.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="chip" :class="{'mobile': mobile}" >
+    <img :src="img" alt="chip">
+    <div class="title">{{title}}</div>
+  </div>
+</template>
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+import { AppModule, DeviceType } from '@/store/modules/app'
+
+@Component({
+  name: 'OneChip',
+  components: {
+  },
+  props: ['data']
+})
+export default class OneChip extends Vue {
+  get mobile() {
+    return AppModule.device === DeviceType.Mobile
+  }
+
+  get img() {
+    return require(`@/assets/202202/nft/chip-${this.data!}.png`)
+  }
+
+  get title() {
+    return `${this.data} quality`.toUpperCase()
+  }
+}
+</script>
+<style lang="scss" scoped>
+.chip{
+  width: 318px;
+  height: 320px;
+  background-image: url('../../assets/202202/nft/chip-bg.png');
+  background-repeat: no-repeat;
+  background-position: top;
+  background-size: 100% 100%;
+  display: flex;
+  flex-direction: column;
+  img{
+    width: 230px;
+    height: 246px;
+    margin: 10px auto 1px;
+  }
+  .title{
+    font-size: 24px;
+    color: white;
+    line-height: 58px;
+    margin-left: 20px;
+  }
+}
+.chip.mobile{
+  width: 39vw;
+  height: 40vw;
+  img{
+    width: 28vw;
+    height: 30.75vw;
+    margin: 1.25vw auto 1px;
+  }
+  .title{
+    font-size: 4.3vw;
+    line-height: 7.25vw;
+    margin-left: 2.45vw;
+  }
+}
+</style>

src/components/nft/WeaponSection.vue

@@ -87,6 +87,7 @@ export default class extends Vue {
 }
 #weapon-section.mobile{
   width: 100vw;
+  overflow: hidden;
   .section-container{
     width: 100vw;
     .nft-list{