Você não pode selecionar mais de 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.

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