89 lines
1.8 KiB
Vue
89 lines
1.8 KiB
Vue
<template>
|
|
<section id="weapon-section" data-anchor="weapon">
|
|
<div class="section-container">
|
|
<title-bar
|
|
:title-img="require('@/assets/202202/nft/weapon.png')"
|
|
@dialog-show="showInfo"
|
|
></title-bar>
|
|
<div class="nft-list">
|
|
<img v-for="c in datas" :key="c.name" :src="c.img" class="weapon" :alt="c.name"/>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Component, Vue } from 'vue-property-decorator'
|
|
import { Message } from 'element-ui'
|
|
import TitleBar from '@/components/nft/TitleBar.vue'
|
|
import { IHeroData } from '@/components/index/HeroScroller.vue'
|
|
|
|
@Component({
|
|
name: 'NftSection',
|
|
components: {
|
|
TitleBar
|
|
}
|
|
})
|
|
export default class extends Vue {
|
|
private heroNames = [
|
|
'assault',
|
|
'shotgun',
|
|
'sniper'
|
|
]
|
|
|
|
private datas:IHeroData[] = []
|
|
|
|
mounted() {
|
|
for (let i = 0; i < this.heroNames.length; i++) {
|
|
this.datas.push({
|
|
name: this.heroNames[i],
|
|
img: require(`@/assets/202202/nft/${this.heroNames[i]}.png`)
|
|
})
|
|
}
|
|
}
|
|
|
|
showInfo() {
|
|
console.log('show info')
|
|
this.$emit('dialog-show', true)
|
|
}
|
|
|
|
comingSoon() {
|
|
Message({
|
|
message: 'coming soon',
|
|
type: 'info',
|
|
duration: 5 * 1000
|
|
})
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
#weapon-section{
|
|
box-sizing: border-box;
|
|
width: 1920px;
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: center;
|
|
.section-container{
|
|
width: 1340px;
|
|
padding: 36px 60px;
|
|
.nft-list{
|
|
margin-top: 46px;
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
justify-items: center;
|
|
align-items: center;
|
|
justify-content: center;
|
|
align-content: center;
|
|
grid-row-gap: 80px;
|
|
.card{
|
|
width: 600px;
|
|
height: 340px;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|