hookehuyr

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

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