hookehuyr

fix(Home.vue): 修复背景图URL编码问题避免特殊字符导致显示异常

添加intro_background_style计算属性对URL进行安全编码,解决包含空格、中文或特殊符号时背景图无法显示的问题
......@@ -78,7 +78,7 @@
<div v-if="currentStep" class="ceremony-intro">
<div class="intro-container">
<!-- 背景图片 -->
<div class="intro-background" :style="{ backgroundImage: `url(${currentStep?.cover})` }"></div>
<div class="intro-background" :style="intro_background_style"></div>
<!-- 步骤标题 -->
<div class="step-title" ref="stepTitleRef">
......@@ -244,6 +244,18 @@ const currentStep = computed(() => {
return processSteps.value.find(step => step.active) || processSteps.value[0]
})
/**
* 计算流程背景图样式
* 说明:为避免URL中包含空格、中文或特殊符号导致背景图不显示,进行安全编码并加上引号
* @returns {Object} 内联样式对象
*/
const intro_background_style = computed(() => {
const url = currentStep.value && currentStep.value.cover ? currentStep.value.cover : ''
if (!url) return {}
const safe_url = encodeURI(url)
return { backgroundImage: 'url("' + safe_url + '")' }
})
// 步骤标题的ref引用
const stepTitleRef = ref(null)
......