72 lines
1.5 KiB
Vue
72 lines
1.5 KiB
Vue
<template>
|
|
<section
|
|
class="base-laytout"
|
|
:style="{ width: `${state.style.width}px`, height: `${state.style.height}px`, transform: `${state.style.transform}` }"
|
|
>
|
|
<custom-scroll-title class="base-laytout-header" />
|
|
<section class="base-laytout-main">
|
|
<router-view />
|
|
</section>
|
|
</section>
|
|
</template>
|
|
<script setup>
|
|
import { onMounted, reactive } from 'vue';
|
|
|
|
const state = reactive({
|
|
style: {
|
|
width: '1920',
|
|
height: '1080',
|
|
transform: 'scaleY(1) scaleX(1) translate(-50%, -50%)',
|
|
},
|
|
scale: {},
|
|
});
|
|
|
|
const getScale = () => {
|
|
const w = window.innerWidth / state.style.width;
|
|
const h = window.innerHeight / state.style.height;
|
|
return { x: w, y: h };
|
|
};
|
|
|
|
const setScale = () => {
|
|
state.scale = getScale();
|
|
state.style.transform = 'scaleY(' + state.scale.y + ') scaleX(' + state.scale.x + ') translate(-50%, -50%)';
|
|
};
|
|
|
|
onMounted(() => {
|
|
setScale();
|
|
window.onresize = () => {
|
|
setScale();
|
|
};
|
|
});
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.base-laytout {
|
|
@include flex-column();
|
|
position: fixed;
|
|
z-index: 100;
|
|
transform-origin: 0 0;
|
|
left: 50%;
|
|
top: 50%;
|
|
transition: 0.3s;
|
|
user-select: none;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
height: 100;
|
|
background:
|
|
url('@/assets/images/basic/containerBG.png') no-repeat center 100%,
|
|
url('@/assets/images/basic/containerBotBG.png') no-repeat bottom center;
|
|
&-header {
|
|
width: 100%;
|
|
height: 60px;
|
|
// margin-bottom: 60px;
|
|
}
|
|
&-main {
|
|
flex: 1;
|
|
min-height: calc(100vh - 60px);
|
|
}
|
|
.base-laytout-header {
|
|
height: 90px;
|
|
}
|
|
}
|
|
</style>
|