front-end almost done | started back-end
This commit is contained in:
Amir Mohamadi
+117
-94
@@ -1,13 +1,30 @@
|
||||
<template>
|
||||
<div class="page home--page">
|
||||
<div class="hero clearfix">
|
||||
<div class="bg"></div>
|
||||
<div class="txt--home">
|
||||
<h1>{{staticData.hero.t1}}</h1>
|
||||
<p>{{staticData.hero.t2}}</p>
|
||||
<nuxt-link :to="{name: staticData.hero.link.url}" class="btn btn-reverse-fill">{{staticData.hero.link.txt}}</nuxt-link>
|
||||
|
||||
<div id="slider">
|
||||
<div class="hero clearfix">
|
||||
<div class="bg"></div>
|
||||
<div class="txt--home">
|
||||
<h1>{{staticData.hero.t1}}</h1>
|
||||
<p>{{staticData.hero.t2}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero clearfix">
|
||||
<div class="bg"></div>
|
||||
<div class="txt--home">
|
||||
<h1>{{staticData.hero.t1}}</h1>
|
||||
<p>{{staticData.hero.t2}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero clearfix">
|
||||
<div class="bg"></div>
|
||||
<div class="txt--home">
|
||||
<h1>{{staticData.hero.t1}}</h1>
|
||||
<p>{{staticData.hero.t2}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="s1">
|
||||
<div class="go-down-btn">
|
||||
<em class="fa fa-angle-double-down"></em>
|
||||
@@ -19,139 +36,106 @@
|
||||
</div>
|
||||
<div class="col-6 caption-side">
|
||||
<p>{{staticData.s1.caption}}</p>
|
||||
<nuxt-link :to="{name: staticData.s1.link.url}" class="btn btn-primary">{{staticData.s1.link.txt}}</nuxt-link>
|
||||
<nuxt-link :to="{name: 'lang-about',params:{lang: $route.params.lang}}" class="btn btn-primary">{{staticData.s1.link}}</nuxt-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="s1-2">
|
||||
<img src="~/assets/img/home/hp-s1-i2.jpg" alt="" class="section-bg">
|
||||
<div class="container">
|
||||
<div class="panel">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<h2 class="title title-shape-center">{{staticData.s1_2.t1}}</h2>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<p>{{staticData.s1_2.t2}}</p>
|
||||
<p>{{staticData.s1_2.t3}}</p>
|
||||
<nuxt-link :to="{name: 'lang-about',params: {lang: $route.params.lang}}" class="btn btn-primary">{{staticData.s1_2.link}}</nuxt-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="s2">
|
||||
<img src="~/assets/img/hp-s2-i1.jpg" alt="" class="section-bg">
|
||||
<img src="~/assets/img/home/hp-s2-i1.jpg" alt="" class="section-bg">
|
||||
<div class="container">
|
||||
<div class="panel">
|
||||
<div class="parts p1">
|
||||
<h2 class="title title-shape-center">{{staticData.s2.part1.t1}}</h2>
|
||||
<h2 class="title title-shape-center">{{staticData.s2.t1}}</h2>
|
||||
<div>
|
||||
<p>{{staticData.s2.part1.t2}}</p>
|
||||
<p>{{staticData.s2.t2}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="parts p2 row">
|
||||
<div class="col-6">
|
||||
<h2 class="title title-subtitle">{{staticData.s2.part2.t1}}</h2>
|
||||
<p>{{staticData.s2.part2.t2}}</p>
|
||||
<nuxt-link :to="{name: staticData.s2.part2.link.url}" class="btn btn-primary">{{staticData.s2.part2.link.txt}}</nuxt-link>
|
||||
<div class="txtBox">
|
||||
<h2 class="title title-subtitle">{{staticData.s2.t5}}</h2>
|
||||
<p>{{staticData.s2.t6}}</p>
|
||||
<nuxt-link :to="{name: 'lang-services',params: {lang: $route.params.lang}}" class="btn btn-primary">{{staticData.s2.link1}}</nuxt-link>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="imgBox imgBox-shape">
|
||||
<img src="~/assets/img/hp-s2-i2.jpg" alt="">
|
||||
<img src="~/assets/img/home/hp-s2-i2.jpg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="parts p3 row">
|
||||
<div class="col-6">
|
||||
<div class="imgBox imgBox-reverse imgBox-shape-reverse">
|
||||
<img src="~/assets/img/hp-s2-i3.jpg" alt="">
|
||||
<img src="~/assets/img/home/hp-s2-i3.jpg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<h2 class="title title-subtitle">{{staticData.s2.part3.t1}}</h2>
|
||||
<p>{{staticData.s2.part3.t2}}</p>
|
||||
<nuxt-link :to="{name: staticData.s2.part3.link.url}" class="btn btn-primary">{{staticData.s2.part3.link.txt}}</nuxt-link>
|
||||
<div class="txtBox">
|
||||
<h2 class="title title-subtitle">{{staticData.s2.t3}}</h2>
|
||||
<p>{{staticData.s2.t4}}</p>
|
||||
<nuxt-link :to="{name: 'lang-tech-gStandard',params: {lang: $route.params.lang}}" class="btn btn-primary">{{staticData.s2.link2}}</nuxt-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="s3">
|
||||
<img src="~/assets/img/hp-s3-i1.jpg" alt="" class="section-bg">
|
||||
<img src="~/assets/img/home/hp-s3-i1.jpg" alt="" class="section-bg">
|
||||
<div class="container clearfix">
|
||||
<div class="panel panel1">
|
||||
<div class="panel">
|
||||
<div class="parts p1">
|
||||
<h2 class="title title-shape-center">{{staticData.s3.part1.t1}}</h2>
|
||||
</div>
|
||||
<div class="parts p2 row">
|
||||
<div class="col-4" v-for="item in staticData.s3.part1.projects">
|
||||
<div class="imgBox">
|
||||
<img :src="require(`~/assets/img/${item.img}`)" alt="">
|
||||
<p>{{item.txt}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="title title-shape-center">{{staticData.s3.t1}}</h2>
|
||||
<div class="col-12">
|
||||
<nuxt-link :to="{name: staticData.s3.part1.link.url}" class="btn btn-primary">{{staticData.s3.part1.link.txt}}</nuxt-link>
|
||||
<p>{{staticData.s3.t2}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel panel2">
|
||||
<div class="parts p3 row">
|
||||
<div class="col-12">
|
||||
<h2 class="title title-shape-center">{{staticData.s3.part2.t1}}</h2>
|
||||
</div>
|
||||
<div class="col-4" v-for="item in staticData.s3.part2.products">
|
||||
<nuxt-link :to="{name: 'lang-products-product',params: {product: item.url}}">
|
||||
<div class="products">
|
||||
<div class="parts p2 row">
|
||||
<div class="col-4" v-for="item in products">
|
||||
<nuxt-link :to="{name: 'lang-products-product',params: {lang: $route.params.lang,product: item.url}}">
|
||||
<div class="imgBox">
|
||||
<img :src="require(`~/assets/img/${item.img}`)" alt="">
|
||||
<img :src="require(`~/assets/img/home/${item.img}`)" alt="">
|
||||
<p>{{item.txt}}</p>
|
||||
</div>
|
||||
</nuxt-link>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<nuxt-link :to="{name: staticData.s3.part2.link.url}" class="btn btn-primary">{{staticData.s3.part2.link.txt}}</nuxt-link>
|
||||
<nuxt-link :to="{name: 'lang-products',params: {lang: $route.params.lang}}" class="btn btn-primary">{{staticData.s3.link}}</nuxt-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="s4">
|
||||
<img src="~/assets/img/hp-s4-i1.jpg" alt="" class="section-bg">
|
||||
<img src="~/assets/img/home/hp-s4-i1.jpg" alt="" class="section-bg">
|
||||
<div class="txt">
|
||||
<h2 class="title title-shape">{{staticData.s4.t1}} <span>{{staticData.s4.t2}}</span></h2>
|
||||
<p>{{staticData.s4.t3}}</p>
|
||||
<a :href="staticData.s4.link.url" target="_blank" class="btn btn-reverse-fill">{{staticData.s4.link.txt}}</a>
|
||||
</div>
|
||||
</section>
|
||||
<section class="s5">
|
||||
<div class="container">
|
||||
<div class="panel">
|
||||
<div class="p1">
|
||||
<h2 class="title title-shape-center">{{staticData.s5.t1}}</h2>
|
||||
<p>{{staticData.s5.t2}}</p>
|
||||
</div>
|
||||
|
||||
<form action="" class="form">
|
||||
<div class="formRow" :class="validation.first_name ? 'err' : ''">
|
||||
<input type="text" :placeholder="staticData.s5.t3">
|
||||
<p v-if="validation.first_name">{{validation.first_name[0]}}</p>
|
||||
</div>
|
||||
|
||||
<div class="formRow" :class="validation.last_name ? 'err' : ''">
|
||||
<input type="text" :placeholder="staticData.s5.t4">
|
||||
<p v-if="validation.last_name">{{validation.last_name[0]}}</p>
|
||||
</div>
|
||||
|
||||
<div class="formRow" :class="validation.phone_number ? 'err' : ''">
|
||||
<input type="text" :placeholder="staticData.s5.t5">
|
||||
<p v-if="validation.phone_number">{{validation.phone_number[0]}}</p>
|
||||
</div>
|
||||
|
||||
<div class="formRow" :class="validation.email ? 'err' : ''">
|
||||
<input type="text" :placeholder="staticData.s5.t6">
|
||||
<p v-if="validation.email">{{validation.email[0]}}</p>
|
||||
</div>
|
||||
|
||||
<div class="formRow formRow-wide" :class="validation.message ? 'err' : ''">
|
||||
<textarea :placeholder="staticData.s5.t7"></textarea>
|
||||
<p v-if="validation.message">{{validation.message[0]}}</p>
|
||||
</div>
|
||||
|
||||
<div class="formRow buttonRow">
|
||||
<button class="btn btn-reverse-fill">{{staticData.s5.t8}}</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="watermark">
|
||||
<logo/>
|
||||
</div>
|
||||
<a :href="catalog_link" target="_blank" download="catalog.pdf" class="btn btn-reverse-fill">{{staticData.s4.link}}</a>
|
||||
</div>
|
||||
</section>
|
||||
<CustomersCommunication/>
|
||||
<section class="s6">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
@@ -159,11 +143,11 @@
|
||||
<div class="col-6">
|
||||
<h2 class="title title-shape">{{staticData.s6.t1}}</h2>
|
||||
<p>{{staticData.s6.t2}}</p>
|
||||
<nuxt-link :to="{name: staticData.s6.link1.url}" class="btn btn-primary">{{staticData.s6.link1.txt}}</nuxt-link>
|
||||
<a :href="staticData.s6.link2.url" class="btn btn-primary-fill">{{staticData.s6.link2.txt}}</a>
|
||||
<nuxt-link :to="{name: staticData.s6.link1.url}" class="btn btn-primary">{{staticData.s6.link1}}</nuxt-link>
|
||||
<a :href="calc_app_link" target="_blank" class="btn btn-primary-fill">{{staticData.s6.link2}}</a>
|
||||
</div>
|
||||
<div class="col-2 img-side">
|
||||
<img src="~/assets/img/hp-s6-i1.png" alt="">
|
||||
<img src="~/assets/img/home/hp-s6-i1.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -172,19 +156,50 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
if (process.client) require('slick-carousel')
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
products: [
|
||||
{
|
||||
img: 'hp-s3-i5.jpg',
|
||||
txt: 'گریتینگ پله',
|
||||
url: '1'
|
||||
},
|
||||
{
|
||||
img: 'hp-s3-i6.jpg',
|
||||
txt: 'گریتینگ گالوانیزه',
|
||||
url: '2'
|
||||
},
|
||||
{
|
||||
img: 'hp-s3-i7.jpg',
|
||||
txt: 'گریتینگ آلومینیوم',
|
||||
url: '3'
|
||||
},
|
||||
{
|
||||
img: 'hp-s3-i8.jpg',
|
||||
txt: 'گریتینگ الکتروفورج',
|
||||
url: '4'
|
||||
},
|
||||
{
|
||||
img: 'hp-s3-i9.jpg',
|
||||
txt: 'پنل گریتینگ',
|
||||
url: '5'
|
||||
},
|
||||
{
|
||||
img: 'hp-s3-i10.jpg',
|
||||
txt: 'گریتینگ تسمه در تسمه',
|
||||
url: '6'
|
||||
}
|
||||
],
|
||||
catalog_link: this.$store.state.staticData.catalog_link,
|
||||
calc_app_link: this.$store.state.staticData.calc_app_link,
|
||||
validation: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
staticData() {
|
||||
if (this.$route.params.lang === 'fa') {
|
||||
return this.$store.state.staticData.homePage.fa
|
||||
} else if (this.$route.params.lang === 'en') {
|
||||
return this.$store.state.staticData.homePage.en
|
||||
}
|
||||
return this.$store.state.staticData.homePage[this.$route.params.lang]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
@@ -208,6 +223,15 @@
|
||||
//
|
||||
// this.$scrollmagic.addScene(titleScene[i])
|
||||
// }
|
||||
|
||||
/////////////////////////////////////// carousel
|
||||
$('#slider').slick({
|
||||
slidesToShow: 1,
|
||||
rtl: this.$route.params.lang === 'fa',
|
||||
dots: true,
|
||||
autoplay: true,
|
||||
autoplaySpeed: 6000
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -218,4 +242,3 @@
|
||||
background: #F0F0F0 !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user