You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

AppPhoto.vue 831B

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. <template>
  2. <figure class="c-photo" :class="{'photo--hover': hover}">
  3. <img :src="src">
  4. <p v-if="$slots.default" class="photo__label">
  5. <slot />
  6. </p>
  7. </figure>
  8. </template>
  9. <script>
  10. export default {
  11. props: {
  12. src: {
  13. type: String,
  14. required: true,
  15. },
  16. hover: {
  17. type: Boolean,
  18. default: true,
  19. },
  20. },
  21. }
  22. </script>
  23. <style lang="scss" scoped>
  24. .c-photo {
  25. @apply relative flex flex-col z-50;
  26. box-sizing: content-box;
  27. transition: all 0.2s ease-in-out;
  28. max-width: 200px;
  29. &.photo--hover:hover {
  30. transform: scale(1.5);
  31. img {
  32. @apply rounded;
  33. }
  34. }
  35. img {
  36. @apply w-full rounded-t shadow-md;
  37. height: auto;
  38. }
  39. .photo__label {
  40. @apply p-2 rounded-b bg-dark-500;
  41. @apply text-generic-300 text-sm font-semibold text-center;
  42. }
  43. }
  44. </style>