morteza
6bb4719e99
deploy to danak / build_and_deploy (push) Has been cancelled
Replace self-proxy with direct SSR baseURL, rewrite blog post pagination with async/await, pin mongoose-paginate-v2, and add API error logging. Co-authored-by: Cursor <cursoragent@cursor.com>
1060 lines
40 KiB
Vue
1060 lines
40 KiB
Vue
<template>
|
|
<div class="home-Page page">
|
|
<!---------------------------------- Breaking News ------------------------------------->
|
|
<!-- <section class="breaking-news" v-if="blogPosts.docs.length">-->
|
|
<!-- <div id="newsSlider">-->
|
|
<!-- <div class="slide" v-for="item in blogPosts.docs" :key="item._id">-->
|
|
<!-- <nuxt-link-->
|
|
<!-- :to="{name: 'lang-blog-post',params: {lang: $route.params.lang , post: item.locale[$route.params.lang].title}}"-->
|
|
<!-- class="news-link">-->
|
|
<!-- <h4 class="h4" v-if="item.locale[$route.params.lang].title"> {{ item.locale[$route.params.lang].title }} </h4>-->
|
|
<!-- <span> - </span>-->
|
|
<!-- <p v-if="item.locale[$route.params.lang].short_description">{{ item.locale[$route.params.lang].short_description }} </p>-->
|
|
<!-- </nuxt-link>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- </section>-->
|
|
|
|
<!---------------------------------- Section 1 ------------------------------------->
|
|
<section class="s1-Img-BG">
|
|
<div class="parallax">
|
|
<div id="homeSlider">
|
|
<div class="slide" v-for="item in sortedSlides" :key="item._id">
|
|
<img v-if="item.isImage" :src="item.image" alt="" />
|
|
<video v-else :src="item.video" autoplay muted loop class="bg"></video>
|
|
</div>
|
|
</div>
|
|
<div class="container">
|
|
<div class="test"></div>
|
|
<div class="s1 anim-fadeInStagger">
|
|
<h3 class="s1-Title staggerItem" :style="{ color: $route.params.lang === 'fa' && '#fff' }">
|
|
{{ content.s1.t1 }}
|
|
</h3>
|
|
<h5 class="s1-Desc h1 staggerItem">
|
|
{{ content.s1.t2 }}
|
|
</h5>
|
|
<h6 class="s1-Desc1 staggerItem">
|
|
{{ content.s1.t3 }} <b>{{ content.s1.t4 }}</b>
|
|
</h6>
|
|
</div>
|
|
<div class="s1-Down">
|
|
<a class="s1-Down-Link" @click="goDown"> {{ content.s1.t5 }} <i class="fas fa-chevron-down"></i> </a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!---------------------------------- Section 2 ------------------------------------->
|
|
<section class="s2-Img-BG">
|
|
<div class="parallax">
|
|
<!---------------------------------- Breaking News ------------------------------------->
|
|
<!-- <div class="breaking-news" v-if="blogPosts.docs.length">-->
|
|
<div class="breaking-news">
|
|
<div id="newsSlider">
|
|
<!-- <div class="slide" v-for="item in blogPosts.docs" :key="item._id">-->
|
|
<div class="slide">
|
|
<nuxt-link
|
|
:to="{
|
|
name: 'lang-activities-drilling',
|
|
params: { lang: $route.params.lang }
|
|
}"
|
|
class="news-link"
|
|
>
|
|
<h4 class="h4">{{ content.s2.t5 }}</h4>
|
|
</nuxt-link>
|
|
</div>
|
|
<div class="slide">
|
|
<nuxt-link
|
|
:to="{
|
|
name: 'lang-activities-piping',
|
|
params: { lang: $route.params.lang }
|
|
}"
|
|
class="news-link"
|
|
>
|
|
<h4 class="h4">{{ content.s2.t4 }}</h4>
|
|
</nuxt-link>
|
|
</div>
|
|
<div class="slide">
|
|
<nuxt-link :to="{ name: 'lang-activities-srp', params: { lang: $route.params.lang } }" class="news-link">
|
|
<!-- <nuxt-link class="news-link" :to='`${$route.params.lang}/activities/srp`'> -->
|
|
<h4 class="h4">{{ content.s2.t8 }}</h4>
|
|
</nuxt-link>
|
|
</div>
|
|
<div class="slide">
|
|
<nuxt-link
|
|
:to="{
|
|
name: 'lang-activities-sm',
|
|
params: { lang: $route.params.lang }
|
|
}"
|
|
class="news-link"
|
|
>
|
|
<h4 class="h4">{{ content.s2.t7 }}</h4>
|
|
</nuxt-link>
|
|
</div>
|
|
<div class="slide">
|
|
<nuxt-link
|
|
:to="{
|
|
name: 'lang-activities-ward',
|
|
params: { lang: $route.params.lang }
|
|
}"
|
|
class="news-link"
|
|
>
|
|
<h4 class="h4">{{ content.s2.t6 }}</h4>
|
|
</nuxt-link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="s2">
|
|
<!-- <div class="row">-->
|
|
<!-- <div class="col-12 col-md-12 col-lg-4 s2-desc-col anim-fadeInStagger">-->
|
|
<!-- <h2 class="staggerItem">{{ content.s2.t1 }}</h2>-->
|
|
<!-- <p class="staggerItem">-->
|
|
<!-- {{ content.s2.t2 }}-->
|
|
<!-- </p>-->
|
|
<!-- <nuxt-link :to="{name: 'lang-activities',params: {lang: $route.params.lang}}" class="staggerItemSeeBTN">-->
|
|
<!-- {{ content.s2.t3 }}-->
|
|
<!-- </nuxt-link>-->
|
|
<!-- </div>-->
|
|
|
|
<!-- <div class="col-12 col-md-12 col-lg-8 s2-img-col paddingZero">-->
|
|
<!-- <div id="slidesProjects" class="row">-->
|
|
<!-- <div class="col-12 col-md-4 staggerItemLeftToRight s2-item-activity slide">-->
|
|
<!-- <nuxt-link :to="{name: 'lang-activities-drilling',params: { lang: $route.params.lang }}">-->
|
|
<!-- <img-->
|
|
<!-- src="/img/HomePage/drill.jpg"-->
|
|
<!-- alt=""-->
|
|
<!-- class="s2-img"-->
|
|
<!-- />-->
|
|
<!-- <div class="title-img">-->
|
|
<!-- <h4>{{ content.s2.t5 }}</h4>-->
|
|
<!-- </div>-->
|
|
<!-- </nuxt-link>-->
|
|
<!-- </div>-->
|
|
<!-- <div class="col-12 col-md-4 staggerItemLeftToRight s2-item-activity slide">-->
|
|
<!-- <nuxt-link :to="{name: 'lang-activities-piping',params: { lang: $route.params.lang }}">-->
|
|
<!-- <img-->
|
|
<!-- src="/img/HomePage/piping.jpg"-->
|
|
<!-- alt=""-->
|
|
<!-- class="s2-img"-->
|
|
<!-- />-->
|
|
<!-- <div class="title-img">-->
|
|
<!-- <h4>{{ content.s2.t4 }}</h4>-->
|
|
<!-- </div>-->
|
|
<!-- </nuxt-link>-->
|
|
<!-- </div>-->
|
|
<!-- <div class="col-12 col-md-4 staggerItemLeftToRight s2-item-activity slide">-->
|
|
<!-- <nuxt-link :to="{name: 'lang-activities-srp',params: { lang: $route.params.lang }}">-->
|
|
<!-- <img-->
|
|
<!-- src="/img/HomePage/faraz.jpg"-->
|
|
<!-- alt=""-->
|
|
<!-- class="s2-img"-->
|
|
<!-- />-->
|
|
<!-- <div class="title-img">-->
|
|
<!-- <h4>{{ content.s2.t8 }}</h4>-->
|
|
<!-- </div>-->
|
|
<!-- </nuxt-link>-->
|
|
<!-- </div>-->
|
|
<!-- <div class="col-12 col-md-4 staggerItemLeftToRight s2-item-activity slide">-->
|
|
<!-- <nuxt-link :to="{name: 'lang-activities-sm',params: { lang: $route.params.lang }}">-->
|
|
<!-- <img-->
|
|
<!-- src="/img/HomePage/salt.jpg"-->
|
|
<!-- alt=""-->
|
|
<!-- class="s2-img"-->
|
|
<!-- />-->
|
|
<!-- <div class="title-img">-->
|
|
<!-- <h4>{{ content.s2.t7 }}</h4>-->
|
|
<!-- </div>-->
|
|
<!-- </nuxt-link>-->
|
|
<!-- </div>-->
|
|
<!-- <div class="col-12 col-md-4 staggerItemLeftToRight s2-item-activity slide">-->
|
|
<!-- <nuxt-link :to="{name: 'lang-activities-ward',params: { lang: $route.params.lang }}">-->
|
|
<!-- <img-->
|
|
<!-- src="/img/HomePage/petrochemy.jpg"-->
|
|
<!-- alt=""-->
|
|
<!-- class="s2-img"-->
|
|
<!-- />-->
|
|
<!-- <div class="title-img">-->
|
|
<!-- <h4>{{ content.s2.t6 }}</h4>-->
|
|
<!-- </div>-->
|
|
<!-- </nuxt-link>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
|
|
<!-- </div>-->
|
|
|
|
<div id="slidesProjects">
|
|
<div class="staggerItemLeftToRight s2-item-activity slide">
|
|
<nuxt-link
|
|
:to="{
|
|
name: 'lang-activities-drilling',
|
|
params: { lang: $route.params.lang }
|
|
}"
|
|
>
|
|
<img src="/img/HomePage/drill.jpg" alt="" class="s2-img" />
|
|
<div class="title-img">
|
|
<h4>{{ content.s2.t5 }}</h4>
|
|
</div>
|
|
</nuxt-link>
|
|
</div>
|
|
<div class="staggerItemLeftToRight s2-item-activity slide">
|
|
<nuxt-link
|
|
:to="{
|
|
name: 'lang-activities-piping',
|
|
params: { lang: $route.params.lang }
|
|
}"
|
|
>
|
|
<img src="/img/HomePage/piping.jpg" alt="" class="s2-img" />
|
|
<div class="title-img">
|
|
<h4>{{ content.s2.t4 }}</h4>
|
|
</div>
|
|
</nuxt-link>
|
|
</div>
|
|
<div class="staggerItemLeftToRight s2-item-activity slide">
|
|
<nuxt-link
|
|
:to="{
|
|
name: 'lang-activities-srp',
|
|
params: { lang: $route.params.lang }
|
|
}"
|
|
>
|
|
<img src="/img/HomePage/faraz.jpg" alt="" class="s2-img" />
|
|
<div class="title-img">
|
|
<h4>{{ content.s2.t8 }}</h4>
|
|
</div>
|
|
</nuxt-link>
|
|
</div>
|
|
<div class="staggerItemLeftToRight s2-item-activity slide">
|
|
<nuxt-link
|
|
:to="{
|
|
name: 'lang-activities-sm',
|
|
params: { lang: $route.params.lang }
|
|
}"
|
|
>
|
|
<img src="/img/HomePage/Salt.jpg" alt="" class="s2-img" />
|
|
<div class="title-img">
|
|
<h4>{{ content.s2.t7 }}</h4>
|
|
</div>
|
|
</nuxt-link>
|
|
</div>
|
|
<div class="staggerItemLeftToRight s2-item-activity slide">
|
|
<nuxt-link
|
|
:to="{
|
|
name: 'lang-activities-ward',
|
|
params: { lang: $route.params.lang }
|
|
}"
|
|
>
|
|
<img src="/img/HomePage/petrochemy.jpg" alt="" class="s2-img" />
|
|
<div class="title-img">
|
|
<h4>{{ content.s2.t6 }}</h4>
|
|
</div>
|
|
</nuxt-link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!---------------------------------- Section 4 ------------------------------------->
|
|
<section class="s4-Img-BG" v-if="filteredProjects.length === 3">
|
|
<div class="parallax section">
|
|
<div class="s4-body anim-fadeInStagger">
|
|
<div class="container">
|
|
<div>
|
|
<h2 class="s4-title staggerItem">{{ content.s4.t1 }}</h2>
|
|
</div>
|
|
|
|
<div class="row align-items-stretch staggerItem">
|
|
<div
|
|
v-for="item in filteredProjects"
|
|
:key="item._id"
|
|
class="col-12 col-xl-4 col-lg-4 col-md-6 col-sm-6 mb-4"
|
|
>
|
|
<div class="s4-project-post">
|
|
<h4>{{ categoryName(item.category) }}</h4>
|
|
<img :src="item.thumb" :alt="item.locale[$route.params.lang].title" class="s4-img" />
|
|
<h3>{{ item.locale[$route.params.lang].title }}</h3>
|
|
<p>
|
|
{{ item.locale[$route.params.lang].short_description }}
|
|
</p>
|
|
<nuxt-link
|
|
:to="{
|
|
name: 'lang-projects-project',
|
|
params: { lang: $route.params.lang, project: item._id }
|
|
}"
|
|
>
|
|
{{ content.s4.t2 }}
|
|
<i class="fas" :class="$route.params.lang === 'en' ? 'fa-arrow-right' : 'fa-arrow-left'"></i>
|
|
</nuxt-link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!---------------------------------- Section 3 ------------------------------------->
|
|
<section class="s3-Img-BG">
|
|
<div class="parallax">
|
|
<div class="container">
|
|
<h3 class="s3-Title anim-fadeIn" :style="{ color: $route.params.lang === 'fa' && '#fff' }">
|
|
{{ content.s3.t1 }}
|
|
</h3>
|
|
<div class="row anim-fadeInStagger" v-if="projectCat.length > 0">
|
|
<div class="col-12 col-sm-6 col-md-3 anim-fadeIn" v-for="cat in projectCat" :key="cat._id">
|
|
<!-- <h4 class="num s3-num1 anim-number">{{-->
|
|
<!-- projects.filter(item => item.category === cat.id).length-->
|
|
<!-- }}</h4>-->
|
|
<nuxt-link
|
|
:to="{
|
|
name: 'lang-projects',
|
|
params: { lang: $route.params.lang },
|
|
query: { category: cat._id }
|
|
}"
|
|
>
|
|
<h6 class="s3-title-num">
|
|
{{ cat.locale[$route.params.lang].name }}
|
|
</h6>
|
|
</nuxt-link>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row" v-else>
|
|
<div class="col-12">
|
|
<h6 class="h4 notFound1">{{ content.s3.t2 }}</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!---------------------------------- Section 5 ------------------------------------->
|
|
<!-- <section class="s5-Img-BG ">-->
|
|
<!-- <div class="parallax section">-->
|
|
<!-- <div class="container">-->
|
|
<!-- <div id="slides">-->
|
|
<!-- <div class="slide" v-for="item in customerComments" :key="item._id">-->
|
|
<!-- <div class="content">-->
|
|
<!-- <h2 class="h2">{{ content.s5.t1 }}</h2>-->
|
|
<!-- <p>{{ item.locale[$route.params.lang].comment }}</p>-->
|
|
<!-- </div>-->
|
|
|
|
<!-- <div class="info">-->
|
|
<!-- <div class="imgBox">-->
|
|
<!-- <img-->
|
|
<!-- :src="item.image || '/img/avatar.png'"-->
|
|
<!-- alt=""-->
|
|
<!-- class="s4-user-img"-->
|
|
<!-- />-->
|
|
<!-- </div>-->
|
|
<!-- <div class="txtBox">-->
|
|
<!-- <p>{{ item.locale[$route.params.lang].name }}</p>-->
|
|
<!-- <p>{{ item.locale[$route.params.lang].position }}</p>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- </section>-->
|
|
|
|
<!---------------------------------- Section 9 ------------------------------------->
|
|
<section class="s9-Img-BG">
|
|
<div class="parallax section">
|
|
<div class="container anim-fadeInStagger s9">
|
|
<div class="s9-title staggerItem">
|
|
<h2>{{ content.s9.t1 }}</h2>
|
|
</div>
|
|
<div class="row staggerItem consents" id="consentsSlider">
|
|
<div class="s9-imag-view slide">
|
|
<a href="/img/ConsentsPage/1.jpg">
|
|
<img src="/img/ConsentsPage/1.jpg" title="consents" alt="OrisOxin-consents" class="s9-img" />
|
|
</a>
|
|
</div>
|
|
<div class="s9-imag-view slide">
|
|
<a href="/img/ConsentsPage/2.jpg">
|
|
<img src="/img/ConsentsPage/2.jpg" title="consents" alt="OrisOxin-consents" class="s9-img" />
|
|
</a>
|
|
</div>
|
|
<div class="s9-imag-view slide">
|
|
<a href="/img/ConsentsPage/3.jpg">
|
|
<img src="/img/ConsentsPage/3.jpg" title="consents" alt="OrisOxin-consents" class="s9-img" />
|
|
</a>
|
|
</div>
|
|
<div class="s9-imag-view slide">
|
|
<a href="/img/ConsentsPage/4.jpg">
|
|
<img src="/img/ConsentsPage/4.jpg" title="consents" alt="OrisOxin-consents" class="s9-img" />
|
|
</a>
|
|
</div>
|
|
<div class="s9-imag-view slide">
|
|
<a href="/img/ConsentsPage/41.jpg">
|
|
<img src="/img/ConsentsPage/41.jpg" title="consents" alt="OrisOxin-consents" class="s9-img" />
|
|
</a>
|
|
</div>
|
|
<div class="s9-imag-view slide">
|
|
<a href="/img/ConsentsPage/42.jpg">
|
|
<img src="/img/ConsentsPage/42.jpg" title="consents" alt="OrisOxin-consents" class="s9-img" />
|
|
</a>
|
|
</div>
|
|
<div class="s9-imag-view slide">
|
|
<a href="/img/ConsentsPage/43.jpg">
|
|
<img src="/img/ConsentsPage/43.jpg" title="consents" alt="OrisOxin-consents" class="s9-img" />
|
|
</a>
|
|
</div>
|
|
<div class="s9-imag-view slide">
|
|
<a href="/img/ConsentsPage/44.jpg">
|
|
<img src="/img/ConsentsPage/44.jpg" title="consents" alt="OrisOxin-consents" class="s9-img" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="view-btn">
|
|
<nuxt-link
|
|
:to="{
|
|
name: 'lang-consents',
|
|
params: { lang: $route.params.lang }
|
|
}"
|
|
class="btn btn-default"
|
|
>
|
|
{{ content.s9.t2 }}
|
|
</nuxt-link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!---------------------------------- Section 6 ------------------------------------->
|
|
<section class="s6-Img-BG">
|
|
<div class="parallax section">
|
|
<div class="container anim-fadeInStagger">
|
|
<div class="s6-title staggerItem">
|
|
<h2>{{ content.s6.t1 }}</h2>
|
|
<div class="s6-Desc">
|
|
<p>IMQ</p>
|
|
<i class="far fa-star"></i>
|
|
</div>
|
|
<div class="s6-Desc">
|
|
<p>CSQ</p>
|
|
<i class="far fa-star"></i>
|
|
</div>
|
|
</div>
|
|
<div class="row staggerItem certificates">
|
|
<div class="col-12 col-xl-3 col-lg-3 col-md-6 col-sm-6 s6-imag-view">
|
|
<a href="/img/HomePage/certificates/CSQ1.jpg">
|
|
<img src="/img/HomePage/certificates/CSQ1_thumb.png" title="گواهی CSQ1" alt="CSQ1" class="s6-img" />
|
|
</a>
|
|
</div>
|
|
|
|
<div class="col-12 col-xl-3 col-lg-3 col-md-6 col-sm-6 s6-imag-view">
|
|
<a href="/img/HomePage/certificates/CSQ2.jpg">
|
|
<img src="/img/HomePage/certificates/CSQ2_thumb.png" title="گواهی ECO" alt="CSQ2" class="s6-img" />
|
|
</a>
|
|
</div>
|
|
|
|
<div class="col-12 col-xl-3 col-lg-3 col-md-6 col-sm-6 s6-imag-view">
|
|
<a href="/img/HomePage/certificates/CSQ3.jpg">
|
|
<img src="/img/HomePage/certificates/CSQ3_thumb.png" title="گواهی H&S2" alt="CSQ3" class="s6-img" />
|
|
</a>
|
|
</div>
|
|
|
|
<div class="col-12 col-xl-3 col-lg-3 col-md-6 col-sm-6 s6-imag-view">
|
|
<a href="/img/HomePage/certificates/IMQ2.jpg">
|
|
<img src="/img/HomePage/certificates/IMQ2_thumb.png" title="گواهی IMQ2" alt="IMQ2" class="s6-img" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!---------------------------------- Section 10 ------------------------------------->
|
|
<section class="s10-Img-BG">
|
|
<div class="parallax section">
|
|
<!-- sheet calculation module -->
|
|
|
|
<div class="s10-title staggerItem">
|
|
<h2>{{ content.s10.t1 }}</h2>
|
|
</div>
|
|
<SheetWCM class="anim-fadeInStagger" />
|
|
|
|
<!-- pipe calculation module -->
|
|
<div class="s10-title staggerItem mt-5">
|
|
<h2>{{ content.s10.t8 }}</h2>
|
|
</div>
|
|
<PipeWCM class="anim-fadeInStagger" />
|
|
</div>
|
|
</section>
|
|
|
|
<!---------------------------------- Section 7 ------------------------------------->
|
|
<section class="s7-Img-BG">
|
|
<div class="parallax">
|
|
<div class="container">
|
|
<div class="s7-body anim-fadeIn">
|
|
<!-- <h2>-->
|
|
<!-- {{ content.s7.t1 }}-->
|
|
<!-- </h2>-->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!---------------------------------- Section 8 ------------------------------------->
|
|
<section class="s8-Img-BG">
|
|
<div class="parallax section">
|
|
<div class="container">
|
|
<div class="s8-body">
|
|
<div class="gallery">
|
|
<div id="slidesAddress" class="row anim-fadeIn">
|
|
<div class="col-12 col-md-4 gallery-item slide">
|
|
<img src="/img/HomePage/g1.jpg" alt="" class="s8-img" />
|
|
<div class="txtBox">
|
|
<div class="_txtBox">
|
|
<h3>Brazil</h3>
|
|
<span>ENGEMASA</span>
|
|
<p>
|
|
{{ content.s8.t28 }}
|
|
</p>
|
|
</div>
|
|
<div class="s8-tel">
|
|
<a class="s8-link" href="tel:+551633631500">+551633631500</a>
|
|
<a class="s8-link" href="mailto:info[at]orisoxin.com">info[at]orisoxin.com</a>
|
|
<a class="s8-link" href="www.engemasa.com.br">www.engemasa.com.br</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-md-4 gallery-item slide">
|
|
<img src="/img/HomePage/g2.jpg" alt="" class="s8-img" />
|
|
<div class="txtBox">
|
|
<div class="_txtBox">
|
|
<h3>china</h3>
|
|
<span>NPA</span>
|
|
<p>
|
|
{{ content.s8.t24 }}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="s8-tel">
|
|
<a class="s8-link" href="tel:+8653287314976">+86 532 87314976</a>
|
|
<a class="s8-link" href="tel:+8653287314975">+86 532 87314975</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-md-4 gallery-item slide">
|
|
<img src="/img/HomePage/g3.jpg" alt="" class="s8-img" />
|
|
<div class="txtBox">
|
|
<div class="_txtBox" style="direction: ltr">
|
|
<h3>{{ content.s8.t25 }}</h3>
|
|
<p>
|
|
{{ content.s8.t26 }}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="s8-tel">
|
|
<a class="s8-link" href="tel:82(55)5874570">82(55)5874570</a>
|
|
<a class="s8-link" href="tel:82(55)5873330">82(55)5873330</a>
|
|
<a class="s8-link" href="mailto:info[at]orisoxin.com">info[at]orisoxin.com</a>
|
|
<a class="s8-link" href="www.GasComp.kr">www.GasComp.kr</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-md-4 gallery-item slide">
|
|
<img src="/img/HomePage/g1.jpg" alt="" class="s8-img" />
|
|
<div class="txtBox">
|
|
<div class="_txtBox">
|
|
<h3>{{ content.s8.t29 }}</h3>
|
|
|
|
<p>
|
|
{{ content.s8.t30 }}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="s8-tel">
|
|
<a class="s8-link" href="tel:+8222083233840">+82-2-2083-2338-40</a>
|
|
<a class="s8-link" href="tel:+82220832341">+82-2-2083-2341</a>
|
|
<a class="s8-link" href="www.kdw.co.kr">www.kdw.co.kr</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-md-4 gallery-item slide">
|
|
<img src="/img/HomePage/g2.jpg" alt="" class="s8-img" />
|
|
<div class="txtBox">
|
|
<div class="_txtBox">
|
|
<h3>{{ content.s8.t21 }}</h3>
|
|
<span>HJ Metal Korea Co., Ltd</span>
|
|
<p>
|
|
{{ content.s8.t22 }}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="s8-tel">
|
|
<a class="s8-link" href="tel:+82325724081">+82 32 572 4081-2</a>
|
|
|
|
<a class="s8-link" href="tel:021325724086">+82 32 572 4086</a>
|
|
<a class="s8-link" href="mailto:info[at]orisoxin.com">info[at]orisoxin.com</a>
|
|
<a class="s8-link" href="www.hjmk.co.kr">www.hjmk.co.kr</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-md-4 gallery-item slide">
|
|
<img src="/img/ContactPage/esfahan.jpg" alt="" class="s8-img" />
|
|
<div class="txtBox">
|
|
<div class="_txtBox">
|
|
<h3>{{ content.s8.t5 }}</h3>
|
|
<p>
|
|
{{ content.s8.t6 }}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="s8-tel">
|
|
<a class="s8-link" href="tel:03132747303">031-32747303</a>
|
|
<a class="s8-link" href="mailto:info[at]orisoxin.com">info[at]orisoxin.com</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-md-4 gallery-item slide">
|
|
<img src="/img/ContactPage/ahvaz1.jpg" alt="" class="s8-img" />
|
|
<div class="txtBox">
|
|
<div class="_txtBox">
|
|
<h3>{{ content.s8.t3 }}</h3>
|
|
<p>
|
|
{{ content.s8.t4 }}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="s8-tel">
|
|
<a class="s8-link" href="tel:06134491021">0613-4491021</a>
|
|
<a class="s8-link" href="tel:06134491022">0613-4491022</a>
|
|
<a class="s8-link" href="mailto:info[at]orisoxin.com">info[at]orisoxin.com</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-md-4 gallery-item slide">
|
|
<img src="/img/ContactPage/ahvaz.jpg" alt="" class="s8-img" />
|
|
<div class="txtBox">
|
|
<div class="_txtBox">
|
|
<h3>{{ content.s8.t19 }}</h3>
|
|
<p>
|
|
{{ content.s8.t20 }}
|
|
</p>
|
|
</div>
|
|
<div class="s8-tel">
|
|
<a class="s8-link" href="tel:06134427626">0613-4427626</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-md-4 gallery-item slide">
|
|
<img src="/img/ContactPage/tehran.jpg" alt="" class="s8-img" />
|
|
<div class="txtBox">
|
|
<div class="_txtBox">
|
|
<h3>{{ content.s8.t1 }}</h3>
|
|
<p>
|
|
{{ content.s8.t2 }}
|
|
</p>
|
|
</div>
|
|
<div class="s8-tel">
|
|
<a class="s8-link" href="tel:02188612602">021-88612602</a>
|
|
<a class="s8-link" href="tel:02188612603">021-88612603</a>
|
|
<a class="s8-link" href="mailto:info[at]orisoxin.com">info[at]orisoxin.com</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h1 class="col-12 s8-Title anim-fadeIn">{{ content.s8.t7 }}</h1>
|
|
<div class="row align-items-stretch anim-fadeIn">
|
|
<div class="col-12 col-xl-6 col-lg-6 col-md-6 col-sm-6 info s8-info">
|
|
<div>
|
|
<b class="h4">{{ content.s8.t8 }}:</b>
|
|
<a class="s8-link-address" href="tel:02188612603">021-88612603</a>
|
|
</div>
|
|
<div>
|
|
<b class="h4">{{ content.s8.t9 }}:</b>
|
|
<a class="s8-link-address" href="tel:02188612602">021-88612602</a>
|
|
</div>
|
|
<div>
|
|
<b class="h4">{{ content.s8.t10 }}:</b>
|
|
<a class="s8-link-address" href="mailto:info[at]orisoxin.com">info[at]orisoxin.com</a>
|
|
</div>
|
|
<div>
|
|
<b class="h4">{{ content.s8.t11 }}:</b>
|
|
<p class="s8-link-address">{{ content.s8.t2 }}</p>
|
|
</div>
|
|
|
|
<div>
|
|
<iframe
|
|
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3237.46662168324!2d51.394458715552624!3d35.76391253303978!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3f8e06f906e67b41%3A0x98bfda631d3b9527!2z2LTYsdqp2Kog2KfYsduM2LMg2Kfaqdiz24zZhg!5e0!3m2!1sen!2sfr!4v1632141129226!5m2!1sen!2sfr"
|
|
width="90%"
|
|
height="200"
|
|
style="border: 0"
|
|
allowfullscreen=""
|
|
loading="lazy"
|
|
></iframe>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12 col-xl-4 col-lg-4 col-md-6 col-sm-6 input-body">
|
|
<span>{{ content.s8.t13 }}</span>
|
|
<form @submit.prevent="post">
|
|
<div class="fromRow" :class="validation.name ? 'err' : null">
|
|
<input v-model="message.name" class="input" name="name" type="text" :placeholder="content.s8.t14" />
|
|
<p v-if="validation.name">{{ validation.name.msg }}</p>
|
|
</div>
|
|
<div class="formRow" :class="validation.email ? 'err' : null">
|
|
<input
|
|
v-model="message.email"
|
|
class="input"
|
|
name="email"
|
|
type="text"
|
|
:placeholder="content.s8.t15"
|
|
/>
|
|
<p v-if="validation.email">{{ validation.email.msg }}</p>
|
|
</div>
|
|
<div class="formRow" :class="validation.subject ? 'err' : null">
|
|
<input
|
|
v-model="message.subject"
|
|
class="input"
|
|
name="subject"
|
|
type="text"
|
|
:placeholder="content.s8.t16"
|
|
/>
|
|
<p v-if="validation.subject">
|
|
{{ validation.subject.msg }}
|
|
</p>
|
|
</div>
|
|
<div class="formRow" :class="validation.message ? 'err' : null">
|
|
<textarea v-model="message.message" class="input" rows="6" :placeholder="content.s8.t17"></textarea>
|
|
<p v-if="validation.message">
|
|
{{ validation.message.msg }}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="btnSub">
|
|
<form-btn :label="content.s8.t18" buttonType="submit" />
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
if (process.client) require('slick-carousel')
|
|
import {
|
|
fadeInAnimation,
|
|
fadeInStaggerAnimation,
|
|
leftToRightAnimation,
|
|
leftToRightStaggerAnimation,
|
|
numberAnimation
|
|
} from '~/utils/animations'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
slides: null,
|
|
projects: null,
|
|
projectCat: null,
|
|
customerComments: null,
|
|
blogPosts: null,
|
|
message: {
|
|
name: '',
|
|
email: '',
|
|
subject: '',
|
|
message: '',
|
|
locale: this.$route.params.lang
|
|
},
|
|
validation: {}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.$nextTick(() => {
|
|
$(document).ready(() => {
|
|
fadeInAnimation(this.$gsap)
|
|
leftToRightAnimation(this.$gsap)
|
|
fadeInStaggerAnimation(this.$gsap)
|
|
leftToRightStaggerAnimation(this.$gsap)
|
|
numberAnimation(this.$gsap)
|
|
|
|
// certificates
|
|
new SimpleLightbox('.home-Page .certificates a')
|
|
new SimpleLightbox('.home-Page .consents a')
|
|
|
|
$(window).scroll(() => {
|
|
if (window.scrollY > 628) $('.breaking-news').addClass('_breaking-news')
|
|
if (window.scrollY < 628) $('.breaking-news').removeClass('_breaking-news')
|
|
})
|
|
|
|
// News carousel
|
|
$('#newsSlider').slick({
|
|
autoplay: true,
|
|
autoplaySpeed: 3000,
|
|
accessibility: false,
|
|
arrows: false,
|
|
dots: false,
|
|
rtl: false,
|
|
slidesToShow: 1
|
|
})
|
|
|
|
$('.slick-list').css('direction', 'ltr')
|
|
|
|
// Home carousel
|
|
$('#homeSlider').slick({
|
|
autoplay: true,
|
|
autoplaySpeed: 5000,
|
|
accessibility: false,
|
|
arrows: false,
|
|
dots: true,
|
|
rtl: this.$route.params.lang === 'fa',
|
|
slidesToShow: 1
|
|
})
|
|
|
|
// Consents carousel
|
|
$('#consentsSlider').slick({
|
|
infinite: false,
|
|
autoplay: true,
|
|
autoplaySpeed: 5000,
|
|
accessibility: false,
|
|
arrows: true,
|
|
dots: false,
|
|
rtl: this.$route.params.lang === 'fa',
|
|
slidesToShow: 4,
|
|
slidesToScroll: 4,
|
|
responsive: [
|
|
{
|
|
breakpoint: 960,
|
|
settings: {
|
|
slidesToShow: 3,
|
|
slidesToScroll: 3,
|
|
infinite: false
|
|
}
|
|
},
|
|
{
|
|
breakpoint: 720,
|
|
settings: {
|
|
slidesToShow: 2,
|
|
slidesToScroll: 2
|
|
}
|
|
},
|
|
{
|
|
breakpoint: 540,
|
|
settings: {
|
|
slidesToShow: 1,
|
|
slidesToScroll: 1,
|
|
arrows: false
|
|
}
|
|
}
|
|
]
|
|
})
|
|
|
|
// Comment carousel
|
|
$('#slides').slick({
|
|
autoplay: true,
|
|
accessibility: false,
|
|
arrows: true,
|
|
dots: true,
|
|
rtl: this.$route.params.lang === 'fa',
|
|
responsive: [
|
|
{
|
|
breakpoint: 540,
|
|
settings: {
|
|
arrows: false
|
|
}
|
|
}
|
|
]
|
|
})
|
|
|
|
// Projects carousel
|
|
$('#slidesProjects').slick({
|
|
autoplay: true,
|
|
// accessibility: false,
|
|
arrows: true,
|
|
dots: false,
|
|
slidesToShow: 5,
|
|
slidesToScroll: 1,
|
|
infinite: false,
|
|
autoplaySpeed: 2000,
|
|
rtl: this.$route.params.lang === 'fa',
|
|
responsive: [
|
|
{
|
|
breakpoint: 1625,
|
|
settings: {
|
|
slidesToShow: 3,
|
|
slidesToScroll: 1,
|
|
infinite: false
|
|
}
|
|
},
|
|
{
|
|
breakpoint: 720,
|
|
settings: {
|
|
slidesToShow: 2,
|
|
slidesToScroll: 1
|
|
}
|
|
},
|
|
{
|
|
breakpoint: 540,
|
|
settings: {
|
|
slidesToShow: 1,
|
|
slidesToScroll: 1,
|
|
arrows: true
|
|
}
|
|
}
|
|
]
|
|
})
|
|
|
|
// Address carousel
|
|
$('#slidesAddress').slick({
|
|
// autoplay: true,
|
|
accessibility: false,
|
|
arrows: true,
|
|
dots: false,
|
|
slidesToShow: 3,
|
|
slidesToScroll: 1,
|
|
infinite: false,
|
|
autoplaySpeed: 2000,
|
|
rtl: this.$route.params.lang === 'fa',
|
|
responsive: [
|
|
// {
|
|
// breakpoint: 1200,
|
|
// settings: {
|
|
// slidesToShow: 3,
|
|
// slidesToScroll: 1,
|
|
// infinite: false,
|
|
// dots: true
|
|
// }
|
|
// },
|
|
{
|
|
breakpoint: 1200,
|
|
settings: {
|
|
slidesToShow: 2,
|
|
slidesToScroll: 1
|
|
}
|
|
},
|
|
{
|
|
breakpoint: 769,
|
|
settings: {
|
|
slidesToShow: 1,
|
|
slidesToScroll: 1,
|
|
arrows: true
|
|
}
|
|
}
|
|
]
|
|
})
|
|
|
|
//--------------------------------------------------------- Section 1
|
|
this.$gsap
|
|
.timeline({
|
|
scrollTrigger: {
|
|
trigger: '.s2-Img-BG',
|
|
scrub: true,
|
|
start: 'top bottom'
|
|
}
|
|
})
|
|
.to($('.s1-Img-BG .parallax'), {
|
|
duration: 9,
|
|
opacity: 0,
|
|
y: '50%'
|
|
})
|
|
})
|
|
})
|
|
},
|
|
methods: {
|
|
categoryName(id) {
|
|
return this.projectCat.find((item) => item._id === id)?.locale[this.$route.params.lang].name || '-'
|
|
},
|
|
goDown() {
|
|
this.$gsap.to(window, { scrollTo: '.s2-Img-BG', duration: 0.7 })
|
|
},
|
|
post() {
|
|
this.validation = {}
|
|
this.$axios
|
|
.post('/api/public/contact', this.message)
|
|
.then((res) => {
|
|
this.$message({
|
|
type: 'success',
|
|
message: 'message sent successfully'
|
|
})
|
|
this.message = {
|
|
name: '',
|
|
email: '',
|
|
subject: '',
|
|
message: '',
|
|
locale: this.$route.params.lang
|
|
}
|
|
})
|
|
.catch((e) => {
|
|
if (e.response.status === 422) this.validation = e.response.data.validation
|
|
else console.log(e)
|
|
})
|
|
}
|
|
},
|
|
computed: {
|
|
content() {
|
|
return this.$store.state.content.home[this.$route.params.lang]
|
|
},
|
|
filteredProjects() {
|
|
return this.projects.filter((item, index) => item.thumb && item.has_details && index < 3)
|
|
},
|
|
sortedSlides() {
|
|
return this.slides.sort((a, b) => a.isImage - b.isImage)
|
|
}
|
|
},
|
|
async asyncData({ $axios, error }) {
|
|
try {
|
|
const allData = await Promise.all([
|
|
// fetch slides [0]
|
|
$axios.get('/api/public/slides'),
|
|
// fetch projects [1]
|
|
$axios.get('/api/public/projects'),
|
|
// fetch project categories [2]
|
|
$axios.get('/api/public/projectCategories'),
|
|
// fetch customer comments [3]
|
|
$axios.get('/api/public/comments'),
|
|
// fetch blog posts [4]
|
|
$axios.get('/api/public/blogPosts?category=all&page=1')
|
|
])
|
|
const slides = allData[0]
|
|
const projects = allData[1]
|
|
const projectCat = allData[2]
|
|
const customerComments = allData[3]
|
|
const blogPosts = allData[4]
|
|
return {
|
|
slides: slides.data,
|
|
projects: projects.data,
|
|
projectCat: projectCat.data,
|
|
customerComments: customerComments.data,
|
|
blogPosts: blogPosts.data
|
|
}
|
|
} catch (e) {
|
|
console.error('Homepage asyncData failed:', {
|
|
url: e.config?.url,
|
|
status: e.response?.status,
|
|
data: e.response?.data,
|
|
message: e.message
|
|
})
|
|
error({ statusCode: 500, message: 'there is a problem here' })
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.gallery .slick-slide:nth-child(-n + 5) .gallery-item ._txtBox {
|
|
text-align: left;
|
|
}
|
|
.gallery .slick-slide:nth-child(-n + 5) .gallery-item ._txtBox p {
|
|
text-align: left;
|
|
direction: ltr;
|
|
}
|
|
.gallery .slick-slide .s8-tel {
|
|
text-align: left;
|
|
}
|
|
.gallery .slick-slide .s8-link:lang(fa) {
|
|
direction: ltr;
|
|
}
|
|
</style>
|