<template>
  <div :class="`${namespace}-container-border`">
    <div class="title-box" :style="{ alignItems: pos }">
      <span class="title">{{title}}</span>
      <span class="h" v-if="subtitle">/</span>
      <span class="subtitle" v-if="subtitle">{{subtitle}}</span>
    </div>
    <div>
      <slot />
    </div>
  </div>
</template>

<script>
export default {
  name: 'ContainerBorder',
  inject: ['namespace'],
  props: {
    title: {
      type: String,
      default: '容器标题'
    },
    subtitle: {
      type: String
    },
    pos: {
      type: String,
      default: 'flex-end'
    }
  }
}
</script>

<style scoped lang="less">
@import "@/assets/styles/config.less";
@title-color: #3be1ff;
@subtitle-color: #93adb2;

  .@{namespace}-container-border {
    background: url("@/assets/images/container-border.png") no-repeat;
    background-size: 513px  117px;
    width: 513px;
    min-height: 117px;
    .title-box {
      width: 513px;
      height: 117px;
      display: flex;
      padding-left: 10px;
      font-size: 30px;
      padding-bottom: 15px;

      .title {
        color: @title-color;
        font-family: LBSFont;
      }

      .h {
        color: @title-color;
      }

      .subtitle {
        color: @subtitle-color;
        font-family: LBSFont;
      }
    }
  }
</style>
