<template>
    <div id="app"
        :style="{width: designWidth + 'px', height: designHeight + 'px'}"
    >
        <router-view></router-view>
    </div>
</template>

<script>
import setScale from 'runner/common/utils/refreshSize'

export default {
    name: 'app',

    mixins: [setScale],

    data () {
        return {
            designWidth: 1920, // 设计稿宽度
            designHeight: 1080 // 设计稿高度
        }
    },

    mounted () {
        const bodyStyle = document.body.style
        bodyStyle.overflow = 'auto'

        // 如无需设置自动适配则注释该方法即可
        this.initScale(this.designWidth, this.designHeight)
    },

    methods: {}
}
</script>

<style lang="less">
@import "../static/styles/layoutMain.less";

body {
    background-color: #011428;
}

#app {
    top: 0;
    left: 50%;
    right: 0;
    bottom: 0;
    overflow: hidden;
    user-select: none;
    background-position: center bottom;
    background: url('../static/images/index/bg.png') no-repeat left top;
}
</style>
