<template>
  <section class="border1">
    <dv-border-box1 :color="['#2B6EFF']">
      <div class="bg">
        <div class="header" v-text="title"/>
        <div class="slot">
          <slot/>
        </div>
      </div>
    </dv-border-box1>
  </section>
</template>

<script>
import {borderBox1} from '@jiaminghi/data-view'
import Vue from "vue";

Vue.use(borderBox1)

export default {
  name: "border1",
  props: {title: String}
}
</script>

<style lang="scss" scoped>
.border1 {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;

  .bg {
    position: relative;
    margin: 15px 20px;
    background-image: url("./../asset/border1Bg.svg");
    background-size: 100% calc(100%);
    background-repeat: no-repeat;
    padding: 30px 20px 0 20px;
    box-sizing: border-box;
    height: calc(100% - 40px);

    .header {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translate(-50%, -50%);
      height: 48px;
      min-width: 166px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      font-size: 16px;
      background-image: url("./../asset/border1Title.svg");
      background-size: 100%;
      background-repeat: no-repeat;
    }
  }

  .slot {
    height: calc(100% - 20px);
  }
}
</style>
