element 的layout布局的使用

        <el-row :gutter="20" class="m-rightrow" >
            <el-col
                :span="6"
                :xl="6"
                :lg="6"
                :md="6"
                :sm="12"
                :xs="24"
                v-for="item in serviceList"
                :key="item.id"
                class="m-rightcol"
            >
                <div class="grid-content" @click="showDetail(item)">
                    <el-card 
                        class="box-card bg-purple" 
                        :body-style="{ padding: '20px' }">
                        <!-- head 头部 服务名称 -->
                        <div slot="header">
                            {{item.name}}
                        </div>
                        <!-- body 生产者消费者数量 -->
                        <el-row class="g-text"  title="生产者" >
                            <el-col :span='12'>
                                <div class="g-icon">
                                    <i class="iconfont icon-producer"></i>
                                    <div class="g-icon-text">生产</div>
                                </div>
                                <div class="g-num">
                                    {{item.serviceNum}}
                                </div>  
                            </el-col>
                            <el-col :span='12' title="消费者">
                                <div class="g-icon">
                                    <i class="iconfont icon-consumer" ></i>
                                    <div class="g-icon-text">消费</div>
                                </div>
                                <div class="g-num">
                                    {{item.webNum}}
                                </div>  
                            </el-col>
                        </el-row>
                    </el-card>
                </div>
            </el-col>
        </el-row>