<template>
    <!-- 全局自定义navbar -->
    <view class="mocp-navbar">
        <up-navbar :title="title" :fixed="false" :bgColor="bgColor" :safeAreaInsetTop="false"
                   :titleStyle="getTitleStyle" :leftIconSize="0">
            <template #left>
                <slot name="left"></slot>
            </template>
            <template #right>
                <slot name="right"></slot>
            </template>
        </up-navbar>
    </view>
</template>

<script setup>
import { computed } from 'vue'

const ps = defineProps({
    title: {
        type: String,
        default: ''
    },
    bgColor: {
        type: String,
        default: '#f7f8fa'
    },
    titleStyle: {
        type: Object,
        default: () => {
            return {}
        }
    },
    navBarBackground: {
        type: String,
        default: '#f00'
    }
})
console.log(ps.navBarBackground)
const getTitleStyle = computed(() => {
    return {
        color: '#4e5969',
        fontSize: '34rpx',
        ...ps.titleStyle
    }
})
</script>
<style lang="scss" scoped></style>
