<template>
  <div class="header_title">
    <img class="header_img" :src="require('@/assets/zhangqiu/headerTitle.png')">
    <div class="header_content">
      <div class="header_item" />
      <div class="header_middle">
        章丘区燃气地下管网安全监测管理平台
      </div>
      <!--右边按钮-->
      <div class="header_item">
        <div v-for="btn of btns" :key="btn.name" class="header_item_btn" :class="btn.name===currentBtn.name?'color_fff':''" @click="changePage(btn)">
          {{ btn.name }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      btns: [], // 所有按钮
      currentBtn: null // 当前常亮按钮
    }
  },
  created() {
    this.btns = this.baseConfig.indexBtns
    this.currentBtn = this.btns[0]
  },
  methods: {
    changePage(page) {
      this.currentBtn = page
      // 如果是#表示本页，不跳转，如果是http开头表示外部系统，打开新页面，其他直接路由跳转
      if (page.url === '#') {
        // 不处理
      } else if (page.url.indexOf('http') > -1) {
        window.location.href = page.url
      } else {
        this.$router.push(page.url)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.header_title{
  position: fixed;
  z-index: 1200;
  top:0px;
  width: 100%;
  height: 70px;
  background-image: linear-gradient(to bottom, rgba(19,19,32,1), rgba(19,19,32,0.0) );
  background-image: radial-gradient(65% 70px at 50%  70px,rgba(19,19,32,0.0),rgba(19,19,32,1));
  border: none;
  .color_fff{
    color: #fff !important;
  }
  .header_img{
   width: 100%;
   height: auto;
   position:absolute;
   top:-25px;
  }
  .header_content{
   position: relative;
   z-index: 1;
    width: 100%;
    height: 100%;
    display: flex;
    color: #FFF;
  }
  .header_item{
   width: 500px;
   display: flex;
   align-items: center;
   &_btn{
     flex: 1;
     line-height: 90px;
     height: 100%;
     font-size: 16px;
     font-weight: bold;
     color: #00B1DD;
     cursor: pointer;
   }
  }
  .header_middle{
   flex: 1;
   text-align: center;
   line-height: 60px;
   font-size: 20px;
   font-weight: bold;
   letter-spacing: 5px;  //letter-spacing 设置文字间隔
  }
}
</style>