dz-app/pages/topic-center/paper-objective/components/completed-progress.vue

<template>
    <view class="fx-col gap-20">
        <view class="flex fx-bet-cen">
            <view class="text-2xs text-main">刷题进度</view>
            <view class="text-2xs">
                <text class="text-success">{{ completed || '-' }}</text>
                <text class="text-content mx-5">/</text>
                <text class="text-tips">{{ total || '-' }}</text>
            </view>
        </view>
        <mx-progress :progress="progress" class="h-20 mt-10"/>
        <view class="mt-40 flex gap-30">
            <view class="card flex-1 fx-col fx-cen-cen rounded">
                <view class="value font-bold">{{ total || '-' }}</view>
                <view class="label text-2xs">总题量</view>
            </view>
            <view class="card flex-1 fx-col fx-cen-cen rounded">
                <view class="value font-bold">{{ completed || '-' }}</view>
                <view class="label text-2xs">已刷题</view>
            </view>
            <view class="card flex-1 fx-col fx-cen-cen rounded">
                <view class="value font-bold">{{ accuracy || '-' }}%</view>
                <view class="label text-2xs">正确率</view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    name: "completed-progress",
    props: {
        completed: {
            type: Number,
            default: 0
        },
        total: {
            type: Number,
            default: 0
        },
        accuracy: {
            type: Number,
            default: null
        }
    },
    computed: {
        progress() {
            if (!this.total) return 0
            return this.completed / this.total
        }
    }
}
</script>

<style lang="scss" scoped>
.card {
    padding: 17px 0;
    background-color: #FBFCFF;

    .label {
        color: #a9a9a9;
        position: relative;

        &::before {
            content: "";
            position: absolute;
            width: 5px;
            height: 5px;
            left: -10px;
            top: 44%;
        }
    }
}

.card:nth-child(1) .label {
    &::before {
        background-color: #FBB62D;
    }
}

.card:nth-child(2) .label {
    &::before {
        background-color: #0FD296;
    }
}

.card:nth-child(3) .label {
    &::before {
        background-color: #FF5E48;
    }
}
</style>