update:add ci cd files ==> do not edit those file
This commit is contained in:
mahyargdz
@@ -0,0 +1,233 @@
|
||||
<template>
|
||||
<div class="blog-details-page page">
|
||||
<!---------------------------------- Section 1 ------------------------------------->
|
||||
<section class="s1-Img-BG">
|
||||
<div
|
||||
class="parallax"
|
||||
:style="{ backgroundImage: `linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url(${post.cover})` }"
|
||||
>
|
||||
<div class="s1-title anim-fadeIn">
|
||||
<div class="date">
|
||||
<p>{{ jDateDay(post.createt_at) }}</p>
|
||||
<p>{{ jDateMonth(post.created_at) }}</p>
|
||||
</div>
|
||||
<div class="s1-desc">
|
||||
<h6 class="h6">{{ post.locale[$route.params.lang].title }}</h6>
|
||||
<div>
|
||||
<IconBlogDetailsFolderIcon/>
|
||||
<span> {{ content.s1.t1 }} </span>
|
||||
<IconBlogDetailsCategoryIcon/>
|
||||
<span> {{ post.category ? post.category.locale[$route.params.lang].title : 'No Category' }} </span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!---------------------------------- Section 2 ------------------------------------->
|
||||
<section class="s2-BG">
|
||||
<div class="s2-desc anim-leftToRight">
|
||||
<p>{{ content.s2.t2 }}</p>
|
||||
<i class="fas" :class="$route.params.lang === 'fa' ? 'fa-angle-left' : 'fa-angle-right'"></i>
|
||||
<p>{{ content.s2.t1 }}</p>
|
||||
<i class="fas" :class="$route.params.lang === 'fa' ? 'fa-angle-left' : 'fa-angle-right'"></i>
|
||||
<p>{{ post.locale[$route.params.lang].title }}</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!---------------------------------- Section Content ------------------------------------->
|
||||
<section class="content section">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="ck-content" v-html="post.locale[$route.params.lang].description"></div>
|
||||
<div v-if="post.video" class="mt-3 d-flex justify-content-center">
|
||||
<video height="400" controls :src="post.video"></video>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!---------------------------------- Section 8 ------------------------------------->
|
||||
<section class="s8-Img-BG anim-fadeInStagger" v-if="post.last_section_image">
|
||||
<div
|
||||
class="parallax"
|
||||
:style="{
|
||||
backgroundImage: `linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(${post.last_section_image})`
|
||||
}"
|
||||
>
|
||||
<h2 class="h2 staggerItem" v-if="post.locale[$route.params.lang].last_section_image_title">
|
||||
{{ post.locale[$route.params.lang].last_section_image_title }}
|
||||
</h2>
|
||||
<div class="s8-desc staggerItem" v-if="post.locale[$route.params.lang].last_section_image_description">
|
||||
<p>{{ post.locale[$route.params.lang].last_section_image_description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!---------------------------------- Section 9 ------------------------------------->
|
||||
<section class="s9-BG" v-if="post.locale[$route.params.lang].last_section_title">
|
||||
<div class="parallax section">
|
||||
<div class="container anim-fadeInStagger">
|
||||
<div class="s9-title staggerItem">
|
||||
<h5 class="h5">{{ post.locale[$route.params.lang].last_section_title }}</h5>
|
||||
</div>
|
||||
<div class="s9-desc staggerItem">
|
||||
<p>{{ post.locale[$route.params.lang].last_section_description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!---------------------------------- Section 10 ------------------------------------->
|
||||
<section class="s10-BG">
|
||||
<div class="">
|
||||
<div class="s10-shares">
|
||||
<!-- <p>0 SHARES</p>-->
|
||||
</div>
|
||||
|
||||
<div class="s10-social">
|
||||
<ul>
|
||||
<li>
|
||||
<ShareNetwork
|
||||
network="facebook"
|
||||
:url="'https://orisoxin.com' + $route.fullPath"
|
||||
:title="post.locale[$route.params.lang].title"
|
||||
:description="post.locale[$route.params.lang].short_description"
|
||||
hashtags="orsioxin"
|
||||
>
|
||||
<i class="fab fa-facebook-f"></i>
|
||||
</ShareNetwork>
|
||||
</li>
|
||||
<li>
|
||||
<ShareNetwork
|
||||
network="Twitter"
|
||||
:url="'https://orisoxin.com' + $route.fullPath"
|
||||
:title="post.locale[$route.params.lang].title"
|
||||
:description="post.locale[$route.params.lang].short_description"
|
||||
hashtags="orsioxin"
|
||||
>
|
||||
<i class="fab fa-twitter"></i>
|
||||
</ShareNetwork>
|
||||
</li>
|
||||
<li>
|
||||
<ShareNetwork
|
||||
network="LinkedIn"
|
||||
:url="'https://orisoxin.com' + $route.fullPath"
|
||||
:title="post.locale[$route.params.lang].title"
|
||||
:description="post.locale[$route.params.lang].short_description"
|
||||
hashtags="orsioxin"
|
||||
>
|
||||
<i class="fab fa-linkedin-in"></i>
|
||||
</ShareNetwork>
|
||||
</li>
|
||||
<li>
|
||||
<ShareNetwork
|
||||
network="Email"
|
||||
:url="'https://orisoxin.com' + $route.fullPath"
|
||||
:title="post.locale[$route.params.lang].title"
|
||||
:description="post.locale[$route.params.lang].short_description"
|
||||
hashtags="orsioxin"
|
||||
>
|
||||
<i class="fas fa-envelope"></i>
|
||||
</ShareNetwork>
|
||||
</li>
|
||||
<!-- <li>-->
|
||||
<!-- <ShareNetwork-->
|
||||
<!-- network="SMS"-->
|
||||
<!-- :url="'https://orisoxin.com' + $route.fullPath"-->
|
||||
<!-- :title="post.locale[$route.params.lang].title"-->
|
||||
<!-- :description="post.locale[$route.params.lang].short_description"-->
|
||||
<!-- hashtags="orsioxin"-->
|
||||
<!-- >-->
|
||||
<!-- <i class="fab fa-google-plus-g"></i>-->
|
||||
<!-- </ShareNetwork>-->
|
||||
<!-- </li>-->
|
||||
</ul>
|
||||
</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 {
|
||||
post: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
jDateDay(date) {
|
||||
let dateFormat = moment(date)
|
||||
if (this.$route.params.lang === 'fa') {
|
||||
moment.loadPersian()
|
||||
return dateFormat.format('jYYYY/jMM/jDD').split('/')[2]
|
||||
} else {
|
||||
return dateFormat.format('yyyy/mm/DD').split('/')[2]
|
||||
}
|
||||
},
|
||||
jDateMonth(date) {
|
||||
let dateFormat = moment(date)
|
||||
if (this.$route.params.lang === 'fa') {
|
||||
moment.loadPersian()
|
||||
return dateFormat.format('jYYYY/jMMMM/jDD').split('/')[1]
|
||||
} else {
|
||||
return dateFormat.format('yyyy/MMM/DD').split('/')[1]
|
||||
}
|
||||
}
|
||||
},
|
||||
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: '10%'
|
||||
})
|
||||
})
|
||||
},
|
||||
computed: {
|
||||
content() {
|
||||
return this.$store.state.content.blogDetails[this.$route.params.lang]
|
||||
}
|
||||
},
|
||||
async asyncData({$axios, params, error}) {
|
||||
try {
|
||||
const post = await $axios.get(`/api/public/blogPost/${encodeURIComponent(params.post)}`)
|
||||
return {
|
||||
post: post.data
|
||||
}
|
||||
} catch (e) {
|
||||
error({status: 404, message: 'page not found'})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user