yudao
/
mall-uniapp
mirror of https://gitee.com/yudaocode/yudao-mall-uniapp.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

pull/76/head
卢越 2024-08-12 13:06:35 +08:00
parent 34274cbaa8
commit be5db900a0
1 changed files with 93 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

175
sheep/components/s-title-block/s-title-block.vue
View File

@ -1,100 +1,109 @@
<!-- 装修商品组件：标题栏 --> <!-- 装修商品组件：标题栏 -->
<template> <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" <view class="title-content">
:class="[state.typeMap[data.textAlign]]" <!-- 主标题 -->
:style="[elStyles]" <view v-if="data.title" class="title-text" :style="[titleStyles]">{{ data.title }}</view>
> <!-- 副标题 -->
<view class="title-content"> <view v-if="data.description" :style="[descStyles]" class="sub-title-text">{{ data.description }}</view>
<!-- 主标题 --> </view>
<view v-if="data.title" class="title-text" :style="[titleStyles]">{{ data.title }}</view> <!-- 查看更多 -->
<!-- 副标题 --> <view v-if="data.more?.show" class="more-box ss-flex ss-col-center" @tap="sheep.$router.go(data.more.url)"
<view v-if="data.description" :style="[descStyles]" class="sub-title-text">{{ data.description }}</view> :style="{color: data.descriptionColor}">
</view> <view class="more-text" v-if="data.more.type !== 'icon'">{{ data.more.text }} </view>
<!-- 查看更多 --> <text class="_icon-forward" v-if="data.more.type !== 'text'"></text>
<view v-if="data.more?.show" class="more-box ss-flex ss-col-center" @tap="sheep.$router.go(data.more.url)" </view>
:style="{color: data.descriptionColor}"> </view>
<view class="more-text" v-if="data.more.type !== 'icon'">{{ data.more.text }} </view>
<text class="_icon-forward" v-if="data.more.type !== 'text'"></text>
</view>
</view>
</template> </template>
<script setup> <script setup>
/** /**
* 标题栏 * 标题栏
*/ */
import { reactive } from 'vue'; import {
import sheep from '@/sheep'; reactive,
computed
} from 'vue';
import sheep from '@/sheep';
// 数据 // 数据
const state = reactive({ const state = reactive({
typeMap: { typeMap: {
left: 'ss-row-left', left: 'ss-row-left',
center: 'ss-row-center', center: 'ss-row-center',
}, },
}); });
// 接收参数 // 接收参数
const props = defineProps({ const props = defineProps({
data: { // 装修数据
type: Object, data: {
default() {}, type: Object,
}, default: () => ({}),
styles: { },
type: Object, // 装修样式
default() {}, styles: {
}, type: Object,
}); 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 = { 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
}; };
// 副标题 // 副标题
const descStyles = { const descStyles = {
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}px`, fontWeight: `${props.data.descriptionWeight}px`,
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.ss-title-wrap { .ss-title-wrap {
height: 80rpx; height: 80rpx;
position: relative; position: relative;
.title-content { .title-content {
.title-text { .title-text {
font-size: 30rpx; font-size: 30rpx;
color: #333; color: #333;
} }
.sub-title-text { .sub-title-text {
font-size: 22rpx; font-size: 22rpx;
color: #999; color: #999;
} }
} }
.more-box { .more-box {
white-space: nowrap; white-space: nowrap;
font-size: 22rpx; font-size: 22rpx;
color: #999; color: #999;
position: absolute; position: absolute;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
right: 20rpx; right: 20rpx;
} }
} }
</style> </style>