mirror of
https://github.com/iczer/vue-antd-admin
synced 2025-04-05 19:41:37 +08:00
新增GloablFooter、标准列表
This commit is contained in:
iczer
parent
17e9e07162
commit
b8db6b49b4
36
src/components/layout/CommonPageLayout.vue
Normal file
36
src/components/layout/CommonPageLayout.vue
Normal file
@ -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>
|
||||
43
src/components/layout/GloablFooter.vue
Normal file
43
src/components/layout/GloablFooter.vue
Normal file
@ -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>
|
||||
@ -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,
|
||||
|
||||
140
src/components/list/StandardList.vue
Normal file
140
src/components/list/StandardList.vue
Normal file
@ -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>
|
||||
42
src/components/tool/HeadInfo.vue
Normal file
42
src/components/tool/HeadInfo.vue
Normal file
@ -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>
|
||||
@ -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',
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user