chore: update layout component's style to solve the problem of style dislocation at mobile device; 🐶

src/components/tool/AStepItem.vue

@@ -12,10 +12,19 @@
 <script>
 const Group = {
   name: 'AStepItemGroup',
+  props: {
+    align: {
+      type: String,
+      default: 'center',
+      validator(value) {
+        return ['left', 'center', 'right'].indexOf(value) != -1
+      }
+    }
+  },
   render (h) {
     return h(
       'div',
-      {attrs: {style: 'text-align: center; margin-top: 8px'}},
+      {attrs: {style: `text-align: ${this.align}; margin-top: 8px`}},
       [h('div', {attrs: {style: 'text-align: left; display: inline-block;'}}, [this.$slots.default])]
     )
   }

src/components/tool/HeadInfo.vue

@@ -15,8 +15,10 @@ export default {
 <style lang="less" scoped>
   .head-info{
     text-align: center;
-    padding: 0 32px;
-    width: 100%;
+    padding: 0 24px;
+    flex-grow: 1;
+    flex-shrink: 0;
+    align-self: center;
     span{
       color: rgba(0,0,0,.45);
       display: inline-block;