From 99ce8c363068eb4076b4f7e9c4d505cc37eb3f78 Mon Sep 17 00:00:00 2001 From: yj <2077506045@qq.com> Date: 星期五, 24 五月 2024 14:20:14 +0800 Subject: [PATCH] 1.修改文字 2.修改练习页面 --- src/layout/index.vue | 89 +++++++++++++++++++++++++++++++++++++++++--- 1 files changed, 82 insertions(+), 7 deletions(-) diff --git a/src/layout/index.vue b/src/layout/index.vue index 2e6a7e1..8e5475e 100644 --- a/src/layout/index.vue +++ b/src/layout/index.vue @@ -1,21 +1,24 @@ <template> <el-container> - <el-header height="60" class="student-header header" :style="{'background-color': productType==='API_Fan'?'#fff':'#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" style="float:left;"> - <span></span> <el-dropdown trigger="click" placement="bottom"> - <el-image v-if="productType==='API_Fan'" :style="{'height': isMobile?'50px':'60px','margin-top':'5px'}" :src="require('@/assets/logo-apifan.png')" fit="fill"></el-image> - <el-badge v-else style="height: 50px;"> + <!-- + <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-menu> </el-dropdown> </div> </el-header> @@ -29,32 +32,104 @@ <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 }, + 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 () { + console.log('鐜鍙橀噺锛�') + console.log(process.env) + }, + watch: { + logo: function (val) { + let sessionLogoUrl = sessionStorage.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 + } + sessionStorage.setItem('logoUrl', this.logoUrl) + sessionStorage.setItem('backgroundColor', this.backgroundColor) + } + }, + mounted () { + let sessionLogoUrl = sessionStorage.getItem('logoUrl') + let sessionBackgroundColor = sessionStorage.getItem('backgroundColor') + if (sessionLogoUrl !== null) { + this.logoUrl = sessionLogoUrl + this.backgroundColor = sessionBackgroundColor + } + sessionStorage.setItem('backgroundColor', this.backgroundColor) + window.addEventListener('beforeunload', this.handleBeforeUnload) + }, + beforeDestroy () { + window.removeEventListener('beforeunload', this.handleBeforeUnload) }, methods: { + handleBeforeUnload: function () { + sessionStorage.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(sessionStorage.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 { + // sessionStorage.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 }) } } -- Gitblit v1.9.1