add calculation module and fix many bugs
This commit is contained in:
Amir Mohamadi
+221
-222
@@ -1,232 +1,231 @@
|
||||
<template>
|
||||
<div class="page home--page">
|
||||
|
||||
<div class="slider-container">
|
||||
<div id="slider" class="anim-parallax-hero">
|
||||
<div class="hero clearfix" v-for="item in slider" :key="item._id">
|
||||
<div class="bg" :style="{backgroundImage: `url(${item.image})`}"></div>
|
||||
<div class="txt--home">
|
||||
<h1>{{item.slider_details[$route.params.lang].title}}</h1>
|
||||
<p>{{item.slider_details[$route.params.lang].caption}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="s1">
|
||||
<div class="go-down-btn" @click="scrollDown">
|
||||
<em class="fa fa-angle-double-down"></em>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6 title-side">
|
||||
<h2 class="title title-shape">{{staticData.s1.title}}</h2>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 caption-side">
|
||||
<p>{{staticData.s1.caption}}</p>
|
||||
<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="s2">
|
||||
<img src="~/assets/img/home/hp-s1-i2.jpg" alt="" class="section-bg anim-parallax">
|
||||
<div class="container">
|
||||
<div class="panel">
|
||||
<div class="container-fluid">
|
||||
<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>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="s3">
|
||||
<img src="~/assets/img/home/hp-s2-i1.jpg" alt="" class="section-bg anim-parallax">
|
||||
<div class="container">
|
||||
<div class="panel">
|
||||
<div class="container-fluid">
|
||||
<div class="parts p1">
|
||||
<h2 class="title title-shape-center">{{staticData.s2.t1}}</h2>
|
||||
<div>
|
||||
<p>{{staticData.s2.t2}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="parts p2 row">
|
||||
<div class="col-12 col-lg-6 order-1 order-lg-0">
|
||||
<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-12 col-lg-6 order-0 order-lg-1 mb-5 mb-lg-0">
|
||||
<div class="imgBox imgBox-shape anim-fadeIn">
|
||||
<div class="img">
|
||||
<img src="~/assets/img/home/hp-s2-i2.jpg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="parts p3 row">
|
||||
<div class="col-12 col-lg-6 mb-5 mb-lg-0">
|
||||
<div class="imgBox imgBox-reverse imgBox-shape-reverse anim-fadeIn">
|
||||
<div class="img">
|
||||
<img src="~/assets/img/home/hp-s2-i3.jpg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-lg-6">
|
||||
<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>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="s4">
|
||||
<img src="~/assets/img/home/hp-s3-i1.jpg" alt="" class="section-bg anim-parallax">
|
||||
<div class="container clearfix">
|
||||
<div class="panel">
|
||||
<div class="parts p1">
|
||||
<h2 class="title title-shape-center">{{staticData.s3.t1}}</h2>
|
||||
<div class="col-12">
|
||||
<p>{{staticData.s3.t2}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="products">
|
||||
<div class="parts p2 row">
|
||||
<div class="col-12 col-sm-6 col-lg-4 mb-5 anim-fadeIn" v-for="(item,index) in products" :key="item._id" v-if="index <= 5">
|
||||
<nuxt-link :to="{name: 'lang-products-product',params: {lang: $route.params.lang,product: item._id}}" class="product">
|
||||
<div class="imgBox">
|
||||
<img :src="item.cover" :alt="item.product_details[$route.params.lang].name">
|
||||
</div>
|
||||
<p>{{item.product_details[$route.params.lang].name}}</p>
|
||||
</nuxt-link>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<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="s5">
|
||||
<img src="~/assets/img/home/hp-s4-i1.jpg" alt="" class="section-bg">
|
||||
<div class="txt anim-parallax">
|
||||
<h2 class="title title-shape">{{staticData.s4.t1}} <span>{{staticData.s4.t2}}</span></h2>
|
||||
<p>{{staticData.s4.t3}}</p>
|
||||
<a :href="catalog.file" target="_blank" class="btn btn-reverse-fill">{{staticData.s4.link}}</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<CustomersCommunication/>
|
||||
|
||||
<section class="s6">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-2 d-none d-lg-block"></div>
|
||||
<div class="col-12 col-lg-6">
|
||||
<h2 class="title title-shape">{{staticData.s6.t1}}</h2>
|
||||
<p>{{staticData.s6.t2}}</p>
|
||||
<!-- <nuxt-link :to="{name: 'lang-calculation',params: {lang: $route.params.lang}}" class="btn btn-primary">{{staticData.s6.link1}}</nuxt-link>-->
|
||||
<a @click.prevent="notAvailable" href="" class="btn btn-primary">{{staticData.s6.link1}}</a>
|
||||
<a @click.prevent="notAvailable" :href="calc_app_link" target="_blank" class="btn btn-primary-fill">{{staticData.s6.link2}}</a>
|
||||
</div>
|
||||
<div class="col-2 img-side d-none d-lg-block">
|
||||
<img src="~/assets/img/home/hp-s6-i1.png" class="anim-fadeIn" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div class="page home--page">
|
||||
|
||||
<div class="slider-container">
|
||||
<div id="slider" class="anim-parallax-hero">
|
||||
<div class="hero clearfix" v-for="item in slider" :key="item._id">
|
||||
<div class="bg" :style="{backgroundImage: `url(${item.image})`}"></div>
|
||||
<div class="txt--home">
|
||||
<h1>{{ item.slider_details[$route.params.lang].title }}</h1>
|
||||
<p>{{ item.slider_details[$route.params.lang].caption }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="s1">
|
||||
<div class="go-down-btn" @click="scrollDown">
|
||||
<em class="fa fa-angle-double-down"></em>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6 title-side">
|
||||
<h2 class="title title-shape">{{ staticData.s1.title }}</h2>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 caption-side">
|
||||
<p>{{ staticData.s1.caption }}</p>
|
||||
<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="s2">
|
||||
<img src="~/assets/img/home/hp-s1-i2.jpg" alt="" class="section-bg anim-parallax">
|
||||
<div class="container">
|
||||
<div class="panel">
|
||||
<div class="container-fluid">
|
||||
<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>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="s3">
|
||||
<img src="~/assets/img/home/hp-s2-i1.jpg" alt="" class="section-bg anim-parallax">
|
||||
<div class="container">
|
||||
<div class="panel">
|
||||
<div class="container-fluid">
|
||||
<div class="parts p1">
|
||||
<h2 class="title title-shape-center">{{ staticData.s2.t1 }}</h2>
|
||||
<div>
|
||||
<p>{{ staticData.s2.t2 }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="parts p2 row">
|
||||
<div class="col-12 col-lg-6 order-1 order-lg-0">
|
||||
<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-12 col-lg-6 order-0 order-lg-1 mb-5 mb-lg-0">
|
||||
<div class="imgBox imgBox-shape anim-fadeIn">
|
||||
<div class="img">
|
||||
<img src="~/assets/img/home/hp-s2-i2.jpg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="parts p3 row">
|
||||
<div class="col-12 col-lg-6 mb-5 mb-lg-0">
|
||||
<div class="imgBox imgBox-reverse imgBox-shape-reverse anim-fadeIn">
|
||||
<div class="img">
|
||||
<img src="~/assets/img/home/hp-s2-i3.jpg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-lg-6">
|
||||
<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>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="s4">
|
||||
<img src="~/assets/img/home/hp-s3-i1.jpg" alt="" class="section-bg anim-parallax">
|
||||
<div class="container clearfix">
|
||||
<div class="panel">
|
||||
<div class="parts p1">
|
||||
<h2 class="title title-shape-center">{{ staticData.s3.t1 }}</h2>
|
||||
<div class="col-12">
|
||||
<p>{{ staticData.s3.t2 }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="products">
|
||||
<div class="parts p2 row">
|
||||
<div class="col-12 col-sm-6 col-lg-4 mb-5 anim-fadeIn" v-for="item in favoriteProducts" :key="item._id">
|
||||
<nuxt-link :to="{name: 'lang-products-product',params: {lang: $route.params.lang,product: item._id}}" class="product">
|
||||
<div class="imgBox">
|
||||
<img :src="item.thumb" :alt="item.product_details[$route.params.lang].name">
|
||||
</div>
|
||||
<p>{{ item.product_details[$route.params.lang].name }}</p>
|
||||
</nuxt-link>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<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="s5">
|
||||
<img src="~/assets/img/home/hp-s4-i1.jpg" alt="" class="section-bg">
|
||||
<div class="txt anim-parallax">
|
||||
<h2 class="title title-shape">{{ staticData.s4.t1 }} <span>{{ staticData.s4.t2 }}</span></h2>
|
||||
<p>{{ staticData.s4.t3 }}</p>
|
||||
<a v-if="catalog && catalog.file" :href="catalog.file[$route.params.lang]" target="_blank" class="btn btn-reverse-fill">{{ staticData.s4.link }}</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<CustomersCommunication/>
|
||||
|
||||
<section class="s6">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-2 d-none d-lg-block"></div>
|
||||
<div class="col-12 col-lg-6">
|
||||
<h2 class="title title-shape">{{ staticData.s6.t1 }}</h2>
|
||||
<p>{{ staticData.s6.t2 }}</p>
|
||||
<nuxt-link :to="{name: 'lang-calculation',params: {lang: $route.params.lang}}" class="btn btn-primary">{{ staticData.s6.link1 }}</nuxt-link>
|
||||
<a @click.prevent="notAvailable" :href="calc_app_link" target="_blank" class="btn btn-primary-fill">{{ staticData.s6.link2 }}</a>
|
||||
</div>
|
||||
<div class="col-2 img-side d-none d-lg-block">
|
||||
<img src="~/assets/img/home/hp-s6-i1.png" class="anim-fadeIn" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
if (process.client) require('slick-carousel')
|
||||
import {fadeInAnimation, parallaxAnimation, parallaxAnimation_hero} from '~/mixins/animations'
|
||||
if (process.client) require('slick-carousel')
|
||||
import {fadeInAnimation, parallaxAnimation, parallaxAnimation_hero} from '~/mixins/animations'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
slider: null,
|
||||
products: null,
|
||||
catalog: null,
|
||||
calc_app_link: this.$store.state.staticData.calc_app_link,
|
||||
validation: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
staticData() {
|
||||
return this.$store.state.staticData.homePage[this.$route.params.lang]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
scrollDown() {
|
||||
this.$gsap.to(window, {scrollTo: {y: $('.home--page .s1'), offsetY: 90}, duration: 0.9, ease: 'power4.inOut'})
|
||||
},
|
||||
notAvailable() {
|
||||
this.$alert(this.$route.params.lang === 'fa' ? 'این بخش فعلا در دسترس نیست' : 'This section is currently unavailable', '', {
|
||||
confirmButtonText: 'OK',
|
||||
})
|
||||
}
|
||||
},
|
||||
mixins: [fadeInAnimation, parallaxAnimation, parallaxAnimation_hero],
|
||||
mounted() {
|
||||
/////////////////////////////////////// carousel
|
||||
$('#slider').slick({
|
||||
slidesToShow: 1,
|
||||
rtl: this.$route.params.lang === 'fa',
|
||||
dots: true,
|
||||
autoplay: true,
|
||||
autoplaySpeed: 6000,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 768,
|
||||
settings: {
|
||||
arrows: false
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
},
|
||||
head() {
|
||||
return {
|
||||
title: this.staticData.title
|
||||
}
|
||||
},
|
||||
async asyncData({$axios}) {
|
||||
const slider = await $axios.get('/api/public/slider')
|
||||
const products = await $axios.get(`/api/public/products`)
|
||||
const catalog = await $axios.get('/api/public/catalog')
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
slider: null,
|
||||
favoriteProducts: null,
|
||||
catalog: null,
|
||||
calc_app_link: this.$store.state.staticData.calc_app_link,
|
||||
validation: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
staticData() {
|
||||
return this.$store.state.staticData.homePage[this.$route.params.lang]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
scrollDown() {
|
||||
this.$gsap.to(window, {scrollTo: {y: $('.home--page .s1'), offsetY: 90}, duration: 0.9, ease: 'power4.inOut'})
|
||||
},
|
||||
notAvailable() {
|
||||
this.$alert(this.$route.params.lang === 'fa' ? 'این بخش فعلا در دسترس نیست' : 'This section is currently unavailable', '', {
|
||||
confirmButtonText: 'OK',
|
||||
})
|
||||
}
|
||||
},
|
||||
mixins: [fadeInAnimation, parallaxAnimation, parallaxAnimation_hero],
|
||||
mounted() {
|
||||
/////////////////////////////////////// carousel
|
||||
$('#slider').slick({
|
||||
slidesToShow: 1,
|
||||
rtl: this.$route.params.lang === 'fa',
|
||||
dots: true,
|
||||
autoplay: true,
|
||||
autoplaySpeed: 6000,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 768,
|
||||
settings: {
|
||||
arrows: false
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
},
|
||||
head() {
|
||||
return {
|
||||
title: this.staticData.title
|
||||
}
|
||||
},
|
||||
async asyncData({$axios}) {
|
||||
const slider = await $axios.get('/api/public/slider')
|
||||
const favoriteProducts = await $axios.get(`/api/public/favoriteProducts`)
|
||||
const catalog = await $axios.get('/api/public/catalog')
|
||||
|
||||
return {
|
||||
slider: slider.data,
|
||||
products: products.data,
|
||||
catalog: catalog.data
|
||||
}
|
||||
}
|
||||
}
|
||||
return {
|
||||
slider: slider.data,
|
||||
favoriteProducts: favoriteProducts.data,
|
||||
catalog: catalog.data
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.footer{
|
||||
background: #F0F0F0 !important;
|
||||
}
|
||||
.footer{
|
||||
background: #F0F0F0 !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user