blackteay/vue-antd-admin
1
0
Fork 0
mirror of https://github.com/iczer/vue-antd-admin synced 2025-04-05 07:27:06 +08:00
Code Issues Projects Releases Wiki Activity

优化PageLayout布局、PageHeader增加logo

Browse Source
This commit is contained in:
chenghx 2018-08-02 15:27:22 +08:00
parent 82ca2d4f68
commit 0aaf3cf893
7 changed files with 147 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
src/components/dashboard/WorkPlace.vue
View File

@ -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 @@ export default {
data () {
return {
currUser: {},
projects: []
projects: [],
loading: true
}
},
mounted () {
@ -151,6 +148,7 @@ export default {
url: '/project'
}).then(res => {
this.projects = res.data
this.loading = false
})
}
}
@ -158,30 +156,18 @@ export default {
</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 {

42
src/components/layout/PageLayout.vue
View File

@ -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>

27
src/components/layout/PageView.vue
View File

@ -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>

7
src/components/list/CardList.vue
View File

@ -52,6 +52,13 @@ export default {
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
}
}

2
src/components/list/SearchLayout.vue
View File

@ -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>

69
src/components/page/PageHeader.vue
View File

@ -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,
@ -29,6 +39,10 @@ export default {
breadcrumb: {
type: Array,
required: false
},
logo: {
type: String,
required: false
}
}
}
@ -44,21 +58,44 @@ export default {
}
.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;
}
}
}
}

7
src/router/index.js
View File

@ -18,7 +18,6 @@ import CardList from '@/components/list/CardList'
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 @@ export default new Router({
},
{
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: [