公告列表
公告列表
收藏
回答

cover-view 在ios10布局错乱

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug cover-view 客户端 6.7.3 1.9.91


<cover-view class="fix-bottom">
          <cover-view wx:if="{{isCallswitch==1}}" class="footer-contact b_white t_center c_black_new  inline-block fz28 detail-contactlandlord-down" catchtap='callingsure' data-userid="{{data.landlord.userId}}">
            <cover-image class="inline-block" src="../../images/detail/phone-footer.png"></cover-image>
            <cover-view  class="inline">联系房东</cover-view>
          </cover-view>
          <cover-view class="footer-order fr b_green c_white t_center detail-book" catchtap='orderTap' data-userid="{{data.landlord.userId}}">
                <cover-view class="footer-order-left" wx:if="{{dayToShow.totalNum>0}}">
                  <cover-view class="footer-order-leftmain">
                      <cover-view class="footer-price">
                          <cover-view class="fz40 f_bold inline">￥{{toShowPrice}}　</cover-view>
                          <cover-view class="fz22 inline" >(共{{dayToShow.totalNum}}晚)　</cover-view>
                      </cover-view>
                      <cover-view class="footer-discount fz22" wx:if="{{toShowDiscount}}">已享长租优惠{{toShowDiscount}}元</cover-view>
                      <cover-view class="footer-discount fz22" wx:if="{{toShowCoupon}}">下单立减￥{{toShowCoupon}}元</cover-view>
                  </cover-view>
                </cover-view>
                <cover-view class="footer-order-right">
                    <cover-image class="inline-block" src="//staticnew.mayi.com/resourcesWap/v2018/lodgeDetail/images/flash.png"></cover-image>
                    <cover-view class=" c_white fz30 inline" >立即预订</cover-view>
                </cover-view>
          </cover-view>
  </cover-view>
.fix-bottom {
  width: 100%;
  height: 118rpx;
  background-color: #fff;
  z-index: 9999;
  position: fixed;
  bottom: 0;
  left: 0;
  box-sizing: border-box;
  display: flex;
}
 .footer-contact{
    width:250rpx;
    box-shadow: 0 -1rpx 0 0 #EBEBEB;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .footer-contact cover-image{
    width:40rpx;
    height:40rpx;
    margin-right: 15rpx;
    vertical-align: middle;
  }
.footer-order{
    flex:1;
    display: flex;
    display: -webkit-flex;
    box-shadow: 0 -1rpx 0 0 #EBEBEB;
}
.footer-order-left{
    padding: 17rpx 5rpx 17rpx 20rpx;
    text-align: left;
}
.footer-discount{
  color:#FFEA94;
}
.footer-order-leftmain
{
    height:100%;
    display: -webkit-flex;
    display: flex;
    flex-direction:column;
    justify-content: center;
}
.footer-order-leftmain .footer-price{
   display: flex;
    justify-content: center;
    align-items: center;
}
.footer-order-right{
      flex:1;
      -webkit-flex: 1;
      display: flex;
    justify-content: center;
    align-items: center;
}
.footer-order-right  cover-image{
  width:20rpx;
  height:36rpx;
  margin-right: 10rpx;
  vertical-align: middle;
}


最后一次编辑于  2018-10-08
回答关注问题邀请回答
收藏

2 个回答

请 登录 后发表内容
相关文档