优化PageLayout布局、PageHeader增加logo

chenghx

2018-08-02 0aaf3cf893d80b571d87c996316b6ec82d0a02d3

优化PageLayout布局、PageHeader增加logo

 src/components/dashboard/WorkPlace.vue

@@ -1,13 +1,8 @@
<template>
  <page-layout>
    <div slot="desc" class="desc">
      <div class="avatar">
        <a-avatar size="large" shape="circle" :src="currUser.avatar" />
      </div>
      <div class="content">
        <div class="title">{{currUser.timefix}}，{{currUser.name}}，{{currUser.welcome}}</div>
        <div>{{currUser.position}}</div>
      </div>
  <page-layout :avatar="currUser.avatar">
    <div slot="headerContent" class="content">
      <div class="title">{{currUser.timefix}}，{{currUser.name}}，{{currUser.welcome}}</div>
      <div>{{currUser.position}}</div>
    </div>
    <div slot="extra">
      <a-row>
@@ -25,22 +20,24 @@
    <div>
      <a-row style="margin: 0 -12px">
        <a-col style="padding: 0 12px" :xl="16" :lg="24" :md="24" :sm="24" :xs="24">
          <a-card style="margin-bottom: 24px;" :bordered="false" title="进行中的项目" :body-style="{padding: 0}">
          <a-card :loading="loading" style="margin-bottom: 24px;" :bordered="false" title="进行中的项目" :body-style="{padding: 0}">
            <a slot="extra">全部项目</a>
            <a-card-grid :key="i" v-for="(item, i) in projects">
              <a-card :bordered="false" :body-style="{padding: 0}">
                <a-card-meta :description="item.desc">
                  <div slot="title" class="card-title">
                    <a-avatar size="small" :src="item.logo" />
                    <a>Alipay</a>
            <div>
              <a-card-grid :key="i" v-for="(item, i) in projects">
                <a-card :bordered="false" :body-style="{padding: 0}">
                  <a-card-meta :description="item.desc">
                    <div slot="title" class="card-title">
                      <a-avatar size="small" :src="item.logo" />
                      <a>Alipay</a>
                    </div>
                  </a-card-meta>
                  <div class="project-item">
                    <a href="/#/">科学搬砖组</a>
                    <span class="datetime">9小时前</span>
                  </div>
                </a-card-meta>
                <div class="project-item">
                  <a href="/#/">科学搬砖组</a>
                  <span class="datetime">9小时前</span>
                </div>
              </a-card>
            </a-card-grid>
                </a-card>
              </a-card-grid>
            </div>
          </a-card>
          <a-card title="动态" :bordered="false">
            <a-list>
@@ -52,7 +49,6 @@
                  </div>
                  <div slot="description">9小时前</div>
                </a-list-item-meta>

              </a-list-item>
            </a-list>
          </a-card>
@@ -129,7 +125,8 @@
  data () {
    return {
      currUser: {},
      projects: []
      projects: [],
      loading: true
    }
  },
  mounted () {
@@ -151,6 +148,7 @@
        url: '/project'
      }).then(res => {
        this.projects = res.data
        this.loading = false
      })
    }
  }
@@ -158,30 +156,18 @@
</script>

