<template>
  <div :class="`${namespace}-container-border`">
    <div :class="['title-box', `title-${pos}`]">
      <span class="title">{{title}}</span>
    </div>
    <div :class="['content']">
      <slot />
    </div>
  </div>
</template>

<script>
export default {
  name: 'ContainerBorder',
  inject: ['namespace', 'pos'],
  props: {
    title: {
      type: String,
      default: '数据统计'
    },
    subtitle: {
      type: String
    }
  }
}
</script>

<style scoped lang="less">
@import "@/assets/styles/config.less";

.@{namespace}-container-border {
  .title-box { 
    width: 368px;
    height: 76px;
    position: relative;
    .title {
      position: absolute;
      width: 100%;
      top: 14px;
      display: flex;
      justify-content: center;
      font-size: 21px;
      font-weight: 600;
      font-family: "黑体" LBSFont;
      color: #fff;
    }

    

  }

  .title-left {
    background: url("@/assets/images/container-left.png");  
    background-size: 100% 100%;  
  }
  .title-right {
    background: url("@/assets/images/container-right.png");  
    background-size: 100% 100%;  
  }

  .content {
    margin: 0px 34px;
  }
}
</style>
