CSS布局片段

底部

1. 浮动底部+收藏功能

    <footer class="demand-footer">
      <div class="demand-footer_collection">
        <van-icon color="#B7C0CA" size="22" name="like" />
        <i>收藏</i>
      </div>
      <span>立即接单</span>
    </footer>

  .demand-footer {
    background-color: #fff;
    height: 60px;
    justify-content: center;
    align-items: center;
    display: flex;
    position: fixed;
    bottom: 0px;
    width: 100%;
    .demand-footer_collection {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 40px;
      .van-icon-like {
        width: 60px;
      }
      i {
        font-size: 11px;
      }
    }
    span {
      flex: 1;
      background: $themeColor;
      border-radius: 8px;
      height: 40px;
      line-height: 40px;
      color: #fff;
      margin-right: 16px;
    }
  }