orisoxin/pages/_lang/activities/ward.vue

<template>
	<div class="activities-details-page page">
		<!---------------------------------- Section 1 ------------------------------------->
		<section class="s1-Img-BG">
			<div
				class="parallax"
				:style="{
					background: `linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),url(${cover ? cover : defaultCover})`
				}"
			>
				<h1 class="h1 anim-fadeIn" :style="{ color: $route.params.lang === 'fa' && '#fff' }">{{ content.s1.t1 }}</h1>
			</div>
		</section>

		<!---------------------------------- Section 2 ------------------------------------->
		<section class="s2-Img-BG">
			<div class="parallax">
				<div class="row">
					<div class="col-12 col-xl-6 col-lg-6 col-md-12 col-sm-12 s2-item">
						<img src="/img/ActivitiesPage/DetailsPage/petrochemy.jpg" alt="" class="s2-img" />
					</div>
					<div class="col-12 col-xl-6 col-lg-6 col-md-12 col-sm-12 centerItem s2-item">
						<div class="s2-body">
							<div class="container anim-fadeInStagger">
								<div class="row">
									<div class="s2-body-desc staggerItem">
										<p>
											{{ content.s2.t1 }}
										</p>
									</div>

									<div class="s2-Desc-View staggerItem">
										<div class="row">
											<div class="col-12 col-md-6 paddingCol" @click="goDown('.p1')">
												<div class="check">
													<i class="fas fa-check-circle"></i>
													<p>
														{{ content.s2.t2 }}
													</p>
												</div>
											</div>

											<div class="col-12 col-md-6 paddingCol" @click="goDown('.p3')">
												<div class="check">
													<i class="fas fa-check-circle"></i>
													<p>
														{{ content.s2.t3 }}
													</p>
												</div>
											</div>

											<div class="col-12 col-md-6 paddingCol" @click="goDown('.p2')">
												<div class="check">
													<i class="fas fa-check-circle"></i>
													<p>
														{{ content.s2.t4 }}
													</p>
												</div>
											</div>

											<div class="col-12 col-md-6 paddingCol" @click="goDown('.p4')">
												<div class="check">
													<i class="fas fa-check-circle"></i>
													<p>
														{{ content.s2.t5 }}
													</p>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</section>

		<!---------------------------------- Section 3 ------------------------------------->
		<section class="s3-BG section">
			<div class="container">
				<div class="row">
					<div class="col-12 item reverse anim-fadeInStagger p1 paddingCol">
						<div class="row staggerItem">
							<div class="col-12 col-md-7 paddingCol">
								<img src="/img/ActivitiesPage/DetailsPage/1111.jpg" alt="" />
							</div>
							<div class="col-12 col-md-5 d-flex flex-column justify-content-center paddingCol">
								<div class="txt">
									<h6 class="h6">
										{{ content.s3.t1 }}
									</h6>

									<!--                  <ul class="list1">-->
									<!--                    <li><i class="fas fa-circle"></i>{{ content.s3.t2 }}</li>-->
									<!--                    <li><i class="fas fa-circle"></i>{{ content.s3.t3 }}</li>-->
									<!--                    <li><i class="fas fa-circle"></i>{{ content.s3.t4 }}</li>-->
									<!--                    <li><i class="fas fa-circle"></i>{{ content.s3.t5 }}</li>-->
									<!--                  </ul>-->
									<!--                  <p>{{ content.s3.t6 }}</p>-->

									<!--                  <ul class="list2">-->
									<!--                    <li><i class="fas fa-check"></i>{{ content.s3.t7 }}</li>-->
									<!--                    <li><i class="fas fa-check"></i>{{ content.s3.t8 }}</li>-->
									<!--                    <li><i class="fas fa-check"></i>{{ content.s3.t9 }}</li>-->
									<!--                    <li><i class="fas fa-check"></i>{{ content.s3.t10 }}</li>-->
									<!--                  </ul>-->
								</div>
							</div>
						</div>
					</div>

					<div class="col-12 item anim-fadeInStagger p2 paddingCol">
						<div class="row staggerItem">
							<div class="col-12 col-md-7 paddingCol">
								<img src="/img/ActivitiesPage/DetailsPage/header.jpg" alt="" />
							</div>

							<div class="col-12 col-md-5 d-flex flex-column justify-content-center paddingCol">
								<div class="txt">
									<h6 class="h6">
										{{ content.s4.t1 }}
									</h6>

									<!--                  <ul class="list2">-->
									<!--                    <li><i class="fas fa-check"></i>{{ content.s4.t2 }}</li>-->
									<!--                    <li><i class="fas fa-check"></i>{{ content.s4.t3 }}</li>-->
									<!--                    <li><i class="fas fa-check"></i>{{ content.s4.t4 }}</li>-->
									<!--                    <li><i class="fas fa-check"></i>{{ content.s4.t5 }}</li>-->
									<!--                    <li><i class="fas fa-check"></i>{{ content.s4.t6 }}</li>-->
									<!--                    <li><i class="fas fa-check"></i>{{ content.s4.t7 }}</li>-->
									<!--                  </ul>-->
								</div>
							</div>
						</div>
					</div>

					<div class="col-12 item reverse anim-fadeInStagger p3 paddingCol">
						<div class="row staggerItem">
							<div class="col-12 col-md-7 paddingCol">
								<img src="/img/ActivitiesPage/DetailsPage/gtc.jpg" alt="" />
							</div>

							<div class="col-12 col-md-5 d-flex flex-column justify-content-center paddingCol">
								<div class="txt">
									<h6 class="h6">
										{{ content.s5.t1 }}
									</h6>

									<!--                  <ul class="list2">-->
									<!--                    <li><i class="fas fa-check"></i>{{ content.s5.t2 }}</li>-->
									<!--                    <li><i class="fas fa-check"></i>{{ content.s5.t3 }}</li>-->
									<!--                    <li><i class="fas fa-check"></i>{{ content.s5.t4 }}</li>-->
									<!--                    <li><i class="fas fa-check"></i>{{ content.s5.t5 }}</li>-->
									<!--                    <li><i class="fas fa-check"></i>{{ content.s5.t6 }}</li>-->
									<!--                    <li><i class="fas fa-check"></i>{{ content.s5.t7 }}</li>-->
									<!--                    <li><i class="fas fa-check"></i>{{ content.s5.t8 }}</li>-->
									<!--                  </ul>-->
								</div>
							</div>
						</div>
					</div>

					<div class="col-12 item anim-fadeInStagger p4 paddingCol">
						<div class="row staggerItem">
							<div class="col-12 col-md-7 paddingCol">
								<img src="/img/ActivitiesPage/DetailsPage/petrochemy1.jpg" alt="" />
							</div>

							<div class="col-12 col-md-5 d-flex flex-column justify-content-center paddingCol">
								<div class="txt">
									<h6 class="h6">
										{{ content.s6.t1 }}
									</h6>

									<!--                  <ul class="list2">-->
									<!--                    <li><i class="fas fa-check"></i>{{ content.s6.t2 }}</li>-->
									<!--                    <li><i class="fas fa-check"></i>{{ content.s6.t3 }}</li>-->
									<!--                    <li><i class="fas fa-check"></i>{{ content.s6.t4 }}</li>-->
									<!--                    <li><i class="fas fa-check"></i>{{ content.s6.t5 }}</li>-->
									<!--                  </ul>-->
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</section>
	</div>