<style lang="less" scoped>
  .desc{
    display: flex;
    .avatar {
      flex: 0 1 72px;
      margin-bottom: 8px;
      & > span {
        border-radius: 72px;
        display: block;
        width: 72px;
        height: 72px;
      }
    }
    .content {
      position: relative;
      top: 4px;
      flex: 1 1 auto;
      color: rgba(0, 0, 0, 0.45);
      line-height: 22px;
      .title {
        font-size: 20px;
        line-height: 28px;
        font-weight: 500;
        margin-bottom: 12px;
      }
  .content {
    position: relative;
    top: 4px;
    flex: 1 1 auto;
    color: rgba(0, 0, 0, 0.45);
    line-height: 22px;
    margin-left: 24px;
    .title {
      font-size: 20px;
      line-height: 28px;
      font-weight: 500;
      margin-bottom: 12px;
    }
  }
  .card-title {

 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>
    <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>
      <div slot="extra">
        <slot name="extra"></slot>
      </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 @@
  mounted () {
    this.getBreadcrumb()
  },
  beforeUpdate () {
  updated () {
    this.getBreadcrumb()
  },
  methods: {
@@ -44,6 +44,18 @@
}
</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 @@
  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>

 src/components/list/CardList.vue

@@ -52,6 +52,13 @@
  components: {AIcon, AButton, AAvatar, ACardMeta, ACard, AListItem, AList},
  data () {
    return {
      desc: '段落示意：蚂蚁金服务设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态， 提供跨越设计与开发的体验解决方案。',
      linkList: [
        {icon: 'rocket', href: '/#/', title: '快速开始'},
        {icon: 'info-circle-o', href: '/#/', title: '产品简介'},
        {icon: 'file-text', href: '/#/', title: '产品文档'}
      ],
      extraImage: 'https://gw.alipayobjects.com/zos/rmsportal/RzwpdLnhmvDJToTdfDPe.png',
      dataSource
    }
  }

 src/components/list/SearchLayout.vue

@@ -5,7 +5,7 @@
          <a-input-search style="width: 522px" placeholder="请输入..." size="large" enterButton="搜索" />
        </div>
        <div style="padding: 0 24px">
          <a-tabs tabBarStyle="margin: 0">
          <a-tabs :tabBarStyle="{margin: 0}">
            <a-tab-pane tab="文章" key="1"></a-tab-pane>
            <a-tab-pane tab="应用" key="2"></a-tab-pane>
            <a-tab-pane tab="项目" key="3"></a-tab-pane>

 src/components/page/PageHeader.vue

@@ -7,20 +7,30 @@
      </a-breadcrumb>
    </div>
    <div class="detail">
      <h1 v-if="title" class="title">{{title}}</h1>
      <div class="content"><slot name="content"></slot></div>
      <div class="extra"><slot name="extra"></slot></div>
      <div v-if="logo" class="logo"><a-avatar :src="logo" /></div>
      <div class="main">
        <div class="row">
          <h1 v-if="title" class="title">{{title}}</h1>
          <div class="action"><slot name="action"></slot></div>
        </div>
        <div class="row">
          <div class="content"><slot name="content"></slot></div>
          <div class="extra"><slot name="extra"></slot></div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import ABreadcrumb from 'vue-antd-ui/es/breadcrumb'
import AAvatar from 'vue-antd-ui/es/avatar/Avatar'

const ABreadcrumbItem = ABreadcrumb.Item
export default {
  name: 'PageHeader',
  components: {ABreadcrumbItem, ABreadcrumb},
  components: {AAvatar, ABreadcrumbItem, ABreadcrumb},
  props: {
    title: {
      type: String,
@@ -28,6 +38,10 @@
    },
    breadcrumb: {
      type: Array,
      required: false
    },
    logo: {
      type: String,
      required: false
    }
  }
@@ -44,21 +58,44 @@
    }
    .detail{
      display: flex;
      .title{
        font-size: 20px;
        font-weight: 500;
        color: rgba(0,0,0,.85);
      .row {
        display: flex;
        width: 100%;
      }
      .content{
        margin-bottom: 16px;
        flex: auto;
      .logo {
        flex: 0 1 72px;
        margin-bottom: 8px;
        & > span {
          border-radius: 72px;
          display: block;
          width: 72px;
          height: 72px;
        }
      }
      .extra
      {
      .main{
        width: 100%;
        flex: 0 1 auto;
        margin-left: 88px;
        min-width: 450px;
        float: right;
        .title{
          flex: auto;
          font-size: 20px;
          font-weight: 500;
          color: rgba(0,0,0,.85);
        }
        .content{
          margin-bottom: 16px;
          flex: auto;
        }
        .extra{
          flex: 0 1 auto;
          margin-left: 88px;
          min-width: 242px;
          text-align: right;
        }
        .action{
          margin-left: 56px;
          min-width: 266px;
          flex: 0 1 auto;
        }
      }
    }
  }

 src/router/index.js

@@ -18,7 +18,6 @@
import SearchLayout from '@/components/list/SearchLayout'
import ArticleList from '@/components/list/ArticleList'
import WorkPlace from '@/components/dashboard/WorkPlace'
import Radar from '@/components/chart/Radar'

Vue.use(Router)

@@ -85,19 +84,19 @@
        },
        {
          path: '/list/primary',
          name: '标准表格',
          name: '标准列表',
          component: StandardList,
          icon: 'none'
        },
        {
          path: '/list/card',
          name: '卡片表格',
          name: '卡片列表',
          component: CardList,
          icon: 'none'
        },
        {
          path: '/list/search',
          name: '搜索表格',
          name: '搜索列表',
          component: SearchLayout,
          icon: 'none',
          children: [