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