update:add ci cd files ==> do not edit those file
This commit is contained in:
mahyargdz
@@ -0,0 +1,509 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user