33 lines
805 B
Vue
33 lines
805 B
Vue
<template>
|
|
<div class="full-screen-container w-h-full bg-cover fixed flex flex-col top-0 left-0 origin-top-left" ref="container">
|
|
<slot></slot>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref, onMounted, onBeforeUnmount } from 'vue'
|
|
|
|
const { width, height } = screen
|
|
|
|
const container = ref(null)
|
|
|
|
const onResize = () => {
|
|
const currentWidth = document.body.clientWidth
|
|
container.value.style.transform = `scale(${currentWidth / width})`
|
|
}
|
|
|
|
onMounted(() => {
|
|
container.value.style.width = `${width}px`
|
|
container.value.style.height = `${height}px`
|
|
window.addEventListener('resize', onResize)
|
|
})
|
|
onBeforeUnmount(() => {
|
|
window.removeEventListener('resize', onResize)
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.full-screen-container {
|
|
background-image: url('../../assets/img/bg-full.png');
|
|
}
|
|
</style> |