64 lines
1.4 KiB
Vue
64 lines
1.4 KiB
Vue
<template>
|
|
<div
|
|
class="
|
|
transition-opacity
|
|
ease-out
|
|
flex
|
|
items-center
|
|
justify-center
|
|
opacity-0
|
|
group-hover:opacity-100
|
|
bg-indigo-300 bg-opacity-75
|
|
z-10
|
|
absolute
|
|
inset-x-0
|
|
bottom-0
|
|
p-2
|
|
md:p-3
|
|
"
|
|
>
|
|
<div class="misc-info flex space-x-4">
|
|
<div :class="[is_like ? 'text-red' : 'text-gray-light', 'flex items-center']">
|
|
<button @click.stop="$emit('likeFeed')" class="default">
|
|
<svg class="w-5 h-5 flex-shrink-0">
|
|
<use xlink:href="#heart"></use>
|
|
</svg>
|
|
</button>
|
|
<span v-show="likes" class="ml-2 text-sm">{{ likes }}</span>
|
|
</div>
|
|
|
|
<div class="flex items-center text-gray-light">
|
|
<button class="default">
|
|
<svg class="w-5 h-5 flex-shrink-0">
|
|
<use xlink:href="#message-circle"></use>
|
|
</svg>
|
|
</button>
|
|
<span v-show="comments" class="ml-2 text-sm">{{
|
|
comments
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hidden count-views">
|
|
<div class="flex items-center text-gray-light">
|
|
<span class="mr-2 text-sm">1000</span>
|
|
<svg class="w-5 h-5 flex-shrink-0">
|
|
<use xlink:href="#eye"></use>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
components: {},
|
|
emits: ["likeFeed"],
|
|
props: {
|
|
likes: Number,
|
|
comments: Number,
|
|
is_like: Boolean,
|
|
},
|
|
};
|
|
</script>
|