mirror of
https://github.com/iczer/vue-antd-admin
synced 2025-04-05 19:41:37 +08:00
增加文章列表、应用列表、项目列表
This commit is contained in:
iczer
parent
0b80b9268e
commit
7befb78ba5
51
src/components/form/FormRow.vue
Normal file
51
src/components/form/FormRow.vue
Normal file
@ -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>
|
||||
<div>
|
||||
<search-form />
|
||||
<a-card :bordered="false">
|
||||
contentB
|
||||
</a-card>
|
||||
<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-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 'vue-antd-ui/es/card/Card'
|
||||
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 {
|
||||
name: 'ApplicationList',
|
||||
components: {SearchForm, ACard}
|
||||
components: {ADropdown, AIcon, ATooltip, AAvatar, ACardMeta, AListItem, AList, SearchForm, ACard}
|
||||
}
|
||||
</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>
|
||||
|
||||
@ -2,7 +2,32 @@
|
||||
<div>
|
||||
<search-form />
|
||||
<a-card :bordered="false">
|
||||
contentA
|
||||
<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>
|
||||
@ -10,12 +35,46 @@
|
||||
<script>
|
||||
import ACard from 'vue-antd-ui/es/card/Card'
|
||||
import SearchForm from './SearchForm'
|
||||
import AList from 'vue-antd-ui/es/list'
|
||||
import AListItem from 'vue-antd-ui/es/list/Item'
|
||||
import ATag from 'vue-antd-ui/es/tag/Tag'
|
||||
import AAvatar from 'vue-antd-ui/es/avatar/Avatar'
|
||||
import AIcon from 'vue-antd-ui/es/icon/icon'
|
||||
|
||||
const AListItemMeta = AListItem.Meta
|
||||
export default {
|
||||
name: 'ArticleList',
|
||||
components: {SearchForm, ACard}
|
||||
components: {AIcon, ATag, AAvatar, AListItem, AListItemMeta, AList, SearchForm, ACard}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.extra{
|
||||
width: 272px;
|
||||
height: 1px;
|
||||
}
|
||||
.content {
|
||||
.detail {
|
||||
line-height: 22px;
|
||||
max-width: 720px;
|
||||
}
|
||||
.author {
|
||||
color: rgba(0,0,0,.45);
|
||||
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: rgba(0,0,0,.25);
|
||||
font-style: normal;
|
||||
margin-left: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,21 +1,54 @@
|
||||
<template>
|
||||
<div>
|
||||
<search-form />
|
||||
<a-card :bordered="false">
|
||||
contentC
|
||||
</a-card>
|
||||
<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>
|
||||
<a-avatar size="small" src="https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png" />
|
||||
</div>
|
||||
</a-card>
|
||||
</a-list-item>
|
||||
</a-list>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ACard from 'vue-antd-ui/es/card/Card'
|
||||
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 {
|
||||
name: 'ProjectList',
|
||||
components: {SearchForm, ACard}
|
||||
components: {AAvatar, ACardMeta, AListItem, AList, SearchForm, ACard}
|
||||
}
|
||||
</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>
|
||||
|
||||
@ -1,26 +1,68 @@
|
||||
<template>
|
||||
<a-card :bordered="false" class="search-form">
|
||||
<a-form>
|
||||
<a-form-item
|
||||
label="所属类目"
|
||||
>
|
||||
<tag-select>
|
||||
<tag-select-option>类目一</tag-select-option>
|
||||
<tag-select-option>类目二</tag-select-option>
|
||||
<tag-select-option>类目三</tag-select-option>
|
||||
<tag-select-option>类目四</tag-select-option>
|
||||
<tag-select-option>类目五</tag-select-option>
|
||||
<tag-select-option>类目六</tag-select-option>
|
||||
<tag-select-option>类目七</tag-select-option>
|
||||
<tag-select-option>类目八</tag-select-option>
|
||||
<tag-select-option>类目九</tag-select-option>
|
||||
<tag-select-option>类目十</tag-select-option>
|
||||
<tag-select-option>类目十一</tag-select-option>
|
||||
<tag-select-option>类目十二</tag-select-option>
|
||||
<tag-select-option>类目十三</tag-select-option>
|
||||
<tag-select-option>类目十四</tag-select-option>
|
||||
</tag-select>
|
||||
</a-form-item>
|
||||
<a-form :autoFormCreate="(form) => {this.form = form;this.form.getFieldDecorator('owner',{initialValue: ['1', '2']})}">
|
||||
<form-row label="所属类目">
|
||||
<a-form-item>
|
||||
<tag-select>
|
||||
<tag-select-option>类目一</tag-select-option>
|
||||
<tag-select-option>类目二</tag-select-option>
|
||||
<tag-select-option>类目三</tag-select-option>
|
||||
<tag-select-option>类目四</tag-select-option>
|
||||
<tag-select-option>类目五</tag-select-option>
|
||||
<tag-select-option>类目六</tag-select-option>
|
||||
<tag-select-option>类目七</tag-select-option>
|
||||
<tag-select-option>类目八</tag-select-option>
|
||||
<tag-select-option>类目九</tag-select-option>
|
||||
<tag-select-option>类目十</tag-select-option>
|
||||
<tag-select-option>类目十一</tag-select-option>
|
||||
<tag-select-option>类目十二</tag-select-option>
|
||||
<tag-select-option>类目十三</tag-select-option>
|
||||
<tag-select-option>类目十四</tag-select-option>
|
||||
<tag-select-option>类目十五</tag-select-option>
|
||||
<tag-select-option>类目十六</tag-select-option>
|
||||
</tag-select>
|
||||
</a-form-item>
|
||||
</form-row>
|
||||
<form-row label="owner" style="padding-bottom: 11px">
|
||||
<a-form-item
|
||||
fieldDecoratorId="owner"
|
||||
initialValue="['1', '2']"
|
||||
>
|
||||
<a-select mode="multiple" style="max-width: 286px">
|
||||
<a-select-option value="3">我自己</a-select-option>
|
||||
<a-select-option value="1">吴家豪</a-select-option>
|
||||
<a-select-option value="2">周星星</a-select-option>
|
||||
<a-select-option value="4">李宁</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a @click="lookMyself">只看自己的</a>
|
||||
</form-row>
|
||||
<form-row label="其他选项">
|
||||
<a-row>
|
||||
<a-col :span="8">
|
||||
<a-form-item
|
||||
label="活跃用户"
|
||||
:labelCol="{span: 6}"
|
||||
:wrapperCol="{span: 12}"
|
||||
>
|
||||
<a-select placeholder="不限">
|
||||
<a-select-option value="1">周星星</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-form-item
|
||||
label="好评度"
|
||||
:labelCol="{span: 6}"
|
||||
:wrapperCol="{span: 12}"
|
||||
>
|
||||
<a-select placeholder="不限">
|
||||
<a-select-option value="1">优秀</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</form-row>
|
||||
</a-form>
|
||||
</a-card>
|
||||
</template>
|
||||
@ -31,12 +73,24 @@ import AForm from 'vue-antd-ui/es/form/Form'
|
||||
import AFormItem from 'vue-antd-ui/es/form/FormItem'
|
||||
import AInput from 'vue-antd-ui/es/input/Input'
|
||||
import TagSelect from '../../tool/TagSelect'
|
||||
import FormRow from '../../form/FormRow'
|
||||
import ASelect from 'vue-antd-ui/es/select/index'
|
||||
import ARow from 'vue-antd-ui/es/grid/Row'
|
||||
import ACol from 'vue-antd-ui/es/grid/Col'
|
||||
|
||||
const TagSelectOption = TagSelect.Option
|
||||
const ASelectOption = ASelect.Option
|
||||
|
||||
export default {
|
||||
name: 'SearchForm',
|
||||
components: {TagSelectOption, TagSelect, AInput, AFormItem, AForm, ACard}
|
||||
components: {ACol, ARow, ASelectOption, ASelect, FormRow, TagSelectOption, TagSelect, AInput, AFormItem, AForm, ACard},
|
||||
methods: {
|
||||
lookMyself () {
|
||||
this.form.setFieldsValue({
|
||||
owner: '3'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@ -46,7 +46,6 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
navigate (key) {
|
||||
this.activeKey = key
|
||||
switch (key) {
|
||||
case '1':
|
||||
this.$router.push('/list/search/article')
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user