基础布局

效果

Jui-UI基础布局划分12份，jul-row内套jul-col使用 :col:"要设置的份数"

代码预览

<template>
    <div>
        <jul-row>
          <jul-col :col="12"><div class="layout-wrap layout-set"></div></jul-col>
        </jul-row>
        <jul-row>
          <jul-col :col="6"><div class="layout-light layout-set"></div></jul-col>
          <jul-col :col="6"><div class="layout-base layout-set"></div></jul-col>
        </jul-row>
        <jul-row>
          <jul-col :col="4"><div class="layout-light layout-set"></div></jul-col>
          <jul-col :col="4"><div class="layout-base layout-set"></div></jul-col>
          <jul-col :col="4"><div class="layout-light layout-set"></div></jul-col>
        </jul-row>
        <jul-row>
          <jul-col :col="3"><div class="layout-light layout-set"></div></jul-col>
          <jul-col :col="3"><div class="layout-base layout-set"></div></jul-col>
          <jul-col :col="3"><div class="layout-light layout-set"></div></jul-col>
          <jul-col :col="3"><div class="layout-base layout-set"></div></jul-col>
        </jul-row>
        <jul-row>
          <jul-col :col="2"><div class="layout-light layout-set"></div></jul-col>
          <jul-col :col="2"><div class="layout-base layout-set"></div></jul-col>
          <jul-col :col="2"><div class="layout-light layout-set"></div></jul-col>
          <jul-col :col="2"><div class="layout-base layout-set"></div></jul-col>
          <jul-col :col="2"><div class="layout-light layout-set"></div></jul-col>
          <jul-col :col="2"><div class="layout-base layout-set"></div></jul-col>
        </jul-row>
    </div>
</template>

<script>
export default {
}
</script>

<style lang="scss">
    .layout-set {
        margin-top: 10px;
        min-height: 30px;
        border-radius: 5px;
    }
    .layout-wrap {
        background-color: #4875a0;
    }
    .layout-light {
        background-color: #5791c7;
    }
    .layout-base {
        background-color: #83b1db;
    }
</style>