From d8fc3ec09f864dc336b649f66a2c62345da12629 Mon Sep 17 00:00:00 2001 From: yj <2077506045@qq.com> Date: 星期三, 08 五月 2024 18:02:19 +0800 Subject: [PATCH] 答题LOGO自定义功能 --- src/layout/index.vue | 47 +++++++++++++++++++++++++++++++++++++++-------- 1 files changed, 39 insertions(+), 8 deletions(-) diff --git a/src/layout/index.vue b/src/layout/index.vue index c7db7dc..ca5a298 100644 --- a/src/layout/index.vue +++ b/src/layout/index.vue @@ -1,14 +1,16 @@ <template> <el-container> - <el-header height="60" class="student-header header" style="background-color: #3c8dbc"> + <el-header height="60" class="student-header header" :style="{'background-color': logo!='none'?'#fff':'#409eff'}"> <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> + <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-dropdown-menu slot="dropdown"> @@ -17,7 +19,7 @@ </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"> @@ -27,31 +29,60 @@ <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, + logoUrl: null, userInfo: { imagePath: null }, - langSelect: 'langSelect' + langSelect: 'langSelect', + isMobile: /Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Kindle|Silk-Accelerated|(hpw|web)OS|Opera M(obile|ini)/.test(navigator.userAgent) } }, created () { + }, + computed: { + }, methods: { logout: function () { window.opener = null window.open('about:blank', '_top').close() - } + }, + getLogoHeight: function () { + + }, + imageLoad: function (e) { + sessionStorage.setItem('logoUrl', this.logo) + 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) { + if (this.logo === null) { + this.setLogo(sessionStorage.getItem('logoUrl')) + } + }, + ...mapMutations('user', ['setLogo']) }, components: { 'langSelect': LangSelect }, computed: { - ...mapState('user', { langFlag: state => state.langFlag }) + ...mapState('user', { langFlag: state => state.langFlag }), + ...mapState('user', { logo: state => state.logo }), + ...mapState('exam', { productType: state => state.productType }) } } </script> -- Gitblit v1.9.1