<template>
  <div class="content-wrap">
    <el-row>

      <!-- <BreadCrumb></BreadCrumb> -->

      <!-- <div class="project-title iconfont iconchubeiliangguanli"> <i class="iconfont icon-shouye indexCss">&#xe684;</i>储备粮管理</div> -->
    </el-row>
    <el-row>
      <el-col id="sider" :span='4'>
        <MenuList></MenuList>
      </el-col> 
      <el-col id="main" :span="20">
        <BreadCrumb></BreadCrumb>
          <transition name="el-zoom-in-center">
        <section style="height: calc(100vh - 218px); overflow: auto">
          <div class="contentHeight">
              <router-view></router-view>
          </div>
         </section>
      </transition>
      </el-col>
      
    </el-row>
  </div>  
</template>

<script>
  import MenuList from "@/components/Layout/menuList/menuList"
  import BreadCrumb from "@/components/breadcrumb"
  // import Applications from "@/components/common/applications"
  export default {
    name: "layout",
    components: {
      MenuList,
      BreadCrumb,
      // Applications
    },
    data() {
      return {
        id: this.$route.params.id,
        dat: {
          name: 'admin',
          password: 'admin'
        }
      }
    },
  }
</script>

<style scoped>
  .iconfont {
    padding-right: 3px;
  }

  .content-wrap {
    /*width: 1200px;*/
    /*margin: 0 auto;*/
    height: calc( 100vh - 173px);
    overflow: auto;
  }

  .project-title {
    color: #fff;
    background: #2258a5;
    line-height: 40px;
    height: 40px;
    padding-left: 6px;
    font-size: 14px;
  }

  .indexCss {
    margin-right: 5px;
  }
  .contentHeight{
    /*height: calc( 100vh - 260px);*/
    overflow-x:hidden ;
  }
</style>