uniapp 修改顶部导航栏胶囊样式

你可以在uni-app中使用自定义导航栏组件来修改导航栏胶囊样式。首先，你需要在页面配置文件（如pages.json或者使用页面生命周期函数）中设置navigationStyle为custom。然后在自定义导航栏组件中使用uni.getSystemInfoSync()获取设备信息，计算出状态栏高度和导航栏高度，并设置胶囊的样式。以下是一个简单的示例代码：

<template>
  <view class="nav">
    <view class="status-bar" :style="{height: statusBarHeight + 'px'}"></view>
    <view class="nav-bar" :style="{height: navBarHeight + 'px'}">
      <view class="nav-bar__left" :style="{width: capsuleLeft + 'px'}"></view>
      <view class="nav-bar__title">{{title}}</view>
      <view class="nav-bar__right" :style="{width: capsuleRight + 'px'}"></view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: '',
      statusBarHeight: 0,
      navBarHeight: 0,
      capsuleLeft: 0,
      capsuleRight: 0
    }
  },
  onLoad() {
    // 获取设备信息
    const systemInfo = uni.getSystemInfoSync()
    const capsuleInfo = uni.getMenuButtonBoundingClientRect()

    // 计算状态栏高度和导航栏高度
    this.statusBarHeight = systemInfo.statusBarHeight
    this.navBarHeight = capsuleInfo.top + (capsuleInfo.height - this.statusBarHeight) * 2

    // 计算胶囊的位置和大小
    this.capsuleLeft = capsuleInfo.left - systemInfo.screenWidth / 2 + capsuleInfo.width / 2
    this.capsuleRight = systemInfo.screenWidth - this.capsuleLeft - capsuleInfo.width
  }
}
</script>

<style>
.nav {
  width: 100%;
  height: var(--nav-height);
  background-color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
}
.status-bar {
  width: 100%;
  background-color: #fff;
}
.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  box-sizing: border-box;
}
.nav-bar__left,
.nav-bar__right {
  width: 44px;
  height: 100%;
}
.nav-bar__title {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
}
</style>

你可以根据自己的需求修改样式和布局。同时，也可以在组件中添加一些额外的功能，例如返回按钮、搜索框等等。