WL/laws_weilai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[update] 分辨率bug

Browse Source
This commit is contained in:
zhaomeijing
2022-04-24 16:40:17 +08:00
parent 7c788d17e4
commit ad7fd4ce1c
1 changed files with 33 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
jero-web/src/views/documentManage/splitting/modules/SplitDetail.vue
+33 -21
View File
@@ -1,4 +1,5 @@
<template> <template>
<div class='mainItem'>
<div class="split-detail" @click="clearMenu" :style="'width:' + (fullWidth - 200) + 'px'"> <div class="split-detail" @click="clearMenu" :style="'width:' + (fullWidth - 200) + 'px'">
<a-card :bordered="false" > <a-card :bordered="false" >
<div class="split-detail-wrap"> <div class="split-detail-wrap">
@@ -169,6 +170,7 @@
</div> </div>
</a-card> </a-card>
</div> </div>
</div>
</template> </template>
<script> <script>
@@ -303,23 +305,23 @@
const that = this; const that = this;
let client='' let client=''
let width='' let width=''
this.widthBrown = window.screenWidth || document.body.clientWidth; // this.widthBrown = window.screenWidth || document.body.clientWidth;
client = document.querySelector('.split-detail-table .ant-table-content').getBoundingClientRect() // client = document.querySelector('.split-detail-table .ant-table-content').getBoundingClientRect()
width = this.widthBrown - client.left // width = this.widthBrown - client.left
let iframeTop= document.querySelector('.split-detail-left').getBoundingClientRect().top // let iframeTop= document.querySelector('.split-detail-left').getBoundingClientRect().top
document.querySelector('.split-detail-left').style.height = this.brownHeight-iframeTop-24 + 'px' // document.querySelector('.split-detail-left').style.height = this.brownHeight-iframeTop-24 + 'px'
console.log(iframeTop,'iframeTop2222') // console.log(iframeTop,'iframeTop2222')
document.querySelector('.split-detail-table .ant-table-content').style.width = width - 20 + 'px' // document.querySelector('.split-detail-table .ant-table-content').style.width = width - 20 + 'px'
window.addEventListener('resize', () => { // window.addEventListener('resize', () => {
that.screenWidth = window.screenWidth || document.body.clientWidth; // that.screenWidth = window.screenWidth || document.body.clientWidth;
client = document.querySelector('.split-detail-table .ant-table-content').getBoundingClientRect() // client = document.querySelector('.split-detail-table .ant-table-content').getBoundingClientRect()
// console.log('screenWidth',that.screenWidth) // // console.log('screenWidth',that.screenWidth)
width = that.screenWidth - client.left // width = that.screenWidth - client.left
document.querySelector('.split-detail-table .ant-table-content').style.width = width - 20 + 'px' // document.querySelector('.split-detail-table .ant-table-content').style.width = width - 20 + 'px'
iframeTop= document.querySelector('.split-detail-left').getBoundingClientRect().top // iframeTop= document.querySelector('.split-detail-left').getBoundingClientRect().top
console.log(iframeTop,'iframeTop111') // console.log(iframeTop,'iframeTop111')
document.querySelector('.split-detail-left').style.height = this.brownHeight-iframeTop-24 + 'px' // document.querySelector('.split-detail-left').style.height = this.brownHeight-iframeTop-24 + 'px'
}, false); // }, false);
@@ -1128,14 +1130,13 @@
<style lang="less" scoped> <style lang="less" scoped>
@import '~@assets/less/common.less'; @import '~@assets/less/common.less';
.main{
}
.split-detail{ .split-detail{
height: 100%!important;
.split-detail-wrap{ .split-detail-wrap{
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.split-detail-left{ .split-detail-left{
height: 100%;
min-width: 300px; min-width: 300px;
padding-right: 20px; padding-right: 20px;
border-right: 1px solid #E6E7EC; border-right: 1px solid #E6E7EC;
@@ -1302,7 +1303,18 @@
min-width: 73px!important; min-width: 73px!important;
} }
.split-detail-wrap{ .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> </style>