<template>
    <div class="form-item" :class="{ full }">
        <div class="form-title">{{ title }}</div>
        <div class="form-content">
            <slot name="default"></slot>
        </div>
    </div>
</template>

<script setup>
import { defineProps } from "vue";
const { title, full } = defineProps({
    title: {
        type: String,
        default: "默认标题"
    },
    full: {
        type: Boolean,
        default: false
    }
});
</script>

<style lang="scss" scoped>
.form-item {
    margin-bottom: 32rpx;
    .form-title {
        font-size: 32rpx;
        font-weight: 600;
        line-height: 36rpx;
        color: #1b2026;
    }
    .form-content {
        padding: 16rpx 0;
        margin-top: 16rpx;
        border-bottom: 2rpx solid rgb(31 35 41 / 15%);
    }
}
.full {
    grid-column: 1/3;
}
</style>
