You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
139 lines
2.8 KiB
139 lines
2.8 KiB
<template> |
|
<!--顶部--> |
|
<view class="TopTitleBox Width100" :class="bg" :style="'height:' + navHeight + 'rpx;top:0px;padding-top:' + topHeight + 'px;'"> |
|
<view class="TitleContent Width90 Height100 MarginAuto PositionR"> |
|
<view class="LeftBox PositionA Height100" v-show="isShowLeft" @click="backPage"> |
|
<image :src="$.imgSrc + '/scimg/left1.png'" mode="aspectFit" class="Block Icon"></image> |
|
</view> |
|
<view class="Title MarginAuto TextCenter" :style="titleWidth"> |
|
<text class="Block FontBold TextHidden" :class="[fontSize,fontColor]">{{title}}</text> |
|
</view> |
|
<view class="RightBox Height100 PositionA Flex" :style="'width:' + rightWidth + 'rpx;align-items: center'"> |
|
<slot name="right"></slot> |
|
</view> |
|
</view> |
|
</view> |
|
|
|
</template> |
|
|
|
<script> |
|
export default { |
|
name: "top-title", |
|
props: { |
|
bg:{ |
|
type:String, |
|
default:'' |
|
}, |
|
fontSize:{ |
|
type:String, |
|
default:'FontS_32rpx' |
|
}, |
|
fontColor:{ |
|
type:String, |
|
default:'Color_FFFFFF' |
|
}, |
|
// 是否显示左边 |
|
isShowLeft: { |
|
type: Boolean, |
|
default: true, |
|
}, |
|
// 是否自定义方法 |
|
isCuMethod: { |
|
type: Boolean, |
|
default: false, |
|
}, |
|
// 标题 |
|
title: { |
|
type: String, |
|
default: '', |
|
}, |
|
// 右侧宽度 |
|
rightWidth: { |
|
type: Number, |
|
default: 0, |
|
}, |
|
// 减去宽度 |
|
subWidth: { |
|
type: Number, |
|
default: 200, |
|
}, |
|
}, |
|
data() { |
|
return { |
|
navHeight:88, |
|
topHeight:0, |
|
} |
|
}, |
|
mounted(){ |
|
// 状态栏高度 |
|
uni.getSystemInfo({ |
|
success: (e) => { |
|
// #ifdef APP-PLUS || MP |
|
this.topHeight = e.statusBarHeight |
|
// #endif |
|
} |
|
}) |
|
}, |
|
computed:{ |
|
titleWidth(){ |
|
return 'width:calc(100% - ' + (this.subWidth + this.rightWidth) + 'rpx);' |
|
}, |
|
topBg(){ |
|
return "background-image:url('" + this.$.imgSrc + "/images/title_bg1.png');background-repeat: no-repeat;background-position: center top;background-size:100% 100%;" |
|
} |
|
}, |
|
methods: { |
|
// 获取url |
|
getCurPage() { |
|
let pages = getCurrentPages(); |
|
let curPage = pages[pages.length - 1]; |
|
return curPage |
|
}, |
|
// 返回 |
|
backPage(){ |
|
if(this.isCuMethod){ |
|
this.$emit('skipPage') |
|
}else{ |
|
this.$.back() |
|
} |
|
// this.$emit('backPage') |
|
|
|
}, |
|
// 跳转页面 |
|
skipPage(item) { |
|
this.$emit('skipPage', item.pageUrl) |
|
}, |
|
}, |
|
} |
|
</script> |
|
|
|
<style scoped lang="scss"> |
|
/*头部*/ |
|
.TopTitleBox { |
|
position: fixed; |
|
left: 0; |
|
top: 0; |
|
z-index: 999; |
|
.TitleContent { |
|
text { |
|
line-height: 88rpx; |
|
} |
|
.LeftBox{ |
|
width: 100rpx; |
|
left: 0rpx; |
|
top: 0rpx; |
|
.Icon{ |
|
width: 38rpx; |
|
height: 38rpx; |
|
margin-top: 25rpx; |
|
} |
|
} |
|
.RightBox{ |
|
top: 0; |
|
right: 0; |
|
} |
|
.Title{ |
|
} |
|
} |
|
} |
|
</style>
|
|
|