<template>
    <div class="main_app">
        <div class="content" :style="contentStyle">
            <popup></popup>
        </div>
    </div>
</template>


<script setup>
import { onMounted, ref } from "vue";
import popup from '@/view/popup/index.vue'

let contentStyle = ref({});

const setDomStyle = () => {
    let radio = 600 / 375;
    let height = window.innerHeight - 80;
    let width = height / radio;

    contentStyle.value = {width: width + 'px', height: height + 'px'};
}

onMounted(() => {
    setDomStyle();
});

</script>

<style lang='scss' scoped>
.main_app {
    height: 97vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    .content {
        box-sizing: border-box;
        box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2);
        border-radius: 15px;
        position: relative;
        overflow-y: auto;
    }
}
/deep/ .page-wrapper {
    width: 100% !important;
    height: 100% !important;
}
</style>
