meilan-web/src/views/dataBigScreen/dashboard/TopTitle.vue

<template>
  <div class="pageTop wow fadeInDown">
    <div class="pageTopbg"></div>
    <div class="title">
      <span>{{ name }}</span>
    </div>
  </div>
</template>

<script name="TopTitle" setup>
  const props = defineProps({
    name: {
      name: String,
      default: '',
    },
  });
</script>

<style lang="less" scoped>
  .pageTop {
    position: absolute;
    width: 100%;
    height: 260px;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start;
    pointer-events: none;
    background: url('../../../assets/images/topbg-2521ad78.png') center top no-repeat;
    .title {
      position: relative;
      width: 40%;
      display: flex;
      flex-shrink: 0;
      justify-content: center;
      align-items: flex-start;
      flex-wrap: nowrap;
      flex-direction: row;
      align-content: flex-start;

      span {
        font-size: 42px;
        font-weight: 900;
        color: #FFFFFF;
        margin-top: 15px;
        letter-spacing: 2px;
        background: linear-gradient(0deg, rgba(10, 177, 255, 1) 0%, rgba(255, 255, 255, 1) 50.2685546875%, rgba(255, 255, 255, 1) 83.7890625%, rgba(10, 177, 255, 1) 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }

  }
</style>