toktok-front/toktok-wx-applet/custom-tab-bar/index.wxss

/* custom-tab-bar/index.js.wxss */
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 112rpx;
  background-color: rgb(255, 255, 255);
  display: flex;
  width: 750rpx;
  z-index: 10000;
  padding-bottom: env(safe-area-inset-bottom);
}
.tab-bar-item {
  position: relative;
  width: 187.5rpx;
  height: 112rpx;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.tab-bar-item>image:nth-child(1){
  width: 48rpx;
  height: 48rpx;
}
.tab-bar-item>view:nth-child(2){
  margin-top: 8rpx;
  width: 250rpx;
  height: 28rpx;
  font-size: 20rpx;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.87);
  line-height: 28rpx;
  text-align: center;
}
.tab-bar-item>text:nth-child(3){
  position: absolute;
  top: 8rpx;
  right: 52rpx;
  width: 24rpx;
  height: 24rpx;
  line-height: 24rpx;
  text-align: center;
  font-size: 18rpx;
  font-weight: 600;
  color: #FFFFFF;
  background-color: #FF5700;
  border-radius: 50%;
  border: 3px solid #FFFFFF;
  z-index: 10001;
}