<template>
  <div class="title-1">
    <div class="title">
      <span> {{ title }} </span>
    </div>
    <slot name="right" />
  </div>
</template>

<script setup>
  let props = defineProps({
    title: {
      type: String,
      default: ''
    }
  })
</script>

<style scoped lang="scss">
  .title-1 {
    position: relative;
    .title {
      margin: vh(10) auto;
      width: vw(468);
      height: vh(32);
      display: flex;
      align-items: center;
      justify-content: center;
      background-image: url('@/assets/images/title-4.png');
      background-size: 100% 100%;
      & > span {
        font-weight: 800;
        font-size: vw(16);
        background-image: linear-gradient(to bottom, #ffffff 0%, #75c1ff 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent; /* 兼容WebKit内核浏览器 */
        color: transparent; /* 兼容其他浏览器 */
      }
    }
  }
</style>
