update:add ci cd files ==> do not edit those file
This commit is contained in:
mahyargdz
@@ -0,0 +1,254 @@
|
||||
<template>
|
||||
<div class="details-project-page page">
|
||||
<!---------------------------------- Section 1 ------------------------------------->
|
||||
<section
|
||||
class="s1-Img-BG"
|
||||
:style="{ backgroundImage: `linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url(${project.cover})` }"
|
||||
>
|
||||
<div class="parallax">
|
||||
<h1 class="h1 anim-fadeIn">{{ project.locale[$route.params.lang].title }}</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-img">
|
||||
<img :src="project.s2_image" :alt="project.locale[$route.params.lang].title" />
|
||||
</div>
|
||||
<div class="col-12 col-xl-6 col-lg-6 col-md-12 col-sm-12 s2-desc-row">
|
||||
<div class="s2-body d-flex align-items-center">
|
||||
<div class="container anim-fadeInStagger">
|
||||
<div class="row">
|
||||
<h2 class="h2 staggerItem">{{ content.s2.t1 }}</h2>
|
||||
<div class="s2-body-desc staggerItem">
|
||||
<span>{{ project.locale[$route.params.lang].description }}</span>
|
||||
</div>
|
||||
<div class="s2-Desc-View staggerItem">
|
||||
<div class="row align-items-stretch s2-list-row">
|
||||
<div class="col-12 col-md-2 s2-Desc" v-if="project.locale[$route.params.lang].client">
|
||||
<h6 class="h6">{{ content.s2.t2 + ' : ' }}</h6>
|
||||
</div>
|
||||
<div
|
||||
class="col-12 col-md-10 mb-3 mb-md-0 s2-Desc"
|
||||
v-if="project.locale[$route.params.lang].client"
|
||||
>
|
||||
<p>{{ project.locale[$route.params.lang].client || '******' }}</p>
|
||||
</div>
|
||||
<div class="col-6 col-md-2 s2-Desc" v-if="project.locale[$route.params.lang].skills">
|
||||
<h6 class="h6">{{ content.s2.t3 + ' : ' }}</h6>
|
||||
</div>
|
||||
<div
|
||||
class="col-6 col-md-10 mb-3 mb-md-0 s2-Desc"
|
||||
v-if="project.locale[$route.params.lang].skills"
|
||||
>
|
||||
<p>{{ project.locale[$route.params.lang].size || '******' }}</p>
|
||||
</div>
|
||||
<div class="col-6 col-md-2 s2-Desc">
|
||||
<h6 class="h6" v-if="project.locale[$route.params.lang].area">{{ content.s2.t4 + ' : ' }}</h6>
|
||||
</div>
|
||||
<div
|
||||
class="col-6 col-md-10 mb-3 mb-md-0 s2-Desc"
|
||||
v-if="project.locale[$route.params.lang].website"
|
||||
>
|
||||
<p>{{ project.locale[$route.params.lang].area || '******' }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!---------------------------------- Section 3 ------------------------------------->
|
||||
<section class="s3-BG">
|
||||
<div class="parallax">
|
||||
<div class="container">
|
||||
<div class="s3-body anim-fadeInStagger">
|
||||
<h6 class="h6 staggerItem">{{ project.locale[$route.params.lang].s3_title }}</h6>
|
||||
<div class="s3-desc staggerItem">
|
||||
<span>{{ project.locale[$route.params.lang].s3_description }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!---------------------------------- Section 4 ------------------------------------->
|
||||
<section class="s4-Img-BG">
|
||||
<div class="parallax">
|
||||
<div id="slides">
|
||||
<div class="slide" v-if="project.s4_image">
|
||||
<div class="content">
|
||||
<img :src="project.s4_image" :alt="project.locale[$route.params.lang].title" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="slide" v-for="item in project.images" :key="item._id">
|
||||
<div class="content">
|
||||
<img :src="item.thumb" :alt="project.locale[$route.params.lang].title" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!---------------------------------- Section lightBox ------------------------------------->
|
||||
<section class="lightBoxImages">
|
||||
<div class="images">
|
||||
<a
|
||||
v-for="(item, index) in project.images"
|
||||
:key="item._id + 1"
|
||||
:class="index === 0 ? 'btn' : 'hidden'"
|
||||
:href="item.image"
|
||||
>{{ content.s5.t1 }}</a
|
||||
>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- <!–-------------------------------- Section 5 -----------------------------------–>-->
|
||||
<!-- <section class="s5-BG">-->
|
||||
<!-- <div class="parallax">-->
|
||||
<!-- <div class="row">-->
|
||||
<!-- <div class="col-12 col-xl-6 col-lg-6 col-md-12 col-sm-12 paddingCol">-->
|
||||
<!-- <div class="s5-Img">-->
|
||||
<!-- <img :src="project.s5_image" :alt="project.locale[$route.params.lang].title"-->
|
||||
<!-- />-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<!-- <div class="col-12 col-xl-6 col-lg-6 col-md-12 col-sm-12 s5-Body paddingCol">-->
|
||||
<!-- <div class="container anim-fadeInStagger">-->
|
||||
<!-- <div class="s5-Title staggerItem">-->
|
||||
<!-- <h6 class="h6">{{ project.locale[$route.params.lang].s5_title }}</h6>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="s5-desc staggerItem">-->
|
||||
<!-- <span>{{ project.locale[$route.params.lang].s5_description }}</span>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </section>-->
|
||||
|
||||
<!-- <!–-------------------------------- Section 6 -----------------------------------–>-->
|
||||
<!-- <section class="s6-BG">-->
|
||||
<!-- <div class="parallax">-->
|
||||
<!-- <div class="row">-->
|
||||
<!-- <div class="col-12 col-xl-6 col-lg-6 col-md-12 col-sm-12 s6-Body paddingCol">-->
|
||||
<!-- <div class="container s6-body-row anim-fadeInStagger">-->
|
||||
<!-- <div class="s6-Title staggerItem">-->
|
||||
<!-- <h6 class="h6">{{ project.locale[$route.params.lang].s6_title }}</h6>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="s6-desc staggerItem">-->
|
||||
<!-- <span>{{ project.locale[$route.params.lang].s6_description }}</span>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="col-12 col-xl-6 col-lg-6 col-md-12 col-sm-12 paddingCol">-->
|
||||
<!-- <div class="s6-Img">-->
|
||||
<!-- <img :src="project.s6_image" :alt="project.locale[$route.params.lang].title"-->
|
||||
<!-- />-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </section>-->
|
||||
|
||||
<!---------------------------------- Section 7 ------------------------------------->
|
||||
<section class="s7-BG">
|
||||
<div class="parallax">
|
||||
<div class="container">
|
||||
<div class="s7-body">
|
||||
<h6 class="h6">{{ content.s7.t1 }}</h6>
|
||||
<div class="s7-desc">
|
||||
<span>{{ content.s7.t2 }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
if (process.client) require('slick-carousel')
|
||||
|
||||
import {
|
||||
fadeInAnimation,
|
||||
fadeInStaggerAnimation,
|
||||
leftToRightAnimation,
|
||||
leftToRightStaggerAnimation,
|
||||
numberAnimation,
|
||||
progressAnimation,
|
||||
rightToLeftAnimation
|
||||
} from '@/utils/animations'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
project: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
fadeInAnimation(this.$gsap)
|
||||
leftToRightAnimation(this.$gsap)
|
||||
fadeInStaggerAnimation(this.$gsap)
|
||||
leftToRightStaggerAnimation(this.$gsap)
|
||||
numberAnimation(this.$gsap)
|
||||
progressAnimation(this.$gsap)
|
||||
rightToLeftAnimation(this.$gsap)
|
||||
//
|
||||
new SimpleLightbox('.details-project-page .lightBoxImages a')
|
||||
|
||||
$('#slides').slick({
|
||||
autoplay: true,
|
||||
accessibility: false,
|
||||
arrows: false,
|
||||
dots: false,
|
||||
rtl: this.$route.params.lang === 'fa'
|
||||
// infinite: true,
|
||||
// speed: 500,
|
||||
// fade: true,
|
||||
// cssEase: "linear",
|
||||
})
|
||||
|
||||
//--------------------------------------------------------- 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%'
|
||||
})
|
||||
})
|
||||
},
|
||||
async asyncData({ $axios, params, error }) {
|
||||
try {
|
||||
const project = await $axios.get(`/api/public/project/${params.project}`)
|
||||
|
||||
return {
|
||||
project: project.data
|
||||
}
|
||||
} catch (e) {
|
||||
error({ status: 404, message: 'page not found' })
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
content() {
|
||||
return this.$store.state.content.detailsProject[this.$route.params.lang]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,261 @@
|
||||
<template>
|
||||
<div class="project-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 Categories ------------------------------------->
|
||||
<section class="categories">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<nav>
|
||||
<ul>
|
||||
<nuxt-link
|
||||
class="all-categories"
|
||||
:to="{ name: 'lang-projects', params: { lang: $route.params.lang }, query: { category: 'all' } }"
|
||||
tag="li"
|
||||
>
|
||||
<a :class="$route.query.category === 'all' ? 'active' : null">{{ content.s2.t9 }}</a>
|
||||
</nuxt-link>
|
||||
<nuxt-link
|
||||
v-for="item in projectCat"
|
||||
:key="item.id"
|
||||
class="all-categories"
|
||||
:to="{ name: 'lang-projects', params: { lang: $route.params.lang }, query: { category: item._id } }"
|
||||
tag="li"
|
||||
>
|
||||
<a :class="$route.query.category === item.id ? 'active' : null">{{ categoryName(item._id) }}</a>
|
||||
</nuxt-link>
|
||||
<!-- <pre>{{ projectCat }}</pre>-->
|
||||
<!-- :class="filter === false ? 'active' : null"-->
|
||||
<!-- >{{ content.s2.t9 }}</p>-->
|
||||
<!-- </li>-->
|
||||
<!-- <li-->
|
||||
<!-- class="all-categories"-->
|
||||
<!-- v-for="item in projectCat"-->
|
||||
<!-- :key="item.id"-->
|
||||
<!-- @click="filter = item.id"-->
|
||||
<!-- >-->
|
||||
<!-- <p-->
|
||||
<!-- :class="filter === item.id ? 'active' : null">-->
|
||||
<!-- {{-->
|
||||
<!-- categoryName(item.id)-->
|
||||
<!-- }}-->
|
||||
<!-- </p>-->
|
||||
<!-- </li>-->
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!---------------------------------- Section 2 ------------------------------------->
|
||||
<section class="s2-BG section">
|
||||
<div class="parallax">
|
||||
<div class="container">
|
||||
<!-- <pre>{{projects}}</pre>-->
|
||||
|
||||
<!-- <div class="row" v-if="projects.length > 0">-->
|
||||
<!-- <div class="col-12 mb-2 anim-fadeIn paddingCol" v-for="(item , index) in projects" :key="item._id">-->
|
||||
<!-- <div class="row" :class="index%2 ? 'reverse' : null">-->
|
||||
<!-- <div class="col-12 col-sm-12 col-md-12 col-lg-6 paddingCol ">-->
|
||||
<!-- <div class="s2-img">-->
|
||||
<!-- <img :src="item.thumb" :alt="item.locale[$route.params.lang].title"/>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<!-- <div class="col-12 col-sm-12 col-md-12 col-lg-4 d-flex align-items-center paddingCol">-->
|
||||
<!-- <div class="s2-item">-->
|
||||
<!-- <h6 class="h6">{{ item.locale[$route.params.lang].title }}</h6>-->
|
||||
<!-- <p>{{ item.category.locale[$route.params.lang].title }}</p>-->
|
||||
<!-- <span>{{ item.locale[$route.params.lang].short_description }}</span>-->
|
||||
<!-- <nuxt-link :to="{name: 'lang-projects-project',params: {lang: $route.params.lang,project: item.locale[$route.params.lang].title}}" class="s2-reading">-->
|
||||
<!-- <p>{{ content.s2.t1 }}</p>-->
|
||||
<!-- <i class="fas" :class="$route.params.lang === 'en' ? 'fa-arrow-right' : 'fa-arrow-left'"></i>-->
|
||||
<!-- </nuxt-link>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<div class="filterTableByTags" v-if="currentCategory">
|
||||
<div class="tag" :class="activeTag === 'all' && 'active'" @click="activeTag = 'all'">
|
||||
<span>{{ $route.params.lang === 'en' ? 'All' : 'همه' }}</span>
|
||||
</div>
|
||||
<div
|
||||
class="tag"
|
||||
v-for="tag in currentCategory.tags"
|
||||
:key="tag._id"
|
||||
:class="activeTag === tag._id && 'active'"
|
||||
@click="activeTag = tag._id"
|
||||
>
|
||||
<span>{{ tag.locale[$route.params.lang].name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<el-table :data="filteredProjects" class="s2-table">
|
||||
<el-table-column type="index" width="80" label="#"> </el-table-column>
|
||||
<el-table-column :label="content.s2.t3" :prop="`locale[${$route.params.lang}].title`" width="500">
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column :label="content.s2.t4" width="200">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.locale[$route.params.lang].client || '-' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="content.s2.t5">
|
||||
<template slot-scope="scope">
|
||||
{{ jDate(scope.row.project_date) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="content.s2.t10">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.locale[$route.params.lang].size || '-' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="content.s2.t11">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.locale[$route.params.lang].area || '-' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="content.s2.t6" width="140">
|
||||
<template slot-scope="scope">
|
||||
<nuxt-link
|
||||
v-if="scope.row.has_details"
|
||||
class="btn btn-primary s2-table-btn"
|
||||
:to="{ name: 'lang-projects-project', params: { lang: $route.params.lang, project: scope.row._id } }"
|
||||
>
|
||||
{{ content.s2.t7 }}
|
||||
</nuxt-link>
|
||||
<a class="btn btn-primary s2-table-disable" :title="content.s2.t8" v-else>{{ content.s2.t7 }}</a>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
fadeInAnimation,
|
||||
fadeInStaggerAnimation,
|
||||
leftToRightAnimation,
|
||||
leftToRightStaggerAnimation,
|
||||
numberAnimation,
|
||||
progressAnimation,
|
||||
rightToLeftAnimation
|
||||
} from '@/utils/animations'
|
||||
|
||||
import moment from 'moment-jalaali'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
projects: null,
|
||||
projectCat: null,
|
||||
activeTag: 'all',
|
||||
cover: null,
|
||||
defaultCover: '/img/GalleryPage/page-title.png'
|
||||
// filter: this.$route.query.category
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
fadeInAnimation(this.$gsap)
|
||||
leftToRightAnimation(this.$gsap)
|
||||
fadeInStaggerAnimation(this.$gsap)
|
||||
leftToRightStaggerAnimation(this.$gsap)
|
||||
numberAnimation(this.$gsap)
|
||||
progressAnimation(this.$gsap)
|
||||
rightToLeftAnimation(this.$gsap)
|
||||
//--------------------------------------------------------- Section 1
|
||||
this.$gsap
|
||||
.timeline({
|
||||
scrollTrigger: {
|
||||
trigger: '.s2-BG',
|
||||
scrub: true,
|
||||
start: 'top top'
|
||||
}
|
||||
})
|
||||
.to($('.s1-Img-BG .parallax'), {
|
||||
duration: 9,
|
||||
opacity: 0,
|
||||
y: '50%'
|
||||
})
|
||||
})
|
||||
},
|
||||
async asyncData({ $axios, error }) {
|
||||
try {
|
||||
const projects = await $axios.get(`/api/public/projects`)
|
||||
const projectCat = await $axios.get('/api/public/projectCategories')
|
||||
const cover = await $axios.get('/api/public/cover')
|
||||
|
||||
return {
|
||||
projects: projects.data,
|
||||
projectCat: projectCat.data,
|
||||
cover: cover.data.contact
|
||||
}
|
||||
} catch (e) {
|
||||
error({ status: 500, message: 'there is a problem here' })
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
content() {
|
||||
return this.$store.state.content.projects[this.$route.params.lang]
|
||||
},
|
||||
|
||||
currentCategory() {
|
||||
return this.projectCat.find(item => item._id === this.categoryId)
|
||||
},
|
||||
|
||||
categoryId() {
|
||||
return this.$route.query?.category
|
||||
},
|
||||
|
||||
filteredProjects() {
|
||||
if (this.categoryId === 'all') return this.projects
|
||||
const projectsByCat = this.projects.filter(item => item.category._id === this.categoryId)
|
||||
// check tag
|
||||
if (this.activeTag === 'all') return projectsByCat
|
||||
return projectsByCat.filter(item => item.tag === this.activeTag)
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
categoryId(newVal, oldVal) {
|
||||
this.activeTag = 'all'
|
||||
// this.$nuxt.refresh()
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
categoryName(id) {
|
||||
return this.projectCat.filter(item => item._id === id)[0].locale[this.$route.params.lang].name
|
||||
},
|
||||
jDate(date) {
|
||||
let m = moment(date, 'jYYYY')
|
||||
if (this.$route.params.lang === 'fa') return date
|
||||
else return m.format('YYYY')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.reverse {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user