将tokennomic改为tokenomic, 增加roadmap页面

src/components/index/DesktopFooter.vue

@@ -19,7 +19,7 @@
         <div class="title">Product</div>
         <a href="/">Home</a>
         <a href="/gameplay">Gameplay</a>
-        <a href="/tokennomic">Tokennomic</a>
+        <a href="/tokenomic">Tokenomic</a>
         <a href="/nft">NFT</a>
         <a href="javascript:void(0);" @click="comingSoon">Marketplace</a>
       </div>

src/components/index/DesktopHeader.vue

@@ -7,7 +7,7 @@
       <li :class="{'active': currentSection === 'home'}"><a href="/">Home</a></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 === 'tokenomic'}"><a href="/tokenomic">Tokenomic</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>

src/components/mobile/main/MobileFooter.vue

@@ -22,7 +22,7 @@
         </div>
         <a href="/">Home</a>
         <a href="/gameplay">Gameplay</a>
-        <a href="/tokennomic">Tokennomic</a>
+        <a href="/tokenomic">Tokenomic</a>
         <a href="/nft">NFT</a>
         <a href="javascript:void(0);" @click="comingSoon">Marketplace</a>
       </div>

src/components/mobile/main/MobileHeader.vue

@@ -7,7 +7,7 @@
         <a class="one-menu" href="/" :class="{'active': currentSection === 'home'}">Home</a>
         <a class="one-menu" href="/gameplay" :class="{'active': currentSection === 'gameplay'}">GamePlay</a>
         <a class="one-menu" href="/nft" :class="{'active': currentSection === 'nft'}">NFT</a>
-        <a class="one-menu" href="/tokennomic" :class="{'active': currentSection === 'tokennomic'}">Tokennomic</a>
+        <a class="one-menu" href="/tokenomic" :class="{'active': currentSection === 'tokenomic'}">Tokenomic</a>
         <a class="one-menu" href="/team" :class="{'active': currentSection === 'team'}">Team</a>
         <a class="one-menu" href="/roadmap" :class="{'active': currentSection === 'roadmap'}">Roadmap</a>
         <div class="market-btn" @click="comingSoon">

src/components/roadmap/InfoPanel.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="root" :class="{'mobile': mobile}">
+
+  </div>
+</template>
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+import { AppModule, DeviceType } from '@/store/modules/app'
+
+@Component({
+  name: 'InfoPanel',
+  components: {
+  }
+})
+export default class InfoPanel extends Vue {
+  get mobile() {
+    return AppModule.device === DeviceType.Mobile
+  }
+}
+</script>
+<style lang="scss" scoped>
+.root{
+
+}
+</style>

src/components/roadmap/OneIcon.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="">
+
+  </div>
+</template>
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+
+@Component({
+  name: 'OneIcon',
+  components: {
+  }
+})
+export default class OneIcon extends Vue {}
+</script>
+<style lang="scss" scoped>
+
+</style>

src/components/roadmap/ProgressBar.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="" :class="{'mobile': mobile}">
+
+  </div>
+</template>
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+import { AppModule, DeviceType } from '@/store/modules/app'
+
+@Component({
+  name: 'ProgressBar',
+  components: {
+  }
+})
+export default class ProgressBar extends Vue {
+  get mobile() {
+    return AppModule.device === DeviceType.Mobile
+  }
+}
+</script>
+<style lang="scss" scoped>
+
+</style>

src/components/roadmap/ProgressMap.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="root" :class="{'mobile': mobile}">
+
+  </div>
+</template>
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+import { AppModule, DeviceType } from '@/store/modules/app'
+
+@Component({
+  name: 'ProgressMap',
+  components: {
+  }
+})
+export default class ProgressMap extends Vue {
+  get mobile() {
+    return AppModule.device === DeviceType.Mobile
+  }
+}
+</script>
+<style lang="scss" scoped>
+.root{
+  height: 637px;
+  padding: 60px 353px 106px 0
+}
+</style>

src/components/tokenomic/TabAllocation.vue

@@ -1,19 +1,19 @@
 <template>
   <div class="root" :class="{'mobile': mobile}">
-    <icon-title-bar :title-img="require('@/assets/202202/tokennomic/allocation.png')"></icon-title-bar>
+    <icon-title-bar :title-img="require('@/assets/202202/tokenomic/allocation.png')"></icon-title-bar>
     <div class="main-img-container">
-      <img class="main-img" src="@/assets/202202/tokennomic/allocation-chart.png" alt="allocation"/>
+      <img class="main-img" src="@/assets/202202/tokenomic/allocation-chart.png" alt="allocation"/>
     </div>
