<template>
    <view class="label-field">
        <view class="spacer-20"></view>
        <view class="label-wrap">
            <text class="label-text">{{ label }}</text>
        </view>
        <view class="flex-1">
            <view class="label-field__body">
                <slot />
            </view>
        </view>
        <view class="spacer-20"></view>
    </view>
</template>

<script setup>
const props = defineProps({
    label: { type: String, default: '' }
})
</script>

<style scoped lang="scss">
.label-field {
    width: 100%;
    display: flex;
}

.spacer-20 {
    width: 20rpx;
}

.flex-1 {
    flex: 1;
}

.label-wrap {
    width: 130rpx;
    line-height: 60rpx;
    height: 60rpx;
}

.label-field__label {
    font-size: 26rpx;
    margin-top: 20rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    color: #515151;
    text-align: left;
    font-style: normal;
    text-transform: none;
}

.label-text {
    font-size: 28rpx;
    color: #515151;
    font-weight: 500;
    text-transform: none;
    font-style: normal;
    font-family: PingFang SC, PingFang SC;
}

.label-field__body {
    width: 100%;
}
</style>
