<template>
  <div class="datamanagement-container">
    <div class="home-bg-container"></div>
   <div class="left-menu">
     <div class="btn" :style="{color:$route.path=='/data/basedata'? '#37c9fa':'','border-right':$route.path=='/data/basedata'?'2px solid #37c9fa':'0px'}" @click="$router.push({'path':'/data/basedata'})">
      <i class="el-icon-s-order"></i> 基础数据
     </div>
     <div class="btn">
      <i class="el-icon-s-order"></i> 区域分布
     </div>
     <div class="btn">
      <i class="el-icon-s-order"></i> 历史灾害
     </div>
          <div class="btn">
      <i class="el-icon-s-order"></i> 应急通知
     </div>
     <div class="btn" :style="{color:$route.path=='/data/layertype'? '#37c9fa':'','border-right':$route.path=='/data/layertype'?'2px solid #37c9fa':'0px'}" @click="$router.push({'path':'/data/layertype'})">
       <i class="el-icon-menu"></i> 模块管理
     </div>
      <div class="btn" :style="{color:$route.path=='/data/layer'? '#37c9fa':'','border-right':$route.path=='/data/layer'?'2px solid #37c9fa':'0px'}" @click="$router.push({'path':'/data/layer'})">
      <i class="el-icon-s-marketing" ></i> 图层管理
     </div>
    <div class="btn">
      <i class="el-icon-s-order"></i> 字典管理
     </div>
   </div>
   <div class="right-container">
      <router-view/>
   </div>
  </div>
</template>
<script>

export default {
  name:"",
  components:{

  },
  data(){
    return {
     
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    }
  },
  watch:{
    '$route':function(e){
      console.log(e);
    }
  }
}
</script>
<style scoped>
.home-bg-container{
  width:100vw;
  height:100vh;
  background-image: url(/images/system/home-bg-1.png);
  background-size:100% 100%;
  position:absolute;
  top:0px;
  left:0px;
  pointer-events: none;
  z-index:2;
}
.datamanagement-container{
  width: calc( 100% - 100px);
  height: calc( 100% - 200px);
  background:#2b324f;
  position:absolute;
  top:0px;
  left:0px;
  padding:80px 50px;
  padding-top:120px;

}
.datamanagement-container .left-menu{
  width:200px;
  height: calc( 100% - 0px);
  background:#1d253d;
  float:left;
}
.datamanagement-container .left-menu .btn{
  width:198px;
  height:20px;
  margin:24px 0px;
  line-height:20px;
  border-right:2px solid #1d253d;
  text-align:left;
  text-indent: 20px;
  color:#cfcfcf;
  cursor:pointer;
}
.datamanagement-container .right-container{
  width: calc( 100% - 220px);
  height: calc( 100% - 0px);
  float:right;
  /* background:#1d253d; */
}


</style>