android-cloud-H5/pages/transferDuration/components/transferRecord.vue

<template>
    <div class="record">
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <van-row v-for="item in 50" :key="item" class="record-item">
                <van-col span="24">
                    <div class="flex-jub record-border">
                        <div>
                            <span>单号：</span><span style="font-weight: bold;color: #CFD1D4;">35584748783455</span>
                        </div>
                        <div>
                            <span>转移天数：</span><span style="font-weight: bold;color: #CFD1D4;">700天</span>
                        </div>
                    </div>
                </van-col>
                <van-col span="24">
                    <div class="record-details-item">
                        <span>扣除天数：</span><span style="font-weight: bold;color: #CFD1D4;">700天</span>
                    </div>
                </van-col>
                <van-col span="24">
                    <div class="flex-jub record-details-item">
                        <div>
                            <span>主设备名称：</span><span style="font-weight: bold;color: #CFD1D4;">CsQ354</span>
                        </div>
                        <div>
                            <span>设备天数：</span><span style="font-weight: bold;color: #CFD1D4;">-700天</span>
                        </div>
                    </div>
                </van-col>
                <van-col span="24">
                    <div class="flex-jub record-details-item">
                        <div>
                            <span>副设备名称：</span><span style="font-weight: bold;color: #CFD1D4;">CsQ354</span>
                        </div>
                        <div>
                            <span>设备天数：</span><span style="font-weight: bold;color: #CFD1D4;">700天</span>
                        </div>
                    </div>
                </van-col>
                <van-col span="24">
                    <div class="record-details-item">
                        <span>转移时间：</span><span style="font-weight: bold;color: #CFD1D4;">2023年7月20日14:45:11</span>
                    </div>
                </van-col>
            </van-row>

        </van-list>
    </div>
</template>

<script>
export default {
    name: 'transferRecord',

    data() {
        return {
            loading: false,
            finished: false
        };
    },

    mounted() {

    },

    methods: {
        onLoad() {
            console.log(54456)
        }
    },
};
</script>

<style lang="scss" scoped>
.record {
    padding: 0 16px;
    font-weight: 100;

    .record-item {
        margin-bottom: 16px;
        padding: 24px 24px 24px 16px;
        background: #2C2C2D;
        box-shadow: 0px 3px 7px 0px #1E2022;
        border-radius: 8px;
    }

    .record-details-item {
        margin-top: 12px;
    }

    .record-border {
        padding-bottom: 12px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .flex-jub {
        display: flex;
        justify-content: space-between;

    }
}
</style>