aurine/autobro-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

adaptive vehicle to mobile

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

202
src/pages/CalculatorPage.tsx
View File

@ -322,6 +322,40 @@ function CalculatorPage() {
const isHybridTypeVisible = engineType === "Гибридный"; const isHybridTypeVisible = engineType === "Гибридный";
const isPowerRatioVisible = 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 ( return (
<Box <Box
sx={{ sx={{
@ -502,23 +536,7 @@ function CalculatorPage() {
value={age} value={age}
onChange={(e) => setAge(e.target.value)} onChange={(e) => setAge(e.target.value)}
displayEmpty displayEmpty
sx={{ sx={selectStyles}
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",
},
}}
> >
<MenuItem value="3">Менее 3х лет</MenuItem> <MenuItem value="3">Менее 3х лет</MenuItem>
<MenuItem value="3-5">3-5 лет</MenuItem> <MenuItem value="3-5">3-5 лет</MenuItem>
@ -561,44 +579,14 @@ function CalculatorPage() {
</InputAdornment> </InputAdornment>
), ),
}} }}
sx={{ sx={textFieldStyles}
"& .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",
},
},
}}
/> />
<FormControl fullWidth variant="outlined"> <FormControl fullWidth variant="outlined">
<Select <Select
value={currency} value={currency}
onChange={(e) => setCurrency(e.target.value as string)} onChange={(e) => setCurrency(e.target.value as string)}
displayEmpty displayEmpty
sx={{ sx={selectStyles}
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",
},
}}
> >
<MenuItem value="USD Доллар США"> <MenuItem value="USD Доллар США">
USD Доллар США{" "} USD Доллар США{" "}
@ -655,23 +643,7 @@ function CalculatorPage() {
value={engineType} value={engineType}
onChange={(e) => setEngineType(e.target.value as string)} onChange={(e) => setEngineType(e.target.value as string)}
displayEmpty displayEmpty
sx={{ sx={selectStyles}
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",
},
}}
> >
<MenuItem value="Бензиновый">Бензиновый</MenuItem> <MenuItem value="Бензиновый">Бензиновый</MenuItem>
<MenuItem value="Дизельный">Дизельный</MenuItem> <MenuItem value="Дизельный">Дизельный</MenuItem>
@ -707,23 +679,7 @@ function CalculatorPage() {
value={hybridType} value={hybridType}
onChange={(e) => setHybridType(e.target.value as string)} onChange={(e) => setHybridType(e.target.value as string)}
displayEmpty displayEmpty
sx={{ sx={selectStyles}
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",
},
}}
> >
<MenuItem value="Подключаемый гибрид"> <MenuItem value="Подключаемый гибрид">
Подключаемый гибрид Подключаемый гибрид
@ -756,21 +712,7 @@ function CalculatorPage() {
value={engineVolume} value={engineVolume}
onChange={(e) => setEngineVolume(e.target.value)} onChange={(e) => setEngineVolume(e.target.value)}
variant="outlined" variant="outlined"
sx={{ sx={textFieldStyles}
"& .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",
},
},
}}
/> />
<Typography <Typography
sx={{ sx={{
@ -801,21 +743,7 @@ function CalculatorPage() {
value={enginePower} value={enginePower}
onChange={(e) => setEnginePower(e.target.value)} onChange={(e) => setEnginePower(e.target.value)}
variant="outlined" variant="outlined"
sx={{ sx={textFieldStyles}
"& .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",
},
},
}}
/> />
<Typography <Typography
sx={{ sx={{
@ -930,21 +858,7 @@ function CalculatorPage() {
value={electricMotorPower} value={electricMotorPower}
onChange={(e) => setElectricMotorPower(e.target.value)} onChange={(e) => setElectricMotorPower(e.target.value)}
variant="outlined" variant="outlined"
sx={{ sx={textFieldStyles}
"& .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",
},
},
}}
/> />
<Typography <Typography
sx={{ sx={{
@ -1089,23 +1003,7 @@ function CalculatorPage() {
value={calculationType} value={calculationType}
onChange={(e) => setCalculationType(e.target.value as string)} onChange={(e) => setCalculationType(e.target.value as string)}
displayEmpty displayEmpty
sx={{ sx={selectStyles}
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",
},
}}
> >
<MenuItem value="Физ. лица">Физ. лица</MenuItem> <MenuItem value="Физ. лица">Физ. лица</MenuItem>
<MenuItem value="Юр. лица">Юр. лица</MenuItem> <MenuItem value="Юр. лица">Юр. лица</MenuItem>
@ -1134,7 +1032,10 @@ function CalculatorPage() {
color: "#C27664", color: "#C27664",
"&.Mui-checked": { color: "#C27664" }, "&.Mui-checked": { color: "#C27664" },
"& .MuiSvgIcon-root": { "& .MuiSvgIcon-root": {
fontSize: isMobile ? "5vw" : "2vw", fontSize: isMobile ? "6vw" : "2vw",
},
"&:hover": {
bgcolor: "transparent",
}, },
}} }}
/> />
@ -1142,7 +1043,8 @@ function CalculatorPage() {
label="Повышенной проходимости" label="Повышенной проходимости"
sx={{ sx={{
"& .MuiFormControlLabel-label": { "& .MuiFormControlLabel-label": {
fontSize: isMobile ? "3vw" : "1.5vw", fontSize: isMobile ? "3.5vw" : "1.5vw",
textWrap: "nowrap",
color: "#C27664", color: "#C27664",
fontFamily: "Unbounded", fontFamily: "Unbounded",
}, },
@ -1156,13 +1058,13 @@ function CalculatorPage() {
variant="contained" variant="contained"
onClick={handleCalculate} onClick={handleCalculate}
sx={{ sx={{
maxWidth: isMobile ? "50vw" : "30vw", maxWidth: isMobile ? "55vw" : "30vw",
bgcolor: "#C27664", bgcolor: "#C27664",
color: "white", color: "white",
fontSize: isMobile ? "3.5vw" : "2vw", fontSize: isMobile ? "5vw" : "2vw",
padding: isMobile ? "2vw" : "1vw", padding: isMobile ? "2vw" : "1vw",
textTransform: "none", textTransform: "none",
borderRadius: isMobile ? "5vw" : "3vw", borderRadius: isMobile ? "6vw" : "3vw",
fontFamily: "Unbounded", fontFamily: "Unbounded",
position: "relative", position: "relative",
left: "50%", left: "50%",

5
src/pages/ContactsPage.tsx
View File

@ -65,7 +65,6 @@ function ContactsPage() {
> >
<Box <Box
sx={{ sx={{
maxWidth: "80vw",
margin: "0 auto", margin: "0 auto",
textAlign: "center", textAlign: "center",
}} }}
@ -74,9 +73,9 @@ function ContactsPage() {
component="h1" component="h1"
sx={{ sx={{
fontFamily: "Unbounded", fontFamily: "Unbounded",
fontSize: isMobile ? "8vw" : "4rem", fontSize: isMobile ? "7vw" : "4rem",
fontWeight: "bold", fontWeight: "bold",
marginBottom: "2rem", marginBottom: "4vw",
textWrap: "nowrap", textWrap: "nowrap",
}} }}
> >

6
src/pages/TeamPage.tsx
View File

@ -236,7 +236,7 @@ function TeamPage() {
sx={{ sx={{
position: "relative", position: "relative",
bottom: "-5vw", bottom: "-5vw",
top: "50%", top: isMobile ? "45%" : "50%",
display: "flex", display: "flex",
gap: "1vw", gap: "1vw",
}} }}
@ -246,8 +246,8 @@ function TeamPage() {
key={index} key={index}
onClick={() => handleMemberClick(index)} onClick={() => handleMemberClick(index)}
sx={{ sx={{
width: isMobile ? "3vw" : "1vw", width: isMobile ? "5vw" : "1vw",
height: isMobile ? "3vw" : "1vw", height: isMobile ? "5vw" : "1vw",
borderRadius: "50%", borderRadius: "50%",
backgroundColor: index === activeIndex ? "#C27664" : "#CDCDCD", backgroundColor: index === activeIndex ? "#C27664" : "#CDCDCD",
cursor: "pointer", cursor: "pointer",

786
src/pages/admin/Vehicle.tsx
View File

File diff suppressed because it is too large Load Diff