PostSingleCard.vue
2.27 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
<template>
<v-card>
<v-card-media src="/static/nature/n3.jpeg" :height="imageHeight" class="white--text">
<v-layout row justify-space-between class="ma-0">
<v-flex xs2>
<v-icon color="white">favorite</v-icon>
</v-flex>
<v-flex xs2 class="text-sm-right">
<v-icon color="white">share</v-icon>
</v-flex>
</v-layout>
</v-card-media>
<v-card-text>
<div class="post--item">
<div class="post--title">
<h3 class="title">{{title}}</h3>
</div>
<div class="post--meta grey--text text--darken-1 caption my-3">
<span class="mr-3">{{author}}</span>
<time>{{createdAt }}</time>
</div>
<div class="post--desc text--secondary">
{{desc}}
</div>
<div class="post--action align-center justify-space-between mt-2">
<div class="social">
<a @click="handleThumb" class="grey--text">
<v-icon small>thumb_up</v-icon>
<small>100+</small>
</a>
<a @click="handleComment" class="grey--text mx-3">
<v-icon small>mode_comment</v-icon>
<small>12+</small>
</a>
<a @click="handleFavorite" class="grey--text ">
<v-icon small>favorite</v-icon>
<small>50+</small>
</a>
</div>
<v-btn outline flat color="primary">
More
</v-btn>
</div>
</div>
</v-card-text>
<v-divider></v-divider>
<v-toolbar card color="white">
<v-text-field
flat
solo
label="Comment here"
append-icon="photo_camera"
hide-details=""
></v-text-field>
</v-toolbar>
</v-card>
</template>
<script>
export default {
props: {
featuredImage: { type: String },
imageHeight: { type: [String, Number], default: '350' },
author: { type: String },
title: { type: String },
desc: { type: String },
createdAt: { type: String }
},
methods: {
handleThumb () {
// implement your own method here
},
handleComment () {
// implement your own method here
},
handleFavorite () {
// implement your own method here
},
}
};
</script>
<style>
</style>