chenghx
7 years ago
parent
2381c9af25
commit
31faa8ccb8
7 changed files with 214 additions and 15 deletions
@ -0,0 +1,13 @@ |
|||||||
|
<template> |
||||||
|
<router-view /> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
name: 'RouterLayout' |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
|
||||||
|
</style> |
||||||
@ -0,0 +1,19 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<a-card style="" :bordered="false"> |
||||||
|
|
||||||
|
</a-card> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import ACard from 'vue-antd-ui/es/card/Card' |
||||||
|
export default { |
||||||
|
name: 'ArticleList', |
||||||
|
components: {ACard} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
|
||||||
|
</style> |
||||||
@ -0,0 +1,94 @@ |
|||||||
|
<template> |
||||||
|
<div > |
||||||
|
<a-list |
||||||
|
:grid="{gutter: 24, lg: 3, md: 2, sm: 1, xs: 1}" |
||||||
|
:dataSource="dataSource" |
||||||
|
> |
||||||
|
<a-list-item slot="renderItem" slot-scope="item, index"> |
||||||
|
<template v-if="item === null"> |
||||||
|
<a-button class="new-btn" type="dashed"> |
||||||
|
<a-icon type="plus" />新增产品 |
||||||
|
</a-button> |
||||||
|
</template> |
||||||
|
<template v-else> |
||||||
|
<a-card :hoverable="true"> |
||||||
|
<a-card-meta :title="item.title" :description="item.content"> |
||||||
|
<a-avatar class="card-avatar" slot="avatar" :src="item.avatar" size="large" /> |
||||||
|
<div slot="description">{{item.content}}</div> |
||||||
|
</a-card-meta> |
||||||
|
<ul class="ant-card-actions" slot="actions"> |
||||||
|
<li><a >操作一</a></li> |
||||||
|
<li><a >操作二</a></li> |
||||||
|
</ul> |
||||||
|
</a-card> |
||||||
|
</template> |
||||||
|
</a-list-item> |
||||||
|
</a-list> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import AList from 'vue-antd-ui/es/list/index' |
||||||
|
import AListItem from 'vue-antd-ui/es/list/Item' |
||||||
|
import ACard from 'vue-antd-ui/es/card/Card' |
||||||
|
import ACardMeta from 'vue-antd-ui/es/card/Meta' |
||||||
|
import AAvatar from 'vue-antd-ui/es/avatar/Avatar' |
||||||
|
import AButton from 'vue-antd-ui/es/button/button' |
||||||
|
import AIcon from 'vue-antd-ui/es/icon/icon' |
||||||
|
|
||||||
|
const dataSource = [] |
||||||
|
|
||||||
|
for (let i = 0; i < 11 ; i++) { |
||||||
|
dataSource.push({ |
||||||
|
title: 'Alipay', |
||||||
|
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png', |
||||||
|
content: '在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的组件会被抽离成一套标准规范。' |
||||||
|
}) |
||||||
|
} |
||||||
|
dataSource.push(null) |
||||||
|
export default { |
||||||
|
name: 'CardList', |
||||||
|
components: {AIcon, AButton, AAvatar, ACardMeta, ACard, AListItem, AList}, |
||||||
|
data () { |
||||||
|
return { |
||||||
|
dataSource |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="less" scoped> |
||||||
|
.card-avatar { |
||||||
|
width: 48px; |
||||||
|
height: 48px; |
||||||
|
border-radius: 48px; |
||||||
|
} |
||||||
|
.ant-card-actions{ |
||||||
|
background: #f7f9fa; |
||||||
|
li{ |
||||||
|
float: left; |
||||||
|
text-align: center; |
||||||
|
margin: 12px 0; |
||||||
|
color: rgba(0, 0, 0, 0.45); |
||||||
|
width: 50%; |
||||||
|
a{ |
||||||
|
color: rgba(0,0,0,.45); |
||||||
|
line-height: 22px; |
||||||
|
display: inline-block; |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
a:hover{ |
||||||
|
color: #1890ff; |
||||||
|
} |
||||||
|
} |
||||||
|
li:not(:last-child) { |
||||||
|
border-right: 1px solid #e8e8e8; |
||||||
|
} |
||||||
|
} |
||||||
|
.new-btn{ |
||||||
|
background-color: #fff; |
||||||
|
border-radius: 2px; |
||||||
|
width: 100%; |
||||||
|
height: 188px; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,47 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<div class="search-head"> |
||||||
|
<div class="search-input"> |
||||||
|
<a-input-search style="width: 522px" placeholder="请输入..." size="large" enterButton="搜索" /> |
||||||
|
</div> |
||||||
|
<div style="padding: 0 24px"> |
||||||
|
<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> |
||||||
|
</a-tabs> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="search-content"> |
||||||
|
<router-view /> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import AInput from 'vue-antd-ui/es/input/Input' |
||||||
|
import AInputGroup from 'vue-antd-ui/es/input/Group' |
||||||
|
import AButton from 'vue-antd-ui/es/button/button' |
||||||
|
import AInputSearch from 'vue-antd-ui/es/input/Search' |
||||||
|
import ATabs from 'vue-antd-ui/es/tabs' |
||||||
|
|
||||||
|
const ATabPane = ATabs.TabPane |
||||||
|
|
||||||
|
export default { |
||||||
|
name: 'SearchLayout', |
||||||
|
components: {ATabPane, ATabs, AInputSearch, AButton, AInputGroup, AInput} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="less" scoped> |
||||||
|
.search-head{ |
||||||
|
background-color: #fff; |
||||||
|
margin: -25px -24px -24px; |
||||||
|
.search-input{ |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
} |
||||||
|
.search-content{ |
||||||
|
margin-top: 48px; |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue