<template>
  <div class="Card">
    <Title :title="title">
      <template #suffix>
        <slot name="title-suffix" />
      </template>
    </Title>
    <div class="content">
      <slot />
    </div>
  </div>
</template>

<script>
import Title from "@screen/components/Title/index.vue";

export default {
  name: "Card",
  components: {
    Title,
  },
  props: {
    title: {
      type: String,
    },
  },
};
</script>

<style lang="scss" scoped>
.Card {
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: linear-gradient(
    180deg,
    rgba(6, 66, 88, 0) 0%,
    rgba(6, 66, 88, 0.4) 93%
  );
  display: flex;
  flex-direction: column;

  .content {
    height: 100%;
    overflow: auto;
    flex: 1;
    padding: 9px;
  }
}
</style>
