79 lines
1.6 KiB
Vue
79 lines
1.6 KiB
Vue
<template>
|
|
<div class="n_header">
|
|
<div class="n_header_h1">
|
|
<h1>{{ title1 }}</h1>
|
|
</div>
|
|
<p class="p_title">{{ title2 }}</p>
|
|
<div class="exit_btn iconfont" @click="back"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'Header',
|
|
data () {
|
|
return {
|
|
}
|
|
},
|
|
props: {
|
|
title1: String,
|
|
title2: String
|
|
},
|
|
methods: {
|
|
back () {
|
|
let flag = !!(document.fullscreenElement || document.mozFullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement)
|
|
if (flag) {
|
|
if (document.exitFullscreen) {
|
|
document.exitFullscreen()
|
|
} else if (document.webkitCancelFullScreen) {
|
|
document.webkitCancelFullScreen()
|
|
} else if (document.mozCancelFullScreen) {
|
|
document.mozCancelFullScreen()
|
|
} else if (document.msExitFullscreen) {
|
|
document.msExitFullscreen()
|
|
}
|
|
}
|
|
this.$router.push('/setup')
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="stylus" scoped>
|
|
.n_header
|
|
position absolute
|
|
left 0
|
|
top 0
|
|
width 100%
|
|
height 88px
|
|
background center / 100% url('../images/header_bg_s.png') no-repeat
|
|
.n_header_h1
|
|
width: 100%;
|
|
height: 100%;
|
|
padding-top 12px
|
|
h1
|
|
font-size: 19px;
|
|
font-weight: 700;
|
|
color: #fff;
|
|
line-height: 1;
|
|
text-align center;
|
|
letter-spacing 3px
|
|
.p_title
|
|
position absolute
|
|
left 1%
|
|
top 11%
|
|
font-size 14px
|
|
color #AECAF5
|
|
.exit_btn
|
|
position absolute
|
|
right 1%
|
|
top 11%
|
|
z-index 100
|
|
height 16px
|
|
width 16px
|
|
line-height 16px
|
|
font-size 16px
|
|
color #AECAF5
|
|
text-align: center;
|
|
</style>
|