iczer
7 years ago
parent
0b80b9268e
commit
7befb78ba5
6 changed files with 328 additions and 39 deletions
@ -0,0 +1,51 @@ |
|||||||
|
<template> |
||||||
|
<div class="form-row"> |
||||||
|
<div class="label"> |
||||||
|
<span>{{label}}</span> |
||||||
|
</div> |
||||||
|
<div class="content"> |
||||||
|
<slot></slot> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
name: 'FormRow', |
||||||
|
props: ['label'] |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="less" scoped> |
||||||
|
.form-row{ |
||||||
|
display: flex; |
||||||
|
border-bottom: 1px dashed #e8e8e8; |
||||||
|
margin-bottom: 16px; |
||||||
|
.label { |
||||||
|
color: rgba(0, 0, 0, 0.85); |
||||||
|
font-size: 14px; |
||||||
|
margin-right: 24px; |
||||||
|
flex: 0 0 auto; |
||||||
|
text-align: right; |
||||||
|
& > span { |
||||||
|
display: inline-block; |
||||||
|
height: 39px; |
||||||
|
line-height: 39px; |
||||||
|
&:after { |
||||||
|
content: '：'; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.content { |
||||||
|
flex: 1 1 0; |
||||||
|
:global { |
||||||
|
.ant-form-item:last-child { |
||||||
|
margin-right: 0; |
||||||
|
} |
||||||
|
.ant-form-item { |
||||||
|
margin-bottom: 0px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -1,21 +1,114 @@ |
|||||||
<template> |
<template> |
||||||
<div> |
<div> |
||||||
<search-form /> |
<search-form /> |
||||||
<a-card :bordered="false"> |
<a-list |
||||||
contentB |
:grid="{ gutter: 24, xl: 4, lg: 3, md: 3, sm: 2, xs: 1 }" |
||||||
</a-card> |
> |
||||||
|
<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-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> |
</div> |
||||||
</template> |
</template> |
||||||
|
|
||||||
<script> |
<script> |
||||||
import ACard from 'vue-antd-ui/es/card/Card' |
import ACard from 'vue-antd-ui/es/card/Card' |
||||||
import SearchForm from './SearchForm' |
import SearchForm from './SearchForm' |
||||||
|
import AList from 'vue-antd-ui/es/list' |
||||||
|
import AListItem from 'vue-antd-ui/es/list/Item' |
||||||
|
import ACardMeta from 'vue-antd-ui/es/card/Meta' |
||||||
|
import AAvatar from 'vue-antd-ui/es/avatar/Avatar' |
||||||
|
import ATooltip from 'vue-antd-ui/es/tooltip/Tooltip' |
||||||
|
import AIcon from 'vue-antd-ui/es/icon/icon' |
||||||
|
import ADropdown from 'vue-antd-ui/es/dropdown' |
||||||
export default { |
export default { |
||||||
name: 'ApplicationList', |
name: 'ApplicationList', |
||||||
components: {SearchForm, ACard} |
components: {ADropdown, AIcon, ATooltip, AAvatar, ACardMeta, AListItem, AList, SearchForm, ACard} |
||||||
} |
} |
||||||
</script> |
</script> |
||||||
|
|
||||||
<style scoped> |
<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: 38px; |
||||||
|
.tool{ |
||||||
|
width: 25%; |
||||||
|
float: left; |
||||||
|
text-align: center; |
||||||
|
margin: 12px 0; |
||||||
|
color: rgba(0,0,0,.45); |
||||||
|
} |
||||||
|
.tool:not(:last-child) { |
||||||
|
border-right: 1px solid #e8e8e8; |
||||||
|
} |
||||||
|
} |
||||||
</style> |
</style> |
||||||
|
|||||||
@ -1,21 +1,54 @@ |
|||||||
<template> |
<template> |
||||||
<div> |
<div> |
||||||
<search-form /> |
<search-form /> |
||||||
<a-card :bordered="false"> |
<a-list |
||||||
contentC |
:grid='{ gutter: 24, xl: 4, lg: 3, md: 3, sm: 2, xs: 1 }' |
||||||
</a-card> |
> |
||||||
|
<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> |
||||||
|
<a-avatar size="small" src="https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png" /> |
||||||
|
</div> |
||||||
|
</a-card> |
||||||
|
</a-list-item> |
||||||
|
</a-list> |
||||||
</div> |
</div> |
||||||
</template> |
</template> |
||||||
|
|
||||||
<script> |
<script> |
||||||
import ACard from 'vue-antd-ui/es/card/Card' |
import ACard from 'vue-antd-ui/es/card/Card' |
||||||
import SearchForm from './SearchForm' |
import SearchForm from './SearchForm' |
||||||
|
import AList from 'vue-antd-ui/es/list' |
||||||
|
import AListItem from 'vue-antd-ui/es/list/Item' |
||||||
|
import ACardMeta from 'vue-antd-ui/es/card/Meta' |
||||||
|
import AAvatar from 'vue-antd-ui/es/avatar/Avatar' |
||||||
export default { |
export default { |
||||||
name: 'ProjectList', |
name: 'ProjectList', |
||||||
components: {SearchForm, ACard} |
components: {AAvatar, ACardMeta, AListItem, AList, SearchForm, ACard} |
||||||
} |
} |
||||||
</script> |
</script> |
||||||
|
|
||||||
<style scoped> |
<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> |
</style> |
||||||
|
|||||||
Loading…
Reference in new issue