分兩部分布局，頭部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;
}
 

先外後裏，由上而下，由左而右，盒子布局