mahyargdz
510 lines
15 KiB
Vue
510 lines
15 KiB
Vue
<template>
|
|
<div class="contact-page page">
|
|
<!---------------------------------- Section 1 ------------------------------------->
|
|
<div 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>
|
|
</div>
|
|
|
|
<!---------------------------------- Section 2 ------------------------------------->
|
|
<div class="s2">
|
|
<div class="parallax">
|
|
<div id="slides" class="row">
|
|
<div class="col-12 col-md-6 col-lg-4 s2-item slide">
|
|
<div class="s2-img s2-Img-col1 anim-fadeInStagger">
|
|
<h4 class="h4 staggerItem">{{ content.s2.t19 }}</h4>
|
|
<p class="s2-desc staggerItem" style="margin-bottom: 0">ENGEMASA</p>
|
|
<p class="s2-desc staggerItem" style="margin-top: 0">
|
|
{{ content.s2.t20 }}
|
|
</p>
|
|
<div class="s2-tel staggerItem">
|
|
<ul>
|
|
<li>
|
|
<b>{{ content.s2.t9 }}: </b>
|
|
<a href="tel:+551633631500">+551633631500</a>
|
|
</li>
|
|
<li>
|
|
<b>{{ content.s2.t10 }}: </b>
|
|
<a href="mailto:info[at]orisoxin.com">info[at]orisoxin.com</a>
|
|
</li>
|
|
<li>
|
|
<b>{{ content.s2.t23 }}: </b>
|
|
<a href="www.engemasa.com.br">www.engemasa.com.br</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-md-6 col-lg-4 s2-item slide">
|
|
<div class="s2-img s2-Img-col2 anim-fadeInStagger">
|
|
<h4 class="h4 staggerItem">{{ content.s2.t15 }}</h4>
|
|
<p class="s2-desc staggerItem" style="margin-bottom: 0">NPA</p>
|
|
<p class="s2-desc staggerItem" style="margin-top: 0">
|
|
{{ content.s2.t16 }}
|
|
</p>
|
|
<div class="s2-tel staggerItem">
|
|
<ul>
|
|
<li>
|
|
<b>{{ content.s2.t9 }}: </b>
|
|
<a href="tel:+8653287314976">+86 532 87314976</a>
|
|
</li>
|
|
<li>
|
|
<b>{{ content.s2.t24 }}: </b>
|
|
<a href="tel:+8653287314975">+86 532 87314975</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-md-6 col-lg-4 s2-item slide">
|
|
<div class="s2-img s2-Img-col3 anim-fadeInStagger">
|
|
<h4 class="h4 staggerItem">{{ content.s2.t17 }}</h4>
|
|
<p class="s2-desc staggerItem">
|
|
{{ content.s2.t18 }}
|
|
</p>
|
|
<div class="s2-tel staggerItem">
|
|
<ul>
|
|
<li>
|
|
<b>{{ content.s2.t9 }}: </b>
|
|
<a href="tel:82(55)5874570">82(55)5874570</a>
|
|
</li>
|
|
<li>
|
|
<b>{{ content.s2.t24 }}: </b>
|
|
<a href="tel:82(55)5873330">82(55)5873330</a>
|
|
</li>
|
|
<li>
|
|
<b>{{ content.s2.t10 }}: </b>
|
|
<a href="mailto:info[at]orisoxin.com">info[at]orisoxin.com</a>
|
|
</li>
|
|
<li>
|
|
<b>{{ content.s2.t23 }}: </b>
|
|
<a href="www.GasComp.kr">www.GasComp.kr</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- <div class="col-12 col-md-6 col-lg-4 s2-item slide">-->
|
|
<!-- <div class="s2-img s2-Img-col2 anim-fadeInStagger">-->
|
|
<!-- <h4 class="h4 staggerItem">{{ content.s2.t19 }}</h4>-->
|
|
<!-- <p class="s2-desc staggerItem">-->
|
|
<!-- {{ content.s2.t20 }}-->
|
|
<!-- </p>-->
|
|
<!-- <div class="s2-tel staggerItem">-->
|
|
<!-- <ul>-->
|
|
<!-- <li>-->
|
|
<!-- <b>{{ content.s2.t9 }}: </b>-->
|
|
<!-- <a href="tel:+49021152295480">0049-021152295480</a>-->
|
|
<!-- </li>-->
|
|
<!-- <li>-->
|
|
<!-- <b>{{ content.s2.t10 }}: </b>-->
|
|
<!-- <a href="mailto:info[at]orisoxin.com">info[at]orisoxin.com</a>-->
|
|
<!-- </li>-->
|
|
<!-- </ul>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<div class="col-12 col-md-6 col-lg-4 s2-item slide">
|
|
<div class="s2-img s2-Img-col1 anim-fadeInStagger">
|
|
<h4 class="h4 staggerItem">{{ content.s2.t21 }}</h4>
|
|
<p class="s2-desc staggerItem">
|
|
{{ content.s2.t22 }}
|
|
</p>
|
|
<div class="s2-tel staggerItem">
|
|
<ul>
|
|
<li>
|
|
<b>{{ content.s2.t9 }}: </b>
|
|
<a href="tel:+8222083233840">+82-2-2083-2338-40</a>
|
|
</li>
|
|
<li>
|
|
<b>{{ content.s2.t24 }}: </b>
|
|
<a href="tel:+82220832341">+82-2-2083-2341</a>
|
|
</li>
|
|
<li>
|
|
<b>{{ content.s2.t23 }}: </b>
|
|
<a href="www.kdw.co.kr">www.kdw.co.kr</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-md-6 col-lg-4 s2-item slide">
|
|
<div class="s2-img s2-Img-col2 anim-fadeInStagger">
|
|
<h4 class="h4 staggerItem">{{ content.s2.t13 }}</h4>
|
|
<p class="s2-desc staggerItem" style="margin-bottom: 0">HJ Metal Korea</p>
|
|
<p class="s2-desc staggerItem" style="margin-top: 0">
|
|
{{ content.s2.t14 }}
|
|
</p>
|
|
<div class="s2-tel staggerItem">
|
|
<ul>
|
|
<li>
|
|
<b>{{ content.s2.t9 }}: </b>
|
|
<a href="tel:+82325724081">+82 32 572 4081-2</a>
|
|
</li>
|
|
<li>
|
|
<b>{{ content.s2.t24 }}: </b>
|
|
<a href="tel:+82325724086">+82 32 572 4086</a>
|
|
</li>
|
|
<li>
|
|
<b>{{ content.s2.t10 }}: </b>
|
|
<a href="mailto:info[at]orisoxin.com">info[at]orisoxin.com</a>
|
|
</li>
|
|
<li>
|
|
<b>{{ content.s2.t23 }}: </b>
|
|
<a href="www.hjmk.co.kr">www.hjmk.co.kr</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-md-6 col-lg-4 s2-item slide">
|
|
<div class="s2-img s2-Img-col7 anim-fadeInStagger">
|
|
<h4 class="h4 staggerItem">{{ content.s2.t5 }}</h4>
|
|
<p class="s2-desc staggerItem">
|
|
{{ content.s2.t6 }}
|
|
</p>
|
|
<div class="s2-tel staggerItem">
|
|
<ul>
|
|
<li>
|
|
<b>{{ content.s2.t25 }}: </b>
|
|
<a href="tel:03132747303">031-32747303</a>
|
|
</li>
|
|
<li>
|
|
<b>{{ content.s2.t10 }}: </b>
|
|
<a href="mailto:info[at]orisoxin.com">info[at]orisoxin.com</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-md-6 col-lg-4 s2-item slide">
|
|
<div class="s2-img s2-Img-col6 anim-fadeInStagger">
|
|
<h4 class="h4 staggerItem">{{ content.s2.t3 }}</h4>
|
|
<p class="s2-desc staggerItem">
|
|
{{ content.s2.t4 }}
|
|
</p>
|
|
<div class="s2-tel staggerItem">
|
|
<ul>
|
|
<li>
|
|
<b>{{ content.s2.t9 }}: </b>
|
|
<a href="tel:06134491021">0613-4491021</a>
|
|
</li>
|
|
<li>
|
|
<b>{{ content.s2.t9 }}: </b>
|
|
<a href="tel:06134491022">0613-4491022</a>
|
|
</li>
|
|
|
|
<li>
|
|
<b>{{ content.s2.t10 }}: </b>
|
|
<a href="mailto:info[at]orisoxin.com">info[at]orisoxin.com</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-md-6 col-lg-4 s2-item slide">
|
|
<div class="s2-img s2-Img-col5 anim-fadeInStagger">
|
|
<h4 class="h4 staggerItem">{{ content.s2.t1 }}</h4>
|
|
<p class="s2-desc staggerItem">
|
|
{{ content.s2.t2 }}
|
|
</p>
|
|
<div class="s2-tel staggerItem">
|
|
<ul>
|
|
<li>
|
|
<b>{{ content.s2.t9 }}: </b>
|
|
<a href="tel:06134427626">0613-4427626</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-md-6 col-lg-4 s2-item slide">
|
|
<div class="s2-img s2-Img-col4 anim-fadeInStagger">
|
|
<h4 class="h4 staggerItem">{{ content.s2.t11 }}</h4>
|
|
<p class="s2-desc staggerItem">
|
|
{{ content.s2.t12 }}
|
|
</p>
|
|
<div class="s2-tel staggerItem">
|
|
<ul>
|
|
<li>
|
|
<b>{{ content.s2.t9 }}: </b>
|
|
<a href="tel:02188612602">021-88612602</a>
|
|
</li>
|
|
<li>
|
|
<b>{{ content.s2.t24 }}: </b>
|
|
<a href="tel:02188612603">021-88612603</a>
|
|
</li>
|
|
<li>
|
|
<b>{{ content.s2.t10 }}: </b>
|
|
<a href="mailto:info[at]orisoxin.com">info[at]orisoxin.com</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!---------------------------------- Section 3 ------------------------------------->
|
|
<div class="s3">
|
|
<div class="parallax section">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-12 order-1 order-lg-0 col-lg-7 info anim-fadeInStagger">
|
|
<div class="s3-title-col1 staggerItem">
|
|
<h6 class="h6">{{ content.s3.t1 }}</h6>
|
|
</div>
|
|
<div class="s3-desc-col1 staggerItem">
|
|
<p>
|
|
{{ content.s3.t2 }}
|
|
</p>
|
|
</div>
|
|
<div class="s3-input staggerItem">
|
|
<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.s3.t3" />
|
|
<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.s3.t4"
|
|
/>
|
|
<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.s3.t5"
|
|
/>
|
|
<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.s3.t6"></textarea>
|
|
<p v-if="validation.message">{{ validation.message.msg }}</p>
|
|
</div>
|
|
<div class="btnSub">
|
|
<button class="btn-link" type="submit">{{ content.s3.t7 }}</button>
|
|
<!-- <nuxt-link >SUBMIT NOW</nuxt-link> -->
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 order-0 mb-5 mb-lg-0 order-lg-1 col-lg-5 location anim-fadeInStagger">
|
|
<div class="s3-title-col2 staggerItem">
|
|
<h6 class="h6">{{ content.s3.t8 }}</h6>
|
|
</div>
|
|
|
|
<div class="s3-address staggerItem">
|
|
<p>
|
|
{{ content.s3.t9 }}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="email staggerItem">
|
|
<i class="fas fa-envelope"></i>
|
|
<span><a href="mailto:info[at]orisoxin.com">info[at]orisoxin.com</a></span>
|
|
</div>
|
|
|
|
<div class="tel staggerItem">
|
|
<i class="fas fa-phone-alt"></i>
|
|
<span><a href="tel:02188612602">021-88612602</a></span>
|
|
</div>
|
|
|
|
<div class="tel staggerItem">
|
|
<i class="fas fa-fax"></i>
|
|
<span><a href="tel:02188612603">021-88612603</a></span>
|
|
</div>
|
|
|
|
<div class="s3-title-col2-row2 staggerItem">
|
|
<h6 class="h6">Map</h6>
|
|
|
|
<div class="mapouter">
|
|
<div class="gmap_canvas">
|
|
<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="400"
|
|
height="200"
|
|
style="border: 0"
|
|
allowfullscreen=""
|
|
loading="lazy"
|
|
></iframe>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
if (process.client) require('slick-carousel')
|
|
|
|
import {
|
|
fadeInAnimation,
|
|
fadeInStaggerAnimation,
|
|
leftToRightAnimation,
|
|
leftToRightStaggerAnimation,
|
|
numberAnimation,
|
|
progressAnimation,
|
|
rightToLeftAnimation
|
|
} from '@/utils/animations'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
message: {
|
|
name: '',
|
|
email: '',
|
|
subject: '',
|
|
message: '',
|
|
locale: this.$route.params.lang
|
|
},
|
|
validation: {},
|
|
defaultCover: '/img/GalleryPage/page-title.png'
|
|
}
|
|
},
|
|
mounted() {
|
|
this.$nextTick(() => {
|
|
fadeInAnimation(this.$gsap)
|
|
leftToRightAnimation(this.$gsap)
|
|
fadeInStaggerAnimation(this.$gsap)
|
|
leftToRightStaggerAnimation(this.$gsap)
|
|
numberAnimation(this.$gsap)
|
|
progressAnimation(this.$gsap)
|
|
rightToLeftAnimation(this.$gsap)
|
|
// Address carousel
|
|
$('#slides').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: 2,
|
|
slidesToScroll: 1
|
|
}
|
|
},
|
|
{
|
|
breakpoint: 769,
|
|
settings: {
|
|
slidesToShow: 1,
|
|
slidesToScroll: 1,
|
|
arrows: true
|
|
}
|
|
}
|
|
]
|
|
})
|
|
//--------------------------------------------------------- Section 1
|
|
this.$gsap
|
|
.timeline({
|
|
scrollTrigger: {
|
|
trigger: '.s2',
|
|
scrub: true,
|
|
start: 'top top'
|
|
}
|
|
})
|
|
.to($('.s1-Img-BG .parallax'), {
|
|
duration: 9,
|
|
opacity: 0,
|
|
y: '50%'
|
|
})
|
|
})
|
|
},
|
|
methods: {
|
|
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.contact[this.$route.params.lang]
|
|
},
|
|
cover() {
|
|
return this.$store.state.global.cover?.contact
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.mapouter {
|
|
position: relative;
|
|
text-align: right;
|
|
height: 250px;
|
|
width: 100%;
|
|
margin-top: 20px;
|
|
|
|
.gmap_canvas {
|
|
overflow: hidden;
|
|
background: none !important;
|
|
height: 100%;
|
|
width: 100%;
|
|
|
|
iframe {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.slick-slide:nth-child(-n + 5) .s2-img h4 {
|
|
margin-right: auto;
|
|
text-align: left;
|
|
}
|
|
.slick-slide:nth-child(-n + 5) .s2-desc {
|
|
text-align: left;
|
|
margin-right: auto;
|
|
direction: ltr;
|
|
max-width: 100% !important;
|
|
}
|
|
// .slick-slide .s8-tel{
|
|
// text-align: left;
|
|
// }
|
|
.slick-slide .s2-tel a:lang(fa) {
|
|
direction: ltr !important;
|
|
}
|
|
</style>
|