<script setup lang="ts">
// 定义参数
interface ContainerTitleProps {
  title: string
}
//  获取参数
const props = defineProps<ContainerTitleProps>();


</script>

<template>
  <div class="container-title">
    <div class="inner-title">
      <img class="icon" src="@/assets/images/title-prefix.png" />
      <span class="text">{{props.title}}</span>
    </div>
  </div>
</template>

<style scoped lang="less">

.container-title {
  width: 20.9vw;
  height: 4.5vh;
  background: url("@/assets/images/title-border.png") no-repeat;
  background-size: 100% 100%;
  position: relative;
  .inner-title {
    position: absolute;
    top: -1vh;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .icon {
      width: 2.9vw;
      height: 4.9vh;
    }
    .text {
      margin-bottom: 1vh;
      background-image:-webkit-linear-gradient(bottom,#2999fd,#f0ffff); 
      -webkit-background-clip:text; 
      -webkit-text-fill-color:transparent;
      width: 16vw;
      font-size: 1.2vw;
      font-style: italic;
      font-weight: 800;
    }
  }
}

</style>