
<template>
    <div class="title" :class="noBg ? 'no-bg' : ''">
      <span class="text">
        <span class="txt">{{ text }}</span>
        <span class="text-shadow">{{ text }}</span>
      </span>
      <slot name="time"></slot>
      <slot name="info"></slot>
    </div>
  </template>
  
  <script>
  export default {
    name: "Title",
    props: {
      text: {
        type: String,
        default: "",
      },
      noBg: {
        type: Boolean,
        default: false,
      },
    },
  };
  </script>
  
  <style scoped lang="scss">
  .title {
    // width: 100%;
    height: 40px;
    background: url(../../../../../assets/images/shuju/overview/title-small-bg.png) no-repeat;
    background-size: 100% 100%;
    padding: 8px 16px 8px 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  
    .text {
      position: relative;
      font-size: 18px;
    //   font-family: HYShuYuanHeiJ;
      font-weight: 400;
        color: #fff;
      .txt {
        font-family: PingFang SC;
        -webkit-background-clip: text;
        // -webkit-text-fill-color: transparent;
        position: relative;
        z-index: 2;
      }
  
      .text-shadow {
        top: 4px;
        left: 3px;
        position: absolute;
        color: #020f21;
        white-space: nowrap;
      }
    }
  }
  .no-bg {
    background: none;
  }
  </style>
  