<template>
  <section class="border3">
    <div class="bg">
      <div class="bg-wrapper"></div>
      <div class="header">
        <div class="header-border">
          <div class="point"></div>
          <div class="point"></div>
          <div class="point"></div>
        </div>
        <h2>{{ title }}</h2>
        <div class="header-border">
          <div class="point"></div>
          <div class="point"></div>
          <div class="point"></div>
        </div>
      </div>
      <div class="bottom">
        <div class="bottom-left">
          <div class="point"></div>
          <div class="point"></div>
          <div class="point"></div>
        </div>
        <div class="bottom-right">
          <div class="point"></div>
          <div class="point"></div>
          <div class="point"></div>
        </div>
      </div>
      <div class="slot">
        <slot/>
      </div>
    </div>
  </section>
</template>

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

<style lang="scss" scoped>
  .border3 {
    width: 100%;
    height: 100%;
    box-sizing: border-box;

    * {
      box-sizing: border-box;
    }

    .bg {
      position: relative;
      height: 100%;

      .bg-wrapper {
        position: absolute;
        top: 12px;
        width: 100%;
        height: calc(100% - 12px);
        background: rgba(11, 24, 73, 0.3);
      }

      .bottom-left, .bottom-right, .header-border {
        display: flex;
        align-items: center;
        position: relative;
        justify-content: space-between;
        width: 24%;
        height: 1px;

        .point {
          width: 4px;
          height: 1px;
          background: #FFCD68;
        }
      }

      .bottom {
        display: flex;
        justify-content: space-between;
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 1;
        width: 100%;
        height: 1px;
        background: rgba(0, 133, 255, 0.5);
      }

      .header {
        display: flex;
        position: relative;
        align-items: center;
        justify-content: space-between;
        height: 24px;
        line-height: 24px;
        text-align: center;

        .header-border {
          position: relative;
          display: flex;
          align-items: center;
          width: 30%;
          height: 1px;
          background: rgba(0, 133, 255, 0.5);
        }

        h2 {
          position: relative;
          font-size: 18px;
          color: #fff;
          letter-spacing: 2px;

          &::after {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 120px;
            height: 12px;
            transform: translate(-50%, -50%);
            content: ' ';
            background: url(./../asset/border3Title.png) no-repeat;
            background-size: 100% 100%;
            opacity: 0.8;
          }
        }
      }

      .slot {
        position: relative;
        z-index: 1;
        height: calc(100% - 34px);
        padding: 0;
      }
    }
  }
</style>
