<template>
    <div class="w-full h-full">
        <div class="grid grid-cols-3 h-full">
            <div id="el-table" class="col-span-2 h-full" style="border: 1px solid red;"></div>
            <div id="el-config" class="p-3 align-middle">
                <div>
                    <el-button type="button" onclick="run()" size="medium">运行</el-button>
                    <el-button type="button" size="medium">导出</el-button>
                </div>
                <el-form ref="form">
                    <div class="grid grid-cols-2 form-row">
                        <label>标题</label>
                        <el-input id="input-title" value="汽车产量动态排名" size="medium"></el-input>
                    </div>
                    <div class="grid grid-cols-2 form-row">
                        <label>显示排名上限</label>
                        <el-input id="input-max" type="number" value="10" size="medium"></el-input>
                    </div>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import {defineComponent} from 'vue'
export default defineComponent({
    name: 'BTable',
    props: {
    },
    setup: () => {
    }
})
</script>

<style scoped>
@layer utilities {
    .form-row {
        @apply my-3;

        label {
            @apply py-1;
        }
    }
}
</style>