<template>
  <div class="title-container">
    <!-- <div class="title-line"></div> -->
    <div class="title-text-container">
      <div class="title-text">{{ title }}</div>
      <div class="sub-title" v-if="subTitle" @click="subTitleClick">{{ subTitle }}{{ ' >>' }}</div>
      <slot></slot>
    </div>
    <img class="img-pic" :src="getImgUrl('preview/tabHeader.png')" alt="图片获取失败">
  </div>
</template>

<script setup>
import { ref, defineProps, defineEmits } from 'vue';
import { getImgUrl } from "@/utils/tools.js"

const emits = defineEmits(['jump']);
const props = defineProps({
  /**标题 */
  title: {
    type: String,
    default: ''
  },
  /** 可跳副标题 */
  subTitle: {
    type: String,
    default: ''
  }
})

const subTitleClick = () => {
  emits('jump');
}
</script>

<style lang="scss" scoped>
.title-container {
  position: relative;
  text-align: center;
  height: 3.52vh;
  margin-bottom: 0.1vh;
  .title-text-container {
    display: flex;
    height: 100%;
  }

  .img-pic {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
  }

  .title-text {
    position: absolute;
    top: 50%;
    left: 2.2vw;
    transform: translate(0, -50%);
    font-size: 1.48vh;
    font-weight: bolder;
    color: #fff;
    font-style: normal;
  }

  .sub-title {
    position: absolute;
    right: 2.2vw;
    top: 0.6vh;
    text-decoration: underline;
    color: green;
  }
}
</style>
