新增Result

src/components/form/Step3.vue

@@ -1,10 +1,8 @@
 <template>
   <div>
     <a-form style="max-width: 500px; margin: 40px auto 0;">
-      <a-form-item :wrapperCol="{span: 15, offset: 9}">
-        success
-      </a-form-item>
-      <a-form-item :wrapperCol="{span: 19, offset: 5}">
+      <result title="支付完成" :is-success="true" />
+      <a-form-item :wrapperCol="{span: 16, offset: 8}">
         <a-button type="primary" @click="doOnceAgin">再转一笔</a-button>
         <a-button style="margin-left: 8px">查看账单</a-button>
       </a-form-item>
@@ -16,9 +14,10 @@
 import AForm from 'vue-antd-ui/es/form/Form'
 import AFormItem from 'vue-antd-ui/es/form/FormItem'
 import AButton from 'vue-antd-ui/es/button/button'
+import Result from '../result/Result'
 export default {
   name: 'Step3',
-  components: {AButton, AFormItem, AForm},
+  components: {Result, AButton, AFormItem, AForm},
   methods: {
     doOnceAgin () {
       this.$emit('finish')

src/components/result/Result.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="result">
+    <div >
+      <a-icon :class="[isSuccess ? 'success' : 'error' ,'icon']" :type="isSuccess ? 'check-circle' : 'close-circle'" />
+    </div>
+    <div class="title">{{title}}</div>
+    <div>
+      <slot name="content"></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import AIcon from 'vue-antd-ui/es/icon/icon'
+export default {
+  name: 'Result',
+  components: {AIcon},
+  props: ['isSuccess', 'title']
+}
+</script>
+
+<style lang="less" scoped>
+  .result{
+    text-align: center;
+    text-align: center;
+    width: 72%;
+    margin: 0 auto;
+    .icon{
+      font-size: 72px;
+      line-height: 72px;
+      margin-bottom: 24px;
+    }
+    .success {
+      color: green;
+    }
+    .error {
+      color: red;
+    }
+    .title{
+      font-size: 24px;
+      color: rgba(0,0,0,.85);
+      font-weight: 500;
+      line-height: 32px;
+      margin-bottom: 16px;
+    }
+  }
+
+</style>