<template>
    <view class="card">
        <view v-if="$slots.header" class="header">
            <slot name="header"></slot>
        </view>
        <view class="default">
            <slot></slot>
        </view>
        <view v-if="$slots.footer" class="footer">
            <slot name="footer"></slot>
        </view>
    </view>
</template>
<style lang="scss" scoped>
@import "/static/css/variables.scss";
.card {
    margin: 0 25rpx 25rpx;
    font-size: 24rpx;
    overflow: hidden;
    border-radius: 15rpx;
    box-shadow: 0 0 6px 1px #cacaca;
    color: #656565;
    .header {
        padding: 20rpx;
        background-color: $blue;
        border-radius: 15rpx 15rpx 0 0;
        color: #fff;
    }
    .default {
        padding: 25rpx 20rpx;
        font-size: 26rpx;
    }
    .footer {
        padding: 20rpx;
        border-radius: 0 0 15rpx 15rpx;
        padding: 0 20rpx 30rpx;
    }
}
</style>