增加移动版nft页面

public/index.html

@@ -22,6 +22,7 @@
         }
         body{
             overflow-x: hidden;
+            scrollbar-width: none;
         }
         .video-js .vjs-big-play-button {
             top: 0;
@@ -36,9 +37,11 @@
 
         ::-webkit-scrollbar {
             width: 0 !important;
+            display: none;
         }
         ::-webkit-scrollbar {
             width: 0 !important;height: 0;
+            display: none;
         }
 
         .video-youtube-202202 iframe{

src/components/nft/ChipSection.vue

@@ -1,12 +1,12 @@
 <template>
-  <section id="chip-section" data-anchor="weapon">
+  <section id="chip-section" data-anchor="weapon" :class="{'mobile': mobile}">
     <div class="section-container">
       <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"/>
+        <img v-for="c in datas" :key="c.name" :src="c.img" class="card" :alt="c.name"/>
       </div>
     </div>
   </section>
@@ -17,6 +17,7 @@ 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'
 
 @Component({
   name: 'ChipSection',
@@ -39,6 +40,10 @@ export default class extends Vue {
 
   private datas:IHeroData[] = []
 
+  get mobile() {
+    return AppModule.device === DeviceType.Mobile
+  }
+
   mounted() {
     for (let i = 0; i < this.heroNames.length; i++) {
       this.datas.push({
@@ -90,5 +95,21 @@ export default class extends Vue {
   }
 
 }
-
+#chip-section.mobile{
+  width: 100vw;
+  .section-container{
+    width: 100vw;
+    .nft-list{
+      grid-template-columns: repeat(2, 1fr);
+      grid-row-gap: 5vw;
+      .card{
+        width: 39vw;
+        height: 40vw;
+      }
+      .card:nth-child(even) {
+        margin-left: 3vw;
+      }
+    }
+  }
+}
 </style>

src/components/nft/NftInfo.vue

@@ -1,6 +1,6 @@
 <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 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>
@@ -93,6 +93,7 @@
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
+import { AppModule, DeviceType } from '@/store/modules/app'
 
 declare module 'vue/types/vue' {
   interface Vue {
@@ -114,6 +115,10 @@ export default class extends Vue {
     this.dialogShow = val
   }
 
+  get mobile() {
+    return AppModule.device === DeviceType.Mobile
+  }
+
   closeMe() {
     console.log('info close')
     this.$emit('dialog-show', false)
@@ -154,4 +159,24 @@ export default class extends Vue {
     margin-left: 84px;
   }
 }
+.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>

src/components/nft/NftSection.vue

@@ -1,5 +1,5 @@
 <template>
-  <section id="nft-section" data-anchor="nft">
+  <section id="nft-section" data-anchor="nft"  :class="{'mobile': mobile}">
     <div class="section-container">
       <title-bar
         :title-img="require('@/assets/202202/nft/hero.png')"
@@ -17,6 +17,7 @@ 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'
 
 @Component({
   name: 'NftSection',
@@ -40,6 +41,10 @@ export default class extends Vue {
 
   private datas:IHeroData[] = []
 
+  get mobile() {
+    return AppModule.device === DeviceType.Mobile
+  }
+
   mounted() {
     for (let i = 0; i < this.heroNames.length; i++) {
       this.datas.push({
@@ -91,4 +96,26 @@ export default class extends Vue {
 
 }
 
+#nft-section.mobile{
+  width: 100vw;
+  .section-container{
+    width: 100vw;
+    padding: 0;
+    .nft-list{
+      grid-template-columns: repeat(2, 1fr);
+      grid-row-gap: 5vw;
+      .card{
+        width: 50vw;
+        height: 55vw;
+      }
+      .card:nth-child(odd) {
+        margin-right: -11vw;
+      }
+      .card:nth-child(even) {
+        margin-left: -3vw;
+      }
+    }
+  }
+}
+
 </style>

src/components/nft/TitleBar.vue

@@ -1,17 +1,19 @@
 <template>
-  <div class="title">
+  <div class="title" :class="{'mobile': mobile}">
     <div class="left-part">
       <img :src="titleImg" alt="hero"/>
-      <div class="desc" @click="showInfo">DESC. >></div>
+      <div class="desc" v-if="!mobile" @click="showInfo">DESC. >></div>
     </div>
     <div class="right-part">
       <img src="@/assets/202202/nft/button-get.png" alt="got it"/>
     </div>
+    <div class="desc" v-if="mobile" @click="showInfo">DESC. >></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 {
@@ -29,6 +31,10 @@ export default class extends Vue {
   showInfo() {
     this.$emit('dialog-show', true)
   }
+
+  get mobile() {
+    return AppModule.device === DeviceType.Mobile
+  }
 }
 </script>
 
@@ -43,11 +49,19 @@ export default class extends Vue {
     display: flex;
     flex-direction: row;
     align-items: end ;
-    .desc{
+  }
-      margin-bottom: -6px;
+  .desc{
-      margin-left: 20px;
+    color: #DFDFDF;
-      cursor: pointer;
+    margin-bottom: -6px;
-    }
+    margin-left: 20px;
+    cursor: pointer;
+  }
+}
+.title.mobile{
+  flex-direction: column;
+  gap: 4vw;
+  .desc{
+    margin-top: -2vw;
   }
 }
 </style>

src/components/nft/TopSection.vue

@@ -1,6 +1,15 @@
 <template>
-  <section id="top-section" data-anchor="top">
+  <section id="top-section" data-anchor="top" :class="{'mobile': mobile}">
-    <img class="play-btn" @click="comingSoon" src="@/assets/202202/nft/button.png" alt="play">
+    <div class="top-part"></div>
+    <div class="bottom-part">
+      <div class="text" v-if="mobile">
+        <div >CHOOSE YOUR</div>
+        <div >CHAMPION</div>
+        <div>Find the perfect hero for your play style</div>
+        <div >Master one, or master them all</div>
+      </div>
+      <img class="play-btn" @click="comingSoon" src="@/assets/202202/nft/button.png" alt="play">
+    </div>
   </section>
 </template>
 
@@ -8,6 +17,7 @@
 import { Component, Vue } from 'vue-property-decorator'
 import RImg from '@/components/ResponsiveImage.vue'
 import { Message } from 'element-ui'
+import { AppModule, DeviceType } from '@/store/modules/app'
 
 @Component({
   name: 'TopSection',
@@ -24,6 +34,10 @@ export default class extends Vue {
     slide: HTMLFormElement
   }
 
+  get mobile() {
+    return AppModule.device === DeviceType.Mobile
+  }
+
   comingSoon() {
     Message({
       message: 'coming soon',
@@ -39,9 +53,15 @@ export default class extends Vue {
   width: 1920px;
   height: 500px;
   position: relative;
-  background-image: url('../../assets/202202/nft/cebg_banner3.png');
+  .top-part{
-  background-repeat: no-repeat;
+    left: 0;
-  background-position: center;
+    right: 0;
+    width: 100%;
+    height: 100%;
+    background-image: url('../../assets/202202/nft/cebg_banner3.png');
+    background-repeat: no-repeat;
+    background-position: center;
+  }
   .play-btn{
     width: 320px;
     height: 68px;
@@ -54,5 +74,44 @@ export default class extends Vue {
     cursor: pointer;
   }
 
+}
+#top-section.mobile{
+  width: 100vw;
+  height: 190vw;
+  .top-part{
+    background-image: url('../../assets/mobile/nft/nft-bg.png');
+    background-size: 100% 100%;
+    height: 100vw;
+  }
+  .play-btn{
+    width: 64vw;
+    height: auto;
+    bottom: 28vw;
+  }
+  .bottom-part{
+    background-image: url('../../assets/mobile/nft/txt-bg.png');
+    background-size: 100% 100%;
+    height: 90vw;
+    margin-top: -10vw;
+    .text{
+      display: flex;
+      flex-direction: column;
+      color: white;
+      font-size: 3.9vw;
+      align-items: center;
+      line-height: 4.7vw;
+      :nth-child(1) {
+        margin-top: 14vw;
+        font-size: 8vw;
+        line-height: 8vw;
+      }
+      :nth-child(2) {
+        font-size: 11vw;
+        line-height: 15vw;
+      }
+
+    }
+  }
+
 }
 </style>

src/components/nft/WeaponSection.vue

@@ -1,5 +1,5 @@
 <template>
-  <section id="weapon-section" data-anchor="weapon">
+  <section id="weapon-section" data-anchor="weapon" :class="{'mobile': mobile}">
     <div class="section-container">
       <title-bar
         :title-img="require('@/assets/202202/nft/weapon.png')"
@@ -17,6 +17,7 @@ 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'
 
 @Component({
   name: 'NftSection',
@@ -33,6 +34,10 @@ export default class extends Vue {
 
   private datas:IHeroData[] = []
 
+  get mobile() {
+    return AppModule.device === DeviceType.Mobile
+  }
+
   mounted() {
     for (let i = 0; i < this.heroNames.length; i++) {
       this.datas.push({
@@ -76,7 +81,7 @@ export default class extends Vue {
       justify-content: center;
       align-content: center;
       grid-row-gap: 80px;
-      .card{
+      .weapon{
         width: 600px;
         height: 340px;
       }
@@ -84,5 +89,18 @@ export default class extends Vue {
   }
 
 }
-
+#weapon-section.mobile{
+  width: 100vw;
+  .section-container{
+    width: 100vw;
+    .nft-list{
+      display: flex;
+      flex-direction: column;
+      .weapon{
+        width: 82vw;
+        height: 38vw;
+      }
+    }
+  }
+}
 </style>

src/router/index.ts

@@ -15,6 +15,7 @@ import MobileIndex from '@/views/mobile/Index.vue'
 import { AppModule, DeviceType } from '@/store/modules/app'
 import { isMobile } from '@/utils/resize'
 import MobileGameplay from '@/views/mobile/Gameplay.vue'
+import MobileNft from '@/views/mobile/NFT.vue'
 
 Vue.use(VueRouter)
 const mobile = isMobile()
@@ -64,7 +65,7 @@ const routes: Array<RouteConfig> = [
   {
     path: '/nft',
     name: 'Nft',
-    component: NFT
+    component: mobile ? MobileNft : NFT
   },
   {
     path: '/gameplay',

src/views/mobile/Gameplay.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="container" :style="cstyle">
+  <div class="container" >
     <mobile-header current-section="gameplay"></mobile-header>
     <video-section></video-section>
     <data-cell v-for="data in currentCell" :key="data.title" :data="data"></data-cell>
@@ -106,13 +106,6 @@ export default class MobileGameplay extends Vue {
     console.log('tag change: ', val)
     this.activeTab = val
   }
-
-  get cstyle() {
-    return {
-      // transform: `scale(${this.scale})`
-      zoom: this.scale
-    }
-  }
 }
 </script>
 <style lang="scss" scoped>

src/views/mobile/NFT.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="container" >
+    <mobile-header current-section="nft"></mobile-header>
+    <top-section></top-section>
+    <nft-section @dialog-show="showInfo(0)" ></nft-section>
+    <weapon-section @dialog-show="showInfo(1)"></weapon-section>
+    <chip-section @dialog-show="showInfo(2)"></chip-section>
+    <mobile-footer></mobile-footer>
+    <nft-info :dialog-show="infoShow" :type="infoType" @dialog-show="infoShowStatusChange"></nft-info>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+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'
+import MobileHeader from '@/components/mobile/main/MobileHeader.vue'
+import MobileFooter from '@/components/mobile/main/MobileFooter.vue'
+
+@Component({
+  name: 'MobileNft',
+  components: {
+    MobileFooter,
+    MobileHeader,
+    NftInfo,
+    ChipSection,
+    WeaponSection,
+    NftSection,
+    TopSection
+  }
+})
+export default class MobileNft extends Vue {
+  private infoShow = false
+  private infoType = 0
+
+  showInfo(type: number) {
+    this.infoType = type
+    this.infoShow = true
+  }
+
+  infoShowStatusChange(val: boolean) {
+    console.log('infoShowStatusChange: ', val)
+    this.infoShow = val
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  width: 100vw;
+  margin: 10.4vw auto 0;
+  background-color: #171717;
+  transform-origin: top;
+}
+</style>