android-cloud-H5/components/activity/invite-user/box.vue

<template lang="">
  <div class="box">
    <div class="box-header">
      <div class="box-header-content">
        <slot name="title"></slot>
      </div>
    </div>

    <div class="box-main">
      <slot></slot>
    </div>
  </div>
</template>
<script>
export default {
  name: 'ActivityInviteUserBox',
};
</script>
<style lang="scss">
.box {
  width: 373px;
  box-sizing: border-box;
  margin: auto;

  // border-image-width: 200px;
  // border-image-slice: 200%;
  // border-width: 1px;
  position: relative;
  z-index: 0;

  + .box {
    margin-top: 30px;
  }

  .box-header {
    // position: absolute;
    position: relative;
    // top: -30px;
    z-index: 1;
    // left: 141px;
    // left: 0;
    // right: 0;
    margin-bottom: -34px;
    // text-align: center;
    // padding: 0 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    .box-header-content {
      color: #fff;
      border-image-source: url('~/assets/image/activity/invite-user/box-title@2x.png');
      border-image-slice: 0 140 fill;
      border-width: 0 70px 0;
      border-style: solid;
      height: 38px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      // width: auto;
    }
  }

  .box-main {
    z-index: 0;
    // padding: 30px 15px 20px;
    border-image-source: url('~/assets/image/activity/invite-user/box-bg@2x.png');
    border-image-slice: 50 60 80 fill;
    border-image-width: 30px 30px 40px;
    border-width: 50px 20px 40px;
    border-style: solid;
    // padding-top: 30px;
  }
}
</style>