| | |
| | | <div class="resize-bar"></div> |
| | | <div class="resize-line"></div> |
| | | <div class="resize-save"> |
| | | <left-nav :appName="app" :edit="editTree"></left-nav> |
| | | <left-nav :appName="app" :height="screenHeight" ref="leftTree"></left-nav> |
| | | </div> |
| | | </div> |
| | | <div class="column-right" > |
| | | <div class="column-right"> |
| | | <right-side /> |
| | | </div> |
| | | </div> |
| | |
| | | RightSide |
| | | }, |
| | | computed: { |
| | | app() { |
| | | app () { |
| | | return this.getUrlKey() !== null ? "DataStack" : "Camera" |
| | | } |
| | | }, |
| | | data() { |
| | | data () { |
| | | return { |
| | | leftWith: 0, |
| | | screenHeight: 0, |
| | | editTree: true |
| | | screenHeight: 0 |
| | | } |
| | | }, |
| | | mounted() { |
| | | mounted () { |
| | | this.screenHeight = document.documentElement.clientHeight; |
| | | window.onresize = () => { |
| | | return (() => { |
| | | this.screenHeight = document.documentElement.clientHeight; |
| | | })(); |
| | | }; |
| | | debugger |
| | | this.leftWith = this.$refs['left'].width; |
| | | |
| | | this.leftWith = this.$refs['left'].offsetWidth; |
| | | this.TreeDataPool.readonly = false; |
| | | this.TreeDataPool.gbReadonly = false; |
| | | this.DataStackPool.readonly = false; |
| | | |
| | | }, |
| | | methods: { |
| | | getUrlKey() { |
| | | getUrlKey () { |
| | | let name = "dataStack" |
| | | return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ""])[1].replace(/\+/g, '%20')) || null |
| | | } |
| | |
| | | |
| | | <style lang="scss" scoped> |
| | | .column { |
| | | //overflow: hidden; |
| | | display: flex; |
| | | width: 100%; |
| | | overflow: hidden; |
| | | //min-width: 1399px; |
| | | //min-width: 1920px; |
| | | height: 100%; |
| | | } |
| | | .column-left { |
| | | height: inherit; |
| | | background-color: #fff; |
| | | position: relative; |
| | | float: left; |
| | | height: 100vh; |
| | | } |
| | | .column-right { |
| | | min-width: 1442px; |
| | | flex:1; |
| | | position: relative; |
| | | background-color: #fff; |
| | | height: 100vh; |
| | | background-color: #eee; |
| | | box-sizing: border-box; |
| | | overflow: auto; |
| | | //height: 100%; |
| | | //overflow: hidden; |
| | | overflow-y: hidden; |
| | | overflow-x: auto; |
| | | } |
| | | .heigher-index { |
| | | position: absolute; |
| | | top: 0; |
| | | z-index: 10; |
| | | width: 100%; |
| | | height: 100%; |
| | | } |
| | | .resize-save { |
| | | position: absolute; |
| | |
| | | right: 5px; |
| | | bottom: 0; |
| | | left: 0; |
| | | padding: 14px; |
| | | padding: 16px; |
| | | padding-top: 8px; |
| | | overflow-x: hidden; |
| | | overflow-y: hidden; |
| | | } |
| | | .resize-bar { |
| | | width: 310px; |
| | | width: 338px; |
| | | height: inherit; |
| | | resize: horizontal; |
| | | cursor: ew-resize; |
| | |
| | | border-right: 2px solid #efefef; |
| | | border-left: 1px solid #e0e0e0; |
| | | pointer-events: none; |
| | | cursor: ew-resize; |
| | | } |
| | | .resize-bar:hover ~ .resize-line, |
| | | .resize-bar:active ~ .resize-line { |
| | |
| | | } |
| | | .resize-bar:hover ~ .resize-line::after, |
| | | .resize-bar:active ~ .resize-line::after { |
| | | content: ""; |
| | | content: ''; |
| | | position: absolute; |
| | | width: 16px; |
| | | height: 16px; |