<template>
  <div class="titleDiv">
    <div class="titleCon" :class="padding">
      <div class="title">{{title}}</div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  title: "",
  padding: {
    type: String,
    default: "px-10"
  }
})
const title = ref(props.title)
</script>

<style lang="scss" scoped>
.titleDiv {
  text-align: center;
  .titleCon {
    background: url(/images/dsj/title.png) no-repeat;
    background-size: 100% 100%;
    display: inline-block;
    height: 65px;
    img {
      height: 50px;
    }
    .title {
      background-image: linear-gradient(180deg, #c3f8b3, #66ffff 80%);
      -webkit-background-clip: text; /* 背景被裁剪成文字的前景色 */
      -webkit-text-fill-color: transparent; /* 文字填充颜色变透明 */
      font-size: 25px;
      font-weight: 700;
      line-height: 65px;
      position: relative;
      &::after {
        content: "";
        width: 67px;
        height: 4px;
        background: #00fffa;
        border-radius: 3px;
        position: absolute;
        bottom: 5px;
        left: 50%;
        transform: translateX(-50%);
      }
    }
  }
}
</style>