<template>
  <el-row :gutter="24" class="index-admin">
    <el-col :xs="24" :sm="24" :lg="16" class="index-admin-left">
      <div class="grid-content bg-purple">
        <tubiao></tubiao>
      </div>
    </el-col>
    <el-col :xs="24" :sm="24" :lg="8" class="index-admin-right">
      <div class="grid-content bg-purple-light">
        <anniu></anniu>
      </div>
    </el-col>


    <div style="clear: both;"></div>

    <el-col :xs="24" :sm="24" :lg="8">
      <div class="bg-purple">
        <daiyu></daiyu>
      </div>
    </el-col>
    <el-col :xs="24" :sm="24" :lg="8">
      <div class="grid-content bg-purple">
        <dashboarde></dashboarde>
      </div>
    </el-col>
    <el-col :xs="24" :sm="24" :lg="8">
      <div class="grid-content bg-purple">
        <jfnr></jfnr>
      </div>
    </el-col>
  </el-row>
</template>


<script>
  import tubiao from './components/tubiao'
  import anniu from './components/anniu'
  import daiyu from './components/daiyu'
  import jclb from './components/jclb'
  import dashboarde from './components/dashboarde'
  import jfnr from './components/jfnr'
  export default {
    components: {tubiao,anniu,daiyu,jclb,dashboarde,jfnr},
    data() {
      return {
        activeName2: 'first'
      };
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      }
    }
  };
</script>


<style>

  @media screen and (max-width: 1366px) {
    .index-admin-right{
      width:100%;
    }.index-admin-left{
       width:100%;
     }
    .index-admin-right .el-col-lg-8{
      width:16.66667%;
    }
  }
  @media screen and (max-width: 960px) {
    .card-panel-right{
      width:100%;
    }.card-panel-left{
       width:100%;
     }
  }
  .index-admin .el-tabs{background-color: #fff;}
  .el-tabs__item{

    height: 50px;
    line-height: 50px;

  }
  .el-tabs__item{font-size: 16px;}
  .el-row{
    padding:0;
  &:last-child {
     margin-bottom: 0;
   }
  }
  .el-col{ margin-bottom:10px;}
</style>

