优化PageLayout布局、PageHeader增加logo

src/components/layout/PageLayout.vue

@@ -1,17 +1,16 @@
 <template>
   <div style="margin: -24px -24px 0px">
-    <page-header :breadcrumb="breadcrumb" :title="title">
-      <div slot="content">
-        <template v-if="this.$slots.desc">
-          <slot name="desc"></slot>
-        </template>
-        <template v-else>
-          {{desc}}
-        </template>
-      </div>
-      <div slot="extra">
-        <slot name="extra"></slot>
+    <page-header :breadcrumb="breadcrumb" :title="title" :logo="avatar">
+      <slot slot="content" name="headerContent"></slot>
+      <div slot="content" v-if="!this.$slots.headerContent">
+        <p style="font-size: 14px;line-height: 1.5;color: rgba(0,0,0,.65)">{{desc}}</p>
+        <div class="link">
+          <template  v-for="(link, index) in linkList">
+            <a :key="index" :href="link.href"><a-icon :type="link.icon" />{{link.title}}</a>
+          </template>
+        </div>
       </div>
+      <slot slot="extra" name="extra"></slot>
     </page-header>
     <div ref="page" style="margin: 24px 24px 0px">
       <slot ></slot>
@@ -21,10 +20,11 @@
 
 <script>
 import PageHeader from '../page/PageHeader'
+import AIcon from 'vue-antd-ui/es/icon/icon'
 export default {
   name: 'PageLayout',
-  components: {PageHeader},
-  props: ['desc', 'title'],
+  components: {AIcon, PageHeader},
+  props: ['desc', 'title', 'avatar', 'linkList', 'extraImage'],
   data () {
     return {
       breadcrumb: []
@@ -33,7 +33,7 @@ export default {
   mounted () {
     this.getBreadcrumb()
   },
-  beforeUpdate () {
+  updated () {
     this.getBreadcrumb()
   },
   methods: {
@@ -44,6 +44,18 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="less" scoped>
+  .link{
+    margin-top: 16px;
+    line-height: 24px;
+    a{
+      font-size: 14px;
+      margin-right: 32px;
+      i{
+        font-size: 22px;
+        margin-right: 8px;
+      }
+    }
+  }
 
 </style>

src/components/layout/PageView.vue

@@ -1,5 +1,8 @@
 <template>
-  <page-layout :desc="desc">
+  <page-layout :desc="desc" :title="title" :linkList="linkList">
+    <div slot="extra" class="extraImg">
+      <img :src="extraImage"/>
+    </div>
     <router-view  ref="page"/>
   </page-layout>
 </template>
@@ -13,24 +16,36 @@ export default {
   data () {
     return {
       title: '',
-      desc: ''
+      desc: '',
+      linkList: [],
+      extraImage: ''
     }
   },
   mounted () {
     this.getPageHeaderInfo()
   },
-  beforeUpdate () {
+  updated () {
     this.getPageHeaderInfo()
   },
   methods: {
     getPageHeaderInfo () {
       this.title = this.$route.name
-      this.desc = this.$refs.page.desc
+      const page = this.$refs.page
+      this.desc = page.desc
+      this.linkList = page.linkList
+      this.extraImage = page.extraImage
     }
   }
 }
 </script>
 
-<style scoped>
-
+<style lang="less" scoped>
+  .extraImg{
+    margin-top: -60px;
+    text-align: center;
+    width: 195px;
+    img{
+      width: 100%;
+    }
+  }
 </style>