<template>
  <div class="container2">
    <div class="title">
      <div class="titletext">{{ setting.title }}</div>
      <div class="subtitle">{{ setting.subtitle }}</div>
      <div class="titleline"></div>
    </div>
    <div class="content">
      <slot>未填充内容</slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Container2',
  props: {
    setting: {
      type: Object,
      default: {
        title: '主标题',
        subtitle: '副标题',
      },
    },
  },
}
</script>

<style lang="scss" scoped>
.container2 {
  height: 100%;
  color: white;
  .title {
    height: 43px;
    background-image: url('~@/assets/images/dashboard/title-triangle.png');
    background-repeat: no-repeat;
    background-position: 9px 9px;
    font-size: 18px;
    line-height: 40px;
    .titletext {
      display: inline-block;
      margin-left: 40px;
    }
    .subtitle {
      display: inline-block;
      padding-left: 20px;
      font-size: 10px;
    }
    .titleline {
      height: 2px;
      background-image: url('~@/assets/images/dashboard/title-line.png');
    }
  }
  .content {
    height: calc(100% - 46px);
    border: 0px white solid;
    box-sizing: content-box;
  }
}
</style>
