arakrail/pages/_lang/about/index.vue

<template>
	<div class="page about--page">
		<Hero :title="staticData.hero"/>
		<section class="s1">
			<div class="container">
				<div class="panel">
					<div class="parts p1">
						<logo/>
						<span>{{staticData.s1.t1}}</span>
						<p>{{staticData.s1.t2}}</p>
					</div>
					<div class="parts p2 row">
						<div class="col-12 col-lg-6 order-1 order-lg-0">
							<p>{{staticData.s1.t3}}</p>
						</div>
						<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="">
								</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 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-12 col-lg-6">
							<p>{{staticData.s1.t4}}</p>
						</div>
					</div>
					<div class="parts p4 row">
						<div class="col-12">
							<p>{{staticData.s1.t5}}</p>
						</div>
					</div>
				</div>
			</div>
		</section>
		
		<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 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 anim-fadeIn">
							<div class="row">
								<div class="col-12 col-md-6 order-1 order-md-0">
									<div class="txtBox">
										<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-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>
						</div>
					</div>
				</div>
			</div>
		</section>
		
		<section class="s3">
			<div class="container">
				<h2 class="title title-shape">{{staticData.s3.t1}}</h2>
				<p v-html="staticData.s3.t2"></p>
			</div>
		</section>
		
		<section class="s4">
			<div class="container">
				<div v-for="(item , index) in staticData.s4" class="panel anim-fadeIn" :class="'p'+(index+1)">
					<div class="row">
						<div class="col-12 col-lg-5 img">
							<img :src="require('~/assets/img/about/'+ item.img)" alt="">
						</div>
						<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>
					</div>
				</div>
			</div>
		</section>
		<CustomersCommunication/>
	</div>
</template>


<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>