|
|
@@ -8,12 +8,12 @@
|
|
|
<img :src="appViewBg" alt="">
|
|
|
</div>
|
|
|
<el-header class="hc-layout-header">
|
|
|
- <div v-if="!isYunNanProject" class="hc-layout-header-logo" :style="`width: ${isCollapse ? '0px' : '200px'};`" @click="logoClick">
|
|
|
+ <div v-if="!isYunNanProject" class="hc-layout-header-logo logo-transition" :style="`width: ${isCollapse ? '0px' : '200px'};`" @click="logoClick">
|
|
|
<!-- <img id="logo-icon" :src="appLogoIcon" alt=""> -->
|
|
|
- <img v-show="!isCollapse" id="logo-name" :src="appLogoName" alt="">
|
|
|
+ <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="">
|
|
|
+ <div v-else class="hc-layout-header-logo logo-transition" @click="logoClick">
|
|
|
+ <img id="logo-icon" :src="appLogoIcon" alt="" @load="handleImageLoad">
|
|
|
<!-- <img v-show="!isCollapse" id="logo-name" :src="appLogoName" alt=""> -->
|
|
|
|
|
|
<div class="ml-2">
|
|
|
@@ -428,10 +428,15 @@ 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 })
|
|
|
@@ -477,3 +482,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>
|
