<template>
  <div class="header">
    <router-link :to="{path: '/monitor/home'}">
      <span class="title">机器人监控</span>
    </router-link>
    <div class="contain">
      <span class="username">{{username}}</span>
      <span class="loginout" @click="exitLogin">退出</span>
    </div>
  </div>
</template>

<script>
  import Bus from '../assets/js/bus'
  export default {
    data(){
      return{
        username: localStorage.getItem("username"),
      }
    },
    methods: {
      //退出登录
      exitLogin(){
        this.$router.push({
          path: '/'
        });
        sessionStorage.removeItem("isLogin");
        this.$notify({
          title: '提示',
          message: "退出成功",
          type: 'success',
          duration:'2000',
        });
      }
    }
  }
</script>

<style scoped>
  .header{
    position: fixed;
    top: 0;
    width: 100%;
    height: 60px;
    line-height: 60px;
    padding: 0 20px;
    margin-bottom: 20px;
    background:linear-gradient(-90deg,rgba(63,96,124,1),rgba(57,76,99,1));
    box-shadow:0px 2px 10px 6px rgba(237,237,237,0.5);
    color:rgba(255,255,255,1);
    .title{
      color: #fff;
      font-size:24px;
    }
    .contain{
      float: right;
      font-size: 16px;
      .username{
        margin-right: 20px;
      }
      .loginout{
        cursor: pointer;
      }
    }
  }
</style>
