UserTile.vue 771 B

1234567891011121314151617181920212223242526272829303132333435363738
  1. <template>
  2. <div class="user-tile">
  3. <div class="user-tile-image">
  4. <figure class="image is-64x64">
  5. <img class="is-rounded" :src="avatar">
  6. </figure>
  7. </div>
  8. <div class="user-tile-author center">
  9. <h3 class="user-tile-author-name">by {{name}}</h3>
  10. <div v-if="date" class="date">{{date}}</div>
  11. </div>
  12. </div>
  13. </template>
  14. <script>
  15. export default {
  16. props: {
  17. name: {type: String, default: ''},
  18. avatar: {type: String, default: ''},
  19. date: {type: String, default: ''}
  20. }
  21. }
  22. </script>
  23. <style scoped lang="scss">
  24. .user-tile {
  25. display: flex;
  26. &-author {
  27. align-self: center;
  28. margin-left: 10px;
  29. &-name {
  30. font-size: 17px;
  31. }
  32. }
  33. .date {
  34. font-size: 14px;
  35. }
  36. }
  37. </style>