adaptive vehicle to mobile
This commit is contained in:
@ -322,6 +322,40 @@ function CalculatorPage() {
|
||||
const isHybridTypeVisible = engineType === "Гибридный";
|
||||
const isPowerRatioVisible = engineType === "Гибридный";
|
||||
|
||||
// Общие стили для инпутов
|
||||
const inputCommonStyles = {
|
||||
borderRadius: isMobile ? "5vw" : "2vw",
|
||||
bgcolor: "white",
|
||||
height: isMobile ? "8.5vw" : "2vw",
|
||||
width: "100%",
|
||||
border: "0.1vw solid #C27664",
|
||||
fontFamily: "Unbounded",
|
||||
fontSize: isMobile ? "3.5vw" : "1.2vw",
|
||||
color: "#C27664",
|
||||
};
|
||||
|
||||
// Стили для TextField
|
||||
const textFieldStyles = {
|
||||
"& .MuiOutlinedInput-root": {
|
||||
...inputCommonStyles,
|
||||
"& fieldset": {
|
||||
border: "none",
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
// Стили для Select
|
||||
const selectStyles = {
|
||||
...inputCommonStyles,
|
||||
"& .MuiOutlinedInput-notchedOutline": {
|
||||
border: "none",
|
||||
},
|
||||
"& .MuiSvgIcon-root": {
|
||||
fontSize: isMobile ? "5vw" : "2vw",
|
||||
color: "#C27664",
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
@ -502,23 +536,7 @@ function CalculatorPage() {
|
||||
value={age}
|
||||
onChange={(e) => setAge(e.target.value)}
|
||||
displayEmpty
|
||||
sx={{
|
||||
borderRadius: isMobile ? "5vw" : "2vw",
|
||||
bgcolor: "white",
|
||||
height: isMobile ? "4.5vw" : "2vw",
|
||||
width: "100%",
|
||||
border: "0.1vw solid #C27664",
|
||||
fontFamily: "Unbounded",
|
||||
fontSize: isMobile ? "2.5vw" : "1.2vw",
|
||||
color: "#C27664",
|
||||
"& .MuiOutlinedInput-notchedOutline": {
|
||||
border: "none",
|
||||
},
|
||||
"& .MuiSvgIcon-root": {
|
||||
fontSize: isMobile ? "5vw" : "2vw",
|
||||
color: "#C27664",
|
||||
},
|
||||
}}
|
||||
sx={selectStyles}
|
||||
>
|
||||
<MenuItem value="3">Менее 3х лет</MenuItem>
|
||||
<MenuItem value="3-5">3-5 лет</MenuItem>
|
||||
@ -561,44 +579,14 @@ function CalculatorPage() {
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
sx={{
|
||||
"& .MuiOutlinedInput-root": {
|
||||
borderRadius: isMobile ? "5vw" : "2vw",
|
||||
bgcolor: "white",
|
||||
height: isMobile ? "4.5vw" : "2vw",
|
||||
width: "100%",
|
||||
border: "0.1vw solid #C27664",
|
||||
fontFamily: "Unbounded",
|
||||
fontSize: isMobile ? "2.5vw" : "1.2vw",
|
||||
color: "#C27664",
|
||||
"& fieldset": {
|
||||
border: "none",
|
||||
},
|
||||
},
|
||||
}}
|
||||
sx={textFieldStyles}
|
||||
/>
|
||||
<FormControl fullWidth variant="outlined">
|
||||
<Select
|
||||
value={currency}
|
||||
onChange={(e) => setCurrency(e.target.value as string)}
|
||||
displayEmpty
|
||||
sx={{
|
||||
borderRadius: isMobile ? "5vw" : "2vw",
|
||||
bgcolor: "white",
|
||||
height: isMobile ? "4.5vw" : "2vw",
|
||||
width: "100%",
|
||||
border: "0.1vw solid #C27664",
|
||||
fontFamily: "Unbounded",
|
||||
fontSize: isMobile ? "2.5vw" : "1.2vw",
|
||||
color: "#C27664",
|
||||
"& .MuiOutlinedInput-notchedOutline": {
|
||||
border: "none",
|
||||
},
|
||||
"& .MuiSvgIcon-root": {
|
||||
fontSize: isMobile ? "5vw" : "2vw",
|
||||
color: "#C27664",
|
||||
},
|
||||
}}
|
||||
sx={selectStyles}
|
||||
>
|
||||
<MenuItem value="USD Доллар США">
|
||||
USD Доллар США{" "}
|
||||
@ -655,23 +643,7 @@ function CalculatorPage() {
|
||||
value={engineType}
|
||||
onChange={(e) => setEngineType(e.target.value as string)}
|
||||
displayEmpty
|
||||
sx={{
|
||||
borderRadius: isMobile ? "5vw" : "2vw",
|
||||
bgcolor: "white",
|
||||
height: isMobile ? "4.5vw" : "2vw",
|
||||
width: "100%",
|
||||
border: "0.1vw solid #C27664",
|
||||
fontFamily: "Unbounded",
|
||||
fontSize: isMobile ? "2.5vw" : "1.2vw",
|
||||
color: "#C27664",
|
||||
"& .MuiOutlinedInput-notchedOutline": {
|
||||
border: "none",
|
||||
},
|
||||
"& .MuiSvgIcon-root": {
|
||||
fontSize: isMobile ? "5vw" : "2vw",
|
||||
color: "#C27664",
|
||||
},
|
||||
}}
|
||||
sx={selectStyles}
|
||||
>
|
||||
<MenuItem value="Бензиновый">Бензиновый</MenuItem>
|
||||
<MenuItem value="Дизельный">Дизельный</MenuItem>
|
||||
@ -707,23 +679,7 @@ function CalculatorPage() {
|
||||
value={hybridType}
|
||||
onChange={(e) => setHybridType(e.target.value as string)}
|
||||
displayEmpty
|
||||
sx={{
|
||||
borderRadius: isMobile ? "5vw" : "2vw",
|
||||
bgcolor: "white",
|
||||
height: isMobile ? "4.5vw" : "2vw",
|
||||
width: "100%",
|
||||
border: "0.1vw solid #C27664",
|
||||
fontFamily: "Unbounded",
|
||||
fontSize: isMobile ? "2.5vw" : "1.2vw",
|
||||
color: "#C27664",
|
||||
"& .MuiOutlinedInput-notchedOutline": {
|
||||
border: "none",
|
||||
},
|
||||
"& .MuiSvgIcon-root": {
|
||||
fontSize: isMobile ? "5vw" : "2vw",
|
||||
color: "#C27664",
|
||||
},
|
||||
}}
|
||||
sx={selectStyles}
|
||||
>
|
||||
<MenuItem value="Подключаемый гибрид">
|
||||
Подключаемый гибрид
|
||||
@ -756,21 +712,7 @@ function CalculatorPage() {
|
||||
value={engineVolume}
|
||||
onChange={(e) => setEngineVolume(e.target.value)}
|
||||
variant="outlined"
|
||||
sx={{
|
||||
"& .MuiOutlinedInput-root": {
|
||||
borderRadius: isMobile ? "5vw" : "2vw",
|
||||
bgcolor: "white",
|
||||
height: isMobile ? "4.5vw" : "2vw",
|
||||
width: "100%",
|
||||
border: "0.1vw solid #C27664",
|
||||
fontFamily: "Unbounded",
|
||||
fontSize: isMobile ? "2.5vw" : "1.2vw",
|
||||
color: "#C27664",
|
||||
"& fieldset": {
|
||||
border: "none",
|
||||
},
|
||||
},
|
||||
}}
|
||||
sx={textFieldStyles}
|
||||
/>
|
||||
<Typography
|
||||
sx={{
|
||||
@ -801,21 +743,7 @@ function CalculatorPage() {
|
||||
value={enginePower}
|
||||
onChange={(e) => setEnginePower(e.target.value)}
|
||||
variant="outlined"
|
||||
sx={{
|
||||
"& .MuiOutlinedInput-root": {
|
||||
borderRadius: isMobile ? "5vw" : "2vw",
|
||||
bgcolor: "white",
|
||||
height: isMobile ? "4.5vw" : "2vw",
|
||||
width: "100%",
|
||||
border: "0.1vw solid #C27664",
|
||||
fontFamily: "Unbounded",
|
||||
fontSize: isMobile ? "2.5vw" : "1.2vw",
|
||||
color: "#C27664",
|
||||
"& fieldset": {
|
||||
border: "none",
|
||||
},
|
||||
},
|
||||
}}
|
||||
sx={textFieldStyles}
|
||||
/>
|
||||
<Typography
|
||||
sx={{
|
||||
@ -930,21 +858,7 @@ function CalculatorPage() {
|
||||
value={electricMotorPower}
|
||||
onChange={(e) => setElectricMotorPower(e.target.value)}
|
||||
variant="outlined"
|
||||
sx={{
|
||||
"& .MuiOutlinedInput-root": {
|
||||
borderRadius: isMobile ? "5vw" : "2vw",
|
||||
bgcolor: "white",
|
||||
height: isMobile ? "4.5vw" : "2vw",
|
||||
width: "100%",
|
||||
border: "0.1vw solid #C27664",
|
||||
fontFamily: "Unbounded",
|
||||
fontSize: isMobile ? "3vw" : "1.2vw",
|
||||
color: "#C27664",
|
||||
"& fieldset": {
|
||||
border: "none",
|
||||
},
|
||||
},
|
||||
}}
|
||||
sx={textFieldStyles}
|
||||
/>
|
||||
<Typography
|
||||
sx={{
|
||||
@ -1089,23 +1003,7 @@ function CalculatorPage() {
|
||||
value={calculationType}
|
||||
onChange={(e) => setCalculationType(e.target.value as string)}
|
||||
displayEmpty
|
||||
sx={{
|
||||
borderRadius: "2vw",
|
||||
bgcolor: "white",
|
||||
height: isMobile ? "4.5vw" : "2vw",
|
||||
width: "100%",
|
||||
fontFamily: "Unbounded",
|
||||
fontSize: isMobile ? "2.5vw" : "1.2vw",
|
||||
border: "0.1vw solid #C27664",
|
||||
color: "#C27664",
|
||||
"& .MuiOutlinedInput-notchedOutline": {
|
||||
border: "none",
|
||||
},
|
||||
"& .MuiSvgIcon-root": {
|
||||
fontSize: isMobile ? "5vw" : "2vw",
|
||||
color: "#C27664",
|
||||
},
|
||||
}}
|
||||
sx={selectStyles}
|
||||
>
|
||||
<MenuItem value="Физ. лица">Физ. лица</MenuItem>
|
||||
<MenuItem value="Юр. лица">Юр. лица</MenuItem>
|
||||
@ -1134,7 +1032,10 @@ function CalculatorPage() {
|
||||
color: "#C27664",
|
||||
"&.Mui-checked": { color: "#C27664" },
|
||||
"& .MuiSvgIcon-root": {
|
||||
fontSize: isMobile ? "5vw" : "2vw",
|
||||
fontSize: isMobile ? "6vw" : "2vw",
|
||||
},
|
||||
"&:hover": {
|
||||
bgcolor: "transparent",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
@ -1142,7 +1043,8 @@ function CalculatorPage() {
|
||||
label="Повышенной проходимости"
|
||||
sx={{
|
||||
"& .MuiFormControlLabel-label": {
|
||||
fontSize: isMobile ? "3vw" : "1.5vw",
|
||||
fontSize: isMobile ? "3.5vw" : "1.5vw",
|
||||
textWrap: "nowrap",
|
||||
color: "#C27664",
|
||||
fontFamily: "Unbounded",
|
||||
},
|
||||
@ -1156,13 +1058,13 @@ function CalculatorPage() {
|
||||
variant="contained"
|
||||
onClick={handleCalculate}
|
||||
sx={{
|
||||
maxWidth: isMobile ? "50vw" : "30vw",
|
||||
maxWidth: isMobile ? "55vw" : "30vw",
|
||||
bgcolor: "#C27664",
|
||||
color: "white",
|
||||
fontSize: isMobile ? "3.5vw" : "2vw",
|
||||
fontSize: isMobile ? "5vw" : "2vw",
|
||||
padding: isMobile ? "2vw" : "1vw",
|
||||
textTransform: "none",
|
||||
borderRadius: isMobile ? "5vw" : "3vw",
|
||||
borderRadius: isMobile ? "6vw" : "3vw",
|
||||
fontFamily: "Unbounded",
|
||||
position: "relative",
|
||||
left: "50%",
|
||||
|
@ -65,7 +65,6 @@ function ContactsPage() {
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
maxWidth: "80vw",
|
||||
margin: "0 auto",
|
||||
textAlign: "center",
|
||||
}}
|
||||
@ -74,9 +73,9 @@ function ContactsPage() {
|
||||
component="h1"
|
||||
sx={{
|
||||
fontFamily: "Unbounded",
|
||||
fontSize: isMobile ? "8vw" : "4rem",
|
||||
fontSize: isMobile ? "7vw" : "4rem",
|
||||
fontWeight: "bold",
|
||||
marginBottom: "2rem",
|
||||
marginBottom: "4vw",
|
||||
textWrap: "nowrap",
|
||||
}}
|
||||
>
|
||||
|
@ -236,7 +236,7 @@ function TeamPage() {
|
||||
sx={{
|
||||
position: "relative",
|
||||
bottom: "-5vw",
|
||||
top: "50%",
|
||||
top: isMobile ? "45%" : "50%",
|
||||
display: "flex",
|
||||
gap: "1vw",
|
||||
}}
|
||||
@ -246,8 +246,8 @@ function TeamPage() {
|
||||
key={index}
|
||||
onClick={() => handleMemberClick(index)}
|
||||
sx={{
|
||||
width: isMobile ? "3vw" : "1vw",
|
||||
height: isMobile ? "3vw" : "1vw",
|
||||
width: isMobile ? "5vw" : "1vw",
|
||||
height: isMobile ? "5vw" : "1vw",
|
||||
borderRadius: "50%",
|
||||
backgroundColor: index === activeIndex ? "#C27664" : "#CDCDCD",
|
||||
cursor: "pointer",
|
||||
|
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user