orisoxin/pages/_lang/activities/drilling.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-lg-6 s2-item">
            <img src="/img/ActivitiesPage/DetailsPage/api.jpg" alt="" class="s2-img" />
          </div>
          <div class="col-12 col-lg-6 centerItem s2-item">
            <div class="s2-body">
              <div class="container anim-fadeInStagger">
                <div class="row">
                  <div class="s2-body-desc staggerItem mb-3">
                    <p>
                      {{ content.s2.t1 }}
                    </p>
                  </div>

                  <!--                  <div class="_s2-Desc-View">-->
                  <!--                    <div class="check">-->
                  <!--                      <i class="fas fa-check-circle"></i>-->
                  <!--                      <p>-->
                  <!--                        {{ content.s2.t2 }}-->
                  <!--                      </p>-->
                  <!--                    </div>-->
                  <!--                    <div class="check">-->
                  <!--                      <i class="fas fa-check-circle"></i>-->
                  <!--                      <p>-->
                  <!--                        {{ content.s2.t3 }}-->
                  <!--                      </p>-->
                  <!--                    </div>-->
                  <!--                    <div class="check">-->
                  <!--                      <i class="fas fa-check-circle"></i>-->
                  <!--                      <p>-->
                  <!--                        {{ content.s2.t4 }}-->
                  <!--                      </p>-->
                  <!--                    </div>-->
                  <!--                  </div>-->
                </div>

                <template>
                  <el-table ref="singleTable" :data="tableData" border style="width: 100%">
                    <el-table-column property="v1" width="120"></el-table-column>
                    <el-table-column property="v2" :label="content.s2.t6"></el-table-column>
                    <el-table-column property="v3" :label="content.s2.t7"></el-table-column>
                    <el-table-column property="v4" :label="content.s2.t8"></el-table-column>
                  </el-table>
                </template>

                <div class="view_input">
                  <SheetWCM mini whiteTxt />
                </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%'
        })

      this.tableData[
        {
          date: this.content.s2.t9
        }
      ]
    })
  },
  methods: {
    goDown(element) {
      this.$gsap.to(window, { scrollTo: element, duration: 0.7 })
    }
  },
  computed: {
    content() {
      return this.$store.state.content.drilling[this.$route.params.lang]
    },
    cover() {
      return this.$store.state.global.cover?.activity
    },
    tableData() {
      return [
        {
          v1: this.content.s2.t9,
          v2: this.content.s2.t12,
          v3: this.content.s2.t13,
          v4: this.content.s2.t14
        },
        {
          v1: this.content.s2.t10,
          v2: this.content.s2.t15,
          v3: this.content.s2.t16,
          v4: this.content.s2.t17
        },
        {
          v1: this.content.s2.t11,
          v2: this.content.s2.t18,
          v3: this.content.s2.t19,
          v4: this.content.s2.t20
        }
      ]
    }
  }
}
</script>