mahyargdz
92 lines
2.1 KiB
Vue
92 lines
2.1 KiB
Vue
<template>
|
|
<div class="gallery-page page">
|
|
<!---------------------------------- Section 1 ------------------------------------->
|
|
<section class="s1-Img-BG">
|
|
<div
|
|
class="parallax"
|
|
:style="{
|
|
background: `linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),url(${cover ? cover : defaultCover})`
|
|
}"
|
|
>
|
|
<h1 class="h1 anim-fadeIn" :style="{ color: $route.params.lang === 'fa' && '#fff' }">{{ content.s1.t1 }}</h1>
|
|
</div>
|
|
</section>
|
|
|
|
<!---------------------------------- Section 3 ------------------------------------->
|
|
<section class="s3-BG section">
|
|
<div class="container">
|
|
<template v-if="images.length">
|
|
<div class="row">
|
|
<div class="col-12 col-md-3" v-for="item in images" :key="item._id">
|
|
<div class="imgBox">
|
|
<a :href="item.image">
|
|
<img :src="item.thumb" :alt="item.locale[$route.params.lang].title" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<div class="row" v-else>
|
|
<div class="col-12 s3-notFound">
|
|
<h6 class="h6 notFound">{{ content.s3.t2 }}</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
images: null,
|
|
cover: null,
|
|
defaultCover: '/img/GalleryPage/page-title.png'
|
|
}
|
|
},
|
|
|
|
mounted() {
|
|
this.$nextTick(() => {
|
|
new SimpleLightbox('.gallery-page .s3-BG .imgBox a')
|
|
})
|
|
|
|
//--------------------------------------------------------- Section 1
|
|
// this.$gsap.timeline({
|
|
// scrollTrigger: {
|
|
// trigger: ".s2-BG",
|
|
// scrub: true,
|
|
// start: "top top",
|
|
// }
|
|
// })
|
|
// .to($('.s1-Img-BG .parallax'), {
|
|
// duration: 9,
|
|
// opacity: 0,
|
|
// y: '50%'
|
|
// })
|
|
},
|
|
computed: {
|
|
content() {
|
|
return this.$store.state.content.gallery[this.$route.params.lang]
|
|
},
|
|
cover() {
|
|
return this.$store.state.global.cover?.gallery
|
|
}
|
|
},
|
|
|
|
async asyncData({ $axios, params }) {
|
|
try {
|
|
const images = await $axios.get(`/api/public/gallery/${params.images}`)
|
|
return {
|
|
images: images.data
|
|
}
|
|
} catch (e) {
|
|
console.log('e', e.message)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped></style>
|