bemarket/src/views/NFT.vue
2022-02-21 11:37:03 +08:00

86 lines
2.1 KiB
Vue

<template>
<div class="container" :style="cstyle">
<desktop-header current-section="nft"></desktop-header>
<top-section></top-section>
<nft-section @dialog-show="infoShowStatusChange" ></nft-section>
<weapon-section @dialog-show="infoShowStatusChange"></weapon-section>
<chip-section @dialog-show="infoShowStatusChange"></chip-section>
<desktop-footer></desktop-footer>
<nft-info :dialog-show="infoShow" @dialog-show="infoShowStatusChange"></nft-info>
</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'
@Component({
name: 'Nft',
components: {
NftInfo,
ChipSection,
WeaponSection,
NftSection,
TopSection,
DesktopFooter,
DesktopHeader
}
})
export default class extends Vue {
private scale = 1.0
private initWidth = 1920
private infoShow = false
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() {
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>