<template>
    <view class="card-details-item" :class="{ borderBottom }">
        <view class="title" v-if="title">{{ title }}</view>
        <view class="label" v-if="label">{{ label }}</view>
        <view class="content">{{ content }}</view>
        <slot></slot>
    </view>
</template>

<script setup>
const ps = defineProps({
    borderBottom: {
        type: Boolean,
        default: true
    },
    title: {
        type: String,
        default: ''
    },
    label: {
        type: String,
        default: ''
    },
    content: {
        type: String,
        default: ''
    }
})
</script>
<style lang="scss" scoped>
.card-details-item {
    padding-top: 16rpx;
    &.borderBottom {
        padding-bottom: 16rpx;
        border-bottom: 2rpx solid #f4f4f4;
    }
    .title {
        font-size: 34rpx;
        color: $mocp-text-5;
        font-weight: 500;
        margin-bottom: 16rpx;
    }
    .label {
        font-size: 34rpx;
        color: $mocp-text-5;
        margin-bottom: 16rpx;
    }
    .content {
        font-size: 30rpx;
        color: $mocp-text-4;
        line-height: 40rpx;
    }
}
</style>
