<template>
    <div class="content">
        <e-row :gutter="24">
            <e-col :span="24" class="box-card">
                <e-card shadow="always" :body-style="bodyStyle">
                    <div slot="header" class="clearfix">
                        <span>基础布局</span>
                    </div>
                    <div>
                        <e-row>
                            <e-col :span="24">
                                <div class="grid-content bg-purple-dark"></div>
                            </e-col>
                        </e-row>
                        <e-row>
                            <e-col :span="12">
                                <div class="grid-content bg-purple"></div>
                            </e-col>
                            <e-col :span="12">
                                <div class="grid-content bg-purple-light"></div>
                            </e-col>
                        </e-row>
                        <e-row>
                            <e-col :span="8">
                                <div class="grid-content bg-purple"></div>
                            </e-col>
                            <e-col :span="8">
                                <div class="grid-content bg-purple-light"></div>
                            </e-col>
                            <e-col :span="8">
                                <div class="grid-content bg-purple"></div>
                            </e-col>
                        </e-row>
                        <e-row>
                            <e-col :span="6">
                                <div class="grid-content bg-purple"></div>
                            </e-col>
                            <e-col :span="6">
                                <div class="grid-content bg-purple-light"></div>
                            </e-col>
                            <e-col :span="6">
                                <div class="grid-content bg-purple"></div>
                            </e-col>
                            <e-col :span="6">
                                <div class="grid-content bg-purple-light"></div>
                            </e-col>
                        </e-row>
                        <e-row>
                            <e-col :span="4">
                                <div class="grid-content bg-purple"></div>
                            </e-col>
                            <e-col :span="4">
                                <div class="grid-content bg-purple-light"></div>
                            </e-col>
                            <e-col :span="4">
                                <div class="grid-content bg-purple"></div>
                            </e-col>
                            <e-col :span="4">
                                <div class="grid-content bg-purple-light"></div>
                            </e-col>
                            <e-col :span="4">
                                <div class="grid-content bg-purple"></div>
                            </e-col>
                            <e-col :span="4">
                                <div class="grid-content bg-purple-light"></div>
                            </e-col>
                        </e-row>
                    </div>
                </e-card>
            </e-col>
            <e-col :span="24" class="box-card">
                <e-card shadow="always">
                    <div slot="header" class="clearfix">
                        <span>分栏间隔</span>
                    </div>
                    <e-row :gutter="20">
                            <e-col :span="6"><div class="grid-content bg-purple"></div></e-col>
                            <e-col :span="6"><div class="grid-content bg-purple"></div></e-col>
                            <e-col :span="6"><div class="grid-content bg-purple"></div></e-col>
                            <e-col :span="6"><div class="grid-content bg-purple"></div></e-col>
                    </e-row>
                </e-card>
            </e-col>
            <e-col :span="24" class="box-card">
                <e-card shadow="always">
                    <div slot="header" class="clearfix">
                        <span>混合布局</span>
                    </div>
                    <div>
                        <e-row :gutter="20">
                        <e-col :span="16"><div class="grid-content bg-purple"></div></e-col>
                        <e-col :span="8"><div class="grid-content bg-purple"></div></e-col>
                        </e-row>
                        <e-row :gutter="20">
                        <e-col :span="8"><div class="grid-content bg-purple"></div></e-col>
                        <e-col :span="8"><div class="grid-content bg-purple"></div></e-col>
                        <e-col :span="4"><div class="grid-content bg-purple"></div></e-col>
                        <e-col :span="4"><div class="grid-content bg-purple"></div></e-col>
                        </e-row>
                        <e-row :gutter="20">
                        <e-col :span="4"><div class="grid-content bg-purple"></div></e-col>
                        <e-col :span="16"><div class="grid-content bg-purple"></div></e-col>
                        <e-col :span="4"><div class="grid-content bg-purple"></div></e-col>
                        </e-row>
                    </div>
                </e-card>
            </e-col>
            <e-col :span="24" class="box-card">
                <e-card shadow="always">
                    <div slot="header" class="clearfix">
                        <span>分栏偏移</span>
                    </div>
                    <div>
                        <e-row :gutter="20">
                        <e-col :span="6"><div class="grid-content bg-purple"></div></e-col>
                        <e-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></e-col>
                        </e-row>
                        <e-row :gutter="20">
                        <e-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></e-col>
                        <e-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></e-col>
                        </e-row>
                        <e-row :gutter="20">
                        <e-col :span="12" :offset="6"><div class="grid-content bg-purple"></div></e-col>
                        </e-row>
                    </div>
                </e-card>
            </e-col>
            <e-col :span="24" class="box-card">
                <e-card shadow="always">
                    <div slot="header" class="clearfix">
                        <span>对齐方式</span>
                    </div>
                    <div>
                        <e-row type="flex" class="row-bg">
                        <e-col :span="6"><div class="grid-content bg-purple"></div></e-col>
                        <e-col :span="6"><div class="grid-content bg-purple-light"></div></e-col>
                        <e-col :span="6"><div class="grid-content bg-purple"></div></e-col>
                        </e-row>
                        <e-row type="flex" class="row-bg" justify="center">
                        <e-col :span="6"><div class="grid-content bg-purple"></div></e-col>
                        <e-col :span="6"><div class="grid-content bg-purple-light"></div></e-col>
                        <e-col :span="6"><div class="grid-content bg-purple"></div></e-col>
                        </e-row>
                        <e-row type="flex" class="row-bg" justify="end">
                        <e-col :span="6"><div class="grid-content bg-purple"></div></e-col>
                        <e-col :span="6"><div class="grid-content bg-purple-light"></div></e-col>
                        <e-col :span="6"><div class="grid-content bg-purple"></div></e-col>
                        </e-row>
                        <e-row type="flex" class="row-bg" justify="space-between">
                        <e-col :span="6"><div class="grid-content bg-purple"></div></e-col>
                        <e-col :span="6"><div class="grid-content bg-purple-light"></div></e-col>
                        <e-col :span="6"><div class="grid-content bg-purple"></div></e-col>
                        </e-row>
                        <e-row type="flex" class="row-bg" justify="space-around">
                        <e-col :span="6"><div class="grid-content bg-purple"></div></e-col>
                        <e-col :span="6"><div class="grid-content bg-purple-light"></div></e-col>
                        <e-col :span="6"><div class="grid-content bg-purple"></div></e-col>
                        </e-row>
                    </div>
                </e-card>
            </e-col>
            <e-col :span="24" class="box-card">
                <e-card shadow="always">
                    <div slot="header" class="clearfix">
                        <span>响应式布局</span>
                    </div>
                    <div>
                        <e-row :gutter="10">
                        <e-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></e-col>
                        <e-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light"></div></e-col>
                        <e-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple"></div></e-col>
                        <e-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></e-col>
                        </e-row>
                    </div>
                </e-card>
            </e-col>
        </e-row>
    </div>
</template>
<script>

export default {
    components: {},
    data() {
        return {
            bodyStyle: {
                minHeight: '308px',
                minWidth: '368px'
            },
            circleUrl: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
            squareUrl: 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
            sizeList: ['large', 'medium', 'small'],
            fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
            url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
        }
    },
    mounted() {
    },
    methods: {
        errorHandler() {
            return true
        }
    }
}
</script>
  
<style>
.marginLeft {
    margin-left: 10px
}

.content {
    height: 100%;
    padding: 30px;
    background:#fff;
}

.block {
    display: inline-block;
    margin-left: 10px;
}

.box-card .el-col{
        margin-bottom:10px;
    }
.e-row {
    margin-bottom: 20px;
    /* &:last-child {
      margin-bottom: 0;
    } */
  }
  .e-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  </style>
