<template>
    <div class="card-model-space">
        <div :style="{ backgroundColor: theme }" class="left-icon">
            <svg-icon :icon-class="iconType" class="icon-box" />
        </div>
        <div class="right-text">
            <div>{{ cardNum }}</div>
            <div>{{ cardTitle }}</div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        theme: {
            type: String,
            default: '#ffa94c'
        },
        cardTitle: {
            type: String,
            default: '标题'
        },
        iconType: {
            type: String,
            default: 'project_num'
        },
        // 数量
        cardNum: {
            type: Number,
            default: 0
        }
    }
}
</script>

<style scoped lang="scss">
.card-model-space {
    display: flex;
    border-radius: 8px;
    color: #000;
    height: 85%;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);

    .left-icon {
        width: 30%;
        height: 100%;
        border-top-left-radius: 8px;
        border-bottom-left-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        .icon-box {
            font-size: 28px;
        }
    }

    .right-text {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        padding-left: 6px;

        & div:first-child {
            font-weight: bold;
            font-size: 18px;
        }
        & div:last-child {
            margin-top: 4px;
            font-size: 13px;
            color: #525252;
        }
    }
}
</style>
