【功能修复】修复标题栏装修背景图片问题

sheep/components/s-title-block/s-title-block.vue

@@ -1,10 +1,6 @@
 <!-- 装修商品组件：标题栏 -->
 <template>
-  <view
+	<view class="ss-title-wrap ss-flex ss-col-center" :class="[state.typeMap[data.textAlign]]" :style="[bgStyle, { marginLeft: `${data.space}px` }]">
-    class="ss-title-wrap ss-flex ss-col-center"
-    :class="[state.typeMap[data.textAlign]]"
-    :style="[elStyles]"
-  >
 		<view class="title-content">
 			<!-- 主标题 -->
 			<view v-if="data.title" class="title-text" :style="[titleStyles]">{{ data.title }}</view>
@@ -24,7 +20,10 @@
 	/**
 	 * 标题栏
 	 */
-  import { reactive } from 'vue';
+	import {
+		reactive,
+		computed
+	} from 'vue';
 	import sheep from '@/sheep';
 
 	// 数据
@@ -37,22 +36,32 @@
 
 	// 接收参数
 	const props = defineProps({
+		// 装修数据
 		data: {
 			type: Object,
-      default() {},
+			default: () => ({}),
 		},
+		// 装修样式
 		styles: {
 			type: Object,
-      default() {},
+			default: () => ({}),
 		},
 	});
+	// 设置背景样式
+	const bgStyle = computed(() => {
+		console.log(props.data)
+		// 直接从 props.styles 解构
+		const {
+			bgType,
+			bgImg,
+			bgColor
+		} = props.styles;
 
-  // 组件样式
+		// 根据 bgType 返回相应的样式
-  const elStyles = {
+		return {
-    background: `url(${sheep.$url.cdn(props.data.bgImgUrl)}) no-repeat top center / 100% auto`,
+			background: bgType === 'img' ? `url(${bgImg}) no-repeat top center / 100% 100%` : bgColor
-    fontSize: `${props.data.titleSize}px`,
-    fontWeight: `${props.data.titleWeight}px`,
 		};
+	});
 
 	// 标题样式
 	const titleStyles = {