StandardList.vue
4.62 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
<template>
<div>
<a-card :bordered="false">
<a-row>
<a-col :sm="8" :xs="24">
<head-info title="我的待办" content="8个任务" :bordered="true"/>
</a-col>
<a-col :sm="8" :xs="24">
<head-info title="本周任务平均处理时间" content="32分钟" :bordered="true"/>
</a-col>
<a-col :sm="8" :xs="24">
<head-info title="本周完成任务数" content="24个"/>
</a-col>
</a-row>
</a-card>
<a-card
style="margin-top: 24px"
:bordered="false"
title="标准列表">
<div slot="extra">
<a-radio-group>
<a-radio-button>全部</a-radio-button>
<a-radio-button>进行中</a-radio-button>
<a-radio-button>等待中</a-radio-button>
</a-radio-group>
<a-input-search style="margin-left: 16px; width: 272px;" />
</div>
<div class="operate">
<a-button type="dashed" style="width: 100%" icon="plus">添加</a-button>
</div>
<a-list size="large" :pagination="{showSizeChanger: true, showQuickJumper: true, pageSize: 5, total: 50}">
<a-list-item :key="index" v-for="(item, index) in data">
<a-list-item-meta :description="item.description">
<a-avatar slot="avatar" size="large" shape="square" :src="item.avatar"/>
<a slot="title">{{ item.title }}</a>
</a-list-item-meta>
<div slot="actions">
<a>编辑</a>
</div>
<div slot="actions">
<a-dropdown>
<a-menu slot="overlay">
<a-menu-item><a>编辑</a></a-menu-item>
<a-menu-item><a>删除</a></a-menu-item>
</a-menu>
<a>更多<a-icon type="down"/></a>
</a-dropdown>
</div>
<div class="list-content">
<div class="list-content-item">
<span>Owner</span>
<p>{{ item.owner }}</p>
</div>
<div class="list-content-item">
<span>开始时间</span>
<p>{{ item.startAt }}</p>
</div>
<div class="list-content-item">
<a-progress :percent="item.progress.value" :status="!item.progress.status ? null : item.progress.status" style="width: 180px" />
</div>
</div>
</a-list-item>
</a-list>
</a-card>
</div>
</template>
<script>
import HeadInfo from '@/components/tools/HeadInfo'
const data = []
data.push({
title: 'Alipay',
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png',
description: '那是一种内在的东西， 他们到达不了，也无法触及的',
owner: '付晓晓',
startAt: '2018-07-26 22:44',
progress: {
value: 90
}
})
data.push({
title: 'Angular',
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png',
description: '希望是一个好东西，也许是最好的，好东西是不会消亡的',
owner: '曲丽丽',
startAt: '2018-07-26 22:44',
progress: {
value: 54
}
})
data.push({
title: 'Ant Design',
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png',
description: '生命就像一盒巧克力，结果往往出人意料',
owner: '林东东',
startAt: '2018-07-26 22:44',
progress: {
value: 66
}
})
data.push({
title: 'Ant Design Pro',
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png',
description: '城镇中有那么多的酒馆，她却偏偏走进了我的酒馆',
owner: '周星星',
startAt: '2018-07-26 22:44',
progress: {
value: 30
}
})
data.push({
title: 'Bootstrap',
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png',
description: '那时候我只会想自己想要什么，从不想自己拥有什么',
owner: '吴加好',
startAt: '2018-07-26 22:44',
progress: {
status: 'exception',
value: 100
}
})
export default {
name: "StandardList",
components: {
HeadInfo
},
data () {
return {
data
}
}
}
</script>
<style lang="scss" scoped>
.ant-avatar-lg {
width: 48px;
height: 48px;
line-height: 48px;
}
.list-content-item {
color: rgba(0, 0, 0, .45);
display: inline-block;
vertical-align: middle;
font-size: 14px;
margin-left: 40px;
span {
line-height: 20px;
}
p {
margin-top: 4px;
margin-bottom: 0;
line-height: 22px;
}
}
</style>