124 lines
2.5 KiB
Vue
124 lines
2.5 KiB
Vue
<template>
|
|
<div class="info-panel" :class="{'mobile': mobile}">
|
|
<road-deck :deck-data="currentDeckData"></road-deck>
|
|
</div>
|
|
</template>
|
|
<script lang="ts">
|
|
import { Component, Vue, Watch } from 'vue-property-decorator'
|
|
import { AppModule, DeviceType } from '@/store/modules/app'
|
|
import RoadDeck from '@/components/roadmap/RoadDeck.vue'
|
|
|
|
declare module 'vue/types/vue' {
|
|
interface Vue {
|
|
dataIndex?: number
|
|
}
|
|
}
|
|
|
|
@Component({
|
|
name: 'InfoPanel',
|
|
components: {
|
|
RoadDeck
|
|
},
|
|
props: ['dataIndex']
|
|
})
|
|
export default class InfoPanel extends Vue {
|
|
private currentIdx = 1
|
|
private img = require('@/assets/202202/roadmap/step1.png')
|
|
|
|
private infos = [
|
|
{
|
|
id: 1,
|
|
texts: [
|
|
{
|
|
title: 'Jul. 2021',
|
|
desc: ['Game development kick off']
|
|
}
|
|
]
|
|
},
|
|
{
|
|
id: 2,
|
|
texts: [
|
|
{
|
|
title: 'Nov. 2021',
|
|
desc: ['Complete Alpha Test']
|
|
}
|
|
]
|
|
},
|
|
{
|
|
id: 3,
|
|
texts: [
|
|
{
|
|
title: 'Jan. 2022',
|
|
desc: ['Angel round financing']
|
|
},
|
|
{
|
|
title: 'Feb. 2022',
|
|
desc: ['Private round financing', 'Official website & whitepaper']
|
|
},
|
|
{
|
|
title: 'Mar. 2022',
|
|
desc: ['IGO', 'Beta test']
|
|
}
|
|
]
|
|
},
|
|
{
|
|
id: 4,
|
|
texts: [
|
|
{
|
|
title: 'Apr. 2022',
|
|
desc: ['IDO', 'Official publication, including:', '- Free-to-play ', '- PVP', '- Chatting room ', '- NFT can be leveled up to Lv.10']
|
|
},
|
|
{
|
|
title: 'May. 2022',
|
|
desc: ['New function release:', 'PVE', 'PVP Ranking NFT', 'can be leveled up to Lv.15', 'Mobile version on App Store and Google Play']
|
|
}
|
|
]
|
|
},
|
|
{
|
|
id: 5,
|
|
texts: [
|
|
{
|
|
title: 'Jun. 2022',
|
|
desc: ['Streaming to 3rd party platform']
|
|
},
|
|
{
|
|
title: 'Jul. 2022',
|
|
desc: ['Endorsement from famous esport player']
|
|
},
|
|
{
|
|
title: 'Aug. 2022',
|
|
desc: ['3D version game available']
|
|
}
|
|
]
|
|
}
|
|
]
|
|
|
|
get mobile() {
|
|
return AppModule.device === DeviceType.Mobile
|
|
}
|
|
|
|
@Watch('dataIndex')
|
|
private indexChange() {
|
|
this.currentIdx = this.dataIndex!
|
|
}
|
|
|
|
get currentDeckData() {
|
|
return this.infos[(this.dataIndex || 1) - 1]
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.info-panel{
|
|
width: 472px;
|
|
height: 472px;
|
|
img{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.info-panel.mobile{
|
|
width: 98vw;
|
|
height: 98vw;
|
|
}
|
|
</style>
|