add calculation module and fix many bugs
This commit is contained in:
Amir Mohamadi
+167
-167
@@ -1,176 +1,176 @@
|
||||
<template>
|
||||
<header class="header">
|
||||
<div class="lang-bar">
|
||||
<a :href="catalog.file" target="_blank" class="catalog-download">
|
||||
<span>{{staticData.catalog}}</span>
|
||||
<span> </span>
|
||||
<i class="fas fa-download"></i>
|
||||
</a>
|
||||
<div class="dropdown" @mouseenter="drop" @mouseleave="drop">
|
||||
<div class="title">
|
||||
<p class="current-lang">
|
||||
<span>FA / EN</span>
|
||||
<i class="fas fa-sort-down"></i>
|
||||
</p>
|
||||
</div>
|
||||
<div class="dropMenu">
|
||||
<div class="drop-item">
|
||||
<nuxt-link :to="{to: this.$route.fullPath, params: {lang: 'fa'}}">FA</nuxt-link>
|
||||
</div>
|
||||
<div class="drop-item">
|
||||
<nuxt-link :to="{to: this.$route.fullPath, params: {lang: 'en'}}">EN</nuxt-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container-fluid">
|
||||
<nav class="row align-items-center">
|
||||
<!-- desktop -->
|
||||
<div class="col-12 d-none d-md-block links">
|
||||
<div class="container-fluid">
|
||||
<ul class="row justify-content-start">
|
||||
<nuxt-link :to="{name: 'lang',params: {lang: $route.params.lang}}" tag="li" exact class="">
|
||||
<a class="logo">
|
||||
<Logo/>
|
||||
</a>
|
||||
</nuxt-link>
|
||||
<nuxt-link :to="{name: 'lang',params: {lang: $route.params.lang}}" tag="li" exact class="">
|
||||
<a>{{staticData.home}}</a>
|
||||
</nuxt-link>
|
||||
<nuxt-link :to="{name: 'lang-about',params: {lang: $route.params.lang}}" tag="li" exact class="">
|
||||
<a>{{staticData.about}}</a>
|
||||
</nuxt-link>
|
||||
<nuxt-link :to="{name: 'lang-services',params: {lang: $route.params.lang}}" tag="li" exact class="">
|
||||
<a>{{staticData.services}}</a>
|
||||
</nuxt-link>
|
||||
<nuxt-link :to="{name: 'lang-products',params: {lang: $route.params.lang}}" tag="li" class="">
|
||||
<a>{{staticData.products}}</a>
|
||||
</nuxt-link>
|
||||
<nuxt-link :to="{name: 'lang-projects',params: {lang: $route.params.lang}}" tag="li" exact class="">
|
||||
<a>{{staticData.projects}}</a>
|
||||
</nuxt-link>
|
||||
<li class="tech_info" @mouseenter="tech_info" @mouseleave="tech_info"
|
||||
:class="$route.name === 'lang-tech-gDesign' ||
|
||||
<header class="header">
|
||||
<div class="lang-bar">
|
||||
<a v-if="catalog && catalog.file" :href="catalog.file[$route.params.lang]" target="_blank" class="catalog-download">
|
||||
<span>{{ staticData.catalog }}</span>
|
||||
<span> </span>
|
||||
<i class="fas fa-download"></i>
|
||||
</a>
|
||||
<div class="dropdown" @mouseenter="drop" @mouseleave="drop">
|
||||
<div class="title">
|
||||
<p class="current-lang">
|
||||
<span>FA / EN</span>
|
||||
<i class="fas fa-sort-down"></i>
|
||||
</p>
|
||||
</div>
|
||||
<div class="dropMenu">
|
||||
<div class="drop-item">
|
||||
<nuxt-link :to="{to: this.$route.fullPath, params: {lang: 'fa'}}">FA</nuxt-link>
|
||||
</div>
|
||||
<div class="drop-item">
|
||||
<nuxt-link :to="{to: this.$route.fullPath, params: {lang: 'en'}}">EN</nuxt-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container-fluid">
|
||||
<nav class="row align-items-center">
|
||||
<!-- desktop -->
|
||||
<div class="col-12 d-none d-md-block links">
|
||||
<div class="container-fluid">
|
||||
<ul class="row justify-content-start">
|
||||
<nuxt-link :to="{name: 'lang',params: {lang: $route.params.lang}}" tag="li" exact class="">
|
||||
<a class="logo">
|
||||
<Logo/>
|
||||
</a>
|
||||
</nuxt-link>
|
||||
<nuxt-link :to="{name: 'lang',params: {lang: $route.params.lang}}" tag="li" exact class="">
|
||||
<a>{{ staticData.home }}</a>
|
||||
</nuxt-link>
|
||||
<nuxt-link :to="{name: 'lang-about',params: {lang: $route.params.lang}}" tag="li" exact class="">
|
||||
<a>{{ staticData.about }}</a>
|
||||
</nuxt-link>
|
||||
<nuxt-link :to="{name: 'lang-services',params: {lang: $route.params.lang}}" tag="li" exact class="">
|
||||
<a>{{ staticData.services }}</a>
|
||||
</nuxt-link>
|
||||
<nuxt-link :to="{name: 'lang-products',params: {lang: $route.params.lang}}" tag="li" class="">
|
||||
<a>{{ staticData.products }}</a>
|
||||
</nuxt-link>
|
||||
<nuxt-link :to="{name: 'lang-projects',params: {lang: $route.params.lang}}" tag="li" exact class="">
|
||||
<a>{{ staticData.projects }}</a>
|
||||
</nuxt-link>
|
||||
<li class="tech_info" @mouseenter="tech_info" @mouseleave="tech_info"
|
||||
:class="$route.name === 'lang-tech-gDesign' ||
|
||||
$route.name === 'lang-tech-gStandard' ||
|
||||
$route.name === 'lang-tech-gTech' ||
|
||||
$route.name === 'lang-tech-gUsage' ? 'active' : null">
|
||||
<a>{{staticData.tech_info}}</a>
|
||||
<div class="drop-down">
|
||||
<ul>
|
||||
<li :class="$route.name === 'lang-tech-gTech' ? 'sub-menu-active' : null">
|
||||
<nuxt-link :to="{name: 'lang-tech-gTech',params: {lang: $route.params.lang}}">{{staticData.ti_1}}</nuxt-link>
|
||||
</li>
|
||||
<li :class="$route.name === 'lang-tech-gStandard' ? 'sub-menu-active' : null">
|
||||
<nuxt-link :to="{name: 'lang-tech-gStandard',params: {lang: $route.params.lang}}">{{staticData.ti_2}}</nuxt-link>
|
||||
</li>
|
||||
<li :class="$route.name === 'lang-tech-gDesign' ? 'sub-menu-active' : null">
|
||||
<nuxt-link :to="{name: 'lang-tech-gDesign',params: {lang: $route.params.lang}}">{{staticData.ti_3}}</nuxt-link>
|
||||
</li>
|
||||
<li :class="$route.name === 'lang-tech-gUsage' ? 'sub-menu-active' : null">
|
||||
<nuxt-link :to="{name: 'lang-tech-gUsage',params: {lang: $route.params.lang}}">{{staticData.ti_4}}</nuxt-link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<nuxt-link :to="{name: 'lang-blog',params: {lang: $route.params.lang}}" tag="li" class="">
|
||||
<a>{{staticData.blog}}</a>
|
||||
</nuxt-link>
|
||||
<nuxt-link :to="{name: 'lang-contact',params: {lang: $route.params.lang}}" tag="li" exact class="">
|
||||
<a>{{staticData.contact}}</a>
|
||||
</nuxt-link>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- mobile -->
|
||||
<div class="col-12 d-md-none links mobile">
|
||||
<div class="container-fluid">
|
||||
<ul class="row">
|
||||
<li class="col">
|
||||
<nuxt-link :to="{name: 'lang',params: {lang: $route.params.lang}}" exact class="logo">
|
||||
<Logo/>
|
||||
</nuxt-link>
|
||||
</li>
|
||||
<li class="col menu">
|
||||
<div id="menuBtn" @click="offCanvas">
|
||||
<div class="bars b1"></div>
|
||||
<div class="bars b2"></div>
|
||||
<div class="bars b3"></div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<a>{{ staticData.tech_info }}</a>
|
||||
<div class="drop-down">
|
||||
<ul>
|
||||
<li :class="$route.name === 'lang-tech-gTech' ? 'sub-menu-active' : null">
|
||||
<nuxt-link :to="{name: 'lang-tech-gTech',params: {lang: $route.params.lang}}">{{ staticData.ti_1 }}</nuxt-link>
|
||||
</li>
|
||||
<li :class="$route.name === 'lang-tech-gStandard' ? 'sub-menu-active' : null">
|
||||
<nuxt-link :to="{name: 'lang-tech-gStandard',params: {lang: $route.params.lang}}">{{ staticData.ti_2 }}</nuxt-link>
|
||||
</li>
|
||||
<li :class="$route.name === 'lang-tech-gDesign' ? 'sub-menu-active' : null">
|
||||
<nuxt-link :to="{name: 'lang-tech-gDesign',params: {lang: $route.params.lang}}">{{ staticData.ti_3 }}</nuxt-link>
|
||||
</li>
|
||||
<li :class="$route.name === 'lang-tech-gUsage' ? 'sub-menu-active' : null">
|
||||
<nuxt-link :to="{name: 'lang-tech-gUsage',params: {lang: $route.params.lang}}">{{ staticData.ti_4 }}</nuxt-link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<nuxt-link :to="{name: 'lang-blog',params: {lang: $route.params.lang}}" tag="li" class="">
|
||||
<a>{{ staticData.blog }}</a>
|
||||
</nuxt-link>
|
||||
<nuxt-link :to="{name: 'lang-contact',params: {lang: $route.params.lang}}" tag="li" exact class="">
|
||||
<a>{{ staticData.contact }}</a>
|
||||
</nuxt-link>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- mobile -->
|
||||
<div class="col-12 d-md-none links mobile">
|
||||
<div class="container-fluid">
|
||||
<ul class="row">
|
||||
<li class="col">
|
||||
<nuxt-link :to="{name: 'lang',params: {lang: $route.params.lang}}" exact class="logo">
|
||||
<Logo/>
|
||||
</nuxt-link>
|
||||
</li>
|
||||
<li class="col menu">
|
||||
<div id="menuBtn" @click="offCanvas">
|
||||
<div class="bars b1"></div>
|
||||
<div class="bars b2"></div>
|
||||
<div class="bars b3"></div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
catalog: null
|
||||
}
|
||||
},
|
||||
async fetch() {
|
||||
let catalog = await this.$axios.get('/api/public/catalog')
|
||||
this.catalog = catalog.data
|
||||
},
|
||||
computed: {
|
||||
staticData() {
|
||||
return this.$store.state.staticData.header[this.$route.params.lang]
|
||||
},
|
||||
offCanvasLiTL() {
|
||||
if (process.server) return null
|
||||
else return this.$gsap.timeline({delay: 0.3, paused: true})
|
||||
.fromTo($('.offCanvas ul li'), {
|
||||
x: this.$route.params.lang === 'fa' ? 10 : -10,
|
||||
opacity: 0
|
||||
}, {
|
||||
x: 0,
|
||||
opacity: 1,
|
||||
duration: 0.4,
|
||||
stagger: 0.03
|
||||
})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
drop() {
|
||||
$('.dropdown').toggleClass('dropdown-active')
|
||||
},
|
||||
tech_info() {
|
||||
const el = $('.tech_info .drop-down')
|
||||
if (el.height() === 0) {
|
||||
el.css({height: $('.tech_info .drop-down ul').height()})
|
||||
} else {
|
||||
el.css({height: 0})
|
||||
}
|
||||
},
|
||||
offCanvas() {
|
||||
if ($('.offCanvas').hasClass('active')) this.offCanvasLiTL.reverse()
|
||||
else this.offCanvasLiTL.play()
|
||||
$('#menuBtn').toggleClass('close')
|
||||
$('.offCanvas').toggleClass('active')
|
||||
$('body').toggleClass('offCanvas-active')
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
/////////////////////////////////////////////////////////// small header
|
||||
$(window).scroll(function (e) {
|
||||
if ($(window).scrollTop() > 50) {
|
||||
$('.header,.offCanvas').addClass('header-small')
|
||||
} else {
|
||||
$('.header,.offCanvas').removeClass('header-small')
|
||||
}
|
||||
})
|
||||
/////////////////////////////////// offCanvas menu links
|
||||
$('.offCanvas ul li').click(() => {
|
||||
this.offCanvas()
|
||||
})
|
||||
$('.header .lang-bar a').click(() => {
|
||||
if ($('.offCanvas').hasClass('active')) this.offCanvas()
|
||||
})
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
catalog: null
|
||||
}
|
||||
},
|
||||
async fetch() {
|
||||
let catalog = await this.$axios.get('/api/public/catalog')
|
||||
this.catalog = catalog.data
|
||||
},
|
||||
computed: {
|
||||
staticData() {
|
||||
return this.$store.state.staticData.header[this.$route.params.lang]
|
||||
},
|
||||
offCanvasLiTL() {
|
||||
if (process.server) return null
|
||||
else return this.$gsap.timeline({delay: 0.3, paused: true})
|
||||
.fromTo($('.offCanvas ul li'), {
|
||||
x: this.$route.params.lang === 'fa' ? 10 : -10,
|
||||
opacity: 0
|
||||
}, {
|
||||
x: 0,
|
||||
opacity: 1,
|
||||
duration: 0.4,
|
||||
stagger: 0.03
|
||||
})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
drop() {
|
||||
$('.dropdown').toggleClass('dropdown-active')
|
||||
},
|
||||
tech_info() {
|
||||
const el = $('.tech_info .drop-down')
|
||||
if (el.height() === 0) {
|
||||
el.css({height: $('.tech_info .drop-down ul').height()})
|
||||
} else {
|
||||
el.css({height: 0})
|
||||
}
|
||||
}
|
||||
},
|
||||
offCanvas() {
|
||||
if ($('.offCanvas').hasClass('active')) this.offCanvasLiTL.reverse()
|
||||
else this.offCanvasLiTL.play()
|
||||
$('#menuBtn').toggleClass('close')
|
||||
$('.offCanvas').toggleClass('active')
|
||||
$('body').toggleClass('offCanvas-active')
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
/////////////////////////////////////////////////////////// small header
|
||||
$(window).scroll(function (e) {
|
||||
if ($(window).scrollTop() > 50) {
|
||||
$('.header,.offCanvas').addClass('header-small')
|
||||
} else {
|
||||
$('.header,.offCanvas').removeClass('header-small')
|
||||
}
|
||||
})
|
||||
/////////////////////////////////// offCanvas menu links
|
||||
$('.offCanvas ul li').click(() => {
|
||||
this.offCanvas()
|
||||
})
|
||||
$('.header .lang-bar a').click(() => {
|
||||
if ($('.offCanvas').hasClass('active')) this.offCanvas()
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user