<template><view class="custom-navbar" :style="{ paddingTop: statusBarHeight + 'px', height: navBarHeight + 'px' }"><view class="left" @click="goBack"><image src="../../static/logo.png" mode=""></image></view><view class="title">首页</view><view class="right"><!-- 可以添加其他按钮或图标 --></view></view>
</template><script>export default {data() {return {statusBarHeight: 0,navBarHeight: 0}},created() {const systemInfo = uni.getSystemInfoSync();this.statusBarHeight = systemInfo.statusBarHeight; // 获取状态栏高度if (systemInfo.platform === 'android') {this.navBarHeight = this.statusBarHeight + 48; // Android 导航栏高度} else {this.navBarHeight = this.statusBarHeight + 44; // iOS 导航栏高度}},methods: {goBack() {uni.navigateBack();}}}
</script><style lang="scss" scoped>.custom-navbar {display: flex;justify-content: space-between;align-items: center;background-color: #FFE5E6;box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);padding: 0 10px;box-sizing: border-box;}.left,.right {width: 50rpx;height: 50rpx;display: flex;justify-content: center;align-items: center;image{width: 100%;height: 100%;}}.title {flex: 1;text-align: center;font-size: 18px;font-weight: bold;}.iconfont {font-size: 20px;}
</style>
