<template>
  <div class="my-head">
    <img class="my-img" src="/static/img/img1.png">
    <div class="vanke">
          <img class="off-img" src="/static/img/1.png">
      </div>
    <div class="box">
      <div class="left">
      <ul>
        <li><router-link to="/home/">首页</router-link></li>
        <li><router-link to="/staff/">设施与人员</router-link></li>
        <li><router-link to="/environment/">环境</router-link></li>
        <li><router-link to="/safety/">设备安全</router-link></li>
        <li><a class="hover-active" :href="`${iSagy}`" target="_blank">能耗</a></li>
        <li><router-link to="/performance/">项目绩效管理</router-link></li>
      </ul>
       <div class="right">
      <ul>
        <li><i class="iconfont icon-search"></i></li>
        <li><i class="iconfont icon-dangqianbaojing"></i></li>
        <li><i class="iconfont icon-message"></i></li>
        <li><i class="iconfont icon-more"></i></li>
        <li>测试人员<Icon type="md-arrow-dropdown" /></li>
      </ul>
    </div>
    </div>
   
    </div>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  components: {

  },

  mixins: [],

  props: {

  },

  data () {
    return {
      iSagy:""
    }
  },

  computed: {

  },

  mounted() {
    this.getSubSystemUrl();
  },

  methods: {
    getSubSystemUrl(){
     axios.get(`/equipment/info-mng-backend/config/getSubSystemUrl?projectId=${this.$store.state.projectId}`).then(res=>{
       let data = res.data.data;
       this.iSagy = data.iSagy;
     })
   }
   
  },

}
</script>

<style scoped lang="less" >
.my-head{
  display:flex;
  align-items: center;
  border-bottom: 1px solid #ccc;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  box-shadow: 0 1px 2px 0 rgba(11,13,17,0.05);
  width: 100%;
  overflow: hidden;
  font-size: 20px;
  .my-img{
    width:78px;
    height:100%;
  }
  .vanke{
      display: inline-block;
      height:100%;
      color:#fff;
      font-size: 33.4px;
      padding:5px 0 5px 30px; 
      background: #374045;
      .off-img{
        width:98px;
        height:100%;
      }
    }
  .box{
    background: #374045;
    width: 100%;
    height:100%;
    padding-left: 40px;
    .left{
    ul {
      display:inline-block;
      li{
        display: inline-block;
        font-weight: bold;
        color: #fff;
        //font-size: 14px;
        cursor: pointer;
        a{
          display:inline-block;
          padding: 14px 10px;
          color: #fff;
         // font-size: 14px;
          margin: 0 12.5px;
        }
        .router-link-active{
          font-weight: bolder;
          background: #333;
        }
      }
    }
  }
  .right{
     display:inline-block;
     float: right;
     padding-right: 50px;
    ul{
      li{
        display:inline-block;
        padding: 14px 10px;
        //font-size: 14px;
        color:#fff;
        margin: 0 12.5px;
      }
    }
  }
  }
}
</style>
