<template>
|
<el-container>
|
<el-header height="60" class="student-header header" :style="{'background-color': backgroundColor}">
|
<div class="head-language" v-if="langFlag">
|
<!--<lang-select class="right-menu-item" />-->
|
<!--国际化的语言选择-->
|
<!--<component :is="langSelect"></component>-->
|
</div>
|
<div class="head-user" style="float:left;">
|
<el-dropdown trigger="click" placement="bottom">
|
<!--
|
<el-image v-if="productType=='API_Fan'" :style="{'max-height': isMobile?'50px':'50px','margin-top':'5px','height':logoHeight+'px'}" :src="require('@/assets/logo-apifan.png')" fit="fill"></el-image>
|
<el-image @load="imageLoad" @error="imageError" v-else-if="logo!='none'" :style="{'max-height': isMobile?'50px':'50px','margin-top':'5px','height':logoHeight+'px'}" :src="logo" fit="fill"></el-image>
|
<el-badge v-else-if="logo=='none'" style="height: 50px;">
|
<el-avatar class="el-dropdown-avatar" size="medium" :src="userInfo.imagePath === null ? require('@/assets/logo-t.jpg') : userInfo.imagePath"></el-avatar>
|
</el-badge>
|
-->
|
<el-image v-if="logoUrl != null" :style="{'max-height': isMobile?'50px':'50px','margin-top':'5px','height':logoHeight+'px'}" :src="logoUrl" fit="fill"></el-image>
|
<el-dropdown-menu slot="dropdown">
|
<!-- <el-dropdown-item divided>保存退出</el-dropdown-item>-->
|
</el-dropdown-menu>
|
</el-dropdown>
|
</div>
|
</el-header>
|
<el-main class="student-main" style="margin-top:20px;">
|
<router-view/>
|
</el-main>
|
<el-footer height="340" class="student-footer">
|
</el-footer>
|
</el-container>
|
</template>
|
|
<script>
|
import LangSelect from '@/components/LangSelect'
|
import { mapMutations, mapState } from 'vuex'
|
export default {
|
name: 'Layout',
|
data () {
|
return {
|
defaultUrl: '/index',
|
logoHeight: 50,
|
backgroundColor: '#fff',
|
userInfo: {
|
imagePath: null
|
},
|
logoUrl: null,
|
langSelect: 'langSelect',
|
isMobile: /Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Kindle|Silk-Accelerated|(hpw|web)OS|Opera M(obile|ini)/.test(navigator.userAgent)
|
}
|
},
|
created () {
|
},
|
watch: {
|
logo: function (val) {
|
let sessionLogoUrl = localStorage.getItem('logoUrl')
|
if (this.productType === 'API_Fan') {
|
this.logoUrl = require('@/assets/logo-apifan.png')
|
} else if (val === 'none') {
|
this.backgroundColor = '#409eff'
|
this.logoUrl = require('@/assets/logo-t.png')
|
} else if (val !== null) {
|
this.logoUrl = val
|
this.backgroundColor = '#fff'
|
} else if (sessionLogoUrl !== null) {
|
this.logoUrl = sessionLogoUrl
|
}
|
localStorage.setItem('logoUrl', this.logoUrl)
|
localStorage.setItem('backgroundColor', this.backgroundColor)
|
}
|
},
|
mounted () {
|
let sessionLogoUrl = localStorage.getItem('logoUrl')
|
let sessionBackgroundColor = localStorage.getItem('backgroundColor')
|
if (sessionLogoUrl !== null) {
|
this.logoUrl = sessionLogoUrl
|
this.backgroundColor = sessionBackgroundColor
|
}
|
localStorage.setItem('backgroundColor', this.backgroundColor)
|
window.addEventListener('beforeunload', this.handleBeforeUnload)
|
},
|
beforeDestroy () {
|
window.removeEventListener('beforeunload', this.handleBeforeUnload)
|
},
|
methods: {
|
handleBeforeUnload: function () {
|
localStorage.setItem('logoUrl', this.logoUrl)
|
},
|
logout: function () {
|
window.opener = null
|
window.open('about:blank', '_top').close()
|
},
|
getLogoHeight: function () {
|
|
},
|
imageLoad: function (e) {
|
let that = this
|
var img = new Image()
|
img.onload = function () {
|
that.logoHeight = img.height
|
if (that.logoHeight > 50) {
|
that.logoHeight = 50
|
}
|
}
|
img.src = that.logo
|
},
|
imageError: function (e) {
|
},
|
...mapMutations('user', ['setLogo'])
|
},
|
components: {
|
'langSelect': LangSelect
|
},
|
computed: {
|
// logoUrl: function () {
|
// console.log('this.logo')
|
// console.log(this.logo)
|
// let sessionLogoUrl = this.setLogo(localStorage.getItem('logoUrl'))
|
// if (this.productType === 'API_Fan') {
|
// return require('@/assets/logo-apifan.png')
|
// } else if (this.logo === 'none') {
|
// return require('@/assets/logo-t.jpg')
|
// } else if (this.logo === null && sessionLogoUrl !== null) {
|
// return sessionLogoUrl
|
// } else {
|
// localStorage.setItem('logoUrl', this.logo)
|
// return this.logo
|
// }
|
// },
|
...mapState('user', { langFlag: state => state.langFlag }),
|
...mapState('user', { logo: state => state.logo }),
|
...mapState('exam', { productType: state => state.productType })
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.header {
|
position: fixed;
|
width: 100%;
|
z-index: 1000;
|
top: 0%;
|
|
.head-language {
|
position: absolute;
|
bottom: 10px;
|
right: 80px;
|
}
|
}
|
</style>
|
