<template>
  <div class="headerBar" :style="titleBarStyle">
    <div class="bar-line"></div>
    <div class="text-panel">
      <span>{{title}}</span>
    </div>
    <div class="bar-line1"></div>
  </div>
</template>
<script>
export default {
  name: "header-bar",
  props: {
    width: {
      default: "100%"
    },
    height: {
      default: "30px"
    },
    position: {
      default: "center" // left center right
    },
    textStyle: {
      default() {
        return {
          color: "white"
        };
      }
    },
    title: {
      default: "活跃用户数"
    }
  },
  computed: {
    titleBarStyle() {
      return {
        width: this.width,
        height: this.height,
        lineHeight: this.height,
        textAlign: this.position
      };
    }
  },
  data() {
    return {};
  },
  mounted() {}
};
</script>
<style scoped lang='scss'>
.headerBar {
  .bar-line {
    height: 2px;
    background: linear-gradient(
      to right,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0) 10%,
      rgba(65, 104, 154, 0.3) 20%,
      rgba(65, 104, 154, 0.4) 30%,
      rgba(65, 104, 154, 0.5) 40%,
      rgba(65, 104, 154, 0.8) 50%,
      rgba(65, 104, 154, 0.5) 60%,
      rgba(65, 104, 154, 0.4) 70%,
      rgba(65, 104, 154, 0.3) 80%,
      rgba(0, 0, 0, 0) 90%,
      rgba(0, 0, 0, 0) 100%
    );
  }
   .bar-line1 {
    height: 2px;
    background: linear-gradient(
      to right,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0) 10%,
      rgba(65, 104, 154, 0.3) 20%,
      rgba(65, 104, 154, 0.4) 30%,
      rgba(65, 104, 154, 0.5) 40%,
      rgba(255, 255, 255, 0.8) 50%,
      rgba(65, 104, 154, 0.5) 60%,
      rgba(65, 104, 154, 0.4) 70%,
      rgba(65, 104, 154, 0.3) 80%,
      rgba(0, 0, 0, 0) 90%,
      rgba(0, 0, 0, 0) 100%
    );
  }
  .text-panel {
    height: 100%;
    background: linear-gradient(
      to right,
      rgba(0, 0, 0, 0) 0%,
      rgba(26, 61, 114, 0.1) 10%,
      rgba(26, 61, 114, 0.3) 20%,
      rgba(26, 61, 114, 0.4) 30%,
      rgba(26, 61, 114, 0.5) 40%,
      rgba(26, 61, 114, 0.8) 50%,
      rgba(26, 61, 114, 0.5) 60%,
      rgba(26, 61, 114, 0.4) 70%,
      rgba(26, 61, 114, 0.3) 80%,
      rgba(26, 61, 114, 0.1) 90%,
      rgba(0, 0, 0, 0) 100%
    );
    font-size: 14px;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
  }
}
</style>