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

【功能修复】s-title-block 的 fontWeight 多加了 px 像素

pull/124/head^2
YunaiV 2024-10-27 18:22:47 +08:00
parent f36b183407
commit 4bdc82786e
1 changed files with 95 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,108 +1,111 @@
<!-- 装修商品组件：标题栏 --> <!-- 装修商品组件：标题栏 -->
<template> <template>
<view class="ss-title-wrap ss-flex ss-col-center" :class="[state.typeMap[data.textAlign]]" :style="[bgStyle, { marginLeft: `${data.space}px` }]"> <view
<view class="title-content"> class="ss-title-wrap ss-flex ss-col-center"
<!-- 主标题 --> :class="[state.typeMap[data.textAlign]]"
<view v-if="data.title" class="title-text" :style="[titleStyles]">{{ data.title }}</view> :style="[bgStyle, { marginLeft: `${data.space}px` }]"
<!-- 副标题 --> >
<view v-if="data.description" :style="[descStyles]" class="sub-title-text">{{ data.description }}</view> <view class="title-content">
</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)" <!-- 副标题 -->
:style="{color: data.descriptionColor}"> <view v-if="data.description" :style="[descStyles]" class="sub-title-text">{{
<view class="more-text" v-if="data.more.type !== 'icon'">{{ data.more.text }} </view> data.description
<text class="_icon-forward" v-if="data.more.type !== 'text'"></text> }}</view>
</view> </view>
</view> <!-- 查看更多 -->
<view
v-if="data.more?.show"
class="more-box ss-flex ss-col-center"
@tap="sheep.$router.go(data.more.url)"
:style="{ color: data.descriptionColor }"
>
<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 { import { reactive, computed } from 'vue';
reactive, import sheep from '@/sheep';
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: { data: {
type: Object, type: Object,
default: () => ({}), default: () => ({}),
}, },
// 装修样式 // 装修样式
styles: { styles: {
type: Object, type: Object,
default: () => ({}), default: () => ({}),
}, },
}); });
// 设置背景样式 // 设置背景样式
const bgStyle = computed(() => { const bgStyle = computed(() => {
// 直接从 props.styles 解构 // 直接从 props.styles 解构
const { const { bgType, bgImg, bgColor } = props.styles;
bgType,
bgImg,
bgColor
} = props.styles;
// 根据 bgType 返回相应的样式 // 根据 bgType 返回相应的样式
return { return {
background: bgType === 'img' ? `url(${bgImg}) no-repeat top center / 100% 100%` : bgColor background: bgType === 'img' ? `url(${bgImg}) no-repeat top center / 100% 100%` : bgColor,
}; };
}); });
// 标题样式 // 标题样式
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}`,
}; };
</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>