dvcp_v2_wxcp_app/components/AiGroup.vue

<template>
  <section class="AiGroup" :class="{noBorder,description,bottomBorder}" :style="{paddingLeft:left+'rpx'}">
    <div class="groupHeader" v-if="title" v-text="title"/>
    <slot/>
  </section>
</template>

<script>
export default {
  name: "AiGroup",
  provide() {
    return {
      labelColor: this.labelColor,
      description: this.description,
      activeStep: this.activeStep
    }
  },
  props: {
    title: String,
    noBorder: Boolean,
    left: {default: 32},
    labelColor: {default: "#333"},
    description: {default: false}, //用于展示则不会又红星,会把标签的内间距去掉
    activeStep: {default: 1},//用于步骤组件的当前步数,
    bottomBorder: Boolean
  },
  data() {
    return {
      items: []
    }
  }
}
</script>

<style lang="scss" scoped>
.AiGroup {
  background: #FFFFFF;
  box-shadow: inset 0px -1px 0px 0px #DDDDDD;

  &.noBorder {
    box-shadow: none;
  }

  & + .AiGroup {
    margin-top: 16px;
  }

  &.bottomBorder + .AiGroup {
    margin-top: 0 !important;
  }

  .groupHeader {
    font-weight: bold;
    font-size: 36px;
    padding-left: 20px;
    margin-bottom: 16px;
  }

  &.description {
    .groupHeader {
      padding-left: 0;
    }
  }

}
</style>