-    <icon-title-bar :title-img="require('@/assets/202202/tokennomic/schedule.png')"></icon-title-bar>
+    <icon-title-bar :title-img="require('@/assets/202202/tokenomic/schedule.png')"></icon-title-bar>
     <div class="main-img-container">
-      <img class="schedule" src="@/assets/202202/tokennomic/schedule-table.png" alt="schedule"/>
+      <img class="schedule" src="@/assets/202202/tokenomic/schedule-table.png" alt="schedule"/>
     </div>
   </div>
 </template>
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
-import IconTitleBar from '@/components/tokennomic/IconTitleBar.vue'
+import IconTitleBar from '@/components/tokenomic/IconTitleBar.vue'
 import { AppModule, DeviceType } from '@/store/modules/app'
 
 @Component({

src/components/tokenomic/TabBar.vue

@@ -72,7 +72,7 @@ export default class extends Vue {
     font-size: 24px;
     &.active {
       color: #A37734;
-      background-image: url('../../assets/202202/tokennomic/tab-active.png');
+      background-image: url('../../assets/202202/tokenomic/tab-active.png');
       background-repeat: no-repeat;
       background-position: top;
       background-size: 100% 100%;

src/components/tokenomic/TabCec.vue

@@ -2,18 +2,18 @@
   <div class="root" :class="{'mobile': mobile}">
     <token-info-table :token-data="tokenInfo"></token-info-table>
     <token-address :token-data="tokenInfo"></token-address>
-    <icon-title-bar :title-img="require('@/assets/202202/tokennomic/user-case.png')"></icon-title-bar>
+    <icon-title-bar :title-img="require('@/assets/202202/tokenomic/user-case.png')"></icon-title-bar>
     <div class="main-img-container">
-    <img class="main-img" src="@/assets/202202/tokennomic/cec.png" alt="cec"/>
+    <img class="main-img" src="@/assets/202202/tokenomic/cec.png" alt="cec"/>
     </div>
   </div>
 </template>
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
-import IconTitleBar from '@/components/tokennomic/IconTitleBar.vue'
-import TokenInfoTable, { ITokenData } from '@/components/tokennomic/TokenInfoTable.vue'
-import TokenAddress from '@/components/tokennomic/TokenAddress.vue'
+import IconTitleBar from '@/components/tokenomic/IconTitleBar.vue'
+import TokenInfoTable, { ITokenData } from '@/components/tokenomic/TokenInfoTable.vue'
+import TokenAddress from '@/components/tokenomic/TokenAddress.vue'
 import { AppModule, DeviceType } from '@/store/modules/app'
 
 @Component({

src/components/tokenomic/TabCeg.vue

@@ -2,18 +2,18 @@
   <div class="root" :class="{'mobile': mobile}">
     <token-info-table :token-data="tokenInfo"></token-info-table>
     <token-address :token-data="tokenInfo"></token-address>
-    <icon-title-bar :title-img="require('@/assets/202202/tokennomic/user-case.png')"></icon-title-bar>
+    <icon-title-bar :title-img="require('@/assets/202202/tokenomic/user-case.png')"></icon-title-bar>
     <div class="main-img-container">
-      <img class="main-img" src="@/assets/202202/tokennomic/ceg.png" alt="ceg"/>
+      <img class="main-img" src="@/assets/202202/tokenomic/ceg.png" alt="ceg"/>
     </div>
   </div>
 </template>
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
-import IconTitleBar from '@/components/tokennomic/IconTitleBar.vue'
-import TokenInfoTable, { ITokenData } from '@/components/tokennomic/TokenInfoTable.vue'
-import TokenAddress from '@/components/tokennomic/TokenAddress.vue'
+import IconTitleBar from '@/components/tokenomic/IconTitleBar.vue'
+import TokenInfoTable, { ITokenData } from '@/components/tokenomic/TokenInfoTable.vue'
+import TokenAddress from '@/components/tokenomic/TokenAddress.vue'
 import { AppModule, DeviceType } from '@/store/modules/app'
 
 @Component({

src/components/tokenomic/TokenAddress.vue

@@ -4,7 +4,7 @@
       <div>${{tokenData.symbol}} Contract Address</div>
       <img
         class='cp-btn'
-        src="@/assets/202202/tokennomic/copy.png"
+        src="@/assets/202202/tokenomic/copy.png"
         v-clipboard:copy="tokenData.address"
         v-clipboard:success="onCopy"
         v-clipboard:error="onCopyError"

src/router/index.ts

@@ -8,7 +8,7 @@ import Index from '@/views/desktop/Index.vue'
 import Presale from '@/views/desktop/Presale.vue'
 import NFT from '@/views/desktop/NFT.vue'
 import Gameplay from '@/views/desktop/Gameplay.vue'
-import Tokennomic from '@/views/desktop/Tokennomic.vue'
+import Tokenomic from '@/views/desktop/Tokenomic.vue'
 import Team from '@/views/desktop/Team.vue'
 import Roadmap from '@/views/desktop/Roadmap.vue'
 import MobileIndex from '@/views/mobile/Index.vue'
@@ -16,7 +16,7 @@ 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'
-import MobileTokennomic from '@/views/mobile/Tokennomic.vue'
+import MobileTokennomic from '@/views/mobile/Tokenomic.vue'
 import MobileTeam from '@/views/mobile/Team.vue'
 
 Vue.use(VueRouter)
@@ -75,9 +75,9 @@ const routes: Array<RouteConfig> = [
     component: mobile ? MobileGameplay : Gameplay
   },
   {
-    path: '/tokennomic',
-    name: 'Tokennomic',
-    component: mobile ? MobileTokennomic : Tokennomic
+    path: '/tokenomic',
+    name: 'Tokenomic',
+    component: mobile ? MobileTokennomic : Tokenomic
   },
   {
     path: '/team',

src/views/desktop/Gameplay.vue

@@ -17,7 +17,7 @@ import { Component, Vue } from 'vue-property-decorator'
 import DesktopHeader from '@/components/index/DesktopHeader.vue'
 import DesktopFooter from '@/components/index/DesktopFooter.vue'
 import VideoSection from '@/components/gameplay/VideoSection.vue'
-import TabBar, { ITabData } from '@/components/tokennomic/TabBar.vue'
+import TabBar, { ITabData } from '@/components/tokenomic/TabBar.vue'
 import DataCell from '@/components/gameplay/DataCell.vue'
 
 @Component({

src/views/desktop/Roadmap.vue

@@ -1,6 +1,12 @@
 <template>
   <div class="container" :style="cstyle">
     <desktop-header current-section="roadmap"></desktop-header>
+    <div class="content">
+      <div class="title-bar">
+        <img src="@/assets/202202/roadmap/icon-text.png" alt="funder team"/>
+      </div>
+      <progress-map></progress-map>
+    </div>
     <desktop-footer></desktop-footer>
   </div>
 </template>
@@ -9,10 +15,12 @@
 import { Component, Vue } from 'vue-property-decorator'
 import DesktopHeader from '@/components/index/DesktopHeader.vue'
 import DesktopFooter from '@/components/index/DesktopFooter.vue'
+import ProgressMap from '@/components/roadmap/ProgressMap.vue'
 
 @Component({
   name: 'Roadmap',
   components: {
+    ProgressMap,
     DesktopFooter,
     DesktopHeader
   }
@@ -22,7 +30,6 @@ export default class extends Vue {
   private initWidth = 1920
   get cstyle() {
     return {
-      // transform: `scale(${this.scale})`
       zoom: this.scale
     }
   }
@@ -55,5 +62,23 @@ export default class extends Vue {
   margin: 0 auto;
   background-color: #171717;
   transform-origin: top;
+  .content{
+    width: 1920px;
+    height: 1170px;
+    background-image: url('../../assets/202202/roadmap/background.png');
+    background-repeat: repeat;
+    background-color: white;
+    display: flex;
+    .title-bar {
+      margin-top: 90px;
+      display: flex;
+      justify-content: center;
+      width: 100%;
+      img{
+        width: 410px;
+        height: 82px;
+      }
+    }
+  }
 }
 </style>

src/views/desktop/Team.vue

@@ -47,7 +47,7 @@ export default class extends Vue {
   private teamList = [{
     avatar: require('@/assets/202202/team/luca_ganzedda.png'),
     name: 'Luca Ganzedda',
-    job: 'Tokennomic Manager',
+    job: 'Tokenomic Manager',
     intro: [
       'Luca has accumulated a lot of project experience in different field, including DAO,NFT, Gamefi and DeFi, and good at token economic model design,digital asset consulting, IDO/IEO guidance.',
       'Luca has the master degree in economics, and double bachelor’s degree in macroeconomics and Economics.'

src/views/desktop/Tokenomic.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="container" :style="cstyle">
-    <desktop-header current-section="tokennomic"></desktop-header>
-    <img class="top-bg" src="@/assets/202202/tokennomic/tokennomic_bg.png" alt="top bg"/>
+    <desktop-header current-section="tokenomic"></desktop-header>
+    <img class="top-bg" src="@/assets/202202/tokenomic/tokennomic_bg.png" alt="top bg"/>
     <tab-bar
       :select-tab="activeTab"
       :tab-datas="tabs"
@@ -19,13 +19,13 @@
 import { Component, Vue } from 'vue-property-decorator'
 import DesktopHeader from '@/components/index/DesktopHeader.vue'
 import DesktopFooter from '@/components/index/DesktopFooter.vue'
-import TabCec from '@/components/tokennomic/TabCec.vue'
-import TabCeg from '@/components/tokennomic/TabCeg.vue'
-import TabBar, { ITabData } from '@/components/tokennomic/TabBar.vue'
-import TabAllocation from '@/components/tokennomic/TabAllocation.vue'
+import TabCec from '@/components/tokenomic/TabCec.vue'
+import TabCeg from '@/components/tokenomic/TabCeg.vue'
+import TabBar, { ITabData } from '@/components/tokenomic/TabBar.vue'
+import TabAllocation from '@/components/tokenomic/TabAllocation.vue'
 
 @Component({
-  name: 'Tokennomic',
+  name: 'Tokenomic',
   components: {
     TabAllocation,
     TabCeg,

src/views/mobile/Gameplay.vue

@@ -10,7 +10,7 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
 import VideoSection from '@/components/gameplay/VideoSection.vue'
-import { ITabData } from '@/components/tokennomic/TabBar.vue'
+import { ITabData } from '@/components/tokenomic/TabBar.vue'
 import DataCell from '@/components/gameplay/DataCell.vue'
 import MobileHeader from '@/components/mobile/main/MobileHeader.vue'
 import MobileFooter from '@/components/mobile/main/MobileFooter.vue'

src/views/mobile/Team.vue

@@ -49,7 +49,7 @@ export default class MobileTeam extends Vue {
   private teamList = [{
     avatar: require('@/assets/202202/team/luca_ganzedda.png'),
     name: 'Luca Ganzedda',
-    job: 'Tokennomic Manager',
+    job: 'Tokenomic Manager',
     intro: [
       'Luca has accumulated a lot of project experience in different field, including DAO,NFT, Gamefi and DeFi, and good at token economic model design,digital asset consulting, IDO/IEO guidance.',
       'Luca has the master degree in economics, and double bachelor’s degree in macroeconomics and Economics.'

src/views/mobile/Tokenomic.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="container" >
-    <mobile-header current-section="tokennomic"></mobile-header>
-    <img class="top-bg" src="@/assets/mobile/tokennomic/cebg_banner4.png" alt="top bg"/>
+    <mobile-header current-section="tokenomic"></mobile-header>
+    <img class="top-bg" src="@/assets/mobile/tokenomic/cebg_banner4.png" alt="top bg"/>
     <tab-bar
       :select-tab="activeTab"
       :tab-datas="tabs"
@@ -18,16 +18,16 @@
 import { Component, Vue } from 'vue-property-decorator'
 import DesktopHeader from '@/components/index/DesktopHeader.vue'
 import DesktopFooter from '@/components/index/DesktopFooter.vue'
-import TabCec from '@/components/tokennomic/TabCec.vue'
-import TabCeg from '@/components/tokennomic/TabCeg.vue'
-import TabBar, { ITabData } from '@/components/tokennomic/TabBar.vue'
-import TabAllocation from '@/components/tokennomic/TabAllocation.vue'
+import TabCec from '@/components/tokenomic/TabCec.vue'
+import TabCeg from '@/components/tokenomic/TabCeg.vue'
+import TabBar, { ITabData } from '@/components/tokenomic/TabBar.vue'
+import TabAllocation from '@/components/tokenomic/TabAllocation.vue'
 import MobileHeader from '@/components/mobile/main/MobileHeader.vue'
 import MobileFooter from '@/components/mobile/main/MobileFooter.vue'
 import { AppModule, DeviceType } from '@/store/modules/app'
 
 @Component({
-  name: 'MobileTokennomic',
+  name: 'MobileTokenomic',
   components: {
     MobileFooter,
     MobileHeader,
@@ -39,7 +39,7 @@ import { AppModule, DeviceType } from '@/store/modules/app'
     TabBar
   }
 })
-export default class MobileTokennomic extends Vue {
+export default class MobileTokenomic extends Vue {
   private activeTab = 'cec'
 
   get mobile() {