Timeline.vue
4.87 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
<template>
<div id="page-timeline">
<v-container grid-list-xl fluid>
<v-layout row wrap>
<v-flex sm12>
<v-widget title="Complex" contentBg="lighten-4">
<div slot="widget-content">
<ol class="timeline timeline-point-lg">
<li class="timeline-period">
<time>Today</time>
</li>
<li class="timeline-block">
<div class="timeline-content">
<v-card dark color="blue">
<v-card-text>
Authoritatively syndicate goal-oriented leadership skills for clicks mortar outsourcing synergistically reconceptualize enabled.
</v-card-text>
</v-card>
</div>
<div class="timeline-point">
<v-avatar>
<img src="/static/avatar/me.jpeg" alt="">
</v-avatar>
</div>
<div class="timeline-detail">
<time datetime="2018" class="caption">Just now</time>
<p>Michael update his status.</p>
</div>
</li>
<li class="timeline-block">
<div class="timeline-content">
<v-card class="elevation-1">
<v-card-text class="pa-0">
<v-container grid-list-md>
<div class="layout row align-center ma-0">
<v-avatar class="mx-auto" color="info">
<img src="/static/avatar/a1.jpg">
</v-avatar>
<div class="text-center flex ml-2">
<div class="subheading">John Doe</div>
<span class="caption">Web Developer</span>
</div>
</div>
</v-container>
</v-card-text>
</v-card>
</div>
<div class="timeline-point">
<v-avatar class="indigo">
<v-icon dark>account_circle</v-icon>
</v-avatar>
</div>
<div class="timeline-detail">
<time datetime="2018" class="caption">4 hours agon</time>
<p>New friend request</p>
</div>
</li>
<li class="timeline-block">
<div class="timeline-content">
<v-card>
<v-card-media
src="/static/bg/5.jpg"
height="200px"
>
</v-card-media>
<v-card-title primary-title>
<div>
<div class="headline">Top western road trips</div>
<span class="grey--text">1,000 miles of wonder</span>
</div>
</v-card-title>
</v-card>
</div>
<div class="timeline-point">
<v-avatar>
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="">
</v-avatar>
</div>
<div class="timeline-detail">
<time datetime="2018" class="caption">1 Day ago</time>
<p>John doe post a picture</p>
</div>
</li>
</ol>
</div>
</v-widget>
</v-flex>
<v-flex sm12>
<v-widget title="Basic Usage" contentBg="white">
<div slot="widget-content">
<ol class="timeline timeline-activity timeline-point-sm timeline-content-right">
<li class="timeline-block" v-for="(item, index) in activity" :key="index">
<div class="timeline-point">
<v-circle dot large :color="item.color"></v-circle>
</div>
<div class="timeline-content">
<time datetime="2018" class="caption">{{item.timeString}}</time>
<div v-html="item.text"></div>
</div>
</li>
</ol>
</div>
</v-widget>
</v-flex>
</v-layout>
</v-container>
</div>
</template>
<script>
import VWidget from '@/components/VWidget';
import API from '@/api';
import VCircle from '@/components/circle/VCircle.js';
export default {
components: {
VWidget,
VCircle,
},
data () {
return {
};
},
computed: {
activity () {
return API.getActivity();
}
},
methods: {
}
};
</script>