parent
fe5f0c818c
commit
d542c25603
94 changed files with 1112 additions and 647 deletions
File diff suppressed because one or more lines are too long
@ -1,28 +1,27 @@ |
||||
import React, { Component } from 'react'; |
||||
import React from "react"; |
||||
|
||||
import './index.scss'; |
||||
import "./index.scss"; |
||||
|
||||
const maxDesktopSize = 1250; |
||||
|
||||
const fontSize = { |
||||
desktop : { |
||||
desktop: { |
||||
h1: window.innerWidth > maxDesktopSize ? 22 : window.innerWidth / 55, |
||||
span: window.innerWidth > maxDesktopSize ? 14: window.innerWidth / 80, |
||||
span: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 80, |
||||
p: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 80, |
||||
} |
||||
} |
||||
}, |
||||
}; |
||||
export default function Info(props) { |
||||
const {title , subTitle, description} = props; |
||||
return( |
||||
const { title, subTitle, description } = props; |
||||
return ( |
||||
<> |
||||
{ |
||||
window.innerWidth > 1000 ?
|
||||
{window.innerWidth > 1000 ? ( |
||||
<section className="product-info d-flex flex-column"> |
||||
<h1 style={{ fontSize: fontSize.desktop.h1 }}>{title}</h1> |
||||
<span style={{ fontSize: fontSize.desktop.span }}>{subTitle}</span> |
||||
<p style={{ fontSize: fontSize.desktop.p }}>{description}</p> |
||||
</section> : null |
||||
} |
||||
</section> |
||||
) : null} |
||||
</> |
||||
); |
||||
} |
||||
} |
||||
|
||||
@ -0,0 +1,85 @@ |
||||
import React from "react"; |
||||
|
||||
import "./index.scss"; |
||||
|
||||
const maxDesktopSize = 1250; |
||||
const maxMobileSize = 550; |
||||
|
||||
const fontSize = { |
||||
desktop: { |
||||
span: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 80, |
||||
}, |
||||
mobile: { |
||||
span: window.innerWidth > maxMobileSize ? 14 : window.innerWidth / 30, |
||||
}, |
||||
}; |
||||
|
||||
export default function Document(props) { |
||||
const { parent, name } = props; |
||||
console.log({ parent, name }); |
||||
return ( |
||||
<> |
||||
{window.innerWidth < 1000 ? ( |
||||
<div className="support__document d-flex justify-content-center align-items-center mb-3"> |
||||
<input |
||||
type="file" |
||||
name={name} |
||||
onChange={(e) => |
||||
parent.onChange(e.target.name, e.target.files[0], "file") |
||||
} |
||||
/> |
||||
{parent.state.file ? ( |
||||
<span |
||||
style={{ |
||||
fontSize: fontSize.mobile.span, |
||||
width: "100%", |
||||
textAlign: "center", |
||||
margin: "auto", |
||||
}} |
||||
> |
||||
{parent.state.file?.name || "تصویر بارگزاری شد"} |
||||
</span> |
||||
) : ( |
||||
<span style={{ fontSize: fontSize.mobile.span }}> |
||||
در صورت نیاز تصویر مرتبط را انتخاب کنید. |
||||
</span> |
||||
)} |
||||
</div> |
||||
) : null} |
||||
{window.innerWidth > 1000 ? ( |
||||
<div className="support__document d-flex justify-content-center-align-items-center"> |
||||
<input |
||||
type="file" |
||||
name={name} |
||||
onChange={(e) => |
||||
parent.onChange(e.target.name, e.target.files[0], "file") |
||||
} |
||||
/>{" "} |
||||
{parent.state.file ? ( |
||||
<span |
||||
style={{ |
||||
fontSize: fontSize.mobile.span, |
||||
width: "100%", |
||||
textAlign: "center", |
||||
margin: "auto", |
||||
}} |
||||
> |
||||
{parent.state.file?.name || "فایل ثبت شد"} |
||||
</span> |
||||
) : ( |
||||
<span |
||||
style={{ |
||||
fontSize: fontSize.mobile.span, |
||||
width: "100%", |
||||
textAlign: "center", |
||||
margin: "auto", |
||||
}} |
||||
> |
||||
در صورت نیاز تصویر مرتبط را انتخاب کنید. |
||||
</span> |
||||
)} |
||||
</div> |
||||
) : null} |
||||
</> |
||||
); |
||||
} |
||||
@ -0,0 +1,29 @@ |
||||
.support { |
||||
&__document { |
||||
color: gray !important; |
||||
margin: 10px auto; |
||||
width: 100%; |
||||
height: 50px; |
||||
border-radius: 10px; |
||||
border: 2px dashed #d1d1d1; |
||||
position: relative; |
||||
input { |
||||
width: 100%; |
||||
height: 100%; |
||||
position: absolute; |
||||
left: 0px; |
||||
top: 0px; |
||||
opacity: 0; |
||||
} |
||||
img { |
||||
width: 100%; |
||||
height: 100%; |
||||
object-fit: cover; |
||||
border-radius: 50%; |
||||
} |
||||
span { |
||||
color: #afafaf; |
||||
font-family: numeralLight; |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,278 @@ |
||||
.support { |
||||
width: 100vw; |
||||
max-width: 1250px; |
||||
margin: 0px auto; |
||||
padding: 0px 10px; |
||||
direction: rtl; |
||||
min-height: calc(100vh - 288px); |
||||
overflow-x: hidden; |
||||
padding-top: 60px; |
||||
&__forms { |
||||
width: 100%; |
||||
justify-content: space-between; |
||||
margin-top: 30px; |
||||
margin-bottom: 80px; |
||||
&--right { |
||||
width: 45%; |
||||
.MuiOutlinedInput-notchedOutline { |
||||
top: 0px !important; |
||||
} |
||||
.MuiOutlinedInput-notchedOutline { |
||||
border-color: #cecece !important; |
||||
border-width: 1px !important; |
||||
color: green !important; |
||||
border-radius: 10px !important; |
||||
} |
||||
|
||||
.MuiOutlinedInput-input { |
||||
padding: 20px 14px !important; |
||||
font-size: calc(100vw / 85) !important; |
||||
} |
||||
.MuiInputLabel-outlined { |
||||
font-family: numeralLight !important; |
||||
display: inline !important; |
||||
position: absolute; |
||||
text-align: right !important; |
||||
right: 10px; |
||||
top: 12px; |
||||
padding: 0px !important; |
||||
transform: translate(0px, 0px) scale(1) !important; |
||||
} |
||||
.MuiInputLabel-shrink { |
||||
text-align: right !important; |
||||
display: inline; |
||||
position: absolute; |
||||
right: -5px; |
||||
top: -8px; |
||||
transform: translate(0px, 0px) scale(0.75) !important; |
||||
padding-right: 15px !important; |
||||
} |
||||
|
||||
label { |
||||
background-color: white; |
||||
max-width: 120px; |
||||
text-align: center; |
||||
color: #797979 !important; |
||||
letter-spacing: -1px; |
||||
} |
||||
.Mui-focused { |
||||
color: rgba(0, 0, 0, 0.54) !important; |
||||
border-color: #c4c4c5 !important; |
||||
} |
||||
h1 { |
||||
letter-spacing: -2px; |
||||
color: #6cbe44; |
||||
font-family: numeralMedium; |
||||
font-size: calc(100vw / 40); |
||||
} |
||||
p { |
||||
font-family: numeralLight; |
||||
font-size: calc(100vw / 95); |
||||
color: #6f7074; |
||||
} |
||||
|
||||
button { |
||||
align-self: flex-start; |
||||
margin-top: 30px; |
||||
font-family: numeralLight; |
||||
text-decoration: none; |
||||
color: white; |
||||
background-color: #6cbe44; |
||||
border-radius: 6px; |
||||
padding: 5px 25px; |
||||
font-size: calc(100vw / 90); |
||||
max-width: 110px; |
||||
border: 0px; |
||||
&:hover { |
||||
color: white; |
||||
} |
||||
} |
||||
|
||||
.MuiFormControl-root { |
||||
select { |
||||
font-family: numeralLight; |
||||
height: 100%; |
||||
direction: rtl; |
||||
border: 1px solid #cecece !important; |
||||
text-align: center !important; |
||||
border-radius: 10px !important; |
||||
color: #76797e !important; |
||||
&:focus { |
||||
background-color: white !important; |
||||
} |
||||
option { |
||||
padding: 5px !important; |
||||
} |
||||
} |
||||
.MuiNativeSelect-icon { |
||||
display: none; |
||||
} |
||||
.MuiNativeSelect-select { |
||||
padding: 8px 10px 8px 100px !important; |
||||
} |
||||
} |
||||
} |
||||
&--left { |
||||
width: 45%; |
||||
height: 100%; |
||||
p { |
||||
font-family: numeralLight; |
||||
font-size: calc(100vw / 95); |
||||
margin-bottom: 0px; |
||||
color: #6f7074; |
||||
} |
||||
span { |
||||
font-family: numeralLight; |
||||
font-size: calc(100vw / 95); |
||||
margin-bottom: 0px; |
||||
color: #6f7074; |
||||
margin-right: 5px; |
||||
} |
||||
.contact__map { |
||||
width: 100%; |
||||
height: 430px; |
||||
border-radius: 20px; |
||||
img { |
||||
transform: scale(0.4); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.mobile-support { |
||||
width: 100vw; |
||||
max-width: 550px; |
||||
margin: 0px auto; |
||||
padding: 0px 10px; |
||||
direction: rtl; |
||||
overflow-x: hidden; |
||||
padding-top: 70px; |
||||
padding-bottom: 50px; |
||||
&__form { |
||||
width: 100%; |
||||
justify-content: space-between; |
||||
margin-top: 20px; |
||||
margin-bottom: 20px; |
||||
|
||||
.MuiOutlinedInput-notchedOutline { |
||||
top: 0px !important; |
||||
} |
||||
.MuiOutlinedInput-notchedOutline { |
||||
border-color: #cecece !important; |
||||
border-width: 1px !important; |
||||
color: green !important; |
||||
border-radius: 10px !important; |
||||
} |
||||
|
||||
.MuiOutlinedInput-input { |
||||
padding: 20px 14px !important; |
||||
} |
||||
.MuiInputLabel-outlined { |
||||
font-family: numeralLight !important; |
||||
display: inline !important; |
||||
position: absolute; |
||||
text-align: right !important; |
||||
right: 10px; |
||||
top: 12px; |
||||
padding: 0px !important; |
||||
transform: translate(0px, 0px) scale(1) !important; |
||||
} |
||||
.MuiInputLabel-shrink { |
||||
text-align: right !important; |
||||
display: inline; |
||||
position: absolute; |
||||
right: -5px; |
||||
top: -8px; |
||||
transform: translate(0px, 0px) scale(0.75) !important; |
||||
padding-right: 0px !important; |
||||
width: fit-content; |
||||
padding: 0px 6px !important; |
||||
} |
||||
|
||||
label { |
||||
background-color: white; |
||||
max-width: 120px; |
||||
text-align: center; |
||||
color: #797979 !important; |
||||
letter-spacing: -1px; |
||||
font-family: numeralLight !important; |
||||
font-size: 14px; |
||||
} |
||||
.Mui-focused { |
||||
color: rgba(0, 0, 0, 0.54) !important; |
||||
border-color: #c4c4c5 !important; |
||||
} |
||||
h1 { |
||||
letter-spacing: -2px; |
||||
color: #6cbe44; |
||||
font-family: numeralMedium; |
||||
} |
||||
p { |
||||
font-family: numeralLight; |
||||
color: #6f7074; |
||||
} |
||||
|
||||
button { |
||||
align-self: flex-start; |
||||
margin-top: 30px; |
||||
font-family: numeralLight; |
||||
text-decoration: none; |
||||
color: white; |
||||
background-color: #6cbe44; |
||||
border-radius: 6px; |
||||
padding: 8px 25px; |
||||
width: 100%; |
||||
border: 0px; |
||||
&:hover { |
||||
color: white; |
||||
} |
||||
} |
||||
|
||||
.MuiFormControl-root { |
||||
select { |
||||
font-family: numeralLight; |
||||
height: 100%; |
||||
direction: rtl; |
||||
border: 1px solid #cecece !important; |
||||
text-align: center !important; |
||||
border-radius: 10px !important; |
||||
color: #76797e !important; |
||||
&:focus { |
||||
background-color: white !important; |
||||
} |
||||
option { |
||||
padding: 5px !important; |
||||
} |
||||
} |
||||
.MuiNativeSelect-icon { |
||||
display: none; |
||||
} |
||||
.MuiNativeSelect-select { |
||||
padding: 8px 10px 8px 100px !important; |
||||
} |
||||
} |
||||
} |
||||
&__address { |
||||
width: 100%; |
||||
p { |
||||
font-family: numeralLight; |
||||
margin-bottom: 0px; |
||||
color: #6f7074; |
||||
} |
||||
span { |
||||
font-family: numeralLight; |
||||
margin-bottom: 0px; |
||||
color: #6f7074; |
||||
margin-right: 5px; |
||||
} |
||||
&--map { |
||||
width: 100%; |
||||
height: 180px; |
||||
border-radius: 20px; |
||||
img { |
||||
transform: scale(0.4); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
Loading…
Reference in new issue