<template>
  <div class="msg-card">
    <div class="msg-card-title" :class="[{ long: long }, {}]" v-if="!noHeader">
      <div class="text">
        {{ title }}
      </div>
    </div>
    <div
      :class="[
        noHeader ? 'msg-card-content-noHeader' : 'msg-card-content',
        'content',
      ]"
    >
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "simple-card",
  props: {
    long: Boolean,
    title: String,
    subhead: String,
    noHeader: Boolean,
  },
  computed: {},
};
</script>

<style lang="less" scoped>

.text{
  position: relative;
  display: flex;
  align-items: center;
}

.msg-card {
  width: 100%;
  height: 100%;
}
.msg-card-title {
  // background-color: #165b9b;
  background:linear-gradient(90deg, rgba(17, 88, 158, 0.45), rgba(17, 88, 158, 0));
  border-left: 4px solid #1860a3;
  height: 25px;
  line-height: 25px;
  padding-left: 15px;
  font-size: 16px;
  width: 100%;
  text-align: left;
}
.long{
  background-image: url('../../assets/images/holo/msgCardHeadLong.png');
}
.content {
  overflow-y: hidden;
  height: calc(100% - 25px);
  padding: 5px 0;
}
.msg-card-content {
  height: calc(100% - 25px);
}
.msg-card-content-noHeader {
  height: 100%;
}
</style>
