小程序custom-tab-bar自定义背景图片

踩了一天的坑，终于把这该死的自定义custom-tab-bar啃下来了，代码如下

<cover-image  class="background-bottom  {{isIphoneX?'phone':''}}" src="/image/tab/tab_bgc.png"></cover-image>
<cover-view wx:if="{{isIphoneX}}" class="tab-bar-backgrond"></cover-view>  

<cover-view class="tab-bar">
  <cover-view class="tab-bar-border"></cover-view>
  <cover-view wx:for="{{list}}" wx:key="index" class="tab-bar-item {{item.type == 'vcode' ? 'item-vcode' : ''}} {{isIphoneX?'phone-item':''}}" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
    <cover-image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></cover-image>
    <cover-view  style="color: {{selected === index ? selectedColor : color}};">{{item.text}}</cover-view>
  </cover-view>
</cover-view>

.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 86px;    
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 3;
}
.tab-bar .background-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 750rpx;
  height: 86px;
  z-index: 0;
}
 .phone{
  position: fixed;
  bottom: 0rpx;
  left: 0;
  width: 750rpx;
  height: 86px;
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 0;
}

.tab-bar-backgrond {
  position: absolute;
  bottom: -50px;
  left: 0;
  width: 750rpx;
  height: 107px;
  background-color: #fff;
}

.tab-bar-border {
  display: none;
}

.tab-bar-item {
  flex: 1;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding-top: 40px;
  position: relative;
  z-index: 1;
}

.tab-bar-item.item-vcode cover-view {
  color: rgba(214, 24, 25, 1) !important;
}

.tab-bar-item cover-image {
  width: 27px;
  height: 27px;
}


.tab-bar-item .item-vcode cover-image {
  width: 42px;
  height: 42px;
  position: absolute;
  left: 50%;
  top: 20px;
  transform: translate(-50%, 0);
}

.tab-bar-item cover-view {
  font-size: 10px;
}

.tab-bar-item.item-vcode cover-view {
  margin-top: 24px;
}
.redcolor{
  color: rgba(214, 24, 25, 1);
}
.tab-bar-item.item-vcode cover-image {
  width: 65px;
  height: 65px;
  position: absolute;
  left: 50%;
  top: 8px;
  transform: translate(-50%, 0);
}
.tab-bar-item.phone-item cover-image {
  top: 0px;
}

效果图

阴影效果需要图片自带阴影！！！