Home.vue
4.76 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
<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>
<a-divider> 正常 </a-divider>
<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>
<a-divider> 颜色反转 </a-divider>
<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>
<a-divider> AvatarList </a-divider>
<a-card style="margin-bottom: 3rem">
<avatar-list :max-length="3">
<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" />
</avatar-list>
<a-divider type="vertical" style="margin: 0 16px" />
<avatar-list size="mini">
<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>
</a-card>
<h2># CountDown 组件 </h2>
<a-divider> CountDown </a-divider>
<a-card style="margin-bottom: 3rem">
<count-down
style="font-size: 2rem"
:target="new Date().getTime() + 3000000"
:on-end="onEndHandle">
</count-down>
<a-divider type="vertical" style="margin: 0 16px" />
<count-down
style="font-size: 2rem"
:target="new Date().getTime() + 10000"
:on-end="onEndHandle2">
</count-down>
</a-card>
<h2># Ellipsis 组件 </h2>
<a-divider> Ellipsis </a-divider>
<a-card style="margin-bottom: 3rem">
<ellipsis :length="100" tooltip>
There were injuries alleged in three cases in 2015, and a
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.
</ellipsis>
</a-card>
<h2># NumberInfo 组件 </h2>
<a-divider> NumberInfo </a-divider>
<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>
// @ 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!!!')
},
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.',
});
}
}
}
</script>
<style scoped>
.home {
width: 900px;
margin: 0 auto;
padding: 25px 0;
}
.home > .banner {
text-align: center;
padding: 25px 0;
margin: 25px 0;
}
</style>