<!--顶部-->
<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">
      {{ 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="scss">
  .top-header {
    position: fixed;
    z-index:1000;
    top:0;
    left:0;
    width: 100%;
    height: 80px;
    //height: 100%;
    display: flex;
    justify-content: space-between;
    flex-shrink: 0;
    /*中间装饰*/
    .header-center-decoration {
      width: 60%;
      height: 70%;
      margin-top: 0.8rem;
    }
    /*左右装饰*/
    .header-left-decoration, .header-right-decoration {
      width: 18%;
      height: 70%;
    }

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