merchant_feedov_web/src/views/lotCard/cardList/list.vue

<template>
    <!-- 订单列表-查看订单流量明细 -->
    <div class="trafficUse">
        <ul class="order_list_box">
            <li class="list_box_item" v-for="(item, index) in data" key="index">
                <div class="list_item_left">
                    <a-progress type="circle" :percent="0.2" />
                </div>
                <div class="list_item_right">
                    <p>
                        <span>{{ $t('lotCard.orderID') }}：{{ item.id }}</span>
                        <!-- <span class="list_item_right_span">{{ $t('lotCard.orderType') }}：{{ item.orderType }}</span> -->
                        <!-- <span>更新时间：{{ item.updated_at }}</span> -->
                    </p>
                    <template v-if="item.trafficList">
                        <p v-for="trafficVal in item.trafficList" :key="trafficVal.id">
                            <span class="list_item_right_span"> 流量总量：{{ trafficVal.qtaconsumption }}</span>
                            <span class="list_item_right_span">流量使用时间：{{ trafficVal.time }}</span>
                            <span>国家：中国</span>
                        </p>
                    </template>

                </div>
            </li>
        </ul>
    </div>
</template>
<script setup>
import lotCard from '@/i18n/zh/lotCard';

const props = defineProps({
    data: Array
});




</script>

<style scoped lang="less">
ul,
li,
p,
span {
    margin: 0;
    padding: 0;
    line-height: 1.5;
}


.order_list_box {
    list-style: none;
    max-height: 700px;
    overflow-y: scroll;
    margin: auto;
    padding: 0 20px;
}

.list_box_item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;

    .list_item_left {
        width: 60px;
        height: 60px;
        // background: gainsboro;
        margin-right: 10px;
    }

    .list_item_right {
        p {
            display: flex;
            align-items: center;
            margin: 5px 0;
        }

        span {
            display: flex;
            align-items: center;

        }

        .list_item_right_span::after {
            content: "";
            display: inline-block;
            width: 1px;
            height: 20px;
            background-color: gray;
            margin: 0 10px;
        }
    }
}
</style>