iview/test/routers/more.vue

<style>
    .ivu-col div.aaaaa{
        height: 100px;
        line-height: 100px;
        text-align: center;
        color: #fff;
        background: rgba(0, 153, 229, .9);
    }
    .ivu-col:nth-child(odd) div.aaaaa{
        background: rgba(0, 153, 229, .7);
    }
</style>
<template>
    <Row>
        <i-col :xs="2" :sm="4" :md="6" :lg="8"><div class="aaaaa">Col 1</div></i-col>
        <i-col :xs="20" :sm="16" :md="12" :lg="8"><div class="aaaaa">Col 2</div></i-col>
        <i-col :xs="2" :sm="4" :md="6" :lg="8"><div class="aaaaa">Col 3</div></i-col>
    </Row>
    <br><br>
    <Row>
        <i-col :xs="{ span: 5, offset: 1 }" :lg="{ span: 6, offset: 2 }"><div class="aaaaa">Col 1</div></i-col>
        <i-col :xs="{ span: 11, offset: 1 }" :lg="{ span: 6, offset: 2 }"><div class="aaaaa">Col 2</div></i-col>
        <i-col :xs="{ span: 5, offset: 1 }" :lg="{ span: 6, offset: 2 }"><div class="aaaaa">Col 3</div></i-col>
    </Row>
    <i-button @click="start">Start</i-button>
    <i-button @click="finish">Finish</i-button>
    <i-button @click="error">Error</i-button>
</template>
<script>
    export default {
        methods: {
            start () {
                this.$Loading.start();
            },
            finish () {
                this.$Loading.finish();
            },
            error () {
                this.$Loading.error();
            }
        }
    }
</script>