2022-02-25 14:06:42 +08:00

77 lines
1.8 KiB
Vue

<template>
<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/tokenomic/user-case.png')"></icon-title-bar>
<div class="main-img-container">
<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/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({
name: 'TabCec',
components: {
TokenAddress,
TokenInfoTable,
IconTitleBar
}
})
export default class extends Vue {
private tokenInfo: ITokenData = {
chain: 'KuCoin Community Chain(KCC)',
symbol: 'CEC',
type: 'KCS',
supply: '100,000,000 CEC(100M)',
address: 'COMING SOON'
}
get mobile() {
return AppModule.device === DeviceType.Mobile
}
}
</script>
<style lang="scss" scoped>
.root{
width: 1288px;
margin: 0 auto;
.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>