bemarket/src/views/mobile/Tokennomic.vue
2022-02-24 11:03:57 +08:00

91 lines
2.1 KiB
Vue

<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>