update:add ci cd files ==> do not edit those file
This commit is contained in:
mahyargdz
@@ -0,0 +1,165 @@
|
||||
<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 centerItem s2-item">
|
||||
<div class="s2-body">
|
||||
<div class="container anim-fadeInStagger">
|
||||
<div class="_s2-Desc-View">
|
||||
<div class="check">
|
||||
<i class="fas fa-check-circle"></i>
|
||||
<p>{{ content.s2.t1 }}</p>
|
||||
</div>
|
||||
<div class="check">
|
||||
<i class="fas fa-check-circle"></i>
|
||||
<p>{{ content.s2.t2 }}</p>
|
||||
</div>
|
||||
<div class="check">
|
||||
<i class="fas fa-check-circle"></i>
|
||||
<p>{{ content.s2.t3 }}</p>
|
||||
</div>
|
||||
<div class="check">
|
||||
<i class="fas fa-check-circle"></i>
|
||||
<p>{{ content.s2.t4 }}</p>
|
||||
</div>
|
||||
<div class="check">
|
||||
<i class="fas fa-check-circle"></i>
|
||||
<p>{{ content.s2.t5 }}</p>
|
||||
</div>
|
||||
<div class="check">
|
||||
<i class="fas fa-check-circle"></i>
|
||||
<p>{{ content.s2.t6 }}</p>
|
||||
</div>
|
||||
<div class="check">
|
||||
<i class="fas fa-check-circle"></i>
|
||||
<p>{{ content.s2.t7 }}</p>
|
||||
</div>
|
||||
<div class="check">
|
||||
<i class="fas fa-check-circle"></i>
|
||||
<p>{{ content.s2.t8 }}</p>
|
||||
</div>
|
||||
<div class="check">
|
||||
<i class="fas fa-check-circle"></i>
|
||||
<p>{{ content.s2.t9 }}</p>
|
||||
</div>
|
||||
<div class="check">
|
||||
<i class="fas fa-check-circle"></i>
|
||||
<p>{{ content.s2.t10 }}</p>
|
||||
</div>
|
||||
<div class="check">
|
||||
<i class="fas fa-check-circle"></i>
|
||||
<p>{{ content.s2.t11 }}</p>
|
||||
</div>
|
||||
<div class="check">
|
||||
<i class="fas fa-check-circle"></i>
|
||||
<p>{{ content.s2.t12 }}</p>
|
||||
</div>
|
||||
<div class="check">
|
||||
<i class="fas fa-check-circle"></i>
|
||||
<p>{{ content.s2.t13 }}</p>
|
||||
</div>
|
||||
<div class="check">
|
||||
<i class="fas fa-check-circle"></i>
|
||||
<p>{{ content.s2.t14 }}</p>
|
||||
</div>
|
||||
<div class="check">
|
||||
<i class="fas fa-check-circle"></i>
|
||||
<p>{{ content.s2.t15 }}</p>
|
||||
</div>
|
||||
<div class="check">
|
||||
<i class="fas fa-check-circle"></i>
|
||||
<p>{{ content.s2.t16 }}</p>
|
||||
</div>
|
||||
<div class="check">
|
||||
<i class="fas fa-check-circle"></i>
|
||||
<p>{{ content.s2.t17 }}</p>
|
||||
</div>
|
||||
<div class="check">
|
||||
<i class="fas fa-check-circle"></i>
|
||||
<p>{{ content.s2.t18 }}</p>
|
||||
</div>
|
||||
<div class="check">
|
||||
<i class="fas fa-check-circle"></i>
|
||||
<p>{{ content.s2.t19 }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a class="btn btn-primary" href="./../../../static/DEISEL.pdf" download="">دانلود pdf</a>
|
||||
</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.dieselConnex[this.$route.params.lang]
|
||||
},
|
||||
cover() {
|
||||
return this.$store.state.global.cover?.activity
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,159 @@
|
||||
<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/api.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 mb-3">
|
||||
<p>
|
||||
{{ content.s2.t1 }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- <div class="_s2-Desc-View">-->
|
||||
<!-- <div class="check">-->
|
||||
<!-- <i class="fas fa-check-circle"></i>-->
|
||||
<!-- <p>-->
|
||||
<!-- {{ content.s2.t2 }}-->
|
||||
<!-- </p>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="check">-->
|
||||
<!-- <i class="fas fa-check-circle"></i>-->
|
||||
<!-- <p>-->
|
||||
<!-- {{ content.s2.t3 }}-->
|
||||
<!-- </p>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="check">-->
|
||||
<!-- <i class="fas fa-check-circle"></i>-->
|
||||
<!-- <p>-->
|
||||
<!-- {{ content.s2.t4 }}-->
|
||||
<!-- </p>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
|
||||
<template>
|
||||
<el-table ref="singleTable" :data="tableData" border style="width: 100%">
|
||||
<el-table-column property="v1" width="120"></el-table-column>
|
||||
<el-table-column property="v2" :label="content.s2.t6"></el-table-column>
|
||||
<el-table-column property="v3" :label="content.s2.t7"></el-table-column>
|
||||
<el-table-column property="v4" :label="content.s2.t8"></el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
<div class="view_input">
|
||||
<SheetWCM mini whiteTxt />
|
||||
</div>
|
||||
</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%'
|
||||
})
|
||||
|
||||
this.tableData[
|
||||
{
|
||||
date: this.content.s2.t9
|
||||
}
|
||||
]
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
goDown(element) {
|
||||
this.$gsap.to(window, { scrollTo: element, duration: 0.7 })
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
content() {
|
||||
return this.$store.state.content.drilling[this.$route.params.lang]
|
||||
},
|
||||
cover() {
|
||||
return this.$store.state.global.cover?.activity
|
||||
},
|
||||
tableData() {
|
||||
return [
|
||||
{
|
||||
v1: this.content.s2.t9,
|
||||
v2: this.content.s2.t12,
|
||||
v3: this.content.s2.t13,
|
||||
v4: this.content.s2.t14
|
||||
},
|
||||
{
|
||||
v1: this.content.s2.t10,
|
||||
v2: this.content.s2.t15,
|
||||
v3: this.content.s2.t16,
|
||||
v4: this.content.s2.t17
|
||||
},
|
||||
{
|
||||
v1: this.content.s2.t11,
|
||||
v2: this.content.s2.t18,
|
||||
v3: this.content.s2.t19,
|
||||
v4: this.content.s2.t20
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,148 @@
|
||||
<template>
|
||||
<div class="activities-page page">
|
||||
<!---------------------------------- Section 1 ------------------------------------->
|
||||
<section class="s1-Img-BG">
|
||||
<div
|
||||
class="parallax d-flex align-items-center flex-column justify-content-center"
|
||||
: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>
|
||||
<span class="anim-fadeIn">
|
||||
{{ content.s1.t2 }}
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!---------------------------------- Section 2 ------------------------------------->
|
||||
<section class="s2-BG section">
|
||||
<div class="parallax">
|
||||
<div class="container">
|
||||
<div class="row anim-fadeIn">
|
||||
<div class="col-12 col-sm-6 col-lg-4 s2-align-col anim-fadeIn">
|
||||
<div class="s2-item">
|
||||
<nuxt-link :to="{ name: 'lang-activities-piping', params: { lang: $route.params.lang } }">
|
||||
<img src="/img/ActivitiesPage/piping.jpg" alt="" />
|
||||
<div class="s2-body">
|
||||
<StrokedTxt text="01" />
|
||||
<h4 class="h4">{{ content.s2.t1 }}</h4>
|
||||
</div>
|
||||
</nuxt-link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-sm-6 col-lg-4 s2-align-col anim-fadeIn">
|
||||
<div class="s2-item">
|
||||
<nuxt-link :to="{ name: 'lang-activities-drilling', params: { lang: $route.params.lang } }">
|
||||
<img src="/img/ActivitiesPage/drill.jpg" alt="" />
|
||||
<div class="s2-body">
|
||||
<StrokedTxt text="02" />
|
||||
<h4 class="h4">{{ content.s2.t2 }}</h4>
|
||||
</div>
|
||||
</nuxt-link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-sm-6 col-lg-4 s2-align-col anim-fadeIn">
|
||||
<div class="s2-item">
|
||||
<nuxt-link :to="{ name: 'lang-activities-ward', params: { lang: $route.params.lang } }">
|
||||
<img src="/img/ActivitiesPage/petro.jpg" alt="" />
|
||||
<div class="s2-body">
|
||||
<StrokedTxt text="03" />
|
||||
<h4 class="h4">{{ content.s2.t3 }}</h4>
|
||||
</div>
|
||||
</nuxt-link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-sm-6 col-lg-4 s2-align-col anim-fadeIn">
|
||||
<div class="s2-item">
|
||||
<nuxt-link :to="{ name: 'lang-activities-sm', params: { lang: $route.params.lang } }">
|
||||
<img src="/img/ActivitiesPage/Salt.jpg" alt="" />
|
||||
<div class="s2-body">
|
||||
<StrokedTxt text="04" />
|
||||
<h4 class="h4">{{ content.s2.t4 }}</h4>
|
||||
</div>
|
||||
</nuxt-link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-sm-6 col-lg-4 s2-align-col anim-fadeIn">
|
||||
<div class="s2-item">
|
||||
<nuxt-link :to="{ name: 'lang-activities-srp', params: { lang: $route.params.lang } }">
|
||||
<img src="/img/ActivitiesPage/faraz.jpg" alt="" />
|
||||
<div class="s2-body">
|
||||
<StrokedTxt text="05" />
|
||||
<h4 class="h4">{{ content.s2.t5 }}</h4>
|
||||
</div>
|
||||
</nuxt-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { fadeInAnimation, fadeInStaggerAnimation } from '~/utils/animations'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
defaultCover: '/img/ActivitiesPage/page-title.png'
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
fadeInAnimation(this.$gsap)
|
||||
fadeInStaggerAnimation(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%'
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
computed: {
|
||||
content() {
|
||||
return this.$store.state.content.activities[this.$route.params.lang]
|
||||
},
|
||||
cover() {
|
||||
return this.$store.state.global.cover?.activity
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.activities-page .s2-BG .parallax .container .s2-align-col .s2-item .s2-body {
|
||||
padding: 13px 25px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
background: #00000075;
|
||||
min-height: 138px;
|
||||
width: 100%;
|
||||
}
|
||||
.activities-page .s2-BG .parallax .container .s2-align-col .s2-item {
|
||||
width: auto;
|
||||
margin-bottom: 25px;
|
||||
background-color: #888585;
|
||||
direction: ltr;
|
||||
text-align: left;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,120 @@
|
||||
<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/erw.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="col-12 s2-body-desc staggerItem mb-3">
|
||||
<p>
|
||||
{{ content.s2.t1 }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template>
|
||||
<el-table :data="tableData" border style="width: 100%">
|
||||
<el-table-column prop="v1" :label="content.s2.t14"> </el-table-column>
|
||||
<el-table-column prop="v2" :label="content.s2.t7"> </el-table-column>
|
||||
<el-table-column prop="v3" :label="content.s2.t8"> </el-table-column>
|
||||
<el-table-column prop="v4" :label="content.s2.t9"> </el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
<div class="view_input">
|
||||
<PipeWCM mini whiteTxt />
|
||||
</div>
|
||||
</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.piping[this.$route.params.lang]
|
||||
},
|
||||
cover() {
|
||||
return this.$store.state.global.cover?.activity
|
||||
},
|
||||
tableData() {
|
||||
return [
|
||||
{
|
||||
v1: this.content.s2.t13,
|
||||
v2: this.content.s2.t10,
|
||||
v3: this.content.s2.t11,
|
||||
v4: this.content.s2.t12
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,275 @@
|
||||
<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>
|
||||
@@ -0,0 +1,233 @@
|
||||
<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/srp.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>
|
||||
<p>{{ content.s2.t6 }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="_s2-Desc-View">
|
||||
<div class="check">
|
||||
<i class="fas fa-check-circle"></i>
|
||||
<p>
|
||||
{{ content.s2.t2 }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="check">
|
||||
<i class="fas fa-check-circle"></i>
|
||||
<p>
|
||||
{{ content.s2.t3 }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="check">
|
||||
<i class="fas fa-check-circle"></i>
|
||||
<p>
|
||||
{{ content.s2.t4 }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="check">
|
||||
<i class="fas fa-check-circle"></i>
|
||||
<p>
|
||||
{{ content.s2.t5 }}
|
||||
</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.srp[this.$route.params.lang]
|
||||
},
|
||||
cover() {
|
||||
return this.$store.state.global.cover?.activity
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,161 @@
|
||||
<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 centerItem s2-item">
|
||||
<div class="s2-body">
|
||||
<div class="container anim-fadeInStagger">
|
||||
<div class="_s2-Desc-View">
|
||||
<div class="check">
|
||||
<i class="fas fa-check-circle"></i>
|
||||
<p>{{ content.s2.t1 }}</p>
|
||||
</div>
|
||||
<div class="check">
|
||||
<i class="fas fa-check-circle"></i>
|
||||
<p>{{ content.s2.t2 }}</p>
|
||||
</div>
|
||||
<div class="check">
|
||||
<i class="fas fa-check-circle"></i>
|
||||
<p>{{ content.s2.t3 }}</p>
|
||||
</div>
|
||||
<div class="check">
|
||||
<i class="fas fa-check-circle"></i>
|
||||
<p>{{ content.s2.t4 }}</p>
|
||||
</div>
|
||||
<div class="check">
|
||||
<i class="fas fa-check-circle"></i>
|
||||
<p>{{ content.s2.t5 }}</p>
|
||||
</div>
|
||||
<div class="check">
|
||||
<i class="fas fa-check-circle"></i>
|
||||
<p>{{ content.s2.t6 }}</p>
|
||||
</div>
|
||||
<div class="check">
|
||||
<i class="fas fa-check-circle"></i>
|
||||
<p>{{ content.s2.t7 }}</p>
|
||||
</div>
|
||||
<div class="check">
|
||||
<i class="fas fa-check-circle"></i>
|
||||
<p>{{ content.s2.t8 }}</p>
|
||||
</div>
|
||||
<div class="check">
|
||||
<i class="fas fa-check-circle"></i>
|
||||
<p>{{ content.s2.t9 }}</p>
|
||||
</div>
|
||||
<div class="check">
|
||||
<i class="fas fa-check-circle"></i>
|
||||
<p>{{ content.s2.t10 }}</p>
|
||||
</div>
|
||||
<div class="check">
|
||||
<i class="fas fa-check-circle"></i>
|
||||
<p>{{ content.s2.t11 }}</p>
|
||||
</div>
|
||||
<div class="check">
|
||||
<i class="fas fa-check-circle"></i>
|
||||
<p>{{ content.s2.t12 }}</p>
|
||||
</div>
|
||||
<div class="check">
|
||||
<i class="fas fa-check-circle"></i>
|
||||
<p>{{ content.s2.t13 }}</p>
|
||||
</div>
|
||||
<div class="check">
|
||||
<i class="fas fa-check-circle"></i>
|
||||
<p>{{ content.s2.t14 }}</p>
|
||||
</div>
|
||||
<div class="check">
|
||||
<i class="fas fa-check-circle"></i>
|
||||
<p>{{ content.s2.t15 }}</p>
|
||||
</div>
|
||||
<div class="check">
|
||||
<i class="fas fa-check-circle"></i>
|
||||
<p>{{ content.s2.t16 }}</p>
|
||||
</div>
|
||||
<div class="check">
|
||||
<i class="fas fa-check-circle"></i>
|
||||
<p>{{ content.s2.t17 }}</p>
|
||||
</div>
|
||||
<div class="check">
|
||||
<i class="fas fa-check-circle"></i>
|
||||
<p>{{ content.s2.t18 }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a class="btn btn-primary" href="./../../../static/SRP.pdf" download="">دانلود pdf</a>
|
||||
</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.srpConex[this.$route.params.lang]
|
||||
},
|
||||
cover() {
|
||||
return this.$store.state.global.cover?.activity
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,246 @@
|
||||
<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-xl-6 col-lg-6 col-md-12 col-sm-12 s2-item">
|
||||
<img src="/img/ActivitiesPage/DetailsPage/petrochemy.jpg" alt="" class="s2-img" />
|
||||
</div>
|
||||
<div class="col-12 col-xl-6 col-lg-6 col-md-12 col-sm-12 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" @click="goDown('.p1')">
|
||||
<div class="check">
|
||||
<i class="fas fa-check-circle"></i>
|
||||
<p>
|
||||
{{ content.s2.t2 }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-md-6 paddingCol" @click="goDown('.p3')">
|
||||
<div class="check">
|
||||
<i class="fas fa-check-circle"></i>
|
||||
<p>
|
||||
{{ content.s2.t3 }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-md-6 paddingCol" @click="goDown('.p2')">
|
||||
<div class="check">
|
||||
<i class="fas fa-check-circle"></i>
|
||||
<p>
|
||||
{{ content.s2.t4 }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-md-6 paddingCol" @click="goDown('.p4')">
|
||||
<div class="check">
|
||||
<i class="fas fa-check-circle"></i>
|
||||
<p>
|
||||
{{ content.s2.t5 }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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/1111.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="list1">-->
|
||||
<!-- <li><i class="fas fa-circle"></i>{{ content.s3.t2 }}</li>-->
|
||||
<!-- <li><i class="fas fa-circle"></i>{{ content.s3.t3 }}</li>-->
|
||||
<!-- <li><i class="fas fa-circle"></i>{{ content.s3.t4 }}</li>-->
|
||||
<!-- <li><i class="fas fa-circle"></i>{{ content.s3.t5 }}</li>-->
|
||||
<!-- </ul>-->
|
||||
<!-- <p>{{ content.s3.t6 }}</p>-->
|
||||
|
||||
<!-- <ul class="list2">-->
|
||||
<!-- <li><i class="fas fa-check"></i>{{ content.s3.t7 }}</li>-->
|
||||
<!-- <li><i class="fas fa-check"></i>{{ content.s3.t8 }}</li>-->
|
||||
<!-- <li><i class="fas fa-check"></i>{{ content.s3.t9 }}</li>-->
|
||||
<!-- <li><i class="fas fa-check"></i>{{ content.s3.t10 }}</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/header.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.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>-->
|
||||
<!-- </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/gtc.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>-->
|
||||
<!-- <li><i class="fas fa-check"></i>{{ content.s5.t6 }}</li>-->
|
||||
<!-- <li><i class="fas fa-check"></i>{{ content.s5.t7 }}</li>-->
|
||||
<!-- <li><i class="fas fa-check"></i>{{ content.s5.t8 }}</li>-->
|
||||
<!-- </ul>-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 item anim-fadeInStagger p4 paddingCol">
|
||||
<div class="row staggerItem">
|
||||
<div class="col-12 col-md-7 paddingCol">
|
||||
<img src="/img/ActivitiesPage/DetailsPage/petrochemy1.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.s6.t1 }}
|
||||
</h6>
|
||||
|
||||
<!-- <ul class="list2">-->
|
||||
<!-- <li><i class="fas fa-check"></i>{{ content.s6.t2 }}</li>-->
|
||||
<!-- <li><i class="fas fa-check"></i>{{ content.s6.t3 }}</li>-->
|
||||
<!-- <li><i class="fas fa-check"></i>{{ content.s6.t4 }}</li>-->
|
||||
<!-- <li><i class="fas fa-check"></i>{{ content.s6.t5 }}</li>-->
|
||||
<!-- </ul>-->
|
||||
</div>
|
||||
</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.ward[this.$route.params.lang]
|
||||
},
|
||||
cover() {
|
||||
return this.$store.state.global.cover?.activity
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user