Commit 5d41ea7a authored by caixingbing's avatar caixingbing

*

parent 93f7d516
<template> <template>
<div class="app-container part-container"> <div class="app-container part-container">
<div style="background: #FFFFFF; height: 300px;">
商务信息 商务信息
</div> </div>
</div>
</template> </template>
<script> <script>
......
<template> <template>
<div class="detail-container"> <div id="detailPart" class="detail-container" :style="sideHeight?'height:'+sideHeight+'px':''">
<el-input <el-input
placeholder="搜索" placeholder="搜索"
class="side-input" class="side-input"
...@@ -26,6 +26,12 @@ ...@@ -26,6 +26,12 @@
<script> <script>
export default { export default {
name: 'Sidebar', name: 'Sidebar',
props: {
partBoxHeight: {
type: Number,
default: null
},
},
data() { data() {
return { return {
searchText: '', searchText: '',
...@@ -78,6 +84,17 @@ export default { ...@@ -78,6 +84,17 @@ export default {
] ]
} }
}, },
computed: {
sideHeight() {
let sideHeight = document.getElementById("detailPart")?document.getElementById("detailPart").offsetHeight:null
if(sideHeight<this.partBoxHeight) {
sideHeight = this.partBoxHeight
}else {
sideHeight = null
}
return sideHeight
}
},
created() { created() {
}, },
methods: { methods: {
...@@ -98,6 +115,7 @@ export default { ...@@ -98,6 +115,7 @@ export default {
.detail-container{ .detail-container{
width: 144px; width: 144px;
min-height: calc(100vh - 170px); min-height: calc(100vh - 170px);
padding-bottom: 20px;
background: #FFFFFF; background: #FFFFFF;
.side-input{ .side-input{
width: 128px; width: 128px;
......
...@@ -3,17 +3,20 @@ ...@@ -3,17 +3,20 @@
<Header /> <Header />
<div class="flex-box part-main"> <div class="flex-box part-main">
<div class="part-left"> <div class="part-left">
<side-bar @currentPath="showPartPage" /> <side-bar @currentPath="showPartPage" :partBoxHeight="partBoxHeight" />
</div> </div>
<div class="part-right"> <div class="part-right">
<!-- <Financial v-if="currentPath.pathName=='financial'" />--> <div id="partBox">
<!-- <Business v-if="currentPath.pathName=='business'" />--> <Financial v-if="currentPath.pathName=='financial'" />
<Business v-if="currentPath.pathName=='business'" />
</div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import elementResizeDetectorMaker from "element-resize-detector"
import Header from "./component/Header" import Header from "./component/Header"
import SideBar from "./component/Sidebar" import SideBar from "./component/Sidebar"
import Financial from "./financial" import Financial from "./financial"
...@@ -30,11 +33,20 @@ export default { ...@@ -30,11 +33,20 @@ export default {
return { return {
currentPath: { currentPath: {
pathName: 'financial' //默认展示页 pathName: 'financial' //默认展示页
} },
partBoxHeight: null
} }
}, },
created() { created() {
}, },
mounted() {
const _this = this, erd = elementResizeDetectorMaker(), partBox = document.getElementById("partBox")
erd.listenTo(partBox, element => {
_this.$nextTick(() => {
_this.partBoxHeight = partBox.offsetHeight
})
})
},
methods: { methods: {
showPartPage(e){ showPartPage(e){
this.currentPath = e this.currentPath = e
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment