From a778d5e53e74b2170e37607b2536a957dbc1d664 Mon Sep 17 00:00:00 2001 From: yj <2077506045@qq.com> Date: 星期一, 25 十一月 2024 13:59:58 +0800 Subject: [PATCH] 合并本地修改 --- src/layout/index.vue | 99 ++++++++++++++++++++++++++++++++++++++++++++----- 1 files changed, 88 insertions(+), 11 deletions(-) diff --git a/src/layout/index.vue b/src/layout/index.vue index 18b5080..1de7e4b 100644 --- a/src/layout/index.vue +++ b/src/layout/index.vue @@ -1,57 +1,134 @@ <template> <el-container> - <el-header height="60" class="student-header header" style="background-color: #409eff"> + <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"> + <div class="head-user" style="float:left;"> <el-dropdown trigger="click" placement="bottom"> - <el-badge 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-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"> + <el-main class="student-main" style="margin-top:20px;"> <router-view/> </el-main> - <el-footer height="340" class="student-footer"> - </el-footer> + <!-- <el-footer height="340" class="student-footer"> + </el-footer> --> </el-container> </template> <script> import LangSelect from '@/components/LangSelect' -import { mapState } from 'vuex' +import { mapMutations, mapState } from 'vuex' export default { name: 'Layout', data () { return { defaultUrl: '/index', + logoHeight: 50, + backgroundColor: '#fff', userInfo: { imagePath: null }, - langSelect: 'langSelect' + 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: { - ...mapState('user', { langFlag: state => state.langFlag }) + // 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> -- Gitblit v1.9.1