fix: step form style

src/views/form/stepForm/Step1.vue

@@ -3,8 +3,8 @@
     <a-form style="max-width: 500px; margin: 40px auto 0;">
       <a-form-item
         label="付款账户"
-        :labelCol="{span: 5}"
-        :wrapperCol="{span: 19}"
+        :labelCol="labelCol"
+        :wrapperCol="wrapperCol"
       >
         <a-select value="1" placeholder="ant-design@alipay.com">
           <a-select-option value="1">ant-design@alipay.com</a-select-option>
@@ -12,8 +12,8 @@
       </a-form-item>
       <a-form-item
         label="收款账户"
-        :labelCol="{span: 5}"
-        :wrapperCol="{span: 19}"
+        :labelCol="labelCol"
+        :wrapperCol="wrapperCol"
       >
         <a-input-group :compact="true" style="display: inline-block; vertical-align: middle">
           <a-select defaultValue="alipay" style="width: 100px">
@@ -25,15 +25,15 @@
       </a-form-item>
       <a-form-item
         label="收款人姓名"
-        :labelCol="{span: 5}"
-        :wrapperCol="{span: 19}"
+        :labelCol="labelCol"
+        :wrapperCol="wrapperCol"
       >
         <a-input value="Alex" />
       </a-form-item>
       <a-form-item
         label="转账金额"
-        :labelCol="{span: 5}"
-        :wrapperCol="{span: 19}"
+        :labelCol="labelCol"
+        :wrapperCol="wrapperCol"
       >
         <a-input prefix="￥" value="5000" />
       </a-form-item>
@@ -55,6 +55,12 @@
 <script>
 export default {
   name: 'Step1',
+  data () {
+    return {
+      labelCol: { lg: { span: 5 }, sm: { span: 5 } },
+      wrapperCol: { lg: { span: 19 }, sm: { span: 19 } }
+    }
+  },
   methods: {
     nextStep () {
       this.$emit('nextStep')

src/views/form/stepForm/Step2.vue

@@ -1,91 +1,94 @@
-<template>
-  <div>
-    <a-form style="max-width: 500px; margin: 40px auto 0;">
-      <a-alert
-        :closable="true"
-        message="确认转账后，资金将直接打入对方账户，无法退回。"
-        style="margin-bottom: 24px;"
-      />
-      <a-form-item
-        label="付款账户"
-        :labelCol="{span: 5}"
-        :wrapperCol="{span: 19}"
-        class="stepFormText"
-      >
-        ant-design@alipay.com
-      </a-form-item>
-      <a-form-item
-        label="收款账户"
-        :labelCol="{span: 5}"
-        :wrapperCol="{span: 19}"
-        class="stepFormText"
-      >
-        test@example.com
-      </a-form-item>
-      <a-form-item
-        label="收款人姓名"
-        :labelCol="{span: 5}"
-        :wrapperCol="{span: 19}"
-        class="stepFormText"
-      >
-        Alex
-      </a-form-item>
-      <a-form-item
-        label="转账金额"
-        :labelCol="{span: 5}"
-        :wrapperCol="{span: 19}"
-        class="stepFormText"
-      >
-        ￥ 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>
-      </a-form-item>
-    </a-form>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'Step2',
-  data () {
-    return {
-      loading: false
-    }
-  },
-  methods: {
-    nextStep () {
-      const that = this
-      that.loading = true
-      setTimeout(function () {
-        that.$emit('nextStep')
-      }, 1500)
-    },
-    prevStep () {
-      this.$emit('prevStep')
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-  .stepFormText {
-    margin-bottom: 24px;
-
-    .ant-form-item-label,
-    .ant-form-item-control {
-      line-height: 22px;
-    }
-  }
-
-</style>
+<template>
+  <div>
+    <a-form style="max-width: 500px; margin: 40px auto 0;">
+      <a-alert
+        :closable="true"
+        message="确认转账后，资金将直接打入对方账户，无法退回。"
+        style="margin-bottom: 24px;"
+      />
+      <a-form-item
+        label="付款账户"
+        :labelCol="labelCol"
+        :wrapperCol="wrapperCol"
+        class="stepFormText"
+      >
+        ant-design@alipay.com
+      </a-form-item>
+      <a-form-item
+        label="收款账户"
+        :labelCol="labelCol"
+        :wrapperCol="wrapperCol"
+        class="stepFormText"
+      >
+        test@example.com
+      </a-form-item>
+      <a-form-item
+        label="收款人姓名"
+        :labelCol="labelCol"
+        :wrapperCol="wrapperCol"
+        class="stepFormText"
+      >
+        Alex
+      </a-form-item>
+      <a-form-item
+        label="转账金额"
+        :labelCol="labelCol"
+        :wrapperCol="wrapperCol"
+        class="stepFormText"
+      >
+        ￥ 5,000.00
+      </a-form-item>
+      <a-divider />
+      <a-form-item
+        label="支付密码"
+        :labelCol="labelCol"
+        :wrapperCol="wrapperCol"
+        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>
+      </a-form-item>
+    </a-form>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Step2',
+  data () {
+    return {
+      labelCol: { lg: { span: 5 }, sm: { span: 5 } },
+      wrapperCol: { lg: { span: 19 }, sm: { span: 19 } },
+
+      loading: false
+    }
+  },
+  methods: {
+    nextStep () {
+      const that = this
+      that.loading = true
+      setTimeout(function () {
+        that.$emit('nextStep')
+      }, 1500)
+    },
+    prevStep () {
+      this.$emit('prevStep')
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .stepFormText {
+    margin-bottom: 24px;
+
+    .ant-form-item-label,
+    .ant-form-item-control {
+      line-height: 22px;
+    }
+  }
+
+</style>