From 7f4105bc2f1d4f8562e1cb9776ce49f8be0c98d2 Mon Sep 17 00:00:00 2001
From: yj <2077506045@qq.com>
Date: 星期二, 03 十二月 2024 13:46:37 +0800
Subject: [PATCH] 更新CAQ优化，适配低分辨率设备
---
src/layout/index.vue | 92 +++++++++++++++++++++++++++++++++++++++++----
1 files changed, 83 insertions(+), 9 deletions(-)
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 9dfe0b4..1de7e4b 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -1,6 +1,6 @@
<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" />-->
<!--鍥介檯鍖栫殑璇█閫夋嫨-->
@@ -8,52 +8,126 @@
</div>
<div class="head-user" style="float:left;">
<el-dropdown trigger="click" placement="bottom">
- <el-image v-if="productType==='API_Fan'" :style="{'width': isMobile?'120px':'150px','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>
- <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
},
+ 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 })
}
}
--
Gitblit v1.9.1