<template>
  <div id="my-header">

    <div class="title_left">
      <span @click="clickFn('showPlatform')" style="cursor: pointer">数据分析赋能系统</span>
    </div>
    <div class="title_right">
      <ul class="navbar-nav">
        <li v-for="(item,index) in titleList" :key=index>
          <span  @click="clickFn(item.path)">{{item.name}}</span>
        </li>
      </ul>

    </div>
  </div>
</template>

<script>
export default {
  name: "MyHeader",
  data(){
    return{
      titleList:[
        {
          code:'fwjc',
          name:'服务集成',
          path:''
        },
        {
          code:'ztfx',
          name:'专题分析',
          path:''
        },
        {
          code:'yydz',
          name:'应用定制',
          path:''
        },
        {
          code:'jkgx',
          name:'接口共享',
          path:'interfaceBrowseController'
        },
        {
          code:'wdjk',
          name:'我的接口',
          path:'myInterfaceController'
        },
      ]
    }
  },
  mounted(){

  },
  methods:{
    clickFn:function(component){
      if(component == null || component == ""){
        return;
      }
      this.$router.push(''+ component +'');
    }
  }
}
</script>


<style scoped lang="scss">
#my-header{
  position: absolute;
  left:0;
  top:0;
  z-index: 1;
  text-align: center;
  width: 1356px;
  height: 109px;
  background-image: url("../../../assets/imgs/mainPage/地图标题.png");
  background-repeat: no-repeat;
  display: flex;
  .title_left{
    width: 42%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    >span{
      font-weight: 700;
      font-size: 38px;
      color: #5accfc;
      letter-spacing: 25px;
    }

  }
  .title_right{
    margin-left: 10%;
    width: 38%;
    height: 65%;
    color: #000;
    .navbar-nav{
      display: flex;
      justify-content: space-evenly;
      align-items: center;
    }
    .navbar-nav li{
      font-size: 16px;
      font-weight: 600;
      color: #00b4ff;
      list-style:none;
      margin: 8px 0 !important;
      position: relative;
    }
    .navbar-nav li:hover{
      cursor: pointer;
      color: #00d8ff;
    }
    .navbar-nav li:not(:last-child):after{
      content: "";
      position: absolute;
      width: 2px;
      background-color: #00b4ff;
      height: 20px;
      transform: rotate(30deg);
      left: 85px;
    }
  }
}
</style>
