epmet-work-pc/src/views/dataBoard/satisfactionEval/components/Title/index.vue

<template>
  <div class="title" :class="noBg?'no-bg':''">
    <span class="text">
    <span class="txt">{{ text }}</span>
    <span class="text-shadow">{{ text }}</span>
    </span>
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: "Title",
  props: {
    text: {
      type: String,
      default: ''
    },
    noBg: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style scoped lang="scss">

.title {
  background: linear-gradient(90deg, rgba(31, 126, 255, 0.28) 0%, rgba(13, 113, 248, 0) 70%);
  padding: 10px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .text {
    position: relative;
    font-size: 22px;
    font-family: HYShuYuanHeiJ;
    font-weight: 400;

    .txt {
      color: #1F79FF;
      background: linear-gradient(0deg, #2DC1FF 0%, #FFFFFF 58.5205078125%);
      -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>