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.

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  1. <template>
  2. <div class="box photo">
  3. <div class="box__photo">
  4. <video v-if="file.isVideo"
  5. class="photo__video"
  6. :src="file.url"
  7. autoplay
  8. muted
  9. loop
  10. data-private
  11. @click="openPreview" />
  12. <div v-else
  13. class="photo__preview"
  14. :style="{ backgroundImage: `url('${file.url}')` }"
  15. data-private
  16. @click="openPreview" />
  17. </div>
  18. </div>
  19. </template>
  20. <script>
  21. export default {
  22. props: {
  23. file: {
  24. type: Object,
  25. required: true,
  26. },
  27. },
  28. methods: {
  29. openPreview() {
  30. this.file.openItem()
  31. },
  32. },
  33. }
  34. </script>
  35. <style lang="scss" scoped>
  36. .photo {
  37. @apply mb-0;
  38. &::v-deep {
  39. .box__photo {
  40. background-image: url('~@/assets/images/repeated-square-dark.png');
  41. will-change: transform;
  42. height: 300px;
  43. }
  44. }
  45. }
  46. .photo__preview {
  47. @apply absolute top-0 bottom-0 left-0 right-0 z-10;
  48. @apply bg-contain bg-no-repeat bg-center;
  49. cursor: zoom-in;
  50. }
  51. .photo__video {
  52. @apply h-full w-full overflow-hidden;
  53. cursor: zoom-in;
  54. }
  55. </style>