<!--顶部-->
<template>
  <div class="top-header">
    <dv-decoration-8 class="header-left-decoration" :color="colors"/>
    <dv-decoration-5 class="header-center-decoration" :color="colors" />
    <dv-decoration-8 class="header-right-decoration" :reverse="true" :color="colors" />
    <div class="center-title" @click="jumpToMap">{{ title }}</div>
  </div>
</template>

<script>
export default {
  name: 'TopHeader',
  props:{
    colors:{
      type: Array,
      default: ()=>{
        return ['#4f98ee','#67adee']
      }
    }, // 边框主题颜色，支持两个颜色
    title:{
      type: String,
      default:'数据可视化大屏'
    }, // 标题文字
    color:{
      type: String,
      default:'#ffffff'
    },// 标题颜色

  },
  methods: {
    jumpToMap: function () {
      this.$router.push('/brain/map')
    }
  }
}
</script>

<style lang="less">
  .top-header {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    flex-shrink: 0;
    /*中间装饰*/
    .header-center-decoration {
      width: 60%;
      height: 70%;
      margin-top: 0.4rem;
    }
    /*左右装饰*/
    .header-left-decoration, .header-right-decoration {
      width: 18%;
      height: 70%;
    }

    .center-title {
      position: absolute;
      font-size: 0.45rem;
      top:0.02rem;
      line-height: 1.5;
      font-weight: bold;
      left: 50%;
      cursor: pointer;
      color: white;
      transform: translateX(-50%);
    }
  }
</style>