73 lines
1.5 KiB
Vue
73 lines
1.5 KiB
Vue
|
<template>
|
||
|
|
<!-- header -->
|
||
|
|
<view :style="{ backgroundColor, paddingTop: homeHeaderPaddingTop + 'px', height: homeHeaderMenuHeight + 'px' }" class="navigationBar">
|
||
|
|
<uni-icons @click="back" class="navigationBarBack" size="24" type="left" :color="titleColor"></uni-icons>
|
||
|
|
<view class="navigationBarTitle" :style="{ color: titleColor }">
|
||
|
|
{{ title }}
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
/* 计算标题位置 */
|
||
|
|
import {getWXStatusHeight} from "@/utils/utils";
|
||
|
|
|
||
|
|
export default {
|
||
|
|
props: {
|
||
|
|
backgroundColor: {
|
||
|
|
type: String,
|
||
|
|
default: '#317DFA'
|
||
|
|
},
|
||
|
|
title: String,
|
||
|
|
titleColor: {
|
||
|
|
type: String,
|
||
|
|
default: '#fff'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onLoad() {
|
||
|
|
// #ifdef MP
|
||
|
|
const {barHeight, barTop, menuButtonLeft} = getWXStatusHeight()
|
||
|
|
this.homeHeaderPaddingTop = barTop || 0
|
||
|
|
this.homeHeaderMenuHeight = barHeight
|
||
|
|
this.homeHeaderMenuLeft = menuButtonLeft - 6
|
||
|
|
// #endif
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
// #ifdef MP
|
||
|
|
homeHeaderPaddingTop: 0,
|
||
|
|
homeHeaderMenuHeight: 0,
|
||
|
|
homeHeaderMenuLeft: 0,
|
||
|
|
// #endif
|
||
|
|
// #ifdef APP || H5
|
||
|
|
homeHeaderPaddingTop: 20,
|
||
|
|
homeHeaderMenuHeight: 50,
|
||
|
|
homeHeaderMenuLeft: 0
|
||
|
|
// #endif
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
back() {
|
||
|
|
uni.navigateBack({
|
||
|
|
delta: 1,
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.navigationBar {
|
||
|
|
position: relative;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
.navigationBarBack {
|
||
|
|
position: absolute;
|
||
|
|
left: 20rpx;
|
||
|
|
}
|
||
|
|
.navigationBarTitle {
|
||
|
|
font-size: 32rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|