mahyargdz
116 lines
2.9 KiB
Vue
116 lines
2.9 KiB
Vue
<template>
|
|
<div class="catalog-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 2 ------------------------------------->
|
|
<section class="s2-BG section">
|
|
<div class="parallax">
|
|
<div class="container">
|
|
<div class="row" v-if="catalogs.length">
|
|
<div
|
|
class="col-12 col-lg-3 mb-3"
|
|
v-for="item in catalogs"
|
|
:key="item._id"
|
|
v-if="($route.params.lang === 'fa' && item.showInFa) || ($route.params.lang === 'en' && item.showInEn)"
|
|
>
|
|
<div class="s2-item">
|
|
<img
|
|
:src="item.cover"
|
|
:alt="item.locale[$route.params.lang].title"
|
|
:title="item.locale[$route.params.lang].title"
|
|
/>
|
|
<div class="s2-body">
|
|
<a :href="item.file" target="_blank" :title="item.locale[$route.params.lang].title" download>{{
|
|
content.s2.t1
|
|
}}</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row" v-else>
|
|
<div class="col-12 s2-notFound">
|
|
<h6 class="h6 notFound">{{ content.s2.t2 }}</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
fadeInAnimation,
|
|
fadeInStaggerAnimation,
|
|
leftToRightAnimation,
|
|
leftToRightStaggerAnimation,
|
|
numberAnimation,
|
|
progressAnimation,
|
|
rightToLeftAnimation
|
|
} from '@/utils/animations'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
catalogs: null,
|
|
defaultCover: '/img/BlogPage/page-title.png'
|
|
}
|
|
},
|
|
mounted() {
|
|
this.$nextTick(() => {
|
|
fadeInAnimation(this.$gsap)
|
|
leftToRightAnimation(this.$gsap)
|
|
fadeInStaggerAnimation(this.$gsap)
|
|
leftToRightStaggerAnimation(this.$gsap)
|
|
numberAnimation(this.$gsap)
|
|
progressAnimation(this.$gsap)
|
|
rightToLeftAnimation(this.$gsap),
|
|
//--------------------------------------------------------- Section 1
|
|
this.$gsap
|
|
.timeline({
|
|
scrollTrigger: {
|
|
trigger: '.s2-BG',
|
|
scrub: true,
|
|
start: 'top top'
|
|
}
|
|
})
|
|
.to($('.s1-Img-BG > div'), {
|
|
duration: 9,
|
|
opacity: 0,
|
|
y: '50%'
|
|
})
|
|
})
|
|
},
|
|
async asyncData({ $axios, error }) {
|
|
try {
|
|
const catalogs = await $axios.get('/api/public/catalogs')
|
|
|
|
return {
|
|
catalogs: catalogs.data
|
|
}
|
|
} catch (e) {
|
|
error({ status: 500, message: 'there is a problem here' })
|
|
}
|
|
},
|
|
computed: {
|
|
content() {
|
|
return this.$store.state.content.catalog[this.$route.params.lang]
|
|
},
|
|
cover() {
|
|
return this.$store.state.global.cover?.catalog
|
|
}
|
|
}
|
|
}
|
|
</script>
|