66 lines
1.3 KiB
Vue
66 lines
1.3 KiB
Vue
<template>
|
|
<div id="app">
|
|
<div class="flex">
|
|
<apps-nav/>
|
|
<router-view class="components fill"/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style>
|
|
html, body, #app {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#app > .flex {
|
|
height: 100%;
|
|
}
|
|
|
|
.pb-10 {
|
|
padding-bottom: 10px;
|
|
}
|
|
.mb-10{
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.components {
|
|
background: #07193D;
|
|
|
|
}
|
|
</style>
|
|
<script>
|
|
import AppsNav from "@/components/appsNav.vue";
|
|
|
|
export default {
|
|
name: "App",
|
|
components: {AppsNav},
|
|
methods: {
|
|
scaleByAspect() {
|
|
const targetWidth = 1920;
|
|
const targetHeight = 1080;
|
|
const ratio = targetWidth / targetHeight;
|
|
const element = this.$el.querySelector('.components');
|
|
const {width: originalWidth, height: originalHeight} = element.getBoundingClientRect();
|
|
const ratioHeight = originalWidth / ratio;
|
|
let scale
|
|
if (ratioHeight < originalHeight) {
|
|
scale = originalWidth / targetWidth;
|
|
} else {
|
|
scale = originalHeight / targetHeight;
|
|
}
|
|
|
|
element.style.transform = `scale(${scale})`;
|
|
element.style.width = '1920px'
|
|
element.style.height = '1080px'
|
|
element.style.transformOrigin = 'top center';
|
|
}
|
|
},
|
|
mounted() {
|
|
this.scaleByAspect()
|
|
}
|
|
}
|
|
</script>
|