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.
130 lines
2.7 KiB
130 lines
2.7 KiB
11 months ago
|
<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,
|
||
|
|
},
|
||
|
|
// 标题
|
||
|
|
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(){
|
||
|
|
// this.$emit('backPage')
|
||
|
|
this.$.back()
|
||
|
|
},
|
||
|
|
// 跳转页面
|
||
|
|
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>
|