<template>
|
<div id="top-header">
|
<dv-decoration-8 class="header-left-decoration" />
|
<dv-decoration-5 class="header-center-decoration" />
|
<dv-decoration-8 class="header-right-decoration" :reverse="true" />
|
<div class="center-title" @click="fullScreen">波次播种任务系统</div>
|
<!-- <el-button class="center-title" @click="handleFullScreen">全屏</el-button>-->
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: 'TopHeader',
|
|
data() {
|
return {
|
|
}
|
},
|
|
methods: {
|
// fullScreen() {
|
// let element = document.documentElement
|
// element.requestFullscreen()
|
// },
|
handleFullScreen() {
|
const element = document.documentElement
|
if (this.fullscreen) {
|
if (document.exitFullscreen) {
|
document.exitFullscreen()
|
} else if (document.webkitCancelFullScreen) {
|
document.webkitCancelFullScreen()
|
} else if (document.mozCancelFullScreen) {
|
document.mozCancelFullScreen()
|
} else if (document.msExitFullscreen) {
|
document.msExitFullscreen()
|
}
|
} else {
|
if (element.requestFullscreen) {
|
element.requestFullscreen()
|
} else if (element.webkitRequestFullScreen) {
|
element.webkitRequestFullScreen()
|
} else if (element.mozRequestFullScreen) {
|
element.mozRequestFullScreen()
|
} else if (element.msRequestFullscreen) {
|
element.msRequestFullscreen()
|
}
|
}
|
}
|
}
|
}
|
</script>
|
|
<style lang="less">
|
@media screen and (max-width: 1920px){
|
#top-header {
|
position: relative;
|
width: 100%;
|
height: 100px;
|
display: flex;
|
justify-content: space-between;
|
flex-shrink: 0;
|
|
.header-center-decoration {
|
width: 40%;
|
height: 60px;
|
margin-top: 30px;
|
}
|
|
.header-left-decoration, .header-right-decoration {
|
width: 25%;
|
height: 60px;
|
}
|
|
.center-title {
|
position: absolute;
|
font-size: 30px;
|
font-weight: bold;
|
left: 50%;
|
top: 15px;
|
transform: translateX(-50%);
|
}
|
}
|
}
|
|
@media only screen and (max-width: 1281px){
|
#top-header {
|
height: auto;
|
margin-bottom: 5px;
|
|
.header-center-decoration {
|
width: 40%;
|
height: 40px;
|
margin-top: 20px;
|
}
|
|
.header-left-decoration, .header-right-decoration {
|
width: 25%;
|
height: 40px;
|
}
|
|
.center-title {
|
top: 10px;
|
font-size: 18px;
|
font-weight: bold;
|
}
|
}
|
}
|
</style>
|
