<template>
<div id="app"
:class="{ 'pc': isPC }"
:style="{'scale': `${this.scaleX} ${this.scaleY}`}">
<router-view />
</div>
</template>
<script>
import { isPC } from './utils/ruoyi'
export default {
data() {
return {
scaleX: 1,
scaleY: 1,
}
},
computed: {
isPC,
},
methods: {
calculateScale() {
const scaleHeightProportion = 1 / 1080
const scaleWidthProportion = 1 / 1920
const windowHeight = window.innerHeight
const pcWidth = (windowHeight * 16) / 9
this.scaleY = scaleHeightProportion * windowHeight
this.scaleX = scaleWidthProportion * pcWidth
},
addWindowListener() {
window.addEventListener('resize', (_) => {
this.calculateScale()
})
},
},
mounted() {
this.calculateScale()
this.addWindowListener()
},
}
</script>
<style lang="scss">
* {
margin: 0;
padding: 0;
list-style-type: none;
}
#app {
position: relative;
overflow: hidden;
}
.pc {
width: 1920px;
height: 1080px;
background: url('./assets/public/bg.png') no-repeat;
}
</style>