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

<script lang="ts" setup>
defineProps<{
  title: { type: string, required: false },
  customClass: { type: string, required: false },
}>()
</script>

<template>
  <div :class="[customClass]" class="card-one">
    <div class="card-one-header">
      <span class="title-box" v-html="title"></span>
      <slot name="headerTool"></slot>
    </div>
    <div class="card-one-body">
      <slot></slot>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.card-one {
  background-image: linear-gradient(180deg,
    rgba(0, 28, 53, 0.8) 0%,
    rgba(11, 45, 85, 0.8) 100%);
  border: 2px solid hsla(0, 0%, 89.8%, .31);
  border-radius: 12px;
  min-width: 418px;

  .card-one-header {
    border-radius: 12px 12px 0 0;
    background-image: linear-gradient(180deg,
      rgba(0, 28, 53, 1) 0%,
      rgba(11, 45, 85, 1) 100%);
    height: 2.85rem;
    line-height: 2.85rem;
    font-size: 1.2rem;
    font-weight: 600;
    color: #fff;
    display: flex;
    align-items: center;

    .title-box {
      flex: 1;
    }

    .title-box:before {
      display: inline-block;
      content: "";
      width: .5rem;
      height: 1.4rem;
      background: #0cf;
      vertical-align: top;
      margin: .7rem;
    }

    .time {
      position: absolute;
      right: 1rem;
      top: -4px;
    }
  }

  .card-one-body {
    width: 100%;
    height: calc(100% - 2.85rem);
    position: relative;

    ul {
      margin: 0;
      padding: 0;

      li {
        list-style: none;
        padding: 0 10px 10px 10px;
      }

    }

  }

  &.merge {
    border-top: none;
    border-bottom: none;
    border-radius: 0;

    .card-one-header {
      border-radius: 0;
    }

    &:first-child {
      border-radius: 12px 12px 0 0;
      border-top: 2px solid hsla(0, 0%, 89.8%, .31);

      .card-one-header {
        border-radius: 12px 12px 0 0;
      }
    }

  }

  &:last-child {
    &.merge {
      border-radius: 0 0 12px 12px;
      border-bottom: 2px solid hsla(0, 0%, 89.8%, .31);
    }
  }
}

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

.card-one.merge + .card-one.merge {
  margin-top: 0;
}

.card-one-body {
  .dv-scroll-board {
    .header {
      color: #8ec8f8;
      font-size: 1rem;
    }

    .rows {
      .row-item {
        color: #CEF0FF;
        font-size: 1rem;
      }
    }
  }
}

</style>