danak/orisoxin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update:add ci cd files ==> do not edit those file

Browse Source
This commit is contained in:
mahyargdz
2024-10-10 21:49:00 +03:30
parent 6fe34708a2
commit 8cf0492c87
464 changed files with 79533 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/_lang/activities/index.vue
+148
View File
@@ -0,0 +1,148 @@
<template>
<div class="activities-page page">
<!---------------------------------- Section 1 ------------------------------------->
<section class="s1-Img-BG">
<div
class="parallax d-flex align-items-center flex-column justify-content-center"
: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>
<span class="anim-fadeIn">
{{ content.s1.t2 }}
</span>
</div>
</section>
<!---------------------------------- Section 2 ------------------------------------->
<section class="s2-BG section">
<div class="parallax">
<div class="container">
<div class="row anim-fadeIn">
<div class="col-12 col-sm-6 col-lg-4 s2-align-col anim-fadeIn">
<div class="s2-item">
<nuxt-link :to="{ name: 'lang-activities-piping', params: { lang: $route.params.lang } }">
<img src="/img/ActivitiesPage/piping.jpg" alt="" />
<div class="s2-body">
<StrokedTxt text="01" />
<h4 class="h4">{{ content.s2.t1 }}</h4>
</div>
</nuxt-link>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-4 s2-align-col anim-fadeIn">
<div class="s2-item">
<nuxt-link :to="{ name: 'lang-activities-drilling', params: { lang: $route.params.lang } }">
<img src="/img/ActivitiesPage/drill.jpg" alt="" />
<div class="s2-body">
<StrokedTxt text="02" />
<h4 class="h4">{{ content.s2.t2 }}</h4>
</div>
</nuxt-link>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-4 s2-align-col anim-fadeIn">
<div class="s2-item">
<nuxt-link :to="{ name: 'lang-activities-ward', params: { lang: $route.params.lang } }">
<img src="/img/ActivitiesPage/petro.jpg" alt="" />
<div class="s2-body">
<StrokedTxt text="03" />
<h4 class="h4">{{ content.s2.t3 }}</h4>
</div>
</nuxt-link>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-4 s2-align-col anim-fadeIn">
<div class="s2-item">
<nuxt-link :to="{ name: 'lang-activities-sm', params: { lang: $route.params.lang } }">
<img src="/img/ActivitiesPage/Salt.jpg" alt="" />
<div class="s2-body">
<StrokedTxt text="04" />
<h4 class="h4">{{ content.s2.t4 }}</h4>
</div>
</nuxt-link>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-4 s2-align-col anim-fadeIn">
<div class="s2-item">
<nuxt-link :to="{ name: 'lang-activities-srp', params: { lang: $route.params.lang } }">
<img src="/img/ActivitiesPage/faraz.jpg" alt="" />
<div class="s2-body">
<StrokedTxt text="05" />
<h4 class="h4">{{ content.s2.t5 }}</h4>
</div>
</nuxt-link>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</template>
<script>
import { fadeInAnimation, fadeInStaggerAnimation } from '~/utils/animations'
export default {
data() {
return {
defaultCover: '/img/ActivitiesPage/page-title.png'
}
},
mounted() {
this.$nextTick(() => {
fadeInAnimation(this.$gsap)
fadeInStaggerAnimation(this.$gsap)
//--------------------------------------------------------- Section 1
this.$gsap
.timeline({
scrollTrigger: {
trigger: '.s2-BG',
scrub: true,
start: 'top top'
}
})
.to($('.s1-Img-BG > div'), {
duration: 9,
opacity: 0,
y: '50%'
})
})
},
computed: {
content() {
return this.$store.state.content.activities[this.$route.params.lang]
},
cover() {
return this.$store.state.global.cover?.activity
}
}
}
</script>
<style scoped>
.activities-page .s2-BG .parallax .container .s2-align-col .s2-item .s2-body {
padding: 13px 25px;
position: absolute;
bottom: 0;
background: #00000075;
min-height: 138px;
width: 100%;
}
.activities-page .s2-BG .parallax .container .s2-align-col .s2-item {
width: auto;
margin-bottom: 25px;
background-color: #888585;
direction: ltr;
text-align: left;
overflow: hidden;
position: relative;
}
</style>