mirror of
https://github.com/iczer/vue-antd-admin
synced 2025-04-06 04:00:06 +08:00
64 lines
2.0 KiB
Vue
64 lines
2.0 KiB
Vue
<template>
|
||
<div>
|
||
<search-form />
|
||
<a-list
|
||
:grid='{ gutter: 24, xl: 4, lg: 3, md: 3, sm: 2, xs: 1 }'
|
||
>
|
||
<a-list-item :key="n" v-for="n in 8" style="padding: 0 12px">
|
||
<a-card>
|
||
<img slot="cover" src="https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png" height="154"/>
|
||
<a-card-meta title="Ant Design">
|
||
<div slot="description">
|
||
城镇中有那么多的酒馆，她却偏偏走进了我的酒馆
|
||
</div>
|
||
</a-card-meta>
|
||
<div class="content">
|
||
<span>4小时前</span>
|
||
<avatar-list>
|
||
<avatar-list-item size="small" tips="曲丽丽" src="https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png" />
|
||
<avatar-list-item size="small" tips="周星星" src="https://gw.alipayobjects.com/zos/rmsportal/tBOxZPlITHqwlGjsJWaF.png" />
|
||
<avatar-list-item size="small" tips="董娜娜" src="https://gw.alipayobjects.com/zos/rmsportal/sBxjgqiuHMGRkIjqlQCd.png" />
|
||
</avatar-list>
|
||
</div>
|
||
</a-card>
|
||
</a-list-item>
|
||
</a-list>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import ACard from 'ant-design-vue/es/card/Card'
|
||
import SearchForm from './SearchForm'
|
||
import AList from 'ant-design-vue/es/list'
|
||
import AListItem from 'ant-design-vue/es/list/Item'
|
||
import ACardMeta from 'ant-design-vue/es/card/Meta'
|
||
import AAvatar from 'ant-design-vue/es/avatar/Avatar'
|
||
import AvatarList from '../../../components/tool/AvatarList'
|
||
import ATooltip from 'ant-design-vue/es/tooltip/Tooltip'
|
||
|
||
const AvatarListItem = AvatarList.Item
|
||
|
||
export default {
|
||
name: 'ProjectList',
|
||
components: {ATooltip, AvatarListItem, AvatarList, AAvatar, ACardMeta, AListItem, AList, SearchForm, ACard}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.content{
|
||
display: flex;
|
||
margin-top: 16px;
|
||
margin-bottom: -4px;
|
||
line-height: 20px;
|
||
height: 20px;
|
||
& > span {
|
||
color: rgba(0,0,0,.45);
|
||
flex: 1;
|
||
font-size: 12px;
|
||
}
|
||
.avatarList {
|
||
flex: 0 1 auto;
|
||
}
|
||
}
|
||
</style>
|