</template>

<script>
	import {
		fadeInAnimation,
		fadeInStaggerAnimation,
		leftToRightAnimation,
		leftToRightStaggerAnimation,
		numberAnimation,
		progressAnimation
	} from '@/utils/animations'

	export default {
		data() {
			return {
				defaultCover: '/img/ActivitiesPage/page-title.png'
			}
		},
		mounted() {
			this.$nextTick(() => {
				fadeInAnimation(this.$gsap)
				leftToRightAnimation(this.$gsap)
				fadeInStaggerAnimation(this.$gsap)
				leftToRightStaggerAnimation(this.$gsap)
				numberAnimation(this.$gsap)
				progressAnimation(this.$gsap)
				//--------------------------------------------------------- Section 1
				this.$gsap
					.timeline({
						scrollTrigger: {
							trigger: '.s2-Img-BG',
							scrub: true,
							start: 'top top'
						}
					})
					.to($('.s1-Img-BG .parallax'), {
						duration: 9,
						opacity: 0,
						y: '50%'
					})
			})
		},
		methods: {
			goDown(element) {
				this.$gsap.to(window, { scrollTo: element, duration: 0.7 })
			}
		},
		computed: {
			content() {
				return this.$store.state.content.ward[this.$route.params.lang]
			},
			cover() {
				return this.$store.state.global.cover?.activity
			}
		}
	}
</script>