cardWarp.vue

<template lang='pug'>
.card-warp
    .card-header(:style="{height,'line-height':height}" :class=" showBackground ? 'bg' : '' ")
        span.card-title {{ title }}
            div(style='margin-left:20px;')
                slot(name="left" )
        slot(name="right")
    .card-content
        slot(name="content")
</template>

<script>
export default {
    name: 'card-warp',
    props: {
        title: {
            type: String,
            default: '数据统计'
        },
        height: {
            type: String,
            default: '74px'
        },
        showBackground: {
            type: Boolean,
            default: true
        }
    }
}
</script>
<style lang="scss" scoped>
.card-warp {
    width: 100%;
    height: 100%;
    .card-header {
        display: flex;
        justify-content: space-between;
        // height: 74px;
        // line-height: 74px;
        padding: 0 20px;
        border-bottom: 1px solid #ececec;
        .card-title {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 16px;
            font-weight: 600;
            &::before {
                content: "";
                display: inline-block;
                padding-right: 5px;
                margin-right: 10px;
                height: 16px;

                background: #21acfc;
            }
        }
    }
    .card-content {
        margin: 20px;
        height: calc(100% - 100px);
    }
}
.bg{
    background: #F2FAFF;
}
</style>