<!--
 * @Author: PoJun
 * @Date: 2023-09-15 15:30:09
 * @LastEditors: PoJun
 * @LastEditTime: 2023-09-28 11:45:11
 * @Message: Nothing
-->
<template>
    <view class="boxContent">
        <view class="boxContent-title">
            <view class="boxContent-title-line"></view>
            <view class="boxContent-title-text">{{ title }}</view>
        </view>
        <view class="boxContent-cont">
            <slot></slot>
        </view>
    </view>
</template>

<script>
export default {
    name: "BoxWithTitle",
    props: {
        title: {
            type: String,
            default: " ",
        },
    },
    data() {
        return {};
    },
};
</script>

<style lang="scss" scoped>
.boxContent {
    padding: 36rpx 0;
    border-radius: 12rpx;
    margin-bottom: 30rpx;
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
    background: #fff;
    overflow: hidden;
    &-title {
        margin-bottom: 30rpx;
        padding: 0 26rpx;
        font-size: 28rpx;
        color: $uv-info;
        display: flex;
        flex-direction: row;
        align-items: center;
        &-line {
            width: 8rpx;
            height: 32rpx;
            background: $uv-wow-main-color;
            border-radius: 10rpx 0rpx 0rpx 10rpx;
            margin-right: 10rpx;
            flex-shrink: 0;
        }
        &-text {
            display: flex;
            flex-wrap: wrap;
            flex-direction: row;
            width: 100%;
        }
    }
    &-cont {
        padding: 0 25rpx;
        font-size: 26rpx;
    }
    &-text {
        font-size: 26rpx;
        color: $uv-wow-sub-color;
        margin-top: 14rpx;
    }
}
</style>
