From b8db6b49b45c7115090a795e86f4f0f3e2feda7c Mon Sep 17 00:00:00 2001
From: iczer <1126263215@qq.com>
Date: Thu, 26 Jul 2018 23:22:14 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9EGloablFooter=E3=80=81?=
 =?UTF-8?q?=E6=A0=87=E5=87=86=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/layout/CommonPageLayout.vue |  36 ++++++
 src/components/layout/GloablFooter.vue     |  43 +++++++
 src/components/layout/GloablLayout.vue     |   6 +-
 src/components/list/StandardList.vue       | 140 +++++++++++++++++++++
 src/components/tool/HeadInfo.vue           |  42 +++++++
 src/router/index.js                        |  10 +-
 6 files changed, 272 insertions(+), 5 deletions(-)
 create mode 100644 src/components/layout/CommonPageLayout.vue
 create mode 100644 src/components/layout/GloablFooter.vue
 create mode 100644 src/components/list/StandardList.vue
 create mode 100644 src/components/tool/HeadInfo.vue

diff --git a/src/components/layout/CommonPageLayout.vue b/src/components/layout/CommonPageLayout.vue
new file mode 100644
index 0000000..4ea20de
--- /dev/null
+++ b/src/components/layout/CommonPageLayout.vue
@@ -0,0 +1,36 @@
+<template>
+  <div style="margin: -24px -24px 0px">
+    <page-header :breadcrumb="breadcrumb"/>
+    <div style="margin: 24px 24px 0px">
+      <router-view  ref="page"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import PageHeader from '../page/PageHeader'
+export default {
+  name: 'CommonPageLayout',
+  components: {PageHeader},
+  data () {
+    return {
+      breadcrumb: []
+    }
+  },
+  mounted () {
+    this.getPageHeaderInfo()
+  },
+  beforeUpdate () {
+    this.getPageHeaderInfo()
+  },
+  methods: {
+    getPageHeaderInfo () {
+      this.breadcrumb = this.$route.matched
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/layout/GloablFooter.vue b/src/components/layout/GloablFooter.vue
new file mode 100644
index 0000000..dd586db
--- /dev/null
+++ b/src/components/layout/GloablFooter.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="footer">
+    <div class="links">
+      <a>Pro首页</a>
+      <a><a-icon type="github" /></a>
+      <a>Ant Design</a>
+    </div>
+    <div class="copyright">
+      Copyright<a-icon type="copyright" />2018 XXXXXXXXXXXXXXXXXX出品
+    </div>
+  </div>
+</template>
+
+<script>
+import AIcon from 'vue-antd-ui/es/icon/icon'
+export default {
+  name: 'GloablFooter',
+  components: {AIcon}
+}
+</script>
+
+<style lang="less" scoped>
+  .footer{
+    padding: 0 16px;
+    margin: 48px 0 24px;
+    text-align: center;
+    .copyright{
+      color: rgba(0,0,0,.45);
+      font-size: 14px;
+    }
+    .links{
+      margin-bottom: 8px;
+      a:not(:last-child) {
+        margin-right: 40px;
+      }
+      a{
+        color: rgba(0,0,0,.45);
+        -webkit-transition: all .3s;
+        transition: all .3s;
+      }
+    }
+  }
+</style>
diff --git a/src/components/layout/GloablLayout.vue b/src/components/layout/GloablLayout.vue
index cca99ed..2c80266 100644
--- a/src/components/layout/GloablLayout.vue
+++ b/src/components/layout/GloablLayout.vue
@@ -14,7 +14,9 @@
       <a-layout-content :style="{minHeight: minHeight, margin: '24px 24px 0'}">
         <slot></slot>
       </a-layout-content>
-      <a-layout-footer></a-layout-footer>
+      <a-layout-footer style="padding: 0px">
+        <gloabl-footer />
+      </a-layout-footer>
     </a-layout>
   </a-layout>
 </template>
@@ -24,6 +26,7 @@ import ALayout from 'vue-antd-ui/es/layout'
 import GloablHeader from './GloablHeader'
 import AIcon from 'vue-antd-ui/es/icon/icon'
 import IMenu from '../menu/menu'
+import GloablFooter from './GloablFooter'
 
 const ALayoutSider = ALayout.Sider
 const ALayoutHeader = ALayout.Header
@@ -36,6 +39,7 @@ let menuData = []
 export default {
   name: 'GloablLayout',
   components: {
+    GloablFooter,
     AIcon,
     GloablHeader,
     ALayout,
diff --git a/src/components/list/StandardList.vue b/src/components/list/StandardList.vue
new file mode 100644
index 0000000..fecfcf6
--- /dev/null
+++ b/src/components/list/StandardList.vue
@@ -0,0 +1,140 @@
+<template>
+  <div>
+    <a-card :bordered="false">
+      <a-row>
+        <a-col :sm="8" :xs="24">
+          <head-info title="我的待办" content="8个任务" bordered/>
+        </a-col>
+        <a-col :sm="8" :xs="24">
+          <head-info title="本周任务平均处理时间" content="32分钟" bordered/>
+        </a-col>
+        <a-col :sm="8" :xs="24">
+          <head-info title="本周完成任务数" content="24个"/>
+        </a-col>
+      </a-row>
+    </a-card>
+    <a-card
+      style="margin-top: 24px"
+      :bordered="false"
+      title="标准列表"
+    >
+      <div slot="extra">
+        <a-radio-group>
+          <a-radio-button>全部</a-radio-button>
+          <a-radio-button>进行中</a-radio-button>
+          <a-radio-button>等待中</a-radio-button>
+        </a-radio-group>
+        <a-input-search style="margin-left: 16px; width: 272px;" />
+      </div>
+      <a-button type="dashed" style="width: 100%" icon="plus">添加</a-button>
+      <a-list size="large" :pagination="{showSizeChanger: true, showQuickJumper: true, pageSize: 5, total: 50}">
+        <a-list-item :key="i" v-for="i in 5">
+          <a-list-item-meta
+            description="那是一种内在的东西， 他们到达不了，也无法触及的"
+          >
+            <a-avatar slot="avatar" size="large" shape="square" src="https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png"/>
+            <a slot="title">Alipay</a>
+          </a-list-item-meta>
+          <div slot="actions">
+            <a>编辑</a>
+          </div>
+          <div slot="actions">
+            <a-dropdown>
+              <div slot="overlay">
+                <a-menu>
+                  <a-menu-item><a>编辑</a></a-menu-item>
+                  <a-menu-item><a>删除</a></a-menu-item>
+                </a-menu>
+              </div>
+              <a>更多<a-icon type="down"/></a>
+            </a-dropdown>
+          </div>
+          <div class="list-content">
+            <div class="list-content-item">
+              <span>Owner</span>
+              <p>付晓晓</p>
+            </div>
+            <div class="list-content-item">
+              <span>开始时间</span>
+              <p>2018-07-26 22:44</p>
+            </div>
+            <div class="list-content-item">
+              <a-progress :percent="80" style="width: 180px" />
+            </div>
+          </div>
+        </a-list-item>
+      </a-list>
+    </a-card>
+  </div>
+</template>
+
+<script>
+import ACard from 'vue-antd-ui/es/card/Card'
+import ARow from 'vue-antd-ui/es/grid/Row'
+import ACol from 'vue-antd-ui/es/grid/Col'
+import HeadInfo from '../tool/HeadInfo'
+import AButton from 'vue-antd-ui/es/button/button'
+import AList from 'vue-antd-ui/es/list/index'
+import AListItem from 'vue-antd-ui/es/list/Item'
+import AAvatar from 'vue-antd-ui/es/avatar/Avatar'
+import AProgress from 'vue-antd-ui/es/progress'
+import ADropdown from 'vue-antd-ui/es/dropdown'
+import AMenu from 'vue-antd-ui/es/menu/index'
+import AIcon from 'vue-antd-ui/es/icon/icon'
+import AButtonGroup from 'vue-antd-ui/es/button/button-group'
+import AInput from 'vue-antd-ui/es/input/Input'
+import AInputSearch from 'vue-antd-ui/es/input/Search'
+import ARadioGroup from 'vue-antd-ui/es/radio/Group'
+import ARadio from 'vue-antd-ui/es/radio'
+
+const AListItemMeta = AListItem.Meta
+const AMenuItem = AMenu.Item
+const ARadioButton = ARadio.Button
+export default {
+  name: 'StandardList',
+  components: {
+    ARadioButton,
+    ARadio,
+    ARadioGroup,
+    AInputSearch,
+    AInput,
+    AButtonGroup,
+    AIcon,
+    AMenuItem,
+    AMenu,
+    ADropdown,
+    AProgress,
+    AAvatar,
+    AListItemMeta,
+    AListItem,
+    AList,
+    AButton,
+    HeadInfo,
+    ACol,
+    ARow,
+    ACard}
+}
+</script>
+
+<style lang="less" scoped>
+  .ant-avatar-lg{
+    width: 48px;
+    height: 48px;
+    line-height: 48px;
+  }
+  .list-content-item{
+    color: rgba(0,0,0,.45);
+    display: inline-block;
+    vertical-align: middle;
+    font-size: 14px;
+    margin-left: 40px;
+    span{
+      line-height: 20px;
+    }
+    p{
+      margin-top: 4px;
+      margin-bottom: 0;
+      line-height: 22px;
+    }
+  }
+</style>
diff --git a/src/components/tool/HeadInfo.vue b/src/components/tool/HeadInfo.vue
new file mode 100644
index 0000000..7ae8456
--- /dev/null
+++ b/src/components/tool/HeadInfo.vue
@@ -0,0 +1,42 @@
+<template>
+  <div class="head-info">
+    <span>{{title}}</span>
+    <p>{{content}}</p>
+    <em v-if="bordered" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HeadInfo',
+  props: ['title', 'content', 'bordered']
+}
+</script>
+
+<style lang="less" scoped>
+  .head-info{
+    position: relative;
+    text-align: center;
+  span{
+    color: rgba(0,0,0,.45);
+    display: inline-block;
+    font-size: 14px;
+    line-height: 22px;
+    margin-bottom: 4px;
+  };
+  p{
+    color: rgba(0,0,0,.85);
+    font-size: 24px;
+    line-height: 32px;
+    margin: 0;
+  };
+  em{
+    background-color: #e8e8e8;
+    position: absolute;
+    height: 56px;
+    width: 1px;
+    top: 0;
+    right: 0;
+  }
+  }
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index a08aaf3..a33371d 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -6,12 +6,14 @@ import NotFound from '@/components/exception/404'
 import NotPermit from '@/components/exception/403'
 import ServerError from '@/components/exception/500'
 import PageLayout from '@/components/layout/PageLayout'
+import CommonPageLayout from '@/components/layout/CommonPageLayout'
 import BasicForm from '@/components/form/BasicForm'
 import StepForm from '@/components/form/stepForm/StepForm'
 import AdvancedForm from '@/components/form/advancedForm/AdvancedForm'
 import Success from '@/components/result/Success'
 import Error from '@/components/result/Error'
 import QueryList from '@/components/list/QueryList'
+import StandardList from '@/components/list/StandardList'
 
 Vue.use(Router)
 
@@ -52,7 +54,7 @@ export default new Router({
     {
       path: '/list',
       name: '列表页',
-      component: PageLayout,
+      component: CommonPageLayout,
       icon: 'table',
       children: [
         {
@@ -64,7 +66,7 @@ export default new Router({
         {
           path: '/form/primary',
           name: '标准表格',
-          component: NotFound,
+          component: StandardList,
           icon: 'none'
         },
         {
@@ -85,7 +87,7 @@ export default new Router({
       path: '/detail',
       name: '详情页',
       icon: 'profile',
-      component: PageLayout,
+      component: CommonPageLayout,
       children: [
         {
           path: '/detail/basic',
@@ -105,7 +107,7 @@ export default new Router({
       path: '/result',
       name: '结果页',
       icon: 'check-circle-o',
-      component: PageLayout,
+      component: CommonPageLayout,
       children: [
         {
           path: '/result/success',