<template>
  <section class="border4">
    <div class="slot">
      <slot/>
    </div>
    <div class="title">{{ title }}</div>
  </section>
</template>

<script>
export default {
  name: 'border4',
  props: {title: String}
}
</script>

<style lang="scss" scoped>
  .border4 {
    width: 100%;
    height: 100%;
    background: rgba(33, 73, 157, 0.15);
    border-radius: 6px;
    border: 1px solid #274A7E;
    box-sizing: border-box;
    overflow: hidden;

    .slot {
      width: 100%;
      height: calc(100% - 48px);
    }

    .title {
      height: 48px;
      line-height: 48px;
      padding: 0 10px;
      color: #82C5FF;
      font-size: 16px;
      text-align: center;
    }

    * {
      box-sizing: border-box;
    }
  }
</style>
