mirror of
https://github.com/iczer/vue-antd-admin
synced 2025-05-28 09:22:32 +08:00
73 lines
2.2 KiB
Vue
73 lines
2.2 KiB
Vue
<template>
|
||
<div>
|
||
<search-form />
|
||
<a-card :bordered="false">
|
||
<a-list itemLayout="vertical">
|
||
<a-list-item :key="n" v-for="n in 10">
|
||
<a-list-item-meta title="Alipay">
|
||
<div slot="description">
|
||
<a-tag >Ant Design</a-tag>
|
||
<a-tag >设计语言</a-tag>
|
||
<a-tag >蚂蚁金服</a-tag>
|
||
</div>
|
||
</a-list-item-meta>
|
||
<div class="content">
|
||
<div class="detail">
|
||
段落示意：蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。蚂蚁金服设计平台
|
||
ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。
|
||
</div>
|
||
<div class="author">
|
||
<a-avatar size="small" src="https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png" />
|
||
<a>ICZER</a>发布在
|
||
<a href="https://github.com/iczer">https://github.com/iczer</a>
|
||
<em>2018-08-05 22:23</em>
|
||
</div>
|
||
</div>
|
||
<span slot="actions"><a-icon style="margin-right: 8px" type="star-o" />156</span>
|
||
<span slot="actions"><a-icon style="margin-right: 8px" type="like-o" />1435</span>
|
||
<span slot="actions"><a-icon style="margin-right: 8px" type="message" />4</span>
|
||
</a-list-item>
|
||
</a-list>
|
||
</a-card>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import SearchForm from './SearchForm'
|
||
export default {
|
||
name: 'ArticleList',
|
||
components: {SearchForm}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.extra{
|
||
width: 272px;
|
||
height: 1px;
|
||
}
|
||
.content {
|
||
.detail {
|
||
line-height: 22px;
|
||
max-width: 720px;
|
||
}
|
||
.author {
|
||
color: @text-color-second;
|
||
margin-top: 16px;
|
||
line-height: 22px;
|
||
& > :global(.ant-avatar) {
|
||
vertical-align: top;
|
||
margin-right: 8px;
|
||
width: 20px;
|
||
height: 20px;
|
||
position: relative;
|
||
top: 1px;
|
||
}
|
||
& > em {
|
||
color: @disabled-color;
|
||
font-style: normal;
|
||
margin-left: 16px;
|
||
}
|
||
}
|
||
}
|
||
</style>
|