add page of nft

src/components/index/DesktopFooter.vue

@@ -18,9 +18,9 @@
       <div class="sub-list">
         <div class="title">Product</div>
         <a href="/">Home</a>
-        <a href="/">Gameplay</a>
-        <a href="javascript:void(0);" @click="comingSoon">Tokennomic</a>
-        <a href="/#hero-section">NFT</a>
+        <a href="/gameplay">Gameplay</a>
+        <a href="/tokennomic">Tokennomic</a>
+        <a href="/nft">NFT</a>
         <a href="javascript:void(0);" @click="comingSoon">Marketplace</a>
       </div>
       <div class="sub-list">

src/components/index/DesktopHeader.vue

@@ -4,11 +4,11 @@
       <img src="@/assets/main/p1/icon_logo_t.png">
     </div>
     <ul class="menu-list">
-      <li class="active"><a href="#top-section">GamePlay</a></li>
-      <li><a href="#hero-section">NFT</a></li>
-      <li @click="comingSoon">Tokennomic</li>
-      <li @click="comingSoon">Team</li>
-      <li @click="comingSoon">Roadmap</li>
+      <li :class="{'active': currentSection === 'gameplay'}"><a href="/gameplay">GamePlay</a></li>
+      <li :class="{'active': currentSection === 'nft'}"><a href="/nft">NFT</a></li>
+      <li :class="{'active': currentSection === 'tokennomic'}"><a href="/tokennomic">Tokennomic</a></li>
+      <li :class="{'active': currentSection === 'team'}" ><a href="/team">Team</a></li>
+      <li :class="{'active': currentSection === 'roadmap'}"><a href="/roadmap">Roadmap</a></li>
     </ul>
     <div class="right-part">
       <div class="login-btn" v-if="!accountId" @click="collectToWallet">

src/components/nft/ChipSection.vue

