<template>
  <div class="border3">
     <div class="imgContent">
      <div class="head">
         <img src="../assets/border3-title.png"  alt="">
         <div>{{title}}</div>
         <img src="../assets/border3-title2.png"  alt="">
       </div>
       <div class="bottomContent">
         <slot></slot>
       </div>
     </div>
       <img
       :src="showType=='right'?require('../assets/border3-bg.png'):require('../assets/border3-bg2.png')"
       alt=""
       class="borderImg"
       />
     </div>
</template>
<script>
  export default{
    props:{
      showType:{
        type:'String',
        default:'left'
      },
      title:{
        type:'String'
      }
    }
  }
</script>
<style lang="less">
  .border3{
    width: 100%;
    height: 30.333%;
    position: relative;
    box-sizing: border-box;
    .imgContent{
      height:calc(~"100% - .4rem");
      position: absolute;
      top: .4rem;
      left: .5rem;
      right: 0;
      bottom: 0;
      white-space:nowarp;
      box-shadow: inset 0 0 40px rgba(44,33,158,.5);
    }
    .head{
      height: .6rem;
      display: flex;
      align-items: center;
      background: linear-gradient(to right,rgba(255,255,255,.1),rgba(0,0,0,.1));
      img{
        height: .3rem;
        display: block;
      }
      img:first-child{
        margin-left: .1rem;
      }
      div{
        margin-left: .1rem;
        margin-right: 1rem;
      }
    }

    .borderImg{
      display: block;
      width: 100%;
      height: 100%;
      filter: brightness(10);
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom:0;
    }
    .bottomContent{
      width: 100%;
      position: absolute;
      top: .6rem;
      bottom: 0;
      z-index: 999;
    }
  }
</style>
