|
1
2
3
4
5
6
7
8
9
10
11
|
<template>
<div class="home">
<div class="banner">
<img alt="Vue logo" style="width: 64px; height: 64px" src="../assets/logo.png">
<h3 style="margin-top: 1rem">Welcome to Your Vue.js App</h3>
</div>
<br/>
<h2># Trend 组件 </h2>
|
|
12
|
<a-divider> 正常</a-divider>
|
|
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<a-card>
<trend flag="up" style="margin-right: 16px;">
<span slot="term">工资</span>
5%
</trend>
<trend flag="up" style="margin-right: 16px;">
<span slot="term">工作量</span>
50%
</trend>
<trend flag="down">
<span slot="term">身体状态</span>
50%
</trend>
</a-card>
|
|
31
|
<a-divider> 颜色反转</a-divider>
|
|
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
<a-card style="margin-bottom: 3rem">
<trend flag="up" :reverse-color="true" style="margin-right: 16px;">
<span slot="term">工资</span>
5%
</trend>
<trend flag="down" :reverse-color="true" style="margin-right: 16px;">
<span slot="term">工作量</span>
50%
</trend>
</a-card>
<h2># AvatarList 组件 </h2>
|
|
48
|
<a-divider> AvatarList</a-divider>
|
|
49
50
|
<a-card style="margin-bottom: 3rem">
<avatar-list :max-length="3">
|
|
51
52
53
54
55
56
57
|
<avatar-list-item tips="Jake" src="https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png"/>
<avatar-list-item tips="Andy" src="https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png"/>
<avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png"/>
<avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png"/>
<avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png"/>
<avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png"/>
<avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png"/>
|
|
58
59
60
|
</avatar-list>
|
|
61
|
<a-divider type="vertical" style="margin: 0 16px"/>
|
|
62
63
|
<avatar-list size="mini">
|
|
64
65
66
|
<avatar-list-item tips="Jake" src="https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png"/>
<avatar-list-item tips="Andy" src="https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png"/>
<avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png"/>
|
|
67
68
69
70
71
|
</avatar-list>
</a-card>
<h2># CountDown 组件 </h2>
|
|
72
|
<a-divider> CountDown</a-divider>
|
|
73
74
75
76
77
78
79
|
<a-card style="margin-bottom: 3rem">
<count-down
style="font-size: 2rem"
:target="new Date().getTime() + 3000000"
:on-end="onEndHandle">
</count-down>
|
|
80
|
<a-divider type="vertical" style="margin: 0 16px"/>
|
|
81
82
83
84
85
86
87
88
89
90
|
<count-down
style="font-size: 2rem"
:target="new Date().getTime() + 10000"
:on-end="onEndHandle2">
</count-down>
</a-card>
<h2># Ellipsis 组件 </h2>
|
|
91
|
<a-divider> Ellipsis</a-divider>
|
|
92
93
94
|
<a-card style="margin-bottom: 3rem">
<ellipsis :length="100" tooltip>
There were injuries alleged in three cases in 2015, and a
|
|
95
96
|
fourth incident in September, according to the safety recall report. After meeting with US regulators in
October, the firm decided to issue a voluntary recall.
|
|
97
98
99
100
101
|
</ellipsis>
</a-card>
<h2># NumberInfo 组件 </h2>
|
|
102
|
<a-divider> NumberInfo</a-divider>
|
|
103
104
105
106
107
108
109
110
111
112
113
|
<a-card>
<number-info
:sub-title="() => { return 'Visits this week' }"
:total="12321"
status="up"
:sub-total="17.1"></number-info>
</a-card>
</div>
</template>
<script>
|
|
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
|
// @ is an alias to /src
import Trend from '@/components/Trend'
import AvatarList from '@/components/AvatarList'
import CountDown from '@/components/CountDown/CountDown'
import Ellipsis from '@/components/Ellipsis'
import NumberInfo from '@/components/NumberInfo'
const AvatarListItem = AvatarList.AvatarItem
export default {
name: 'Home',
components: {
NumberInfo,
Ellipsis,
CountDown,
Trend,
AvatarList,
AvatarListItem
},
data() {
return {
targetTime: new Date().getTime() + 3900000
}
},
methods: {
onEndHandle() {
this.$message.success('CountDown callback!!!')
|
|
142
|
},
|
|
143
144
145
146
147
|
onEndHandle2() {
this.$notification.open({
message: 'Notification Title',
description: 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
});
|
|
148
149
|
}
}
|
|
150
|
}
|
|
151
152
153
|
</script>
<style scoped>
|
|
154
155
156
157
158
159
160
161
162
163
164
|
.home {
width: 900px;
margin: 0 auto;
padding: 25px 0;
}
.home > .banner {
text-align: center;
padding: 25px 0;
margin: 25px 0;
}
|
|
165
|
</style>
|