| | |
| | | <div class="d-frame-title" v-drag @click="frameClick()"> |
| | | <div class="d-frame-title-operation"> |
| | | <i class="icon-minus d-frame-operation-minus" @click="minFrame(data,$event)"> |
| | | <img :src="`${publicPath}images/desktop/header-icon/min.png`" alt=""> |
| | | <img :src="`${publicPath}images/desktop/header-icon/min.png`" alt /> |
| | | </i> |
| | | <i class="icon-screen-toggle d-frame-operation-full" @click="changeFullScreen($event)"> |
| | | <img :src="fullScreen?`${publicPath}images/desktop/header-icon/mini.png`:`${publicPath}images/desktop/header-icon/max.png`" alt=""> |
| | | <img |
| | | :src="fullScreen?`${publicPath}images/desktop/header-icon/mini.png`:`${publicPath}images/desktop/header-icon/max.png`" |
| | | alt |
| | | /> |
| | | </i> |
| | | <i class="icon-close d-frame-operation-close" @click="closeFrame($event)"> |
| | | |
| | | </i> |
| | | |
| | | <i class="icon-close d-frame-operation-close" @click="closeFrame($event)"></i> |
| | | </div> |
| | | <slot name="d-frame-title-content"> |
| | | <div class="d-frame-title-content"> |
| | |
| | | } |
| | | } |
| | | }, |
| | | mounted() { |
| | | window.addEventListener('message', e => { |
| | | if (e.data && e.data.msg == "logout") { |
| | | location.assign("/"); |
| | | } |
| | | }) |
| | | }, |
| | | methods: { |
| | | //resize |
| | | mousedown(e) { |
| | |
| | | debugger |
| | | this.$store.commit('desktop/refreshFrame', this.data); |
| | | }, |
| | | minFrame (data,e) { |
| | | minFrame(data, e) { |
| | | //找到当前的iframe |
| | | let curIframe = Array.from(document.querySelectorAll('iframe')).find(iframe => iframe.src.indexOf(data.url) >= 0); |
| | | //保存当前应用快照 |
| | |
| | | let toLeft = e.clientX - disx; |
| | | let toTop = e.clientY - disy; |
| | | //边界处理 |
| | | if(toLeft <= 0 ){ |
| | | if (toLeft <= 0) { |
| | | toLeft = 0 |
| | | }else if(toLeft >= document.body.getBoundingClientRect().width-40){ |
| | | toLeft = document.body.getBoundingClientRect().width-40; |
| | | } else if (toLeft >= document.body.getBoundingClientRect().width - 40) { |
| | | toLeft = document.body.getBoundingClientRect().width - 40; |
| | | } |
| | | el.parentElement.style.left = toLeft + 'px'; |
| | | if(toTop <= 40 ){ |
| | | if (toTop <= 40) { |
| | | toTop = 40 |
| | | }else if(toTop >= document.body.getBoundingClientRect().height-40){ |
| | | toTop = document.body.getBoundingClientRect().height-40; |
| | | } else if (toTop >= document.body.getBoundingClientRect().height - 40) { |
| | | toTop = document.body.getBoundingClientRect().height - 40; |
| | | } |
| | | el.parentElement.style.top = toTop + 'px'; |
| | | }; |
| | |
| | | border-top: 1px solid #d0d0d0; |
| | | border-left: 1px solid #d0d0d0; |
| | | border-right: 1px solid #d0d0d0; |
| | | |
| | | } |
| | | .d-frame-title .icon-close{ |
| | | .d-frame-title .icon-close { |
| | | border-radius: 0 4px 0 0; |
| | | background:url('/images/desktop/header-icon/close.png') no-repeat 50%; |
| | | background: url("/images/desktop/header-icon/close.png") no-repeat 50%; |
| | | } |
| | | .d-frame-title-operation { |
| | | position: absolute; |
| | |
| | | cursor: pointer; |
| | | } |
| | | |
| | | .d-frame-title-operation i:hover{ |
| | | .d-frame-title-operation i:hover { |
| | | background-color: #c7cacf; |
| | | } |
| | | .d-frame-title-operation .icon-close:hover{ |
| | | .d-frame-title-operation .icon-close:hover { |
| | | background-color: red; |
| | | background-image: url('/images/desktop/header-icon/close-hover.png') |
| | | background-image: url("/images/desktop/header-icon/close-hover.png"); |
| | | } |
| | | |
| | | /* .d-frame-title-operation:hover .d-frame-operation-close::before { |