<template>
  <div class="home">
      <div class="header">
        <div class="header-title">应急管理一张图</div>
        <div class="system-operate">
          <div class="system-opreate-btn" :style="{'border-bottom':$route.path=='/index' ? '2px solid #428EDA':'2px solid rgba(0,0,0,0)'}" @click="$router.push({'path':'/index'})">监测中心</div>
          <div class="system-opreate-btn" :style="{'border-bottom':$route.path=='/map' ? '2px solid #428EDA':'2px solid rgba(0,0,0,0)'}" @click="$router.push({'path':'/map'})">数据中心</div>
          <div class="system-opreate-btn" :style="{'border-bottom':$route.path.match('/data') ? '2px solid #428EDA':'2px solid rgba(0,0,0,0)'}" @click="$router.push({'path':'/data'})">数据管理</div>
          <div class="system-opreate-btn" @click="logout">退出登录</div>
          <div class="system-opreate-user">
            
          </div>
        </div>
      </div>
      <router-view/>
  </div>
</template>

<script>


export default {
  name: 'Home',
  components:{

  },
  data(){
    return {

    }
  },
  created(){
    console.log(this.$route);
  },
  methods:{
    logout(){
      localStorage.setItem("X-Token","");
      this.$router.push({'path':'/login'});
    }
  }
}
</script>
<style scoped>
.home{
  width:100%;
  height:100vh;
  background-image: url(/images/system/home-bg.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  overflow: hidden;
}
.home .header{
  width:100%;
  position: relative;
  z-index:10;
  
}
.home .header .header-title{
  width:500px;
  margin:0px auto;
  height:60px;
  line-height: 60px;
  color:#2fa6f2;
  text-align:center;
  font-size:38px;
  font-family: "微软雅黑";
  font-weight: 1000;
  letter-spacing: 5px;
}
.home .header .system-operate{
  width:400px;
  float:right;
  height:40px;
  position: absolute;
  top:50px;
  right:80px;
}
.home .header .system-operate .system-opreate-btn{
  width:85px;
  text-align: center;
  float:left;
  color:#428EDA;
  margin-right:8px;
  line-height: 40px;
  font-size:16px;
  font-weight: bold;
  cursor:pointer;
}
.system-opreate-user{
  width:24px;
  height:24px;
  float:left;
  background-image: url(/images/system/user.png);
  margin-top:8px;
}

</style>
