adaptive vehicle to mobile

This commit is contained in:
aurinex
2025-07-14 23:58:29 +05:00
parent f74949836a
commit b946f5ece0
4 changed files with 224 additions and 775 deletions

View File

@ -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%",

View File

@ -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",
}}
>

View File

@ -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