39 lines
1.5 KiB
Vue
39 lines
1.5 KiB
Vue
<template>
|
|
<section>
|
|
<h2 class="text-base text-gray font-semibold">Превью:</h2>
|
|
<div class="mt-3 grid grid-cols-2 sm:grid-cols-3 gap-2 lg:gap-4">
|
|
<div v-for="common_media in purchase.common_medias" :key="common_media.id">
|
|
<div data-fancybox="preview" :data-src="common_media.url" class="cursor-pointer">
|
|
<img :src="common_media.url" class="w-full h-36 md:h-72 object-cover" alt="">
|
|
</div>
|
|
<a :href="common_media.url" download class="hover:text-orange transition-colors mt-2 text-gray-light text-sm">Скачать</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="mt-6">
|
|
<h2 class="text-base text-gray font-semibold">Медиа материалы:</h2>
|
|
<div class="mt-3 grid grid-cols-2 sm:grid-cols-3 gap-2 lg:gap-4">
|
|
<div v-for="paid_media in purchase.paid_medias" :key="paid_media.id">
|
|
<div data-fancybox="paid" :data-src="paid_media.url" class="cursor-pointer">
|
|
<img :src="paid_media.url" class="w-full h-36 md:h-72 object-cover" alt="">
|
|
</div>
|
|
<a :href="paid_media.url" download class="hover:text-orange transition-colors mt-2 text-gray-light text-sm">Скачать</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import { Fancybox } from "@fancyapps/ui/src/Fancybox/Fancybox.js";
|
|
import "@fancyapps/ui/dist/fancybox.css";
|
|
|
|
export default {
|
|
components: {},
|
|
props: {
|
|
purchase: Object,
|
|
},
|
|
};
|
|
</script>
|