Browse Source

fix: step form style

Sendya 6 years ago
parent
commit
ae124896b7

+ 32 - 1
src/views/form/stepForm/Step1.vue

@@ -41,6 +41,14 @@
         <a-button type="primary" @click="nextStep">下一步</a-button>
       </a-form-item>
     </a-form>
+    <a-divider />
+    <div class="step-form-style-desc">
+      <h3>说明</h3>
+      <h4>转账到支付宝账户</h4>
+      <p>如果需要,这里可以放一些关于产品的常见问题说明。如果需要,这里可以放一些关于产品的常见问题说明。如果需要,这里可以放一些关于产品的常见问题说明。</p>
+      <h4>转账到银行卡</h4>
+      <p>如果需要,这里可以放一些关于产品的常见问题说明。如果需要,这里可以放一些关于产品的常见问题说明。如果需要,这里可以放一些关于产品的常见问题说明。</p>
+    </div>
   </div>
 </template>
 
@@ -55,6 +63,29 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="less" scoped>
+.step-form-style-desc {
+  padding: 0 56px;
+  color: rgba(0,0,0,.45);
 
+  h3 {
+    margin: 0 0 12px;
+    color: rgba(0,0,0,.45);
+    font-size: 16px;
+    line-height: 32px;
+  }
+
+  h4 {
+    margin: 0 0 4px;
+    color: rgba(0,0,0,.45);
+    font-size: 14px;
+    line-height: 22px;
+  }
+
+  p {
+    margin-top: 0;
+    margin-bottom: 12px;
+    line-height: 22px;
+  }
+}
 </style>

+ 10 - 1
src/views/form/stepForm/Step2.vue

@@ -38,6 +38,15 @@
       >
         ¥ 5,000.00
       </a-form-item>
+      <a-divider />
+      <a-form-item
+        label="支付密码"
+        :labelCol="{span: 5}"
+        :wrapperCol="{span: 19}"
+        class="stepFormText"
+      >
+        <a-input type="password" style="width: 80%;" value="123456" />
+      </a-form-item>
       <a-form-item :wrapperCol="{span: 19, offset: 5}">
         <a-button :loading="loading" type="primary" @click="nextStep">提交</a-button>
         <a-button style="margin-left: 8px" @click="prevStep">上一步</a-button>
@@ -79,4 +88,4 @@ export default {
     }
   }
 
-</style>
+</style>

+ 2 - 2
src/views/form/stepForm/Step3.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <a-form style="margin: 40px auto 0;">
-      <result title="操作成功" :is-success="true" description="预计两小时内到账">
+      <result title="操作成功" :is-success="true" description="预计两小时内到账" style="max-width: 560px;">
         <div class="information">
           <a-row>
             <a-col :sm="8" :xs="24">付款账户:</a-col>
@@ -47,7 +47,7 @@ export default {
       this.$emit('finish')
     },
     toOrderList () {
-      this.$router.push('/list/query-list')
+      this.$router.push('/list/table-list')
     }
   }
 }