小程序自定义顶部导航栏的样式问题

Question

自定义的导航栏：

app.json:
    "navigationStyle": "custom"
自定义：
    
<!--wxml-->
<view class='header'>
  <view class='flex'>
    今日菜价
  </view>
</view>
<!--wxss-->
.header{
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: 114rpx;
  padding: 0;
  padding-top: 40rpx;
  border-bottom: none;
  background-color: #ffffff;
}
.header::after{
  content: "";
  display: inline-block;
  width: 100%;
  height: 40rpx;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  background-color: #000000;
}
.header>view{
  width: 100%;
  height: 100%;
  padding: 0 15rpx;
}

自定义效果图一（iphone6）：

自定义效果图二（iphone5）：

产品需求的样式图：

那个右边的胶囊，位置总是相较于自定义的导航栏乱跑，如何避免？

Answer 1

找到解决方法了：至理之门

感谢前辈