<template>
<div class="big-screen-layout">
<div class="big-screen-lay-bg" :style="{ background: bgElement }">
<div class="big-screen-lay-wrap" style="width: 1920px; height: 1080px;" ref="ScaleBox">
<slot />
</div>
</div>
</div>
</template>
<script>
export default {
name: 'BigScreenLayout',
props: {
bgElement: {
// 也可以直接传入背景图片 `url(${require('../../assets/ico/timg.jpg')})`
type: String,
value: '#000',
},
},
data() {
return {
scale: null,
}
},
mounted() {
if (this.loading) return
this.setScale()
if (!document.addEventListener) return
window.addEventListener('resize', this.debounce(this.setScale, 500, true))
document.addEventListener('DOMContentLoaded', this.debounce(this.setScale, 500, true), false)
},
methods: {
/**
* @description 获取窗口缩放比例
*/
setScale() {
const docEl = document.documentElement
const width = docEl.clientWidth
const heiht = docEl.clientHeight
if (!width || !heiht) return
const ww = width / 1920
const wh = heiht / 1080
let scale = ww < wh ? ww : wh
this.scale = scale.toFixed(6)
// this.$refs.ScaleBox.style.setProperty('--scale', this.scale)
this.$nextTick(() => {
this.$refs.ScaleBox.style.transform = `scale(${this.scale}) translate(-50%, 0)`
})
},
/**
* @description 节流
*/
debounce(fn, delay) {
let delays = delay || 500
let timer
return () => {
let _this = this
let args = arguments
if (timer) {
clearTimeout(timer)
}
timer = setTimeout(() => {
timer = null
fn.apply(_this, args)
}, delays)
}
},
},
}
</script>
<style lang="less" scoped>
// #ScaleBox {
// --sacle: 1;
// }
.big-screen-layout {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
.big-screen-lay-bg {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-repeat: no-repeat;
background-size: 100% 100%;
.big-screen-lay-wrap {
// transform: scale(var(--scale)) translate(-50%, 0);
width: 100%;
height: 100%;
transform-origin: 0 0;
position: absolute;
left: 50%;
top: 0;
// transition: 0.3s;
z-index: 999;
overflow: hidden;
}
}
}
</style>