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

src/pages/dashboard/workplace/WorkPlace.vue

@@ -224,7 +224,4 @@ export default {
       }
     }
   }
-  .head-info{
-    display: inline-block;
-  }
 </style>

src/pages/detail/AdvancedDetail.vue

@@ -1,6 +1,6 @@
 <template>
   <page-layout title="单号：234231029431" logo="https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png">
-    <detail-list size="small" :col="2" slot="headerContent" style="margin-left: 44px;">
+    <detail-list size="small" :col="2" slot="headerContent">
       <detail-list-item term="创建人">曲丽丽</detail-list-item>
       <detail-list-item term="订购产品">XX服务</detail-list-item>
       <detail-list-item term="创建时间">2018-08-07</detail-list-item>
@@ -8,16 +8,10 @@
       <detail-list-item term="生效日期">2018-08-07 ~ 2018-12-11</detail-list-item>
       <detail-list-item term="备注">请于两个工作日内确认</detail-list-item>
     </detail-list>
-    <a-row style="text-align: right;width: 100%;" slot="extra">
-      <a-col :xs="24" :sm="12">
-        <div class="text">状态</div>
-        <div class="heading">待审批</div>
-      </a-col>
-      <a-col :xs="24" :sm="12">
-        <div class="text">订单金额</div>
-        <div class="heading">¥ 568.08</div>
-      </a-col>
-    </a-row>
+    <template slot="extra">
+      <head-info title="状态" content="待审批" />
+      <head-info title="订单金额" content="¥ 568.08" />
+    </template>
     <template slot="action">
       <a-button-group style="margin-right: 8px;">
         <a-button>操作</a-button>
@@ -27,15 +21,15 @@
       <a-button type="primary" >主操作</a-button>
     </template>
     <a-card :bordered="false" title="流程进度">
-      <a-steps :current="1" progressDot>
+      <a-steps :current="1" progress-dot :direction="isMobile ? 'vertical' : 'horizontal'">
         <a-step title="创建项目">
-          <a-step-item-group slot="description">
+          <a-step-item-group :align="isMobile ? 'left' : 'center'" slot="description">
             <a-step-item link="/dashboard/workplace" title="曲丽丽" icon="dingding-o"/>
             <a-step-item title="2016-12-12 12:32"/>
           </a-step-item-group>
         </a-step>
         <a-step title="部门初审">
-          <a-step-item-group slot="description">
+          <a-step-item-group :align="isMobile ? 'left' : 'center'" slot="description">
             <a-step-item link="/form/step" title="周毛毛" icon="dingding-o" />
             <a-step-item link="/result/success" title="催一下" icon="bell"/>
           </a-step-item-group>
@@ -89,7 +83,7 @@
       </a-card>
     </a-card>
     <a-card style="margin-top: 24px" :bordered="false" title="用户近半年来电记录">
-      <div class="nodata"><a-icon type="frown-o"/>暂无数据</div>
+      <a-list></a-list>
     </a-card>
     <a-card
       style="margin-top: 24px"
@@ -121,10 +115,13 @@
 </template>
 
 <script>
-import PageLayout from '../../layouts/PageLayout'
-import DetailList from '../../components/tool/DetailList'
-import AStepItem from '../../components/tool/AStepItem'
-import {operation1, operation2, operation3, operationColumns} from '../../mock/common/tableData'
+import PageLayout from '@/layouts/PageLayout'
+import DetailList from '@/components/tool/DetailList'
+import AStepItem from '@/components/tool/AStepItem'
+import {operation1, operation2, operation3, operationColumns} from '@/mock/common/tableData'
+import {mapState} from 'vuex'
+import HeadInfo from '@/components/tool/HeadInfo';
+
 
 const DetailListItem = DetailList.Item
 const AStepItemGroup = AStepItem.Group
@@ -146,6 +143,7 @@ const tabList = [
 
 export default {
   name: 'AdvancedDetail',
+  components: {HeadInfo, AStepItemGroup, AStepItem, DetailListItem, DetailList, PageLayout},
   data () {
     return {
       tabList,
@@ -156,35 +154,16 @@ export default {
       activeTabKey: '2'
     }
   },
+  computed: {
+    ...mapState('setting', ['isMobile'])
+  },
   methods: {
     onTabChange (key) {
       console.log(key)
     }
   },
-  components: {AStepItemGroup, AStepItem, DetailListItem, DetailList, PageLayout}
 }
 </script>
 
 <style lang="less" scoped>
-  .text{
-    color: rgba(0,0,0,.45);
-  }
-  .heading{
-    color: rgba(0,0,0,.85);
-    font-size: 28px;
-  }
-  .nodata{
-    color: rgba(0,0,0,.25);
-    text-align: center;
-    line-height: 64px;
-    font-size: 16px;
-    & :global{
-      i {
-        font-size: 24px;
-        margin-right: 16px;
-        position: relative;
-        top: 3px;
-      }
-    }
-  }
 </style>

src/pages/list/StandardList.vue

@@ -1,17 +1,11 @@
 <template>
   <div>
     <a-card :bordered="false">
-      <a-row>
-        <a-col :sm="8" :xs="24" class="split-right">
+      <div style="display: flex; flex-wrap: wrap">
           <head-info title="我的待办" content="8个任务" :bordered="true"/>
-        </a-col>
-        <a-col :sm="8" :xs="24" class="split-right">
           <head-info title="本周任务平均处理时间" content="32分钟" :bordered="true"/>
-        </a-col>
-        <a-col :sm="8" :xs="24" class="split-right">
           <head-info title="本周完成任务数" content="24个"/>
-        </a-col>
-      </a-row>
+      </div>
     </a-card>
     <a-card
       style="margin-top: 24px"