187 lines
3.6 KiB
Vue
187 lines
3.6 KiB
Vue
<template>
|
|
<view class="nav flex fixed" :style="navBarStyle">
|
|
<image v-if="!hideNavBg" class="bg absolute" src="/static/image/index/conceptTopBg.png" mode="widthFix"></image>
|
|
<view class="backC relative flex" :style="backTitleStyle" @click="clickBack">
|
|
<image v-if="!hideBack&&!backBlack" class="icon" src="/static/icon/back.png" mode="widthFix"></image>
|
|
<image v-if="!hideBack&&backBlack" class="icon" src="/static/icon/backBlack.png" mode="widthFix"></image>
|
|
<text class="title">{{leftText}}</text>
|
|
</view>
|
|
<view class="titleC relative" :style="navTitleStyle">
|
|
{{navTitle}}
|
|
<view v-if="num>0" class="peopleNum absolute">
|
|
<view class="num">{{num}}人</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { inject } from 'vue'
|
|
const app = getApp()
|
|
|
|
export default {
|
|
name: "navBar",
|
|
data() {
|
|
return {
|
|
// #ifdef MP-WEIXIN
|
|
navH: inject('navHeight'),
|
|
menuH: inject('menuHeight'),
|
|
// #endif
|
|
// #ifdef MP-TOUTIAO
|
|
navH: app.globalData.navHeight,
|
|
menuH: app.globalData.menuHeight,
|
|
// #endif
|
|
navBarStyle:'',
|
|
backTitleStyle:'',
|
|
navTitleStyle:'',
|
|
titleColor:this.navTitleColor,
|
|
bgColor:this.navBgColor,
|
|
num:this.peopleNum
|
|
};
|
|
},
|
|
props: {
|
|
leftText: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
backBlack:{
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
navTitle: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
navBgColor: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
navTitleColor: {
|
|
type: String,
|
|
default: 'white'
|
|
},
|
|
hideBack: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
hideNavBg: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
backLevel: {
|
|
type: Number,
|
|
default: 1
|
|
},
|
|
peopleNum: {
|
|
type: Number,
|
|
default: 0
|
|
}
|
|
},
|
|
mounted() {
|
|
let navHeight = this.navH;
|
|
// #ifdef MP-WEIXIN
|
|
let menuHeight = inject('menuHeight');
|
|
let menuTop = inject('menuTop');
|
|
// #endif
|
|
let navBarStyle = `background-color:${this.bgColor};height:${navHeight}px;`
|
|
let backTitleStyle = `height:${menuHeight}px;margin-top:${menuTop}px;color:${this.titleColor}`
|
|
let navTitleStyle = `height:${menuHeight}px;line-height:${menuHeight}px;top:${menuTop}px;color:${this.titleColor}`
|
|
this.navBarStyle = navBarStyle
|
|
this.backTitleStyle = backTitleStyle
|
|
this.navTitleStyle = navTitleStyle
|
|
},
|
|
watch:{
|
|
navTitleColor:{
|
|
handler(newVal, oldVal)
|
|
{
|
|
this.titleColor = newVal
|
|
}
|
|
},
|
|
navBgColor:{
|
|
handler(newVal, oldVal)
|
|
{
|
|
this.bgColor = newVal
|
|
}
|
|
},
|
|
peopleNum:{
|
|
handler(newVal, oldVal)
|
|
{
|
|
this.num = newVal
|
|
}
|
|
}
|
|
},
|
|
methods:{
|
|
clickBack()
|
|
{
|
|
uni.navigateBack({
|
|
fail() {
|
|
uni.switchTab({
|
|
url:'/pages/index/index'
|
|
})
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.nav
|
|
{
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 99;
|
|
overflow: hidden;
|
|
.bg
|
|
{
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
.backC
|
|
{
|
|
padding: 0 25rpx;
|
|
.icon
|
|
{
|
|
margin-right: 12rpx;
|
|
width: 32rpx;
|
|
height: auto;
|
|
}
|
|
}
|
|
.title
|
|
{
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
}
|
|
.titleC
|
|
{
|
|
position: absolute;
|
|
left: calc((100% - 400rpx)/2);
|
|
width: 400rpx;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
text-align: center;
|
|
font-size: 36rpx;
|
|
font-weight: 500;
|
|
.peopleNum
|
|
{
|
|
background-color: #3B9174;
|
|
top: -15rpx;
|
|
left: 270rpx;
|
|
height: 30rpx;
|
|
border-radius: 15px 15px 15px 0px;
|
|
line-height: 30rpx;
|
|
font-size: 24rpx;
|
|
color: white;
|
|
.num
|
|
{
|
|
margin: 0 16rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
</style>
|