76 lines
2.2 KiB
Vue
76 lines
2.2 KiB
Vue
|
<template>
|
|||
|
|
<view v-if="titleConfig">
|
|||
|
|
<navigator :url="path(linkConfig)" hover-class="none" class='title' :class="[(textPosition==0?'left':textPosition==2?'right':''),(textStyle==1?'italics':textStyle==2?'blod':'')]" :style="'font-size:'+fontSize+'rpx;margin:'+mbConfig+'rpx '+prConfig+'rpx 0;background-color:'+titleColor+';border-radius:'+bgStyle+'rpx;'">
|
|||
|
|
<view :style="'color:'+textColor">{{titleConfig}}</view>
|
|||
|
|
</navigator>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
// +----------------------------------------------------------------------
|
|||
|
|
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
|
|||
|
|
// +----------------------------------------------------------------------
|
|||
|
|
// | Copyright (c) 2016~2024 https://www.crmeb.com All rights reserved.
|
|||
|
|
// +----------------------------------------------------------------------
|
|||
|
|
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
|
|||
|
|
// +----------------------------------------------------------------------
|
|||
|
|
// | Author: CRMEB Team <admin@crmeb.com>
|
|||
|
|
// +----------------------------------------------------------------------
|
|||
|
|
import {merPath} from "@/utils/index"
|
|||
|
|
export default {
|
|||
|
|
name: 'titles',
|
|||
|
|
props: {
|
|||
|
|
dataConfig: {
|
|||
|
|
type: Object,
|
|||
|
|
default: () => {}
|
|||
|
|
},
|
|||
|
|
merId: {
|
|||
|
|
type: String || Number,
|
|||
|
|
default: ''
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
fontSize:this.dataConfig.fontSize.val*2,
|
|||
|
|
linkConfig:this.dataConfig.linkConfig.value,
|
|||
|
|
mbConfig:this.dataConfig.mbConfig.val*2,
|
|||
|
|
prConfig:this.dataConfig.prConfig.val*2,
|
|||
|
|
textPosition:this.dataConfig.textPosition.type,
|
|||
|
|
textStyle:this.dataConfig.textStyle.type,
|
|||
|
|
titleColor:this.dataConfig.titleColor.color[0].item,
|
|||
|
|
titleConfig:this.dataConfig.titleConfig.value,
|
|||
|
|
textColor:this.dataConfig.themeColor.color[0].item,
|
|||
|
|
bgStyle:this.dataConfig.bgStyle.type ? '16' : '0'
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
created() {},
|
|||
|
|
methods:{
|
|||
|
|
path(url){
|
|||
|
|
return merPath(url, this.merId)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
.title{
|
|||
|
|
font-size: 40rpx;
|
|||
|
|
color: #282828;
|
|||
|
|
text-align: center;
|
|||
|
|
padding: 10rpx 0;
|
|||
|
|
&.left{
|
|||
|
|
text-align: left;
|
|||
|
|
}
|
|||
|
|
&.right{
|
|||
|
|
text-align: right;
|
|||
|
|
}
|
|||
|
|
&.blod{
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
&.italics{
|
|||
|
|
font-style: italic;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
</style>
|