<template>
    <div class="flex gap-10">
        <div class="dataCard">
                <!-- <img src="@/assets/picture/box1.png"  style="max-width: 100%; height: auto;"> -->

            <div class="titleStyle">
                <span>DSN爬取任务</span>
            </div>
            <div class="wordStyle">
                <span>任务采集目标数: {{ totalDataNumber }} 条</span>
            </div>
            <div class="wordStyle">
                <span>任务执行成功统计: {{ totalPageNumber }} 页</span>
            </div>
            <div class="wordStyle">
                <span>采集速度: {{ totalTargetNumber }} </span>
            </div>
            <div class="wordStyle">
                <span>错误率: {{ totalTargetNumber }} </span>
            </div>
        </div>
        <div class="dataCard">
            <div class="titleStyle">
                <span>ITU爬取任务</span>
            </div>
            <div class="wordStyle">
                <span>任务采集目标数: {{ totalDataNumber }} 条</span>
            </div>
            <div class="wordStyle">
                <span>任务执行成功统计: {{ totalPageNumber }} 页</span>
            </div>
            <div class="wordStyle">
                <span>采集速度: {{ totalTargetNumber }} </span>
            </div>
            <div class="wordStyle">
                <span>错误率: {{ totalTargetNumber }} </span>
            </div>
        </div>
        <div class="dataCard">
            <div class="titleStyle">
                <span>ST爬取任务</span>
            </div>
            <div class="wordStyle">
                <span>任务采集目标数: {{ totalDataNumber }} 条</span>
            </div>
            <div class="wordStyle">
                <span>任务执行成功统计: {{ totalPageNumber }} 页</span>
            </div>
            <div class="wordStyle">
                <span>采集速度: {{ totalTargetNumber }} </span>
            </div>
            <div class="wordStyle">
                <span>错误率: {{ totalTargetNumber }} </span>
            </div>
        </div>
    </div>
    
</template>

<script lang="ts" setup>
defineProps({
    totalDataNumber: {
        type: String,
        default: ''
    },
    totalPageNumber: {
        type: String,
        default: ''
    },
    totalTargetNumber: {
        type: String,
        default: ''
    },
    successTask: {
        type: String,
        default: ''
    },
    failTask: {
        type: String,
        default: ''
    },
    unusualTask: {
        type: String,
        default: ''
    },
    speed: {
        type: String,
        default: ''
    },
    errorRate: {
        type: String,
        default: ''
    }
})
</script>

<style lang="scss" scoped>
.dataCard {
    background-image: url("@/assets/picture/box2.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    // background: #c6ebfc;
    // border: 1.5px solid rgb(193, 188, 188);
    width: 360px;
    height: 100%;
    border-radius: 5px;
}

.titleStyle {
    font-size: 34px;
    margin-top: 3.5%;
    color: #FFFFFF;
}

.wordStyle {
    font-size: 24px;
    color: #FFFFFF;
}
</style>
