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

added animations and pageLoad and preLoader

Browse Source
This commit is contained in:
Amir Mohamadi
2020-12-19 13:26:55 +03:30
parent bc5e617778
commit 9433eb84ac
57 changed files with 13099 additions and 494 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/_lang/products/_product.vue
+39 -17
View File
@@ -7,10 +7,10 @@
<h2 class="title">{{productDetails.page_title}}</h2>
<p>{{productDetails.page_description}}</p>
<div class="image-preview">
<img :src="product.cover" ref="preview" :alt="productDetails.name">
<img :src="product.cover" class="anim-fadeIn" ref="preview" :alt="productDetails.name">
</div>
</div>
<div class="images-carousel">
<div class="images-carousel anim-fadeIn">
<div id="images">
<div class="imgBox">
<img :src="product.cover" :alt="productDetails.name" @click="view(product.cover)">
@@ -27,7 +27,7 @@
<div class="container">
<div class="panel">
<div class="parts p1">
<h2 class="title title-shape-center">جزییات بیشتر</h2>
<h2 class="title title-shape-center">{{staticData.t1}}</h2>
</div>
<!-- image left -->
@@ -37,7 +37,7 @@
<p>{{productDetails.more_description1}}</p>
</div>
<div class="col-6">
<div class="imgBox imgBox-shape">
<div class="imgBox imgBox-shape anim-fadeIn">
<img :src="product.more_section_image1" :alt="productDetails.more_title1">
</div>
</div>
@@ -46,7 +46,7 @@
<!-- image right -->
<div class="parts row align-items-center">
<div class="col-6">
<div class="imgBox imgBox-reverse imgBox-shape-reverse">
<div class="imgBox imgBox-reverse imgBox-shape-reverse anim-fadeIn">
<img :src="product.more_section_image2" :alt="productDetails.more_title2">
</div>
</div>
@@ -67,21 +67,21 @@
<div class="container">
<div class="panel">
<div class="parts p1" v-if="!product.render_image1.includes('undefined') || !product.render_image1.includes('undefined')">
<h2 class="title">نمایش گرافیکی مشخصات</h2>
<p>در شماتیک زیر مشخصات اولیه گریتینگ نمایش داده شده است</p>
<h2 class="title">{{staticData.t2}}</h2>
<p>{{staticData.t3}}</p>
</div>
<div class="row parts p2" v-if="!product.render_image1.includes('undefined') || !product.render_image2.includes('undefined')">
<div class="col-6 mb-5">
<img :src="product.render_image1" :alt="productDetails.name" v-if="!product.render_image1.includes('undefined')">
<div class="col-12 col-sm-6 mb-5">
<img :src="product.render_image1" class="anim-fadeIn" :alt="productDetails.name" v-if="!product.render_image1.includes('undefined')">
<p v-if="!product.render_image1.includes('undefined')">{{productDetails.render_caption1}}</p>
</div>
<div class="col-6 mb-5">
<img :src="product.render_image2" :alt="productDetails.name" v-if="!product.render_image2.includes('undefined')">
<div class="col-12 col-sm-6 mb-5">
<img :src="product.render_image2" class="anim-fadeIn" :alt="productDetails.name" v-if="!product.render_image2.includes('undefined')">
<p v-if="!product.render_image2.includes('undefined')">{{productDetails.render_caption2}}</p>
</div>
<div class="col-12 mb-5">
<img :src="product.chart_image" :alt="productDetails.name" v-if="!product.chart_image.includes('undefined')">
<img :src="product.chart_image" class="anim-fadeIn" :alt="productDetails.name" v-if="!product.chart_image.includes('undefined')">
</div>
</div>
@@ -94,12 +94,12 @@
<div class="row parts p4" v-if="product.download_section">
<div class="col-12">
<h2>فایل های قابل دانلود</h2>
<h2>{{staticData.t4}}</h2>
<div class="files">
<div class="file" v-for="item in product.pdf_files" :key="item._id">
<div class="file anim-fadeIn" v-for="item in product.pdf_files" :key="item._id">
<pdf-icon/>
<p>{{item.pdf_details[$route.params.lang].name}}</p>
<a :href="item.file" :download="item.pdf_details[$route.params.lang].name" target="_blank" class="btn btn-primary-fill">دانلود</a>
<a :href="item.file" :download="item.pdf_details[$route.params.lang].name" target="_blank" class="btn btn-primary-fill">{{staticData.t5}}</a>
</div>
</div>
</div>
@@ -112,7 +112,7 @@
<div class="container">
<div class="row">
<div class="col-12">
<nuxt-link :to="{name: 'lang-products',params: {lang: $route.params.lang}}" class="btn btn-primary">مشاهده تمام محصولات</nuxt-link>
<nuxt-link :to="{name: 'lang-products',params: {lang: $route.params.lang}}" class="btn btn-primary">{{staticData.t6}}</nuxt-link>
</div>
</div>
</div>
@@ -122,6 +122,8 @@
<script>
if (process.client) require('slick-carousel')
import {fadeInAnimation} from "~/mixins/animations"
export default {
data() {
return {
@@ -142,13 +144,33 @@
this.$refs.preview.src = image
}
},
mixins: [fadeInAnimation],
mounted() {
$('#images').slick({
slidesToShow: 4,
rtl: this.$route.params.lang === 'fa',
infinite: false
infinite: false,
responsive: [
{
breakpoint: 768,
settings: {
slidesToShow: 3
}
},
{
breakpoint: 575,
settings: {
slidesToShow: 2
}
}
]
})
},
head() {
return {
title: this.product.product_details[this.$route.params.lang].name
}
},
async asyncData({$axios, params}) {
let product = await $axios.get(`/api/public/product/${params.product}`)
let productCategories = await $axios.get(`/api/public/productCategories`)
pages/_lang/products/index.vue
+31 -9
View File
@@ -11,11 +11,11 @@
</section>
<section class="s2">
<div class="container">
<div class="filters">
<div class="filters anim-fadeIn">
<h2 class="title title-subtitle">{{staticData.s2.t1}}</h2>
<ul>
<li @click="filtering(false)">
<p class="active">همه</p>
<p class="active">{{staticData.s2.t3}}</p>
</li>
<li
v-for="item in productCategories"
@@ -25,11 +25,13 @@
</li>
</ul>
</div>
<div class="row" v-if="filtered_products.length">
<div class="row products-container" v-if="filtered_products.length">
<div class="col-3 mb-5" v-for="item in filtered_products" :key="item._id">
<div class="col-12 col-sm-6 col-lg-4 col-xl-3 mb-5 anim-fadeIn" v-for="item in filtered_products" :key="item._id">
<nuxt-link :to="{name: 'lang-products-product',params: {lang: $route.params.lang,product: item._id}}" class="product">
<img :src="item.cover" :alt="item.product_details[$route.params.lang].name">
<div class="imgBox">
<img :src="item.cover" :alt="item.product_details[$route.params.lang].name">
</div>
<h4>{{item.product_details[$route.params.lang].name}}</h4>
<p>{{item.product_details[$route.params.lang].short_description}}</p>
</nuxt-link>
@@ -37,15 +39,15 @@
</div>
<div class="row" v-else>
<div class="col-12">
<p class="no-product">هیچ محصولی در این دسته بندی موجود نمیباشد.</p>
<div class="col-12 products-container">
<p class="no-product anim-fadeIn">{{staticData.s2.t2}}</p>
</div>
</div>
</div>
</section>
<section class="s3">
<div class="container">
<div class="panel">
<div class="panel anim-fadeIn">
<h2 class="title title-shape-center">
{{staticData.s3.t1}}
<span class="subtitle">{{staticData.s3.t2}}</span>
@@ -59,6 +61,8 @@
</template>
<script>
import {fadeInAnimation} from "~/mixins/animations"
export default {
data() {
return {
@@ -79,9 +83,27 @@
},
methods: {
filtering(key) {
this.filter = key
$('.products--page .filters p').removeClass('active')
$(event.target).addClass('active')
this.$gsap.timeline({
yoyo: true,
repeat: 1
})
.to($('.products--page .products-container'),
{
opacity: 0,
duration: 0.3,
onComplete: () => {
this.filter = key
}
})
}
},
mixins: [fadeInAnimation],
head() {
return {
title: this.staticData.hero
}
},
async asyncData({$axios, store}) {