.border-box {
  margin: 20px auto 4px;
  text-align: center;
  padding: 0 20px 20px;

  .box-title {
    white-space: nowrap;

    max-width: 94%;
    min-width: 7em;
    display: inline-block;
    font-weight: bolder;

    .box-title-content {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  // 透明(无)
  &.none {
    background: none;
    .box-title {
      line-height: 2.5em;
    }
  }

  // 样式1
  &.skin1 {
    background-color: #ffeddb;
    padding: 0 2vw 2vw;
    border-radius: 2em;
    .box-title {
      padding: 0.5em 1.5em;
      line-height: 1.8em;
      transform: translateY(-19%);
      color: #fff;
      border-image: url('//img.maimairen.com/low-code/setters/border-box/assets/skin1/img/title1.png')
        0 10% 15%/0 20px 0 fill stretch;
    }
  }
  &.skin2 {
    border-image: url('//img.maimairen.com/low-code/setters/border-box/assets/skin2/img/border.png')
      35%/30px fill stretch;
    .box-title {
      padding: 0.5em 2.5em;
      line-height: 1.5em;
      transform: translateY(-1em);
      color: #f9dc6d;
      border-image: url('//img.maimairen.com/low-code/setters/border-box/assets/skin2/img/btn.png')
        49.999% 35%/50.999% 4em 49.999% fill stretch;
    }
  }
  &.skin3 {
    border-image: url('//img.maimairen.com/low-code/setters/border-box/assets/skin3/img/border.png')
      33%/30px fill stretch;
    .box-title {
      padding: 0.5em 1em;
      line-height: 1.8em;
      transform: translateY(-1em);
      color: #c1915d;
      border-image: url('//img.maimairen.com/low-code/setters/border-box/assets/skin3/img/btn.png')
      30%/30% 4em fill stretch;
    }
  }
  &.skin4 {
    border-image: url('//img.maimairen.com/low-code/setters/border-box/assets/skin4/img/border.png')
      25%/30px fill stretch;
    padding-top: 14px;
    margin-top: 5px;
    min-height: 60px;
    .box-title {
      padding: 0.25em 1.5em;
      line-height: 1.8em;
      transform: translateY(-25%);
      color: #c1915d;
      border-image: url('//img.maimairen.com/low-code/setters/border-box/assets/skin4/img/btn.png')
      49.999%/49.999% 20px fill stretch;
    }
  }

  // 纯色
  &.color {
    border-radius: 15px;
    padding: 15px;
    .box-title {
      line-height: 2em;
      margin-bottom: 0.5em;
    }
  }
  // 影响到图文组件
  // & > .lc-container {
  //   //display: inline-block;
  //   text-align: center;
  // }
  .box-slot-container {
    .lc-container {
      display: flex;
      flex-direction: inherit;
      align-content: inherit;
      align-items: inherit;
      justify-content: inherit;
    }
  }
}
// 影响到图文组件
// .lce-page {
//   height: inherit;
// }
