mahyargdz
255 lines
8.9 KiB
Vue
255 lines
8.9 KiB
Vue
<template>
|
|
<div class="details-project-page page">
|
|
<!---------------------------------- Section 1 ------------------------------------->
|
|
<section
|
|
class="s1-Img-BG"
|
|
:style="{ backgroundImage: `linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url(${project.cover})` }"
|
|
>
|
|
<div class="parallax">
|
|
<h1 class="h1 anim-fadeIn">{{ project.locale[$route.params.lang].title }}</h1>
|
|
</div>
|
|
</section>
|
|
|
|
<!---------------------------------- Section 2 ------------------------------------->
|
|
<section class="s2-Img-BG">
|
|
<div class="parallax">
|
|
<div class="row">
|
|
<div class="col-12 col-xl-6 col-lg-6 col-md-12 col-sm-12 s2-img">
|
|
<img :src="project.s2_image" :alt="project.locale[$route.params.lang].title" />
|
|
</div>
|
|
<div class="col-12 col-xl-6 col-lg-6 col-md-12 col-sm-12 s2-desc-row">
|
|
<div class="s2-body d-flex align-items-center">
|
|
<div class="container anim-fadeInStagger">
|
|
<div class="row">
|
|
<h2 class="h2 staggerItem">{{ content.s2.t1 }}</h2>
|
|
<div class="s2-body-desc staggerItem">
|
|
<span>{{ project.locale[$route.params.lang].description }}</span>
|
|
</div>
|
|
<div class="s2-Desc-View staggerItem">
|
|
<div class="row align-items-stretch s2-list-row">
|
|
<div class="col-12 col-md-2 s2-Desc" v-if="project.locale[$route.params.lang].client">
|
|
<h6 class="h6">{{ content.s2.t2 + ' : ' }}</h6>
|
|
</div>
|
|
<div
|
|
class="col-12 col-md-10 mb-3 mb-md-0 s2-Desc"
|
|
v-if="project.locale[$route.params.lang].client"
|
|
>
|
|
<p>{{ project.locale[$route.params.lang].client || '******' }}</p>
|
|
</div>
|
|
<div class="col-6 col-md-2 s2-Desc" v-if="project.locale[$route.params.lang].skills">
|
|
<h6 class="h6">{{ content.s2.t3 + ' : ' }}</h6>
|
|
</div>
|
|
<div
|
|
class="col-6 col-md-10 mb-3 mb-md-0 s2-Desc"
|
|
v-if="project.locale[$route.params.lang].skills"
|
|
>
|
|
<p>{{ project.locale[$route.params.lang].size || '******' }}</p>
|
|
</div>
|
|
<div class="col-6 col-md-2 s2-Desc">
|
|
<h6 class="h6" v-if="project.locale[$route.params.lang].area">{{ content.s2.t4 + ' : ' }}</h6>
|
|
</div>
|
|
<div
|
|
class="col-6 col-md-10 mb-3 mb-md-0 s2-Desc"
|
|
v-if="project.locale[$route.params.lang].website"
|
|
>
|
|
<p>{{ project.locale[$route.params.lang].area || '******' }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!---------------------------------- Section 3 ------------------------------------->
|
|
<section class="s3-BG">
|
|
<div class="parallax">
|
|
<div class="container">
|
|
<div class="s3-body anim-fadeInStagger">
|
|
<h6 class="h6 staggerItem">{{ project.locale[$route.params.lang].s3_title }}</h6>
|
|
<div class="s3-desc staggerItem">
|
|
<span>{{ project.locale[$route.params.lang].s3_description }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!---------------------------------- Section 4 ------------------------------------->
|
|
<section class="s4-Img-BG">
|
|
<div class="parallax">
|
|
<div id="slides">
|
|
<div class="slide" v-if="project.s4_image">
|
|
<div class="content">
|
|
<img :src="project.s4_image" :alt="project.locale[$route.params.lang].title" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="slide" v-for="item in project.images" :key="item._id">
|
|
<div class="content">
|
|
<img :src="item.thumb" :alt="project.locale[$route.params.lang].title" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!---------------------------------- Section lightBox ------------------------------------->
|
|
<section class="lightBoxImages">
|
|
<div class="images">
|
|
<a
|
|
v-for="(item, index) in project.images"
|
|
:key="item._id + 1"
|
|
:class="index === 0 ? 'btn' : 'hidden'"
|
|
:href="item.image"
|
|
>{{ content.s5.t1 }}</a
|
|
>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- <!–-------------------------------- Section 5 -----------------------------------–>-->
|
|
<!-- <section class="s5-BG">-->
|
|
<!-- <div class="parallax">-->
|
|
<!-- <div class="row">-->
|
|
<!-- <div class="col-12 col-xl-6 col-lg-6 col-md-12 col-sm-12 paddingCol">-->
|
|
<!-- <div class="s5-Img">-->
|
|
<!-- <img :src="project.s5_image" :alt="project.locale[$route.params.lang].title"-->
|
|
<!-- />-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
|
|
<!-- <div class="col-12 col-xl-6 col-lg-6 col-md-12 col-sm-12 s5-Body paddingCol">-->
|
|
<!-- <div class="container anim-fadeInStagger">-->
|
|
<!-- <div class="s5-Title staggerItem">-->
|
|
<!-- <h6 class="h6">{{ project.locale[$route.params.lang].s5_title }}</h6>-->
|
|
<!-- </div>-->
|
|
<!-- <div class="s5-desc staggerItem">-->
|
|
<!-- <span>{{ project.locale[$route.params.lang].s5_description }}</span>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- </section>-->
|
|
|
|
<!-- <!–-------------------------------- Section 6 -----------------------------------–>-->
|
|
<!-- <section class="s6-BG">-->
|
|
<!-- <div class="parallax">-->
|
|
<!-- <div class="row">-->
|
|
<!-- <div class="col-12 col-xl-6 col-lg-6 col-md-12 col-sm-12 s6-Body paddingCol">-->
|
|
<!-- <div class="container s6-body-row anim-fadeInStagger">-->
|
|
<!-- <div class="s6-Title staggerItem">-->
|
|
<!-- <h6 class="h6">{{ project.locale[$route.params.lang].s6_title }}</h6>-->
|
|
<!-- </div>-->
|
|
<!-- <div class="s6-desc staggerItem">-->
|
|
<!-- <span>{{ project.locale[$route.params.lang].s6_description }}</span>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- <div class="col-12 col-xl-6 col-lg-6 col-md-12 col-sm-12 paddingCol">-->
|
|
<!-- <div class="s6-Img">-->
|
|
<!-- <img :src="project.s6_image" :alt="project.locale[$route.params.lang].title"-->
|
|
<!-- />-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- </section>-->
|
|
|
|
<!---------------------------------- Section 7 ------------------------------------->
|
|
<section class="s7-BG">
|
|
<div class="parallax">
|
|
<div class="container">
|
|
<div class="s7-body">
|
|
<h6 class="h6">{{ content.s7.t1 }}</h6>
|
|
<div class="s7-desc">
|
|
<span>{{ content.s7.t2 }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
if (process.client) require('slick-carousel')
|
|
|
|
import {
|
|
fadeInAnimation,
|
|
fadeInStaggerAnimation,
|
|
leftToRightAnimation,
|
|
leftToRightStaggerAnimation,
|
|
numberAnimation,
|
|
progressAnimation,
|
|
rightToLeftAnimation
|
|
} from '@/utils/animations'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
project: null
|
|
}
|
|
},
|
|
mounted() {
|
|
this.$nextTick(() => {
|
|
fadeInAnimation(this.$gsap)
|
|
leftToRightAnimation(this.$gsap)
|
|
fadeInStaggerAnimation(this.$gsap)
|
|
leftToRightStaggerAnimation(this.$gsap)
|
|
numberAnimation(this.$gsap)
|
|
progressAnimation(this.$gsap)
|
|
rightToLeftAnimation(this.$gsap)
|
|
//
|
|
new SimpleLightbox('.details-project-page .lightBoxImages a')
|
|
|
|
$('#slides').slick({
|
|
autoplay: true,
|
|
accessibility: false,
|
|
arrows: false,
|
|
dots: false,
|
|
rtl: this.$route.params.lang === 'fa'
|
|
// infinite: true,
|
|
// speed: 500,
|
|
// fade: true,
|
|
// cssEase: "linear",
|
|
})
|
|
|
|
//--------------------------------------------------------- Section 1
|
|
this.$gsap
|
|
.timeline({
|
|
scrollTrigger: {
|
|
trigger: '.s2-Img-BG',
|
|
scrub: true,
|
|
start: 'top top'
|
|
}
|
|
})
|
|
.to($('.s1-Img-BG .parallax'), {
|
|
duration: 9,
|
|
opacity: 0,
|
|
y: '50%'
|
|
})
|
|
})
|
|
},
|
|
async asyncData({ $axios, params, error }) {
|
|
try {
|
|
const project = await $axios.get(`/api/public/project/${params.project}`)
|
|
|
|
return {
|
|
project: project.data
|
|
}
|
|
} catch (e) {
|
|
error({ status: 404, message: 'page not found' })
|
|
}
|
|
},
|
|
computed: {
|
|
content() {
|
|
return this.$store.state.content.detailsProject[this.$route.params.lang]
|
|
}
|
|
}
|
|
}
|
|
</script>
|