将tokenomic的表格改为table

src/components/layout/BaseFooter.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="">
+    <desktop-footer v-if="!mobile"></desktop-footer>
+    <mobile-footer v-if="mobile"></mobile-footer>
+  </div>
+</template>
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+import { AppModule, DeviceType } from '@/store/modules/app'
+import DesktopFooter from '@/components/index/DesktopFooter.vue'
+import MobileFooter from '@/components/mobile/main/MobileFooter.vue'
+
+@Component({
+  name: 'Footer',
+  components: {
+    MobileFooter,
+    DesktopFooter
+  }
+})
+export default class BaseFooter extends Vue {
+  get mobile() {
+    return AppModule.device === DeviceType.Mobile
+  }
+}
+</script>
+<style lang="scss" scoped>
+
+</style>

src/components/market/NftTypeBar.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="nft-type-bar">
+    <div class="type-item "
+         v-for="(s, i) in types"
+         :key="i"
+         :class="{'active': selected === s}"
+    >{{s}}</div>
+  </div>
+</template>
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+
+@Component({
+  name: 'NftTypeBar',
+  components: {
+  }
+})
+export default class NftTypeBar extends Vue {
+  private types = [
+    'Hero',
+    'Weapon',
+    'Chip'
+  ]
+
+  private selected = 'Hero'
+}
+</script>
+<style lang="scss" scoped>
+.nft-type-bar{
+  width: 100%;
+  color: white;
+  display: flex;
+  justify-content: space-between;
+  .type-item{
+    font-size: 20px;
+    line-height: 32px;
+    &.active{
+      color: #46E0F4;
+      text-decoration: underline;
+    }
+  }
+}
+</style>

src/components/market/SearchResult.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="searchResult">
+    <nft-type-bar></nft-type-bar>
     <div class="wrapper">
       <sort-select v-if="showSort"></sort-select>
       <button class="general-btn btnFilter" v-if="showSort" @click="showFilter">
@@ -15,6 +16,7 @@ import { Component, Vue } from 'vue-property-decorator'
 import SortSelect from '@/components/market/SortSelect.vue'
 import CardList from '@/components/market/CardList.vue'
 import ResultNo from '@/components/market/ResultNo.vue'
