[update] 分辨率bug

This commit is contained in:
zhaomeijing
2022-04-24 16:40:17 +08:00
parent 7c788d17e4
commit ad7fd4ce1c
@@ -1,4 +1,5 @@
<template>
<div class='mainItem'>
<div class="split-detail" @click="clearMenu" :style="'width:' + (fullWidth - 200) + 'px'">
<a-card :bordered="false" >
<div class="split-detail-wrap">
@@ -169,6 +170,7 @@
</div>
</a-card>
</div>
</div>
</template>
<script>
@@ -303,23 +305,23 @@
const that = this;
let client=''
let width=''
this.widthBrown = window.screenWidth || document.body.clientWidth;
client = document.querySelector('.split-detail-table .ant-table-content').getBoundingClientRect()
width = this.widthBrown - client.left
let iframeTop= document.querySelector('.split-detail-left').getBoundingClientRect().top
document.querySelector('.split-detail-left').style.height = this.brownHeight-iframeTop-24 + 'px'
console.log(iframeTop,'iframeTop2222')
document.querySelector('.split-detail-table .ant-table-content').style.width = width - 20 + 'px'
window.addEventListener('resize', () => {
that.screenWidth = window.screenWidth || document.body.clientWidth;
client = document.querySelector('.split-detail-table .ant-table-content').getBoundingClientRect()
// console.log('screenWidth',that.screenWidth)
width = that.screenWidth - client.left
document.querySelector('.split-detail-table .ant-table-content').style.width = width - 20 + 'px'
iframeTop= document.querySelector('.split-detail-left').getBoundingClientRect().top
console.log(iframeTop,'iframeTop111')
document.querySelector('.split-detail-left').style.height = this.brownHeight-iframeTop-24 + 'px'
}, false);
// this.widthBrown = window.screenWidth || document.body.clientWidth;
// client = document.querySelector('.split-detail-table .ant-table-content').getBoundingClientRect()
// width = this.widthBrown - client.left
// let iframeTop= document.querySelector('.split-detail-left').getBoundingClientRect().top
// document.querySelector('.split-detail-left').style.height = this.brownHeight-iframeTop-24 + 'px'
// console.log(iframeTop,'iframeTop2222')
// document.querySelector('.split-detail-table .ant-table-content').style.width = width - 20 + 'px'
// window.addEventListener('resize', () => {
// that.screenWidth = window.screenWidth || document.body.clientWidth;
// client = document.querySelector('.split-detail-table .ant-table-content').getBoundingClientRect()
// // console.log('screenWidth',that.screenWidth)
// width = that.screenWidth - client.left
// document.querySelector('.split-detail-table .ant-table-content').style.width = width - 20 + 'px'
// iframeTop= document.querySelector('.split-detail-left').getBoundingClientRect().top
// console.log(iframeTop,'iframeTop111')
// document.querySelector('.split-detail-left').style.height = this.brownHeight-iframeTop-24 + 'px'
// }, false);
@@ -1128,14 +1130,13 @@
<style lang="less" scoped>
@import '~@assets/less/common.less';
.main{
}
.split-detail{
height: 100%!important;
.split-detail-wrap{
display: flex;
justify-content: space-between;
.split-detail-left{
height: 100%;
min-width: 300px;
padding-right: 20px;
border-right: 1px solid #E6E7EC;
@@ -1302,7 +1303,18 @@
min-width: 73px!important;
}
.split-detail-wrap{
height: 481px;
height: 481px!important;
}
.mainItem{
height: 500px;
}
}
@media screen and (min-width: 1600px) and (max-width: 2000px) {
.split-detail .split-detail-wrap .split-detail-left{
height: 735px!important;
}
.mainItem{
height: 800px!important;
}
}
</style>