<template>
  <div class="bd" :class="{'center-bd': isCenter}">
    <div class="title" v-if="title" :class="{'center-title': isCenter}" :style="{'--titleHeight': titleHeight,...titleStyle}">
      {{title}}
    </div>
    <div class="content" :style="{'--titleHeight': titleHeight}">
      <b v-if="isBold" :style="contentStyle">
        {{content}}
      </b>
      <b v-if="!isBold" style="font-weight: normal" :style="contentStyle">
        {{content}}
      </b>
      <span class="mark" :style="{'--markWidth': mark.length,...markStyle}">
        {{mark}}
      </span>
    </div>
  </div>
</template>
<script>

export default {
  name:"TitleContentMark",
  data() {
    return {
    };
  },
  props:{
    title: {
      type: String,
      default: "",
    },
    mark: {
      type: String,
      default: "",
    },
    content: {
      type: String,
      default: "",
    },
    titleHeight: {
      type: String,
      default: "20%",
    },
    isCenter: {
      type: Boolean,
    },
    isBold:{
      type: Boolean,
    },
    titleStyle:{
      type: [String,Object],
    },
    contentStyle:{
      type: [String,Object],
    },
    markStyle:{
      type: [String,Object],
    }
  },
  methods: {},
  computed:{
  }
};
</script>
<style scoped>
:root{
  --markWidth: 2em;
  --titleHeight: 20%;
}

.bold{
  font-weight: bold;
}

.bd{
  height: 100%;
  padding: 0 0 2% 0%;
}

.center-bd{
  padding: 0 10% 6% 10%;
}

.title{
  color: white;
  height: var(--titleHeight);
  margin-left: 10%;
  line-height: 30px;
  white-space: nowrap;
}

.center-title{
  margin: 0;
  display: block;
  text-align: center;
  width: 100%;
}

.content{
  display: flex;
  align-items: center;
  position: relative;
  font-size: 30px;
  text-align: center;
  height: calc(100% - var(--titleHeight));
  width: 100%;
}


.content > b{
  //margin-left: 12%;
  width: 100%;
}

.mark{
  position: absolute;
  right: 0px;
  bottom: 0px;
  font-size: 14px;
  line-height: 16px;
  font-weight: normal;
  text-align: center;
  float: right;
  width: var(--markWidth);
}
</style>
