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;
}