分两部分布局，头部tab、列表内容。

html

<!-- 头部 -->
<view class='tab'><view class="tab-new {{selected_new?'active':'default'}}" bindtap="selected_new">最新理财</view><view class="tab-old {{selected_old?'active':'default'}}" bindtap="selected_old">往期理财</view>
</view><!-- 列表 -->
<view class='list'><view class='list-item'><view class='list-item-left'><view class="left-yield">2.5~4.5%</view><view class="left-yield-name">预计年化收益率</view><view class="left-property">产品性质:保本</view></view><view class='list-item-right'><view class='right-name'>1910期"鑫湖通"</view><view>起购金额:<span class='right-font-black'>5万</span></view><view>理财期限:<span class='right-font-black'>90天</span></view><view>开始时间:2019.03.21</view><view>结束时间:2019.03.21</view></view><view class="list-item-top top-rec">荐</view><image class="list-item-arrow" src="/img/common/right.png"></image></view><view class='list-item'><view class='list-item-left'><view class="left-yield">2.5~4.5%</view><view class="left-yield-name">预计年化收益率</view><view class="left-property">产品性质:保本</view></view><view class='list-item-right'><view class='right-name'>1910期"鑫湖通"</view><view>起购金额:<span class='right-font-black'>5万</span></view><view>理财期限:<span class='right-font-black'>90天</span></view><view>开始时间:2019.03.21</view><view>结束时间:2019.03.21</view></view><view class="list-item-top top-rec">荐</view><image class="list-item-arrow" src="/img/common/right.png"></image></view><view class='list-item'><view class='list-item-left'><view class="left-yield">2.5~4.5%</view><view class="left-yield-name">预计年化收益率</view><view class="left-property">产品性质:保本</view></view><view class='list-item-right'><view class='right-name'>1910期"鑫湖通"</view><view>起购金额:<span class='right-font-black'>5万</span></view><view>理财期限:<span class='right-font-black'>90天</span></view><view>开始时间:2019.03.21</view><view>结束时间:2019.03.21</view></view><view class="list-item-top top-new">新</view><image class="list-item-arrow" src="/img/common/right.png"></image></view>
</view>

css

/* 先外后里,由上而下，由左而右 大小要计算 */.tab {display: flex;height: 70rpx;line-height: 70rpx;margin-top: 45rpx;
}.tab .tab-new {width: 50%;text-align: center;
}.tab .tab-old {width: 50%;text-align: center;
}.tab .active {font-size: 34rpx;font-weight: bold;color: #222;position: relative;
}.tab .active::after {content: "";width: 150rpx;height: 6rpx;background: rgba(2, 101, 255, 1);position: absolute;bottom: 0rpx;left: 50%;transform: translateX(-50%);
}.tab .default {font-size: 28rpx;font-weight: 500;color: #666;
}.list {padding: 40rpx 20rpx;width: 100%;
}.list .list-item {margin-bottom: 30rpx;padding-top: 15rpx;width: 100%;height: 244rpx;display: flex;position: relative;
}.list .list-item .list-item-left {width: 320rpx;padding-left: 23rpx;
}.list-item-left .left-yield {line-height: 70rpx;font-size: 50rpx;color: rgba(255, 0, 0, 1);padding-top:25rpx;
}.list-item-left .left-yield-name {font-size:26rpx;color:rgba(102,102,102,1);line-height:30rpx;
}.list-item-left .left-property {width: auto;font-size:26rpx;color:rgba(255,98,4,1);line-height:30rpx;border:1rpx solid rgba(255,98,4,1);border-radius:4rpx;margin-top:10rpx;float:left;
}.list .list-item .list-item-right {width: 390rpx;font-size: 24rpx;color: rgba(102, 102, 102, 1);line-height: 38rpx;
}.list-item-right .right-name {font-size: 30rpx;color: rgba(34, 34, 34, 1);line-height: 48rpx;
}.list-item-right .right-font-black {font-size:26rpx;color:#333333;
}.list .list-item .list-item-top {position: absolute;top: 0rpx;right: 23rpx;display: none;font-weight: 400;font-size: 30rpx;color: #fff;padding: 8rpx;border-bottom-left-radius: 10rpx;border-bottom-right-radius: 10rpx;
}.list .list-item  .top-rec {display: block;background-color: #ff404a;
}.list .list-item  .top-new {display: block;background-color: #0265ff;
}.list .list-item .list-item-arrow {position: absolute;top: 50%;transform: translateY(-50%);width: 16rpx;height: 28rpx;right: 38rpx;
}