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
3.2 KiB
139 lines
3.2 KiB
<template>
|
|
<view :style="{ height: navHeight + 'rpx' }">
|
|
<!-- <u-navbar :bgColor="theme == 'light' ? '#000' : 'transparent'"> -->
|
|
<u-navbar :bgColor="thisBack">
|
|
<view :class="[theme == 'light' ? 'u-nav-slot_dark' : 'u-nav-slot_light']" slot="left">
|
|
<u-icon name="arrow-left" size="19" @click="goBack()"
|
|
:color="theme == 'light' ? '#fff' : '#3D3D3D'"></u-icon>
|
|
<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
|
|
<u-icon name="home-fill" size="20" @click="goSwitch()"
|
|
:color="theme == 'light' ? '#fff' : '#3D3D3D'"></u-icon>
|
|
</view>
|
|
|
|
<view :class="[theme == 'light' ? 'text-white' : 'text-black', 'text-bold']" slot="center">{{ title }}</view>
|
|
|
|
</u-navbar>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
export default {
|
|
// theme: light || dark
|
|
props: ["bgColor", "title", "theme"],
|
|
data() {
|
|
return {
|
|
|
|
navHeight: 80,
|
|
thisBack:'',
|
|
thisColor:'',
|
|
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
|
|
},
|
|
watch: {
|
|
|
|
theme(newValue, oldValue) {
|
|
|
|
if (newValue !== oldValue) {
|
|
switch(this.theme) {
|
|
case 'light':
|
|
this.thisBack = '#000';
|
|
break;
|
|
case 'white':
|
|
this.thisBack = '#E3E8FE';
|
|
break;
|
|
case 'white1':
|
|
this.thisBack = '#fff';
|
|
break;
|
|
default :
|
|
this.thisBack = 'transparent';
|
|
|
|
}
|
|
}
|
|
},
|
|
},
|
|
|
|
|
|
mounted() {
|
|
//this.setNavigationBarColor()
|
|
console.log(this.theme);
|
|
switch(this.theme) {
|
|
case 'light':
|
|
this.thisBack = '#000';
|
|
break;
|
|
case 'white':
|
|
this.thisBack = '#E3E8FE';
|
|
break;
|
|
case 'white1':
|
|
this.thisBack = '#fff';
|
|
break;
|
|
default :
|
|
this.thisBack = 'transparent';
|
|
|
|
}
|
|
|
|
this.getNavHeight()
|
|
},
|
|
|
|
|
|
methods: {
|
|
setNavigationBarColor() {
|
|
let frontColor = this.theme == 'light' ? '#ffffff' : '#3d3d3d';
|
|
// uni.setNavigationBarColor({ frontColor, backgroundColor: '#3d3d3d' })
|
|
|
|
uni.setNavigationBarColor({
|
|
frontColor: frontColor,
|
|
backgroundColor: '#3d3d3d'
|
|
})
|
|
},
|
|
getNavHeight() {
|
|
const info = uni.getSystemInfoSync();
|
|
console.log('statusBarHeight=',info.statusBarHeight);
|
|
this.$emit('getNavHeight', info.statusBarHeight);
|
|
},
|
|
|
|
goBack() {
|
|
|
|
uni.navigateBack();
|
|
},
|
|
goSwitch() {
|
|
uni.switchTab({
|
|
url:'/pages/index/index'
|
|
})
|
|
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.u-nav-slot_light {
|
|
background-color: #fff;
|
|
@include flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
border: 2rpx solid $u-border-color;
|
|
border-radius: 64rpx;
|
|
padding: 12rpx 24rpx;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.u-nav-slot_dark {
|
|
background: rgba(0, 0, 0, 0.15);
|
|
@include flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
border: 2rpx solid rgba(255, 255, 255, 0.254);
|
|
border-radius: 64rpx;
|
|
padding: 12rpx 24rpx;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.text-white{
|
|
color: #fff;
|
|
}
|
|
|
|
</style> |