dvcp_v2_webapp/project/fengdu/AppBIBoard/components/fengduHead.vue

<template>
  <section class="fengduHead">
    <div flex class="content">
      <b class="headerTitle" v-text="title"/>
      <el-tabs class="fill" v-model="current" @tab-click="$emit('change', current)">
        <el-tab-pane v-for="tab in tabs" :key="tab.id" :label="tab.label" :name="tab.id"/>
      </el-tabs>
      <div class="rightPane" flex>
        <div class="item" v-text="currentTime"/>
        <div class="item setting mar-l24" @click.stop="$emit('setting',true)"/>
        <div class="item fullscreen mar-l14" @click.stop="$emit('fullscreen')"/>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  name: "fengduHead",
  model: {
    prop: "active",
    event: "change"
  },
  props: {
    title: String,
    views: {default: () => []},
    active: String,
    currentTime: {default: null}
  },
  computed: {
    tabs: v => [
      ...v.views,
      // {label: "测试哦哦", id: 1},
      // {label: "测试哦哦", id: 2},
      // {label: "测试哦哦", id: 3},
      // {label: "测试哦哦", id: 4},
      // {label: "测试哦哦", id: 5},
      // {label: "测试哦哦", id: 6},
      // {label: "测试哦哦", id: 7},
      // {label: "测试哦哦", id: 8},
      // {label: "测试哦哦", id: 9},
      // {label: "测试哦哦", id: 10},
    ]
  },
  data() {
    return {
      current: ""
    }
  },
  watch: {
    active: {
      immediate: true,
      handler(v) {
        if (v != this.current) this.current = this.$copy(this.active)
      }
    }
  },
  methods: {
    getWeather() {
      this.$request.post("/app/weather/queryWeather").then(res => {
        if (res?.data) {

        }
      })
    }
  },
  created() {
    // this.getWeather()
  }
}
</script>

<style lang="scss" scoped>
.fengduHead {
  width: 100%;
  height: 96px;
  padding: 0 48px;
  box-sizing: border-box;
  color: #fff;

  .content {
    height: 100%;
    background-repeat: no-repeat;
    background-position: left bottom, right bottom;
    font-family: PingFang-SC;

    .headerTitle {
      font-family: fangfang;
      font-size: 38px;
      font-weight: 400;
      line-height: 62px;
      letter-spacing: 1.52px;
      color: #fff;
    }

    :deep(.el-tabs) {
      margin-left: 92px;

      .el-tabs__header {
        margin-bottom: 0;
      }

      .el-tabs__nav-wrap {
        padding: 0 24px;

        &:after {
          content: none;
        }
      }

      .el-tabs__active-bar {
        width: 88px;
        background: linear-gradient(270deg, #02feff00 0%, #02feffff 51%, #02feff00 100%);
      }

      .el-tabs__item {
        color: #fff;
        font-size: 20px;
        font-weight: 400;
        font-family: PingFang-SC;
        user-select: none;

        &.is-active {
          color: #02FEFF;
        }
      }

      .el-tabs__nav-prev {
        padding-right: 14px;
        background-image: linear-gradient(270deg, #0b0d0cff 0%, #0f3031ff 72%, #02feffff 100%);

        background-repeat: no-repeat;
        background-position: right center;
        background-size: 6px 32px;

        .el-icon-arrow-left:before {
          color: #02FEFF;
          content: "◀";
        }
      }


      .el-tabs__nav-next {
        padding-left: 14px;
        background-image: linear-gradient(270deg, #02feffff 0%, #0f3031ff 28%, #0b0d0cff 100%);
        background-repeat: no-repeat;
        background-position: left center;
        background-size: 6px 32px;

        .el-icon-arrow-right:before {
          color: #02FEFF;
          content: "▶";
        }
      }
    }
  }

  .rightPane {
    margin-left: 75px;
    padding: 0 11px 0 0;

    .item {
      padding-left: 30px;
      height: 30px;
      line-height: 30px;
      background-image: url("../assets/timeIcon.png");
      background-repeat: no-repeat;
      background-position: left center;

      &.setting {
        background-image: url("../assets/settingIcon.png") !important;
      }

      &.fullscreen {
        background-image: url("../assets/fullscreenIcon.png") !important;
      }
    }
  }
}
</style>