mahyargdz
116 lines
3.8 KiB
Vue
116 lines
3.8 KiB
Vue
<template>
|
|
<section class="s4">
|
|
<div class="row">
|
|
<div class="col-12 gallery-btn">
|
|
<div class="mt-2 view-link">
|
|
<button
|
|
@click="setChangeInPage({...$route.query,galleryType: 'image',page: 1})"
|
|
class="btn bigBtn btn-primary"
|
|
:class="galleryType === 'image' && 'btn-active'"
|
|
>
|
|
<span>عکس</span>
|
|
</button>
|
|
</div>
|
|
<div class="mt-2 view-link">
|
|
<button
|
|
@click="setChangeInPage({...$route.query, galleryType: 'video',page: 1})"
|
|
class="btn bigBtn btn-primary"
|
|
:class="galleryType === 'video' && 'btn-active'"
|
|
>
|
|
<span>فیلم</span>
|
|
</button>
|
|
</div>
|
|
<div class="mt-2 view-link">
|
|
<button
|
|
@click="setChangeInPage({...$route.query,galleryType: 'graphic',page: 1})"
|
|
class="btn bigBtn btn-primary"
|
|
:class="galleryType === 'graphic' && 'btn-active'"
|
|
>
|
|
<span>گرافیک</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- <div class="favorites view-gallery" v-if="media.favorites.length">-->
|
|
<div class="favorites view-gallery">
|
|
<LineTxt label="چندرسانه ای"/>
|
|
<div class="sectionStyle" v-if="media.favorites.length">
|
|
<div id="mediaFavorites">
|
|
<div class="slide" v-for="(item,index) in media.favorites" :key="item._id + 1" :class="index && 'hide'">
|
|
<nuxt-link :to="url(item._id)" :title="item.title" class="view-item">
|
|
<img :src="item.cover" :alt="item.title">
|
|
<div class="title">
|
|
<h3>{{ item.title }}</h3>
|
|
</div>
|
|
</nuxt-link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="items">
|
|
<!-- <LineTxt v-if="galleryType === 'image'" :label="` تصاویر ${category.category.title}`"/>-->
|
|
<!-- <LineTxt v-if="galleryType === 'video'" :label="` فیلم های ${category.category.title}`"/>-->
|
|
<!-- <LineTxt v-if="galleryType === 'graphic'" :label="` گرافیک های ${category.category.title}`"/>-->
|
|
|
|
<div class="sectionStyle" v-if="media.all.docs.length">
|
|
<div class="view-gallery">
|
|
<div class="row">
|
|
<div class="col-12 col-md-3 mb-3" v-for="item in media.all.docs" :key="item._id">
|
|
<nuxt-link class="view-item" :to="url(item._id)" :title="item.title">
|
|
<img :src="item.thumbCover" :alt="item.title">
|
|
<div class="title">
|
|
<h5>{{ item.title }}</h5>
|
|
</div>
|
|
</nuxt-link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="not-found" v-else>
|
|
<p>موردی وجود ندارد!</p>
|
|
</div>
|
|
</div>
|
|
<div class="paginate">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<el-pagination
|
|
layout="next, pager, prev"
|
|
v-if="media.all.totalPages > 1"
|
|
class="el-pagination"
|
|
@current-change="pageNumber"
|
|
:current-page="Number($route.query.page)"
|
|
:page-count="Number(media.all.totalPages)"
|
|
>
|
|
</el-pagination>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
if (process.client) require("slick-carousel")
|
|
|
|
export default {
|
|
props: ['setChangeInPage', 'galleryType', 'media', 'category', 'pageNumber', 'url'],
|
|
mounted() {
|
|
$(document).ready(() => {
|
|
$("#mediaFavorites").on('init', function () {
|
|
$('#mediaFavorites .slide').removeClass('hide')
|
|
})
|
|
$("#mediaFavorites").slick({
|
|
dots: true,
|
|
slidesToShow: 1,
|
|
rtl: true,
|
|
autoplay: true,
|
|
autoplaySpeed: 3000,
|
|
speed: 1000,
|
|
arrows: false,
|
|
infinite: false,
|
|
pauseOnHover: true
|
|
})
|
|
})
|
|
}
|
|
}
|
|
</script>
|