<template>
    <div class="card-container">
        <div class="monitoringCard">
            <!-- <img src="@/assets/picture/box1.png" alt="Description of the image" style="max-width: 100%; height: auto;"> -->
            <span class="textStyle">数据统计</span>
            <div class="data-card-wrapper">
                <dataCard></dataCard>
            </div>
        </div>
        <div class="taskCard">
            <span class="textStyle">任务统计</span>
            <div class="data-card-wrapper">
                <taskCard></taskCard>
            </div>
        </div>
        <div class="qbCard">
            <span class="textStyle">QB数据管理</span>
            <div class="data-card-wrapper">
                <qbCard></qbCard>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import dataCard from './dataCard.vue'
import taskCard from '@/views/os-status/components/taskCard.vue';
import qbCard from '@/views/os-status/components/qbDataMonitor.vue';

defineProps({
    title: {
        type: String,
        default: ''
    },
    desc: {
        type: String,
        default: ''
    }
})
</script>

<style lang="scss" scoped>
.card-container {
    
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px;
    gap: 30px;
}

.monitoringCard {
    background-image: url("@/assets/picture/box1.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    // background: #ffffff;
    // border: 1.7px solid rgb(193, 188, 188);
    height: 22.5vh;
    width: 96%;
    display: flex;
    gap: 21.5px;
    padding: 10px; 
}
.taskCard {
    background-image: url("@/assets/picture/box1.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    // background: #ffffff;
    // border: 1.7px solid rgb(193, 188, 188);
    height: 26.5vh;
    width: 96%;
    display: flex;
    gap: 21.5px;
    padding: 10px; 
}
.qbCard {
    background-image: url("@/assets/picture/box1.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    // background: #ffffff;
    // border: 1.7px solid rgb(193, 188, 188);
    height: 22vh;
    width: 96%;
    display: flex;
    padding: 10px; 
}

.textStyle {
    writing-mode: vertical-lr;
    font-size: 26px;
    letter-spacing: 3px;
    margin-left: 2%;
    color: #FFFFFF;
}

.data-card-wrapper {
    flex: 1; 
    display: flex;
    justify-content: center; /* 水平居中 */
    // gap: 20px;

}
</style>
    