页面底部功能区布局

页面源码：

<div class="detail-footer">
  <div class="detail-footer-item">
    <img class="detail-footer-item-icon" src="../../assets/image/icon-resp-pencil.png">
    <span class="detail-footer-item-label">回复</span></div>
  <div class="detail-footer-item">
    <img class="detail-footer-item-icon" src="../../assets/image/icon-msg.png">
    <span class="detail-footer-item-label">消息</span></div>
  <div class="detail-footer-item">
    <img class="detail-footer-item-icon" src="../../assets/image/icon-share.png">
    <span class="detail-footer-item-label">分享</span></div>
</div>

样式源码：

.detail-footer{
  background-color: white;
  border-top: solid 1px #f4f4f4;
  bottom: 0;
  right: 0;
  left: 0;
  position: fixed;
  z-index: 1;
  font-size: 0.24rem;
  color: #888;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  display: flex;
  justify-content: space-around;
  text-align: center;
  .detail-footer-item{
    display: flex;
    .detail-footer-item-icon{
      width: 0.5rem;
      height: 0.5rem;
      padding-right: 0.05rem
    }
    .detail-footer-item-label{
      line-height: 0.5rem
    }
  }
}

但请注意：使用该样式时，请将上部div设置

padding-bottom: 1rem