logo图片大小双端适配

阳洁

2024-03-05 07992e69b7e5d7325b59fe7a1b415a2780653441

 src/layout/index.vue

@@ -1,19 +1,20 @@
<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': productType==='API_Fan'?'#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 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="{'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-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">
<!--            <el-dropdown-item divided>保存退出</el-dropdown-item>-->
          </el-dropdown-menu>
          </el-dropdown-menu> 
        </el-dropdown>
      </div>
    </el-header>
@@ -36,7 +37,8 @@
      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 () {
@@ -51,7 +53,8 @@
    'langSelect': LangSelect
  },
  computed: {
    ...mapState('user', { langFlag: state => state.langFlag })
    ...mapState('user', { langFlag: state => state.langFlag }),
    ...mapState('exam', { productType: state => state.productType })
  }
}
</script>