 <template>
    <div class="zr-form-group" :class="inputWidth === 'long'? 'long': 'normal'">
        <div class="zr-form-title" v-if="showTitle">
            <div class="zr-form-title-icon"></div>
            <div class="zr-form-title-h1">{{ title }}</div>
        </div>
        <slot></slot>
    </div>
 </template>
 
 <script>
export default {
    props: {
        title: {
            type: String,
            default: ''
        },
        showTitle: {
            type: Boolean,
            default: true
        },
        inputWidth: {
            type: String,
            default: 'normal'
        }
    },
    data () {
        return {

        }
    },
    methods: {},
};
</script>
 
 <style lang="less" scoped>
    .zr-form-group {
        .zr-form-title {
            display: flex;
            height: 42px;
            align-items: center;
            background-color: #e9eefc; 
            margin-bottom: 24px;
            .zr-form-title-icon {
                display: inline-block;
                width: 4px;
                height: 16px;
                background-color: #2b54e4;
                border-radius: 2px;
                margin-left: 20px;
            }
            .zr-form-title-h1 {
                font-size: 16px;
                margin-left: 8px;
            }
        }
        /deep/ .item-block {
            margin-bottom: 10px;
        }
        /deep/ .item-block:last-child {
            margin-bottom: 0;
        }
    }
    
    
    

    .normal {
        /deep/ .el-form-item__content > .el-input, /deep/ .el-form-item__content > .el-textarea {
            width: 300px;
        }
        /deep/ .el-form-item__content > .el-input-number {
            width: 200px !important;
        }
    }
    .long {
        /deep/ .el-form-item__content > .el-input, /deep/ .el-form-item__content > .el-textarea {
            width: 500px;
        }
        /deep/ .el-form-item__content > .el-input-number {
            width: 300px !important;
        }
    } 

    /deep/ .el-form-item__content {
        font-size: 14px;
        color: #606266;
    }
    

    /deep/ .el-form-item__content > .el-input-number,/deep/ .el-form-item__content > .el-input {
        margin-right: 10px;
    }

    /deep/ .el-form-item__content > .el-textarea {
        font-size: 14px;
        font-family: '微软雅黑';
    }
    /deep/ .el-form-item__label {
        color: #333;
    }
    /deep/ .el-checkbox__inner {
        width: 18px;
        height: 18px;
    }
    /deep/ .el-checkbox__inner:after {
        left: 6px;
        top: 3px;
    }
    /deep/ .el-textarea__inner {
        font-family: 'Microsoft YaHei';
    }
</style>