<template>
  <div class="card_box">
    <div class="s-box" v-if="isTitleString">
      <div class="box-tag">
          <text class="box-tag-txt-large">{{title}}</text>
      </div>
    </div>
    <div :class="['card_item', contentClass?'contentClass':'']">
      <slot></slot>
    </div>
  </div>
</template>
<script>

export default {
  name: 'cards',
  props: {
      title: {
        type: String,
        default: null
      },
      contentClass:{
        type: String,
        default: null
      }
  },
  computed: {
    isTitleString () {
      return true;
    }
  }
}
</script>
<style scoped>
.card_box {
  /*margin-top: 30px;*/
  width: 750px;
  flex-direction: column;
  background-color: #fff;
}
.card_item {
  flex: 750px;
  margin-left: 30px;
  margin-left: 20px;
  margin-bottom: 20px;
  flex-direction: row;
  flex-wrap:wrap;
  justify-content:flex-start;
}
.s-box {
  flex-direction: column;
  padding-left: 41px;
  background-color: #fff;
}
.box-tag {
  margin-top: 20px;
  flex: 1;
  justify-content: center;
}
.box-tag-txt-large {
	font-family: PingFang-SC;
	font-size: 34px;
	font-weight: bold;
	font-stretch: normal;
	letter-spacing: 0px;
	color: #111111;
}
</style>

