added animations and pageLoad and preLoader
This commit is contained in:
Amir Mohamadi
+74
-37
@@ -10,11 +10,11 @@
|
||||
<p>{{staticData.s1.t2}}</p>
|
||||
</div>
|
||||
<div class="parts p2 row">
|
||||
<div class="col-6">
|
||||
<div class="col-12 col-lg-6 order-1 order-lg-0">
|
||||
<p>{{staticData.s1.t3}}</p>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="imgBox">
|
||||
<div class="col-12 col-lg-6 order-0 order-lg-1 mb-5 mb-lg-0">
|
||||
<div class="imgBox anim-fadeIn">
|
||||
<div class="img">
|
||||
<div class="shape"></div>
|
||||
<img src="~/assets/img/about/about-s1-i1.jpg" alt="">
|
||||
@@ -23,15 +23,15 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="parts p3 row">
|
||||
<div class="col-6">
|
||||
<div class="imgBox imgBox-reverse">
|
||||
<div class="col-12 col-lg-6 mb-5 mb-lg-0">
|
||||
<div class="imgBox imgBox-reverse anim-fadeIn">
|
||||
<div class="img">
|
||||
<div class="shape reverse"></div>
|
||||
<img src="~/assets/img/about/about-s1-i2.jpg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="col-12 col-lg-6">
|
||||
<p>{{staticData.s1.t4}}</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -44,45 +44,33 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="s2">
|
||||
<section class="s2" v-if="history.length">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<h2 class="title title-shape-center">{{staticData.s2.t1}}</h2>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="timeline">
|
||||
<div class="circle active">
|
||||
<span>1370</span>
|
||||
</div>
|
||||
<div class="line active"></div>
|
||||
<div class="circle active">
|
||||
<span>1375</span>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<div class="circle">
|
||||
<span>1385</span>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<div class="circle">
|
||||
<span>1395</span>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<div class="circle">
|
||||
<span>1396</span>
|
||||
</div>
|
||||
<div class="timeline anim-fadeIn">
|
||||
|
||||
<template v-for="(item,index) in history">
|
||||
<div class="circle" :key="item._id" :class="!index ? 'active' : null" :data-c-n="index" @click="activeHistory(item,index)">
|
||||
<span>{{mDate(item.year)}}</span>
|
||||
</div>
|
||||
<div class="line" :key="item._id + 1" :data-l-n="index" v-if="index < history.length - 1"></div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-content anim-fadeIn">
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<div class="col-12 col-md-6 order-1 order-md-0">
|
||||
<div class="txtBox">
|
||||
<h5>{{staticData.s2.t2}}</h5>
|
||||
<p>{{staticData.s2.t3}}</p>
|
||||
<h5 ref="title">{{history[0].history_details[$route.params.lang].title}}</h5>
|
||||
<p ref="caption">{{history[0].history_details[$route.params.lang].caption}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="imgBox">
|
||||
<img src="~/assets/img/about/timeline-i1.jpg" alt="">
|
||||
<div class="col-12 col-md-6 order-0 order-md-1 mb-3 mb-md-0">
|
||||
<div class="imgBox" v-if="history.length">
|
||||
<img ref="image" :src="history[0].image" :alt="history[0].history_details[$route.params.lang].title">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -101,12 +89,12 @@
|
||||
|
||||
<section class="s4">
|
||||
<div class="container">
|
||||
<div v-for="(item , index) in staticData.s4" class="panel" :class="'p'+(index+1)">
|
||||
<div v-for="(item , index) in staticData.s4" class="panel anim-fadeIn" :class="'p'+(index+1)">
|
||||
<div class="row">
|
||||
<div class="col-5 img">
|
||||
<div class="col-12 col-lg-5 img">
|
||||
<img :src="require('~/assets/img/about/'+ item.img)" alt="">
|
||||
</div>
|
||||
<div class="col-7 txt">
|
||||
<div class="col-12 col-lg-7 txt">
|
||||
<p>{{item.title}}</p>
|
||||
<a :href="item.link.url" class="btn btn-primary" target="_blank">{{item.link.txt}}</a>
|
||||
</div>
|
||||
@@ -120,11 +108,60 @@
|
||||
|
||||
|
||||
<script>
|
||||
import moment from 'moment-jalaali'
|
||||
import {fadeInAnimation} from '~/mixins/animations'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
history: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
staticData() {
|
||||
return this.$store.state.staticData.about[this.$route.params.lang]
|
||||
}
|
||||
},
|
||||
mixins: [fadeInAnimation],
|
||||
methods: {
|
||||
activeHistory(item, index) {
|
||||
for (let i = 0; i < this.history.length; i++) {
|
||||
i > index ? $(`.circle[data-c-n="${i}"]`).removeClass('active') : null
|
||||
i > index ? $(`.line[data-l-n="${i - 1}"]`).removeClass('active') : null
|
||||
|
||||
i < index ? $(`.circle[data-c-n="${i + 1}"]`).addClass('active') : null
|
||||
i < index ? $(`.line[data-l-n="${i}"]`).addClass('active') : null
|
||||
}
|
||||
|
||||
this.$gsap.timeline({
|
||||
yoyo: true,
|
||||
repeat: 1
|
||||
}).to([this.$refs.image, this.$refs.title, this.$refs.caption],
|
||||
{
|
||||
opacity: 0,
|
||||
duration: 0.1,
|
||||
onComplete: () => {
|
||||
this.$refs.image.src = item.image
|
||||
this.$refs.title.textContent = item.history_details[this.$route.params.lang].title
|
||||
this.$refs.caption.textContent = item.history_details[this.$route.params.lang].caption
|
||||
}
|
||||
})
|
||||
},
|
||||
mDate(date) {
|
||||
if (this.$route.params.lang === 'en') return moment().jYear(date).year()
|
||||
else return date
|
||||
}
|
||||
},
|
||||
head() {
|
||||
return {
|
||||
title: this.staticData.hero
|
||||
}
|
||||
},
|
||||
async asyncData({$axios}) {
|
||||
const history = await $axios.get(`/api/public/history`)
|
||||
return {
|
||||
history: history.data
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -79,6 +79,11 @@
|
||||
else return date.split(' ')[0]
|
||||
},
|
||||
},
|
||||
head() {
|
||||
return {
|
||||
title: this.post.post_details[this.$route.params.lang].title
|
||||
}
|
||||
},
|
||||
async asyncData({$axios, params}) {
|
||||
const post = await $axios.get(`/api/public/blog/${params.post}`)
|
||||
const blogCategories = await $axios.get(`/api/public/blogCategories`)
|
||||
|
||||
@@ -13,11 +13,11 @@
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="filters">
|
||||
<div class="filters anim-fadeIn">
|
||||
<h2 class="title">{{staticData.t3}}</h2>
|
||||
<ul>
|
||||
<li @click="filtering(false)">
|
||||
<p class="active">همه</p>
|
||||
<p class="active">{{staticData.t7}}</p>
|
||||
</li>
|
||||
<li v-for="item in blogCategories" :key="item._id" @click="filtering(item._id)">
|
||||
<p>{{item.blogCategory_details[$route.params.lang].name}}</p>
|
||||
@@ -31,9 +31,9 @@
|
||||
|
||||
<section class="s3">
|
||||
<div class="container">
|
||||
<div class="row" v-if="filtered_posts.length">
|
||||
<div class="row posts-container" v-if="filtered_posts.length">
|
||||
|
||||
<div class="col-12 clearfix post" v-for="item in filtered_posts" :key="item._id">
|
||||
<div class="col-12 col-sm-6 col-lg-12 clearfix post anim-fadeIn" v-for="item in filtered_posts" :key="item._id">
|
||||
<div class="panel">
|
||||
<div class="imgBox imgBox-reverse">
|
||||
<div class="img">
|
||||
@@ -58,7 +58,7 @@
|
||||
</div>
|
||||
<div class="row" v-else>
|
||||
<div class="col-12">
|
||||
<p class="no-post">هیچ پستی در این دسته بندی موجود نمیباشد.</p>
|
||||
<p class="no-post posts-container anim-fadeIn">{{staticData.t6}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -68,6 +68,7 @@
|
||||
|
||||
<script>
|
||||
import moment from 'moment-jalaali'
|
||||
import {fadeInAnimation} from "~/mixins/animations"
|
||||
|
||||
export default {
|
||||
data() {
|
||||
@@ -95,9 +96,27 @@
|
||||
else return date.split(' ')[0]
|
||||
},
|
||||
filtering(key) {
|
||||
this.filter = key
|
||||
$('.blog--page .filters p').removeClass('active')
|
||||
$(event.target).addClass('active')
|
||||
|
||||
this.$gsap.timeline({
|
||||
yoyo: true,
|
||||
repeat: 1
|
||||
})
|
||||
.to($('.blog--page .posts-container'),
|
||||
{
|
||||
opacity: 0,
|
||||
duration: 0.3,
|
||||
onComplete: () => {
|
||||
this.filter = key
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
mixins: [fadeInAnimation],
|
||||
head() {
|
||||
return {
|
||||
title: this.staticData.hero
|
||||
}
|
||||
},
|
||||
async asyncData({$axios, store}) {
|
||||
|
||||
@@ -0,0 +1,224 @@
|
||||
<template>
|
||||
<div class="page calculation--page">
|
||||
<Hero title="نرم افزار محاسبه"/>
|
||||
<section class="s1">
|
||||
<div class="container">
|
||||
<div class="panel">
|
||||
<h2 class="title">وزن گریتینگ</h2>
|
||||
<p>بدلیل این که وزن گریتینگ ها به واسطه مواردی همچون مشخصات فنی یا همان دیتیل ساخت از جمله نوع گریتینگ،جنس تسمه و اندازه چشمه ها متغیر است،بدین منظور جهت راحتی و سهولت در انجام کار شما مشتری گرامی، شرکت اراک ریل نرم افزار محاسبه وزن و میزان بار قابل تحمل را برای گریتینگ طراحی و در این صفحه قرار داده است.که با داشتن مشخصات فنی گریتینگ مورد نظر خود میتوانید وزن گریتینگ خود را همراه با گالوانیزه و یا بدون گالوانیزه محاسبه کنید.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="s2">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
|
||||
<div class="app m-auto" :class="app.method === 'a' ? 'col-12 col-lg-6' : 'col-12'">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
|
||||
<div class="col-12">
|
||||
<div class="appTitle">
|
||||
<h2 class="title">ظرفیت بارگیری گریتینگ خود را محاسبه کنید</h2>
|
||||
</div>
|
||||
<div class="appMethod">
|
||||
<span>روش محاسبه</span>
|
||||
<el-radio-group v-model="app.method" style="direction: ltr">
|
||||
<el-radio-button label="b">نفر یا وسیله نقلیه</el-radio-button>
|
||||
<el-radio-button label="a">وارد کردن بار</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-lg-6 mb-5 mb-lg-0" v-if="app.method === 'b'">
|
||||
<div class="appLayout">
|
||||
<h2 class="layoutTitle">انتخاب کلاس لودینگ</h2>
|
||||
<div class="class">
|
||||
<h4>عابر پیاده:</h4>
|
||||
<el-radio v-model="app.class" :label="1">کلاس 1</el-radio>
|
||||
</div>
|
||||
<div class="class">
|
||||
<h4>وسایل نقلیه:</h4>
|
||||
<el-radio v-model="app.class" :label="2">کلاس 2</el-radio>
|
||||
<el-radio v-model="app.class" :label="3">کلاس 3</el-radio>
|
||||
<el-radio v-model="app.class" :label="4">کلاس 4</el-radio>
|
||||
</div>
|
||||
<div class="class">
|
||||
<h4>لیفتراک:</h4>
|
||||
<el-radio v-model="app.class" :label="5">FL1</el-radio>
|
||||
<el-radio v-model="app.class" :label="6">FL2</el-radio>
|
||||
<el-radio v-model="app.class" :label="7">FL3</el-radio>
|
||||
<el-radio v-model="app.class" :label="8">FL4</el-radio>
|
||||
<el-radio v-model="app.class" :label="9">FL5</el-radio>
|
||||
<el-radio v-model="app.class" :label="10">FL6</el-radio>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div :class="app.method === 'a' ? 'col-12' : 'col-12 col-lg-6'">
|
||||
<div class="appLayout">
|
||||
<h2 class="layoutTitle">اطلاعات ورودی</h2>
|
||||
<el-form key="form-a">
|
||||
<el-form-item label="نوع گریتینگ">
|
||||
<el-radio-group v-model="app.type">
|
||||
<el-radio label="elec">الکتروفورج</el-radio>
|
||||
<el-radio label="press">پرسی</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="بار متمرکز (kn)">
|
||||
<el-input v-model="app.pointLoad" placeholder="وارد کنید"></el-input>
|
||||
<!-- <span>kn</span>-->
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="بار گسترده (kn/m2)">
|
||||
<el-input v-model="app.distributedLoad" placeholder="وارد کنید"></el-input>
|
||||
<!-- <span>kn/m2</span>-->
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="گام تسمه های باربر (mm)">
|
||||
|
||||
<el-select v-model="app.bearingBarPitch" key="bearingBarPitch_elec" v-if="app.type === 'elec'" placeholder="انتخاب کنید">
|
||||
<el-option
|
||||
v-for="item in bearingBarPitch_elec"
|
||||
:key="item"
|
||||
:label="item"
|
||||
:value="item">
|
||||
</el-option>
|
||||
</el-select>
|
||||
|
||||
<el-select v-model="app.bearingBarPitch" key="bearingBarPitch_press" v-if="app.type === 'press'" placeholder="انتخاب کنید">
|
||||
<el-option
|
||||
v-for="item in bearingBarPitch_press"
|
||||
:key="item"
|
||||
:label="item"
|
||||
:value="item">
|
||||
</el-option>
|
||||
</el-select>
|
||||
|
||||
<!-- <span>mm</span>-->
|
||||
|
||||
</el-form-item>
|
||||
<el-form-item label="گام تسمه های رابط (mm)">
|
||||
|
||||
<el-select v-model="app.crossBarPitCh" key="bearingBarPitch_elec" v-if="app.type === 'elec'" placeholder="انتخاب کنید">
|
||||
<el-option
|
||||
v-for="item in crossBarPitCh_elec"
|
||||
:key="item"
|
||||
:label="item"
|
||||
:value="item">
|
||||
</el-option>
|
||||
</el-select>
|
||||
|
||||
<el-select v-model="app.crossBarPitCh" key="bearingBarPitch_press" v-if="app.type === 'press'" placeholder="انتخاب کنید">
|
||||
<el-option
|
||||
v-for="item in crossBarPitCh_press"
|
||||
:key="item"
|
||||
:label="item"
|
||||
:value="item">
|
||||
</el-option>
|
||||
</el-select>
|
||||
|
||||
<!-- <span>mm</span>-->
|
||||
|
||||
</el-form-item>
|
||||
<el-form-item label="دهنه باربر (mm)">
|
||||
<el-input v-model="app.clearSpan" placeholder="وارد کنید"></el-input>
|
||||
<!-- <span>mm</span>-->
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="ضخامت تسمه های باربر (mm)">
|
||||
<el-input v-model="app.bearingBarThickness" placeholder="وارد کنید"></el-input>
|
||||
<!-- <span>mm</span>-->
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="ارتفاع تسمه های باربر (mm)">
|
||||
<el-select v-model="app.bearingBarHeight" key="bearingBarHeight" placeholder="انتخاب کنید">
|
||||
<el-option
|
||||
v-for="item in bearingBarHeight"
|
||||
:key="item"
|
||||
:label="item"
|
||||
:value="item">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<!-- <span>mm</span>-->
|
||||
</el-form-item>
|
||||
<div class="calculateBtn">
|
||||
<!-- <el-button>محاسبه</el-button>-->
|
||||
<button class="btn btn-reverse-fill">محاسبه</button>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import moment from 'moment-jalaali'
|
||||
import {fadeInAnimation} from '~/mixins/animations'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
history: null,
|
||||
app: {
|
||||
method: 'a',
|
||||
type: 'elec',
|
||||
class: '',
|
||||
pointLoad: '',
|
||||
distributedLoad: '',
|
||||
bearingBarPitch: '',
|
||||
crossBarPitCh: '',
|
||||
clearSpan: '',
|
||||
bearingBarThickness: '',
|
||||
bearingBarHeight: '',
|
||||
locale: this.$route.params.lang
|
||||
},
|
||||
bearingBarPitch_elec: [30, 35, 41, 50],
|
||||
bearingBarPitch_press: [11, 22, 33, 44, 50, 55],
|
||||
crossBarPitCh_elec: [50, 76, 100],
|
||||
crossBarPitCh_press: [11, 22, 33, 44, 50, 55, 66, 77, 88, 100],
|
||||
bearingBarHeight: [20, 25, 30, 35, 40, 45, 50, 55, 60]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
staticData() {
|
||||
return this.$store.state.staticData.calculation[this.$route.params.lang]
|
||||
}
|
||||
},
|
||||
mixins: [fadeInAnimation],
|
||||
methods: {},
|
||||
head() {
|
||||
return {
|
||||
htmlAttrs: {
|
||||
title: this.staticData.hero
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
.el-popper .popper__arrow {
|
||||
border-width: 0;
|
||||
filter: none;
|
||||
left: 35px;
|
||||
|
||||
&:lang(fa) {
|
||||
left: auto;
|
||||
right: 35px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -80,25 +80,25 @@
|
||||
<p v-if="validation.reason">{{validation.reason.msg}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="col-12 col-lg-6">
|
||||
<div class="formRow" :class="validation.first_name ? 'err' : null">
|
||||
<input type="text" :placeholder="staticData.t8" name="first_name" v-model="formData.first_name">
|
||||
<p v-if="validation.first_name">{{validation.first_name.msg}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="col-12 col-lg-6">
|
||||
<div class="formRow" :class="validation.last_name ? 'err' : null">
|
||||
<input type="text" :placeholder="staticData.t9" name="last_name" v-model="formData.last_name">
|
||||
<p v-if="validation.last_name">{{validation.last_name.msg}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="col-12 col-lg-6">
|
||||
<div class="formRow" :class="validation.phone_number ? 'err' : null">
|
||||
<input type="text" :placeholder="staticData.t10" name="phone_number" v-model="formData.phone_number">
|
||||
<p v-if="validation.phone_number">{{validation.phone_number.msg}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="col-12 col-lg-6">
|
||||
<div class="formRow" :class="validation.email ? 'err' : null">
|
||||
<input type="text" :placeholder="staticData.t11" name="email" v-model="formData.email">
|
||||
<p v-if="validation.email">{{validation.email.msg}}</p>
|
||||
@@ -173,6 +173,11 @@
|
||||
})
|
||||
}
|
||||
},
|
||||
head() {
|
||||
return {
|
||||
title: this.staticData.hero
|
||||
}
|
||||
},
|
||||
async asyncData({$axios}) {
|
||||
const reasons = await $axios.get(`/api/public/contact/reason`)
|
||||
return {
|
||||
|
||||
+112
-94
@@ -1,26 +1,28 @@
|
||||
<template>
|
||||
<div class="page home--page">
|
||||
|
||||
<div id="slider">
|
||||
<div class="hero clearfix" v-for="item in slider" :key="item._id">
|
||||
<div class="bg" :style="{backgroundImage: `url(${item.image})`}"></div>
|
||||
<div class="txt--home">
|
||||
<h1>{{item.slider_details[$route.params.lang].title}}</h1>
|
||||
<p>{{item.slider_details[$route.params.lang].caption}}</p>
|
||||
<div class="slider-container">
|
||||
<div id="slider" class="anim-parallax-hero">
|
||||
<div class="hero clearfix" v-for="item in slider" :key="item._id">
|
||||
<div class="bg" :style="{backgroundImage: `url(${item.image})`}"></div>
|
||||
<div class="txt--home">
|
||||
<h1>{{item.slider_details[$route.params.lang].title}}</h1>
|
||||
<p>{{item.slider_details[$route.params.lang].caption}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="s1">
|
||||
<div class="go-down-btn">
|
||||
<div class="go-down-btn" @click="scrollDown">
|
||||
<em class="fa fa-angle-double-down"></em>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-6 title-side">
|
||||
<div class="col-12 col-md-6 title-side">
|
||||
<h2 class="title title-shape">{{staticData.s1.title}}</h2>
|
||||
</div>
|
||||
<div class="col-6 caption-side">
|
||||
<div class="col-12 col-md-6 caption-side">
|
||||
<p>{{staticData.s1.caption}}</p>
|
||||
<nuxt-link :to="{name: 'lang-about',params:{lang: $route.params.lang}}" class="btn btn-primary">{{staticData.s1.link}}</nuxt-link>
|
||||
</div>
|
||||
@@ -28,59 +30,19 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="s1-2">
|
||||
<img src="~/assets/img/home/hp-s1-i2.jpg" alt="" class="section-bg">
|
||||
<div class="container">
|
||||
<div class="panel">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<h2 class="title title-shape-center">{{staticData.s1_2.t1}}</h2>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<p>{{staticData.s1_2.t2}}</p>
|
||||
<p>{{staticData.s1_2.t3}}</p>
|
||||
<nuxt-link :to="{name: 'lang-about',params: {lang: $route.params.lang}}" class="btn btn-primary">{{staticData.s1_2.link}}</nuxt-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="s2">
|
||||
<img src="~/assets/img/home/hp-s2-i1.jpg" alt="" class="section-bg">
|
||||
<img src="~/assets/img/home/hp-s1-i2.jpg" alt="" class="section-bg anim-parallax">
|
||||
<div class="container">
|
||||
<div class="panel">
|
||||
<div class="parts p1">
|
||||
<h2 class="title title-shape-center">{{staticData.s2.t1}}</h2>
|
||||
<div>
|
||||
<p>{{staticData.s2.t2}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="parts p2 row">
|
||||
<div class="col-6">
|
||||
<div class="txtBox">
|
||||
<h2 class="title title-subtitle">{{staticData.s2.t5}}</h2>
|
||||
<p>{{staticData.s2.t6}}</p>
|
||||
<nuxt-link :to="{name: 'lang-services',params: {lang: $route.params.lang}}" class="btn btn-primary">{{staticData.s2.link1}}</nuxt-link>
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<h2 class="title title-shape-center">{{staticData.s1_2.t1}}</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="imgBox imgBox-shape">
|
||||
<img src="~/assets/img/home/hp-s2-i2.jpg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="parts p3 row">
|
||||
<div class="col-6">
|
||||
<div class="imgBox imgBox-reverse imgBox-shape-reverse">
|
||||
<img src="~/assets/img/home/hp-s2-i3.jpg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="txtBox">
|
||||
<h2 class="title title-subtitle">{{staticData.s2.t3}}</h2>
|
||||
<p>{{staticData.s2.t4}}</p>
|
||||
<nuxt-link :to="{name: 'lang-tech-gStandard',params: {lang: $route.params.lang}}" class="btn btn-primary">{{staticData.s2.link2}}</nuxt-link>
|
||||
<div class="col-12">
|
||||
<p>{{staticData.s1_2.t2}}</p>
|
||||
<p>{{staticData.s1_2.t3}}</p>
|
||||
<nuxt-link :to="{name: 'lang-about',params: {lang: $route.params.lang}}" class="btn btn-primary">{{staticData.s1_2.link}}</nuxt-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -89,7 +51,55 @@
|
||||
</section>
|
||||
|
||||
<section class="s3">
|
||||
<img src="~/assets/img/home/hp-s3-i1.jpg" alt="" class="section-bg">
|
||||
<img src="~/assets/img/home/hp-s2-i1.jpg" alt="" class="section-bg anim-parallax">
|
||||
<div class="container">
|
||||
<div class="panel">
|
||||
<div class="container-fluid">
|
||||
<div class="parts p1">
|
||||
<h2 class="title title-shape-center">{{staticData.s2.t1}}</h2>
|
||||
<div>
|
||||
<p>{{staticData.s2.t2}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="parts p2 row">
|
||||
<div class="col-12 col-lg-6 order-1 order-lg-0">
|
||||
<div class="txtBox">
|
||||
<h2 class="title title-subtitle">{{staticData.s2.t5}}</h2>
|
||||
<p>{{staticData.s2.t6}}</p>
|
||||
<nuxt-link :to="{name: 'lang-services',params: {lang: $route.params.lang}}" class="btn btn-primary">{{staticData.s2.link1}}</nuxt-link>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-lg-6 order-0 order-lg-1 mb-5 mb-lg-0">
|
||||
<div class="imgBox imgBox-shape anim-fadeIn">
|
||||
<div class="img">
|
||||
<img src="~/assets/img/home/hp-s2-i2.jpg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="parts p3 row">
|
||||
<div class="col-12 col-lg-6 mb-5 mb-lg-0">
|
||||
<div class="imgBox imgBox-reverse imgBox-shape-reverse anim-fadeIn">
|
||||
<div class="img">
|
||||
<img src="~/assets/img/home/hp-s2-i3.jpg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-lg-6">
|
||||
<div class="txtBox">
|
||||
<h2 class="title title-subtitle">{{staticData.s2.t3}}</h2>
|
||||
<p>{{staticData.s2.t4}}</p>
|
||||
<nuxt-link :to="{name: 'lang-tech-gStandard',params: {lang: $route.params.lang}}" class="btn btn-primary">{{staticData.s2.link2}}</nuxt-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="s4">
|
||||
<img src="~/assets/img/home/hp-s3-i1.jpg" alt="" class="section-bg anim-parallax">
|
||||
<div class="container clearfix">
|
||||
<div class="panel">
|
||||
<div class="parts p1">
|
||||
@@ -101,12 +111,12 @@
|
||||
</div>
|
||||
<div class="products">
|
||||
<div class="parts p2 row">
|
||||
<div class="col-4" v-for="(item,index) in products" :key="item._id" v-if="index <= 5">
|
||||
<nuxt-link :to="{name: 'lang-products-product',params: {lang: $route.params.lang,product: item._id}}">
|
||||
<div class="col-12 col-sm-6 col-lg-4 mb-5 anim-fadeIn" v-for="(item,index) in products" :key="item._id" v-if="index <= 5">
|
||||
<nuxt-link :to="{name: 'lang-products-product',params: {lang: $route.params.lang,product: item._id}}" class="product">
|
||||
<div class="imgBox">
|
||||
<img :src="item.cover" :alt="item.product_details[$route.params.lang].name">
|
||||
<p>{{item.product_details[$route.params.lang].name}}</p>
|
||||
</div>
|
||||
<p>{{item.product_details[$route.params.lang].name}}</p>
|
||||
</nuxt-link>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
@@ -116,27 +126,31 @@
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="s4">
|
||||
|
||||
<section class="s5">
|
||||
<img src="~/assets/img/home/hp-s4-i1.jpg" alt="" class="section-bg">
|
||||
<div class="txt">
|
||||
<div class="txt anim-parallax">
|
||||
<h2 class="title title-shape">{{staticData.s4.t1}} <span>{{staticData.s4.t2}}</span></h2>
|
||||
<p>{{staticData.s4.t3}}</p>
|
||||
<a :href="catalog.file" target="_blank" class="btn btn-reverse-fill">{{staticData.s4.link}}</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<CustomersCommunication/>
|
||||
|
||||
<section class="s6">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-2"></div>
|
||||
<div class="col-6">
|
||||
<div class="col-2 d-none d-lg-block"></div>
|
||||
<div class="col-12 col-lg-6">
|
||||
<h2 class="title title-shape">{{staticData.s6.t1}}</h2>
|
||||
<p>{{staticData.s6.t2}}</p>
|
||||
<nuxt-link :to="{name: staticData.s6.link1.url}" class="btn btn-primary">{{staticData.s6.link1}}</nuxt-link>
|
||||
<a :href="calc_app_link" target="_blank" class="btn btn-primary-fill">{{staticData.s6.link2}}</a>
|
||||
<!-- <nuxt-link :to="{name: 'lang-calculation',params: {lang: $route.params.lang}}" class="btn btn-primary">{{staticData.s6.link1}}</nuxt-link>-->
|
||||
<a @click.prevent="notAvailable" href="" class="btn btn-primary">{{staticData.s6.link1}}</a>
|
||||
<a @click.prevent="notAvailable" :href="calc_app_link" target="_blank" class="btn btn-primary-fill">{{staticData.s6.link2}}</a>
|
||||
</div>
|
||||
<div class="col-2 img-side">
|
||||
<img src="~/assets/img/home/hp-s6-i1.png" alt="">
|
||||
<div class="col-2 img-side d-none d-lg-block">
|
||||
<img src="~/assets/img/home/hp-s6-i1.png" class="anim-fadeIn" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -146,6 +160,8 @@
|
||||
|
||||
<script>
|
||||
if (process.client) require('slick-carousel')
|
||||
import {fadeInAnimation, parallaxAnimation, parallaxAnimation_hero} from '~/mixins/animations'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
@@ -161,42 +177,45 @@
|
||||
return this.$store.state.staticData.homePage[this.$route.params.lang]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
scrollDown() {
|
||||
this.$gsap.to(window, {scrollTo: {y: $('.home--page .s1'), offsetY: 90}, duration: 0.9, ease: 'power4.inOut'})
|
||||
},
|
||||
notAvailable() {
|
||||
this.$alert(this.$route.params.lang === 'fa' ? 'این بخش فعلا در دسترس نیست' : 'This section is currently unavailable', '', {
|
||||
confirmButtonText: 'OK',
|
||||
})
|
||||
}
|
||||
},
|
||||
mixins: [fadeInAnimation, parallaxAnimation, parallaxAnimation_hero],
|
||||
mounted() {
|
||||
const th = 0.5
|
||||
const rev = true
|
||||
/////////////////// title shapes activation
|
||||
const titles = $('.home--page h2.title')
|
||||
const titleScene = []
|
||||
//
|
||||
// for (let i = 0; i < titles.length; i++) {
|
||||
// $(titles[i]).attr('data-pos', i)
|
||||
// titleScene[i] = this.$scrollmagic.scene({
|
||||
// triggerElement: `.home--page *[data-pos="${i}"]`,
|
||||
// triggerHook: th,
|
||||
// reverse: rev
|
||||
// }).on('enter', function () {
|
||||
// $(titles[i]).addClass('active')
|
||||
// }).on('leave', function () {
|
||||
// $(titles[i]).removeClass('active')
|
||||
// })
|
||||
//
|
||||
// this.$scrollmagic.addScene(titleScene[i])
|
||||
// }
|
||||
|
||||
/////////////////////////////////////// carousel
|
||||
$('#slider').slick({
|
||||
slidesToShow: 1,
|
||||
rtl: this.$route.params.lang === 'fa',
|
||||
dots: true,
|
||||
autoplay: true,
|
||||
autoplaySpeed: 6000
|
||||
autoplaySpeed: 6000,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 768,
|
||||
settings: {
|
||||
arrows: false
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
},
|
||||
head() {
|
||||
return {
|
||||
title: this.staticData.title
|
||||
}
|
||||
},
|
||||
async asyncData({$axios}) {
|
||||
const slider = await $axios.get('/api/public/slider')
|
||||
const products = await $axios.get(`/api/public/products`)
|
||||
const catalog = await $axios.get('/api/public/catalog')
|
||||
|
||||
|
||||
return {
|
||||
slider: slider.data,
|
||||
products: products.data,
|
||||
@@ -206,7 +225,6 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
.footer{
|
||||
background: #F0F0F0 !important;
|
||||
|
||||
@@ -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`)
|
||||
|
||||
@@ -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}) {
|
||||
|
||||
@@ -8,9 +8,8 @@
|
||||
<p>{{staticData.t2}}</p>
|
||||
<p>{{staticData.t3}}</p>
|
||||
|
||||
<div class="projects">
|
||||
|
||||
<div class="project" v-for="(item,index) in projects" :key="item._id">
|
||||
<div class="projects" v-if="projects.length">
|
||||
<div class="project anim-fadeIn" v-for="(item,index) in projects" :key="item._id">
|
||||
<div :id="`project_${index}`">
|
||||
<div class="imgBox" v-for="image in item.images" :key="image._id">
|
||||
<img class="bg" :src="image.image" alt="">
|
||||
@@ -26,7 +25,16 @@
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="no-project" v-else>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<p>{{staticData.t7}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -45,9 +53,10 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from "moment-jalaali"
|
||||
|
||||
if (process.client) require('slick-carousel')
|
||||
import moment from "moment-jalaali"
|
||||
import {fadeInAnimation} from "~/mixins/animations"
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
@@ -65,6 +74,7 @@
|
||||
else return date.split(' ')[0]
|
||||
}
|
||||
},
|
||||
mixins: [fadeInAnimation],
|
||||
mounted() {
|
||||
this.projects.forEach((item, index) => {
|
||||
$(`#project_${index}`).slick({
|
||||
@@ -72,10 +82,31 @@
|
||||
centerMode: true,
|
||||
centerPadding: '150px',
|
||||
infinite: true,
|
||||
arrows: true
|
||||
arrows: true,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 768,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
centerMode: false
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 575,
|
||||
settings: {
|
||||
slidesToShow: 1,
|
||||
centerMode: false
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
})
|
||||
},
|
||||
head() {
|
||||
return {
|
||||
title: this.staticData.hero
|
||||
}
|
||||
},
|
||||
async asyncData({$axios}) {
|
||||
const projects = await $axios.get(`/api/public/projects`)
|
||||
return {
|
||||
|
||||
@@ -35,16 +35,16 @@
|
||||
</li>
|
||||
</ul>
|
||||
<div class="images">
|
||||
<img src="~/assets/img/services/autodesk.png" alt="">
|
||||
<img src="~/assets/img/services/tekla.png" alt="">
|
||||
<img src="~/assets/img/services/solid_works.png" alt="">
|
||||
<img class="anim-fadeIn" src="~/assets/img/services/autodesk.png" alt="">
|
||||
<img class="anim-fadeIn" src="~/assets/img/services/tekla.png" alt="">
|
||||
<img class="anim-fadeIn" src="~/assets/img/services/solid_works.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="s2">
|
||||
<img src="~/assets/img/services/services-s3-i1.jpg" alt="" class="section-bg">
|
||||
<img src="~/assets/img/services/services-s3-i1.jpg" alt="" class="section-bg anim-parallax">
|
||||
<div class="container">
|
||||
<div class="panel">
|
||||
<div class="parts p1">
|
||||
@@ -54,25 +54,29 @@
|
||||
|
||||
<!-- image left -->
|
||||
<div class="parts row align-items-center">
|
||||
<div class="col-6">
|
||||
<div class="col-12 col-lg-6 order-1 order-lg-0">
|
||||
<h2 class="title title-subtitle">{{staticData.t14}}</h2>
|
||||
<p>{{staticData.t15}}</p>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="imgBox imgBox-shape">
|
||||
<img src="~/assets/img/services/s2-i1.jpg" :alt="staticData.t14">
|
||||
<div class="col-12 col-lg-6 order-0 order-lg-1 mb-5 mb-lg-0">
|
||||
<div class="imgBox imgBox-shape anim-fadeIn">
|
||||
<div class="img">
|
||||
<img src="~/assets/img/services/s2-i1.jpg" :alt="staticData.t14">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- image right -->
|
||||
<div class="parts row align-items-center">
|
||||
<div class="col-6">
|
||||
<div class="imgBox imgBox-reverse imgBox-shape-reverse">
|
||||
<img src="~/assets/img/services/s2-i2.jpg" :alt="staticData.t16">
|
||||
<div class="col-12 col-lg-6 mb-5 mb-lg-0">
|
||||
<div class="imgBox imgBox-reverse imgBox-shape-reverse anim-fadeIn">
|
||||
<div class="img">
|
||||
<img src="~/assets/img/services/s2-i2.jpg" :alt="staticData.t16">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="col-12 col-lg-6">
|
||||
<h2 class="title title-subtitle">{{staticData.t16}}</h2>
|
||||
<p>{{staticData.t17}}</p>
|
||||
</div>
|
||||
@@ -80,25 +84,29 @@
|
||||
|
||||
<!-- image left -->
|
||||
<div class="parts row align-items-center">
|
||||
<div class="col-6">
|
||||
<div class="col-12 col-lg-6 order-1 order-lg-0">
|
||||
<h2 class="title title-subtitle">{{staticData.t18}}</h2>
|
||||
<p>{{staticData.t19}}</p>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="imgBox imgBox-shape">
|
||||
<img src="~/assets/img/services/s2-i3.jpg" :alt="staticData.t18">
|
||||
<div class="col-12 col-lg-6 order-0 order-lg-1 mb-5 mb-lg-0">
|
||||
<div class="imgBox imgBox-shape anim-fadeIn">
|
||||
<div class="img">
|
||||
<img src="~/assets/img/services/s2-i3.jpg" :alt="staticData.t18">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- image right -->
|
||||
<div class="parts row align-items-center">
|
||||
<div class="col-6">
|
||||
<div class="imgBox imgBox-reverse imgBox-shape-reverse">
|
||||
<img src="~/assets/img/services/s2-i4.jpg" :alt="staticData.t20">
|
||||
<div class="col-12 col-lg-6 mb-5 mb-lg-0">
|
||||
<div class="imgBox imgBox-reverse imgBox-shape-reverse anim-fadeIn">
|
||||
<div class="img">
|
||||
<img src="~/assets/img/services/s2-i4.jpg" :alt="staticData.t20">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="col-12 col-lg-6">
|
||||
<h2 class="title title-subtitle">{{staticData.t20}}</h2>
|
||||
<p>{{staticData.t21}}</p>
|
||||
</div>
|
||||
@@ -106,25 +114,29 @@
|
||||
|
||||
<!-- image left -->
|
||||
<div class="parts row align-items-center">
|
||||
<div class="col-6">
|
||||
<div class="col-12 col-lg-6 order-1 order-lg-0">
|
||||
<h2 class="title title-subtitle">{{staticData.t22}}</h2>
|
||||
<p>{{staticData.t23}}</p>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="imgBox imgBox-shape">
|
||||
<img src="~/assets/img/services/s2-i5.jpg" :alt="staticData.t22">
|
||||
<div class="col-12 col-lg-6 order-0 order-lg-1 mb-5 mb-lg-0">
|
||||
<div class="imgBox imgBox-shape anim-fadeIn">
|
||||
<div class="img">
|
||||
<img src="~/assets/img/services/s2-i5.jpg" :alt="staticData.t22">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- image right -->
|
||||
<div class="parts row align-items-center">
|
||||
<div class="col-6">
|
||||
<div class="imgBox imgBox-reverse imgBox-shape-reverse">
|
||||
<img src="~/assets/img/services/s2-i6.jpg" :alt="staticData.t24">
|
||||
<div class="col-12 col-lg-6 mb-5 mb-lg-0">
|
||||
<div class="imgBox imgBox-reverse imgBox-shape-reverse anim-fadeIn">
|
||||
<div class="img">
|
||||
<img src="~/assets/img/services/s2-i6.jpg" :alt="staticData.t24">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="col-12 col-lg-6">
|
||||
<h2 class="title title-subtitle">{{staticData.t24}}</h2>
|
||||
<p>{{staticData.t25}}</p>
|
||||
</div>
|
||||
@@ -132,25 +144,29 @@
|
||||
|
||||
<!-- image left -->
|
||||
<div class="parts row align-items-center">
|
||||
<div class="col-6">
|
||||
<div class="col-12 col-lg-6 order-1 order-lg-0">
|
||||
<h2 class="title title-subtitle">{{staticData.t26}}</h2>
|
||||
<p>{{staticData.t27}}</p>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="imgBox imgBox-shape">
|
||||
<img src="~/assets/img/services/s2-i7.jpg" :alt="staticData.t26">
|
||||
<div class="col-12 col-lg-6 order-0 order-lg-1 mb-5 mb-lg-0">
|
||||
<div class="imgBox imgBox-shape anim-fadeIn">
|
||||
<div class="img">
|
||||
<img src="~/assets/img/services/s2-i7.jpg" :alt="staticData.t26">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- image right -->
|
||||
<div class="parts row align-items-center">
|
||||
<div class="col-6">
|
||||
<div class="imgBox imgBox-reverse imgBox-shape-reverse">
|
||||
<img src="~/assets/img/services/s2-i8.jpg" :alt="staticData.t28">
|
||||
<div class="col-12 col-lg-6 mb-5 mb-lg-0">
|
||||
<div class="imgBox imgBox-reverse imgBox-shape-reverse anim-fadeIn">
|
||||
<div class="img">
|
||||
<img src="~/assets/img/services/s2-i8.jpg" :alt="staticData.t28">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="col-12 col-lg-6">
|
||||
<h2 class="title title-subtitle">{{staticData.t28}}</h2>
|
||||
<p>{{staticData.t29}}</p>
|
||||
</div>
|
||||
@@ -164,11 +180,19 @@
|
||||
|
||||
|
||||
<script>
|
||||
import {fadeInAnimation, parallaxAnimation} from "~/mixins/animations"
|
||||
|
||||
export default {
|
||||
computed: {
|
||||
staticData() {
|
||||
return this.$store.state.staticData.services[this.$route.params.lang]
|
||||
}
|
||||
},
|
||||
mixins: [fadeInAnimation, parallaxAnimation],
|
||||
head() {
|
||||
return {
|
||||
title: this.staticData.hero
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -31,11 +31,19 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {fadeInAnimation} from "~/mixins/animations"
|
||||
|
||||
export default {
|
||||
computed: {
|
||||
staticData() {
|
||||
return this.$store.state.staticData.gDesign[this.$route.params.lang]
|
||||
}
|
||||
}
|
||||
},
|
||||
mixins: [fadeInAnimation],
|
||||
head() {
|
||||
return {
|
||||
title: this.staticData.title
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -14,11 +14,11 @@
|
||||
|
||||
<h2>{{staticData.t6}}</h2>
|
||||
<p>{{staticData.t7}}</p>
|
||||
<img src="~/assets/img/tech-info/g-standard.png" alt="">
|
||||
<img class="i1 anim-fadeIn" src="~/assets/img/tech-info/g-standard.png" alt="">
|
||||
|
||||
<h2>{{staticData.t8}}</h2>
|
||||
<p>{{staticData.t9}}</p>
|
||||
<img src="~/assets/img/tech-info/DIN24537.png" alt="">
|
||||
<img class="i2 anim-fadeIn" src="~/assets/img/tech-info/DIN24537.png" alt="">
|
||||
|
||||
<h2>{{staticData.t10}}</h2>
|
||||
<p>{{staticData.t11}}</p>
|
||||
@@ -61,11 +61,19 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {fadeInAnimation} from "~/mixins/animations"
|
||||
|
||||
export default {
|
||||
computed: {
|
||||
staticData() {
|
||||
return this.$store.state.staticData.gStandard[this.$route.params.lang]
|
||||
}
|
||||
},
|
||||
mixins: [fadeInAnimation],
|
||||
head() {
|
||||
return {
|
||||
title: this.staticData.title
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -52,7 +52,7 @@
|
||||
</p>
|
||||
<p>{{staticData.t23}}</p>
|
||||
|
||||
<div class="imgBox">
|
||||
<div class="imgBox anim-fadeIn">
|
||||
<img src="~/assets/img/tech-info/ti-Model-4.jpg" alt="">
|
||||
<p>{{staticData.t24}}</p>
|
||||
</div>
|
||||
@@ -75,11 +75,19 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {fadeInAnimation} from "~/mixins/animations"
|
||||
|
||||
export default {
|
||||
computed: {
|
||||
staticData() {
|
||||
return this.$store.state.staticData.gTech[this.$route.params.lang]
|
||||
}
|
||||
},
|
||||
mixins: [fadeInAnimation],
|
||||
head() {
|
||||
return {
|
||||
title: this.staticData.title
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -59,11 +59,19 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {fadeInAnimation} from "~/mixins/animations"
|
||||
|
||||
export default {
|
||||
computed: {
|
||||
staticData() {
|
||||
return this.$store.state.staticData.gUsage[this.$route.params.lang]
|
||||
}
|
||||
},
|
||||
mixins: [fadeInAnimation],
|
||||
head() {
|
||||
return {
|
||||
title: this.staticData.title
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -80,7 +80,7 @@
|
||||
<el-divider></el-divider>
|
||||
<h6 style="margin-bottom: 30px;">توضیحات پست</h6>
|
||||
<client-only>
|
||||
<ckeditor v-model="post.post_details.en.description" :config="editorConfig"></ckeditor>
|
||||
<ckeditor v-model="post.post_details.en.description" :config="editorConfig_en"></ckeditor>
|
||||
<p class="err" v-if="validation.en_description">{{validation.en_description.msg}}</p>
|
||||
</client-only>
|
||||
</admin-panel>
|
||||
@@ -98,8 +98,12 @@
|
||||
post: null,
|
||||
blogCategories: null,
|
||||
editorConfig: {
|
||||
language: 'fa',
|
||||
extraPlugins: ['bidi', 'justify']
|
||||
},
|
||||
editorConfig_en: {
|
||||
language: 'en',
|
||||
extraPlugins: ['bidi']
|
||||
extraPlugins: ['bidi', 'justify']
|
||||
},
|
||||
validation: {},
|
||||
uploading: false,
|
||||
|
||||
@@ -80,7 +80,7 @@
|
||||
<el-divider></el-divider>
|
||||
<h6 style="margin-bottom: 30px;">توضیحات پست</h6>
|
||||
<client-only>
|
||||
<ckeditor v-model="post.post_details.en.description" :config="editorConfig"></ckeditor>
|
||||
<ckeditor v-model="post.post_details.en.description" :config="editorConfig_en"></ckeditor>
|
||||
<p class="err" v-if="validation.en_description">{{validation.en_description.msg}}</p>
|
||||
</client-only>
|
||||
</admin-panel>
|
||||
@@ -114,8 +114,12 @@
|
||||
},
|
||||
blogCategories: null,
|
||||
editorConfig: {
|
||||
language: 'fa',
|
||||
extraPlugins: ['bidi', 'justify']
|
||||
},
|
||||
editorConfig_en: {
|
||||
language: 'en',
|
||||
extraPlugins: ['bidi']
|
||||
extraPlugins: ['bidi', 'justify']
|
||||
},
|
||||
validation: {},
|
||||
uploading: false,
|
||||
|
||||
@@ -0,0 +1,137 @@
|
||||
<template>
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<admin-title-bar :title="title">
|
||||
<el-button @click="$router.back()" type="primary">برگشت به صفحه قبل</el-button>
|
||||
<el-button type="success" @click="upload">بروز رسانی</el-button>
|
||||
</admin-title-bar>
|
||||
|
||||
<div class="col-6">
|
||||
<admin-panel>
|
||||
<el-form>
|
||||
<el-form-item prop="title" :class="validation.fa_title ? 'is-error' : ''" label="عنوان فارسی">
|
||||
<el-input v-model="formData.history_details.fa.title"></el-input>
|
||||
<p class="err" v-if="validation.fa_title">{{validation.fa_title.msg}}</p>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="title" :class="validation.en_title ? 'is-error' : ''" label="عنوان انگلیسی">
|
||||
<el-input v-model="formData.history_details.en.title"></el-input>
|
||||
<p class="err" v-if="validation.en_title">{{validation.en_title.msg}}</p>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="title" :class="validation.fa_caption ? 'is-error' : ''" label="توضیحات فارسی">
|
||||
<el-input type="textarea" v-model="formData.history_details.fa.caption"></el-input>
|
||||
<p class="err" v-if="validation.fa_caption">{{validation.fa_caption.msg}}</p>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="title" :class="validation.en_caption ? 'is-error' : ''" label="توضیحات انگلیسی">
|
||||
<el-input type="textarea" v-model="formData.history_details.en.caption"></el-input>
|
||||
<p class="err" v-if="validation.en_caption">{{validation.en_caption.msg}}</p>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="title" :class="validation.year ? 'is-error' : ''" label="سال">
|
||||
<el-input v-model="formData.year" placeholder="سال را چهار رقمی و به شمسی وارد کنید. مثال: 1399"></el-input>
|
||||
<p class="err" v-if="validation.year">{{validation.year.msg}}</p>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</admin-panel>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<admin-panel>
|
||||
<h2 class="secondTitle">تصویر</h2>
|
||||
<el-divider></el-divider>
|
||||
<img :src="formData.image" alt="" style="width: 100%;max-width: 400px;display: block;">
|
||||
<input type="file" ref="image" @change="preview">
|
||||
<p class="err" v-if="validation.image">{{validation.image.msg}}</p>
|
||||
</admin-panel>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
formData: null,
|
||||
validation: {},
|
||||
uploading: false,
|
||||
uploadProgress: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
title() {
|
||||
if (!this.uploading) {
|
||||
return 'ویرایش تاریخچه'
|
||||
} else {
|
||||
return this.uploadProgress
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
upload() {
|
||||
this.validation = ''
|
||||
const data = new FormData()
|
||||
data.append('fa_title', this.formData.history_details.fa.title)
|
||||
data.append('en_title', this.formData.history_details.en.title)
|
||||
data.append('fa_caption', this.formData.history_details.fa.caption)
|
||||
data.append('en_caption', this.formData.history_details.en.caption)
|
||||
data.append('year', this.formData.year)
|
||||
|
||||
if (this.$refs.image.files[0]) {
|
||||
data.append('image', this.$refs.image.files[0])
|
||||
}
|
||||
|
||||
const axiosConfig = {
|
||||
onUploadProgress: progressEvent => {
|
||||
this.uploading = true
|
||||
this.uploadProgress = 'درحال آپلود ' + Math.floor(((progressEvent.loaded / progressEvent.total) * 100)) + '%'
|
||||
|
||||
if ((progressEvent.loaded / progressEvent.total) * 100 === 100) {
|
||||
this.uploading = false
|
||||
}
|
||||
}
|
||||
}
|
||||
this.$axios.put(`/api/private/history/${this.formData._id}`, data, axiosConfig)
|
||||
.then(response => {
|
||||
if (response.data) {
|
||||
this.$message({
|
||||
message: 'تغییرات با موفقیت انجام شد.',
|
||||
type: 'success'
|
||||
});
|
||||
}
|
||||
}).catch(error => {
|
||||
if (error.response.status === 422) {
|
||||
this.validation = error.response.data.validation
|
||||
this.$message({
|
||||
type: 'error',
|
||||
message: 'اطلاعات رو بررسی و دوباره تلاش کنید'
|
||||
})
|
||||
} else {
|
||||
this.$alert(error.response.data.error.message, 'خطا', {
|
||||
confirmButtonText: 'باشه',
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
})
|
||||
},
|
||||
preview(event) {
|
||||
this.formData.image = URL.createObjectURL(event.target.files[0]);
|
||||
}
|
||||
},
|
||||
head() {
|
||||
return {
|
||||
title: this.title
|
||||
}
|
||||
},
|
||||
layout: 'admin',
|
||||
async asyncData({$axios, route}) {
|
||||
const history = await $axios.get(`/api/public/history/${route.params.history}`)
|
||||
return {
|
||||
formData: history.data
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,119 @@
|
||||
<template>
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<admin-title-bar :title="title">
|
||||
<nuxt-link :to="{name: 'admin-history-new'}">
|
||||
<el-button type="success">جدید</el-button>
|
||||
</nuxt-link>
|
||||
</admin-title-bar>
|
||||
<div class="col-12">
|
||||
<admin-panel>
|
||||
|
||||
<el-table
|
||||
:data="history"
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
type="index"
|
||||
label="#">
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
prop="image"
|
||||
label="تصویر"
|
||||
width="230">
|
||||
<template slot-scope="scope">
|
||||
<el-image
|
||||
style="width: 100%; height: 100%"
|
||||
:src="scope.row.image"
|
||||
fit="fit">
|
||||
</el-image>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
prop="year"
|
||||
label="سال"
|
||||
width="">
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
prop="history_details.fa.title"
|
||||
label="عنوان"
|
||||
width="">
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
label="ویرایش"
|
||||
width="150"
|
||||
align="left">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="warning" plain icon="el-icon-edit" @click="edit(scope.row._id)"></el-button>
|
||||
<el-button type="danger" plain icon="el-icon-delete" @click="del(scope.row._id)"></el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
</el-table>
|
||||
</admin-panel>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: 'تاریخچه',
|
||||
history: null,
|
||||
}
|
||||
},
|
||||
head() {
|
||||
return {
|
||||
title: this.title,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
edit(id) {
|
||||
this.$router.push(`/admin/history/${id}`)
|
||||
|
||||
},
|
||||
del(id) {
|
||||
this.$confirm('این مورد حذف شود؟', 'هشدار', {
|
||||
confirmButtonText: 'بله',
|
||||
cancelButtonText: 'لغو',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.$axios.delete(`/api/private/history/${id}`).then(response => {
|
||||
this.history = this.history.filter(item => {
|
||||
return item._id !== id
|
||||
})
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: 'مورد حذف شد'
|
||||
});
|
||||
})
|
||||
}).catch(() => {
|
||||
this.$message({
|
||||
type: 'warning',
|
||||
message: 'عملیات لغو شد'
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
layout: 'admin',
|
||||
async asyncData({$axios, store}) {
|
||||
let history = await $axios.get(`/api/public/history`)
|
||||
return {
|
||||
history: history.data
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style>
|
||||
.el-table .el-table__body-wrapper .el-table__row .is-left{
|
||||
text-align: left !important;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,137 @@
|
||||
<template>
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<admin-title-bar :title="title">
|
||||
<el-button @click="$router.back()" type="primary">برگشت به صفحه قبل</el-button>
|
||||
<el-button type="success" @click="upload">ایجاد</el-button>
|
||||
</admin-title-bar>
|
||||
|
||||
<div class="col-6">
|
||||
<admin-panel>
|
||||
<el-form>
|
||||
<el-form-item prop="title" :class="validation.fa_title ? 'is-error' : ''" label="عنوان فارسی">
|
||||
<el-input v-model="formData.fa_title"></el-input>
|
||||
<p class="err" v-if="validation.fa_title">{{validation.fa_title.msg}}</p>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="title" :class="validation.en_title ? 'is-error' : ''" label="عنوان انگلیسی">
|
||||
<el-input v-model="formData.en_title"></el-input>
|
||||
<p class="err" v-if="validation.en_title">{{validation.en_title.msg}}</p>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="title" :class="validation.fa_caption ? 'is-error' : ''" label="توضیحات فارسی">
|
||||
<el-input type="textarea" v-model="formData.fa_caption"></el-input>
|
||||
<p class="err" v-if="validation.fa_caption">{{validation.fa_caption.msg}}</p>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="title" :class="validation.en_caption ? 'is-error' : ''" label="توضیحات انگلیسی">
|
||||
<el-input type="textarea" v-model="formData.en_caption"></el-input>
|
||||
<p class="err" v-if="validation.en_caption">{{validation.en_caption.msg}}</p>
|
||||
</el-form-item>
|
||||
|
||||
|
||||
<el-form-item prop="title" :class="validation.year ? 'is-error' : ''" label="سال">
|
||||
<el-input v-model="formData.year" placeholder="سال را چهار رقمی و به شمسی وارد کنید. مثال: 1399"></el-input>
|
||||
<p class="err" v-if="validation.year">{{validation.year.msg}}</p>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</admin-panel>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<admin-panel>
|
||||
<h2 class="secondTitle">تصویر</h2>
|
||||
<el-divider></el-divider>
|
||||
<img :src="formData.image" alt="" style="width: 100%;max-width: 400px;display: block;">
|
||||
<input type="file" ref="image" @change="preview">
|
||||
<p class="err" v-if="validation.image">{{validation.image.msg}}</p>
|
||||
</admin-panel>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
formData: {
|
||||
fa_title: '',
|
||||
en_title: '',
|
||||
fa_caption: '',
|
||||
en_caption: '',
|
||||
year: '',
|
||||
image: ''
|
||||
},
|
||||
validation: {},
|
||||
uploading: false,
|
||||
uploadProgress: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
title() {
|
||||
if (!this.uploading) {
|
||||
return 'افزودن تاریخچه'
|
||||
} else {
|
||||
return this.uploadProgress
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
upload() {
|
||||
this.validation = ''
|
||||
const data = new FormData()
|
||||
data.append('fa_title', this.formData.fa_title)
|
||||
data.append('en_title', this.formData.en_title)
|
||||
data.append('fa_caption', this.formData.fa_caption)
|
||||
data.append('en_caption', this.formData.en_caption)
|
||||
data.append('year', this.formData.year)
|
||||
data.append('image', this.$refs.image.files[0])
|
||||
|
||||
const axiosConfig = {
|
||||
onUploadProgress: progressEvent => {
|
||||
this.uploading = true
|
||||
this.uploadProgress = 'درحال آپلود ' + Math.floor(((progressEvent.loaded / progressEvent.total) * 100)) + '%'
|
||||
|
||||
if ((progressEvent.loaded / progressEvent.total) * 100 === 100) {
|
||||
this.uploading = false
|
||||
}
|
||||
}
|
||||
}
|
||||
this.$axios.post(`/api/private/history`, data, axiosConfig)
|
||||
.then(response => {
|
||||
if (response.data) {
|
||||
this.$message({
|
||||
message: 'مورد با موفقیت ثبت شد.',
|
||||
type: 'success'
|
||||
});
|
||||
this.$router.push({name: 'admin-history'})
|
||||
}
|
||||
}).catch(error => {
|
||||
if (error.response.status === 422) {
|
||||
this.validation = error.response.data.validation
|
||||
this.$message({
|
||||
type: 'error',
|
||||
message: 'اطلاعات رو بررسی و دوباره تلاش کنید'
|
||||
})
|
||||
} else {
|
||||
this.$alert(error.response.data.error.message, 'خطا', {
|
||||
confirmButtonText: 'باشه',
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
})
|
||||
},
|
||||
preview(event) {
|
||||
this.formData.image = URL.createObjectURL(event.target.files[0]);
|
||||
}
|
||||
},
|
||||
head() {
|
||||
return {
|
||||
title: this.title
|
||||
}
|
||||
},
|
||||
layout: 'admin'
|
||||
}
|
||||
</script>
|
||||
@@ -10,22 +10,22 @@
|
||||
<admin-panel>
|
||||
<el-form>
|
||||
<el-form-item prop="title" :class="validation.fa_title ? 'is-error' : ''" label="عنوان فارسی">
|
||||
<el-input v-model="formData.fa_title"></el-input>
|
||||
<el-input v-model="formData.slider_details.fa.title"></el-input>
|
||||
<p class="err" v-if="validation.fa_title">{{validation.fa_title.msg}}</p>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="title" :class="validation.en_title ? 'is-error' : ''" label="عنوان انگلیسی">
|
||||
<el-input v-model="formData.en_title"></el-input>
|
||||
<el-input v-model="formData.slider_details.en.title"></el-input>
|
||||
<p class="err" v-if="validation.en_title">{{validation.en_title.msg}}</p>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="title" :class="validation.fa_caption ? 'is-error' : ''" label="توضیحات فارسی">
|
||||
<el-input v-model="formData.fa_caption"></el-input>
|
||||
<el-input v-model="formData.slider_details.fa.caption"></el-input>
|
||||
<p class="err" v-if="validation.fa_caption">{{validation.fa_caption.msg}}</p>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="title" :class="validation.en_caption ? 'is-error' : ''" label="توضیحات انگلیسی">
|
||||
<el-input v-model="formData.en_caption"></el-input>
|
||||
<el-input v-model="formData.slider_details.en.caption"></el-input>
|
||||
<p class="err" v-if="validation.en_caption">{{validation.en_caption.msg}}</p>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
@@ -68,10 +68,10 @@
|
||||
upload() {
|
||||
this.validation = ''
|
||||
const data = new FormData()
|
||||
data.append('fa_title', this.formData.fa_title)
|
||||
data.append('en_title', this.formData.en_title)
|
||||
data.append('fa_caption', this.formData.fa_caption)
|
||||
data.append('en_caption', this.formData.en_caption)
|
||||
data.append('fa_title', this.formData.slider_details.fa.title)
|
||||
data.append('en_title', this.formData.slider_details.en.title)
|
||||
data.append('fa_caption', this.formData.slider_details.fa.caption)
|
||||
data.append('en_caption', this.formData.slider_details.en.caption)
|
||||
|
||||
if (this.$refs.image.files[0]) {
|
||||
data.append('image', this.$refs.image.files[0])
|
||||
|
||||
Reference in New Issue
Block a user