随手拍改造完成

src/components/AiGroup/AiGroup.vue

@@ -1,12 +1,33 @@
 <template>
-  <section class="AiGroup">
+  <section class="AiGroup" :class="{noBorder,description}" :style="{paddingLeft:left+'rpx'}">
+    <div class="groupHeader" v-if="title" v-text="title"/>
     <slot/>
   </section>
 </template>
 
 <script>
 export default {
-  name: "AiGroup"
+  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: 0}//用于步骤组件的当前步数
+  },
+  data() {
+    return {
+      items: []
+    }
+  }
 }
 </script>
 
@@ -14,10 +35,27 @@ export default {
 .AiGroup {
   background: #FFFFFF;
   box-shadow: inset 0px -1px 0px 0px #DDDDDD;
-  padding-left: 32px;
+
+  &.noBorder {
+    box-shadow: none;
+  }
 
   & + .AiGroup {
     margin-top: 16px;
   }
+
+  .groupHeader {
+    font-weight: bold;
+    font-size: 36px;
+    padding-left: 20px;
+    margin-bottom: 16px;
+  }
+
+  &.description {
+    .groupHeader {
+      padding-left: 0;
+    }
+  }
+
 }
 </style>