120 lines
3.3 KiB
Vue
120 lines
3.3 KiB
Vue
<template>
|
|
<div class="container" >
|
|
<mobile-header current-section="gameplay"></mobile-header>
|
|
<video-section></video-section>
|
|
<data-cell v-for="data in currentCell" :key="data.title" :data="data"></data-cell>
|
|
<mobile-footer></mobile-footer>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Component, Vue } from 'vue-property-decorator'
|
|
import VideoSection from '@/components/gameplay/VideoSection.vue'
|
|
import { ITabData } from '@/components/tokennomic/TabBar.vue'
|
|
import DataCell from '@/components/gameplay/DataCell.vue'
|
|
import MobileHeader from '@/components/mobile/main/MobileHeader.vue'
|
|
import MobileFooter from '@/components/mobile/main/MobileFooter.vue'
|
|
|
|
@Component({
|
|
name: 'MobileGameplay',
|
|
components: {
|
|
MobileFooter,
|
|
MobileHeader,
|
|
DataCell,
|
|
VideoSection
|
|
}
|
|
})
|
|
export default class MobileGameplay extends Vue {
|
|
private scale = 1.0
|
|
private initWidth = 1920
|
|
private activeTab = ''
|
|
|
|
private tabs: ITabData[] = [
|
|
{
|
|
id: 'pvp',
|
|
name: 'PvP'
|
|
},
|
|
{
|
|
id: 'pve',
|
|
name: 'PvE'
|
|
},
|
|
{
|
|
id: 'upgrade',
|
|
name: 'Upgrade'
|
|
},
|
|
{
|
|
id: 'social',
|
|
name: 'Social'
|
|
}
|
|
]
|
|
|
|
private cells: any[] = [
|
|
{
|
|
title: 'BATTLE ROYALE',
|
|
type: 0,
|
|
icon: require('@/assets/202202/gameplay/icon_pvp.png'),
|
|
mainImg: require('@/assets/202202/gameplay/img_pvp.png'),
|
|
desc: ['Quick play and Rank supported, ranked match has season ranking. ',
|
|
'Up to 40 players parachute onto an island and scavenge for weapons',
|
|
'and equipment to kill others while avoiding getting killed',
|
|
'themselves. The last player or team standing wins the round.']
|
|
},
|
|
{
|
|
title: 'Quest-AFK earning',
|
|
type: 1,
|
|
icon: require('@/assets/202202/gameplay/icon_pve.png'),
|
|
mainImg: require('@/assets/202202/gameplay/img_pve.png'),
|
|
desc: ['No operation needed, automatic battle',
|
|
'Players can go AFK after entering PVE, battle last a certain of time',
|
|
'Tokens will be rewarded for winning the battle while failure leads no rewards'
|
|
]
|
|
},
|
|
{
|
|
title: 'Upgrade NFT to increase reward',
|
|
type: 0,
|
|
icon: require('@/assets/202202/gameplay/icon-upgrade.png'),
|
|
mainImg: require('@/assets/202202/gameplay/img_upgrade.png'),
|
|
desc: ['·Higher level NFT leads to higher level matches that have higher rewards',
|
|
'·Higher level heros and weapons lead to higher win rate',
|
|
'·Higher level heros have higher daily maximum token cap'
|
|
]
|
|
},
|
|
|
|
{
|
|
title: 'Play with your friends',
|
|
type: 1,
|
|
icon: require('@/assets/202202/gameplay/icon_social.png'),
|
|
mainImg: require('@/assets/202202/gameplay/img_social.png'),
|
|
desc: ['Team up with friends in PvP.',
|
|
'Support real-time voice in battle, friend follows, chat room, private',
|
|
'message, live streaming and other funcions'
|
|
]
|
|
}
|
|
]
|
|
|
|
get currentCell() {
|
|
if (this.activeTab) {
|
|
const idx = this.tabs.findIndex(o => o.id === this.activeTab)
|
|
console.log(idx)
|
|
return [this.cells[idx]]
|
|
} else {
|
|
return this.cells
|
|
}
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
</style>
|