You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
62 lines
1.3 KiB
62 lines
1.3 KiB
<template>
|
|
<div class="g-app">
|
|
<div class="g-bd" :style="bdStyle">
|
|
<slot></slot>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
clientHeight: document.documentElement.clientHeight,
|
|
clientWidth: document.documentElement.clientWidth,
|
|
};
|
|
},
|
|
|
|
components: {},
|
|
computed: {
|
|
bdStyle() {
|
|
const { clientHeight, clientWidth } = this;
|
|
console.log("clientHeight", clientHeight);
|
|
const scale = clientWidth / 1920;
|
|
const height = clientHeight / scale;
|
|
const top = (clientHeight - height) / 2;
|
|
const left = (clientWidth - 1920) / 2;
|
|
this.$store.state.fixed1920.height = height;
|
|
return {
|
|
transform: `scale(${scale})`,
|
|
height: `${height}px`,
|
|
left: `${left}px`,
|
|
top: `${top}px`,
|
|
};
|
|
},
|
|
},
|
|
created() {},
|
|
mounted() {
|
|
window.addEventListener("resize", () => {
|
|
this.clientHeight = document.documentElement.clientHeight;
|
|
this.clientWidth = document.documentElement.clientWidth;
|
|
});
|
|
},
|
|
|
|
methods: {},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.g-app {
|
|
position: absolute;
|
|
// width: 1920px;
|
|
width: 100%;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.g-bd {
|
|
position: absolute;
|
|
width: 1920px;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
}
|
|
</style>
|
|
|