113 lines
2.2 KiB
Vue
113 lines
2.2 KiB
Vue
<template>
|
|
<section id="nft-section" data-anchor="nft" :class="{'mobile': mobile}">
|
|
<div class="section-container">
|
|
<title-bar
|
|
:title-img="require('@/assets/202202/nft/hero.png')"
|
|
@dialog-show="showInfo"
|
|
></title-bar>
|
|
<div class="nft-list">
|
|
<img v-for="c in datas" :key="c.name" :src="c.img" class="card" :alt="c.name"/>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Component, Vue } from 'vue-property-decorator'
|
|
import TitleBar from '@/components/nft/TitleBar.vue'
|
|
import { IHeroData } from '@/components/index/HeroScroller.vue'
|
|
import { AppModule, DeviceType } from '@/store/modules/app'
|
|
|
|
@Component({
|
|
name: 'NftSection',
|
|
components: {
|
|
TitleBar
|
|
}
|
|
})
|
|
export default class extends Vue {
|
|
private heroNames = [
|
|
'aoi',
|
|
'yamada',
|
|
'lazar',
|
|
'hill',
|
|
'kurosawa',
|
|
'canoe',
|
|
'miffy',
|
|
'dragonscale',
|
|
'astral',
|
|
'mariana'
|
|
]
|
|
|
|
private datas:IHeroData[] = []
|
|
|
|
get mobile() {
|
|
return AppModule.device === DeviceType.Mobile
|
|
}
|
|
|
|
mounted() {
|
|
for (let i = 0; i < this.heroNames.length; i++) {
|
|
this.datas.push({
|
|
name: this.heroNames[i],
|
|
img: require(`@/assets/202202/card_${this.heroNames[i]}@2x.png`)
|
|
})
|
|
}
|
|
}
|
|
|
|
showInfo() {
|
|
console.log('show info')
|
|
this.$emit('dialog-show', true)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
#nft-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(3, 1fr);
|
|
justify-items: center;
|
|
align-items: center;
|
|
justify-content: center;
|
|
align-content: center;
|
|
grid-row-gap: 80px;
|
|
.card:last-child{
|
|
grid-column-start: 2;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
#nft-section.mobile{
|
|
width: 100vw;
|
|
.section-container{
|
|
width: 100vw;
|
|
padding: 0;
|
|
.nft-list{
|
|
grid-template-columns: repeat(2, 1fr);
|
|
grid-row-gap: 5vw;
|
|
.card{
|
|
width: 50vw;
|
|
height: 55vw;
|
|
}
|
|
.card:nth-child(odd) {
|
|
margin-right: -4vw;
|
|
}
|
|
.card:nth-child(even) {
|
|
margin-left: -3vw;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
</style>
|