scss切页面

html

<div class="data-list">
    <div class="data-list-item">
        <div class="data-list-item-image">
            <img src="/Wx/YearCard/image/head.png">
        </div>
        <div class="data-list-item-content">
            <div class="data-list-item-content-title">宿迁文旅集团旅游单人年卡</div>
            <div class="data-list-item-content-sub">畅游宿迁-乐趣无穷</div>
            <div class="data-list-item-content-date">有效期至：2020-04-02</div>
            <div class="data-list-item-content-btn">查看年卡信息</div>
        </div>
    </div>

</div>

scss

.data-list {
  width: px2rem(750px);
  height: auto;

  .data-list-item {
    width: px2rem(710px);
    height: auto;
    margin: 0 auto;
    margin-bottom: px2rem(80px);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .data-list-item-image {
      img {
        width: px2rem(230px);
        border-radius: px2rem(20px);
      }
    }

    .data-list-item-content {
      position:relative;
      width: px2rem(710-230-47px);

      .data-list-item-content-title {
        line-height: px2rem(75px);
        font-size: px2rem(34px);
        font-weight: bold;
        color: #313131;
      }

      .data-list-item-content-sub {
        font-size: px2rem(26px);
        color: #444444;
        margin-bottom: px2rem(20px);
      }

      .data-list-item-content-date {
        font-size: px2rem(26px);
        color: #ACACAC;
      }

      .data-list-item-content-btn {
        position: absolute;
        bottom: 0;
        right: 0;
        width: px2rem(210px);
        height: px2rem(56px);
        border: px2rem(2px) solid rgba(94, 202, 190, 1);
        border-radius: px2rem(28px);
        color:#5ECABE;
        font-size:px2rem(28px);
        text-align: center;
        line-height: px2rem(56px);
      }
    }
  }
}

.data-list-hide {
  display: none;
}