添加手机版tokennomic页面

public/index.html

@@ -4,7 +4,9 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
-<!--    <meta name="viewport" content="width=device-width,initial-scale=1.0">-->
+    <meta name="format-detection" content="telephone=no, email=no" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= htmlWebpackPlugin.options.title %></title>
     <style>
@@ -24,21 +26,6 @@
             overflow-x: hidden;
             scrollbar-width: none;
         }
-        .video-js .vjs-big-play-button {
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            margin: auto;
-        }
-        .vjs-control-bar{
-            display: none!important;
-        }
-
-        ::-webkit-scrollbar {
-            width: 0 !important;
-            display: none;
-        }
         ::-webkit-scrollbar {
             width: 0 !important;height: 0;
             display: none;

src/components/tokennomic/IconTitleBar.vue

@@ -1,10 +1,11 @@
 <template>
-  <div class="icon-title-bar">
+  <div class="icon-title-bar" :class="{'mobile': mobile}">
     <img :src="titleImg" alt="title"/>
   </div>
 </template>
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
+import { AppModule, DeviceType } from '@/store/modules/app'
 
 @Component({
   name: 'IconTitleBar',
@@ -12,7 +13,11 @@ import { Component, Vue } from 'vue-property-decorator'
   },
   props: ['titleImg']
 })
-export default class extends Vue {}
+export default class extends Vue {
+  get mobile() {
+    return AppModule.device === DeviceType.Mobile
+  }
+}
 </script>
 <style lang="scss" scoped>
 .icon-title-bar{
@@ -22,4 +27,9 @@ export default class extends Vue {}
   margin-bottom: 58px;
   margin-top: 58px;
 }
+.icon-title-bar.mobile{
+  img{
+    width: 52vw;
+  }
+}
 </style>

src/components/tokennomic/TabAllocation.vue

@@ -1,15 +1,20 @@
 <template>
-  <div class="root">
+  <div class="root" :class="{'mobile': mobile}">
     <icon-title-bar :title-img="require('@/assets/202202/tokennomic/allocation.png')"></icon-title-bar>
-    <img class="main-img" src="@/assets/202202/tokennomic/allocation-chart.png" alt="allocation"/>
+    <div class="main-img-container">
+      <img class="main-img" src="@/assets/202202/tokennomic/allocation-chart.png" alt="allocation"/>
+    </div>
     <icon-title-bar :title-img="require('@/assets/202202/tokennomic/schedule.png')"></icon-title-bar>
-    <img class="main-img schedule" src="@/assets/202202/tokennomic/schedule-table.png" alt="schedule"/>
+    <div class="main-img-container">
+      <img class="schedule" src="@/assets/202202/tokennomic/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 { AppModule, DeviceType } from '@/store/modules/app'
 
 @Component({
   name: 'TabAllocation',
@@ -18,7 +23,9 @@ import IconTitleBar from '@/components/tokennomic/IconTitleBar.vue'
   }
 })
 export default class extends Vue {
-
+  get mobile() {
+    return AppModule.device === DeviceType.Mobile
+  }
 }
 </script>
 
@@ -29,11 +36,41 @@ export default class extends Vue {
   display: flex;
   flex-direction: column;
   align-items: center;
+  .main-img{
+    width: 756px;
+  }
+  .schedule{
+    width: 756px;
+    margin-bottom: 90px;
+  }
 }
-.main-img{
-  width: 756px;
-}
-.schedule{
-  margin-bottom: 90px;
+.root.mobile{
+  width: 100vw;
+  .main-img-container{
+    width: 84vw;
+    margin-left: auto;
+    margin-right: auto;
+    overflow-y: hidden;
+    overflow-x: scroll;
+    padding-bottom: 8vw;
+    &::-webkit-scrollbar{
+      height: 4px;
+      display: block;
+      background-color: #313131;
+      border-radius: 2px;
+    }
+    &::-webkit-scrollbar-thumb {
+      background-color: #8C8C8C;
+      border-radius: 2px;
+    }
+    .main-img {
+      height: 90vw;
+      width: unset;
+    }
+    .schedule{
+      width: 100vw;
+      margin-bottom: 0;
+    }
+  }
 }
 </style>

src/components/tokennomic/TabBar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="tab-bar" ref="bar">
+  <div class="tab-bar" ref="bar" :class="{'mobile': mobile}">
     <div
       class="tab"
       v-for="d in tabDatas"
@@ -12,6 +12,7 @@
 </template>
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
+import { AppModule, DeviceType } from '@/store/modules/app'
 
 export interface ITabData{
   id: string
@@ -36,7 +37,14 @@ export default class extends Vue {
     bar: HTMLFormElement
   }
 
+  get mobile() {
+    return AppModule.device === DeviceType.Mobile
+  }
+
   get tabStyleObj() {
+    if (this.mobile) {
+      return {}
+    }
     return { width: `${(1 / (this.tabDatas?.length || 1)) * 100}%` }
   }
 
@@ -72,4 +80,15 @@ export default class extends Vue {
     }
   }
 }