+import NftTypeBar from '@/components/market/NftTypeBar.vue'
 
 declare module 'vue/types/vue' {
   interface Vue {
@@ -24,6 +26,7 @@ declare module 'vue/types/vue' {
 @Component({
   name: 'SearchResult',
   components: {
+    NftTypeBar,
     ResultNo,
     CardList,
     SortSelect

src/components/market/TopMenu.vue

@@ -268,6 +268,7 @@ export default class extends Vue {
   text-decoration: none;
   line-height: 80px;
   height: 80px;
+  cursor: pointer;
 }
 .walletBtn span{
   vertical-align: bottom;
@@ -355,6 +356,7 @@ export default class extends Vue {
       color: #ffffff;
       padding: 1.5em 0;
       text-decoration: none;
+      cursor: pointer;
 
       &:not(:first-child) {
         border-top: 1px solid #3d2a84;

src/components/market/TopUserInfo.vue

@@ -39,6 +39,7 @@
 import { Component, Vue } from 'vue-property-decorator'
 import { BlockChain } from '@/utils/blockchain'
 import { AppModule } from '@/store/modules/app'
+import VueClipboard from 'vue-clipboard2'
 
 @Component({
   name: 'TopUserInfo',
@@ -51,6 +52,10 @@ export default class extends Vue {
     this.$emit('close-self')
   }
 
+  beforeMount() {
+    Vue.use(VueClipboard)
+  }
+
   get walletCollected() {
     return AppModule.walletConnected
   }

src/components/tokenomic/TabAllocation.vue

@@ -6,7 +6,72 @@
     </div>
     <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/tokenomic/schedule-table.png" alt="schedule"/>
+      <table class="allocation-table">
+        <thead>
+          <tr>
+            <th width="30%"></th>
+            <th width="9%">TGE</th>
+            <th width="16%">Locking period</th>
+            <th>Release(linear)</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>15% Team</td>
+            <td>-</td>
+            <td>6m</td>
+            <td>5% release for 6 months and 12 months respectively;<br/> 15% linear release per 6 month afterwards</td>
+          </tr>
+          <tr>
+            <td>5% Advisors</td>
+            <td>-</td>
+            <td>6m</td>
+            <td>15% per 6 month</td>
+          </tr>
+          <tr>
+            <td>8% Angel Round</td>
+            <td>3%</td>
+            <td>6m</td>
+            <td>Linear release per quarter in 2 years</td>
+          </tr>
+          <tr>
+            <td>6% Private Round</td>
+            <td>5%</td>
+            <td>6m</td>
+            <td>Linear release per quarter in 2 years</td>
+          </tr>
+          <tr>
+            <td>35% Play to Earn</td>
+            <td>-</td>
+            <td>-</td>
+            <td>Released at a 15% annual reduction in production</td>
+          </tr>
+          <tr>
+            <td>19% Staking and Liquidity Mining</td>
+            <td>-</td>
+            <td>-</td>
+            <td>Released at a 15% annual reduction in production</td>
+          </tr>
+          <tr>
+            <td>9% Ecosystem Construction</td>
+            <td>10%</td>
+            <td>TGE 10%</td>
+            <td>Linear release per quarter in 30 months</td>
+          </tr>
+          <tr>
+            <td>2% Initial Liquidity Pool</td>
+            <td>100%</td>
+            <td>-</td>
+            <td>-</td>
+          </tr>
+          <tr>
+            <td>1% IDO</td>
+            <td>100%</td>
+            <td>-</td>
+            <td></td>
+          </tr>
+        </tbody>
+      </table>
     </div>
   </div>
 </template>
@@ -43,6 +108,49 @@ export default class extends Vue {
     width: 960px;
     margin-bottom: 90px;
   }
+  .allocation-table{
+    width: 960px;
+    color: white;
+    font-size: 14px;
+    margin-bottom: 50px;
+    thead{
+      tr{
+        th{
+          text-align: center;
+          border-bottom: 3px solid #7c7c7c;
+          border-top: 3px solid #7c7c7c;
+          line-height: 54px;
+          &:not(:last-child) {
+            border-right: 3px solid #7c7c7c;
+          }
+        }
+      }
+    }
+    tbody{
+      tr{
+        td{
+          font-weight: 500;
+          text-align: center;
+          border-bottom: 1px solid #7c7c7c;
+          line-height: 54px;
+          &:not(:last-child) {
+            border-right: 3px solid #7c7c7c;
+          }
+          &:first-child{
+            text-align: left;
+            padding-left: 20px;
+          }
+          &:last-child{
+            text-align: right;
+            padding-right: 50px;
+          }
+        }
+        &:first-child td{
+          line-height: 30px;
+        }
+      }
+    }
+  }
 }
 .root.mobile{
   width: 100vw;
@@ -72,5 +180,22 @@ export default class extends Vue {
       margin-bottom: 0;
     }
   }
+  .allocation-table{
+    width: 200vw;
+    font-size: 3.4vw;
+    tbody{
+      tr{
+        td{
+          line-height: 14vw;
+          &:last-child{
+            padding-right: 40px;
+          }
+        }
+        &:first-child td{
+          line-height: 8vw;
+        }
+      }
+    }
+  }
 }
 </style>

src/views/desktop/Item.vue

@@ -4,6 +4,7 @@
     <div class="root">
       <nft-detail :data="nftData"></nft-detail>
     </div>
+    <base-footer></base-footer>
   </div>
 </template>
 
@@ -15,9 +16,11 @@ import NftDetail from '@/components/market/NftDetail.vue'
 import { INftAttr, ISpineData } from '@/utils/SpineRender'
 import { defaultINftAttr, getNftDetail } from '@/api/Mall'
 import { AppModule } from '@/store/modules/app'
+import BaseFooter from '@/components/layout/BaseFooter.vue'
 
 @Component({
   components: {
+    BaseFooter,
     NftDetail,
     ItemDetail,
     TopMenu

src/views/desktop/Market.vue

@@ -1,12 +1,13 @@
 <template>
   <div>
-  <top-menu class="desk-top" :current-tab="currentTab"></top-menu>
-  <section class="root">
-    <div class="container">
-      <search-panel @filter-show="showFilter" :class="{'show': mobileFilterShow}"></search-panel>
-      <search-result @filter-show="showFilter" :show-sort="true"></search-result>
-    </div>
-  </section>
+    <top-menu class="desk-top" :current-tab="currentTab"></top-menu>
+    <section class="root">
+      <div class="container">
+        <search-panel @filter-show="showFilter" :class="{'show': mobileFilterShow}"></search-panel>
+        <search-result @filter-show="showFilter" :show-sort="true"></search-result>
+      </div>
+    </section>
+    <base-footer></base-footer>
   </div>
 </template>
 
@@ -15,9 +16,11 @@ import { Component, Vue } from 'vue-property-decorator'
 import SearchPanel from '@/components/market/SearchPanel.vue'
 import SearchResult from '@/components/market/SearchResult.vue'
 import TopMenu from '@/components/market/TopMenu.vue'
+import BaseFooter from '@/components/layout/BaseFooter.vue'
 
 @Component({
   components: {
+    BaseFooter,
     SearchResult,
     SearchPanel,
     TopMenu

src/views/desktop/MyNft.vue

@@ -6,6 +6,7 @@
       <nft-list :nft-datas="nftList"></nft-list>
     </div>
   </section>
+    <base-footer></base-footer>
   </div>
 </template>
 
@@ -18,9 +19,11 @@ import NftList from '@/components/market/NftList.vue'
 import { INftAttr, ISpineData } from '@/utils/SpineRender'
 import { getNftList } from '@/api/Mall'
 import { AppModule } from '@/store/modules/app'
+import BaseFooter from '@/components/layout/BaseFooter.vue'
 
 @Component({
   components: {
+    BaseFooter,
     NftList,
     SearchResult,
     SearchPanel,