<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/ceg.png" alt="ceg"/>
    </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: 'TabCeg',
  components: {
    TokenAddress,
    TokenInfoTable,
    IconTitleBar
  }
})
export default class extends Vue {
  private tokenInfo: ITokenData = {
    chain: 'KuCoin Community Chain(KCC)',
    symbol: 'CEG',
    type: 'KCS',
    supply: 'Unlimited',
    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>
