90 lines
1.7 KiB
Vue
90 lines
1.7 KiB
Vue
<template>
|
|
<div id="m" class="content">
|
|
<div id="container">
|
|
<!-- <div id="header">
|
|
<img class="title" src="../assets/img_07.png" alt="" />
|
|
</div> -->
|
|
<Header />
|
|
<router-view />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import Header from "../components/header.vue";
|
|
|
|
import { ref, onMounted, onBeforeMount } from "vue";
|
|
|
|
const reset_font = () => {
|
|
let width = document.documentElement.clientWidth || document.body.clientWidth;
|
|
let height =
|
|
document.documentElement.clientHeight || document.body.clientHeight;
|
|
document.querySelector("#m").style.transformOrigin = "top left";
|
|
document.querySelector("#m").style.transform =
|
|
"scale(" + width / 1920 + "," + height / 1080 + ")";
|
|
};
|
|
onMounted(() => {
|
|
reset_font();
|
|
reset_font();
|
|
});
|
|
window.addEventListener("resize", function () {
|
|
reset_font();
|
|
reset_font();
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.content {
|
|
background: url("../assets/bgImg.png") no-repeat 0/100% 100%;
|
|
// background-image: url("../assets/bgImg.png");
|
|
// background-size: 100% 100%;
|
|
// background-repeat: no-repeat;
|
|
// height: 100vh;
|
|
// width: 100vw;
|
|
// overflow: hidden;
|
|
}
|
|
* {
|
|
padding: 0;
|
|
margin: 0;
|
|
box-sizing: border-box;
|
|
// color: #ccffff;
|
|
}
|
|
html {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
body {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
#m {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
// position: absolute;
|
|
z-index: 101;
|
|
|
|
}
|
|
#emap {
|
|
width: 100%;
|
|
height: 980px;
|
|
position: absolute;
|
|
top: 100px;
|
|
left: 0;
|
|
z-index: 100;
|
|
}
|
|
#container {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.main {
|
|
* {
|
|
pointer-events: all;
|
|
}
|
|
}
|
|
</style>
|