#set( $symbol_pound = '#' )
#set( $symbol_dollar = '$' )
#set( $symbol_escape = '\' )
<style>
    /** 必须先给固定高度，否则无法计算分割的高度 */
    ${symbol_pound}splitApp .split-group {
        height: 200px;
    }

    ${symbol_pound}splitApp .split-group-vertical {
        height: 458px;
    }

    /** //end */

    ${symbol_pound}splitApp .layui-card-body {
        padding: 0;
    }

    ${symbol_pound}splitApp .split-item {
        padding: 15px;
    }

    ${symbol_pound}demoSplit8 {
        padding: 0 !important;
    }

    ${symbol_pound}splitApp .layui-card-header {
        border-color: ${symbol_pound}dcdee2;
    }
</style>

<!-- 正文开始 -->
<div class="layui-fluid" id="splitApp">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md7">
            <div class="layui-card">
                <div class="layui-card-header">水平分割</div>
                <div class="layui-card-body">
                    <div class="split-group">
                        <div class="split-item" id="demoSplit1">
                            面板一
                        </div>
                        <div class="split-item" id="demoSplit2">
                            面板二
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-card">
                <div class="layui-card-header">水平分割</div>
                <div class="layui-card-body">
                    <div class="split-group">
                        <div class="split-item" id="demoSplit5">
                            面板一
                        </div>
                        <div class="split-item" id="demoSplit6">
                            面板二
                        </div>
                        <div class="split-item" id="demoSplit7">
                            面板三
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md5">
            <div class="layui-card">
                <div class="layui-card-header">垂直分割</div>
                <div class="layui-card-body">
                    <div class="split-group-vertical">
                        <div class="split-item" id="demoSplit3">
                            面板一
                        </div>
                        <div class="split-item" id="demoSplit4">
                            面板二
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">垂直水平分割</div>
                <div class="layui-card-body">
                    <div class="split-group" style="height: 600px;">
                        <div class="split-item" id="demoSplit8">
                            <div class="split-group-vertical">
                                <div class="split-item" id="demoSplit10">
                                    面板一
                                </div>
                                <div class="split-item" id="demoSplit11">
                                    面板二
                                </div>
                            </div>
                        </div>
                        <div class="split-item" id="demoSplit9">
                            面板三
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>

</div>

<!-- js部分 -->
<script>
    layui.use(['layer', 'Split'], function () {
        var ${symbol_dollar} = layui.jquery;
        var layer = layui.layer;
        var Split = layui.Split;

        // 水平分割
        Split(['${symbol_pound}demoSplit1', '${symbol_pound}demoSplit2'], {sizes: [25, 75], minSize: 100});
        // 水平分割
        Split(['${symbol_pound}demoSplit5', '${symbol_pound}demoSplit6', '${symbol_pound}demoSplit7'], {sizes: [25, 25, 50], minSize: 100});

        // 垂直分割
        Split(['${symbol_pound}demoSplit3', '${symbol_pound}demoSplit4'], {direction: 'vertical'});

        // 垂直水平分割
        Split(['${symbol_pound}demoSplit8', '${symbol_pound}demoSplit9'], {sizes: [25, 75], minSize: 100});
        Split(['${symbol_pound}demoSplit10', '${symbol_pound}demoSplit11'], {direction: 'vertical'});

    });
</script>