90 lines
2.2 KiB
Vue
90 lines
2.2 KiB
Vue
<template>
|
|
<div class="container" :style="cstyle">
|
|
<desktop-header current-section="nft" title="NFT"></desktop-header>
|
|
<top-section></top-section>
|
|
<nft-section @dialog-show="showInfo(0)" ></nft-section>
|
|
<weapon-section @dialog-show="showInfo(1)"></weapon-section>
|
|
<chip-section @dialog-show="showInfo(2)"></chip-section>
|
|
<nft-info :dialog-show="infoShow" :type="infoType" @dialog-show="infoShowStatusChange"></nft-info>
|
|
<base-footer></base-footer>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Component, Vue } from 'vue-property-decorator'
|
|
import DesktopHeader from '@/components/index/DesktopHeader.vue'
|
|
import DesktopFooter from '@/components/index/DesktopFooter.vue'
|
|
import TopSection from '@/components/nft/TopSection.vue'
|
|
import NftSection from '@/components/nft/NftSection.vue'
|
|
import WeaponSection from '@/components/nft/WeaponSection.vue'
|
|
import ChipSection from '@/components/nft/ChipSection.vue'
|
|
import NftInfo from '@/components/nft/NftInfo.vue'
|
|
import BaseFooter from '@/components/layout/BaseFooter.vue'
|
|
|
|
@Component({
|
|
name: 'Nft',
|
|
components: {
|
|
BaseFooter,
|
|
NftInfo,
|
|
ChipSection,
|
|
WeaponSection,
|
|
NftSection,
|
|
TopSection,
|
|
DesktopFooter,
|
|
DesktopHeader
|
|
}
|
|
})
|
|
export default class extends Vue {
|
|
private scale = 1.0
|
|
private initWidth = 1920
|
|
private infoShow = false
|
|
private infoType = 0
|
|
|
|
get cstyle() {
|
|
return {
|
|
// transform: `scale(${this.scale})`
|
|
zoom: this.scale
|
|
}
|
|
}
|
|
|
|
beforeMount() {
|
|
window.addEventListener('resize', this.resizeHandler)
|
|
}
|
|
|
|
mounted() {
|
|
this.resizeHandler()
|
|
}
|
|
|
|
beforeDestroy() {
|
|
window.removeEventListener('resize', this.resizeHandler)
|
|
}
|
|
|
|
showInfo(type: number) {
|
|
this.infoType = type
|
|
this.infoShow = true
|
|
}
|
|
|
|
infoShowStatusChange(val: boolean) {
|
|
console.log('infoShowStatusChange: ', val)
|
|
this.infoShow = val
|
|
}
|
|
|
|
resizeHandler() {
|
|
const documentWidth = document.body.clientWidth
|
|
if (documentWidth < this.initWidth) {
|
|
this.scale = documentWidth / this.initWidth
|
|
} else {
|
|
this.scale = 1
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.container{
|
|
max-width: 1920px;
|
|
margin: 0 auto;
|
|
background-color: #171717;
|
|
transform-origin: top;
|
|
}
|
|
</style>
|