luojigou_xcx_agent/src/components/CustomNavbar/index.vue

<template>
    <view class="CustomNavbar" :style="{backgroundColor: bgColor}">
        <view class="empty" :style="{height: statusBarHeight + 2 +'px'}"></view>
        <view 
            class="Navbar" 
            :style="{height: ( bounding.top - statusBarHeight ) * 2 + bounding.height + 'px'}"
        >
            <van-icon name="arrow-left" size="40rpx" class="arrow-left"  @click="jumpPage"/>
            <view class="title">{{title}}</view>
        </view>
        
    </view>
</template>

<script>
export default {
    name: 'CustomNavbar',
    props: {
        title: {
            type: String,
            default: ''
        },
        bgColor: {
            type: String,
            default: '#fff'
        }
    },
    computed: {
        statusBarHeight () {
            return this.$store.state.systemInfo.statusBarHeight
        },
        bounding () {
            return this.$store.state.bounding
        }
    },
    methods: {
        jumpPage () {
          
            uni.navigateBack({
                delta: 1
            })
        }
    }
}
</script>
<style scoped lang="less">
.CustomNavbar {
    background-color: #fff;
    width: 100%;
    z-index: 10;
    .empty {
        width: 100%;
    }
    .Navbar {
        display: flex;
        align-items: center;
        position: relative;
        .arrow-left {
            position: absolute;
            left: 40rpx;
        }
        .title {
            width: 300rpx;
            height: 300rpx;
            font-size: 36rpx;
            font-weight:500;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
        }
    }
}
</style>