From 6208acc47736aa5266206904cbb9381a90c6bd8a Mon Sep 17 00:00:00 2001
From: iczer <1126263215@qq.com>
Date: Sun, 28 Jun 2020 20:24:08 +0800
Subject: [PATCH] chore: update layout component's style to solve the problem
 of style dislocation at mobile device; :dog:

---
 src/components/page/PageHeader.vue          | 37 +++----------
 src/components/tool/AStepItem.vue           | 11 +++-
 src/components/tool/HeadInfo.vue            |  6 +-
 src/layouts/PageView.vue                    |  4 +-
 src/pages/dashboard/workplace/WorkPlace.vue |  3 -
 src/pages/detail/AdvancedDetail.vue         | 61 +++++++--------------
 src/pages/list/StandardList.vue             | 10 +---
 7 files changed, 47 insertions(+), 85 deletions(-)

diff --git a/src/components/page/PageHeader.vue b/src/components/page/PageHeader.vue
index 59d4aea..a8397b1 100644
--- a/src/components/page/PageHeader.vue
+++ b/src/components/page/PageHeader.vue
@@ -10,15 +10,16 @@
         </a-breadcrumb>
       </div>
       <div class="detail">
-        <div v-if="avatar" class="avatar"><a-avatar :src="avatar" /></div>
         <div class="main">
           <div class="row">
-            <img v-if="logo" :src="logo" class="logo" />
             <h1 v-if="title" class="title">{{title}}</h1>
             <div class="action"><slot name="action"></slot></div>
           </div>
           <div class="row">
-            <div v-if="this.$slots.content" class="content"><slot name="content"></slot></div>
+            <div v-if="this.$slots.content" class="content">
+              <div v-if="avatar" class="avatar"><a-avatar :src="avatar" :size="72" /></div>
+              <slot name="content"></slot>
+            </div>
             <div v-if="this.$slots.extra" class="extra"><slot name="extra"></slot></div>
           </div>
         </div>
@@ -82,45 +83,25 @@ export default {
         display: flex;
         .row {
           display: flex;
+          flex-wrap: wrap;
+          justify-content: space-between;
         }
         .avatar {
-          flex: 0 1 72px;
-          margin:0 24px 8px 0;
-          & > span {
-            border-radius: 72px;
-            display: block;
-            width: 72px;
-            height: 72px;
-          }
+          margin:0 24px 0 0;
         }
         .main{
           width: 100%;
           .title{
-            flex: auto;
             font-size: 20px;
-            font-weight: 500;
             color: rgba(0,0,0,.85);
             margin-bottom: 16px;
           }
-          .logo{
-            width: 28px;
-            height: 28px;
-            border-radius: 4px;
-            margin-right: 16px;
-          }
           .content{
-            flex: 1;
+            display: flex;
+            flex-wrap: wrap;
           }
           .extra{
             display: flex;
-            margin-left: 88px;
-            min-width: 420px;
-          }
-          .action{
-            margin-left: 56px;
-            min-width: 266px;
-            flex: 0 1 auto;
-            text-align: right;
           }
         }
       }
diff --git a/src/components/tool/AStepItem.vue b/src/components/tool/AStepItem.vue
index fab269b..b8ef378 100644
--- a/src/components/tool/AStepItem.vue
+++ b/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])]
     )
   }
diff --git a/src/components/tool/HeadInfo.vue b/src/components/tool/HeadInfo.vue
index 6f65ee6..d46872e 100644
--- a/src/components/tool/HeadInfo.vue
+++ b/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;
diff --git a/src/layouts/PageView.vue b/src/layouts/PageView.vue
index 0bb5d79..6f3ae17 100644
--- a/src/layouts/PageView.vue
+++ b/src/layouts/PageView.vue
@@ -1,6 +1,6 @@
 <template>
   <page-layout :desc="desc" :title="title" :linkList="linkList">
-    <div slot="extra" class="extraImg">
+    <div v-if="this.extraImage && !isMobile" slot="extra" class="extraImg">
       <img :src="extraImage"/>
     </div>
     <page-toggle-transition :animate="animate.name" :direction="animate.direction">
@@ -33,7 +33,7 @@ export default {
       let key = this.path.substring(1).replace(new RegExp('/', 'g'), '.') + '.name'
       return this.$t(key)
     },
-    ...mapState('setting', ['multiPage', 'animate', 'routesI18n'])
+    ...mapState('setting', ['isMobile', 'multiPage', 'animate', 'routesI18n'])
   },
   created() {
     let i18n = this.routesI18n
diff --git a/src/pages/dashboard/workplace/WorkPlace.vue b/src/pages/dashboard/workplace/WorkPlace.vue
index b9ff0a5..4a39491 100644
--- a/src/pages/dashboard/workplace/WorkPlace.vue
+++ b/src/pages/dashboard/workplace/WorkPlace.vue
@@ -224,7 +224,4 @@ export default {
       }
     }
   }
-  .head-info{
-    display: inline-block;
-  }
 </style>
diff --git a/src/pages/detail/AdvancedDetail.vue b/src/pages/detail/AdvancedDetail.vue
index f3c7c24..eadc9c6 100644
--- a/src/pages/detail/AdvancedDetail.vue
+++ b/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>
diff --git a/src/pages/list/StandardList.vue b/src/pages/list/StandardList.vue
index c44c1ce..0f30fc9 100644
--- a/src/pages/list/StandardList.vue
+++ b/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"