added animations and pageLoad and preLoader
This commit is contained in:
Amir Mohamadi
@@ -39,9 +39,13 @@ module.exports.create = [
|
||||
|
||||
// short description
|
||||
body('fa_short_description')
|
||||
.notEmpty().withMessage(v_m['fa'].required.description),
|
||||
.notEmpty().withMessage(v_m['fa'].required.description)
|
||||
.bail()
|
||||
.isLength({max: 200}).withMessage(v_m['fa'].max_char.max200),
|
||||
body('en_short_description')
|
||||
.notEmpty().withMessage(v_m['fa'].required.description),
|
||||
.notEmpty().withMessage(v_m['fa'].required.description)
|
||||
.bail()
|
||||
.isLength({max: 200}).withMessage(v_m['fa'].max_char.max200),
|
||||
|
||||
body('category')
|
||||
.notEmpty().withMessage(v_m['fa'].required.category)
|
||||
@@ -157,9 +161,13 @@ module.exports.update = [
|
||||
|
||||
// short description
|
||||
body('fa_short_description')
|
||||
.notEmpty().withMessage(v_m['fa'].required.description),
|
||||
.notEmpty().withMessage(v_m['fa'].required.description)
|
||||
.bail()
|
||||
.isLength({max: 200}).withMessage(v_m['fa'].max_char.max200),
|
||||
body('en_short_description')
|
||||
.notEmpty().withMessage(v_m['fa'].required.description),
|
||||
.notEmpty().withMessage(v_m['fa'].required.description)
|
||||
.bail()
|
||||
.isLength({max: 200}).withMessage(v_m['fa'].max_char.max200),
|
||||
|
||||
|
||||
body('category')
|
||||
|
||||
@@ -0,0 +1,35 @@
|
||||
const {body, validationResult} = require('express-validator')
|
||||
const v_m = require('../validation_messages')
|
||||
|
||||
const validationMessages = {
|
||||
fa: {},
|
||||
en: {}
|
||||
}
|
||||
|
||||
module.exports = [
|
||||
[
|
||||
body('method')
|
||||
.notEmpty().withMessage(),
|
||||
body('type')
|
||||
.notEmpty().withMessage(),
|
||||
body('class')
|
||||
.notEmpty().withMessage(),
|
||||
body('pointLoad')
|
||||
.notEmpty().withMessage(),
|
||||
body('distributedLoad')
|
||||
.notEmpty().withMessage(),
|
||||
body('bearingBarPitch')
|
||||
.notEmpty().withMessage(),
|
||||
body('crossBarPitCh')
|
||||
.notEmpty().withMessage(),
|
||||
body('clearSpan')
|
||||
.notEmpty().withMessage(),
|
||||
body('bearingBarThickness')
|
||||
.notEmpty().withMessage(),
|
||||
body('bearingBarHeight')
|
||||
.notEmpty().withMessage()
|
||||
],
|
||||
(req, res) => {
|
||||
|
||||
}
|
||||
]
|
||||
@@ -0,0 +1,166 @@
|
||||
const History = require('../models/History')
|
||||
const dateformat = require('dateformat')
|
||||
const {body, validationResult} = require('express-validator')
|
||||
const jimp = require('jimp')
|
||||
const fs = require('fs')
|
||||
const v_m = require('../validation_messages')
|
||||
|
||||
|
||||
module.exports.create = [
|
||||
[
|
||||
body('fa_title')
|
||||
.notEmpty().withMessage(v_m['fa'].required.title),
|
||||
|
||||
body('en_title')
|
||||
.notEmpty().withMessage(v_m['fa'].required.title),
|
||||
|
||||
body('year')
|
||||
.notEmpty().withMessage(v_m['fa'].required.date)
|
||||
.bail()
|
||||
.isNumeric().withMessage(v_m['fa'].format.number)
|
||||
.bail()
|
||||
.isLength({min: 4}).withMessage(v_m['fa'].min_char.min4)
|
||||
.bail()
|
||||
.isLength({max: 4}).withMessage(v_m['fa'].max_char.max4)
|
||||
],
|
||||
(req, res) => {
|
||||
const errors = validationResult(req)
|
||||
if (!errors.isEmpty()) return res.status(422).json({validation: errors.mapped()})
|
||||
if (!req.files || !req.files.image) return res.status(422).json({validation: {image: {msg: v_m['fa'].required.image}}})
|
||||
|
||||
const fileName = 'history_' + Date.now() + '.' + req.files.image.mimetype.split('/')[1]
|
||||
|
||||
const data = {
|
||||
image: fileName,
|
||||
year: Number(req.body.year),
|
||||
history_details: {
|
||||
fa: {
|
||||
title: req.body.fa_title,
|
||||
caption: req.body.fa_caption
|
||||
},
|
||||
en: {
|
||||
title: req.body.en_title,
|
||||
caption: req.body.en_caption
|
||||
}
|
||||
},
|
||||
created_at: dateformat(Date.now(), 'yyyy-mm-dd HH:MM:ss')
|
||||
}
|
||||
|
||||
jimp.read(req.files.image.data)
|
||||
.then(img => {
|
||||
img
|
||||
.resize(380, jimp.AUTO)
|
||||
.cover(380, 260)
|
||||
.write(`./static/uploads/images/history/${fileName}`, cb => {
|
||||
const history = new History(data)
|
||||
history.save(err => {
|
||||
if (err) console.log(err)
|
||||
return res.json(v_m['fa'].response.success_save)
|
||||
})
|
||||
})
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err)
|
||||
})
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
module.exports.getAll = [
|
||||
(req, res) => {
|
||||
History.find({}).sort({year: 1}).exec((err, data) => {
|
||||
if (err) console.log(err)
|
||||
return res.json(data)
|
||||
})
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
module.exports.getOne = [
|
||||
(req, res) => {
|
||||
History.findById(req.params.id, (err, data) => {
|
||||
if (err) return res.status(404).json(err)
|
||||
return res.json(data)
|
||||
})
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
module.exports.update = [
|
||||
[
|
||||
body('fa_title')
|
||||
.notEmpty().withMessage(v_m['fa'].required.title),
|
||||
|
||||
body('en_title')
|
||||
.notEmpty().withMessage(v_m['fa'].required.title),
|
||||
|
||||
body('year')
|
||||
.notEmpty().withMessage(v_m['fa'].required.date)
|
||||
.bail()
|
||||
.isNumeric().withMessage(v_m['fa'].format.number)
|
||||
.bail()
|
||||
.isLength({min: 4}).withMessage(v_m['fa'].min_char.min4)
|
||||
.bail()
|
||||
.isLength({max: 4}).withMessage(v_m['fa'].max_char.max4)
|
||||
],
|
||||
(req, res) => {
|
||||
const errors = validationResult(req)
|
||||
if (!errors.isEmpty()) return res.status(422).json({validation: errors.mapped()})
|
||||
|
||||
const data = {
|
||||
year: Number(req.body.year),
|
||||
history_details: {
|
||||
fa: {
|
||||
title: req.body.fa_title,
|
||||
caption: req.body.fa_caption
|
||||
},
|
||||
en: {
|
||||
title: req.body.en_title,
|
||||
caption: req.body.en_caption
|
||||
}
|
||||
},
|
||||
updated_at: dateformat(Date.now(), 'yyyy-mm-dd HH:MM:ss')
|
||||
}
|
||||
|
||||
if (req.files && req.files.image) {
|
||||
let fileName = 'history_' + Date.now() + '.' + req.files.image.mimetype.split('/')[1]
|
||||
data.image = fileName
|
||||
jimp.read(req.files.image.data)
|
||||
.then(img => {
|
||||
img
|
||||
.resize(380, jimp.AUTO)
|
||||
.cover(380, 260)
|
||||
.write(`./static/uploads/images/history/${fileName}`, cb => {
|
||||
History.findByIdAndUpdate(req.params.id, data, (err, oldData) => {
|
||||
if (err) console.log(err)
|
||||
fs.unlink(`./static/${oldData.image}`, err => {
|
||||
if (err) console.log(err)
|
||||
return res.json(v_m['fa'].response.success_save)
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err)
|
||||
})
|
||||
} else {
|
||||
History.findByIdAndUpdate(req.params.id, data, (err, oldData) => {
|
||||
if (err) console.log(err)
|
||||
return res.json(v_m['fa'].response.success_save)
|
||||
})
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
module.exports.delete = [
|
||||
(req, res) => {
|
||||
History.findByIdAndDelete(req.params.id, (err, data) => {
|
||||
if (err) console.log(err)
|
||||
fs.unlink(`./static/${data.image}`, err => {
|
||||
if (err) console.log(err)
|
||||
return res.json(v_m['fa'].response.success_remove)
|
||||
})
|
||||
})
|
||||
}
|
||||
]
|
||||
@@ -0,0 +1,27 @@
|
||||
const mongoose = require('mongoose')
|
||||
|
||||
function image(img) {
|
||||
return '/uploads/images/history/' + img
|
||||
}
|
||||
|
||||
const HistorySchema = mongoose.Schema({
|
||||
image: {type: String, get: image},
|
||||
year: Number,
|
||||
history_details: {
|
||||
fa: {
|
||||
title: String,
|
||||
caption: String
|
||||
},
|
||||
en: {
|
||||
title: String,
|
||||
caption: String
|
||||
}
|
||||
},
|
||||
created_at: String,
|
||||
updated_at: String
|
||||
}, {
|
||||
toObject: {getters: true},
|
||||
toJSON: {getters: true}
|
||||
})
|
||||
|
||||
module.exports = mongoose.model('History', HistorySchema)
|
||||
@@ -10,6 +10,7 @@ const projectController = require('../controllers/projectController')
|
||||
const contactPageController = require('../controllers/contactPageController')
|
||||
const contactUsReasonController = require('../controllers/contactUsReasonController')
|
||||
const mainCatalogController = require('../controllers/mainCatalogController')
|
||||
const historyController = require('../controllers/historyController')
|
||||
|
||||
/////////////////////////////////////////////////////////// routes
|
||||
//////////////// slider
|
||||
@@ -63,4 +64,9 @@ router.delete('/contact/reason/:id', contactUsReasonController.delete)
|
||||
///////////////// main catalog
|
||||
router.post('/catalog', mainCatalogController.create)
|
||||
|
||||
///////////////// history
|
||||
router.post('/history', historyController.create)
|
||||
router.put('/history/:id', historyController.update)
|
||||
router.delete('/history/:id', historyController.delete)
|
||||
|
||||
module.exports = router
|
||||
|
||||
@@ -11,6 +11,7 @@ const projectController = require('../controllers/projectController')
|
||||
const contactPageController = require('../controllers/contactPageController')
|
||||
const contactUsReasonController = require('../controllers/contactUsReasonController')
|
||||
const mainCatalogController = require('../controllers/mainCatalogController')
|
||||
const historyController = require('../controllers/historyController')
|
||||
/////////////////////////////////////////////////////////// routes
|
||||
|
||||
//////////////// slider
|
||||
@@ -46,4 +47,8 @@ router.get('/contact/reason', contactUsReasonController.getAll)
|
||||
//////////////// main catalog
|
||||
router.get('/catalog', mainCatalogController.get)
|
||||
|
||||
//////////////// history
|
||||
router.get('/history', historyController.getAll)
|
||||
router.get('/history/:id', historyController.getOne)
|
||||
|
||||
module.exports = router
|
||||
|
||||
File diff suppressed because one or more lines are too long
Vendored
+5013
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,261 @@
|
||||
a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: baseline
|
||||
}
|
||||
|
||||
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{
|
||||
display: block
|
||||
}
|
||||
|
||||
body{
|
||||
line-height: 1;
|
||||
margin: 0
|
||||
}
|
||||
|
||||
ol, ul{
|
||||
list-style: none
|
||||
}
|
||||
|
||||
blockquote, q{
|
||||
quotes: none
|
||||
}
|
||||
|
||||
blockquote:after, blockquote:before, q:after, q:before{
|
||||
content: '';
|
||||
content: none
|
||||
}
|
||||
|
||||
table{
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0
|
||||
}
|
||||
|
||||
html{
|
||||
line-height: 1.15;
|
||||
-webkit-text-size-adjust: 100%
|
||||
}
|
||||
|
||||
h1{
|
||||
font-size: 2em;
|
||||
margin: .67em 0
|
||||
}
|
||||
|
||||
hr{
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
overflow: visible
|
||||
}
|
||||
|
||||
pre{
|
||||
font-family: monospace, monospace;
|
||||
font-size: 1em
|
||||
}
|
||||
|
||||
a{
|
||||
background-color: transparent
|
||||
}
|
||||
|
||||
abbr[title]{
|
||||
border-bottom: none;
|
||||
text-decoration: underline;
|
||||
text-decoration: underline dotted
|
||||
}
|
||||
|
||||
b, strong{
|
||||
font-weight: bolder
|
||||
}
|
||||
|
||||
code, kbd, samp{
|
||||
font-family: monospace, monospace;
|
||||
font-size: 1em
|
||||
}
|
||||
|
||||
small{
|
||||
font-size: 80%
|
||||
}
|
||||
|
||||
sub, sup{
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline
|
||||
}
|
||||
|
||||
sub{
|
||||
bottom: -.25em
|
||||
}
|
||||
|
||||
sup{
|
||||
top: -.5em
|
||||
}
|
||||
|
||||
img{
|
||||
border-style: none
|
||||
}
|
||||
|
||||
button, input, optgroup, select, textarea{
|
||||
font-family: inherit;
|
||||
font-size: 100%;
|
||||
line-height: 1.15;
|
||||
margin: 0
|
||||
}
|
||||
|
||||
button, input{
|
||||
overflow: visible
|
||||
}
|
||||
|
||||
button, select{
|
||||
text-transform: none
|
||||
}
|
||||
|
||||
[type=button], [type=reset], [type=submit], button{
|
||||
-webkit-appearance: button
|
||||
}
|
||||
|
||||
[type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button::-moz-focus-inner{
|
||||
border-style: none;
|
||||
padding: 0
|
||||
}
|
||||
|
||||
[type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring, button:-moz-focusring{
|
||||
outline: 1px dotted ButtonText
|
||||
}
|
||||
|
||||
fieldset{
|
||||
padding: .35em .75em .625em
|
||||
}
|
||||
|
||||
legend{
|
||||
box-sizing: border-box;
|
||||
color: inherit;
|
||||
display: table;
|
||||
max-width: 100%;
|
||||
padding: 0;
|
||||
white-space: normal
|
||||
}
|
||||
|
||||
progress{
|
||||
vertical-align: baseline
|
||||
}
|
||||
|
||||
textarea{
|
||||
overflow: auto
|
||||
}
|
||||
|
||||
[type=checkbox], [type=radio]{
|
||||
box-sizing: border-box;
|
||||
padding: 0
|
||||
}
|
||||
|
||||
[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button{
|
||||
height: auto
|
||||
}
|
||||
|
||||
[type=search]{
|
||||
-webkit-appearance: textfield;
|
||||
outline-offset: -2px
|
||||
}
|
||||
|
||||
[type=search]::-webkit-search-decoration{
|
||||
-webkit-appearance: none
|
||||
}
|
||||
|
||||
::-webkit-file-upload-button{
|
||||
-webkit-appearance: button;
|
||||
font: inherit
|
||||
}
|
||||
|
||||
details{
|
||||
display: block
|
||||
}
|
||||
|
||||
summary{
|
||||
display: list-item
|
||||
}
|
||||
|
||||
template{
|
||||
display: none
|
||||
}
|
||||
|
||||
[hidden]{
|
||||
display: none
|
||||
}
|
||||
|
||||
::selection{
|
||||
background: #468fd2;
|
||||
color: #fff
|
||||
}
|
||||
|
||||
::-webkit-selection{
|
||||
background: #468fd2;
|
||||
color: #fff
|
||||
}
|
||||
|
||||
::-moz-selection{
|
||||
background: #468fd2;
|
||||
color: #fff
|
||||
}
|
||||
|
||||
a{
|
||||
text-decoration: none
|
||||
}
|
||||
|
||||
h1{
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
h2{
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
h3{
|
||||
font-size: 18.72px;
|
||||
}
|
||||
|
||||
h4{
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h5{
|
||||
font-size: 13.28px;
|
||||
}
|
||||
|
||||
h6{
|
||||
font-size: 10.72px;
|
||||
}
|
||||
|
||||
.clear{
|
||||
clear: both;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
width: 0;
|
||||
height: 0
|
||||
}
|
||||
|
||||
.clearfix{
|
||||
zoom: 1
|
||||
}
|
||||
|
||||
.clearfix:after, .clearfix:before, .row:after, .row:before{
|
||||
content: '\0020';
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
width: 0;
|
||||
height: 0
|
||||
}
|
||||
|
||||
.clearfix:after, .row:after{
|
||||
clear: both
|
||||
}
|
||||
|
||||
.relativePos{
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%
|
||||
}
|
||||
@@ -371,7 +371,6 @@ html:lang(fa) {
|
||||
margin-right: 120px !important;
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.el-form-item__content {
|
||||
margin-left: 0 !important;
|
||||
@@ -379,7 +378,6 @@ html:lang(fa) {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.secondTitle {
|
||||
margin-top: 50px;
|
||||
}
|
||||
@@ -467,4 +465,9 @@ html:lang(fa) {
|
||||
.el-radio__label {
|
||||
padding-right: 10px !important;
|
||||
}
|
||||
|
||||
.el-scrollbar__wrap {
|
||||
margin-right: 0 !important;
|
||||
margin-left: -17px !important;
|
||||
}
|
||||
}
|
||||
|
||||
-6
File diff suppressed because one or more lines are too long
Vendored
+5013
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,261 @@
|
||||
a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: baseline
|
||||
}
|
||||
|
||||
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{
|
||||
display: block
|
||||
}
|
||||
|
||||
body{
|
||||
line-height: 1;
|
||||
margin: 0
|
||||
}
|
||||
|
||||
ol, ul{
|
||||
list-style: none
|
||||
}
|
||||
|
||||
blockquote, q{
|
||||
quotes: none
|
||||
}
|
||||
|
||||
blockquote:after, blockquote:before, q:after, q:before{
|
||||
content: '';
|
||||
content: none
|
||||
}
|
||||
|
||||
table{
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0
|
||||
}
|
||||
|
||||
html{
|
||||
line-height: 1.15;
|
||||
-webkit-text-size-adjust: 100%
|
||||
}
|
||||
|
||||
h1{
|
||||
font-size: 2em;
|
||||
margin: .67em 0
|
||||
}
|
||||
|
||||
hr{
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
overflow: visible
|
||||
}
|
||||
|
||||
pre{
|
||||
font-family: monospace, monospace;
|
||||
font-size: 1em
|
||||
}
|
||||
|
||||
a{
|
||||
background-color: transparent
|
||||
}
|
||||
|
||||
abbr[title]{
|
||||
border-bottom: none;
|
||||
text-decoration: underline;
|
||||
text-decoration: underline dotted
|
||||
}
|
||||
|
||||
b, strong{
|
||||
font-weight: bolder
|
||||
}
|
||||
|
||||
code, kbd, samp{
|
||||
font-family: monospace, monospace;
|
||||
font-size: 1em
|
||||
}
|
||||
|
||||
small{
|
||||
font-size: 80%
|
||||
}
|
||||
|
||||
sub, sup{
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline
|
||||
}
|
||||
|
||||
sub{
|
||||
bottom: -.25em
|
||||
}
|
||||
|
||||
sup{
|
||||
top: -.5em
|
||||
}
|
||||
|
||||
img{
|
||||
border-style: none
|
||||
}
|
||||
|
||||
button, input, optgroup, select, textarea{
|
||||
font-family: inherit;
|
||||
font-size: 100%;
|
||||
line-height: 1.15;
|
||||
margin: 0
|
||||
}
|
||||
|
||||
button, input{
|
||||
overflow: visible
|
||||
}
|
||||
|
||||
button, select{
|
||||
text-transform: none
|
||||
}
|
||||
|
||||
[type=button], [type=reset], [type=submit], button{
|
||||
-webkit-appearance: button
|
||||
}
|
||||
|
||||
[type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button::-moz-focus-inner{
|
||||
border-style: none;
|
||||
padding: 0
|
||||
}
|
||||
|
||||
[type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring, button:-moz-focusring{
|
||||
outline: 1px dotted ButtonText
|
||||
}
|
||||
|
||||
fieldset{
|
||||
padding: .35em .75em .625em
|
||||
}
|
||||
|
||||
legend{
|
||||
box-sizing: border-box;
|
||||
color: inherit;
|
||||
display: table;
|
||||
max-width: 100%;
|
||||
padding: 0;
|
||||
white-space: normal
|
||||
}
|
||||
|
||||
progress{
|
||||
vertical-align: baseline
|
||||
}
|
||||
|
||||
textarea{
|
||||
overflow: auto
|
||||
}
|
||||
|
||||
[type=checkbox], [type=radio]{
|
||||
box-sizing: border-box;
|
||||
padding: 0
|
||||
}
|
||||
|
||||
[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button{
|
||||
height: auto
|
||||
}
|
||||
|
||||
[type=search]{
|
||||
-webkit-appearance: textfield;
|
||||
outline-offset: -2px
|
||||
}
|
||||
|
||||
[type=search]::-webkit-search-decoration{
|
||||
-webkit-appearance: none
|
||||
}
|
||||
|
||||
::-webkit-file-upload-button{
|
||||
-webkit-appearance: button;
|
||||
font: inherit
|
||||
}
|
||||
|
||||
details{
|
||||
display: block
|
||||
}
|
||||
|
||||
summary{
|
||||
display: list-item
|
||||
}
|
||||
|
||||
template{
|
||||
display: none
|
||||
}
|
||||
|
||||
[hidden]{
|
||||
display: none
|
||||
}
|
||||
|
||||
::selection{
|
||||
background: #468fd2;
|
||||
color: #fff
|
||||
}
|
||||
|
||||
::-webkit-selection{
|
||||
background: #468fd2;
|
||||
color: #fff
|
||||
}
|
||||
|
||||
::-moz-selection{
|
||||
background: #468fd2;
|
||||
color: #fff
|
||||
}
|
||||
|
||||
a{
|
||||
text-decoration: none
|
||||
}
|
||||
|
||||
h1{
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
h2{
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
h3{
|
||||
font-size: 18.72px;
|
||||
}
|
||||
|
||||
h4{
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h5{
|
||||
font-size: 13.28px;
|
||||
}
|
||||
|
||||
h6{
|
||||
font-size: 10.72px;
|
||||
}
|
||||
|
||||
.clear{
|
||||
clear: both;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
width: 0;
|
||||
height: 0
|
||||
}
|
||||
|
||||
.clearfix{
|
||||
zoom: 1
|
||||
}
|
||||
|
||||
.clearfix:after, .clearfix:before, .row:after, .row:before{
|
||||
content: '\0020';
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
width: 0;
|
||||
height: 0
|
||||
}
|
||||
|
||||
.clearfix:after, .row:after{
|
||||
clear: both
|
||||
}
|
||||
|
||||
.relativePos{
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 540 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 626 KiB After Width: | Height: | Size: 607 KiB |
@@ -15,7 +15,6 @@
|
||||
-moz-appearance: none;
|
||||
}
|
||||
|
||||
|
||||
%titleShape {
|
||||
&::after {
|
||||
content: '';
|
||||
@@ -95,3 +94,41 @@
|
||||
%defaultBoxShadow {
|
||||
@include boxShadow(0 0px 20px rgba(0, 0, 0, 0.2))
|
||||
}
|
||||
|
||||
%productHoverAnim {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: $red;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 0;
|
||||
@extend %defaultTransition;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&::before {
|
||||
width: 108%;
|
||||
height: 108%;
|
||||
top: -4%;
|
||||
left: -4%;
|
||||
}
|
||||
|
||||
img {
|
||||
@include transform(scale(0.9));
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
display: block;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
@extend %defaultTransition;
|
||||
}
|
||||
}
|
||||
|
||||
+24
-24
@@ -1,51 +1,51 @@
|
||||
////// sahel
|
||||
@font-face {
|
||||
font-family: 'sahel';
|
||||
src: url("../fonts/sahel/Sahel-FD.eot"),
|
||||
url("../fonts/sahel/Sahel-FD.ttf"),
|
||||
url("../fonts/sahel/Sahel-FD.woff") ;
|
||||
src: url("../fonts/sahel/Sahel-FD.eot") format('embedded-opentype'),
|
||||
url("../fonts/sahel/Sahel-FD.ttf") format('truetype'),
|
||||
url("../fonts/sahel/Sahel-FD.woff") format('woff');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'sahel-bold';
|
||||
src: url("../fonts/sahel/Sahel-Bold-FD.eot"),
|
||||
url("../fonts/sahel/Sahel-Bold-FD.ttf"),
|
||||
url("../fonts/sahel/Sahel-Bold-FD.woff") ;
|
||||
src: url("../fonts/sahel/Sahel-Bold-FD.eot") format('embedded-opentype'),
|
||||
url("../fonts/sahel/Sahel-Bold-FD.ttf") format('truetype'),
|
||||
url("../fonts/sahel/Sahel-Bold-FD.woff") format('woff');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'sahel-black';
|
||||
src: url("../fonts/sahel/Sahel-Black-FD.eot"),
|
||||
url("../fonts/sahel/Sahel-Black-FD.ttf"),
|
||||
url("../fonts/sahel/Sahel-Black-FD.woff");
|
||||
src: url("../fonts/sahel/Sahel-Black-FD.eot") format('embedded-opentype'),
|
||||
url("../fonts/sahel/Sahel-Black-FD.ttf") format('truetype'),
|
||||
url("../fonts/sahel/Sahel-Black-FD.woff") format('woff');
|
||||
}
|
||||
|
||||
////// diodrum
|
||||
@font-face {
|
||||
font-family: 'diodrum';
|
||||
src: url("../fonts/diodrum/Diodrum-Regular.eot"),
|
||||
url("../fonts/diodrum/Diodrum-Regular.otf"),
|
||||
url("../fonts/diodrum/Diodrum-Regular.ttf"),
|
||||
url("../fonts/diodrum/Diodrum-Regular.woff"),
|
||||
url("../fonts/diodrum/Diodrum-Regular.woff2");
|
||||
src: url("../fonts/diodrum/Diodrum-Regular.eot") format('embedded-opentype'),
|
||||
url("../fonts/diodrum/Diodrum-Regular.otf") format('opentype'),
|
||||
url("../fonts/diodrum/Diodrum-Regular.ttf") format('truetype'),
|
||||
url("../fonts/diodrum/Diodrum-Regular.woff") format('woff'),
|
||||
url("../fonts/diodrum/Diodrum-Regular.woff2") format('woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'diodrum-bold';
|
||||
src: url("../fonts/diodrum/Diodrum-Semibold.eot"),
|
||||
url("../fonts/diodrum/Diodrum-Semibold.otf"),
|
||||
url("../fonts/diodrum/Diodrum-Semibold.ttf"),
|
||||
url("../fonts/diodrum/Diodrum-Semibold.woff"),
|
||||
url("../fonts/diodrum/Diodrum-Semibold.woff2");
|
||||
src: url("../fonts/diodrum/Diodrum-Semibold.eot") format('embedded-opentype'),
|
||||
url("../fonts/diodrum/Diodrum-Semibold.otf") format('opentype'),
|
||||
url("../fonts/diodrum/Diodrum-Semibold.ttf") format('truetype'),
|
||||
url("../fonts/diodrum/Diodrum-Semibold.woff") format('woff'),
|
||||
url("../fonts/diodrum/Diodrum-Semibold.woff2") format('woff2');
|
||||
}
|
||||
|
||||
|
||||
////// anton
|
||||
@font-face {
|
||||
font-family: 'anton';
|
||||
src: url("../fonts/Anton/Anton.eot"),
|
||||
url("../fonts/Anton/Anton.otf"),
|
||||
url("../fonts/Anton/Anton.ttf"),
|
||||
url("../fonts/Anton/Anton.woff"),
|
||||
url("../fonts/Anton/Anton.woff2");
|
||||
src: url("../fonts/Anton/Anton.eot") format('embedded-opentype'),
|
||||
url("../fonts/Anton/Anton.otf") format('opentype'),
|
||||
url("../fonts/Anton/Anton.ttf") format('truetype'),
|
||||
url("../fonts/Anton/Anton.woff") format('woff'),
|
||||
url("../fonts/Anton/Anton.woff2") format('woff2');
|
||||
}
|
||||
|
||||
@@ -5,6 +5,10 @@ body {
|
||||
&:lang(en) {
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
&.offCanvas-active {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
p, a, span, b {
|
||||
@@ -63,9 +67,20 @@ section {
|
||||
padding: 0 0 100px;
|
||||
}
|
||||
|
||||
@keyframes loading {
|
||||
0% {
|
||||
@include transform(rotateZ(0));
|
||||
}
|
||||
|
||||
100% {
|
||||
@include transform(rotateZ(360deg));
|
||||
}
|
||||
}
|
||||
|
||||
/////// global classes
|
||||
.page {
|
||||
min-height: calc(100vh - 200px);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.logo {
|
||||
@@ -77,13 +92,76 @@ section {
|
||||
}
|
||||
}
|
||||
|
||||
.offCanvas {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
top: 140px;
|
||||
right: -100%;
|
||||
height: calc(100vh - 140px);
|
||||
background: #fff;
|
||||
z-index: 10;
|
||||
overflow: scroll;
|
||||
padding-bottom: 100px;
|
||||
@include boxSizing(border-box);
|
||||
@extend %defaultTransition;
|
||||
|
||||
&:lang(en) {
|
||||
right: auto;
|
||||
left: -100%;
|
||||
}
|
||||
|
||||
&.header-small {
|
||||
top: 90px;
|
||||
height: calc(100vh - 90px);
|
||||
}
|
||||
|
||||
&.active {
|
||||
right: 0;
|
||||
|
||||
&:lang(en) {
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.links {
|
||||
padding: 25px;
|
||||
|
||||
ul {
|
||||
li {
|
||||
margin-bottom: 10px;
|
||||
|
||||
&.active {
|
||||
a {
|
||||
@include borderRadius(10px);
|
||||
background: $red;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
&.title {
|
||||
&.t2 {
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
padding: 5px 10px;
|
||||
@extend %defaultTransition;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 5;
|
||||
z-index: 11;
|
||||
@include boxShadow(0 4px 10px rgba(0, 0, 0, 0.07));
|
||||
|
||||
.lang-bar {
|
||||
@@ -181,10 +259,40 @@ section {
|
||||
li {
|
||||
text-align: right;
|
||||
padding: 30px 0;
|
||||
width: auto;
|
||||
@extend %defaultTransition;
|
||||
|
||||
&:not(:first-child) {
|
||||
margin: 0 50px;
|
||||
|
||||
@media (max-width: 1400px) {
|
||||
& {
|
||||
margin: 0 30px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1100px) {
|
||||
& {
|
||||
margin: 0 20px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 920px) {
|
||||
& {
|
||||
margin: 0 15px;
|
||||
|
||||
a {
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (max-width: 810px) {
|
||||
a {
|
||||
font-size: 14px;
|
||||
|
||||
&:lang(en) {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
@@ -251,6 +359,14 @@ section {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.sub-menu-active {
|
||||
background: $red;
|
||||
|
||||
a {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -290,6 +406,57 @@ section {
|
||||
}
|
||||
}
|
||||
|
||||
.mobile {
|
||||
ul {
|
||||
li {
|
||||
margin: 0 !important;
|
||||
|
||||
&.menu {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
|
||||
#menuBtn {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
width: 25px;
|
||||
height: 20px;
|
||||
direction: ltr;
|
||||
cursor: pointer;
|
||||
|
||||
.bars {
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background: #000;
|
||||
margin-bottom: 3px;
|
||||
@extend %defaultTransition;
|
||||
}
|
||||
|
||||
&.close {
|
||||
.bars {
|
||||
background: $red;
|
||||
|
||||
&.b1 {
|
||||
@include transform(rotate(45deg) translate(4px, 7px));
|
||||
}
|
||||
|
||||
&.b2 {
|
||||
width: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&.b3 {
|
||||
@include transform(rotate(-45deg) translate(3px, -6px));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.header-small {
|
||||
.links {
|
||||
li {
|
||||
@@ -473,13 +640,14 @@ section {
|
||||
|
||||
.hero {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.bg {
|
||||
width: 100%;
|
||||
height: 90vh;
|
||||
background-size: cover;
|
||||
-webkit-background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
-webkit-background-size: cover;
|
||||
}
|
||||
|
||||
.txt {
|
||||
@@ -541,6 +709,12 @@ section {
|
||||
border: 1px solid #fff;
|
||||
background: #fff;
|
||||
color: #000;
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
background: $red;
|
||||
border: 1px solid $red;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -552,6 +726,14 @@ section {
|
||||
margin-top: -80px;
|
||||
z-index: 0;
|
||||
@include boxSizing(border-box);
|
||||
|
||||
@media (max-width: 992px) {
|
||||
padding: 100px 15px !important;
|
||||
}
|
||||
@media (max-width: 575px) {
|
||||
margin-left: -15px;
|
||||
margin-right: -15px;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
@@ -623,6 +805,12 @@ section {
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
& {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -655,6 +843,7 @@ section {
|
||||
|
||||
p {
|
||||
color: red;
|
||||
padding-right: 1%;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -688,7 +877,9 @@ section {
|
||||
input, textarea {
|
||||
@extend %appearance;
|
||||
@extend %defaultTransition;
|
||||
width: 100%;
|
||||
width: 95%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border: 2px solid transparent;
|
||||
border-bottom: 2px solid rgba(0, 0, 0, 0.1);
|
||||
outline: none;
|
||||
@@ -746,14 +937,25 @@ section {
|
||||
&:lang(en) {
|
||||
right: auto;
|
||||
left: -30px;
|
||||
|
||||
@media (max-width: 992px) {
|
||||
left: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
right: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.filters {
|
||||
margin: 0 auto 50px;
|
||||
|
||||
@@ -790,3 +992,73 @@ section {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-load {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: #fff;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 20;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
direction: ltr !important;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
|
||||
svg {
|
||||
width: 70px;
|
||||
}
|
||||
|
||||
p {
|
||||
color: $theme;
|
||||
}
|
||||
}
|
||||
|
||||
.pre-loader {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: #fff;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 20;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
direction: ltr !important;
|
||||
|
||||
#preLoadserLogo {
|
||||
width: 100px;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
#loadingCircle {
|
||||
width: 60px;
|
||||
@include animation(loading 1.5s infinite);
|
||||
position: absolute;
|
||||
top: calc(50% - 30px);
|
||||
left: calc(50% - 30px);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
p {
|
||||
opacity: 0;
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
color: $theme;
|
||||
font-size: 30px;
|
||||
font-family: 'diodrum-bold';
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.tsWords {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+516
-108
@@ -27,63 +27,90 @@
|
||||
///////////////////////////// home page
|
||||
.home--page {
|
||||
|
||||
#slider {
|
||||
.slider-container {
|
||||
overflow: hidden;
|
||||
|
||||
.hero {
|
||||
.bg {
|
||||
//background-image: url("../img/home/hp-s1-i1.jpg");
|
||||
}
|
||||
#slider {
|
||||
overflow: hidden;
|
||||
|
||||
.txt--home {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
bottom: 20%;
|
||||
right: 200px;
|
||||
.hero {
|
||||
overflow: hidden;
|
||||
|
||||
&:lang(en) {
|
||||
right: auto;
|
||||
left: 200px;
|
||||
.bg {
|
||||
//background-image: url("../img/home/hp-s1-i1.jpg");
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #fff;
|
||||
.txt--home {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
bottom: 20%;
|
||||
right: 200px;
|
||||
padding: 0 15px;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 400px) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&:lang(en) {
|
||||
font-family: 'anton';
|
||||
right: auto;
|
||||
left: 200px;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #fff;
|
||||
|
||||
&:lang(en) {
|
||||
font-family: 'anton';
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.slick-dots {
|
||||
bottom: 80px;
|
||||
|
||||
li {
|
||||
button::before {
|
||||
font-size: 10px;
|
||||
color: $red;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.slick-arrow {
|
||||
color: $red;
|
||||
z-index: 5;
|
||||
|
||||
&.slick-prev {
|
||||
left: 80px;
|
||||
|
||||
@media (max-width: 992px) {
|
||||
left: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
color: #fff;
|
||||
&.slick-next {
|
||||
right: 80px;
|
||||
|
||||
@media (max-width: 992px) {
|
||||
right: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.slick-dots {
|
||||
bottom: 80px;
|
||||
|
||||
li {
|
||||
button::before {
|
||||
font-size: 10px;
|
||||
color: $red;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.slick-arrow {
|
||||
color: $red;
|
||||
z-index: 5;
|
||||
|
||||
&.slick-prev {
|
||||
left: 80px;
|
||||
}
|
||||
|
||||
&.slick-next {
|
||||
right: 80px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.s1 {
|
||||
@@ -104,6 +131,13 @@
|
||||
em {
|
||||
line-height: 80px;
|
||||
font-size: 30px;
|
||||
@extend %defaultTransition;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
em {
|
||||
color: $red;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -112,11 +146,18 @@
|
||||
}
|
||||
}
|
||||
|
||||
.s1-2 {
|
||||
.s2 {
|
||||
text-align: center;
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.section-bg {
|
||||
height: 450px;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.s2 {
|
||||
.s3 {
|
||||
overflow-x: hidden;
|
||||
|
||||
.panel {
|
||||
@@ -124,7 +165,7 @@
|
||||
}
|
||||
|
||||
.parts {
|
||||
width: 100%;
|
||||
//width: 100%;
|
||||
|
||||
&.p1 {
|
||||
width: 100%;
|
||||
@@ -153,9 +194,16 @@
|
||||
align-items: baseline;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.section-bg {
|
||||
height: 450px;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.s3 {
|
||||
.s4 {
|
||||
.panel {
|
||||
padding: 100px 100px 200px;
|
||||
|
||||
@@ -170,39 +218,59 @@
|
||||
margin-top: -100px;
|
||||
padding: 0 100px;
|
||||
|
||||
@media (max-width: 992px) {
|
||||
& {
|
||||
margin-top: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.parts {
|
||||
&.p2 {
|
||||
text-align: center;
|
||||
|
||||
.imgBox {
|
||||
.product {
|
||||
display: block;
|
||||
background: #fff;
|
||||
padding-bottom: 20px;
|
||||
@extend %defaultBoxShadow;
|
||||
margin-bottom: 30px;
|
||||
height: 100%;
|
||||
|
||||
p {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
@include boxShadow(none);
|
||||
.imgBox {
|
||||
@extend %productHoverAnim;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.section-bg {
|
||||
height: 450px;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.s4 {
|
||||
.s5 {
|
||||
position: relative;
|
||||
padding-bottom: 0;
|
||||
|
||||
.txt {
|
||||
max-width: 600px;
|
||||
height: 300px;
|
||||
//height: 300px;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
top: 50%;
|
||||
right: 200px;
|
||||
@include transform(translateY(-50%));
|
||||
|
||||
&:lang(en) {
|
||||
right: auto;
|
||||
@@ -227,59 +295,27 @@
|
||||
margin-top: $mt;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.s5 {
|
||||
.panel {
|
||||
background: $theme;
|
||||
margin-top: 0;
|
||||
@media (max-width: 992px) {
|
||||
//top: 50%;
|
||||
right: 0;
|
||||
//@include transform(translateY(-50%));
|
||||
max-width: 100%;
|
||||
//height: auto;
|
||||
padding: 0 15px;
|
||||
|
||||
.p1 {
|
||||
text-align: center;
|
||||
|
||||
.title {
|
||||
color: #fff;
|
||||
|
||||
&::after {
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
color: #fff;
|
||||
&:lang(en) {
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.form {
|
||||
margin-top: 50px;
|
||||
|
||||
input, textarea {
|
||||
border-bottom: 2px solid rgba(255, 255, 255, 0.5);
|
||||
color: #fff;
|
||||
|
||||
&::placeholder {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
@include boxShadow(0 0 5px rgba(#fff, 0.05));
|
||||
border: 2px solid rgba(#fff, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.watermark {
|
||||
text-align: center;
|
||||
padding-top: 100px;
|
||||
|
||||
svg {
|
||||
width: 100px;
|
||||
|
||||
path {
|
||||
fill: rgba(0, 0, 0, 0.1);
|
||||
@media (max-width: 1600px) {
|
||||
& {
|
||||
.section-bg {
|
||||
height: 550px;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -325,10 +361,31 @@
|
||||
color: $theme;
|
||||
font-family: 'diodrum-bold';
|
||||
font-size: 40px;
|
||||
|
||||
@media (max-width: 450px) {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
@media (max-width: 300px) {
|
||||
font-size: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 50px;
|
||||
direction: rtl;
|
||||
|
||||
&:lang(en) {
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
text-align: right;
|
||||
|
||||
&:lang(en) {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -343,6 +400,14 @@
|
||||
&.p4 {
|
||||
margin-bottom: 0;
|
||||
text-align: center;
|
||||
|
||||
@media (max-width: 992px) {
|
||||
text-align: right;
|
||||
|
||||
&:lang(en) {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -370,6 +435,10 @@
|
||||
&.active {
|
||||
border: 1px solid $red;
|
||||
background: $red;
|
||||
|
||||
span {
|
||||
color: $red;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
@@ -378,6 +447,15 @@
|
||||
bottom: -40px;
|
||||
left: 50%;
|
||||
@include transform(translateX(-50%));
|
||||
@extend %defaultTransition;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border: 1px solid $red;
|
||||
|
||||
span {
|
||||
color: $red;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -403,6 +481,10 @@
|
||||
justify-content: center;
|
||||
text-align: right;
|
||||
|
||||
&:lang(en) {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 30px;
|
||||
}
|
||||
@@ -451,6 +533,11 @@
|
||||
p {
|
||||
font-family: 'diodrum-bold';
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
text-align: center;
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.img {
|
||||
@@ -512,9 +599,14 @@
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 100px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
img {
|
||||
margin: 0 20px;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -533,6 +625,13 @@
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.section-bg {
|
||||
height: 450px;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -551,15 +650,25 @@
|
||||
.s2 {
|
||||
text-align: center;
|
||||
|
||||
|
||||
.product {
|
||||
display: block;
|
||||
background: #fff;
|
||||
padding-bottom: 30px;
|
||||
text-align: right;
|
||||
height: 100%;
|
||||
@extend %defaultBoxShadow;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
&:lang(en) {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.imgBox {
|
||||
@extend %productHoverAnim;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
h4 {
|
||||
@@ -569,12 +678,11 @@
|
||||
|
||||
p {
|
||||
padding: 0 15px;
|
||||
margin-top: 10px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.no-product {
|
||||
width: 100%;
|
||||
background: $red;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
@@ -652,6 +760,7 @@
|
||||
|
||||
///////////////////////////// products page
|
||||
.product-details--page {
|
||||
|
||||
.hero {
|
||||
.bg {
|
||||
background-image: url('../img/products/products-hero.jpg');
|
||||
@@ -663,13 +772,24 @@
|
||||
|
||||
.image-preview {
|
||||
background: $bg;
|
||||
width: 100%;
|
||||
//width: 100%;
|
||||
padding: 100px;
|
||||
@include transform(translateY(200px));
|
||||
@extend %defaultBoxShadow;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 50%;
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
width: 80%;
|
||||
}
|
||||
@media (max-width: 992px) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -768,6 +888,7 @@
|
||||
.files {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.file {
|
||||
text-align: center;
|
||||
@@ -874,6 +995,16 @@
|
||||
|
||||
|
||||
}
|
||||
|
||||
.no-project {
|
||||
p {
|
||||
background: $red;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
margin-top: 80px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.s2 {
|
||||
@@ -921,13 +1052,31 @@
|
||||
padding-bottom: 30px;
|
||||
margin-top: 0;
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
flex-wrap: wrap;
|
||||
padding-top: 15px !important;
|
||||
padding-bottom: 15px !important;
|
||||
}
|
||||
|
||||
.imgBox {
|
||||
flex-basis: 30%;
|
||||
|
||||
@media (max-width: 992px) {
|
||||
flex-basis: 100%;
|
||||
}
|
||||
|
||||
.img {
|
||||
width: 140%;
|
||||
position: relative;
|
||||
|
||||
@media (max-width: 992px) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
@@ -940,6 +1089,13 @@
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
&:lang(en) {
|
||||
&::before {
|
||||
right: auto;
|
||||
left: -15px;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@@ -952,14 +1108,27 @@
|
||||
flex-basis: 70%;
|
||||
padding: 0 15px;
|
||||
|
||||
@media (max-width: 992px) {
|
||||
flex-basis: 100%;
|
||||
}
|
||||
|
||||
.date-category {
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
margin-bottom: 30px;
|
||||
|
||||
&:lang(en) {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.category {
|
||||
margin-left: 20px;
|
||||
|
||||
&:lang(en) {
|
||||
margin-left: 0;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
}
|
||||
@@ -969,6 +1138,14 @@
|
||||
.btn {
|
||||
float: left;
|
||||
margin-top: 50px !important;
|
||||
|
||||
@media (max-width: 1400px) {
|
||||
margin-top: 40px !important;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
margin-top: 30px !important;
|
||||
}
|
||||
}
|
||||
|
||||
h4 {
|
||||
@@ -979,7 +1156,6 @@
|
||||
}
|
||||
|
||||
.no-post {
|
||||
width: 100%;
|
||||
background: $red;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
@@ -1036,6 +1212,52 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
direction: rtl;
|
||||
text-align: right;
|
||||
|
||||
&:lang(en) {
|
||||
direction: ltr;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
a {
|
||||
color: blue;
|
||||
}
|
||||
|
||||
p, a, span, b, ul, li, em, h1, h2, h3, h4, h5, h6, strong {
|
||||
font-family: 'sahel', sans-serif;
|
||||
direction: unset;
|
||||
text-align: unset;
|
||||
|
||||
&:lang(en) {
|
||||
font-family: 'diodrum';
|
||||
direction: unset;
|
||||
text-align: unset;
|
||||
}
|
||||
|
||||
&[dir="ltr"] {
|
||||
direction: ltr;
|
||||
text-align: left;
|
||||
|
||||
p, a, span, b, ul, li, em, h1, h2, h3, h4, h5, h6, strong {
|
||||
direction: ltr;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
&[dir="rtl"] {
|
||||
direction: rtl;
|
||||
text-align: right;
|
||||
|
||||
p, a, span, b, ul, li, em, h1, h2, h3, h4, h5, h6, strong {
|
||||
direction: rtl;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.s2 {
|
||||
@@ -1071,6 +1293,11 @@
|
||||
i {
|
||||
color: $red;
|
||||
margin-left: 5px;
|
||||
|
||||
&:lang(en) {
|
||||
margin-left: 0;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1094,6 +1321,11 @@
|
||||
display: inline-block;
|
||||
margin-left: 20px;
|
||||
|
||||
&:lang(en) {
|
||||
margin-left: 0;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
a {
|
||||
&:hover {
|
||||
i {
|
||||
@@ -1177,6 +1409,16 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.i1 {
|
||||
width: 100%;
|
||||
max-width: 325px;
|
||||
}
|
||||
|
||||
.i2 {
|
||||
width: 100%;
|
||||
max-width: 768px;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
@@ -1225,3 +1467,169 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
///////////////////////////// calculation page
|
||||
.calculation--page {
|
||||
.hero {
|
||||
.bg {
|
||||
background-image: url('../img/calculation/hero.jpg');
|
||||
}
|
||||
}
|
||||
|
||||
.s1 {
|
||||
|
||||
}
|
||||
|
||||
.s2 {
|
||||
.app {
|
||||
|
||||
.appTitle {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.appMethod {
|
||||
text-align: center;
|
||||
margin-bottom: 50px;
|
||||
background: $red;
|
||||
padding: 15px;
|
||||
|
||||
span {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.el-radio-button__orig-radio:checked + .el-radio-button__inner {
|
||||
background-color: $darkGray;
|
||||
border-color: $darkGray;
|
||||
@include boxShadow(-1px 0 0 0 $darkGray);
|
||||
}
|
||||
|
||||
.el-radio-button .el-radio-button__inner {
|
||||
color: $red;
|
||||
}
|
||||
|
||||
.el-radio-button.is-active .el-radio-button__inner {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.appLayout {
|
||||
padding: 55px;
|
||||
background: $red;
|
||||
height: 100%;
|
||||
@include boxSizing(border-box);
|
||||
|
||||
@media (max-width: 1400px) {
|
||||
padding: 55px 15px;
|
||||
}
|
||||
|
||||
span, p, b, * {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
input {
|
||||
color: $red;
|
||||
}
|
||||
|
||||
button {
|
||||
color: $red;
|
||||
|
||||
span {
|
||||
color: $red;
|
||||
}
|
||||
}
|
||||
|
||||
.layoutTitle {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.class {
|
||||
margin-bottom: 40px;
|
||||
|
||||
h4 {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.calculateBtn {
|
||||
text-align: center;
|
||||
|
||||
.btn {
|
||||
@include borderRadius(5px);
|
||||
|
||||
&:hover {
|
||||
background: $darkGray;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-radio {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.el-radio__input.is-checked .el-radio__inner {
|
||||
background-color: $darkGray;
|
||||
border-color: $darkGray;
|
||||
}
|
||||
|
||||
.el-form-item__label {
|
||||
@media (max-width: 600px) {
|
||||
float: none !important;
|
||||
|
||||
&:lang(fa) {
|
||||
float: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-form-item__content {
|
||||
margin-left: 200px !important;
|
||||
|
||||
@media (max-width: 600px) {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
&:lang(fa) {
|
||||
margin-left: 0 !important;
|
||||
margin-right: 200px !important;
|
||||
|
||||
@media (max-width: 600px) {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-input--suffix .el-input__inner {
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
&::placeholder {
|
||||
color: $darkGray;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-input {
|
||||
//width: auto;
|
||||
//
|
||||
//@media (max-width: 600px) {
|
||||
// width: 100%;
|
||||
//}
|
||||
}
|
||||
|
||||
.el-select {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.el-radio {
|
||||
margin-right: 20px;
|
||||
|
||||
&:lang(fa) {
|
||||
margin-right: 0;
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<section class="customers-communication">
|
||||
<section class="customers-communication anim-fadeIn">
|
||||
<div class="container clearfix">
|
||||
<div class="panel">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-6">
|
||||
<div class="col-12 col-lg-6 mb-5 mb-lg-0">
|
||||
<div class="imgBox imgBox-reverse">
|
||||
<div class="img">
|
||||
<div class="shape"></div>
|
||||
@@ -11,7 +11,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="col-12 col-lg-6">
|
||||
<h2 class="title title-shape">{{staticData.t1}}</h2>
|
||||
<p>{{staticData.t2}}</p>
|
||||
<nuxt-link :to="{name: 'lang-contact',params: {lang: $route.params.lang}}" class="btn btn-reverse-fill">{{staticData.link}}</nuxt-link>
|
||||
|
||||
+7
-4
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="hero">
|
||||
<div class="bg"></div>
|
||||
<div class="txt">
|
||||
<div class="hero anim-parallax-hero-container">
|
||||
<div class="bg anim-parallax-hero"></div>
|
||||
<div class="txt anim-parallax-hero-txt">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<h2 class="col">{{title}}</h2>
|
||||
@@ -12,13 +12,16 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {parallaxAnimation_hero} from '~/mixins/animations'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
title: {
|
||||
required: true,
|
||||
type: String
|
||||
}
|
||||
}
|
||||
},
|
||||
mixins: [parallaxAnimation_hero]
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
<template>
|
||||
<div class="page-load">
|
||||
<logo/>
|
||||
<p>Arak Rail Co.</p>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,47 @@
|
||||
<template>
|
||||
<div class="pre-loader">
|
||||
<logo id="preLoadserLogo"/>
|
||||
<loading id="loadingCircle"/>
|
||||
<p id="preLoaderTxt">Arak Rail Co.</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
export default {
|
||||
mounted() {
|
||||
////////////////////////////////// text split
|
||||
function amirTxtSplit(txtID) {
|
||||
var line = txtID.html(); // get the sentence
|
||||
var parts = line.split(' ');
|
||||
var word = '';
|
||||
var letterSpans = '';
|
||||
var wordSpans = '';
|
||||
var i = '';
|
||||
var j = '';
|
||||
for (i = 0; i < parts.length; i++) { // how many words
|
||||
letterSpans = "";
|
||||
word = parts[i];
|
||||
|
||||
for (j = 0; j < word.length; j++) { // how many letters in each words
|
||||
letterSpans += '<span class="tsLetters">' + word[j] + '</span>' // creat a span for each letter
|
||||
}
|
||||
wordSpans += '<span class="tsWords">' + letterSpans + ' </span>'
|
||||
}
|
||||
|
||||
txtID.html(wordSpans) // render the sentence
|
||||
}
|
||||
|
||||
amirTxtSplit($('#preLoaderTxt'))
|
||||
|
||||
////////////////////////////////// animation
|
||||
this.$gsap.timeline({delay: 3})
|
||||
.set($('#preLoaderTxt'), {opacity: 1})
|
||||
.to($('#loadingCircle'), {autoAlpha: 0, duration: 0.4})
|
||||
.fromTo($('#preLoadserLogo'), {scaleX: 0.7, opacity: 0}, {scaleX: 1, opacity: 1, duration: 0.3}, '+=0.2')
|
||||
.fromTo($('#preLoaderTxt .tsLetters'), {x: 10, opacity: 0}, {x: 0, opacity: 1, duration: 0.5, stagger: 0.05})
|
||||
.to($('#preLoadserLogo,#preLoaderTxt'), {opacity: 0, scale: 0.5, duration: 0.1}, '+=0.2')
|
||||
.to($('.pre-loader'), {autoAlpha: 0, duration: 0.3})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -2,7 +2,7 @@
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-8 links">
|
||||
<div class="col-12 col-md-8 mb-3 mb-md-0 links">
|
||||
<logo/>
|
||||
<div class="box">
|
||||
<p><b>{{staticData.t1}}</b> <span>{{staticData.address}}</span></p>
|
||||
@@ -14,7 +14,7 @@
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4 social">
|
||||
<div class="col-12 col-md-4 social">
|
||||
<ul class="social-links">
|
||||
<li>
|
||||
<a href="" target="_blank">
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<footer class="footer footer--home">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-8 links">
|
||||
<div class="xol-12 col-md-8 mb-5 mb-md-0 links">
|
||||
<div class="logo">
|
||||
<logo/>
|
||||
<span>{{staticData.t6}}</span>
|
||||
@@ -32,7 +32,7 @@
|
||||
<p class="blue"><b>{{staticData.t4}}</b> <a :href="'mailto:' + staticData.email">{{staticData.email}}</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4 map">
|
||||
<div class="xol-12 col-md-4 map">
|
||||
<img src="~/assets/img/footer-map.jpg" alt="">
|
||||
<p>{{staticData.t5}}</p>
|
||||
</div>
|
||||
|
||||
@@ -25,7 +25,8 @@
|
||||
</div>
|
||||
<div class="container-fluid">
|
||||
<nav class="row align-items-center">
|
||||
<div class="col-12 links">
|
||||
<!-- desktop -->
|
||||
<div class="col-12 d-none d-md-block links">
|
||||
<div class="container-fluid">
|
||||
<ul class="row justify-content-start">
|
||||
<nuxt-link :to="{name: 'lang',params: {lang: $route.params.lang}}" tag="li" exact class="">
|
||||
@@ -56,16 +57,16 @@
|
||||
<a>{{staticData.tech_info}}</a>
|
||||
<div class="drop-down">
|
||||
<ul>
|
||||
<li>
|
||||
<li :class="$route.name === 'lang-tech-gTech' ? 'sub-menu-active' : null">
|
||||
<nuxt-link :to="{name: 'lang-tech-gTech',params: {lang: $route.params.lang}}">{{staticData.ti_1}}</nuxt-link>
|
||||
</li>
|
||||
<li>
|
||||
<li :class="$route.name === 'lang-tech-gStandard' ? 'sub-menu-active' : null">
|
||||
<nuxt-link :to="{name: 'lang-tech-gStandard',params: {lang: $route.params.lang}}">{{staticData.ti_2}}</nuxt-link>
|
||||
</li>
|
||||
<li>
|
||||
<li :class="$route.name === 'lang-tech-gDesign' ? 'sub-menu-active' : null">
|
||||
<nuxt-link :to="{name: 'lang-tech-gDesign',params: {lang: $route.params.lang}}">{{staticData.ti_3}}</nuxt-link>
|
||||
</li>
|
||||
<li>
|
||||
<li :class="$route.name === 'lang-tech-gUsage' ? 'sub-menu-active' : null">
|
||||
<nuxt-link :to="{name: 'lang-tech-gUsage',params: {lang: $route.params.lang}}">{{staticData.ti_4}}</nuxt-link>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -80,6 +81,26 @@
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- mobile -->
|
||||
<div class="col-12 d-md-none links mobile">
|
||||
<div class="container-fluid">
|
||||
<ul class="row">
|
||||
<li class="col">
|
||||
<nuxt-link :to="{name: 'lang',params: {lang: $route.params.lang}}" exact class="logo">
|
||||
<Logo/>
|
||||
</nuxt-link>
|
||||
</li>
|
||||
<li class="col menu">
|
||||
<div id="menuBtn" @click="offCanvas">
|
||||
<div class="bars b1"></div>
|
||||
<div class="bars b2"></div>
|
||||
<div class="bars b3"></div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
@@ -99,6 +120,19 @@
|
||||
computed: {
|
||||
staticData() {
|
||||
return this.$store.state.staticData.header[this.$route.params.lang]
|
||||
},
|
||||
offCanvasLiTL() {
|
||||
if (process.server) return null
|
||||
else return this.$gsap.timeline({delay: 0.3, paused: true})
|
||||
.fromTo($('.offCanvas ul li'), {
|
||||
x: this.$route.params.lang === 'fa' ? 10 : -10,
|
||||
opacity: 0
|
||||
}, {
|
||||
x: 0,
|
||||
opacity: 1,
|
||||
duration: 0.4,
|
||||
stagger: 0.03
|
||||
})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@@ -108,21 +142,35 @@
|
||||
tech_info() {
|
||||
const el = $('.tech_info .drop-down')
|
||||
if (el.height() === 0) {
|
||||
el.css({height: $('.tech_info .drop-down ul').height() + 10})
|
||||
el.css({height: $('.tech_info .drop-down ul').height()})
|
||||
} else {
|
||||
el.css({height: 0})
|
||||
}
|
||||
},
|
||||
offCanvas() {
|
||||
if ($('.offCanvas').hasClass('active')) this.offCanvasLiTL.reverse()
|
||||
else this.offCanvasLiTL.play()
|
||||
$('#menuBtn').toggleClass('close')
|
||||
$('.offCanvas').toggleClass('active')
|
||||
$('body').toggleClass('offCanvas-active')
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
/////////////////////////////////////////////////////////// small header
|
||||
$(window).scroll(function (e) {
|
||||
if ($(window).scrollTop() > 50) {
|
||||
$('.header').addClass('header-small')
|
||||
$('.header,.offCanvas').addClass('header-small')
|
||||
} else {
|
||||
$('.header').removeClass('header-small')
|
||||
$('.header,.offCanvas').removeClass('header-small')
|
||||
}
|
||||
})
|
||||
/////////////////////////////////// offCanvas menu links
|
||||
$('.offCanvas ul li').click(() => {
|
||||
this.offCanvas()
|
||||
})
|
||||
$('.header .lang-bar a').click(() => {
|
||||
if ($('.offCanvas').hasClass('active')) this.offCanvas()
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -16,6 +16,8 @@
|
||||
|
||||
<admin-aside-item icon="fas fa-bags-shopping" :link="{name: 'admin-projects'}" text="پروژه ها"/>
|
||||
|
||||
<admin-aside-item icon="fas fa-history" :link="{name: 'admin-history'}" text="تاریخچه"/>
|
||||
|
||||
<admin-aside-item icon="fas fa-envelope" :badge="$store.state.admin.unread" :link="{name: 'admin-messages'}" text="پیام های ارتباط با ما"/>
|
||||
|
||||
<admin-aside-item icon="fas fa-file-pdf" :link="{name: 'admin-catalog'}" text="آپلود فایل کاتالوگ"/>
|
||||
|
||||
@@ -0,0 +1,35 @@
|
||||
<template>
|
||||
<svg style="display: block;" viewBox="0 0 107 107" xmlns="http://www.w3.org/2000/svg">
|
||||
<g>
|
||||
<path fill="#595959" opacity="1.00"
|
||||
d=" M 57.60 7.27 C 63.10 5.30 69.36 10.20 69.00 15.97 C 69.02 20.95 64.07 25.15 59.17 24.42 C 54.95 23.97 51.44 20.13 51.37 15.89 C 51.21 12.05 53.97 8.42 57.60 7.27 Z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path fill="#757575" opacity="1.00"
|
||||
d=" M 32.51 12.32 C 35.31 11.68 38.42 12.62 40.30 14.81 C 42.72 17.47 43.08 21.77 41.03 24.74 C 39.24 27.54 35.62 28.99 32.40 28.15 C 28.79 27.30 25.99 23.78 26.13 20.06 C 26.15 16.41 28.94 13.04 32.51 12.32 Z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path fill="#515151" opacity="1.00"
|
||||
d=" M 81.46 19.45 C 85.25 18.77 89.29 20.74 91.15 24.10 C 93.41 27.94 92.51 33.32 89.01 36.11 C 86.05 38.64 81.52 38.98 78.19 36.99 C 74.69 35.03 72.76 30.68 73.68 26.77 C 74.49 23.06 77.69 20.01 81.46 19.45 Z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path fill="#8e8e8e" opacity="1.00"
|
||||
d=" M 15.52 33.13 C 19.14 32.04 23.33 34.20 24.49 37.81 C 26.07 41.76 23.47 46.54 19.42 47.64 C 15.33 48.93 10.61 45.90 9.96 41.69 C 9.27 37.96 11.88 34.07 15.52 33.13 Z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path fill="#9a9a9a" opacity="1.00"
|
||||
d=" M 15.54 60.09 C 18.94 58.93 22.86 61.16 23.88 64.54 C 25.20 68.48 22.18 73.18 18.02 73.50 C 14.29 73.94 10.81 70.63 10.72 66.95 C 10.45 63.88 12.62 60.94 15.54 60.09 Z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path fill="#e7e7e7" opacity="1.00" d=" M 80.58 74.26 C 83.19 73.04 87.16 74.12 87.70 77.26 C 88.34 80.85 84.12 84.36 80.81 82.39 C 77.55 80.97 76.78 75.55 80.58 74.26 Z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path fill="#bebebe" opacity="1.00"
|
||||
d=" M 31.57 81.23 C 34.38 79.87 38.21 80.85 39.73 83.65 C 41.40 86.61 40.23 90.88 37.05 92.30 C 34.02 93.88 29.83 92.47 28.56 89.25 C 27.22 86.33 28.60 82.51 31.57 81.23 Z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path fill="#cecece" opacity="1.00"
|
||||
d=" M 58.43 86.21 C 61.03 85.24 64.33 86.66 65.19 89.36 C 66.28 92.49 64.08 96.35 60.75 96.80 C 58.14 97.19 55.50 95.28 54.90 92.74 C 54.15 90.08 55.81 87.06 58.43 86.21 Z"/>
|
||||
</g>
|
||||
</svg>
|
||||
</template>
|
||||
@@ -0,0 +1,63 @@
|
||||
<template>
|
||||
<div class="offCanvas">
|
||||
<div class="links">
|
||||
<ul>
|
||||
<li class="title">
|
||||
<h2>{{staticData.mainLinks}}</h2>
|
||||
</li>
|
||||
<nuxt-link :to="{name: 'lang',params: {lang: $route.params.lang}}" tag="li" exact class="">
|
||||
<a>{{staticData.home}}</a>
|
||||
</nuxt-link>
|
||||
<nuxt-link :to="{name: 'lang-about',params: {lang: $route.params.lang}}" tag="li" exact class="">
|
||||
<a>{{staticData.about}}</a>
|
||||
</nuxt-link>
|
||||
<nuxt-link :to="{name: 'lang-services',params: {lang: $route.params.lang}}" tag="li" exact class="">
|
||||
<a>{{staticData.services}}</a>
|
||||
</nuxt-link>
|
||||
<nuxt-link :to="{name: 'lang-products',params: {lang: $route.params.lang}}" tag="li" class="">
|
||||
<a>{{staticData.products}}</a>
|
||||
</nuxt-link>
|
||||
<nuxt-link :to="{name: 'lang-projects',params: {lang: $route.params.lang}}" tag="li" exact class="">
|
||||
<a>{{staticData.projects}}</a>
|
||||
</nuxt-link>
|
||||
<nuxt-link :to="{name: 'lang-blog',params: {lang: $route.params.lang}}" tag="li" class="">
|
||||
<a>{{staticData.blog}}</a>
|
||||
</nuxt-link>
|
||||
<nuxt-link :to="{name: 'lang-contact',params: {lang: $route.params.lang}}" tag="li" exact class="">
|
||||
<a>{{staticData.contact}}</a>
|
||||
</nuxt-link>
|
||||
<li class="title t2">
|
||||
<h2>{{staticData.techLinks}}</h2>
|
||||
</li>
|
||||
<!-- technical information -->
|
||||
<nuxt-link :to="{name: 'lang-tech-gTech',params: {lang: $route.params.lang}}" tag="li">
|
||||
<a>{{staticData.ti_1}}</a>
|
||||
</nuxt-link>
|
||||
|
||||
<nuxt-link :to="{name: 'lang-tech-gStandard',params: {lang: $route.params.lang}}" tag="li">
|
||||
<a>{{staticData.ti_2}}</a>
|
||||
</nuxt-link>
|
||||
|
||||
<nuxt-link :to="{name: 'lang-tech-gDesign',params: {lang: $route.params.lang}}" tag="li">
|
||||
<a>{{staticData.ti_3}}</a>
|
||||
</nuxt-link>
|
||||
|
||||
<nuxt-link :to="{name: 'lang-tech-gUsage',params: {lang: $route.params.lang}}" tag="li">
|
||||
<a>{{staticData.ti_4}}</a>
|
||||
</nuxt-link>
|
||||
<!-- technical information -->
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
export default {
|
||||
computed: {
|
||||
staticData() {
|
||||
return this.$store.state.staticData.header[this.$route.params.lang]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
+22
-2
@@ -2,8 +2,11 @@
|
||||
<div>
|
||||
<SiteHeader/>
|
||||
<nuxt/>
|
||||
<SiteFooterHomePage v-if="this.$route.name === 'lang'"></SiteFooterHomePage>
|
||||
<SiteFooterGlobal v-else></SiteFooterGlobal>
|
||||
<SiteFooterHomePage v-if="this.$route.name === 'lang'"/>
|
||||
<SiteFooterGlobal v-else/>
|
||||
<off-canvas/>
|
||||
<page-load/>
|
||||
<pre-loader/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -11,6 +14,23 @@
|
||||
<script>
|
||||
export default {
|
||||
mounted() {
|
||||
////////////////////////////////////////// global router guards
|
||||
this.$router.beforeEach((to, from, next) => {
|
||||
this.$gsap.timeline({
|
||||
onComplete: () => {
|
||||
next()
|
||||
}
|
||||
})
|
||||
.to($('.page-load'), {autoAlpha: 1, duration: 0.3})
|
||||
.fromTo($('.page-load svg'), {opacity: 0, scale: 1, y: 10}, {opacity: 1, y: 0, duration: 0.15})
|
||||
.fromTo($('.page-load p'), {opacity: 0, scale: 1, y: 10}, {opacity: 1, y: 0, duration: 0.15})
|
||||
})
|
||||
|
||||
this.$router.afterEach((to, from) => {
|
||||
this.$gsap.timeline({delay: 0.3})
|
||||
.to($('.page-load p,.page-load svg'), {opacity: 0, scale: 0.5, duration: 0.15})
|
||||
.to($('.page-load'), {autoAlpha: 0, duration: 0.5})
|
||||
})
|
||||
},
|
||||
head() {
|
||||
return {
|
||||
|
||||
@@ -0,0 +1,77 @@
|
||||
export const fadeInAnimation = {
|
||||
mounted() {
|
||||
/////////////////////////////////////// class 1 animation
|
||||
const fadeInElements = $('.anim-fadeIn')
|
||||
|
||||
Object.keys(fadeInElements).forEach((item, index) => {
|
||||
if (index < fadeInElements.length) {
|
||||
this.$gsap.timeline({
|
||||
scrollTrigger: {
|
||||
trigger: $(fadeInElements[item]),
|
||||
start: 'top 90%'
|
||||
}
|
||||
})
|
||||
.from($(fadeInElements[item]), {y: 10, opacity: 0, duration: 0.7})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export const stretchAnimation = {
|
||||
mounted() {
|
||||
/////////////////////////////////////// class 1 animation
|
||||
const stretchElements = $('.anim-stretch')
|
||||
|
||||
Object.keys(stretchElements).forEach((item, index) => {
|
||||
if (index < stretchElements.length) {
|
||||
this.$gsap.timeline({
|
||||
scrollTrigger: {
|
||||
trigger: $(stretchElements[item]),
|
||||
start: 'top 80%'
|
||||
}
|
||||
})
|
||||
.from($(stretchElements[item]), {scaleY: 1.2, duration: 0.3})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export const parallaxAnimation_hero = {
|
||||
mounted() {
|
||||
/////////////////////////////////////// parallax animation
|
||||
this.$gsap.timeline({
|
||||
scrollTrigger: {
|
||||
trigger: $('.anim-parallax-hero'),
|
||||
start: 'top 0%',
|
||||
scrub: true
|
||||
}
|
||||
})
|
||||
.to($('.anim-parallax-hero'), {y: '40%', duration: 1})
|
||||
.to($('.anim-parallax-hero-txt'), {y: '25%', duration: 1}, 0)
|
||||
.to($('.anim-parallax-hero-container'), {y: '15%', duration: 1}, 0)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export const parallaxAnimation = {
|
||||
mounted() {
|
||||
/////////////////////////////////////// parallax animation
|
||||
const parallaxElements = $('.anim-parallax')
|
||||
|
||||
Object.keys(parallaxElements).forEach((item, index) => {
|
||||
if (index < parallaxElements.length) {
|
||||
this.$gsap.timeline({
|
||||
scrollTrigger: {
|
||||
trigger: $(parallaxElements[item]),
|
||||
start: 'top 50%',
|
||||
end: 'bottom 0%',
|
||||
scrub: true
|
||||
}
|
||||
})
|
||||
.to($(parallaxElements[item]), {y: '30%', duration: 1})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
+5
-3
@@ -6,7 +6,8 @@ export default {
|
||||
meta: [
|
||||
{charset: 'utf-8'},
|
||||
{name: 'viewport', content: 'width=device-width, initial-scale=1'},
|
||||
{hid: 'description', name: 'description', content: ''}
|
||||
{hid: 'description', name: 'description', content: ''},
|
||||
{name: 'theme-color', content: '#303030'},
|
||||
],
|
||||
link: [
|
||||
{rel: 'icon', type: 'image/x-icon', href: '/favicon.png'}
|
||||
@@ -21,7 +22,8 @@ export default {
|
||||
'slick-carousel/slick/slick.css',
|
||||
'slick-carousel/slick/slick-theme.css',
|
||||
'element-ui/lib/theme-chalk/index.css',
|
||||
'~/assets/css/bootstrap-grid-customized.css',
|
||||
'~/assets/css/bootstrap-grid.css',
|
||||
'~/assets/css/reset-css.css',
|
||||
'~/assets/css/fontawesome/css/all.min.css',
|
||||
'~/assets/sass/main.scss'
|
||||
],
|
||||
@@ -31,7 +33,7 @@ export default {
|
||||
'@/plugins/element-ui',
|
||||
'@/plugins/ckEditor.client',
|
||||
'@/plugins/datePicker.client',
|
||||
'@/plugins/gsap'
|
||||
'@/plugins/gsap.client'
|
||||
],
|
||||
|
||||
// Auto import components (https://go.nuxtjs.dev/config-components)
|
||||
|
||||
+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])
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
import Vue from 'vue'
|
||||
import gsap from 'gsap'
|
||||
import scrollToPlugin from 'gsap/ScrollToPlugin'
|
||||
import scrollTrigger from 'gsap/ScrollTrigger'
|
||||
|
||||
gsap.registerPlugin(scrollToPlugin,scrollTrigger)
|
||||
Vue.prototype.$gsap = gsap
|
||||
@@ -1,4 +0,0 @@
|
||||
import Vue from 'vue'
|
||||
import gsap from 'gsap'
|
||||
|
||||
Vue.prototype.$gsap = gsap
|
||||
@@ -1,4 +0,0 @@
|
||||
import Vue from 'vue'
|
||||
import vueScrollMagic from 'vue-scrollmagic'
|
||||
|
||||
Vue.use(vueScrollMagic)
|
||||
+2
-8
@@ -1,9 +1,3 @@
|
||||
export const state = () => ({
|
||||
navigation_guard: true
|
||||
})
|
||||
export const state = () => ({})
|
||||
|
||||
export const mutations = {
|
||||
navigationGuards(state, data) {
|
||||
state.navigation_guard = data
|
||||
}
|
||||
}
|
||||
export const mutations = {}
|
||||
|
||||
+40
-74
@@ -13,7 +13,9 @@ export const state = () => ({
|
||||
ti_2: 'استاندارد گریتینگ',
|
||||
ti_3: 'طراحی گریتینگ',
|
||||
ti_4: 'کاربرد گریتینگ',
|
||||
catalog: 'دانلود کاتالوگ'
|
||||
catalog: 'دانلود کاتالوگ',
|
||||
mainLinks: 'لینک های اصلی',
|
||||
techLinks: 'اطلاعات فنی'
|
||||
},
|
||||
en: {
|
||||
home: 'Home',
|
||||
@@ -28,7 +30,9 @@ export const state = () => ({
|
||||
ti_2: 'Grating Standard',
|
||||
ti_3: 'Grating Design',
|
||||
ti_4: 'Grating Usage',
|
||||
catalog: 'Download Catalog'
|
||||
catalog: 'Download Catalog',
|
||||
mainLinks: 'Main Links',
|
||||
techLinks: 'Technical Information'
|
||||
}
|
||||
},
|
||||
footer: {
|
||||
@@ -72,10 +76,7 @@ export const state = () => ({
|
||||
},
|
||||
homePage: {
|
||||
fa: {
|
||||
hero: {
|
||||
t1: 'شرکت اراک ریل در سال 1991 تاسیس شد',
|
||||
t2: 'ساخت انواع محصولات ریلی و توری وارداتی. در سال 2006 با توجه به فرایند بین المللی جوشکاری ، پانل های گریتینگ استیل ساخت اراک'
|
||||
},
|
||||
title: 'صفحه اصلی | اراک ریل',
|
||||
s1: {
|
||||
title: 'درباره ما',
|
||||
caption: 'شرکت اراک ریل در تاریخ ۱۳۷۰/۰۳/۲۹ با هدف تولید بخشی از قطعات و مجموعه های وارداتی مورد مصرف در صنایع ایران به خصوص راه آهن ، با مجوز وزارت صنایع ، تاسیس و در مساحت حدود ۶۰۰۰ متر مربع و با بیش از ۱۵۰۰ متر مربع کارگاه با مجموعه ای از امکانات ماشین کاری ، برش کاری ، پرس کاری و جوش کاری راه اندازی شد .شرکت اراک ریل مفتخر است که از سال ۱۳۸۵ برای اولین بار در کشور ….',
|
||||
@@ -126,15 +127,7 @@ export const state = () => ({
|
||||
}
|
||||
},
|
||||
en: {
|
||||
hero: {
|
||||
t1: 'Arak Rail Co.\n' +
|
||||
'was established in 1991 for',
|
||||
t2: 'manufacturing ofsome import rail products & gratings. In 2006 Arak Rail manufacturedsteel grating panels according to the International Welding Process.',
|
||||
link: {
|
||||
txt: 'Contact Us',
|
||||
url: 'lang-contact'
|
||||
}
|
||||
},
|
||||
title: 'Home Page | Arak Rail',
|
||||
s1: {
|
||||
title: 'About Us',
|
||||
caption: 'Arak Rail Company was established on 03/29/1370 with the aim of producing some of the imported parts and assemblies used in Iranian industries, especially railways, with the permission of the Ministry of Industry, and with an area of about 6,000 square meters and more than 1,500 square meters. The workshop was launched with a set of machining, cutting, pressing and welding facilities. Arak Rail Company is proud to be the first in the country since 2006.',
|
||||
@@ -376,32 +369,8 @@ export const state = () => ({
|
||||
},
|
||||
s2: {
|
||||
t1: 'نوع محصولی را که می خواهید ببینید انتخاب کنید',
|
||||
filters: [
|
||||
{
|
||||
txt: 'همه',
|
||||
key: 'all'
|
||||
},
|
||||
{
|
||||
txt: 'گریتینگ با فشار قفل شده',
|
||||
key: 'plg'
|
||||
},
|
||||
{
|
||||
txt: 'پله',
|
||||
key: 'stair'
|
||||
},
|
||||
{
|
||||
txt: 'گریتینگ الکترو فورژ',
|
||||
key: 'eg'
|
||||
},
|
||||
{
|
||||
txt: 'پنل گریتینگ',
|
||||
key: 'gp'
|
||||
},
|
||||
{
|
||||
txt: 'گیره',
|
||||
key: 'clamp'
|
||||
}
|
||||
]
|
||||
t2: 'هیچ محصولی در این دسته بندی موجود نمیباشد.',
|
||||
t3: 'همه'
|
||||
},
|
||||
s3: {
|
||||
t1: 'شرکت اراک ریل',
|
||||
@@ -418,32 +387,8 @@ export const state = () => ({
|
||||
},
|
||||
s2: {
|
||||
t1: 'Select the type of product you want to see',
|
||||
filters: [
|
||||
{
|
||||
txt: 'All',
|
||||
key: 'all'
|
||||
},
|
||||
{
|
||||
txt: 'Pressure-locked Grating',
|
||||
key: 'plg'
|
||||
},
|
||||
{
|
||||
txt: 'Stair',
|
||||
key: 'stair'
|
||||
},
|
||||
{
|
||||
txt: 'Electroforged Grating',
|
||||
key: 'eg'
|
||||
},
|
||||
{
|
||||
txt: 'Grating Panel',
|
||||
key: 'gp'
|
||||
},
|
||||
{
|
||||
txt: 'Clamp',
|
||||
key: 'clamp'
|
||||
}
|
||||
]
|
||||
t2: 'There are no products in this category.',
|
||||
t3: 'All'
|
||||
},
|
||||
s3: {
|
||||
t1: 'ArakRail Company',
|
||||
@@ -455,10 +400,22 @@ export const state = () => ({
|
||||
},
|
||||
products_details: {
|
||||
fa: {
|
||||
hero: 'جزعیات محصول'
|
||||
hero: 'جزعیات محصول',
|
||||
t1: 'جزییات بیشتر',
|
||||
t2: 'نمایش گرافیکی مشخصات',
|
||||
t3: 'در شماتیک زیر مشخصات اولیه گریتینگ نمایش داده شده است',
|
||||
t4: 'فایل های قابل دانلود',
|
||||
t5: 'دانلود',
|
||||
t6: 'مشاهده تمام محصولات'
|
||||
},
|
||||
en: {
|
||||
hero: 'Product Details'
|
||||
hero: 'Product Details',
|
||||
t1: 'More Details',
|
||||
t2: 'Graphic display of specifications',
|
||||
t3: 'The schematic below shows the basic specifications of the grating',
|
||||
t4: 'Downloadable files',
|
||||
t5: 'Download',
|
||||
t6: 'View All Products'
|
||||
}
|
||||
},
|
||||
projects: {
|
||||
@@ -469,7 +426,8 @@ export const state = () => ({
|
||||
t3: 'طراحی و تولید گریتینگ به روشهای الکتروفورج، پرسی و جوش GMAW',
|
||||
t4: 'با ما در ارتباط باشید',
|
||||
t5: 'تماس با ما',
|
||||
t6: 'تاربخ اجرا: '
|
||||
t6: 'تاریخ اجرا: ',
|
||||
t7: 'هیچ پروژه ای موجود نیست.'
|
||||
},
|
||||
en: {
|
||||
hero: 'Projects',
|
||||
@@ -478,7 +436,8 @@ export const state = () => ({
|
||||
t3: 'Design and production of grating by electrophoresis, pressing and welding methods GMAW',
|
||||
t4: 'Get in touch with us',
|
||||
t5: 'Contact Us',
|
||||
t6: 'Execution date: '
|
||||
t6: 'Execution date: ',
|
||||
t7: 'No projects available.'
|
||||
}
|
||||
},
|
||||
blog: {
|
||||
@@ -488,7 +447,9 @@ export const state = () => ({
|
||||
t2: 'ما می خواهیم اطلاعات بیشتری در مورد ما بدانید ، بنابراین ما اخبار ، رویدادها یا تحولات گریتینگ اراک ریل و صنعتی را که ما به آن تعلق داریم برای شما ارسال می کنیم ،بنابراین شما می دانید که چگونه ما در جای خود قرار گرفته ایم.',
|
||||
t3: 'فیلتر بر اساس دسته بندی ها',
|
||||
t4: 'دسته بندی /',
|
||||
t5: 'بیشتر'
|
||||
t5: 'بیشتر',
|
||||
t6: 'هیچ پستی در این دسته بندی موجود نمیباشد.',
|
||||
t7: 'همه'
|
||||
},
|
||||
en: {
|
||||
hero: 'Blog',
|
||||
@@ -496,7 +457,9 @@ export const state = () => ({
|
||||
t2: 'We want you to know more about us, so we will send you the news, events or developments of Arak Rail and Industrial Grating to which we belong, so you know how we are in place.',
|
||||
t3: 'Filter By Categories',
|
||||
t4: 'Category /',
|
||||
t5: 'More'
|
||||
t5: 'More',
|
||||
t6: 'There are no posts in this category.',
|
||||
t7: 'All'
|
||||
}
|
||||
},
|
||||
blog_details: {
|
||||
@@ -730,7 +693,10 @@ export const state = () => ({
|
||||
t7: 'Products'
|
||||
}
|
||||
},
|
||||
catalog_link: '',
|
||||
calculation: {
|
||||
fa: {},
|
||||
en: {}
|
||||
},
|
||||
calc_app_link: ''
|
||||
})
|
||||
|
||||
|
||||
Reference in New Issue
Block a user