fix:【商城】店铺装修-标题栏:之前 bgImgUrl 不对的问题(彻底修复)

pull/147/head
YunaiV 2025-05-01 12:07:01 +08:00
parent 8ef7c89735
commit db60915de6
1 changed files with 19 additions and 21 deletions

View File

@ -3,15 +3,15 @@
<view <view
class="ss-title-wrap ss-flex ss-col-center" class="ss-title-wrap ss-flex ss-col-center"
:class="[state.typeMap[data.textAlign]]" :class="[state.typeMap[data.textAlign]]"
:style="[bgStyle, { marginLeft: `${data.space}px` }]" :style="[elStyles]"
> >
<view class="title-content"> <view class="title-content">
<!-- 主标题 --> <!-- 主标题 -->
<view v-if="data.title" class="title-text" :style="[titleStyles]">{{ data.title }}</view> <view v-if="data.title" class="title-text" :style="[titleStyles]">{{ data.title }}</view>
<!-- 副标题 --> <!-- 副标题 -->
<view v-if="data.description" :style="[descStyles]" class="sub-title-text">{{ <view v-if="data.description" :style="[descStyles]" class="sub-title-text">
data.description {{ data.description }}
}}</view> </view>
</view> </view>
<!-- 查看更多 --> <!-- 查看更多 -->
<view <view
@ -30,7 +30,7 @@
/** /**
* 标题栏 * 标题栏
*/ */
import { reactive, computed } from 'vue'; import { reactive } from 'vue';
import sheep from '@/sheep'; import sheep from '@/sheep';
// //
@ -43,34 +43,32 @@
// //
const props = defineProps({ const props = defineProps({
//
data: { data: {
type: Object, type: Object,
default: () => ({}), default() {},
}, },
//
styles: { styles: {
type: Object, type: Object,
default: () => ({}), default() {},
}, },
}); });
//
const bgStyle = computed(() => {
// props.styles
const { bgType, bgImg, bgColor } = props.styles;
// bgType //
return { const elStyles = {
background: bgType === 'img' ? `url(${bgImg}) no-repeat top center / 100% 100%` : bgColor, background: `url(${sheep.$url.cdn(props.data.bgImgUrl)}) no-repeat top center / 100% auto`,
fontSize: `${props.data.titleSize}px`,
fontWeight: `${props.data.titleWeight}`,
// add by shopro props.styles.height props.data.height
height: `${props.data.height || 40}px`,
}; };
});
// //
const titleStyles = { const titleStyles = {
color: props.data.titleColor, color: props.data.titleColor,
fontSize: `${props.data.titleSize}px`, fontSize: `${props.data.titleSize}px`,
textAlign: props.data.textAlign, textAlign: props.data.textAlign,
marginLeft: `${props.data.skew || 0}px`, // add by shopro props.data.skew props.data.marginLeft
marginLeft: `${props.data.marginLeft || 0}px`,
}; };
// //
@ -78,8 +76,8 @@
color: props.data.descriptionColor, color: props.data.descriptionColor,
textAlign: props.data.textAlign, textAlign: props.data.textAlign,
fontSize: `${props.data.descriptionSize}px`, fontSize: `${props.data.descriptionSize}px`,
fontWeight: `${props.data.descriptionWeight}`, fontWeight: `${props.data.descriptionWeight}px`,
marginLeft: `${props.data.skew || 0}px`, marginLeft: `${props.data.marginLeft || 0}px`,
}; };
</script> </script>