<template>
  <div class="head-contener">
      <div class="logo-table">
        <div class="logo-box">
          <img src="../assets/stor/logo.png">
        </div>
        <div class="logo-line"></div>
        <div class="logo-text">
          <div class="logo-title">BMC管理系统</div>
          <div class="logo-subtitle">版本 1.0.0.0</div>
          <!--<div class="logo-subtitle">running on 192.168.0.122(Linux)</div>-->
        </div>
        <div v-if="isShowMenu" class="userDetails">
            <img src="../assets/user.png" border="0" title="Name and privileges of currently logged user">
            <span id="username">admin</span><small id="priv"> (Administrator)</small>
            <a href="javascript://" id="refreshBtn" title="Reloads the current page"><img src="../assets/refresh.png" border="0"> 刷新</a>
            <a href="javascript://" id="printBtn" title="Prints the current page"><img src="../assets/print_1.png" border="0"> 打印</a>
            <a href="javascript://" id="logoutBtn" title="Logout"><img src="../assets/logout_1.png" border="0"> 登出</a>
        </div>
      </div>
  </div>
</template>

<script>
export default {
  name: 'headers',
  props: {
    isShowMenu: {
      type:Boolean,
      default: true
    }
  },
  created(){
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
  .head-contener{
    width: 1180px;
    height: 125px;
    margin:0 auto;
  }
  .logo-box{
    float: left;
    width: 184px;
    height: 23px;
  }
  .logo-line {
    float: left;
    height: 54px;
    width: 1px;
    background: #77ADFF;
    margin-left: 12px;
  }
  .logo-text {
    float: left;
    margin-left: 12px;
    font-size: 14px;
  }
  .logo-title {
    font-size: 28px;
    color: rgb(255, 255, 255);
    font-weight: 700;
    line-height: 41px;

  }
  .logo-subtitle {
    color: #77ADFF;
    font-size: 12px;
}
.logo-table {
    position: relative;
    padding-top: 37px;
}
.userDetails {
    font-size: 12px;
    color: #fff;
    height: 48px;
    line-height: 48px;
    padding-left: 20px;
    padding-right: 20px;
    background: rgba(24, 116, 255, .1);
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}
.userDetails {
    position: absolute;
    right: 0;
    top: 0;
    color: #77ADFF;
}

.userDetails img {
    width:12px;
    position: relative;
    /*top: 1px;*/
    margin-right: 3px;
     margin-left: 3px;
    height: 12px;
}

.userDetails a {
    padding-left: 15px;
    text-decoration: none;
    color: #77ADFF;
}
</style>
