黑龙江民政考核评分基本完成

src/components/AiGroup.vue

@@ -1,5 +1,6 @@
 <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>
@@ -7,11 +8,25 @@
 <script>
 export default {
   name: "AiGroup",
-  data() {
-    return {}
+  provide() {
+    return {
+      labelColor: this.labelColor,
+      description: this.description,
+      activeStep: this.activeStep
+    }
   },
-  methods: {},
-  created() {
+  props: {
+    title: String,
+    noBorder: Boolean,
+    left: {default: 32},
+    labelColor: {default: "#333"},
+    description: {default: false}, //用于展示则不会又红星,会把标签的内间距去掉
+    activeStep: {default: 1}//用于步骤组件的当前步数
+  },
+  data() {
+    return {
+      items: []
+    }
   }
 }
 </script>
@@ -20,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>

src/components/AiItem.vue

@@ -1,22 +1,28 @@
 <template>
-  <section class="AiItem" :class="{border}">
+  <section class="AiItem" :class="{border,readonly}">
     <div v-if="topLabel" class="topLabel">
-      <div class="labelPane" flex>
-        <div class="label" :class="{required,labelBold}" v-text="label"/>
-        <slot name="sub" v-if="$scopedSlots.sub"/>
+      <div class="labelPane flex">
+        <slot v-if="$slots.label" name="label"/>
+        <template v-else>
+          <div class="label" :class="{required,labelBold}" :style="{color}" v-text="label"/>
+          <slot name="sub" v-if="$slots.sub"/>
+        </template>
       </div>
-      <div class="content">
-        <slot v-if="$scopedSlots.default"/>
+      <div class="itemContent">
+        <slot v-if="$slots.default"/>
         <div v-else v-text="value"/>
       </div>
     </div>
-    <div v-else class="normal" flex>
-      <div class="fill" flex>
-        <div class="label" :class="{required,labelBold}" v-text="label"/>
-        <slot name="sub" v-if="$scopedSlots.sub"/>
+    <div v-else class="normal flex">
+      <div class="fill flex">
+        <slot v-if="$slots.label" name="label"/>
+        <template v-else>
+          <div class="label" :class="{required,labelBold}" :style="{color}" v-text="label"/>
+          <slot name="sub" v-if="$slots.sub"/>
+        </template>
       </div>
       <div class="flexContent">
-        <slot v-if="$scopedSlots.default"/>
+        <slot v-if="$slots.default"/>
         <div v-else v-text="value"/>
       </div>
     </div>
@@ -26,16 +32,21 @@
 <script>
 export default {
   name: "AiItem",
+  inject: {
+    labelColor: {default: "#333"},
+    description: {default: false}
+  },
   props: {
     value: {default: ""},
     label: {default: ""},
     required: Boolean,
     topLabel: Boolean,
     border: {default: true},
-    labelBold: Boolean
+    labelBold: Boolean,
   },
-  data() {
-    return {}
+  computed: {
+    color: v => v.labelColor,
+    readonly: v => !!v.description
   }
 }
 </script>
@@ -43,7 +54,6 @@ export default {
 <style lang="scss" scoped>
 .AiItem {
   font-family: PingFangSC-Regular, PingFang SC;
-  width: 100%;
 
   &.border {
     .normal {
@@ -63,17 +73,12 @@ export default {
 
     .flexContent {
       max-width: 62vw;
-
-      input {
-        text-align: right;
-      }
     }
   }
 
   .label {
     padding-left: 20px;
     font-weight: 400;
-    color: #333333;
     margin-right: 20px;
     position: relative;
 
@@ -100,7 +105,7 @@ export default {
       margin-bottom: 32px;
     }
 
-    .content {
+    .itemContent {
       padding-left: 20px;
 
       .AiMore > .u-icon {
@@ -108,5 +113,18 @@ export default {
       }
     }
   }
+
+  //展示模式下的特有样式
+  &.readonly {
+    .label, .itemContent {
+      padding-left: 0;
+    }
+  }
+
+  .AiStep:last-of-type {
+    .stepLine {
+      display: none
+    }
+  }
 }
 </style>