book-hi/pages-mine/pages/partner/income-detail.vue

<template>
    <view class="income-detail">
        <page-scroll ref="pageScroll" url="/api/mock/income-detail" :immediate="true" :slot-empty="true">
            <view class="income-list">
                <view class="income-item" v-for="(item, index) in mockData" :key="index">
                    <view class="item-left">
                        <view class="income-title">推广收入</view>
                        <view class="income-time">{{ item.time }}</view>
                    </view>
                    <view class="income-amount">+{{ item.amount }}</view>
                </view>
            </view>
        </page-scroll>
    </view>
</template>

<script>
export default {
    data() {
        return {
            mockData: Array(6)
                .fill()
                .map(() => ({
                    time: "2021.2.25 10:48:32",
                    amount: "100.00",
                })),
        };
    },
};
</script>

<style lang="scss" scoped>
.income-detail {
    min-height: 100vh;
    background-color: #f5f5f5;
}

.income-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    padding: 30rpx 40rpx;
    margin-bottom: 2rpx;

    .item-left {
        .income-title {
            font-size: 32rpx;
            color: #333;
            margin-bottom: 10rpx;
        }

        .income-time {
            font-size: 28rpx;
            color: #999;
        }
    }

    .income-amount {
        font-size: 32rpx;
        color: #ff5555;
        font-weight: 500;
    }
}
</style>