tba-waves/src/components/card/Card01.vue

<script lang="ts" setup>
defineProps({
  title: {type: String, default: null},
})

import header from "@/assets/images/card/header01.png";
</script>

<template>
  <div class="card-one">
    <div class="card-one-header">
      <img :src="header" alt=""/>
      <div class="card-one-header-main">
        <slot name="header">
          <span class="title" v-html="title"></span>
        </slot>
        <slot name="sec_header">
        </slot>
      </div>
    </div>
    <div class="card-one-body">
      <slot></slot>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.card-one {
  color: #fff;

  .card-one-header {
    position: relative;
    height: 2.85rem;
    line-height: 2.85rem;
    font-size: 1.2rem;
    font-weight: 600;
    padding-left: 6%;

    img {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
    }

    .card-one-header-main {
      position: relative;
    }
  }

  .card-one-body {
    width: 100%;
    height: calc(100% - 2.85rem);
    padding: 10px;
    position: relative;
    background-color: rgba(3, 37, 77, 0.8);
    border: 1px transparent solid;
  }

}

.card-one + .card-one {
  margin-top: 10px;
}

.card-one.merge + .card-one.merge {
  margin-top: 0;
}
</style>