mahyargdz
276 lines
9.8 KiB
Vue
276 lines
9.8 KiB
Vue
<template>
|
|
<div class="activities-details-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-Img-BG">
|
|
<div class="parallax">
|
|
<div class="row">
|
|
<div class="col-12 col-lg-6 s2-item">
|
|
<img src="/img/ActivitiesPage/DetailsPage/skid.jpg" alt="" class="s2-img" />
|
|
</div>
|
|
<div class="col-12 col-lg-6 centerItem s2-item">
|
|
<div class="s2-body">
|
|
<div class="container anim-fadeInStagger">
|
|
<div class="row">
|
|
<div class="s2-body-desc staggerItem">
|
|
<p>
|
|
{{ content.s2.t1 }}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="s2-Desc-View staggerItem">
|
|
<div class="row">
|
|
<div class="col-12 col-md-6 paddingCol">
|
|
<div class="check" @click="goDown('.p1')">
|
|
<i class="fas fa-check-circle"></i>
|
|
<p>
|
|
{{ content.s2.t2 }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-md-6 paddingCol">
|
|
<div class="check" @click="goDown('.p2')">
|
|
<i class="fas fa-check-circle"></i>
|
|
<p>
|
|
{{ content.s2.t3 }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<!-- <div class="col-12 col-md-6 paddingCol">-->
|
|
<!-- <div class="check" @click="goDown('.p3')">-->
|
|
<!-- <i class="fas fa-check-circle"></i>-->
|
|
<!-- <p>-->
|
|
<!-- {{ content.s2.t4 }}-->
|
|
<!-- </p>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<div class="col-12 col-md-6 paddingCol">
|
|
<div class="check" @click="goDown('.p4')">
|
|
<i class="fas fa-check-circle"></i>
|
|
<p>
|
|
{{ content.s2.t5 }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-md-6 paddingCol">
|
|
<div class="check" @click="goDown('.p4')">
|
|
<i class="fas fa-check-circle"></i>
|
|
<p>
|
|
{{ content.s2.t6 }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-md-6 paddingCol">
|
|
<div class="check" @click="goDown('.p4')">
|
|
<i class="fas fa-check-circle"></i>
|
|
<p>
|
|
{{ content.s2.t7 }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-md-6 paddingCol">
|
|
<div class="check" @click="goDown('.p4')">
|
|
<i class="fas fa-check-circle"></i>
|
|
<p>
|
|
{{ content.s2.t8 }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="s2-body-desc2 staggerItem">
|
|
<p>
|
|
{{ content.s2.t9 }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!---------------------------------- Section 3 ------------------------------------->
|
|
<!-- <section class="s3-BG section">-->
|
|
<!-- <div class="container">-->
|
|
<!-- <div class="row">-->
|
|
|
|
<!-- <div class="col-12 item reverse anim-fadeInStagger p1 paddingCol">-->
|
|
<!-- <div class="row staggerItem">-->
|
|
<!-- <div class="col-12 col-md-7 paddingCol">-->
|
|
<!-- <img-->
|
|
<!-- src="/img/ActivitiesPage/DetailsPage/drilling1.jpg"-->
|
|
<!-- alt=""-->
|
|
<!-- />-->
|
|
<!-- </div>-->
|
|
|
|
<!-- <div class="col-12 col-md-5 d-flex flex-column justify-content-center paddingCol">-->
|
|
<!-- <div class="txt">-->
|
|
<!-- <h6 class="h6">-->
|
|
<!-- {{ content.s3.t1 }}-->
|
|
<!-- </h6>-->
|
|
|
|
<!-- <ul class="list2">-->
|
|
<!-- <li><i class="fas fa-check"></i> {{ content.s3.t2 }}</li>-->
|
|
<!-- <li><i class="fas fa-check"></i> {{ content.s3.t3 }}</li>-->
|
|
<!-- <li><i class="fas fa-check"></i> {{ content.s3.t4 }}</li>-->
|
|
<!-- <li><i class="fas fa-check"></i> {{ content.s3.t5 }}</li>-->
|
|
<!-- </ul>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
|
|
<!-- <div class="col-12 item anim-fadeInStagger p2 paddingCol">-->
|
|
<!-- <div class="row staggerItem">-->
|
|
<!-- <div class="col-12 col-md-7 paddingCol">-->
|
|
<!-- <img-->
|
|
<!-- src="/img/ActivitiesPage/DetailsPage/drilling2.jpg"-->
|
|
<!-- alt=""-->
|
|
<!-- />-->
|
|
<!-- </div>-->
|
|
|
|
<!-- <div class="col-12 col-md-5 d-flex flex-column justify-content-center paddingCol">-->
|
|
<!-- <div class="txt">-->
|
|
<!-- <h6 class="h6">{{ content.s4.t1 }}</h6>-->
|
|
|
|
<!-- <ul class="list2">-->
|
|
<!-- <li><i class="fas fa-check"></i>{{ content.s4.t1 }}</li>-->
|
|
<!-- <li><i class="fas fa-check"></i>{{ content.s4.t2 }}</li>-->
|
|
<!-- <li><i class="fas fa-check"></i>{{ content.s4.t3 }}</li>-->
|
|
<!-- <li><i class="fas fa-check"></i>{{ content.s4.t4 }}</li>-->
|
|
<!-- <li><i class="fas fa-check"></i>{{ content.s4.t5 }}</li>-->
|
|
<!-- <li><i class="fas fa-check"></i>{{ content.s4.t6 }}</li>-->
|
|
<!-- <li><i class="fas fa-check"></i>{{ content.s4.t7 }}</li>-->
|
|
<!-- <li><i class="fas fa-check"></i>{{ content.s4.t8 }}</li>-->
|
|
<!-- <li><i class="fas fa-check"></i>{{ content.s4.t9 }}</li>-->
|
|
<!-- <li><i class="fas fa-check"></i>{{ content.s4.t10 }}</li>-->
|
|
<!-- <li><i class="fas fa-check"></i>{{ content.s4.t11 }}</li>-->
|
|
<!-- <li><i class="fas fa-check"></i>{{ content.s4.t12 }}</li>-->
|
|
<!-- <li><i class="fas fa-check"></i>{{ content.s4.t13 }}</li>-->
|
|
<!-- <li><i class="fas fa-check"></i>{{ content.s4.t14 }}</li>-->
|
|
<!-- </ul>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
|
|
<!-- <div class="col-12 item reverse anim-fadeInStagger p3 paddingCol">-->
|
|
<!-- <div class="row staggerItem">-->
|
|
<!-- <div class="col-12 col-md-7 paddingCol">-->
|
|
<!-- <img-->
|
|
<!-- src="/img/ActivitiesPage/DetailsPage/drilling3.jpg"-->
|
|
<!-- alt=""-->
|
|
<!-- />-->
|
|
<!-- </div>-->
|
|
|
|
<!-- <div class="col-12 col-md-5 d-flex flex-column justify-content-center paddingCol">-->
|
|
<!-- <div class="txt">-->
|
|
<!-- <h6 class="h6">-->
|
|
<!-- {{ content.s5.t1 }}-->
|
|
<!-- </h6>-->
|
|
|
|
<!-- <ul class="list2">-->
|
|
<!-- <li><i class="fas fa-check"></i> {{ content.s5.t2 }}</li>-->
|
|
<!-- <li><i class="fas fa-check"></i> {{ content.s5.t3 }}</li>-->
|
|
<!-- <li><i class="fas fa-check"></i> {{ content.s5.t4 }}</li>-->
|
|
<!-- <li><i class="fas fa-check"></i> {{ content.s5.t5 }}</li>-->
|
|
<!-- </ul>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- <div class="col-12 item descBottom p4 paddingCol">-->
|
|
<!-- <div class="container">-->
|
|
<!-- <div class="row">-->
|
|
<!-- <div class="col-12 paddingCol">-->
|
|
<!-- <div class="txt">-->
|
|
<!-- <h6 class="h6 mb-5">-->
|
|
<!-- {{ content.s6.t1 }}-->
|
|
<!-- </h6>-->
|
|
|
|
<!-- <p>-->
|
|
<!-- {{ content.s6.t2 }}-->
|
|
<!-- </p>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
|
|
<!-- </section>-->
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
fadeInAnimation,
|
|
fadeInStaggerAnimation,
|
|
leftToRightAnimation,
|
|
leftToRightStaggerAnimation,
|
|
numberAnimation,
|
|
progressAnimation
|
|
} from '@/utils/animations'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
defaultCover: '/img/ActivitiesPage/page-title.png'
|
|
}
|
|
},
|
|
mounted() {
|
|
this.$nextTick(() => {
|
|
fadeInAnimation(this.$gsap)
|
|
leftToRightAnimation(this.$gsap)
|
|
fadeInStaggerAnimation(this.$gsap)
|
|
leftToRightStaggerAnimation(this.$gsap)
|
|
numberAnimation(this.$gsap)
|
|
progressAnimation(this.$gsap)
|
|
})
|
|
//--------------------------------------------------------- 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%'
|
|
})
|
|
},
|
|
methods: {
|
|
goDown(element) {
|
|
this.$gsap.to(window, { scrollTo: element, duration: 0.7 })
|
|
}
|
|
},
|
|
computed: {
|
|
content() {
|
|
return this.$store.state.content.skid[this.$route.params.lang]
|
|
},
|
|
cover() {
|
|
return this.$store.state.global.cover?.activity
|
|
}
|
|
}
|
|
}
|
|
</script>
|