|
|
@@ -5,17 +5,12 @@
|
|
|
:class="{ 'yn-theme': !isYunNanProject, 'is-no-layout': !isNullES(isLayout) && isLayout === 'no' }"
|
|
|
>
|
|
|
<el-header class="hc-layout-header">
|
|
|
- <!-- <div class="hc-layout-header-logo" :style="`width: ${isCollapse ? '0px' : '200px'};`" @click="logoClick">
|
|
|
- <img v-show="!isCollapse" id="logo-name" :src="appLogoName" alt="">
|
|
|
- </div> -->
|
|
|
- <div v-if="!isYunNanProject" class="hc-layout-header-logo" :style="`width: ${isCollapse ? '0px' : '200px'};`" @click="logoClick">
|
|
|
- <!-- <img id="logo-icon" :src="appLogoIcon" alt=""> -->
|
|
|
- <img v-show="!isCollapse" id="logo-name" :src="appLogoName" alt="">
|
|
|
+ <!-- 修改 logo 部分 -->
|
|
|
+ <div v-if="!isYunNanProject" class="hc-layout-header-logo logo-transition" :style="`width: ${isCollapse ? '0px' : '200px'};`" @click="logoClick">
|
|
|
+ <img v-show="!isCollapse" id="logo-name" :src="appLogoName" alt="" @load="handleImageLoad">
|
|
|
</div>
|
|
|
- <div v-else class="hc-layout-header-logo" @click="logoClick">
|
|
|
- <img id="logo-icon" :src="appLogoIcon" alt="">
|
|
|
- <!-- <img v-show="!isCollapse" id="logo-name" :src="appLogoName" alt=""> -->
|
|
|
-
|
|
|
+ <div v-else class="hc-layout-header-logo logo-transition" @click="logoClick">
|
|
|
+ <img id="logo-icon" :src="appLogoIcon" alt="" @load="handleImageLoad">
|
|
|
<div class="ml-2">
|
|
|
<div class="text-18px font-900">工程项目档案资料管理系统</div>
|
|
|
<div class="text-12px">Engineering Project File Manegement Platform</div>
|
|
|
@@ -403,9 +398,14 @@ const loadStyles = async () => {
|
|
|
let currentStyle = null
|
|
|
|
|
|
|
|
|
+const imageLoaded = ref(false)
|
|
|
|
|
|
+const handleImageLoad = () => {
|
|
|
+ imageLoaded.value = true
|
|
|
+}
|
|
|
// 监听项目类型变化，动态切换样式
|
|
|
watch(() => isYunNanProject.value, async (newVal) => {
|
|
|
+ imageLoaded.value = false
|
|
|
await loadStyles()
|
|
|
console.log('样式已更新:', newVal ? 'yunnan' : 'default')
|
|
|
}, { immediate: true })
|
|
|
@@ -457,3 +457,28 @@ watch(() =>store.getProjectId, (newProjectId) => {
|
|
|
})
|
|
|
</script>
|
|
|
|
|
|
+<style lang="scss" scoped>
|
|
|
+.logo-transition {
|
|
|
+ transition: all 0.3s ease;
|
|
|
+
|
|
|
+ img {
|
|
|
+ max-height: 28px;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ will-change: transform;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.hc-layout-header-logo {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ height: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 设置图片初始状态
|
|
|
+#logo-name, #logo-icon {
|
|
|
+ height: 28px;
|
|
|
+ width: auto;
|
|
|
+ object-fit: contain;
|
|
|
+}
|
|
|
+</style>
|
