缩放记录一下

<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>