@@ -0,0 +1,86 @@
+<template>
+  <section id="weapon-section" data-anchor="weapon">
+    <div class="section-container">
+      <title-bar :title-img="require('@/assets/202202/nft/chip.png')"></title-bar>
+      <div class="nft-list">
+        <img v-for="c in datas" :key="c.name" :src="c.img" class="weapon" :alt="c.name"/>
+      </div>
+    </div>
+  </section>
+</template>
+
+<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'
+
+@Component({
+  name: 'ChipSection',
+  components: {
+    TitleBar
+  }
+})
+export default class extends Vue {
+  private heroNames = [
+    'healing',
+    'lucky_value',
+    'reload',
+    'rate',
+    'rate_of_fire',
+    'attack',
+    'hp',
+    'vision',
+    'movement_speed'
+  ]
+
+  private datas:IHeroData[] = []
+
+  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`)
+      })
+    }
+  }
+
+  comingSoon() {
+    Message({
+      message: 'coming soon',
+      type: 'info',
+      duration: 5 * 1000
+    })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+#weapon-section{
+  box-sizing: border-box;
+  width: 1920px;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  .section-container{
+    width: 1340px;
+    padding: 36px 60px;
+    .nft-list{
+      margin-top: 46px;
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      justify-items: center;
+      align-items: center;
+      justify-content: center;
+      align-content: center;
+      grid-row-gap: 80px;
+      .card{
+        width: 318px;
+        height: 320px;
+      }
+    }
+  }
+
+}
+
+</style>

src/components/nft/NftSection.vue

@@ -0,0 +1,86 @@
+<template>
+  <section id="nft-section" data-anchor="nft">
+    <div class="section-container">
+      <title-bar :title-img="require('@/assets/202202/nft/hero.png')"></title-bar>
+      <div class="nft-list">
+        <img v-for="c in datas" :key="c.name" :src="c.img" class="card" :alt="c.name"/>
+      </div>
+    </div>
+  </section>
+</template>
+
+<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'
+
+@Component({
+  name: 'NftSection',
+  components: {
+    TitleBar
+  }
+})
+export default class extends Vue {
+  private heroNames = [
+    'aoi',
+    'yamada',
+    'lazar',
+    'hill',
+    'kurosawa',
+    'canoe',
+    'miffy',
+    'dragonscale',
+    'astral',
+    'mariana'
+  ]
+
+  private datas:IHeroData[] = []
+
+  mounted() {
+    for (let i = 0; i < this.heroNames.length; i++) {
+      this.datas.push({
+        name: this.heroNames[i],
+        img: require(`@/assets/202202/card_${this.heroNames[i]}@2x.png`)
+      })
+    }
+  }
+
+  comingSoon() {
+    Message({
+      message: 'coming soon',
+      type: 'info',
+      duration: 5 * 1000
+    })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+#nft-section{
+  box-sizing: border-box;
+  width: 1920px;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  .section-container{
+    width: 1340px;
+    padding: 36px 60px;
+    .nft-list{
+      margin-top: 46px;
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      justify-items: center;
+      align-items: center;
+      justify-content: center;
+      align-content: center;
+      grid-row-gap: 80px;
+      .card:last-child{
+        grid-column-start: 2;
+      }
+    }
+  }
+
+}
+
+</style>

src/components/nft/TitleBar.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="title">
+    <div class="left-part">
+      <img :src="titleImg" alt="hero"/>
+      <div class="desc">DESC. >></div>
+    </div>
+    <div class="right-part">
+      <img src="@/assets/202202/nft/button-get.png" alt="got it"/>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+
+declare module 'vue/types/vue' {
+  interface Vue {
+    titleImg?: string
+  }
+}
+
+@Component({
+  name: 'TopSection',
+  components: {
+  },
+  props: ['titleImg']
+})
+export default class extends Vue {
+
+}
+</script>
+
+<style lang="scss" scoped>
+.title{
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  .left-part{
+    color: #DFDFDF;
+    display: flex;
+    flex-direction: row;
+    align-items: end ;
+    .desc{
+      margin-bottom: -6px;
+      margin-left: 20px;
+    }
+  }
+}
+</style>

src/components/nft/TopSection.vue

@@ -0,0 +1,58 @@
+<template>
+  <section id="top-section" data-anchor="top">
+    <img class="play-btn" @click="comingSoon" src="@/assets/202202/nft/button.png" alt="play">
+  </section>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+import RImg from '@/components/ResponsiveImage.vue'
+import { Message } from 'element-ui'
+
+@Component({
+  name: 'TopSection',
+  components: {
+    RImg
+  }
+})
+export default class extends Vue {
+  private nums = 2
+  private currentPageIndex = 0
+  private slide: any
+
+  $refs!: {
+    slide: HTMLFormElement
+  }
+
+  comingSoon() {
+    Message({
+      message: 'coming soon',
+      type: 'info',
+      duration: 5 * 1000
+    })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+#top-section{
+  width: 1920px;
+  height: 500px;
+  position: relative;
+  background-image: url('../../assets/202202/nft/cebg_banner3.png');
+  background-repeat: no-repeat;
+  background-position: center;
+  .play-btn{
+    width: 320px;
+    height: 68px;
+    bottom: 40px;
+    left: 0;
+    right: 0;
+    margin-right: auto;
+    margin-left: auto;
+    position: absolute;
+    cursor: pointer;
+  }
+
+}
+</style>

src/components/nft/WeaponSection.vue

@@ -0,0 +1,80 @@
+<template>
+  <section id="weapon-section" data-anchor="weapon">
+    <div class="section-container">
+      <title-bar :title-img="require('@/assets/202202/nft/weapon.png')"></title-bar>
+      <div class="nft-list">
+        <img v-for="c in datas" :key="c.name" :src="c.img" class="weapon" :alt="c.name"/>
+      </div>
+    </div>
+  </section>
+</template>
+
+<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'
+
+@Component({
+  name: 'NftSection',
+  components: {
+    TitleBar
+  }
+})
+export default class extends Vue {
+  private heroNames = [
+    'assault',
+    'shotgun',
+    'sniper'
+  ]
+
+  private datas:IHeroData[] = []
+
+  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`)
+      })
+    }
+  }
+
+  comingSoon() {
+    Message({
+      message: 'coming soon',
+      type: 'info',
+      duration: 5 * 1000
+    })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+#weapon-section{
+  box-sizing: border-box;
+  width: 1920px;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  .section-container{
+    width: 1340px;
+    padding: 36px 60px;
+    .nft-list{
+      margin-top: 46px;
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      justify-items: center;
+      align-items: center;
+      justify-content: center;
+      align-content: center;
+      grid-row-gap: 80px;
+      .card{
+        width: 600px;
+        height: 340px;
+      }
+    }
+  }
+
+}
+
+</style>

