added animations and pageLoad and preLoader
This commit is contained in:
Amir Mohamadi
+74
-37
@@ -10,11 +10,11 @@
|
||||
<p>{{staticData.s1.t2}}</p>
|
||||
</div>
|
||||
<div class="parts p2 row">
|
||||
<div class="col-6">
|
||||
<div class="col-12 col-lg-6 order-1 order-lg-0">
|
||||
<p>{{staticData.s1.t3}}</p>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="imgBox">
|
||||
<div class="col-12 col-lg-6 order-0 order-lg-1 mb-5 mb-lg-0">
|
||||
<div class="imgBox anim-fadeIn">
|
||||
<div class="img">
|
||||
<div class="shape"></div>
|
||||
<img src="~/assets/img/about/about-s1-i1.jpg" alt="">
|
||||
@@ -23,15 +23,15 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="parts p3 row">
|
||||
<div class="col-6">
|
||||
<div class="imgBox imgBox-reverse">
|
||||
<div class="col-12 col-lg-6 mb-5 mb-lg-0">
|
||||
<div class="imgBox imgBox-reverse anim-fadeIn">
|
||||
<div class="img">
|
||||
<div class="shape reverse"></div>
|
||||
<img src="~/assets/img/about/about-s1-i2.jpg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="col-12 col-lg-6">
|
||||
<p>{{staticData.s1.t4}}</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -44,45 +44,33 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="s2">
|
||||
<section class="s2" v-if="history.length">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<h2 class="title title-shape-center">{{staticData.s2.t1}}</h2>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="timeline">
|
||||
<div class="circle active">
|
||||
<span>1370</span>
|
||||
</div>
|
||||
<div class="line active"></div>
|
||||
<div class="circle active">
|
||||
<span>1375</span>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<div class="circle">
|
||||
<span>1385</span>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<div class="circle">
|
||||
<span>1395</span>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<div class="circle">
|
||||
<span>1396</span>
|
||||
</div>
|
||||
<div class="timeline anim-fadeIn">
|
||||
|
||||
<template v-for="(item,index) in history">
|
||||
<div class="circle" :key="item._id" :class="!index ? 'active' : null" :data-c-n="index" @click="activeHistory(item,index)">
|
||||
<span>{{mDate(item.year)}}</span>
|
||||
</div>
|
||||
<div class="line" :key="item._id + 1" :data-l-n="index" v-if="index < history.length - 1"></div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-content anim-fadeIn">
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<div class="col-12 col-md-6 order-1 order-md-0">
|
||||
<div class="txtBox">
|
||||
<h5>{{staticData.s2.t2}}</h5>
|
||||
<p>{{staticData.s2.t3}}</p>
|
||||
<h5 ref="title">{{history[0].history_details[$route.params.lang].title}}</h5>
|
||||
<p ref="caption">{{history[0].history_details[$route.params.lang].caption}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="imgBox">
|
||||
<img src="~/assets/img/about/timeline-i1.jpg" alt="">
|
||||
<div class="col-12 col-md-6 order-0 order-md-1 mb-3 mb-md-0">
|
||||
<div class="imgBox" v-if="history.length">
|
||||
<img ref="image" :src="history[0].image" :alt="history[0].history_details[$route.params.lang].title">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -101,12 +89,12 @@
|
||||
|
||||
<section class="s4">
|
||||
<div class="container">
|
||||
<div v-for="(item , index) in staticData.s4" class="panel" :class="'p'+(index+1)">
|
||||
<div v-for="(item , index) in staticData.s4" class="panel anim-fadeIn" :class="'p'+(index+1)">
|
||||
<div class="row">
|
||||
<div class="col-5 img">
|
||||
<div class="col-12 col-lg-5 img">
|
||||
<img :src="require('~/assets/img/about/'+ item.img)" alt="">
|
||||
</div>
|
||||
<div class="col-7 txt">
|
||||
<div class="col-12 col-lg-7 txt">
|
||||
<p>{{item.title}}</p>
|
||||
<a :href="item.link.url" class="btn btn-primary" target="_blank">{{item.link.txt}}</a>
|
||||
</div>
|
||||
@@ -120,11 +108,60 @@
|
||||
|
||||
|
||||
<script>
|
||||
import moment from 'moment-jalaali'
|
||||
import {fadeInAnimation} from '~/mixins/animations'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
history: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
staticData() {
|
||||
return this.$store.state.staticData.about[this.$route.params.lang]
|
||||
}
|
||||
},
|
||||
mixins: [fadeInAnimation],
|
||||
methods: {
|
||||
activeHistory(item, index) {
|
||||
for (let i = 0; i < this.history.length; i++) {
|
||||
i > index ? $(`.circle[data-c-n="${i}"]`).removeClass('active') : null
|
||||
i > index ? $(`.line[data-l-n="${i - 1}"]`).removeClass('active') : null
|
||||
|
||||
i < index ? $(`.circle[data-c-n="${i + 1}"]`).addClass('active') : null
|
||||
i < index ? $(`.line[data-l-n="${i}"]`).addClass('active') : null
|
||||
}
|
||||
|
||||
this.$gsap.timeline({
|
||||
yoyo: true,
|
||||
repeat: 1
|
||||
}).to([this.$refs.image, this.$refs.title, this.$refs.caption],
|
||||
{
|
||||
opacity: 0,
|
||||
duration: 0.1,
|
||||
onComplete: () => {
|
||||
this.$refs.image.src = item.image
|
||||
this.$refs.title.textContent = item.history_details[this.$route.params.lang].title
|
||||
this.$refs.caption.textContent = item.history_details[this.$route.params.lang].caption
|
||||
}
|
||||
})
|
||||
},
|
||||
mDate(date) {
|
||||
if (this.$route.params.lang === 'en') return moment().jYear(date).year()
|
||||
else return date
|
||||
}
|
||||
},
|
||||
head() {
|
||||
return {
|
||||
title: this.staticData.hero
|
||||
}
|
||||
},
|
||||
async asyncData({$axios}) {
|
||||
const history = await $axios.get(`/api/public/history`)
|
||||
return {
|
||||
history: history.data
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user