add pwa app
This commit is contained in:
Amir Mohamadi
@@ -316,26 +316,23 @@ module.exports.calculate = [
|
|||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
///////// grating weight
|
///////// grating weight
|
||||||
const gratingLength = 1000
|
const gratingLength = 1000
|
||||||
const gratingWidth = 1000
|
const gratingWidth = 1000
|
||||||
const frameThickness = 5
|
const frameThickness = 5
|
||||||
const forgeCrossBarThickness = 6
|
const forgeCrossBarThickness = 6
|
||||||
|
|
||||||
///////////////// api
|
///////// weight formula
|
||||||
|
|
||||||
|
|
||||||
function forgeWeight() {
|
function forgeWeight() {
|
||||||
// formula variables
|
// formula variables
|
||||||
const B2 = gratingLength
|
const B2 = Number(gratingLength)
|
||||||
const B3 = gratingWidth
|
const B3 = Number(gratingWidth)
|
||||||
const B4 = bearingBarHeight
|
const B4 = Number(bearingBarHeight)
|
||||||
const B5 = bearingBarThickness
|
const B5 = Number(bearingBarThickness)
|
||||||
const B6 = forgeCrossBarThickness
|
const B6 = Number(forgeCrossBarThickness)
|
||||||
const B7 = bearingBarPitch
|
const B7 = Number(bearingBarPitch)
|
||||||
const B8 = crossBarPitch
|
const B8 = Number(crossBarPitch)
|
||||||
const B9 = frameThickness
|
const B9 = Number(frameThickness)
|
||||||
//
|
//
|
||||||
const E2 = B2 - 2 * B9
|
const E2 = B2 - 2 * B9
|
||||||
const E3 = B3
|
const E3 = B3
|
||||||
@@ -358,7 +355,7 @@ module.exports.calculate = [
|
|||||||
const K3 = E3 * (2 * (B4 + B5)) * H3 / 1000000
|
const K3 = E3 * (2 * (B4 + B5)) * H3 / 1000000
|
||||||
const K4 = E4 * (2 * (B4 + B5)) * H4 / 1000000
|
const K4 = E4 * (2 * (B4 + B5)) * H4 / 1000000
|
||||||
const K5 = E5 * B6 * B6 * H5 / 1000000
|
const K5 = E5 * B6 * B6 * H5 / 1000000
|
||||||
const K6 = K2 + K5
|
const K6 = K2 + K3 + K4 + K5
|
||||||
const K7 = 80
|
const K7 = 80
|
||||||
const K8 = K6 * K7 / 1000000 * 7140
|
const K8 = K6 * K7 / 1000000 * 7140
|
||||||
const K9 = K8 / E6 * 100
|
const K9 = K8 / E6 * 100
|
||||||
@@ -368,110 +365,67 @@ module.exports.calculate = [
|
|||||||
//
|
//
|
||||||
const H10 = E8 / ((B2 * B3) / 1000000)
|
const H10 = E8 / ((B2 * B3) / 1000000)
|
||||||
|
|
||||||
|
|
||||||
|
// ///////// debug variables
|
||||||
|
// // B
|
||||||
|
// console.log('************ B Column ************')
|
||||||
|
// console.log('B2 = ', B2)
|
||||||
|
// console.log('B3 = ', B3)
|
||||||
|
// console.log('B4 = ', B4)
|
||||||
|
// console.log('B5 = ', B5)
|
||||||
|
// console.log('B6 = ', B6)
|
||||||
|
// console.log('B7 = ', B7)
|
||||||
|
// console.log('B8 = ', B8)
|
||||||
|
// console.log('B9 = ', B9)
|
||||||
|
// // E
|
||||||
|
// console.log('************ E Column ************')
|
||||||
|
// console.log('E2 = ', E2)
|
||||||
|
// console.log('E3 = ', E3)
|
||||||
|
// console.log('E4 = ', E4)
|
||||||
|
// console.log('E5 = ', E5)
|
||||||
|
// console.log('E6 = ', E6)
|
||||||
|
// console.log('E7 = ', E7)
|
||||||
|
// console.log('E8 = ', E8)
|
||||||
|
// // H
|
||||||
|
// console.log('************ H Column ************')
|
||||||
|
// console.log('H2 = ', H2)
|
||||||
|
// console.log('H3 = ', H3)
|
||||||
|
// console.log('H4 = ', H4)
|
||||||
|
// console.log('H5 = ', H5)
|
||||||
|
// console.log('H6 = ', H6)
|
||||||
|
// console.log('H7 = ', H7)
|
||||||
|
// console.log('H8 = ', H8)
|
||||||
|
// console.log('H9 = ', H9)
|
||||||
|
// console.log('H10 = ', H10)
|
||||||
|
// // K
|
||||||
|
// console.log('************ K Column ************')
|
||||||
|
// console.log('K2 = ', K2)
|
||||||
|
// console.log('K3 = ', K3)
|
||||||
|
// console.log('K4 = ', K4)
|
||||||
|
// console.log('K5 = ', K5)
|
||||||
|
// console.log('K6 = ', K6)
|
||||||
|
// console.log('K7 = ', K7)
|
||||||
|
// console.log('K8 = ', K8)
|
||||||
|
// console.log('K9 = ', K9)
|
||||||
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
normal: Number(E6.toFixed(2)),
|
normal: Number(E6.toFixed(2)),
|
||||||
galvanized: Number(E8.toFixed(2))
|
galvanized: Number(E8.toFixed(2))
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// function forgeWeight_rounded() {
|
|
||||||
// // formula variables
|
|
||||||
// const B2 = gratingLength
|
|
||||||
// const B3 = gratingWidth
|
|
||||||
// const B4 = bearingBarHeight
|
|
||||||
// const B5 = bearingBarThickness
|
|
||||||
// const B6 = forgeCrossBarThickness
|
|
||||||
// const B7 = bearingBarPitch
|
|
||||||
// const B8 = crossBarPitch
|
|
||||||
// const B9 = frameThickness
|
|
||||||
// //
|
|
||||||
// const E2 = Math.round(B2 - 2 * B9)
|
|
||||||
// const E3 = B3
|
|
||||||
// const E4 = Math.round(B2 - 2 * B9)
|
|
||||||
// const E5 = B3
|
|
||||||
// //
|
|
||||||
// const H2 = 0
|
|
||||||
// const H3 = 2
|
|
||||||
// const H4 = Math.round(E5 / B7 + 1)
|
|
||||||
// const H5 = Math.round(E4 / B8 - 1)
|
|
||||||
// const H6 = Number((E4 * B4 * B5 / 1000000 * 7.85 * H4).toFixed(2))
|
|
||||||
// const H7 = Number(((E5 / 1000) * B6 * B6 * 7.85 / 1000 * H5).toFixed(2))
|
|
||||||
// const H8 = Number((E2 * B9 * B4 / 1000000 * H2 * 7.85 + E3 * B4 * B9 / 1000000 * 7.85 * H3).toFixed(2))
|
|
||||||
// const H9 = Math.round((1750 * (25.25 / (B4 * B5))))
|
|
||||||
//
|
|
||||||
// //
|
|
||||||
// const E6 = Number((H6 + H7 + H8).toFixed(2))
|
|
||||||
// //
|
|
||||||
// const K2 = Number((E2 * (2 * (B4 + B5)) * H2 / 1000000).toFixed(2))
|
|
||||||
// const K3 = Number((E3 * (2 * (B4 + B5)) * H3 / 1000000).toFixed(2))
|
|
||||||
// const K4 = Number((E4 * (2 * (B4 + B5)) * H4 / 1000000).toFixed(2))
|
|
||||||
// const K5 = Number((E5 * B6 * B6 * H5 / 1000000).toFixed(2))
|
|
||||||
// const K6 = Number((K2 + K5).toFixed(2))
|
|
||||||
// const K7 = 80
|
|
||||||
// const K8 = Number((K6 * K7 / 1000000 * 7140).toFixed(2))
|
|
||||||
// const K9 = Number((K8 / E6 * 100).toFixed(2))
|
|
||||||
// //
|
|
||||||
// const E7 = Number((K9 / 100 * E6).toFixed(2))
|
|
||||||
// const E8 = Number((E6 + E7).toFixed(2))
|
|
||||||
// //
|
|
||||||
// const H10 = Number((E8 / ((B2 * B3) / 1000000)).toFixed(2))
|
|
||||||
//
|
|
||||||
// ///////// debug variables
|
|
||||||
// // B
|
|
||||||
// console.log('************ B Column ************')
|
|
||||||
// console.log('B2 = ', B2)
|
|
||||||
// console.log('B3 = ', B3)
|
|
||||||
// console.log('B4 = ', B4)
|
|
||||||
// console.log('B5 = ', B5)
|
|
||||||
// console.log('B6 = ', B6)
|
|
||||||
// console.log('B7 = ', B7)
|
|
||||||
// console.log('B8 = ', B8)
|
|
||||||
// console.log('B9 = ', B9)
|
|
||||||
// // E
|
|
||||||
// console.log('************ E Column ************')
|
|
||||||
// console.log('E2 = ', E2)
|
|
||||||
// console.log('E3 = ', E3)
|
|
||||||
// console.log('E4 = ', E4)
|
|
||||||
// console.log('E5 = ', E5)
|
|
||||||
// console.log('E6 = ', E6)
|
|
||||||
// console.log('E7 = ', E7)
|
|
||||||
// console.log('E8 = ', E8)
|
|
||||||
// // H
|
|
||||||
// console.log('************ H Column ************')
|
|
||||||
// console.log('H2 = ', H2)
|
|
||||||
// console.log('H3 = ', H3)
|
|
||||||
// console.log('H4 = ', H4)
|
|
||||||
// console.log('H5 = ', H5)
|
|
||||||
// console.log('H6 = ', H6)
|
|
||||||
// console.log('H7 = ', H7)
|
|
||||||
// console.log('H8 = ', H8)
|
|
||||||
// console.log('H9 = ', H9)
|
|
||||||
// console.log('H10 = ', H10)
|
|
||||||
// // K
|
|
||||||
// console.log('************ K Column ************')
|
|
||||||
// console.log('K2 = ', K2)
|
|
||||||
// console.log('K3 = ', K3)
|
|
||||||
// console.log('K4 = ', K4)
|
|
||||||
// console.log('K5 = ', K5)
|
|
||||||
// console.log('K6 = ', K6)
|
|
||||||
// console.log('K7 = ', K7)
|
|
||||||
// console.log('K8 = ', K8)
|
|
||||||
// console.log('K9 = ', K9)
|
|
||||||
// // check H6
|
|
||||||
// return E8
|
|
||||||
// }
|
|
||||||
|
|
||||||
function pressuredWeight() {
|
function pressuredWeight() {
|
||||||
// formula variables
|
// formula variables
|
||||||
const B15 = gratingLength
|
const B15 = Number(gratingLength)
|
||||||
const B16 = gratingWidth
|
const B16 = Number(gratingWidth)
|
||||||
const B17 = bearingBarHeight
|
const B17 = Number(bearingBarHeight)
|
||||||
const B18 = bearingBarThickness
|
const B18 = Number(bearingBarThickness)
|
||||||
const B19 = crossBarHeight
|
const B19 = Number(crossBarHeight)
|
||||||
const B20 = crossBarThickness
|
const B20 = Number(crossBarThickness)
|
||||||
const B21 = bearingBarPitch
|
const B21 = Number(bearingBarPitch)
|
||||||
const B22 = crossBarPitch
|
const B22 = Number(crossBarPitch)
|
||||||
const B23 = frameThickness
|
const B23 = Number(frameThickness)
|
||||||
//
|
//
|
||||||
const E15 = B15 - 2
|
const E15 = B15 - 2
|
||||||
const E16 = B16 - 2 * B23 - 2
|
const E16 = B16 - 2 * B23 - 2
|
||||||
@@ -496,7 +450,7 @@ module.exports.calculate = [
|
|||||||
const K16 = E16 * (2 * (B17 + B18)) * H16 / 1000000
|
const K16 = E16 * (2 * (B17 + B18)) * H16 / 1000000
|
||||||
const K17 = E17 * (2 * (B17 + B18)) * H17 / 1000000
|
const K17 = E17 * (2 * (B17 + B18)) * H17 / 1000000
|
||||||
const K18 = E18 * (2 * (B19 + B20)) * H18 / 1000000
|
const K18 = E18 * (2 * (B19 + B20)) * H18 / 1000000
|
||||||
const K19 = K15 + K18
|
const K19 = K15 + K16 + K17 + K18
|
||||||
const K20 = 80
|
const K20 = 80
|
||||||
const K21 = K19 * K20 / 1000000 * 7140
|
const K21 = K19 * K20 / 1000000 * 7140
|
||||||
const K22 = K21 / E19 * 100
|
const K22 = K21 / E19 * 100
|
||||||
@@ -511,19 +465,6 @@ module.exports.calculate = [
|
|||||||
const K26 = L26 - 4 - 2 * B23 - B18
|
const K26 = L26 - 4 - 2 * B23 - B18
|
||||||
//
|
//
|
||||||
|
|
||||||
// console.log('H15 ' + H15)
|
|
||||||
// console.log('H16 ' + H16)
|
|
||||||
// console.log('H17 ' + H17)
|
|
||||||
// console.log('H18 ' + H18)
|
|
||||||
// console.log('H19 ' + H19)
|
|
||||||
// console.log('H20 ' + H20)
|
|
||||||
// console.log('H21 ' + H21)
|
|
||||||
// console.log('H22 ' + H22)
|
|
||||||
// console.log('H23 ' + H23)
|
|
||||||
|
|
||||||
|
|
||||||
// console.log('answer ' + H18)
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
normal: Number(E19.toFixed(2)),
|
normal: Number(E19.toFixed(2)),
|
||||||
galvanized: Number(E21.toFixed(2))
|
galvanized: Number(E21.toFixed(2))
|
||||||
|
|||||||
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 93 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 53 KiB |
+570
-307
@@ -333,6 +333,49 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.install-app-dialog {
|
||||||
|
.el-dialog {
|
||||||
|
@media (max-width: 1400px) {
|
||||||
|
width: 80%;
|
||||||
|
}
|
||||||
|
@media (max-width: 992px) {
|
||||||
|
width: 90%;
|
||||||
|
}
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
width: calc(100% - 20px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-button {
|
||||||
|
span {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.install-app-description {
|
||||||
|
h2 {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
word-break: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
.imgBox {
|
||||||
|
text-align: center;
|
||||||
|
margin: 20px 0 40px;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 520px;
|
||||||
|
max-width: 100%;
|
||||||
|
@include boxShadow(0 4px 10px rgba(#000, 0.4));
|
||||||
|
@include borderRadius(5px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
///////////////////////////// about page
|
///////////////////////////// about page
|
||||||
@@ -1488,56 +1531,427 @@
|
|||||||
.s1 {
|
.s1 {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.s2 {
|
.app-section {
|
||||||
.app {
|
.app {
|
||||||
$appLayoutPadding: 55px;
|
$appLayoutPadding: 55px;
|
||||||
@include transition(0.1s);
|
@include transition(0.1s);
|
||||||
|
|
||||||
& > .container-fluid, & > .container-fluid .row {
|
& > .container-fluid, & > .container-fluid .row {
|
||||||
padding: 0 !important;
|
padding: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.appTitle {
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 30px;
|
||||||
|
|
||||||
|
@media (max-width: 1400px) {
|
||||||
|
font-size: 25px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.appMethod {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 50px;
|
||||||
|
background: $theme;
|
||||||
|
padding: 15px;
|
||||||
|
|
||||||
|
.txt {
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0 10px 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.appTitle {
|
span {
|
||||||
text-align: center;
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
.title {
|
.el-radio-button__orig-radio:checked + .el-radio-button__inner {
|
||||||
font-size: 30px;
|
background-color: $darkGray;
|
||||||
|
border-color: #fff;
|
||||||
|
@include boxShadow(-1px 0 0 0 $darkGray);
|
||||||
|
}
|
||||||
|
|
||||||
@media (max-width: 1400px) {
|
.el-radio-button .el-radio-button__inner {
|
||||||
font-size: 25px;
|
color: $theme;
|
||||||
}
|
@extend %userSelect;
|
||||||
|
@media (max-width: 530px) {
|
||||||
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.appMethod {
|
.el-radio-button.is-active .el-radio-button__inner {
|
||||||
text-align: center;
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.appLayout {
|
||||||
|
padding: $appLayoutPadding;
|
||||||
|
background: $theme;
|
||||||
|
height: 100%;
|
||||||
|
@include boxSizing(border-box);
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
@media (max-width: 1400px) {
|
||||||
|
padding: 55px 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
span, p, b, * {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
color: $red;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.layoutTitle {
|
||||||
margin-bottom: 50px;
|
margin-bottom: 50px;
|
||||||
background: $theme;
|
}
|
||||||
padding: 15px;
|
|
||||||
|
|
||||||
.txt {
|
.class {
|
||||||
display: inline-block;
|
margin-bottom: 40px;
|
||||||
margin: 0 10px 10px;
|
|
||||||
|
h4 {
|
||||||
|
margin-bottom: 15px;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
span {
|
.calculateBtn {
|
||||||
color: #fff;
|
text-align: center;
|
||||||
}
|
|
||||||
|
|
||||||
.el-radio-button__orig-radio:checked + .el-radio-button__inner {
|
.btn {
|
||||||
background-color: $darkGray;
|
@include borderRadius(5px);
|
||||||
|
background: #fff;
|
||||||
border-color: #fff;
|
border-color: #fff;
|
||||||
@include boxShadow(-1px 0 0 0 $darkGray);
|
color: $darkGray;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: $darkGray;
|
||||||
|
border-color: $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;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-radio-button .el-radio-button__inner {
|
&:lang(fa) {
|
||||||
color: $theme;
|
margin-left: 0 !important;
|
||||||
@extend %userSelect;
|
margin-right: 200px !important;
|
||||||
@media (max-width: 530px) {
|
|
||||||
font-size: 12px;
|
@media (max-width: 600px) {
|
||||||
|
margin-right: 0 !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-input--suffix .el-input__inner {
|
||||||
|
padding-right: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-input__inner {
|
||||||
|
&::placeholder {
|
||||||
|
color: $darkGray;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.err {
|
||||||
|
color: $red;
|
||||||
|
}
|
||||||
|
|
||||||
|
.copyRight {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
font-size: 12px;
|
||||||
|
bottom: 5px;
|
||||||
|
left: 0;
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: rgba(#fff, 0.5);
|
||||||
|
text-align: center;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
a {
|
||||||
|
@keyframes blinking {
|
||||||
|
from {
|
||||||
|
color: rgba(#fff, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
color: rgba(#fff, 0.7);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@include animation(blinking 1s alternate-reverse infinite);
|
||||||
|
@extend %defaultTransition;
|
||||||
|
color: rgba(#fff, 0.5);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: rgba(#fff, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-input {
|
||||||
|
//width: auto;
|
||||||
|
//
|
||||||
|
//@media (max-width: 600px) {
|
||||||
|
// width: 100%;
|
||||||
|
//}
|
||||||
|
input {
|
||||||
|
font-family: 'sahel', 'diodrum', sans-serif;
|
||||||
|
|
||||||
|
&:lang(en) {
|
||||||
|
font-family: 'diodrum', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::placeholder {
|
||||||
|
font-family: 'sahel';
|
||||||
|
|
||||||
|
&:lang(en) {
|
||||||
|
font-family: 'diodrum';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-input__suffix {
|
||||||
|
right: auto;
|
||||||
|
left: 5px;
|
||||||
|
|
||||||
|
&:lang(en) {
|
||||||
|
right: 5px;
|
||||||
|
left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-input__icon {
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-select {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-radio {
|
||||||
|
margin-right: 20px;
|
||||||
|
|
||||||
|
&:lang(fa) {
|
||||||
|
margin-right: 0;
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.appResult {
|
||||||
|
background: lightgray;
|
||||||
|
padding-left: $appLayoutPadding;
|
||||||
|
padding-right: $appLayoutPadding;
|
||||||
|
text-align: center;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.success {
|
||||||
|
color: #67C23A;
|
||||||
|
}
|
||||||
|
|
||||||
|
.failure {
|
||||||
|
color: $red;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes waiting {
|
||||||
|
from {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 0;
|
||||||
|
letter-spacing: -10px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.waiting {
|
||||||
|
@include animation(waiting 0.7s alternate-reverse infinite);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.weight {
|
||||||
|
margin-top: 30px;
|
||||||
|
background: lightgray;
|
||||||
|
padding: 20px;
|
||||||
|
text-align: center;
|
||||||
|
opacity: 0;
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 0;
|
||||||
|
letter-spacing: -10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.colored {
|
||||||
|
color: $theme;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-guide-tables {
|
||||||
|
.notice {
|
||||||
|
color: red;
|
||||||
|
font-size: 14px;
|
||||||
|
display: none;
|
||||||
|
|
||||||
|
@media (max-width: 992px) {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tableBox {
|
||||||
|
width: 100%;
|
||||||
|
overflow: auto;
|
||||||
|
|
||||||
|
table {
|
||||||
|
width: 100%;
|
||||||
|
min-width: 960px;
|
||||||
|
border: 1px solid rgba(#000, 1);
|
||||||
|
|
||||||
|
thead {
|
||||||
|
background: $theme;
|
||||||
|
color: #fff;
|
||||||
|
|
||||||
|
th {
|
||||||
|
padding: 20px;
|
||||||
|
font-family: 'sahel-LD', 'diodrum', sans-serif;
|
||||||
|
direction: ltr;
|
||||||
|
|
||||||
|
&.middle {
|
||||||
|
border-left: 2px solid rgba(#fff, 0.4) !important;
|
||||||
|
border-right: 2px solid rgba(#fff, 0.4) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
tbody {
|
||||||
|
background: rgba($theme, 0.2);
|
||||||
|
color: #000;
|
||||||
|
|
||||||
|
tr {
|
||||||
|
line-height: 1.3em;
|
||||||
|
|
||||||
|
td {
|
||||||
|
border: 1px solid rgba(#000, 1);
|
||||||
|
padding: 20px;
|
||||||
|
font-family: 'sahel-LD', 'diodrum', sans-serif;
|
||||||
|
direction: ltr;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
direction: ltr !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.odd {
|
||||||
|
background: rgba(#000, 0.1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.vehicles {
|
||||||
|
}
|
||||||
|
|
||||||
|
&.forklifts {
|
||||||
|
margin-top: 50px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
///////////////////////////// pwa app
|
||||||
|
.pwa {
|
||||||
|
position: relative;
|
||||||
|
padding-top: 80px;
|
||||||
|
background: #fff;
|
||||||
|
@include transition(background-color 0.2s, color 0.2s !important);
|
||||||
|
|
||||||
|
div, p, a, h1, h2, h3, b, span, i {
|
||||||
|
@include transition(background-color 0.2s, color 0.2s !important);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.dark-mode {
|
||||||
|
$darkModeBG: #1b1b1b ;
|
||||||
|
$darkModeAppLayout: #2b2b2b;
|
||||||
|
background: $darkModeBG;
|
||||||
|
|
||||||
|
|
||||||
|
p, h2, h3, a, i, b {
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.appLayout, .appMethod, .app-guide-tables thead {
|
||||||
|
background: $darkModeAppLayout;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-guide-tables tbody {
|
||||||
|
background: rgba(#fff, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.notice {
|
||||||
|
//color: #805858 !important;
|
||||||
|
color: $red !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pwa-header {
|
||||||
|
background: $darkModeAppLayout;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pwa-about {
|
||||||
|
background: $darkModeBG;
|
||||||
|
|
||||||
|
span {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.app {
|
||||||
|
.appMethod {
|
||||||
|
.el-radio-button__orig-radio:checked + .el-radio-button__inner {
|
||||||
|
background-color: rgba(#fff, 0.5);
|
||||||
|
border-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
.el-radio-button.is-active .el-radio-button__inner {
|
.el-radio-button.is-active .el-radio-button__inner {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
@@ -1545,317 +1959,166 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.appLayout {
|
.appLayout {
|
||||||
padding: $appLayoutPadding;
|
|
||||||
background: $theme;
|
|
||||||
height: 100%;
|
|
||||||
@include boxSizing(border-box);
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
@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 {
|
.el-radio__input.is-checked .el-radio__inner {
|
||||||
background-color: $darkGray;
|
background-color: rgba($red, 1) !important;
|
||||||
border-color: $darkGray;
|
border-color: rgba(#fff, 0.3) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-form-item__label {
|
.btn {
|
||||||
@media (max-width: 600px) {
|
&:hover {
|
||||||
float: none !important;
|
border-color: #fff;
|
||||||
|
|
||||||
&: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;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.err {
|
.err {
|
||||||
color: $red;
|
color: $red !important;
|
||||||
}
|
|
||||||
|
|
||||||
.copyRight {
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
font-size: 12px;
|
|
||||||
bottom: 5px;
|
|
||||||
left: 0;
|
|
||||||
|
|
||||||
p {
|
|
||||||
color: rgba(#fff, 0.5);
|
|
||||||
text-align: center;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
a {
|
|
||||||
@keyframes blinking {
|
|
||||||
from {
|
|
||||||
color: rgba(#fff, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
color: rgba(#fff, 0.7);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@include animation(blinking 1s alternate-reverse infinite);
|
|
||||||
@extend %defaultTransition;
|
|
||||||
color: rgba(#fff, 0.5);
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: rgba(#fff, 1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-input {
|
.appResult, .weight {
|
||||||
//width: auto;
|
background: #454545;
|
||||||
//
|
|
||||||
//@media (max-width: 600px) {
|
|
||||||
// width: 100%;
|
|
||||||
//}
|
|
||||||
input {
|
|
||||||
font-family: 'sahel', 'diodrum', sans-serif;
|
|
||||||
|
|
||||||
&:lang(en) {
|
|
||||||
font-family: 'diodrum', sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::placeholder {
|
|
||||||
font-family: 'sahel';
|
|
||||||
|
|
||||||
&:lang(en) {
|
|
||||||
font-family: 'diodrum';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-input__suffix {
|
|
||||||
right: auto;
|
|
||||||
left: 5px;
|
|
||||||
|
|
||||||
&:lang(en) {
|
|
||||||
right: 5px;
|
|
||||||
left: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-input__icon {
|
|
||||||
color: #000;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-select {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-radio {
|
|
||||||
margin-right: 20px;
|
|
||||||
|
|
||||||
&:lang(fa) {
|
|
||||||
margin-right: 0;
|
|
||||||
margin-left: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.appResult {
|
|
||||||
background: lightgray;
|
|
||||||
padding-left: $appLayoutPadding;
|
|
||||||
padding-right: $appLayoutPadding;
|
|
||||||
text-align: center;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.success {
|
.success {
|
||||||
color: #67C23A;
|
color: #7cfc00 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.failure {
|
.failure {
|
||||||
color: $red;
|
color: $red !important;
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes waiting {
|
|
||||||
from {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
font-size: 0;
|
|
||||||
letter-spacing: -10px;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.waiting {
|
|
||||||
@include animation(waiting 0.7s alternate-reverse infinite);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.weight {
|
.page-load {
|
||||||
margin-top: 30px;
|
background: $darkModeAppLayout;
|
||||||
background: lightgray;
|
|
||||||
padding: 20px;
|
|
||||||
text-align: center;
|
|
||||||
opacity: 0;
|
|
||||||
|
|
||||||
p {
|
svg {
|
||||||
font-size: 0;
|
path {
|
||||||
letter-spacing: -10px;
|
fill: #fff;
|
||||||
}
|
|
||||||
|
|
||||||
.colored {
|
|
||||||
color: $theme;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.s3 {
|
.pwa-header {
|
||||||
.notice {
|
padding: 10px 0;
|
||||||
color: red;
|
background: $theme;
|
||||||
font-size: 14px;
|
position: fixed;
|
||||||
display: none;
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 10;
|
||||||
|
width: 100%;
|
||||||
|
@include boxShadow(0 4px 8px rgba(#000, 0.4));
|
||||||
|
|
||||||
@media (max-width: 992px) {
|
.options {
|
||||||
display: block;
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #fff;
|
||||||
|
font-size: 16px;
|
||||||
|
margin-right: 5px;
|
||||||
|
display: inline-block;
|
||||||
|
padding: 2px 5px;
|
||||||
|
@include borderRadius(8px);
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
background-color: rgba(#fff, 0.2);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
i {
|
||||||
|
color: #fff;
|
||||||
|
font-size: 22px;
|
||||||
|
margin-right: 10px;
|
||||||
|
padding: 10px;
|
||||||
|
padding-left: 0;
|
||||||
|
|
||||||
|
&:lang(en) {
|
||||||
|
padding-left: 10px;
|
||||||
|
padding-right: 0;
|
||||||
|
margin-right: 0;
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.tableBox {
|
.logo {
|
||||||
width: 100%;
|
svg {
|
||||||
overflow: auto;
|
width: 60px;
|
||||||
|
|
||||||
table {
|
path {
|
||||||
width: 100%;
|
fill: #fff;
|
||||||
min-width: 960px;
|
|
||||||
border: 1px solid rgba(#000, 1);
|
|
||||||
|
|
||||||
thead {
|
|
||||||
background: $theme;
|
|
||||||
color: #fff;
|
|
||||||
|
|
||||||
th {
|
|
||||||
padding: 20px;
|
|
||||||
font-family: 'sahel-LD', 'diodrum', sans-serif;
|
|
||||||
direction: ltr;
|
|
||||||
|
|
||||||
&.middle {
|
|
||||||
border-left: 2px solid rgba(#fff, 0.4) !important;
|
|
||||||
border-right: 2px solid rgba(#fff, 0.4) !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
tbody {
|
|
||||||
background: rgba($theme, 0.2);
|
|
||||||
color: #000;
|
|
||||||
|
|
||||||
tr {
|
|
||||||
line-height: 1.3em;
|
|
||||||
|
|
||||||
td {
|
|
||||||
border: 1px solid rgba(#000, 1);
|
|
||||||
padding: 20px;
|
|
||||||
font-family: 'sahel-LD', 'diodrum', sans-serif;
|
|
||||||
direction: ltr;
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
direction: ltr !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.odd {
|
|
||||||
background: rgba(#000, 0.1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
&.vehicles {
|
.pwa-about {
|
||||||
|
background: #fff;
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
overflow: auto;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 9;
|
||||||
|
padding-top: 100px;
|
||||||
|
padding-bottom: 100px;
|
||||||
|
@include boxSizing(border-box);
|
||||||
|
visibility: hidden;
|
||||||
|
opacity: 0;
|
||||||
|
|
||||||
|
.description {
|
||||||
|
a {
|
||||||
|
color: $theme;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.forklifts {
|
.copyRight {
|
||||||
margin-top: 50px;
|
text-align: center;
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-top: 80px;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #872071;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.calculation--page {
|
||||||
|
.s1 {
|
||||||
|
padding-bottom: 0;
|
||||||
|
|
||||||
|
.notice {
|
||||||
|
margin-top: 20px;
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.connection-status {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 15px;
|
||||||
|
right: 15px;
|
||||||
|
z-index: 20;
|
||||||
|
background: $red;
|
||||||
|
padding: 2px 8px;
|
||||||
|
@include borderRadius(10px);
|
||||||
|
|
||||||
|
&:lang(en) {
|
||||||
|
right: auto;
|
||||||
|
left: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -0,0 +1,343 @@
|
|||||||
|
<template>
|
||||||
|
<section class="app-section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
|
||||||
|
<div class="app m-auto" :class="app.method === 'custom' ? 'col-12 col-lg-9 col-xl-8 col-xxl-6' : 'col-12'">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<div class="row">
|
||||||
|
|
||||||
|
<div class="col-12">
|
||||||
|
<div class="appTitle">
|
||||||
|
<h2 class="title">{{ titleTxt }}</h2>
|
||||||
|
</div>
|
||||||
|
<div class="appMethod">
|
||||||
|
<span class="txt">{{ staticData.app.t4 }}</span>
|
||||||
|
<el-radio-group v-model="app.method" style="direction: ltr">
|
||||||
|
<template v-if="$route.params.lang === 'fa'">
|
||||||
|
<el-radio-button label="classified">{{ staticData.app.t5 }}</el-radio-button>
|
||||||
|
<el-radio-button label="custom">{{ staticData.app.t6 }}</el-radio-button>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<el-radio-button label="custom">{{ staticData.app.t6 }}</el-radio-button>
|
||||||
|
<el-radio-button label="classified">{{ staticData.app.t5 }}</el-radio-button>
|
||||||
|
</template>
|
||||||
|
</el-radio-group>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-12 col-lg-6 mb-5 mb-lg-0" v-if="app.method === 'classified'">
|
||||||
|
<div class="appLayout">
|
||||||
|
<h2 class="layoutTitle">{{ staticData.app.t7 }}</h2>
|
||||||
|
<div class="class">
|
||||||
|
<h4>{{ staticData.app.t8 }}</h4>
|
||||||
|
<el-radio v-model="app.vehicleClass" label="class1">{{ staticData.app.t9 }}</el-radio>
|
||||||
|
</div>
|
||||||
|
<div class="class">
|
||||||
|
<h4>{{ staticData.app.t10 }}</h4>
|
||||||
|
<el-radio v-model="app.vehicleClass" label="class2">{{ staticData.app.t11 }}</el-radio>
|
||||||
|
<el-radio v-model="app.vehicleClass" label="class3">{{ staticData.app.t12 }}</el-radio>
|
||||||
|
<el-radio v-model="app.vehicleClass" label="class4">{{ staticData.app.t13 }}</el-radio>
|
||||||
|
</div>
|
||||||
|
<div class="class">
|
||||||
|
<h4>{{ staticData.app.t14 }}</h4>
|
||||||
|
<el-radio v-model="app.vehicleClass" label="FL1">FL1</el-radio>
|
||||||
|
<el-radio v-model="app.vehicleClass" label="FL2">FL2</el-radio>
|
||||||
|
<el-radio v-model="app.vehicleClass" label="FL3">FL3</el-radio>
|
||||||
|
<el-radio v-model="app.vehicleClass" label="FL4">FL4</el-radio>
|
||||||
|
<el-radio v-model="app.vehicleClass" label="FL5">FL5</el-radio>
|
||||||
|
<el-radio v-model="app.vehicleClass" label="FL6">FL6</el-radio>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div :class="app.method === 'custom' ? 'col-12' : 'col-12 col-lg-6'">
|
||||||
|
<div class="appLayout">
|
||||||
|
<h2 class="layoutTitle">{{ staticData.app.t15 }}</h2>
|
||||||
|
<el-form key="form-a">
|
||||||
|
<el-form-item :label="staticData.app.t16">
|
||||||
|
<el-radio-group v-model="app.gratingType">
|
||||||
|
<el-radio label="forge">{{ staticData.app.t17 }}</el-radio>
|
||||||
|
<el-radio label="pressured">{{ staticData.app.t18 }}</el-radio>
|
||||||
|
</el-radio-group>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item :label="staticData.app.t19" v-if="app.method === 'custom'">
|
||||||
|
<el-radio-group v-model="app.loadType">
|
||||||
|
<el-radio label="pointedLoad">{{ staticData.app.t20 }}</el-radio>
|
||||||
|
<el-radio label="distributedLoad">{{ staticData.app.t21 }}</el-radio>
|
||||||
|
</el-radio-group>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item :class="validation.pointedLoadValue ? 'is-error' : null" :label="staticData.app.t22" v-if="app.method === 'custom' && app.loadType === 'pointedLoad'">
|
||||||
|
<el-input inputmode="numeric" pattern="[0-9]*" v-model="app.pointedLoadValue" :placeholder="staticData.app.enter"></el-input>
|
||||||
|
<p class="err" v-if="validation.pointedLoadValue">{{ validation.pointedLoadValue.msg }}</p>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item :class="validation.distributedLoadValue ? 'is-error' : null" :label="staticData.app.t23" v-if="app.method === 'custom' && app.loadType === 'distributedLoad'">
|
||||||
|
<el-input inputmode="numeric" pattern="[0-9]*" v-model="app.distributedLoadValue" :placeholder="staticData.app.enter"></el-input>
|
||||||
|
<p class="err" v-if="validation.distributedLoadValue">{{ validation.distributedLoadValue.msg }}</p>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item :class="validation.bearingBarPitch ? 'is-error' : null" :label="staticData.app.t24" v-if="calculationValues">
|
||||||
|
|
||||||
|
<el-select v-model="app.bearingBarPitch" key="bearingBarPitch_forge" v-if="app.gratingType === 'forge'"
|
||||||
|
:placeholder="staticData.app.select">
|
||||||
|
<el-option
|
||||||
|
v-for="item in calculationValues.bearingBarPitch_forge"
|
||||||
|
:key="item"
|
||||||
|
:label="item"
|
||||||
|
:value="item">
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
|
||||||
|
<el-select v-model="app.bearingBarPitch" key="bearingBarPitch_pressured" v-if="app.gratingType === 'pressured'" :placeholder="staticData.app.select">
|
||||||
|
<el-option
|
||||||
|
v-for="item in calculationValues.bearingBarPitch_pressured"
|
||||||
|
:key="item"
|
||||||
|
:label="item"
|
||||||
|
:value="item">
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
|
||||||
|
<p class="err" v-if="validation.bearingBarPitch">{{ validation.bearingBarPitch.msg }}</p>
|
||||||
|
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item :class="validation.crossBarPitch ? 'is-error' : null" :label="staticData.app.t25" v-if="calculationValues">
|
||||||
|
|
||||||
|
<el-select v-model="app.crossBarPitch" key="crossBarPitch_forge" v-if="app.gratingType === 'forge'" :placeholder="staticData.app.select">
|
||||||
|
<el-option
|
||||||
|
v-for="item in calculationValues.crossBarPitch_forge"
|
||||||
|
:key="item"
|
||||||
|
:label="item"
|
||||||
|
:value="item">
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
|
||||||
|
<el-select v-model="app.crossBarPitch" key="crossBarPitch_pressured" v-if="app.gratingType === 'pressured'" :placeholder="staticData.app.select">
|
||||||
|
<el-option
|
||||||
|
v-for="item in calculationValues.crossBarPitch_pressured"
|
||||||
|
:key="item"
|
||||||
|
:label="item"
|
||||||
|
:value="item">
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
|
||||||
|
<p class="err" v-if="validation.crossBarPitch">{{ validation.crossBarPitch.msg }}</p>
|
||||||
|
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item :class="validation.clearSpan ? 'is-error' : null" :label="staticData.app.t26">
|
||||||
|
<el-input inputmode="numeric" pattern="[0-9]*" v-model="app.clearSpan" :placeholder="staticData.app.enter"></el-input>
|
||||||
|
<p class="err" v-if="validation.clearSpan">{{ validation.clearSpan.msg }}</p>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item :class="validation.bearingBarThickness ? 'is-error' : null" :label="staticData.app.t27">
|
||||||
|
<el-input inputmode="numeric" pattern="[0-9]*" v-model="app.bearingBarThickness" :placeholder="staticData.app.enter"></el-input>
|
||||||
|
<p class="err" v-if="validation.bearingBarThickness">{{ validation.bearingBarThickness.msg }}</p>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<!-- cross bar thickness -->
|
||||||
|
<el-form-item :class="validation.crossBarThickness ? 'is-error' : null" :label="staticData.app.t30" v-if="app.gratingType === 'pressured'">
|
||||||
|
<el-input inputmode="numeric" pattern="[0-9]*" v-model="app.crossBarThickness" :placeholder="staticData.app.enter"></el-input>
|
||||||
|
<p class="err" v-if="validation.crossBarThickness">{{ validation.crossBarThickness.msg }}</p>
|
||||||
|
</el-form-item>
|
||||||
|
<!-- cross bar thickness -->
|
||||||
|
|
||||||
|
<el-form-item :class="validation.bearingBarHeight ? 'is-error' : null" :label="staticData.app.t28">
|
||||||
|
<el-select v-model="app.bearingBarHeight"
|
||||||
|
key="bearingBarHeight"
|
||||||
|
:placeholder="relativeValues || app.loadType === 'distributedLoad' ? staticData.app.select : staticData.app.t29">
|
||||||
|
<el-option
|
||||||
|
v-for="item in app.loadType === 'distributedLoad' ? calculationValues.bearingBarHeight : relativeValues"
|
||||||
|
:key="item"
|
||||||
|
:label="item"
|
||||||
|
:value="item">
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
<p class="err" v-if="validation.bearingBarHeight">{{ validation.bearingBarHeight.msg }}</p>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<!-- cross bar height -->
|
||||||
|
<el-form-item :class="validation.crossBarHeight ? 'is-error' : null" :label="staticData.app.t31" v-if="app.gratingType === 'pressured'">
|
||||||
|
<el-input inputmode="numeric" pattern="[0-9]*" v-model="app.crossBarHeight" :placeholder="staticData.app.enter"></el-input>
|
||||||
|
<p class="err" v-if="validation.crossBarHeight">{{ validation.crossBarHeight.msg }}</p>
|
||||||
|
</el-form-item>
|
||||||
|
<!-- cross bar height -->
|
||||||
|
|
||||||
|
<div class="calculateBtn">
|
||||||
|
<button class="btn btn-reverse-fill" @click.prevent="calculate">{{ staticData.app.calculate }}</button>
|
||||||
|
</div>
|
||||||
|
</el-form>
|
||||||
|
<div class="copyRight">
|
||||||
|
<p>Design And develop by <a href="https://www.negarehagency.com" target="_blank">negarehagency.com</a></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-12 mt-5">
|
||||||
|
<div class="appResult" v-if="waiting || appResult || validation">
|
||||||
|
<p class="waiting" v-if="waiting">{{ staticData.app.waiting }}</p>
|
||||||
|
<p class="err" v-if="!appResult && !waiting">{{ staticData.app.validationErr }}</p>
|
||||||
|
<p v-if="appResult" :class="appResult.sigmaStatus ? 'success' : 'failure'">{{ appResult.sigma }}</p>
|
||||||
|
<p v-if="appResult" :class="appResult.deflectionStatus ? 'success' : 'failure'">{{ appResult.deflection }}</p>
|
||||||
|
</div>
|
||||||
|
<div class="weight" v-if="!validation && waiting || appResult">
|
||||||
|
<p v-if="appResult">{{ staticData.app.t32 }}</p>
|
||||||
|
<p dir="ltr">
|
||||||
|
<b class="colored"> {{ appResult.gratingWeight.normal }} </b>
|
||||||
|
<b> Kg/m<sup>2</sup> </b>
|
||||||
|
</p>
|
||||||
|
<br>
|
||||||
|
<p v-if="appResult">{{ staticData.app.t33 }}</p>
|
||||||
|
<p dir="ltr">
|
||||||
|
<b class="colored"> {{ appResult.gratingWeight.galvanized }} </b>
|
||||||
|
<b> Kg/m<sup>2</sup> </b>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
app: {
|
||||||
|
method: 'custom',
|
||||||
|
gratingType: 'forge',
|
||||||
|
loadType: 'pointedLoad',
|
||||||
|
vehicleClass: 'class1',
|
||||||
|
pointedLoadValue: '',
|
||||||
|
distributedLoadValue: '',
|
||||||
|
bearingBarPitch: '',
|
||||||
|
crossBarPitch: '',
|
||||||
|
clearSpan: '',
|
||||||
|
bearingBarThickness: '',
|
||||||
|
crossBarThickness: '',
|
||||||
|
bearingBarHeight: '',
|
||||||
|
crossBarHeight: '',
|
||||||
|
locale: this.$route.params.lang
|
||||||
|
},
|
||||||
|
calculationValues: null,
|
||||||
|
relativeValues: null,
|
||||||
|
validation: {},
|
||||||
|
waiting: false,
|
||||||
|
appResult: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
async fetch() {
|
||||||
|
const calculationValues = await this.$axios.get('/api/public/calculation/values')
|
||||||
|
this.calculationValues = calculationValues.data
|
||||||
|
},
|
||||||
|
props: ['titleTxt'],
|
||||||
|
computed: {
|
||||||
|
staticData() {
|
||||||
|
return this.$store.state.staticData.calculation[this.$route.params.lang]
|
||||||
|
},
|
||||||
|
gratingTypeTrigger() {
|
||||||
|
return this.app.gratingType
|
||||||
|
},
|
||||||
|
crossBarPitchTrigger() {
|
||||||
|
return this.app.crossBarPitch
|
||||||
|
},
|
||||||
|
loadTypeTrigger() {
|
||||||
|
return this.app.loadType
|
||||||
|
},
|
||||||
|
vehicleClassTrigger() {
|
||||||
|
return this.app.vehicleClass
|
||||||
|
},
|
||||||
|
methodTrigger() {
|
||||||
|
return this.app.method
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
loadTypeTrigger(newVal, oldVal) {
|
||||||
|
this.app.bearingBarHeight = ''
|
||||||
|
},
|
||||||
|
gratingTypeTrigger(newVal, oldVal) {
|
||||||
|
this.app.bearingBarPitch = ''
|
||||||
|
this.app.crossBarPitch = ''
|
||||||
|
},
|
||||||
|
crossBarPitchTrigger(newVal, oldVal) {
|
||||||
|
if (this.app.loadType === 'pointedLoad') {
|
||||||
|
this.app.bearingBarHeight = ''
|
||||||
|
const data = {
|
||||||
|
gratingType: this.app.gratingType,
|
||||||
|
crossBarPitch: this.app.crossBarPitch
|
||||||
|
}
|
||||||
|
this.$axios.post('/api/public/calculation/relativeValues', data)
|
||||||
|
.then(res => {
|
||||||
|
this.relativeValues = res.data
|
||||||
|
})
|
||||||
|
.catch(err => {
|
||||||
|
this.relativeValues = null
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
vehicleClassTrigger(newVal, oldVal) {
|
||||||
|
this.app.crossBarPitch = ''
|
||||||
|
if (newVal === 'class1') this.app.loadType = 'distributedLoad'
|
||||||
|
else this.app.loadType = 'pointedLoad'
|
||||||
|
},
|
||||||
|
methodTrigger(newVal, oldVal) {
|
||||||
|
if (newVal === 'classified') {
|
||||||
|
this.app.vehicleClass = 'class1'
|
||||||
|
this.app.loadType = 'distributedLoad'
|
||||||
|
} else {
|
||||||
|
this.app.vehicleClass = ''
|
||||||
|
this.app.loadType = 'pointedLoad'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
waiting() {
|
||||||
|
setTimeout(() => {
|
||||||
|
this.$gsap.timeline()
|
||||||
|
.to($('.app .appResult,.app .weight'), {opacity: 1, paddingTop: 20, paddingBottom: 20, duration: 0.2})
|
||||||
|
.to($('.app .appResult p,.app .weight p'), {opacity: 1, fontSize: 16, letterSpacing: 0, duration: 0.2}, 0)
|
||||||
|
}, 100)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
calculate() {
|
||||||
|
this.validation = {}
|
||||||
|
this.waiting = true
|
||||||
|
this.appResult = null
|
||||||
|
setTimeout(() => {
|
||||||
|
this.$axios.post('/api/public/calculate', this.app)
|
||||||
|
.then(res => {
|
||||||
|
this.waiting = false
|
||||||
|
this.appResult = res.data
|
||||||
|
})
|
||||||
|
.catch(err => {
|
||||||
|
this.waiting = false
|
||||||
|
if (err.response.status === 422) this.validation = err.response.data.validation
|
||||||
|
})
|
||||||
|
}, 2000)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.el-popper .popper__arrow {
|
||||||
|
border-width: 0;
|
||||||
|
filter: none;
|
||||||
|
left: 35px;
|
||||||
|
|
||||||
|
&:lang(fa) {
|
||||||
|
left: auto;
|
||||||
|
right: 35px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,151 @@
|
|||||||
|
<template>
|
||||||
|
<section class="app-guide-tables">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-12">
|
||||||
|
<div class="tableBox vehicles">
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th colspan="4" class="center">{{ staticData.table1.title }}</th>
|
||||||
|
<th class="middle">{{ staticData.table1.load }}</th>
|
||||||
|
<th>{{ staticData.table1.imprint }}</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>{{ staticData.table1.class1.t1 }}</td>
|
||||||
|
<td>{{ staticData.table1.class1.t2 }}</td>
|
||||||
|
<td>{{ staticData.table1.class1.t3 }}</td>
|
||||||
|
<td>{{ staticData.table1.danSqm }}</td>
|
||||||
|
<td>600</td>
|
||||||
|
<td>1000 x 1000</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="odd">
|
||||||
|
<td>{{ staticData.table1.class2.t1 }}</td>
|
||||||
|
<td>{{ staticData.table1.class2.t2 }}</td>
|
||||||
|
<td>{{ staticData.table1.class2.t3 }}</td>
|
||||||
|
<td>{{ staticData.table1.danImprint }}</td>
|
||||||
|
<td>1.000</td>
|
||||||
|
<td>200 x 200</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>{{ staticData.table1.class3.t1 }}</td>
|
||||||
|
<td>{{ staticData.table1.class3.t2 }}</td>
|
||||||
|
<td>{{ staticData.table1.class3.t3 }}</td>
|
||||||
|
<td>{{ staticData.table1.danImprint }}</td>
|
||||||
|
<td>3.000</td>
|
||||||
|
<td>200 x 400</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="odd">
|
||||||
|
<td>{{ staticData.table1.class4.t1 }}</td>
|
||||||
|
<td>{{ staticData.table1.class4.t2 }}</td>
|
||||||
|
<td>{{ staticData.table1.class4.t3 }}</td>
|
||||||
|
<td>{{ staticData.table1.danImprint }}</td>
|
||||||
|
<td>9.000</td>
|
||||||
|
<td>250 x 600</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<p class="notice">{{ staticData.scrollToSee }}</p>
|
||||||
|
<div class="tableBox forklifts">
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th colspan="6" class="center">{{ staticData.table2.title }}</th>
|
||||||
|
<th class="middle">{{ staticData.table2.load }}</th>
|
||||||
|
<th>{{ staticData.table2.imprint }}</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<td>{{ staticData.table2.t1 }}</td>
|
||||||
|
<td>{{ staticData.table2.t2 }}</td>
|
||||||
|
<td>{{ staticData.table2.t3 }}</td>
|
||||||
|
<td>{{ staticData.table2.t4 }}</td>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
</tr>
|
||||||
|
<tr class="odd">
|
||||||
|
<td>{{ staticData.table2.fl1.t1 }}</td>
|
||||||
|
<td>{{ staticData.table2.fl1.t2 }}</td>
|
||||||
|
<td>21</td>
|
||||||
|
<td>10</td>
|
||||||
|
<td>31</td>
|
||||||
|
<td>{{ staticData.table2.danImprint }}</td>
|
||||||
|
<td>2600</td>
|
||||||
|
<td>130 x 130</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>{{ staticData.table2.fl2.t1 }}</td>
|
||||||
|
<td>{{ staticData.table2.fl2.t2 }}</td>
|
||||||
|
<td>31</td>
|
||||||
|
<td>15</td>
|
||||||
|
<td>46</td>
|
||||||
|
<td>{{ staticData.table2.danImprint }}</td>
|
||||||
|
<td>4000</td>
|
||||||
|
<td>175 x 150</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="odd">
|
||||||
|
<td>{{ staticData.table2.fl3.t1 }}</td>
|
||||||
|
<td>{{ staticData.table2.fl3.t2 }}</td>
|
||||||
|
<td>44</td>
|
||||||
|
<td>25</td>
|
||||||
|
<td>69</td>
|
||||||
|
<td>{{ staticData.table2.danImprint }}</td>
|
||||||
|
<td>6300</td>
|
||||||
|
<td>200 x 200</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>{{ staticData.table2.fl4.t1 }}</td>
|
||||||
|
<td>{{ staticData.table2.fl4.t2 }}</td>
|
||||||
|
<td>60</td>
|
||||||
|
<td>40</td>
|
||||||
|
<td>100</td>
|
||||||
|
<td>{{ staticData.table2.danImprint }}</td>
|
||||||
|
<td>9000</td>
|
||||||
|
<td>300 x 200</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="odd">
|
||||||
|
<td>{{ staticData.table2.fl5.t1 }}</td>
|
||||||
|
<td>{{ staticData.table2.fl5.t2 }}</td>
|
||||||
|
<td>90</td>
|
||||||
|
<td>60</td>
|
||||||
|
<td>150</td>
|
||||||
|
<td>{{ staticData.table2.danImprint }}</td>
|
||||||
|
<td>14000</td>
|
||||||
|
<td>375 x 200</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>{{ staticData.table2.fl6.t1 }}</td>
|
||||||
|
<td>{{ staticData.table2.fl6.t2 }}</td>
|
||||||
|
<td>110</td>
|
||||||
|
<td>80</td>
|
||||||
|
<td>190</td>
|
||||||
|
<td>{{ staticData.table2.danImprint }}</td>
|
||||||
|
<td>17000</td>
|
||||||
|
<td>450 x 200</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<p class="notice">{{ staticData.scrollToSee }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
computed: {
|
||||||
|
staticData() {
|
||||||
|
return this.$store.state.staticData.calculation[this.$route.params.lang]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
+28
-4
@@ -1,6 +1,30 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="page-load">
|
<div class="page-load">
|
||||||
<logo/>
|
<logo/>
|
||||||
<p>Arak Rail Co.</p>
|
<p>Arak Rail Co.</p>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<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})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|||||||
@@ -0,0 +1,38 @@
|
|||||||
|
<template>
|
||||||
|
<section class="pwa-about">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-12">
|
||||||
|
<div class="description">
|
||||||
|
<h2 class="title">{{ staticData.t6 }}</h2>
|
||||||
|
<p>{{ staticData.t1 }}</p>
|
||||||
|
<br>
|
||||||
|
<p>
|
||||||
|
<span>{{ staticData.t3 }}</span>
|
||||||
|
<a href="/" target="_blank">www.arakrail.com</a>
|
||||||
|
<span>{{ staticData.t4 }}</span>
|
||||||
|
</p>
|
||||||
|
<br>
|
||||||
|
<p>{{ staticData.t2 }}</p>
|
||||||
|
|
||||||
|
<div class="copyRight">
|
||||||
|
<p>{{ staticData.t5 }}</p>
|
||||||
|
<a href="http://negarehagency.com/" target="_blank">Negareh Agency</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
computed: {
|
||||||
|
staticData() {
|
||||||
|
return this.$store.state.staticData.pwa[this.$route.params.lang]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,51 @@
|
|||||||
|
<template>
|
||||||
|
<header class="pwa-header">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-6">
|
||||||
|
<div class="logo">
|
||||||
|
<logo/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-6 options">
|
||||||
|
<nuxt-link :to="{name: 'lang-pwa',params: {lang: 'fa'}}">FA</nuxt-link>
|
||||||
|
<nuxt-link :to="{name: 'lang-pwa',params: {lang: 'en'}}">EN</nuxt-link>
|
||||||
|
<i :class="darkMode ? 'fas fa-sun' : 'fad fa-moon'" @click="toggleDarkMode"></i>
|
||||||
|
<i :class="aboutPage ? 'fas fa-times-circle' : 'fas fa-info-circle'" @click="showAbout"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
darkMode: false,
|
||||||
|
aboutPage: false,
|
||||||
|
aboutPageTL: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
staticData() {
|
||||||
|
return this.$store.state.staticData.pwa[this.$route.params.lang]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
toggleDarkMode() {
|
||||||
|
this.darkMode = !this.darkMode
|
||||||
|
this.$emit('darkModeStatus', this.darkMode)
|
||||||
|
},
|
||||||
|
showAbout() {
|
||||||
|
!this.aboutPage ? this.aboutPageTL.play() : this.aboutPageTL.play().reverse()
|
||||||
|
this.aboutPage = !this.aboutPage
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.aboutPageTL = this.$gsap.timeline({paused: true})
|
||||||
|
.to($('.pwa .pwa-about'), {autoAlpha: 1, duration: 0.1})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@@ -13,25 +13,6 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
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() {
|
head() {
|
||||||
return {
|
return {
|
||||||
htmlAttrs: {
|
htmlAttrs: {
|
||||||
|
|||||||
@@ -0,0 +1,39 @@
|
|||||||
|
<template>
|
||||||
|
<div class="pwa" :class="darkMode ? 'dark-mode' : null">
|
||||||
|
<div class="connection-status" v-if="$nuxt.isOffline">
|
||||||
|
<p>{{ staticData.connection }}</p>
|
||||||
|
</div>
|
||||||
|
<pwa-about/>
|
||||||
|
<pwa-header @darkModeStatus="changeTheme"/>
|
||||||
|
<nuxt/>
|
||||||
|
<page-load/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
darkMode: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
staticData() {
|
||||||
|
return this.$store.state.staticData.pwa[this.$route.params.lang]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
changeTheme(val) {
|
||||||
|
this.darkMode = val
|
||||||
|
}
|
||||||
|
},
|
||||||
|
head() {
|
||||||
|
return {
|
||||||
|
htmlAttrs: {
|
||||||
|
lang: this.$route.params.lang
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
+24
-4
@@ -1,4 +1,5 @@
|
|||||||
const webpack = require("webpack")
|
const webpack = require("webpack")
|
||||||
|
const {state} = require('./store/global')
|
||||||
export default {
|
export default {
|
||||||
// Global page headers (https://go.nuxtjs.dev/config-head)
|
// Global page headers (https://go.nuxtjs.dev/config-head)
|
||||||
head: {
|
head: {
|
||||||
@@ -39,7 +40,9 @@ export default {
|
|||||||
components: true,
|
components: true,
|
||||||
|
|
||||||
// Modules for dev and build (recommended) (https://go.nuxtjs.dev/config-modules)
|
// Modules for dev and build (recommended) (https://go.nuxtjs.dev/config-modules)
|
||||||
buildModules: [],
|
buildModules: [
|
||||||
|
'@nuxtjs/pwa'
|
||||||
|
],
|
||||||
|
|
||||||
// Modules (https://go.nuxtjs.dev/config-modules)
|
// Modules (https://go.nuxtjs.dev/config-modules)
|
||||||
modules: [
|
modules: [
|
||||||
@@ -47,13 +50,30 @@ export default {
|
|||||||
'@nuxtjs/axios',
|
'@nuxtjs/axios',
|
||||||
'@nuxtjs/auth'
|
'@nuxtjs/auth'
|
||||||
],
|
],
|
||||||
|
pwa: {
|
||||||
|
manifest: {
|
||||||
|
name: 'وزن گریتینگ',
|
||||||
|
short_name: 'ArakRail Grating',
|
||||||
|
// description: state().meta_description.fa,
|
||||||
|
description: false,
|
||||||
|
lang: 'fa',
|
||||||
|
useWebmanifestExtension: false,
|
||||||
|
start_url: '/fa/pwa'
|
||||||
|
},
|
||||||
|
meta: {
|
||||||
|
mobileAppIOS: true,
|
||||||
|
name: 'اراک ریل'
|
||||||
|
},
|
||||||
|
workbox: {
|
||||||
|
cleanupOutdatedCaches: true
|
||||||
|
}
|
||||||
|
},
|
||||||
// Axios module configuration (https://go.nuxtjs.dev/config-axios)
|
// Axios module configuration (https://go.nuxtjs.dev/config-axios)
|
||||||
axios: {
|
axios: {
|
||||||
proxy: true
|
proxy: true
|
||||||
},
|
},
|
||||||
proxy: {
|
proxy: {
|
||||||
'/api': {target: 'http://127.0.0.1:7320'}
|
'/api': {target: 'http://127.0.0.1:6096'}
|
||||||
},
|
},
|
||||||
|
|
||||||
// Build Configuration (https://go.nuxtjs.dev/config-build)
|
// Build Configuration (https://go.nuxtjs.dev/config-build)
|
||||||
@@ -72,7 +92,7 @@ export default {
|
|||||||
},
|
},
|
||||||
server: {
|
server: {
|
||||||
host: '0.0.0.0',
|
host: '0.0.0.0',
|
||||||
port: 7320
|
port: 6096
|
||||||
},
|
},
|
||||||
serverMiddleware: ['~/api/index'],
|
serverMiddleware: ['~/api/index'],
|
||||||
auth: {
|
auth: {
|
||||||
|
|||||||
Generated
+112
@@ -1881,6 +1881,82 @@
|
|||||||
"http-proxy-middleware": "^1.0.4"
|
"http-proxy-middleware": "^1.0.4"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"@nuxtjs/pwa": {
|
||||||
|
"version": "3.3.5",
|
||||||
|
"resolved": "https://registry.npmjs.org/@nuxtjs/pwa/-/pwa-3.3.5.tgz",
|
||||||
|
"integrity": "sha512-8tTmW8DBspWxlJwTimOHTkwfkwPpL9wIcGmy75Gcmin+c9YtX2Ehxmhgt/TLFOC9XsLAqojqynw3/Agr/9OE1w==",
|
||||||
|
"dev": true,
|
||||||
|
"requires": {
|
||||||
|
"clone-deep": "^4.0.1",
|
||||||
|
"defu": "^3.2.2",
|
||||||
|
"execa": "^5.0.0",
|
||||||
|
"fs-extra": "^9.1.0",
|
||||||
|
"hasha": "^5.2.2",
|
||||||
|
"jimp-compact": "^0.16.1",
|
||||||
|
"lodash.template": "^4.5.0",
|
||||||
|
"serve-static": "^1.14.1",
|
||||||
|
"workbox-cdn": "^5.1.4"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"execa": {
|
||||||
|
"version": "5.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/execa/-/execa-5.0.0.tgz",
|
||||||
|
"integrity": "sha512-ov6w/2LCiuyO4RLYGdpFGjkcs0wMTgGE8PrkTHikeUy5iJekXyPIKUjifk5CsE0pt7sMCrMZ3YNqoCj6idQOnQ==",
|
||||||
|
"dev": true,
|
||||||
|
"requires": {
|
||||||
|
"cross-spawn": "^7.0.3",
|
||||||
|
"get-stream": "^6.0.0",
|
||||||
|
"human-signals": "^2.1.0",
|
||||||
|
"is-stream": "^2.0.0",
|
||||||
|
"merge-stream": "^2.0.0",
|
||||||
|
"npm-run-path": "^4.0.1",
|
||||||
|
"onetime": "^5.1.2",
|
||||||
|
"signal-exit": "^3.0.3",
|
||||||
|
"strip-final-newline": "^2.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"fs-extra": {
|
||||||
|
"version": "9.1.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
|
||||||
|
"integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
|
||||||
|
"dev": true,
|
||||||
|
"requires": {
|
||||||
|
"at-least-node": "^1.0.0",
|
||||||
|
"graceful-fs": "^4.2.0",
|
||||||
|
"jsonfile": "^6.0.1",
|
||||||
|
"universalify": "^2.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"get-stream": {
|
||||||
|
"version": "6.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.0.tgz",
|
||||||
|
"integrity": "sha512-A1B3Bh1UmL0bidM/YX2NsCOTnGJePL9rO/M+Mw3m9f2gUpfokS0hi5Eah0WSUEWZdZhIZtMjkIYS7mDfOqNHbg==",
|
||||||
|
"dev": true
|
||||||
|
},
|
||||||
|
"human-signals": {
|
||||||
|
"version": "2.1.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
|
||||||
|
"integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
|
||||||
|
"dev": true
|
||||||
|
},
|
||||||
|
"jsonfile": {
|
||||||
|
"version": "6.1.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
|
||||||
|
"integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
|
||||||
|
"dev": true,
|
||||||
|
"requires": {
|
||||||
|
"graceful-fs": "^4.1.6",
|
||||||
|
"universalify": "^2.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"universalify": {
|
||||||
|
"version": "2.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
|
||||||
|
"integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
|
||||||
|
"dev": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
"@nuxtjs/youch": {
|
"@nuxtjs/youch": {
|
||||||
"version": "4.2.3",
|
"version": "4.2.3",
|
||||||
"resolved": "https://registry.npmjs.org/@nuxtjs/youch/-/youch-4.2.3.tgz",
|
"resolved": "https://registry.npmjs.org/@nuxtjs/youch/-/youch-4.2.3.tgz",
|
||||||
@@ -2632,6 +2708,12 @@
|
|||||||
"integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k=",
|
"integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k=",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"at-least-node": {
|
||||||
|
"version": "1.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz",
|
||||||
|
"integrity": "sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==",
|
||||||
|
"dev": true
|
||||||
|
},
|
||||||
"atob": {
|
"atob": {
|
||||||
"version": "2.1.2",
|
"version": "2.1.2",
|
||||||
"resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
|
"resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
|
||||||
@@ -6044,6 +6126,24 @@
|
|||||||
"minimalistic-assert": "^1.0.1"
|
"minimalistic-assert": "^1.0.1"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"hasha": {
|
||||||
|
"version": "5.2.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/hasha/-/hasha-5.2.2.tgz",
|
||||||
|
"integrity": "sha512-Hrp5vIK/xr5SkeN2onO32H0MgNZ0f17HRNH39WfL0SYUNOTZ5Lz1TJ8Pajo/87dYGEFlLMm7mIc/k/s6Bvz9HQ==",
|
||||||
|
"dev": true,
|
||||||
|
"requires": {
|
||||||
|
"is-stream": "^2.0.0",
|
||||||
|
"type-fest": "^0.8.0"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"type-fest": {
|
||||||
|
"version": "0.8.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz",
|
||||||
|
"integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==",
|
||||||
|
"dev": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
"he": {
|
"he": {
|
||||||
"version": "1.2.0",
|
"version": "1.2.0",
|
||||||
"resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
|
"resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
|
||||||
@@ -6892,6 +6992,12 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"jimp-compact": {
|
||||||
|
"version": "0.16.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/jimp-compact/-/jimp-compact-0.16.1.tgz",
|
||||||
|
"integrity": "sha512-dZ6Ra7u1G8c4Letq/B5EzAxj4tLFHL+cGtdpR+PVm4yzPDj+lCk+AbivWt1eOM+ikzkowtyV7qSqX6qr3t71Ww==",
|
||||||
|
"dev": true
|
||||||
|
},
|
||||||
"jiti": {
|
"jiti": {
|
||||||
"version": "0.1.12",
|
"version": "0.1.12",
|
||||||
"resolved": "https://registry.npmjs.org/jiti/-/jiti-0.1.12.tgz",
|
"resolved": "https://registry.npmjs.org/jiti/-/jiti-0.1.12.tgz",
|
||||||
@@ -12959,6 +13065,12 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"workbox-cdn": {
|
||||||
|
"version": "5.1.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/workbox-cdn/-/workbox-cdn-5.1.4.tgz",
|
||||||
|
"integrity": "sha512-04gM3mi8QGutokkSaA9xunVfjURnLbo9TTWyi8+pSDCEW5cD8u5GbJiliLK1vB9CShk/9OY1UDfW+XcmD+d6KQ==",
|
||||||
|
"dev": true
|
||||||
|
},
|
||||||
"worker-farm": {
|
"worker-farm": {
|
||||||
"version": "1.7.0",
|
"version": "1.7.0",
|
||||||
"resolved": "https://registry.npmjs.org/worker-farm/-/worker-farm-1.7.0.tgz",
|
"resolved": "https://registry.npmjs.org/worker-farm/-/worker-farm-1.7.0.tgz",
|
||||||
|
|||||||
@@ -34,6 +34,7 @@
|
|||||||
"vue-persian-datetime-picker": "^2.4.1"
|
"vue-persian-datetime-picker": "^2.4.1"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
"@nuxtjs/pwa": "^3.3.5",
|
||||||
"node-sass": "^4.14.1",
|
"node-sass": "^4.14.1",
|
||||||
"sass-loader": "^8.0.2"
|
"sass-loader": "^8.0.2"
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -10,353 +10,10 @@
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="s2">
|
<calculation-app :titleTxt="staticData.app.t3"/>
|
||||||
<div class="container">
|
|
||||||
<div class="row">
|
|
||||||
|
|
||||||
<div class="app m-auto" :class="app.method === 'custom' ? 'col-12 col-lg-9 col-xl-8 col-xxl-6' : 'col-12'">
|
<calculation-guide-tables/>
|
||||||
<div class="container-fluid">
|
|
||||||
<div class="row">
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<div class="appTitle">
|
|
||||||
<h2 class="title">{{ staticData.app.t3 }}</h2>
|
|
||||||
</div>
|
|
||||||
<div class="appMethod">
|
|
||||||
<span class="txt">{{ staticData.app.t4 }}</span>
|
|
||||||
<el-radio-group v-model="app.method" style="direction: ltr">
|
|
||||||
<template v-if="$route.params.lang === 'fa'">
|
|
||||||
<el-radio-button label="classified">{{ staticData.app.t5 }}</el-radio-button>
|
|
||||||
<el-radio-button label="custom">{{ staticData.app.t6 }}</el-radio-button>
|
|
||||||
</template>
|
|
||||||
<template v-else>
|
|
||||||
<el-radio-button label="custom">{{ staticData.app.t6 }}</el-radio-button>
|
|
||||||
<el-radio-button label="classified">{{ staticData.app.t5 }}</el-radio-button>
|
|
||||||
</template>
|
|
||||||
</el-radio-group>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12 col-lg-6 mb-5 mb-lg-0" v-if="app.method === 'classified'">
|
|
||||||
<div class="appLayout">
|
|
||||||
<h2 class="layoutTitle">{{ staticData.app.t7 }}</h2>
|
|
||||||
<div class="class">
|
|
||||||
<h4>{{ staticData.app.t8 }}</h4>
|
|
||||||
<el-radio v-model="app.vehicleClass" label="class1">{{ staticData.app.t9 }}</el-radio>
|
|
||||||
</div>
|
|
||||||
<div class="class">
|
|
||||||
<h4>{{ staticData.app.t10 }}</h4>
|
|
||||||
<el-radio v-model="app.vehicleClass" label="class2">{{ staticData.app.t11 }}</el-radio>
|
|
||||||
<el-radio v-model="app.vehicleClass" label="class3">{{ staticData.app.t12 }}</el-radio>
|
|
||||||
<el-radio v-model="app.vehicleClass" label="class4">{{ staticData.app.t13 }}</el-radio>
|
|
||||||
</div>
|
|
||||||
<div class="class">
|
|
||||||
<h4>{{ staticData.app.t14 }}</h4>
|
|
||||||
<el-radio v-model="app.vehicleClass" label="FL1">FL1</el-radio>
|
|
||||||
<el-radio v-model="app.vehicleClass" label="FL2">FL2</el-radio>
|
|
||||||
<el-radio v-model="app.vehicleClass" label="FL3">FL3</el-radio>
|
|
||||||
<el-radio v-model="app.vehicleClass" label="FL4">FL4</el-radio>
|
|
||||||
<el-radio v-model="app.vehicleClass" label="FL5">FL5</el-radio>
|
|
||||||
<el-radio v-model="app.vehicleClass" label="FL6">FL6</el-radio>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div :class="app.method === 'custom' ? 'col-12' : 'col-12 col-lg-6'">
|
|
||||||
<div class="appLayout">
|
|
||||||
<h2 class="layoutTitle">{{ staticData.app.t15 }}</h2>
|
|
||||||
<el-form key="form-a">
|
|
||||||
<el-form-item :label="staticData.app.t16">
|
|
||||||
<el-radio-group v-model="app.gratingType">
|
|
||||||
<el-radio label="forge">{{ staticData.app.t17 }}</el-radio>
|
|
||||||
<el-radio label="pressured">{{ staticData.app.t18 }}</el-radio>
|
|
||||||
</el-radio-group>
|
|
||||||
</el-form-item>
|
|
||||||
|
|
||||||
<el-form-item :label="staticData.app.t19" v-if="app.method === 'custom'">
|
|
||||||
<el-radio-group v-model="app.loadType">
|
|
||||||
<el-radio label="pointedLoad">{{ staticData.app.t20 }}</el-radio>
|
|
||||||
<el-radio label="distributedLoad">{{ staticData.app.t21 }}</el-radio>
|
|
||||||
</el-radio-group>
|
|
||||||
</el-form-item>
|
|
||||||
|
|
||||||
<el-form-item :class="validation.pointedLoadValue ? 'is-error' : null" :label="staticData.app.t22" v-if="app.method === 'custom' && app.loadType === 'pointedLoad'">
|
|
||||||
<el-input inputmode="numeric" pattern="[0-9]*" v-model="app.pointedLoadValue" :placeholder="staticData.app.enter"></el-input>
|
|
||||||
<p class="err" v-if="validation.pointedLoadValue">{{ validation.pointedLoadValue.msg }}</p>
|
|
||||||
</el-form-item>
|
|
||||||
|
|
||||||
<el-form-item :class="validation.distributedLoadValue ? 'is-error' : null" :label="staticData.app.t23" v-if="app.method === 'custom' && app.loadType === 'distributedLoad'">
|
|
||||||
<el-input inputmode="numeric" pattern="[0-9]*" v-model="app.distributedLoadValue" :placeholder="staticData.app.enter"></el-input>
|
|
||||||
<p class="err" v-if="validation.distributedLoadValue">{{ validation.distributedLoadValue.msg }}</p>
|
|
||||||
</el-form-item>
|
|
||||||
|
|
||||||
<el-form-item :class="validation.bearingBarPitch ? 'is-error' : null" :label="staticData.app.t24">
|
|
||||||
|
|
||||||
<el-select v-model="app.bearingBarPitch" key="bearingBarPitch_forge" v-if="app.gratingType === 'forge'"
|
|
||||||
:placeholder="staticData.app.select">
|
|
||||||
<el-option
|
|
||||||
v-for="item in calculationValues.bearingBarPitch_forge"
|
|
||||||
:key="item"
|
|
||||||
:label="item"
|
|
||||||
:value="item">
|
|
||||||
</el-option>
|
|
||||||
</el-select>
|
|
||||||
|
|
||||||
<el-select v-model="app.bearingBarPitch" key="bearingBarPitch_pressured" v-if="app.gratingType === 'pressured'" :placeholder="staticData.app.select">
|
|
||||||
<el-option
|
|
||||||
v-for="item in calculationValues.bearingBarPitch_pressured"
|
|
||||||
:key="item"
|
|
||||||
:label="item"
|
|
||||||
:value="item">
|
|
||||||
</el-option>
|
|
||||||
</el-select>
|
|
||||||
|
|
||||||
<p class="err" v-if="validation.bearingBarPitch">{{ validation.bearingBarPitch.msg }}</p>
|
|
||||||
|
|
||||||
</el-form-item>
|
|
||||||
|
|
||||||
<el-form-item :class="validation.crossBarPitch ? 'is-error' : null" :label="staticData.app.t25">
|
|
||||||
|
|
||||||
<el-select v-model="app.crossBarPitch" key="crossBarPitch_forge" v-if="app.gratingType === 'forge'" :placeholder="staticData.app.select">
|
|
||||||
<el-option
|
|
||||||
v-for="item in calculationValues.crossBarPitch_forge"
|
|
||||||
:key="item"
|
|
||||||
:label="item"
|
|
||||||
:value="item">
|
|
||||||
</el-option>
|
|
||||||
</el-select>
|
|
||||||
|
|
||||||
<el-select v-model="app.crossBarPitch" key="crossBarPitch_pressured" v-if="app.gratingType === 'pressured'" :placeholder="staticData.app.select">
|
|
||||||
<el-option
|
|
||||||
v-for="item in calculationValues.crossBarPitch_pressured"
|
|
||||||
:key="item"
|
|
||||||
:label="item"
|
|
||||||
:value="item">
|
|
||||||
</el-option>
|
|
||||||
</el-select>
|
|
||||||
|
|
||||||
<p class="err" v-if="validation.crossBarPitch">{{ validation.crossBarPitch.msg }}</p>
|
|
||||||
|
|
||||||
</el-form-item>
|
|
||||||
|
|
||||||
<el-form-item :class="validation.clearSpan ? 'is-error' : null" :label="staticData.app.t26">
|
|
||||||
<el-input inputmode="numeric" pattern="[0-9]*" v-model="app.clearSpan" :placeholder="staticData.app.enter"></el-input>
|
|
||||||
<p class="err" v-if="validation.clearSpan">{{ validation.clearSpan.msg }}</p>
|
|
||||||
</el-form-item>
|
|
||||||
|
|
||||||
<el-form-item :class="validation.bearingBarThickness ? 'is-error' : null" :label="staticData.app.t27">
|
|
||||||
<el-input inputmode="numeric" pattern="[0-9]*" v-model="app.bearingBarThickness" :placeholder="staticData.app.enter"></el-input>
|
|
||||||
<p class="err" v-if="validation.bearingBarThickness">{{ validation.bearingBarThickness.msg }}</p>
|
|
||||||
</el-form-item>
|
|
||||||
|
|
||||||
<!-- cross bar thickness -->
|
|
||||||
<el-form-item :class="validation.crossBarThickness ? 'is-error' : null" :label="staticData.app.t30" v-if="app.gratingType === 'pressured'">
|
|
||||||
<el-input inputmode="numeric" pattern="[0-9]*" v-model="app.crossBarThickness" :placeholder="staticData.app.enter"></el-input>
|
|
||||||
<p class="err" v-if="validation.crossBarThickness">{{ validation.crossBarThickness.msg }}</p>
|
|
||||||
</el-form-item>
|
|
||||||
<!-- cross bar thickness -->
|
|
||||||
|
|
||||||
<el-form-item :class="validation.bearingBarHeight ? 'is-error' : null" :label="staticData.app.t28">
|
|
||||||
<el-select v-model="app.bearingBarHeight"
|
|
||||||
key="bearingBarHeight"
|
|
||||||
:placeholder="relativeValues || app.loadType === 'distributedLoad' ? staticData.app.select : staticData.app.t29">
|
|
||||||
<el-option
|
|
||||||
v-for="item in app.loadType === 'distributedLoad' ? calculationValues.bearingBarHeight : relativeValues"
|
|
||||||
:key="item"
|
|
||||||
:label="item"
|
|
||||||
:value="item">
|
|
||||||
</el-option>
|
|
||||||
</el-select>
|
|
||||||
<p class="err" v-if="validation.bearingBarHeight">{{ validation.bearingBarHeight.msg }}</p>
|
|
||||||
</el-form-item>
|
|
||||||
|
|
||||||
<!-- cross bar height -->
|
|
||||||
<el-form-item :class="validation.crossBarHeight ? 'is-error' : null" :label="staticData.app.t31" v-if="app.gratingType === 'pressured'">
|
|
||||||
<el-input inputmode="numeric" pattern="[0-9]*" v-model="app.crossBarHeight" :placeholder="staticData.app.enter"></el-input>
|
|
||||||
<p class="err" v-if="validation.crossBarHeight">{{ validation.crossBarHeight.msg }}</p>
|
|
||||||
</el-form-item>
|
|
||||||
<!-- cross bar height -->
|
|
||||||
|
|
||||||
<div class="calculateBtn">
|
|
||||||
<button class="btn btn-reverse-fill" @click.prevent="calculate">{{ staticData.app.calculate }}</button>
|
|
||||||
</div>
|
|
||||||
</el-form>
|
|
||||||
<div class="copyRight">
|
|
||||||
<p>Design And develop by <a href="https://www.negarehagency.com" target="_blank">negarehagency.com</a></p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12 mt-5">
|
|
||||||
<div class="appResult" v-if="waiting || appResult || validation">
|
|
||||||
<p class="waiting" v-if="waiting">{{ staticData.app.waiting }}</p>
|
|
||||||
<p class="err" v-if="!appResult && !waiting">{{ staticData.app.validationErr }}</p>
|
|
||||||
<p v-if="appResult" :class="appResult.sigmaStatus ? 'success' : 'failure'">{{ appResult.sigma }}</p>
|
|
||||||
<p v-if="appResult" :class="appResult.deflectionStatus ? 'success' : 'failure'">{{ appResult.deflection }}</p>
|
|
||||||
</div>
|
|
||||||
<div class="weight" v-if="!validation && waiting || appResult">
|
|
||||||
<p v-if="appResult">{{ staticData.app.t32 }}</p>
|
|
||||||
<p dir="ltr">
|
|
||||||
<b class="colored"> {{ appResult.gratingWeight.normal }} </b>
|
|
||||||
<b> Kg/m<sup>2</sup> </b>
|
|
||||||
</p>
|
|
||||||
<br>
|
|
||||||
<p v-if="appResult">{{ staticData.app.t33 }}</p>
|
|
||||||
<p dir="ltr">
|
|
||||||
<b class="colored"> {{ appResult.gratingWeight.galvanized }} </b>
|
|
||||||
<b> Kg/m<sup>2</sup> </b>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="s3">
|
|
||||||
<div class="container">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-12">
|
|
||||||
<div class="tableBox vehicles">
|
|
||||||
<table>
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th colspan="4" class="center">{{ staticData.table1.title }}</th>
|
|
||||||
<th class="middle">{{ staticData.table1.load }}</th>
|
|
||||||
<th>{{ staticData.table1.imprint }}</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td>{{ staticData.table1.class1.t1 }}</td>
|
|
||||||
<td>{{ staticData.table1.class1.t2 }}</td>
|
|
||||||
<td>{{ staticData.table1.class1.t3 }}</td>
|
|
||||||
<td>{{ staticData.table1.danSqm }}</td>
|
|
||||||
<td>600</td>
|
|
||||||
<td>1000 x 1000</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="odd">
|
|
||||||
<td>{{ staticData.table1.class2.t1 }}</td>
|
|
||||||
<td>{{ staticData.table1.class2.t2 }}</td>
|
|
||||||
<td>{{ staticData.table1.class2.t3 }}</td>
|
|
||||||
<td>{{ staticData.table1.danImprint }}</td>
|
|
||||||
<td>1.000</td>
|
|
||||||
<td>200 x 200</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>{{ staticData.table1.class3.t1 }}</td>
|
|
||||||
<td>{{ staticData.table1.class3.t2 }}</td>
|
|
||||||
<td>{{ staticData.table1.class3.t3 }}</td>
|
|
||||||
<td>{{ staticData.table1.danImprint }}</td>
|
|
||||||
<td>3.000</td>
|
|
||||||
<td>200 x 400</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="odd">
|
|
||||||
<td>{{ staticData.table1.class4.t1 }}</td>
|
|
||||||
<td>{{ staticData.table1.class4.t2 }}</td>
|
|
||||||
<td>{{ staticData.table1.class4.t3 }}</td>
|
|
||||||
<td>{{ staticData.table1.danImprint }}</td>
|
|
||||||
<td>9.000</td>
|
|
||||||
<td>250 x 600</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
<p class="notice">{{ staticData.scrollToSee }}</p>
|
|
||||||
<div class="tableBox forklifts">
|
|
||||||
<table>
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th colspan="6" class="center">{{ staticData.table2.title }}</th>
|
|
||||||
<th class="middle">{{ staticData.table2.load }}</th>
|
|
||||||
<th>{{ staticData.table2.imprint }}</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td></td>
|
|
||||||
<td>{{ staticData.table2.t1 }}</td>
|
|
||||||
<td>{{ staticData.table2.t2 }}</td>
|
|
||||||
<td>{{ staticData.table2.t3 }}</td>
|
|
||||||
<td>{{ staticData.table2.t4 }}</td>
|
|
||||||
<td></td>
|
|
||||||
<td></td>
|
|
||||||
<td></td>
|
|
||||||
</tr>
|
|
||||||
<tr class="odd">
|
|
||||||
<td>{{ staticData.table2.fl1.t1 }}</td>
|
|
||||||
<td>{{ staticData.table2.fl1.t2 }}</td>
|
|
||||||
<td>21</td>
|
|
||||||
<td>10</td>
|
|
||||||
<td>31</td>
|
|
||||||
<td>{{ staticData.table2.danImprint }}</td>
|
|
||||||
<td>2600</td>
|
|
||||||
<td>130 x 130</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>{{ staticData.table2.fl2.t1 }}</td>
|
|
||||||
<td>{{ staticData.table2.fl2.t2 }}</td>
|
|
||||||
<td>31</td>
|
|
||||||
<td>15</td>
|
|
||||||
<td>46</td>
|
|
||||||
<td>{{ staticData.table2.danImprint }}</td>
|
|
||||||
<td>4000</td>
|
|
||||||
<td>175 x 150</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="odd">
|
|
||||||
<td>{{ staticData.table2.fl3.t1 }}</td>
|
|
||||||
<td>{{ staticData.table2.fl3.t2 }}</td>
|
|
||||||
<td>44</td>
|
|
||||||
<td>25</td>
|
|
||||||
<td>69</td>
|
|
||||||
<td>{{ staticData.table2.danImprint }}</td>
|
|
||||||
<td>6300</td>
|
|
||||||
<td>200 x 200</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>{{ staticData.table2.fl4.t1 }}</td>
|
|
||||||
<td>{{ staticData.table2.fl4.t2 }}</td>
|
|
||||||
<td>60</td>
|
|
||||||
<td>40</td>
|
|
||||||
<td>100</td>
|
|
||||||
<td>{{ staticData.table2.danImprint }}</td>
|
|
||||||
<td>9000</td>
|
|
||||||
<td>300 x 200</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="odd">
|
|
||||||
<td>{{ staticData.table2.fl5.t1 }}</td>
|
|
||||||
<td>{{ staticData.table2.fl5.t2 }}</td>
|
|
||||||
<td>90</td>
|
|
||||||
<td>60</td>
|
|
||||||
<td>150</td>
|
|
||||||
<td>{{ staticData.table2.danImprint }}</td>
|
|
||||||
<td>14000</td>
|
|
||||||
<td>375 x 200</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>{{ staticData.table2.fl6.t1 }}</td>
|
|
||||||
<td>{{ staticData.table2.fl6.t2 }}</td>
|
|
||||||
<td>110</td>
|
|
||||||
<td>80</td>
|
|
||||||
<td>190</td>
|
|
||||||
<td>{{ staticData.table2.danImprint }}</td>
|
|
||||||
<td>17000</td>
|
|
||||||
<td>450 x 200</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
<p class="notice">{{ staticData.scrollToSee }}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -365,116 +22,12 @@
|
|||||||
import {fadeInAnimation} from '~/mixins/animations'
|
import {fadeInAnimation} from '~/mixins/animations'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
app: {
|
|
||||||
method: 'custom',
|
|
||||||
gratingType: 'forge',
|
|
||||||
loadType: 'pointedLoad',
|
|
||||||
vehicleClass: 'class1',
|
|
||||||
pointedLoadValue: '',
|
|
||||||
distributedLoadValue: '',
|
|
||||||
bearingBarPitch: '',
|
|
||||||
crossBarPitch: '',
|
|
||||||
clearSpan: '',
|
|
||||||
bearingBarThickness: '',
|
|
||||||
crossBarThickness: '',
|
|
||||||
bearingBarHeight: '',
|
|
||||||
crossBarHeight: '',
|
|
||||||
locale: this.$route.params.lang
|
|
||||||
},
|
|
||||||
calculationValues: null,
|
|
||||||
relativeValues: null,
|
|
||||||
validation: {},
|
|
||||||
waiting: false,
|
|
||||||
appResult: null
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
computed: {
|
||||||
staticData() {
|
staticData() {
|
||||||
return this.$store.state.staticData.calculation[this.$route.params.lang]
|
return this.$store.state.staticData.calculation[this.$route.params.lang]
|
||||||
},
|
|
||||||
gratingTypeTrigger() {
|
|
||||||
return this.app.gratingType
|
|
||||||
},
|
|
||||||
crossBarPitchTrigger() {
|
|
||||||
return this.app.crossBarPitch
|
|
||||||
},
|
|
||||||
loadTypeTrigger() {
|
|
||||||
return this.app.loadType
|
|
||||||
},
|
|
||||||
vehicleClassTrigger() {
|
|
||||||
return this.app.vehicleClass
|
|
||||||
},
|
|
||||||
methodTrigger() {
|
|
||||||
return this.app.method
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
loadTypeTrigger(newVal, oldVal) {
|
|
||||||
this.app.bearingBarHeight = ''
|
|
||||||
},
|
|
||||||
gratingTypeTrigger(newVal, oldVal) {
|
|
||||||
this.app.bearingBarPitch = ''
|
|
||||||
this.app.crossBarPitch = ''
|
|
||||||
},
|
|
||||||
crossBarPitchTrigger(newVal, oldVal) {
|
|
||||||
if (this.app.loadType === 'pointedLoad') {
|
|
||||||
this.app.bearingBarHeight = ''
|
|
||||||
const data = {
|
|
||||||
gratingType: this.app.gratingType,
|
|
||||||
crossBarPitch: this.app.crossBarPitch
|
|
||||||
}
|
|
||||||
this.$axios.post('/api/public/calculation/relativeValues', data)
|
|
||||||
.then(res => {
|
|
||||||
this.relativeValues = res.data
|
|
||||||
})
|
|
||||||
.catch(err => {
|
|
||||||
this.relativeValues = null
|
|
||||||
})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
vehicleClassTrigger(newVal, oldVal) {
|
|
||||||
this.app.crossBarPitch = ''
|
|
||||||
if (newVal === 'class1') this.app.loadType = 'distributedLoad'
|
|
||||||
else this.app.loadType = 'pointedLoad'
|
|
||||||
},
|
|
||||||
methodTrigger(newVal, oldVal) {
|
|
||||||
if (newVal === 'classified') {
|
|
||||||
this.app.vehicleClass = 'class1'
|
|
||||||
this.app.loadType = 'distributedLoad'
|
|
||||||
} else {
|
|
||||||
this.app.vehicleClass = ''
|
|
||||||
this.app.loadType = 'pointedLoad'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
waiting() {
|
|
||||||
setTimeout(() => {
|
|
||||||
this.$gsap.timeline()
|
|
||||||
.to($('.app .appResult,.app .weight'), {opacity: 1, paddingTop: 20, paddingBottom: 20, duration: 0.2})
|
|
||||||
.to($('.app .appResult p,.app .weight p'), {opacity: 1, fontSize: 16, letterSpacing: 0, duration: 0.2}, 0)
|
|
||||||
}, 100)
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mixins: [fadeInAnimation],
|
mixins: [fadeInAnimation],
|
||||||
methods: {
|
|
||||||
calculate() {
|
|
||||||
this.validation = {}
|
|
||||||
this.waiting = true
|
|
||||||
this.appResult = null
|
|
||||||
setTimeout(() => {
|
|
||||||
this.$axios.post('/api/public/calculate', this.app)
|
|
||||||
.then(res => {
|
|
||||||
this.waiting = false
|
|
||||||
this.appResult = res.data
|
|
||||||
})
|
|
||||||
.catch(err => {
|
|
||||||
this.waiting = false
|
|
||||||
if (err.response.status === 422) this.validation = err.response.data.validation
|
|
||||||
})
|
|
||||||
}, 2000)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
head() {
|
head() {
|
||||||
return {
|
return {
|
||||||
htmlAttrs: {
|
htmlAttrs: {
|
||||||
@@ -489,26 +42,8 @@ export default {
|
|||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
},
|
|
||||||
async asyncData({$axios}) {
|
|
||||||
const calculationValues = await $axios.get('/api/public/calculation/values')
|
|
||||||
return {
|
|
||||||
calculationValues: calculationValues.data
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
.el-popper .popper__arrow {
|
|
||||||
border-width: 0;
|
|
||||||
filter: none;
|
|
||||||
left: 35px;
|
|
||||||
|
|
||||||
&:lang(fa) {
|
|
||||||
left: auto;
|
|
||||||
right: 35px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
+40
-3
@@ -129,7 +129,7 @@
|
|||||||
|
|
||||||
<section class="s5">
|
<section class="s5">
|
||||||
<img src="~/assets/img/home/hp-s4-i1.jpg" alt="" class="section-bg">
|
<img src="~/assets/img/home/hp-s4-i1.jpg" alt="" class="section-bg">
|
||||||
<div class="txt anim-parallax">
|
<div class="txt anim-fadeIn">
|
||||||
<h2 class="title title-shape">{{ staticData.s4.t1 }} <span>{{ staticData.s4.t2 }}</span></h2>
|
<h2 class="title title-shape">{{ staticData.s4.t1 }} <span>{{ staticData.s4.t2 }}</span></h2>
|
||||||
<p>{{ staticData.s4.t3 }}</p>
|
<p>{{ staticData.s4.t3 }}</p>
|
||||||
<a v-if="catalog && catalog.file" :href="catalog.file[$route.params.lang]" target="_blank" class="btn btn-reverse-fill">{{ staticData.s4.link }}</a>
|
<a v-if="catalog && catalog.file" :href="catalog.file[$route.params.lang]" target="_blank" class="btn btn-reverse-fill">{{ staticData.s4.link }}</a>
|
||||||
@@ -146,7 +146,7 @@
|
|||||||
<h2 class="title title-shape">{{ staticData.s6.t1 }}</h2>
|
<h2 class="title title-shape">{{ staticData.s6.t1 }}</h2>
|
||||||
<p>{{ staticData.s6.t2 }}</p>
|
<p>{{ staticData.s6.t2 }}</p>
|
||||||
<nuxt-link :to="{name: 'lang-calculation',params: {lang: $route.params.lang}}" class="btn btn-primary">{{ staticData.s6.link1 }}</nuxt-link>
|
<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="calc_app_link" target="_blank" class="btn btn-primary-fill">{{ staticData.s6.link2 }}</a>
|
<a @click.prevent="dialogVisible = true" :href="calc_app_link" target="_blank" class="btn btn-primary-fill">{{ staticData.s6.link2 }}</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-2 img-side d-none d-lg-block">
|
<div class="col-2 img-side d-none d-lg-block">
|
||||||
<img src="~/assets/img/home/hp-s6-i1.png" class="anim-fadeIn" alt="">
|
<img src="~/assets/img/home/hp-s6-i1.png" class="anim-fadeIn" alt="">
|
||||||
@@ -154,6 +154,42 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<el-dialog class="install-app-dialog" :title="staticData.s6.link1" :visible.sync="dialogVisible">
|
||||||
|
<div class="install-app-description">
|
||||||
|
<h2>{{ staticData.s6.t3 }}</h2>
|
||||||
|
<p>{{ staticData.s6.t4 }}</p>
|
||||||
|
<div class="imgBox">
|
||||||
|
<img src="~/assets/img/home/android-step-1.jpg" :alt="staticData.s6.link2">
|
||||||
|
</div>
|
||||||
|
<p>{{ staticData.s6.t5 }}</p>
|
||||||
|
<div class="imgBox">
|
||||||
|
<img src="~/assets/img/home/android-step-2.jpg" :alt="staticData.s6.link2">
|
||||||
|
</div>
|
||||||
|
<h2>{{ staticData.s6.t6 }}</h2>
|
||||||
|
<p>{{ staticData.s6.t7 }}</p>
|
||||||
|
<div class="imgBox">
|
||||||
|
<img src="~/assets/img/home/ios-step-1.jpg" :alt="staticData.s6.link2">
|
||||||
|
</div>
|
||||||
|
<p>{{ staticData.s6.t8 }}</p>
|
||||||
|
<div class="imgBox">
|
||||||
|
<img src="~/assets/img/home/ios-step-2.jpg" :alt="staticData.s6.link2">
|
||||||
|
</div>
|
||||||
|
<h2>{{ staticData.s6.t9 }}</h2>
|
||||||
|
<p>{{ staticData.s6.t10 }}</p>
|
||||||
|
<div class="imgBox">
|
||||||
|
<img src="~/assets/img/home/desktop-step-1.jpg" :alt="staticData.s6.link2">
|
||||||
|
</div>
|
||||||
|
<p>{{ staticData.s6.t11 }}</p>
|
||||||
|
<div class="imgBox">
|
||||||
|
<img src="~/assets/img/home/desktop-step-2.jpg" :alt="staticData.s6.link2">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<span slot="footer" class="dialog-footer">
|
||||||
|
<el-button type="primary" @click="dialogVisible = false">{{ staticData.s6.t12 }}</el-button>
|
||||||
|
</span>
|
||||||
|
</el-dialog>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -168,7 +204,8 @@ export default {
|
|||||||
favoriteProducts: null,
|
favoriteProducts: null,
|
||||||
catalog: null,
|
catalog: null,
|
||||||
calc_app_link: this.$store.state.staticData.calc_app_link,
|
calc_app_link: this.$store.state.staticData.calc_app_link,
|
||||||
validation: []
|
validation: {},
|
||||||
|
dialogVisible: false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
|||||||
@@ -0,0 +1,34 @@
|
|||||||
|
<template>
|
||||||
|
<div class="page calculation--page latin-digits">
|
||||||
|
|
||||||
|
<calculation-app/>
|
||||||
|
<calculation-guide-tables/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
computed: {
|
||||||
|
staticData() {
|
||||||
|
return this.$store.state.staticData.pwa[this.$route.params.lang]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
head() {
|
||||||
|
return {
|
||||||
|
htmlAttrs: {
|
||||||
|
title: this.staticData.title
|
||||||
|
},
|
||||||
|
title: this.staticData.title,
|
||||||
|
meta: [
|
||||||
|
{
|
||||||
|
hid: this.staticData.title,
|
||||||
|
name: 'description',
|
||||||
|
content: this.staticData.t1
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
layout: 'pwa'
|
||||||
|
}
|
||||||
|
</script>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 9.5 KiB |
+44
-2
@@ -114,7 +114,17 @@ export const state = () => ({
|
|||||||
t1: 'نرم افزار محاسبه وزن گریتینگ',
|
t1: 'نرم افزار محاسبه وزن گریتینگ',
|
||||||
t2: 'نرم افزار طراحی شده در این بخش، با انجام محاسبات دقیق، آنالیز وزن و مقاومتی گریتینگ را ارائه می کند، با استفاده از این ابزار انتخاب محصول برای شما آسان تر خواهد بود.',
|
t2: 'نرم افزار طراحی شده در این بخش، با انجام محاسبات دقیق، آنالیز وزن و مقاومتی گریتینگ را ارائه می کند، با استفاده از این ابزار انتخاب محصول برای شما آسان تر خواهد بود.',
|
||||||
link1: 'ماژول محاسبات',
|
link1: 'ماژول محاسبات',
|
||||||
link2: 'دانلود نرم افزار'
|
link2: 'نصب نرم افزار',
|
||||||
|
t3: 'آموزش نصب در Android',
|
||||||
|
t4: 'برای نصب نرم افزار اراک ریل در گوشی های اندرویدی ابتدا با مرورگر گوگل کروم وارد سایت اراک ریل شوید و مطابق تصویر زیر دکمه منو را بزنید:',
|
||||||
|
t5: 'سپس گزینه install app را بزنید و برنامه روی گوشی شما نصب میشود.',
|
||||||
|
t6: 'آموزش نصب در iOS',
|
||||||
|
t7: 'برای نصب نرم افزار اراک ریل در گوشی های آیفون ابتدا با مرورگر خود گوشی وارد سایت اراک ریل شوید و مطابق تصویر زیر دکمه اشتراک گزاری را بزنید:',
|
||||||
|
t8: 'سپس گزینه add to home screen را بزنید و برنامه روی گوشی شما نصب میشود.',
|
||||||
|
t9: 'آموزش نصب در کامپیوتر',
|
||||||
|
t10: 'برای نصب نرم افزار اراک ریل در کامپیوتر (Windows,Mac,Linux) ابتدا با مرورگر گوگل کروم وارد سایت اراک ریل شوید و مطابق تصویر زیر دکمه نصب موجود در نوار آدرس را بزنید:',
|
||||||
|
t11: 'سپس گزینه install را بزنید و برنامه روی کامپیوتر شما نصب میشود.',
|
||||||
|
t12: 'متوجه شدم'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
en: {
|
en: {
|
||||||
@@ -165,7 +175,17 @@ export const state = () => ({
|
|||||||
t1: 'Grating weight calculation software',
|
t1: 'Grating weight calculation software',
|
||||||
t2: "The software designed in this section, by performing accurate calculations, provides weight analysis and grating resistance, using this tool, product selection will be easier for you.",
|
t2: "The software designed in this section, by performing accurate calculations, provides weight analysis and grating resistance, using this tool, product selection will be easier for you.",
|
||||||
link1: 'Calculation Module',
|
link1: 'Calculation Module',
|
||||||
link2: 'Download App'
|
link2: 'Install App',
|
||||||
|
t3: 'Android installation tutorial',
|
||||||
|
t4: 'To install Arak Rail software on Android phones, first enter the Arak Rail site with Google Chrome browser and click the menu button according to the image below:',
|
||||||
|
t5: 'Then click install app and the app will be installed on your phone.',
|
||||||
|
t6: 'iOS installation tutorial',
|
||||||
|
t7: 'To install Arak Rail software on iPhones, first enter the Arak Rail site with your phone browser and click the share button as shown below:',
|
||||||
|
t8: 'Then click the add to home screen option and the app will be installed on your phone.',
|
||||||
|
t9: 'Computer installation tutorial',
|
||||||
|
t10: 'To install Arak Rail software on a computer (Windows, Mac, Linux), first enter the Arak Rail site with Google Chrome browser and according to the image below, click the installation button in the address bar:',
|
||||||
|
t11: 'Then click install and the program will be installed on your computer.',
|
||||||
|
t12: 'Got it!'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -905,6 +925,28 @@ export const state = () => ({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
pwa: {
|
||||||
|
fa: {
|
||||||
|
title: '',
|
||||||
|
connection: 'اتصال اینترنت خود را بررسی نمایید.',
|
||||||
|
t1: 'بدلیل این که وزن گریتینگ ها به واسطه مواردی همچون مشخصات فنی یا همان دیتیل ساخت از جمله نوع گریتینگ،جنس تسمه و اندازه چشمه ها متغیر است،بدین منظور جهت راحتی و سهولت در انجام کار شما مشتری گرامی، شرکت اراک ریل نرم افزار محاسبه وزن و میزان بار قابل تحمل را برای گریتینگ طراحی و در این صفحه قرار داده است.که با داشتن مشخصات فنی گریتینگ مورد نظر خود میتوانید وزن گریتینگ خود را همراه با گالوانیزه و یا بدون گالوانیزه محاسبه کنید.',
|
||||||
|
t2: 'توجه داشته باشید که برای بدست آوردن نتایج صحیح محاسبات داخل سرور اصلی اراک ریل انجام میشود و برای محاسبات نیاز به اینترنت دارید.',
|
||||||
|
t3: 'برای اطلاعات بیشتر راجب گریتینگ و تماس با متخصصین شرکت اراک ریل میتوانید به سایت ',
|
||||||
|
t4: ' مراجعه فرمایید. ',
|
||||||
|
t5: 'طراحی و ساخت برنامه توسط نگاره',
|
||||||
|
t6: 'وزن و مقاومت گریتینگ'
|
||||||
|
},
|
||||||
|
en: {
|
||||||
|
title: '',
|
||||||
|
connection: 'Check your internet connection.',
|
||||||
|
t1: 'Due to the fact that the weight of the gratings varies due to items such as technical specifications or construction details such as the type of grating, the type of belt and the size of the springs, for the convenience and ease of your work, dear customer, Arak Rail Company And has designed the amount of tolerable load for the grating and placed it on this page. Having the technical specifications of the grating you want, you can calculate the weight of your grating with or without galvanizing.',
|
||||||
|
t2: 'Note that in order to get the correct results, the calculations are done inside the main server of Arak Rail and you need internet for the calculations.',
|
||||||
|
t3: 'For more information about Grating and contacting the experts of Arak Rail Company, you can visit the site ',
|
||||||
|
t4: '',
|
||||||
|
t5: 'Design and Develop by Negareh',
|
||||||
|
t6: 'Grating weight and strength'
|
||||||
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user