src/router/index.ts

@@ -7,6 +7,11 @@ import Item from '../views/Item.vue'
 import MyNft from '@/views/MyNft.vue'
 import Index from '@/views/Index.vue'
 import Presale from '@/views/Presale.vue'
+import NFT from '@/views/NFT.vue'
+import Gameplay from '@/views/Gameplay.vue'
+import Tokennomic from '@/views/Tokennomic.vue'
+import Team from '@/views/Team.vue'
+import Roadmap from '@/views/Roadmap.vue'
 
 Vue.use(VueRouter)
 
@@ -48,6 +53,31 @@ const routes: Array<RouteConfig> = [
     path: '/item/:id',
     name: 'Item',
     component: Item
+  },
+  {
+    path: '/nft',
+    name: 'Nft',
+    component: NFT
+  },
+  {
+    path: '/gameplay',
+    name: 'Gameplay',
+    component: Gameplay
+  },
+  {
+    path: '/tokennomic',
+    name: 'Tokennomic',
+    component: Tokennomic
+  },
+  {
+    path: '/team',
+    name: 'Team',
+    component: Team
+  },
+  {
+    path: '/roadmap',
+    name: 'Roadmap',
+    component: Roadmap
   }
 ]
 

src/views/Gameplay.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="container" :style="cstyle">
+    <desktop-header current-section="gameplay"></desktop-header>
+    <desktop-footer></desktop-footer>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+import DesktopHeader from '@/components/index/DesktopHeader.vue'
+import DesktopFooter from '@/components/index/DesktopFooter.vue'
+
+@Component({
+  name: 'Gameplay',
+  components: {
+    DesktopFooter,
+    DesktopHeader
+  }
+})
+export default class extends Vue {
+  private scale = 1.0
+  private initWidth = 1920
+  get cstyle() {
+    return {
+      // transform: `scale(${this.scale})`
+      zoom: this.scale
+    }
+  }
+
+  beforeMount() {
+    window.addEventListener('resize', this.resizeHandler)
+  }
+
+  mounted() {
+    this.resizeHandler()
+  }
+
+  beforeDestroy() {
+    window.removeEventListener('resize', this.resizeHandler)
+  }
+
+  resizeHandler() {
+    const documentWidth = document.body.clientWidth
+    if (documentWidth < this.initWidth) {
+      this.scale = documentWidth / this.initWidth
+    } else {
+      this.scale = 1
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  max-width: 1920px;
+  margin: 0 auto;
+  background-color: #171717;
+  transform-origin: top;
+}
+</style>

src/views/Index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="container" :style="cstyle">
-    <desktop-header></desktop-header>
+    <desktop-header current-section="gameplay"></desktop-header>
     <top-section></top-section>
     <main-section></main-section>
     <hero-section></hero-section>

src/views/NFT.vue

@@ -0,0 +1,71 @@
+<template>
+  <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>
+    <desktop-footer></desktop-footer>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+import DesktopHeader from '@/components/index/DesktopHeader.vue'
+import DesktopFooter from '@/components/index/DesktopFooter.vue'
+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'
+
+@Component({
+  name: 'Nft',
+  components: {
+    ChipSection,
+    WeaponSection,
+    NftSection,
+    TopSection,
+    DesktopFooter,
+    DesktopHeader
+  }
+})
+export default class extends Vue {
+  private scale = 1.0
+  private initWidth = 1920
+  get cstyle() {
+    return {
+      // transform: `scale(${this.scale})`
+      zoom: this.scale
+    }
+  }
+
+  beforeMount() {
+    window.addEventListener('resize', this.resizeHandler)
+  }
+
+  mounted() {
+    this.resizeHandler()
+  }
+
+  beforeDestroy() {
+    window.removeEventListener('resize', this.resizeHandler)
+  }
+
+  resizeHandler() {
+    const documentWidth = document.body.clientWidth
+    if (documentWidth < this.initWidth) {
+      this.scale = documentWidth / this.initWidth
+    } else {
+      this.scale = 1
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  max-width: 1920px;
+  margin: 0 auto;
+  background-color: #171717;
+  transform-origin: top;
+}
+</style>

src/views/Roadmap.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="container" :style="cstyle">
+    <desktop-header current-section="roadmap"></desktop-header>
+    <desktop-footer></desktop-footer>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+import DesktopHeader from '@/components/index/DesktopHeader.vue'
+import DesktopFooter from '@/components/index/DesktopFooter.vue'
+
+@Component({
+  name: 'Roadmap',
+  components: {
+    DesktopFooter,
+    DesktopHeader
+  }
+})
+export default class extends Vue {
+  private scale = 1.0
+  private initWidth = 1920
+  get cstyle() {
+    return {
+      // transform: `scale(${this.scale})`
+      zoom: this.scale
+    }
+  }
+
+  beforeMount() {
+    window.addEventListener('resize', this.resizeHandler)
+  }
+
+  mounted() {
+    this.resizeHandler()
+  }
+
+  beforeDestroy() {
+    window.removeEventListener('resize', this.resizeHandler)
+  }
+
+  resizeHandler() {
+    const documentWidth = document.body.clientWidth
+    if (documentWidth < this.initWidth) {
+      this.scale = documentWidth / this.initWidth
+    } else {
+      this.scale = 1
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  max-width: 1920px;
+  margin: 0 auto;
+  background-color: #171717;
+  transform-origin: top;
+}
+</style>

src/views/Team.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="container" :style="cstyle">
+    <desktop-header current-section="team"></desktop-header>
+    <desktop-footer></desktop-footer>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+import DesktopHeader from '@/components/index/DesktopHeader.vue'
+import DesktopFooter from '@/components/index/DesktopFooter.vue'
+
+@Component({
+  name: 'Team',
+  components: {
+    DesktopFooter,
+    DesktopHeader
+  }
+})
+export default class extends Vue {
+  private scale = 1.0
+  private initWidth = 1920
+  get cstyle() {
+    return {
+      // transform: `scale(${this.scale})`
+      zoom: this.scale
+    }
+  }
+
+  beforeMount() {
+    window.addEventListener('resize', this.resizeHandler)
+  }
+
+  mounted() {
+    this.resizeHandler()
+  }
+
+  beforeDestroy() {
+    window.removeEventListener('resize', this.resizeHandler)
+  }
+
+  resizeHandler() {
+    const documentWidth = document.body.clientWidth
+    if (documentWidth < this.initWidth) {
+      this.scale = documentWidth / this.initWidth
+    } else {
+      this.scale = 1
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  max-width: 1920px;
+  margin: 0 auto;
+  background-color: #171717;
+  transform-origin: top;
+}
+</style>

src/views/Tokennomic.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="container" :style="cstyle">
+    <desktop-header current-section="tokennomic"></desktop-header>
+    <desktop-footer></desktop-footer>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+import DesktopHeader from '@/components/index/DesktopHeader.vue'
+import DesktopFooter from '@/components/index/DesktopFooter.vue'
+
+@Component({
+  name: 'Tokennomic',
+  components: {
+    DesktopFooter,
+    DesktopHeader
+  }
+})
+export default class extends Vue {
+  private scale = 1.0
+  private initWidth = 1920
+  get cstyle() {
+    return {
+      // transform: `scale(${this.scale})`
+      zoom: this.scale
+    }
+  }
+
+  beforeMount() {
+    window.addEventListener('resize', this.resizeHandler)
+  }
+
+  mounted() {
+    this.resizeHandler()
+  }
+
+  beforeDestroy() {
+    window.removeEventListener('resize', this.resizeHandler)
+  }
+
+  resizeHandler() {
+    const documentWidth = document.body.clientWidth
+    if (documentWidth < this.initWidth) {
+      this.scale = documentWidth / this.initWidth
+    } else {
+      this.scale = 1
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  max-width: 1920px;
+  margin: 0 auto;
+  background-color: #171717;
+  transform-origin: top;
+}
+</style>