+.tab-bar.mobile{
+  border-radius: 4vw;
+  .tab{
+    font-size: 3.7vw;
+    padding: 0 5.8vw;
+    &.active{
+      border-radius: 4vw;
+    }
+  }
+
+}
 </style>

src/components/tokennomic/TabCec.vue

@@ -1,9 +1,11 @@
 <template>
-  <div class="root">
+  <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>
+    <div class="main-img-container">
     <img class="main-img" src="@/assets/202202/tokennomic/cec.png" alt="cec"/>
+    </div>
   </div>
 </template>
 
@@ -12,6 +14,7 @@ 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 { AppModule, DeviceType } from '@/store/modules/app'
 
 @Component({
   name: 'TabCec',
@@ -29,6 +32,10 @@ export default class extends Vue {
     supply: '100,000,000 CEC(100M)',
     address: '0x1dF62f291b2E969fB0849d99D9Ce41e2F137006e'
   }
+
+  get mobile() {
+    return AppModule.device === DeviceType.Mobile
+  }
 }
 </script>
 
@@ -36,9 +43,34 @@ export default class extends Vue {
 .root{
   width: 1288px;
   margin: 0 auto;
+  .main-img{
+    margin-bottom: 80px;
+  }
 }
-.main-img{
-  margin-bottom: 80px;
+.root.mobile{
+  width: 100vw;
+  .main-img-container{
+    width: 84vw;
+    margin-left: auto;
+    margin-right: auto;
+    height: 90vw;
+    overflow-y: hidden;
+    overflow-x: scroll;
+    padding-bottom: 8vw;
+    &::-webkit-scrollbar{
+      height: 4px;
+      display: block;
+      background-color: #313131;
+      border-radius: 2px;
+    }
+    &::-webkit-scrollbar-thumb {
+      background-color: #8C8C8C;
+      border-radius: 2px;
+    }
+    .main-img {
+      height: 90vw;
+    }
+  }
 }
 
 </style>

src/components/tokennomic/TabCeg.vue

@@ -1,9 +1,11 @@
 <template>
-  <div class="root">
+  <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>
-    <img class="main-img" src="@/assets/202202/tokennomic/ceg.png" alt="ceg"/>
+    <div class="main-img-container">
+      <img class="main-img" src="@/assets/202202/tokennomic/ceg.png" alt="ceg"/>
+    </div>
   </div>
 </template>
 
@@ -12,6 +14,7 @@ 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 { AppModule, DeviceType } from '@/store/modules/app'
 
 @Component({
   name: 'TabCeg',
@@ -29,6 +32,10 @@ export default class extends Vue {
     supply: 'Unlimited',
     address: '0x1dF62f291b2E969fB0849d99D9Ce41e2F137006e'
   }
+
+  get mobile() {
+    return AppModule.device === DeviceType.Mobile
+  }
 }
 </script>
 
@@ -36,8 +43,33 @@ export default class extends Vue {
 .root{
   width: 1288px;
   margin: 0 auto;
+  .main-img{
+    margin-bottom: 80px;
+  }
 }
-.main-img{
-  margin-bottom: 80px;
+.root.mobile{
+  width: 100vw;
+  .main-img-container{
+    width: 84vw;
+    margin-left: auto;
+    margin-right: auto;
+    height: 90vw;
+    overflow-y: hidden;
+    overflow-x: scroll;
+    padding-bottom: 8vw;
+    &::-webkit-scrollbar{
+      height: 4px;
+      display: block;
+      background-color: #313131;
+      border-radius: 2px;
+    }
+    &::-webkit-scrollbar-thumb {
+      background-color: #8C8C8C;
+      border-radius: 2px;
+    }
+    .main-img {
+      height: 90vw;
+    }
+  }
 }
 </style>

src/components/tokennomic/TokenAddress.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="token-address">
+  <div class="token-address" :class="{'mobile': mobile}">
     <div class="title">
       <div>${{tokenData.symbol}} Contract Address</div>
       <img
@@ -11,12 +11,13 @@
         alt="copy"
       />
     </div>
-    <div class="content">{{tokenData.type}} {{tokenData.address}}</div>
+    <div class="content"><div>{{tokenData.type}}</div><div> {{tokenData.address}}</div></div>
   </div>
 </template>
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
 import { Message } from 'element-ui'
+import { AppModule, DeviceType } from '@/store/modules/app'
 
 @Component({
   name: 'TokenAddress',
@@ -40,6 +41,10 @@ export default class extends Vue {
       duration: 5 * 1000
     })
   }
+
+  get mobile() {
+    return AppModule.device === DeviceType.Mobile
+  }
 }
 </script>
 <style lang="scss" scoped>
@@ -64,6 +69,30 @@ export default class extends Vue {
     color: white;
     font-size: 26px;
     line-height: 26px;
+    display: flex;
+    flex-direction: row;
+    gap: 16px
+  }
+}
+.token-address.mobile{
+  width: 100vw;
+  padding: 0 8vw;
+  .title{
+    font-size: 3.2vw;
+    flex-direction: column;
+    align-items: flex-start;
+    .cp-btn{
+      width: 21vw;
+      height: 7.5vw;
+    }
+  }
+  .content {
+    font-size: 6.4vw;
+    flex-direction: column;
+    div:last-child {
+      width: 83.7vw;
+      word-wrap: break-word;
+    }
   }
 }
 </style>

src/components/tokennomic/TokenInfoTable.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="token-info">
+  <div class="token-info" :class="{'mobile': mobile}">
     <div class="one-block">
       <div class="title">Blockchain</div>
       <div class="content">{{tokenData.chain}}</div>
@@ -20,6 +20,7 @@
 </template>
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
+import { AppModule, DeviceType } from '@/store/modules/app'
 
 export interface ITokenData{
   chain: string
@@ -41,7 +42,11 @@ declare module 'vue/types/vue' {
   },
   props: ['tokenData']
 })
-export default class extends Vue {}
+export default class extends Vue {
+  get mobile() {
+    return AppModule.device === DeviceType.Mobile
+  }
+}
 </script>
 <style lang="scss" scoped>
 .token-info{
@@ -64,4 +69,27 @@ export default class extends Vue {}
     }
   }
 }
+.token-info.mobile{
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  padding: 0 8vw;
+  margin-top: 11vw;
+  .one-block{
+    width: 50%;
+    .title{
+      font-size: 3.2vw;
+      line-height: 3.2vw;
+    }
+    .content{
+      font-size: 6.4vw;
+      line-height: 6.4vw;
+    }
+  }
+  .one-block:nth-child(3) {
+    width: 100%;
+  }
+  .one-block:nth-child(4) {
+    width: 100%;
+  }
+}
 </style>

src/router/index.ts

@@ -16,6 +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'
 
 Vue.use(VueRouter)
 const mobile = isMobile()
@@ -75,7 +76,7 @@ const routes: Array<RouteConfig> = [
   {
     path: '/tokennomic',
     name: 'Tokennomic',
-    component: Tokennomic
+    component: mobile ? MobileTokennomic : Tokennomic
   },
   {
     path: '/team',

src/views/mobile/Tokennomic.vue

@@ -0,0 +1,90 @@
+<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"/>
+    <tab-bar
+      :select-tab="activeTab"
+      :tab-datas="tabs"
+      @tab-change="tabChange"
+    ></tab-bar>
+    <tab-cec v-show="activeTab==='cec'"></tab-cec>
+    <tab-ceg v-show="activeTab==='ceg'"></tab-ceg>
+    <tab-allocation v-show="activeTab==='allocation'" ></tab-allocation>
+    <mobile-footer></mobile-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 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 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',
+  components: {
+    MobileFooter,
+    MobileHeader,
+    TabAllocation,
+    TabCeg,
+    TabCec,
+    DesktopFooter,
+    DesktopHeader,
+    TabBar
+  }
+})
+export default class MobileTokennomic extends Vue {
+  private activeTab = 'cec'
+
+  get mobile() {
+    return AppModule.device === DeviceType.Mobile
+  }
+
+  private tabs: ITabData[] = [
+    {
+      id: 'cec',
+      name: 'CEC'
+    },
+    {
+      id: 'ceg',
+      name: 'CEG'
+    },
+    {
+      id: 'allocation',
+      name: 'Release & Allocation'
+    }
+  ]
+
+  tabChange(val:string) {
+    console.log('tag change: ', val)
+    this.activeTab = val
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  width: 100vw;
+  margin: 10.4vw auto 0;
+  background-color: #171717;
+  transform-origin: top;
+  .top-bg{
+    width: 100%;
+    margin-bottom: 5vw;
+  }
+}
+.tab-bar{
+  width: 84vw;
+  height: 8vw;
+  line-height: 8vw;
+}
+footer{
+  margin-top: 13vw;
+}
+
+</style>