mahyargdz
574 lines
19 KiB
Vue
574 lines
19 KiB
Vue
<template>
|
|
<div class="about-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 s1-title anim-fadeIn" :style="{ color: $route.params.lang === 'fa' && '#fff' }">
|
|
{{ content.s1.t1 }}
|
|
</h1>
|
|
</div>
|
|
</section>
|
|
|
|
<!---------------------------------- Section 2 ------------------------------------->
|
|
<section class="s2-BG">
|
|
<div class="parallax">
|
|
<div class="row">
|
|
<div class="col-12 col-xl-6 col-lg-6 col-md-12 col-sm-12 img paddingCol">
|
|
<img src="/img/AboutPage/_MG_9506.png" alt="" />
|
|
</div>
|
|
<div class="col-12 col-xl-6 col-lg-6 col-md-12 col-sm-12 d-flex align-items-center descImg">
|
|
<div class="container anim-fadeInStagger">
|
|
<div class="descContainer section">
|
|
<h2 class="h2 staggerItem">{{ content.s2.t1 }}</h2>
|
|
<p class="description staggerItem">
|
|
{{ content.s2.t2 }}
|
|
</p>
|
|
<h6 class="h6 staggerItem">{{ content.s2.t3 }}</h6>
|
|
<div class="col-12 staggerItem">
|
|
<div class="row">
|
|
<!-- <div class="col-12 col-xl-6 col-lg-6 col-md-12 col-sm-12 paddingCol">-->
|
|
<div class="features col-12 col-lg-6">
|
|
<i class="fas fa-check-circle"></i>
|
|
<p>{{ content.s2.t4 }}</p>
|
|
</div>
|
|
<div class="features col-12 col-lg-6">
|
|
<i class="fas fa-check-circle"></i>
|
|
<p>{{ content.s2.t5 }}</p>
|
|
</div>
|
|
<div class="features col-12 col-lg-6">
|
|
<i class="fas fa-check-circle"></i>
|
|
<p>{{ content.s2.t6 }}</p>
|
|
</div>
|
|
<!-- </div>-->
|
|
<!-- <div class="col-12 col-xl-6 col-lg-6 col-md-12 col-sm-12 paddingCol">-->
|
|
<div class="features col-12 col-lg-6">
|
|
<i class="fas fa-check-circle"></i>
|
|
<p>{{ content.s2.t7 }}</p>
|
|
</div>
|
|
<div class="features col-12 col-lg-6">
|
|
<i class="fas fa-check-circle"></i>
|
|
<p>{{ content.s2.t8 }}</p>
|
|
</div>
|
|
<!-- </div>-->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!---------------------------------- Section 3 ------------------------------------->
|
|
<section class="s3-BG">
|
|
<div class="parallax">
|
|
<!-- <div class="container-fluid">-->
|
|
<div class="row align-items-center">
|
|
<div class="col-12 col-xl-6 col-lg-6 col-md-12 col-sm-12 s3-col1 paddingCol">
|
|
<div class="container anim-fadeInStagger">
|
|
<h2 class="h2 staggerItem">{{ content.s3.t1 }}</h2>
|
|
<p class="description staggerItem">
|
|
{{ content.s3.t2 }}
|
|
</p>
|
|
<nuxt-link
|
|
:to="{
|
|
name: 'lang-activities',
|
|
params: { lang: $route.params.lang }
|
|
}"
|
|
class="staggerItem"
|
|
>{{ content.s3.t3 }}</nuxt-link
|
|
>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-xl-6 col-lg-6 col-md-12 col-sm-12 s3-col2 paddingCol">
|
|
<div class="container-fluid anim-fadeInStagger">
|
|
<div class="col-12 features-body">
|
|
<nuxt-link
|
|
:to="{
|
|
name: 'lang-activities-piping',
|
|
params: { lang: $route.params.lang }
|
|
}"
|
|
>
|
|
<div class="features staggerItem">
|
|
<img src="/img/AboutPage/piping.png" alt="" />
|
|
<div>
|
|
<h6 class="h6">{{ content.s3.t6 }}</h6>
|
|
<span>
|
|
{{ content.s3.t7 }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</nuxt-link>
|
|
<nuxt-link
|
|
:to="{
|
|
name: 'lang-activities-drilling',
|
|
params: { lang: $route.params.lang }
|
|
}"
|
|
>
|
|
<div class="features staggerItem">
|
|
<img src="/img/AboutPage/1111.png" alt="" />
|
|
<div>
|
|
<h6 class="h6">{{ content.s3.t12 }}</h6>
|
|
<span>
|
|
{{ content.s3.t13 }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</nuxt-link>
|
|
<nuxt-link
|
|
:to="{
|
|
name: 'lang-activities-ward',
|
|
params: { lang: $route.params.lang }
|
|
}"
|
|
>
|
|
<div class="features staggerItem">
|
|
<img src="/img/AboutPage/petrochemical.png" alt="" />
|
|
<div>
|
|
<h6 class="h6">{{ content.s3.t4 }}</h6>
|
|
<span>
|
|
{{ content.s3.t5 }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</nuxt-link>
|
|
<nuxt-link
|
|
:to="{
|
|
name: 'lang-activities-sm',
|
|
params: { lang: $route.params.lang }
|
|
}"
|
|
>
|
|
<div class="features staggerItem">
|
|
<img src="/img/AboutPage/2222.png" alt="" />
|
|
<div>
|
|
<h6 class="h6">{{ content.s3.t10 }}</h6>
|
|
<span>
|
|
{{ content.s3.t11 }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</nuxt-link>
|
|
<nuxt-link
|
|
:to="{
|
|
name: 'lang-activities-srp',
|
|
params: { lang: $route.params.lang }
|
|
}"
|
|
>
|
|
<div class="features staggerItem">
|
|
<img src="/img/AboutPage/excavation.png" alt="" />
|
|
<div>
|
|
<h6 class="h6">{{ content.s3.t8 }}</h6>
|
|
<span>
|
|
{{ content.s3.t9 }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</nuxt-link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- </div>-->
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- <!–-------------------------------- Section 4 -----------------------------------–>-->
|
|
<!-- <section class="s4-BG">-->
|
|
<!-- <div class="parallax section">-->
|
|
<!-- <div class="container">-->
|
|
<!-- <div class="row">-->
|
|
<!-- <div class="col-12 col-md-12 col-lg-6 s4-col1 anim-fadeInStagger">-->
|
|
<!-- <h2 class="h2 staggerItem">{{ content.s4.t1 }}</h2>-->
|
|
<!-- <span class="staggerItem">-->
|
|
<!-- {{ content.s4.t2 }}-->
|
|
<!-- </span>-->
|
|
<!-- </div>-->
|
|
<!-- <div class="col-12 col-md-12 col-lg-6 s4-col2" v-if="projectCat.length > 0">-->
|
|
<!-- <div class="progress"-->
|
|
<!-- v-for="item in projectCat"-->
|
|
<!-- :key="item._id"-->
|
|
<!-- >-->
|
|
<!-- <div class="d-flex justify-content-between">-->
|
|
<!-- <span>{{ item.locale[$route.params.lang].name }}</span>-->
|
|
<!-- <span>{{ getPercentage(item) }}%</span>-->
|
|
<!-- </div>-->
|
|
|
|
<!-- <div class="progress-Parent">-->
|
|
<!-- <div class="progress-Child anim-progress"-->
|
|
<!-- :style="{width: `${projects.filter(e => e.category._id === item.id).length * 100 / projects.length}%`}"></div>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
|
|
<!-- <div class="col-12 col-md-12 col-lg-6 s4-col3" v-else>-->
|
|
<!-- <h6 class="h6 notFound">{{ content.s4.t3 }}</h6>-->
|
|
<!-- </div>-->
|
|
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- </section>-->
|
|
|
|
<!---------------------------------- Section 5 ------------------------------------->
|
|
<!-- <section class="s5-Img-BG">-->
|
|
<!-- <div class="parallax section">-->
|
|
<!-- <div class="container">-->
|
|
<!-- <div class="title anim-fadeIn">-->
|
|
<!-- <h1 class="h2">{{ content.s5.t1 }}</h1>-->
|
|
<!-- <h1 class="h2">{{ content.s5.t2 }}</h1>-->
|
|
<!-- </div>-->
|
|
<!-- <div class="row anim-fadeIn" v-if="projectCat.length > 0">-->
|
|
<!-- <div class="col-12 col-lg-4 mb-3" v-for="cat in projectCat" :key="cat._id">-->
|
|
<!-- <h1 class="h1 s5-num1 anim-number">{{-->
|
|
<!-- projects.filter(item => {-->
|
|
<!-- if (item.category._id) return item.category._id === cat._id-->
|
|
<!-- }).length-->
|
|
<!-- }}</h1>-->
|
|
<!-- <span>{{ cat.locale[$route.params.lang].name }}</span>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
|
|
<!-- <div class="row" v-else>-->
|
|
<!-- <div class="col-12">-->
|
|
<!-- <h6 class="h4 notFound1">{{ content.s5.t3 }}</h6>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- </section>-->
|
|
|
|
<!---------------------------------- Section 6 ------------------------------------->
|
|
<section class="s6-BG">
|
|
<div class="parallax section">
|
|
<div class="container">
|
|
<h2 class="h2 s6-h1-title anim-fadeIn">{{ content.s6.t1 }}</h2>
|
|
<div class="row s6-team" v-if="team.length > 0">
|
|
<div class="col-12 col-sm-6 col-lg-3 mb-3 anim-fadeIn" v-for="item in team" :key="item._id">
|
|
<div class="team-View">
|
|
<img
|
|
:src="item.image"
|
|
:alt="item.locale[$route.params.lang].first_name + ' ' + item.locale[$route.params.lang].last_name"
|
|
/>
|
|
<div class="title-Img">
|
|
<p>
|
|
{{ item.locale[$route.params.lang].first_name + ' ' + item.locale[$route.params.lang].last_name }}
|
|
</p>
|
|
<span>{{ item.locale[$route.params.lang].position }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row" v-else>
|
|
<div class="col-12 s6-notFound">
|
|
<h6 class="h6 notFound">{{ content.s6.t2 }}</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!---------------------------------- Section 6 ------------------------------------->
|
|
<section class="s11-BG">
|
|
<div class="parallax section">
|
|
<div class="container-fluid">
|
|
<h2 class="h2 s11-h1-title anim-fadeIn">{{ content.s11.t1 }}</h2>
|
|
<div class="row s11-chart">
|
|
<div class="col-12 mb-3 anim-fadeIn">
|
|
<img src="/img/chart.jpg" alt="" v-if="$route.params.lang === 'fa'" />
|
|
<img src="/img/Chart-Latin.jpg" alt="" v-if="$route.params.lang === 'en'" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!---------------------------------- Section 7 ------------------------------------->
|
|
<section class="s7-BG">
|
|
<div class="parallax">
|
|
<div class="row">
|
|
<div class="col-12 s7-view-title">
|
|
<h2 class="h2 s7-title anim-fadeIn">{{ content.s7.t3 }}</h2>
|
|
</div>
|
|
<div class="col-12 col-lg-6 order-1 order-lg-0 s7-Body paddingCol">
|
|
<div class="container s7-body-row anim-fadeInStagger">
|
|
<div class="s7-Title staggerItem">
|
|
<h6 class="h6">{{ content.s7.t1 }}</h6>
|
|
</div>
|
|
<div class="s7-desc staggerItem">
|
|
<span>{{ content.s7.t2 }}</span>
|
|
</div>
|
|
<img src="/img/LogoCompany/5.png" alt="" />
|
|
<el-button type="text" @click="dialogVisible1 = true" class="staggerItemSeeBTN">
|
|
{{ content.s7.t4 }}
|
|
</el-button>
|
|
|
|
<el-dialog title="" :visible.sync="dialogVisible1" width="23%" center>
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<img src="/img/AboutPage/GTC.png" :alt="content.s7.t1" width="100%" />
|
|
</div>
|
|
</div>
|
|
<el-button @click="dialogVisible1 = false">{{ content.s7.t5 }}</el-button>
|
|
</el-dialog>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-lg-6 order-0 order-lg-1 paddingCol">
|
|
<div class="s7-Img">
|
|
<img src="/img/AboutPage/gtc.jpg" alt="" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!---------------------------------- Section 8 ------------------------------------->
|
|
<section class="s8-BG">
|
|
<div class="parallax">
|
|
<div class="row">
|
|
<div class="col-12 col-lg-6 paddingCol">
|
|
<div class="s8-Img">
|
|
<img src="/img/AboutPage/npa.jpg" alt="" />
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-lg-6 s8-Body paddingCol">
|
|
<div class="container s8-body-row anim-fadeInStagger">
|
|
<div class="s8-Title staggerItem">
|
|
<h6 class="h6">{{ content.s8.t1 }}</h6>
|
|
</div>
|
|
<div class="s8-desc staggerItem">
|
|
<span>{{ content.s8.t2 }}</span>
|
|
</div>
|
|
|
|
<!-- <div class="s8-Title staggerItem">-->
|
|
<!-- <h6 class="h6">{{ content.s8.t3 }}</h6>-->
|
|
<!-- </div>-->
|
|
<!-- <div class="s8-desc staggerItem">-->
|
|
<!-- <span>{{ content.s8.t4 }}</span>-->
|
|
<!-- </div>-->
|
|
<img src="/img/LogoCompany/4.png" alt="" />
|
|
<el-button type="text" @click="dialogVisible2 = true" class="staggerItemSeeBTN">
|
|
{{ content.s7.t4 }}
|
|
</el-button>
|
|
|
|
<el-dialog title="" :visible.sync="dialogVisible2" width="50%" center>
|
|
<div class="row">
|
|
<div class="col-12 col-md-6">
|
|
<img src="/img/AboutPage/Engemasa1.png" :alt="content.s7.t1" width="100%" />
|
|
</div>
|
|
<div class="col-12 col-md-6">
|
|
<img src="/img/AboutPage/Engemasa2.png" :alt="content.s7.t1" width="100%" />
|
|
</div>
|
|
</div>
|
|
<el-button @click="dialogVisible2 = false">{{ content.s7.t5 }}</el-button>
|
|
</el-dialog>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!---------------------------------- Section 9 ------------------------------------->
|
|
<section class="s9-BG">
|
|
<div class="parallax">
|
|
<div class="row">
|
|
<div class="col-12 col-lg-6 order-1 order-lg-0 s9-Body paddingCol">
|
|
<div class="container s9-body-row anim-fadeInStagger">
|
|
<div class="s9-Title staggerItem">
|
|
<h6 class="h6">{{ content.s9.t1 }}</h6>
|
|
</div>
|
|
<div class="s9-desc staggerItem">
|
|
<span>{{ content.s9.t2 }}</span>
|
|
</div>
|
|
<img src="/img/LogoCompany/3.png" alt="" />
|
|
<el-button type="text" @click="dialogVisible3 = true" class="staggerItemSeeBTN">
|
|
{{ content.s7.t4 }}
|
|
</el-button>
|
|
|
|
<el-dialog title="" :visible.sync="dialogVisible3" width="23%" center>
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<img src="/img/AboutPage/Hj.png" :alt="content.s7.t1" width="100%" />
|
|
</div>
|
|
</div>
|
|
<el-button @click="dialogVisible3 = false">{{ content.s7.t5 }}</el-button>
|
|
</el-dialog>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-lg-6 order-0 order-lg-1 paddingCol">
|
|
<div class="s9-Img">
|
|
<img src="/img/AboutPage/metal.jpg" alt="" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!---------------------------------- Section 10 ------------------------------------->
|
|
<section class="s10-BG">
|
|
<div class="parallax">
|
|
<div class="row">
|
|
<div class="col-12 col-lg-6 paddingCol">
|
|
<div class="s10-Img">
|
|
<img src="/img/AboutPage/wonjin.jpeg" alt="" />
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-lg-6 s10-Body paddingCol">
|
|
<div class="container s10-body-row anim-fadeInStagger">
|
|
<div class="s10-Title staggerItem">
|
|
<h6 class="h6">{{ content.s10.t1 }}</h6>
|
|
</div>
|
|
<div class="s10-desc staggerItem">
|
|
<span>{{ content.s10.t2 }}</span>
|
|
</div>
|
|
<img src="/img/LogoCompany/2.png" alt="" />
|
|
<el-button type="text" @click="dialogVisible4 = true" class="staggerItemSeeBTN">
|
|
{{ content.s7.t4 }}
|
|
</el-button>
|
|
|
|
<el-dialog title="" :visible.sync="dialogVisible4" width="23%" center>
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<img src="/img/AboutPage/WONJIN.png" :alt="content.s7.t1" width="100%" />
|
|
</div>
|
|
</div>
|
|
<el-button @click="dialogVisible4 = false">{{ content.s7.t5 }}</el-button>
|
|
</el-dialog>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!---------------------------------- Section 12 logo company ------------------------------------->
|
|
<!-- <section class="s12-BG">-->
|
|
<!-- <div class="parallax">-->
|
|
<!-- <h2>مشتریان ما</h2>-->
|
|
<!-- <div class="row">-->
|
|
<!-- <div class="col-12 col-md-4">-->
|
|
<!-- <img src="/img/LogoCompany/logo1.png" alt="">-->
|
|
<!-- </div>-->
|
|
<!-- <div class="col-12 col-md-4">-->
|
|
<!-- <img src="/img/LogoCompany/logo2.png" alt="">-->
|
|
<!-- </div>-->
|
|
<!-- <div class="col-12 col-md-4">-->
|
|
<!-- <img src="/img/LogoCompany/logo3.png" alt="">-->
|
|
<!-- </div>-->
|
|
<!-- <div class="col-12 col-md-4">-->
|
|
<!-- <img src="/img/LogoCompany/logo4.png" alt="">-->
|
|
<!-- </div>-->
|
|
<!-- <div class="col-12 col-md-4">-->
|
|
<!-- <img src="/img/LogoCompany/logo5.png" alt="">-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- </section>-->
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
fadeInAnimation,
|
|
fadeInStaggerAnimation,
|
|
leftToRightAnimation,
|
|
leftToRightStaggerAnimation,
|
|
numberAnimation,
|
|
progressAnimation
|
|
} from '~/utils/animations'
|
|
|
|
export default {
|
|
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-BG',
|
|
scrub: true,
|
|
start: 'top top'
|
|
}
|
|
})
|
|
.to($('.s1-Img-BG .parallax'), {
|
|
duration: 9,
|
|
opacity: 0,
|
|
y: '50%'
|
|
})
|
|
})
|
|
},
|
|
methods: {
|
|
lineRed() {
|
|
this.projects.length
|
|
},
|
|
getPercentage(item) {
|
|
return Math.floor(
|
|
(this.projects.filter(e => {
|
|
if (e.category._id) return e.category._id === item.id
|
|
}).length *
|
|
100) /
|
|
this.projects.length
|
|
)
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
team: null,
|
|
projects: null,
|
|
projectCat: null,
|
|
dialogVisible1: false,
|
|
dialogVisible2: false,
|
|
dialogVisible3: false,
|
|
dialogVisible4: false,
|
|
defaultCover: '/img/AboutPage/page-title.png'
|
|
}
|
|
},
|
|
async asyncData({ $axios, error }) {
|
|
try {
|
|
const allData = await Promise.all([
|
|
// fetch team [0]
|
|
$axios.get('/api/public/teams'),
|
|
// fetch projects [1]
|
|
$axios.get('/api/public/projects'),
|
|
// fetch project categories [2]
|
|
$axios.get('/api/public/projectCategories')
|
|
])
|
|
const team = allData[0]
|
|
const projects = allData[1]
|
|
const projectCat = allData[2]
|
|
|
|
return {
|
|
team: team.data,
|
|
projects: projects.data,
|
|
projectCat: projectCat.data
|
|
}
|
|
} catch (e) {
|
|
error({ status: 500, message: 'there is a problem here' })
|
|
}
|
|
},
|
|
computed: {
|
|
content() {
|
|
return this.$store.state.content.about[this.$route.params.lang]
|
|
},
|
|
cover() {
|
|
return this.$store.state.global.cover?.aboutUS
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
.about-page span {
|
|
display: block;
|
|
text-align: justify;
|
|
}
|
|
</style>
|