效果
示例代码
<template>
<div class="bigScreen" :style="{width: screen_config.width + 'px', height: screen_config.height + 'px'}">
<div id="app1" class="ScaleBox" ref="ScaleBox">
<img class="center" src="https://cofco001-1308084433.cos.ap-beijing.myqcloud.com/image/pc/element/tree.png" alt="">
<!-- <div id="container" class="box level2" style="left: 160px; top: 180px;"></div> -->
<div class="container container-left">
<div class="level">
<div class="title">专业化公司</div>
<div class="content row">左边的内容区域</div>
</div>
</div>
<div class="container container-right">
<div class="level">
<div class="title">财务部</div>
<div class="content column">右边的内容区域</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'test',
data() {
return {
screen_config: {
scale: 0.99, // 默认缩放值
width: 1920, // 设计尺寸 4096
height: 1080 // // 设计尺寸 2160
}
}
},
mounted() {
const _self = this
_self.resetScreen()
_self.setScale()
window.addEventListener("resize", this.debounce(this.setScale))
},
methods: {
// 重置默认 设计尺寸(初始尺寸)
resetScreen(){
const _self = this
const { width, height, scale } = _self.screen_config
_self.screen_config.width = width*scale
_self.screen_config.height = height*scale
console.log('resetScreen width = ', _self.screen_config.width, _self.screen_config.height)
},
// 获取大屏适配scale值
getScale() {
const _self = this
// 固定好16:9的宽高比,计算出最合适的缩放比
const { width, height, scale } = _self.screen_config
let ww = window.innerWidth / width
let wh = window.innerHeight / height
_self.screen_config.width = window.innerWidth*scale
_self.screen_config.height = window.innerHeight*scale
if(wh<=1){
wh = Math.ceil(wh)
ww = Math.ceil(ww)
}
else{
wh = Math.floor(wh)
ww = Math.floor(ww)
}
// console.log('getScale ww = ', ww, ', wh = ',wh, `[${window.innerHeight / height}]`)
return ww < wh ? ww : wh; // 宽 < 高 => 以 高 为准; 反之以 宽 为准
},
// 设置大屏适配scale值
setScale() {
const _self = this
// 获取到缩放比例,设置它
_self.scale = this.getScale();
if (_self.$refs.ScaleBox) {
_self.$refs.ScaleBox.style.setProperty("--scale", this.scale);
setTimeout(()=>{ if (_self.$refs.ScaleBox) { _self.$refs.ScaleBox.style.visibility = 'visible' } },0.1*1000)
}
},
debounce(fn, delay) {
const delays = delay || 500
let timer
return function () {
const th = this
const args = arguments
if (timer) {
clearTimeout(timer)
}
timer = setTimeout(function () {
timer = null
fn.apply(th, args)
}, delays)
}
},
</script>
<style scoped lang="less">
.bigScreen {
/* background-color: aqua; */
width: 100%;
height: 100%;
margin: 0 auto;
}
.ScaleBox {
--scale: 1;
position: absolute;
transform: scale(var(--scale)) translate(-50%, -50%);
display: flex;
flex-direction: column;
transform-origin: 0 0;
left: 50%;
top: 50%;
transition: 0.3s;
z-index: 999;
/* border: solid 1px red; */
visibility: hidden;
/* background: rgba(255, 0, 0, 0.3); */
}
#box {
width: 100%;
height: 100%;
/* background-image: url(https://cofco001-1308084433.cos.ap-beijing.myqcloud.com/image/pc/element/tree.png);
background-position: center;
background-size: contain;
background-repeat: no-repeat; */
}
.container {
zoom: 65%;
/* width: fit-content !important; */
max-width: 35%;
}
.container .title {
color: #b68703;
text-align: left;
}
.container-left {
/* float: left; */
position: absolute;
top: 10px;
left: 10px;
}
.container-left .level {
margin-bottom: 30px;
}
.container-left .content {
display: flex;
margin: 5px;
}
.container-right {
/* float: right; */
position: absolute;
top: 10px;
right: 10px;
}
.container-right .level {
margin-bottom: 30px;
}
.container-right .content {
display: flex;
margin: 5px;
}
</style>