<template>
    <!-- 全局自定义navbar -->
    <view class="mocp-navbar">
        <up-navbar :title="title" :fixed="false" :bgColor="bgColor" :safeAreaInsetTop="false" :titleStyle="getTitleStyle">
            <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 {}
        }
    }
})
const getTitleStyle = computed(() => {
    return {
        ...ps.titleStyle,
        color: '#4e5969',
        fontSize: '34rpx'
    }
})
</script>
<style lang="scss" scoped></style>
