<template>
  <div class="ldb3-title-box">
    <img :src="imageSrc" class="box-title-img" />
    <span :class="titleClass">{{ title }}</span>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
interface Props {
  title: string
  align?: 'left' | 'right'
}

const props = withDefaults(defineProps<Props>(), {
  align: 'left',
})

const imageSrc = computed(() => (props.align === 'left' ? '/PNG/标签图片.png' : '/PNG/标签图片右.png'))

const titleClass = computed(() =>
  props.align === 'left' ? 'ldb3-title-text' : 'ldb3-title-text-right'
)
</script>

<style scoped>
.ldb3-title-box {
  width: 100%;
  height: 28px;
}

.ldb3-title-text {
  font-size: 17px;
  font-weight: bolder;
  position: absolute;
  left: 50px;
  top: 2px;
  background: linear-gradient(to bottom, #3c9fc0, white);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.ldb3-title-text-right {
  font-size: 17px;
  font-weight: bolder;
  position: absolute;
  right: 50px;
  top: 2px;
  background: linear-gradient(to bottom, #3c9fc0, white);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.box-title-img {
  width: 100%;
  height: 30px;
  position: absolute;
}
</style>
