You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
129 lines
3.2 KiB
129 lines
3.2 KiB
<template> |
|
<div> |
|
<search-form /> |
|
<a-list |
|
:grid="{ gutter: 24, xl: 4, lg: 3, md: 3, sm: 2, xs: 1 }" |
|
> |
|
<a-list-item style="padding: 0 12px" :key="n" v-for="n in 12"> |
|
<a-card> |
|
<a-card-meta title="Angular"> |
|
<a-avatar slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png" size="small" /> |
|
</a-card-meta> |
|
<ul class="actions" slot="actions"> |
|
<a-tooltip class="tool" title="下载"> |
|
<a-icon type="download" /> |
|
</a-tooltip> |
|
<a-tooltip class="tool" title="编辑"> |
|
<a-icon type="edit" /> |
|
</a-tooltip> |
|
<a-tooltip class="tool" title="分享"> |
|
<a-icon type="share-alt" /> |
|
</a-tooltip> |
|
<a-dropdown class="tool"> |
|
<a-icon type="ellipsis" /> |
|
<a-menu slot="overlay"> |
|
<a-menu-item>1 item</a-menu-item> |
|
<a-menu-item>2 item</a-menu-item> |
|
<a-menu-item>3 item</a-menu-item> |
|
</a-menu> |
|
</a-dropdown> |
|
</ul> |
|
<div class="content"> |
|
<div> |
|
<p>活跃用户</p> |
|
<p>18万</p> |
|
</div> |
|
<div> |
|
<p>新增用户</p> |
|
<p>1,338</p> |
|
</div> |
|
</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 ATooltip from 'ant-design-vue/es/tooltip/Tooltip' |
|
import AIcon from 'ant-design-vue/es/icon/icon' |
|
import ADropdown from 'ant-design-vue/es/dropdown' |
|
import AMenu from 'ant-design-vue/es/menu/index' |
|
|
|
const AMenuItem = AMenu.Item |
|
|
|
export default { |
|
name: 'ApplicationList', |
|
components: {AMenuItem, AMenu, ADropdown, AIcon, ATooltip, AAvatar, ACardMeta, AListItem, AList, SearchForm, ACard} |
|
} |
|
</script> |
|
|
|
<style lang="less" scoped> |
|
.clearfix() { |
|
zoom: 1; |
|
&:before, |
|
&:after { |
|
content: ' '; |
|
display: table; |
|
} |
|
&:after { |
|
clear: both; |
|
visibility: hidden; |
|
font-size: 0; |
|
height: 0; |
|
} |
|
} |
|
.content { |
|
.clearfix(); |
|
margin-top: 16px; |
|
margin-left: 40px; |
|
& > div { |
|
position: relative; |
|
text-align: left; |
|
float: left; |
|
width: 50%; |
|
p { |
|
line-height: 32px; |
|
font-size: 24px; |
|
margin: 0; |
|
} |
|
p:first-child { |
|
color: rgba(0,0,0,.45); |
|
font-size: 12px; |
|
line-height: 20px; |
|
margin-bottom: 4px; |
|
} |
|
} |
|
} |
|
.actions{ |
|
border-top: 1px solid #e8e8e8; |
|
background: #f5f8fa; |
|
zoom: 1; |
|
list-style: none; |
|
margin: 0; |
|
padding: 0; |
|
height: 47px; |
|
.tool{ |
|
width: 25%; |
|
float: left; |
|
text-align: center; |
|
margin: 12px 0; |
|
color: rgba(0,0,0,.45); |
|
cursor: pointer; |
|
font-size: 16px; |
|
line-height: 22px; |
|
&:hover{ |
|
color: #1890ff; |
|
} |
|
&:not(:last-child) { |
|
border-right: 1px solid #e8e8e8; |
|
} |
|
} |
|
} |
|
</style>
|
|
|