calculate(70%)
This commit is contained in:
aurinex
BIN
src/assets/emoji/belarus.png
Normal file
BIN
src/assets/emoji/belarus.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
BIN
src/assets/emoji/russia.png
Normal file
BIN
src/assets/emoji/russia.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.3 KiB |
28
src/components/Divider.tsx
Normal file
28
src/components/Divider.tsx
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
import { Box } from "@mui/material";
|
||||||
|
import React from "react";
|
||||||
|
import { useResponsive } from "../theme/useResponsive";
|
||||||
|
|
||||||
|
function Divider() {
|
||||||
|
const { isMobile } = useResponsive();
|
||||||
|
return (
|
||||||
|
<Box sx={{ display: "flex", alignItems: "center", justifyContent: "center" }}>
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
|
width: "85%",
|
||||||
|
height: isMobile ? "0.3vw" : "0.15vw",
|
||||||
|
backgroundColor: "rgba(220, 220, 220, 1)",
|
||||||
|
borderRadius: "1vw",
|
||||||
|
position: "absolute",
|
||||||
|
mt: "1vw",
|
||||||
|
mb: "1vw",
|
||||||
|
}}
|
||||||
|
></Box>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Divider;
|
||||||
|
|
||||||
|
|
||||||
770
src/pages/CalculatorPage.tsx
Normal file
770
src/pages/CalculatorPage.tsx
Normal file
@ -0,0 +1,770 @@
|
|||||||
|
import React, { useState } from "react";
|
||||||
|
import {
|
||||||
|
Box,
|
||||||
|
Typography,
|
||||||
|
TextField,
|
||||||
|
Button,
|
||||||
|
FormControl,
|
||||||
|
Select,
|
||||||
|
MenuItem,
|
||||||
|
FormControlLabel,
|
||||||
|
Radio,
|
||||||
|
InputAdornment,
|
||||||
|
} from "@mui/material";
|
||||||
|
import { useResponsive } from "../theme/useResponsive";
|
||||||
|
import russia from "../assets/emoji/russia.png";
|
||||||
|
import belarus from "../assets/emoji/belarus.png";
|
||||||
|
|
||||||
|
function CalculatorPage() {
|
||||||
|
const { isMobile } = useResponsive();
|
||||||
|
|
||||||
|
// Состояния для полей формы
|
||||||
|
const [country, setCountry] = useState("russia"); // russia или belarus
|
||||||
|
const [age, setAge] = useState("Новые, не менее 3-х лет");
|
||||||
|
const [price, setPrice] = useState("");
|
||||||
|
const [currency, setCurrency] = useState("USD Доллар США");
|
||||||
|
const [engineType, setEngineType] = useState("Бензиновый");
|
||||||
|
const [hybridType, setHybridType] = useState("Не гибрид");
|
||||||
|
const [engineVolume, setEngineVolume] = useState("");
|
||||||
|
const [enginePower, setEnginePower] = useState("");
|
||||||
|
const [enginePowerUnit, setEnginePowerUnit] = useState("л.с.");
|
||||||
|
const [electricMotorPower, setElectricMotorPower] = useState("");
|
||||||
|
const [electricMotorPowerUnit, setElectricMotorPowerUnit] = useState("л.с.");
|
||||||
|
const [powerRatio, setPowerRatio] = useState("ДВС > ЭД");
|
||||||
|
const [calculationType, setCalculationType] = useState("Физ. лица");
|
||||||
|
const [enhancedPermeability, setEnhancedPermeability] = useState(false);
|
||||||
|
|
||||||
|
const handleCalculate = () => {
|
||||||
|
// Здесь будет логика расчета
|
||||||
|
console.log({
|
||||||
|
country,
|
||||||
|
age,
|
||||||
|
price,
|
||||||
|
currency,
|
||||||
|
engineType,
|
||||||
|
hybridType,
|
||||||
|
engineVolume,
|
||||||
|
enginePower,
|
||||||
|
enginePowerUnit,
|
||||||
|
electricMotorPower,
|
||||||
|
electricMotorPowerUnit,
|
||||||
|
powerRatio,
|
||||||
|
calculationType,
|
||||||
|
enhancedPermeability,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Box
|
||||||
|
id="calculator"
|
||||||
|
sx={{
|
||||||
|
bgcolor: "white",
|
||||||
|
color: "black",
|
||||||
|
padding: "5vw",
|
||||||
|
scrollMarginTop: isMobile ? "15vw" : "10vw",
|
||||||
|
maxWidth: "100vw",
|
||||||
|
overflowX: "hidden",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: isMobile ? "column" : "row",
|
||||||
|
justifyContent: "space-between",
|
||||||
|
maxWidth: "90vw",
|
||||||
|
margin: "0 auto",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* Левая часть - форма */}
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
width: isMobile ? "100%" : "40%",
|
||||||
|
minWidth: "45vw",
|
||||||
|
borderRadius: "2vw",
|
||||||
|
padding: "3vw",
|
||||||
|
border: "0.3vw solid #C27664",
|
||||||
|
height: "67vw",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* Первая линия */}
|
||||||
|
<Box sx={{ mb: "1vw", position: "relative" }}>
|
||||||
|
<Typography
|
||||||
|
sx={{
|
||||||
|
fontFamily: "Unbounded",
|
||||||
|
fontSize: "3vw",
|
||||||
|
color: "#C27664",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Рассчитать для
|
||||||
|
</Typography>
|
||||||
|
<Box sx={{ display: "flex", gap: 2, position: "absolute", top: 0, right: 0 }}>
|
||||||
|
<Box
|
||||||
|
onClick={() => setCountry("russia")}
|
||||||
|
sx={{ cursor: "pointer", position: "relative" }}
|
||||||
|
>
|
||||||
|
<Radio
|
||||||
|
checked={country === "russia"}
|
||||||
|
sx={{ position: "absolute", opacity: 0 }}
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
src={russia}
|
||||||
|
alt="Россия"
|
||||||
|
style={{
|
||||||
|
width: "6vw",
|
||||||
|
height: "5vw",
|
||||||
|
opacity: country === "russia" ? 1 : 0.5,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
<Box
|
||||||
|
onClick={() => setCountry("belarus")}
|
||||||
|
sx={{ cursor: "pointer", position: "relative" }}
|
||||||
|
>
|
||||||
|
<Radio
|
||||||
|
checked={country === "belarus"}
|
||||||
|
sx={{ position: "absolute", opacity: 0 }}
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
src={belarus}
|
||||||
|
alt="Беларусь"
|
||||||
|
style={{
|
||||||
|
width: "6vw",
|
||||||
|
height: "5vw",
|
||||||
|
opacity: country === "belarus" ? 1 : 0.5,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{/* Вторая линия */}
|
||||||
|
<Box sx={{ mb: "1vw", display: "flex", flexDirection: "row", alignItems: "center", gap: "1vw" }}>
|
||||||
|
<Typography
|
||||||
|
sx={{
|
||||||
|
fontFamily: "Unbounded",
|
||||||
|
fontSize: "3vw",
|
||||||
|
color: "#C27664",
|
||||||
|
textWrap: "nowrap",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Возраст
|
||||||
|
</Typography>
|
||||||
|
{/* <TextField
|
||||||
|
fullWidth
|
||||||
|
value={age}
|
||||||
|
onChange={(e) => setAge(e.target.value)}
|
||||||
|
variant="outlined"
|
||||||
|
placeholder="Новые, не менее 3-х лет"
|
||||||
|
sx={{
|
||||||
|
"& .MuiOutlinedInput-root": {
|
||||||
|
borderRadius: "25px",
|
||||||
|
bgcolor: "white",
|
||||||
|
height: "40px",
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/> */}
|
||||||
|
<Select
|
||||||
|
value={age}
|
||||||
|
onChange={(e) => setAge(e.target.value)}
|
||||||
|
displayEmpty
|
||||||
|
sx={{
|
||||||
|
borderRadius: "2vw",
|
||||||
|
bgcolor: "white",
|
||||||
|
height: "3.5vw",
|
||||||
|
width: "50%",
|
||||||
|
border: "0.1vw solid #C27664",
|
||||||
|
fontFamily: "Unbounded",
|
||||||
|
fontSize: "1.5vw",
|
||||||
|
color: "#C27664",
|
||||||
|
"& .MuiOutlinedInput-notchedOutline": {
|
||||||
|
border: "none"
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<MenuItem value="3">Менее 3х лет</MenuItem>
|
||||||
|
<MenuItem value="3-5">3-5 лет</MenuItem>
|
||||||
|
<MenuItem value="5+">5+ лет</MenuItem>
|
||||||
|
</Select>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{/* Третья линия */}
|
||||||
|
<Box sx={{ mb: "1vw", display: "flex", flexDirection: "column", alignItems: "center", gap: "1vw" }}>
|
||||||
|
<TextField
|
||||||
|
fullWidth
|
||||||
|
placeholder="Цена"
|
||||||
|
value={price}
|
||||||
|
onChange={(e) => setPrice(e.target.value)}
|
||||||
|
variant="outlined"
|
||||||
|
InputProps={{
|
||||||
|
endAdornment: <InputAdornment position="end">₽</InputAdornment>,
|
||||||
|
}}
|
||||||
|
sx={{
|
||||||
|
"& .MuiOutlinedInput-root": {
|
||||||
|
borderRadius: "2vw",
|
||||||
|
bgcolor: "white",
|
||||||
|
height: "3.5vw",
|
||||||
|
width: "83%",
|
||||||
|
border: "0.1vw solid #C27664",
|
||||||
|
fontFamily: "Unbounded",
|
||||||
|
fontSize: "1.5vw",
|
||||||
|
color: "#C27664",
|
||||||
|
"& fieldset": {
|
||||||
|
border: "none"
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<FormControl fullWidth variant="outlined">
|
||||||
|
<Select
|
||||||
|
value={currency}
|
||||||
|
onChange={(e) => setCurrency(e.target.value as string)}
|
||||||
|
displayEmpty
|
||||||
|
sx={{
|
||||||
|
borderRadius: "2vw",
|
||||||
|
bgcolor: "white",
|
||||||
|
height: "3.5vw",
|
||||||
|
width: "83%",
|
||||||
|
border: "0.1vw solid #C27664",
|
||||||
|
fontFamily: "Unbounded",
|
||||||
|
fontSize: "1.5vw",
|
||||||
|
color: "#C27664",
|
||||||
|
"& .MuiOutlinedInput-notchedOutline": {
|
||||||
|
border: "none"
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<MenuItem value="USD Доллар США">USD Доллар США</MenuItem>
|
||||||
|
<MenuItem value="EUR Евро">EUR Евро</MenuItem>
|
||||||
|
<MenuItem value="CNY Юань">CNY Юань</MenuItem>
|
||||||
|
</Select>
|
||||||
|
</FormControl>
|
||||||
|
{/* <FormControl fullWidth variant="outlined">
|
||||||
|
<Select
|
||||||
|
value="Цена"
|
||||||
|
displayEmpty
|
||||||
|
sx={{
|
||||||
|
borderRadius: "25px",
|
||||||
|
bgcolor: "white",
|
||||||
|
height: "40px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<MenuItem value="Цена">Цена</MenuItem>
|
||||||
|
</Select>
|
||||||
|
</FormControl> */}
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{/* Четвертая линия - Валюта */}
|
||||||
|
{/* <Box sx={{ mb: 2 }}>
|
||||||
|
<FormControl fullWidth variant="outlined">
|
||||||
|
<Select
|
||||||
|
value={currency}
|
||||||
|
onChange={(e) => setCurrency(e.target.value as string)}
|
||||||
|
displayEmpty
|
||||||
|
sx={{
|
||||||
|
borderRadius: "25px",
|
||||||
|
bgcolor: "white",
|
||||||
|
height: "40px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<MenuItem value="USD Доллар США">USD Доллар США</MenuItem>
|
||||||
|
<MenuItem value="EUR Евро">EUR Евро</MenuItem>
|
||||||
|
<MenuItem value="CNY Юань">CNY Юань</MenuItem>
|
||||||
|
</Select>
|
||||||
|
</FormControl>
|
||||||
|
</Box> */}
|
||||||
|
|
||||||
|
{/* Пятая линия */}
|
||||||
|
<Box sx={{ mb: "1vw", display: "flex", flexDirection: "row", alignItems: "center", gap: "1vw" }}>
|
||||||
|
<Typography
|
||||||
|
sx={{
|
||||||
|
fontFamily: "Unbounded",
|
||||||
|
fontSize: "3vw",
|
||||||
|
color: "#C27664",
|
||||||
|
textWrap: "nowrap",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Двигатель
|
||||||
|
</Typography>
|
||||||
|
<FormControl fullWidth variant="outlined">
|
||||||
|
<Select
|
||||||
|
value={engineType}
|
||||||
|
onChange={(e) => setEngineType(e.target.value as string)}
|
||||||
|
displayEmpty
|
||||||
|
sx={{
|
||||||
|
borderRadius: "2vw",
|
||||||
|
bgcolor: "white",
|
||||||
|
height: "3.5vw",
|
||||||
|
width: "75%",
|
||||||
|
border: "0.1vw solid #C27664",
|
||||||
|
fontFamily: "Unbounded",
|
||||||
|
fontSize: "1.5vw",
|
||||||
|
color: "#C27664",
|
||||||
|
"& .MuiOutlinedInput-notchedOutline": {
|
||||||
|
border: "none"
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<MenuItem value="Бензиновый">Бензиновый</MenuItem>
|
||||||
|
<MenuItem value="Дизельный">Дизельный</MenuItem>
|
||||||
|
<MenuItem value="Электрический">Электрический</MenuItem>
|
||||||
|
<MenuItem value="Гибридный">Гибридный</MenuItem>
|
||||||
|
</Select>
|
||||||
|
</FormControl>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{/* Шестая линия */}
|
||||||
|
<Box sx={{ mb: "1vw", display: "flex", flexDirection: "row", alignItems: "center", gap: "1vw" }}>
|
||||||
|
<Typography
|
||||||
|
sx={{
|
||||||
|
fontFamily: "Unbounded",
|
||||||
|
fontSize: "3vw",
|
||||||
|
color: "#C27664",
|
||||||
|
textWrap: "nowrap",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Тип гибрида
|
||||||
|
</Typography>
|
||||||
|
<FormControl fullWidth variant="outlined">
|
||||||
|
<Select
|
||||||
|
value={hybridType}
|
||||||
|
onChange={(e) => setHybridType(e.target.value as string)}
|
||||||
|
displayEmpty
|
||||||
|
sx={{
|
||||||
|
borderRadius: "2vw",
|
||||||
|
bgcolor: "white",
|
||||||
|
height: "3.5vw",
|
||||||
|
width: "75%",
|
||||||
|
border: "0.1vw solid #C27664",
|
||||||
|
fontFamily: "Unbounded",
|
||||||
|
fontSize: "1.5vw",
|
||||||
|
color: "#C27664",
|
||||||
|
"& .MuiOutlinedInput-notchedOutline": {
|
||||||
|
border: "none"
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<MenuItem value="Не гибрид">Не гибрид</MenuItem>
|
||||||
|
<MenuItem value="Подключаемый гибрид">Подключаемый гибрид</MenuItem>
|
||||||
|
<MenuItem value="Последовательный гибрид">Последовательный гибрид</MenuItem>
|
||||||
|
<MenuItem value="Параллельный гибрид">Параллельный гибрид</MenuItem>
|
||||||
|
</Select>
|
||||||
|
</FormControl>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{/* Седьмая линия */}
|
||||||
|
<Box sx={{ mb: "1vw", display: "flex", flexDirection: "row", alignItems: "center", gap: "1vw" }}>
|
||||||
|
<TextField
|
||||||
|
fullWidth
|
||||||
|
placeholder="Объём двигателя"
|
||||||
|
value={engineVolume}
|
||||||
|
onChange={(e) => setEngineVolume(e.target.value)}
|
||||||
|
variant="outlined"
|
||||||
|
sx={{
|
||||||
|
"& .MuiOutlinedInput-root": {
|
||||||
|
borderRadius: "2vw",
|
||||||
|
bgcolor: "white",
|
||||||
|
height: "3.5vw",
|
||||||
|
width: "67%",
|
||||||
|
border: "0.1vw solid #C27664",
|
||||||
|
fontFamily: "Unbounded",
|
||||||
|
fontSize: "1.4vw",
|
||||||
|
color: "#C27664",
|
||||||
|
"& fieldset": {
|
||||||
|
border: "none"
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<Typography
|
||||||
|
sx={{
|
||||||
|
fontFamily: "Unbounded",
|
||||||
|
fontSize: "2.5vw",
|
||||||
|
color: "#C27664",
|
||||||
|
position: "relative",
|
||||||
|
right: "12.3vw",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
см³
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{/* Восьмая линия */}
|
||||||
|
<Box sx={{ mb: "1vw", display: "flex", flexDirection: "row", alignItems: "center", gap: "1vw" }}>
|
||||||
|
<TextField
|
||||||
|
fullWidth
|
||||||
|
placeholder="Мощность двигателя (ДВС)"
|
||||||
|
value={enginePower}
|
||||||
|
onChange={(e) => setEnginePower(e.target.value)}
|
||||||
|
variant="outlined"
|
||||||
|
sx={{
|
||||||
|
"& .MuiOutlinedInput-root": {
|
||||||
|
borderRadius: "2vw",
|
||||||
|
bgcolor: "white",
|
||||||
|
height: "3.5vw",
|
||||||
|
width: "98%",
|
||||||
|
border: "0.1vw solid #C27664",
|
||||||
|
fontFamily: "Unbounded",
|
||||||
|
fontSize: "1.4vw",
|
||||||
|
color: "#C27664",
|
||||||
|
"& fieldset": {
|
||||||
|
border: "none"
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<Box sx={{ display: "flex", alignItems: "center", position: "relative" }}>
|
||||||
|
<FormControlLabel
|
||||||
|
value="л.с."
|
||||||
|
control={
|
||||||
|
<Radio
|
||||||
|
checked={enginePowerUnit === "л.с."}
|
||||||
|
onChange={() => setEnginePowerUnit("л.с.")}
|
||||||
|
sx={{
|
||||||
|
color: "#C27664",
|
||||||
|
"&.Mui-checked": { color: "#C27664" },
|
||||||
|
"& .MuiSvgIcon-root": {
|
||||||
|
fontSize: "1.5vw"
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
label="л.с."
|
||||||
|
sx={{
|
||||||
|
"& .MuiFormControlLabel-label": {
|
||||||
|
fontSize: "2vw",
|
||||||
|
fontFamily: "Unbounded",
|
||||||
|
color: "#C27664",
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<FormControlLabel
|
||||||
|
value="кВт"
|
||||||
|
control={
|
||||||
|
<Radio
|
||||||
|
checked={enginePowerUnit === "кВт"}
|
||||||
|
onChange={() => setEnginePowerUnit("кВт")}
|
||||||
|
sx={{
|
||||||
|
color: "#C27664",
|
||||||
|
"&.Mui-checked": { color: "#C27664" },
|
||||||
|
"& .MuiSvgIcon-root": {
|
||||||
|
fontSize: "1.5vw"
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
label="кВт"
|
||||||
|
sx={{
|
||||||
|
"& .MuiFormControlLabel-label": {
|
||||||
|
fontSize: "2vw",
|
||||||
|
fontFamily: "Unbounded",
|
||||||
|
color: "#C27664",
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{/* Девятая линия */}
|
||||||
|
<Box sx={{ mb: "1vw", display: "flex", flexDirection: "row", alignItems: "center", gap: "1vw" }}>
|
||||||
|
<TextField
|
||||||
|
fullWidth
|
||||||
|
placeholder="Мощность электродвигателя(ЭД)"
|
||||||
|
value={electricMotorPower}
|
||||||
|
onChange={(e) => setElectricMotorPower(e.target.value)}
|
||||||
|
variant="outlined"
|
||||||
|
sx={{
|
||||||
|
"& .MuiOutlinedInput-root": {
|
||||||
|
borderRadius: "2vw",
|
||||||
|
bgcolor: "white",
|
||||||
|
height: "3.5vw",
|
||||||
|
width: "112%",
|
||||||
|
border: "0.1vw solid #C27664",
|
||||||
|
fontFamily: "Unbounded",
|
||||||
|
fontSize: "1.32vw",
|
||||||
|
color: "#C27664",
|
||||||
|
"& fieldset": {
|
||||||
|
border: "none"
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<Box sx={{ display: "flex", alignItems: "center", position: "relative", left: "3.2vw" }}>
|
||||||
|
<FormControlLabel
|
||||||
|
value="л.с."
|
||||||
|
control={
|
||||||
|
<Radio
|
||||||
|
checked={electricMotorPowerUnit === "л.с."}
|
||||||
|
onChange={() => setElectricMotorPowerUnit("л.с.")}
|
||||||
|
sx={{
|
||||||
|
color: "#C27664",
|
||||||
|
"&.Mui-checked": { color: "#C27664" },
|
||||||
|
"& .MuiSvgIcon-root": {
|
||||||
|
fontSize: "1.5vw"
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
label="л.с."
|
||||||
|
sx={{
|
||||||
|
"& .MuiFormControlLabel-label": {
|
||||||
|
fontSize: "2vw",
|
||||||
|
fontFamily: "Unbounded",
|
||||||
|
color: "#C27664",
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<FormControlLabel
|
||||||
|
value="кВт"
|
||||||
|
control={
|
||||||
|
<Radio
|
||||||
|
checked={electricMotorPowerUnit === "кВт"}
|
||||||
|
onChange={() => setElectricMotorPowerUnit("кВт")}
|
||||||
|
sx={{
|
||||||
|
color: "#C27664",
|
||||||
|
"&.Mui-checked": { color: "#C27664" },
|
||||||
|
"& .MuiSvgIcon-root": {
|
||||||
|
fontSize: "1.5vw"
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
label="кВт"
|
||||||
|
sx={{
|
||||||
|
"& .MuiFormControlLabel-label": {
|
||||||
|
fontSize: "2vw",
|
||||||
|
fontFamily: "Unbounded",
|
||||||
|
color: "#C27664",
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{/* Десятая линия */}
|
||||||
|
<Box sx={{ mb: "1vw", display: "flex", flexDirection: "row", alignItems: "center", gap: "1vw" }}>
|
||||||
|
<Typography
|
||||||
|
sx={{
|
||||||
|
fontFamily: "Unbounded",
|
||||||
|
fontSize: "2vw",
|
||||||
|
color: "#C27664",
|
||||||
|
textWrap: "nowrap",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
ДВС vs ЭД
|
||||||
|
</Typography>
|
||||||
|
<Box sx={{ display: "flex", flexWrap: "nowrap", textWrap: "nowrap", position: "relative", left: "3vw" }}>
|
||||||
|
<FormControlLabel
|
||||||
|
value="ДВС > ЭД"
|
||||||
|
control={
|
||||||
|
<Radio
|
||||||
|
checked={powerRatio === "ДВС > ЭД"}
|
||||||
|
onChange={() => setPowerRatio("ДВС > ЭД")}
|
||||||
|
sx={{
|
||||||
|
color: "#C27664",
|
||||||
|
"&.Mui-checked": { color: "#C27664" },
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
label="ДВС > ЭД"
|
||||||
|
sx={{
|
||||||
|
"& .MuiFormControlLabel-label": {
|
||||||
|
fontSize: "1.7vw",
|
||||||
|
fontFamily: "Unbounded",
|
||||||
|
color: "#C27664",
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<FormControlLabel
|
||||||
|
value="ДВС < ЭД"
|
||||||
|
control={
|
||||||
|
<Radio
|
||||||
|
checked={powerRatio === "ДВС < ЭД"}
|
||||||
|
onChange={() => setPowerRatio("ДВС < ЭД")}
|
||||||
|
sx={{
|
||||||
|
color: "#C27664",
|
||||||
|
"&.Mui-checked": { color: "#C27664" },
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
label="ДВС < ЭД"
|
||||||
|
sx={{
|
||||||
|
"& .MuiFormControlLabel-label": {
|
||||||
|
fontSize: "1.7vw",
|
||||||
|
fontFamily: "Unbounded",
|
||||||
|
color: "#C27664",
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{/* Одиннадцатая линия */}
|
||||||
|
<Box sx={{ mb: "1vw", display: "flex", flexDirection: "row", alignItems: "center", gap: "1vw" }}>
|
||||||
|
<Typography
|
||||||
|
sx={{
|
||||||
|
fontFamily: "Unbounded",
|
||||||
|
fontSize: "2vw",
|
||||||
|
color: "#C27664",
|
||||||
|
textWrap: "nowrap",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Расчет при ввозе
|
||||||
|
</Typography>
|
||||||
|
<FormControl fullWidth variant="outlined">
|
||||||
|
<Select
|
||||||
|
value={calculationType}
|
||||||
|
onChange={(e) => setCalculationType(e.target.value as string)}
|
||||||
|
displayEmpty
|
||||||
|
sx={{
|
||||||
|
borderRadius: "2vw",
|
||||||
|
bgcolor: "white",
|
||||||
|
height: "3.5vw",
|
||||||
|
width: "75%",
|
||||||
|
fontFamily: "Unbounded",
|
||||||
|
fontSize: "1.5vw",
|
||||||
|
border: "0.1vw solid #C27664",
|
||||||
|
color: "#C27664",
|
||||||
|
"& .MuiOutlinedInput-notchedOutline": {
|
||||||
|
border: "none",
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<MenuItem value="Физ. лица">Физ. лица</MenuItem>
|
||||||
|
<MenuItem value="Юр. лица">Юр. лица</MenuItem>
|
||||||
|
</Select>
|
||||||
|
</FormControl>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{/* Двенадцатая линия */}
|
||||||
|
<Box sx={{ mb: "1vw", display: "flex", flexDirection: "row", alignItems: "center", gap: "1vw" }}>
|
||||||
|
<FormControlLabel
|
||||||
|
control={
|
||||||
|
<Radio
|
||||||
|
checked={enhancedPermeability}
|
||||||
|
onChange={() => setEnhancedPermeability(!enhancedPermeability)}
|
||||||
|
sx={{
|
||||||
|
color: "#C27664",
|
||||||
|
"&.Mui-checked": { color: "#C27664" },
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
label="Повышенной проходимости"
|
||||||
|
sx={{
|
||||||
|
"& .MuiFormControlLabel-label": {
|
||||||
|
fontSize: "2vw",
|
||||||
|
color: "#C27664",
|
||||||
|
fontFamily: "Unbounded",
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{/* Тринадцатая линия */}
|
||||||
|
<Button
|
||||||
|
fullWidth
|
||||||
|
variant="contained"
|
||||||
|
onClick={handleCalculate}
|
||||||
|
sx={{
|
||||||
|
maxWidth: "30vw",
|
||||||
|
bgcolor: "#C27664",
|
||||||
|
color: "white",
|
||||||
|
fontSize: "2vw",
|
||||||
|
padding: "1vw",
|
||||||
|
textTransform: "none",
|
||||||
|
borderRadius: "3vw",
|
||||||
|
fontFamily: "Unbounded",
|
||||||
|
position: "relative",
|
||||||
|
left: "50%",
|
||||||
|
transform: "translateX(-50%)",
|
||||||
|
"&:hover": { bgcolor: "#945B4D" },
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Рассчитать
|
||||||
|
</Button>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{/* Правая часть - описание */}
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
width: isMobile ? "100%" : "55%",
|
||||||
|
ml: isMobile ? "2vw" : "3vw",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Typography
|
||||||
|
variant="h2"
|
||||||
|
sx={{
|
||||||
|
fontFamily: "Unbounded",
|
||||||
|
fontSize: isMobile ? "4vw" : "5vw",
|
||||||
|
fontWeight: "bold",
|
||||||
|
color: "black",
|
||||||
|
mb: "1vw",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
РАСЧИТАЙТЕ <span style={{ color: "#C27664" }}>СТОИМОСТЬ ДОСТАВКИ!</span>
|
||||||
|
</Typography>
|
||||||
|
|
||||||
|
<Typography
|
||||||
|
variant="h3"
|
||||||
|
sx={{
|
||||||
|
fontFamily: "Unbounded",
|
||||||
|
fontSize: isMobile ? "3vw" : "2.5vw",
|
||||||
|
maxWidth: "40vw",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
С помощью калькулятора таможенных платежей за автомобиль
|
||||||
|
</Typography>
|
||||||
|
|
||||||
|
<Box component="ul" sx={{pl: "0vw", mb: "1vw", maxWidth: "32vw", }}>
|
||||||
|
<Typography
|
||||||
|
component="li"
|
||||||
|
sx={{
|
||||||
|
fontFamily: "Unbounded",
|
||||||
|
fontSize: isMobile ? "2.5vw" : "1.5vw",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Обсуждаем ваш запрос и бюджет, подбираем варианты. Заключаем договор и вносим аванс (100 000 P, возвращается, если не подберем авто).
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
component="li"
|
||||||
|
sx={{
|
||||||
|
fontFamily: "Unbounded",
|
||||||
|
fontSize: isMobile ? "2.5vw" : "1.5vw",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Выкупаем авто
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
component="li"
|
||||||
|
sx={{
|
||||||
|
fontFamily: "Unbounded",
|
||||||
|
fontSize: isMobile ? "2.5vw" : "1.5vw",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Оформляем документы и доставляем авто в РФ. На всех этапах машина застрахована.
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
component="li"
|
||||||
|
sx={{
|
||||||
|
fontFamily: "Unbounded",
|
||||||
|
fontSize: isMobile ? "2.5vw" : "1.5vw",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Проходим таможню, делаем документы для регистрации.
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
component="li"
|
||||||
|
sx={{
|
||||||
|
fontFamily: "Unbounded",
|
||||||
|
fontSize: isMobile ? "2.5vw" : "1.5vw",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Передаём авто вам - с актом и финальной оплатой.
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default CalculatorPage;
|
||||||
@ -44,42 +44,44 @@ function DeliveryPage() {
|
|||||||
component="h1"
|
component="h1"
|
||||||
sx={{
|
sx={{
|
||||||
fontFamily: "Unbounded",
|
fontFamily: "Unbounded",
|
||||||
fontSize: isMobile ? "10vw" : "4vw",
|
fontSize: isMobile ? "6vw" : "4vw",
|
||||||
fontWeight: "bold",
|
fontWeight: "bold",
|
||||||
marginBottom: "1vw",
|
marginBottom: "1vw",
|
||||||
maxWidth: "50vw",
|
maxWidth: isMobile ? "auto" :"50vw",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Мы доставляем автомобили из{" "}
|
Мы доставляем автомобили из{" "}
|
||||||
<span style={{ color: "#C27664" }}>США, Китая и Кореи</span>
|
<span style={{ color: "#C27664" }}>США, Китая и Кореи</span>
|
||||||
</Typography>
|
</Typography>
|
||||||
<Box sx={{ display: "flex", gap: "2vw" }}>
|
<Box sx={{ display: "flex", gap: "2vw", justifyContent: isMobile ? "center" : "none" }}>
|
||||||
<img
|
<img
|
||||||
src={usa}
|
src={usa}
|
||||||
alt="usa"
|
alt="usa"
|
||||||
style={{ width: "10vw", height: "9vw", pointerEvents: "none" }}
|
style={{ width: isMobile ? "20vw" : "10vw", height: isMobile ? "19vw" : "9vw", pointerEvents: "none" }}
|
||||||
/>
|
/>
|
||||||
<img
|
<img
|
||||||
src={china}
|
src={china}
|
||||||
alt="china"
|
alt="china"
|
||||||
style={{ width: "10vw", height: "9vw", pointerEvents: "none" }}
|
style={{ width: isMobile ? "20vw" : "10vw", height: isMobile ? "19vw" : "9vw", pointerEvents: "none" }}
|
||||||
/>
|
/>
|
||||||
<img
|
<img
|
||||||
src={korea}
|
src={korea}
|
||||||
alt="korea"
|
alt="korea"
|
||||||
style={{ width: "10vw", height: "9vw", pointerEvents: "none" }}
|
style={{ width: isMobile ? "20vw" : "10vw", height: isMobile ? "19vw" : "9vw", pointerEvents: "none" }}
|
||||||
/>
|
/>
|
||||||
</Box>
|
</Box>
|
||||||
</Box>
|
</Box>
|
||||||
<Box
|
<Box
|
||||||
sx={{
|
sx={{
|
||||||
maxWidth: "80vw",
|
maxWidth: "80vw",
|
||||||
width: "29vw",
|
mt: isMobile ? "5vw" : "0vw",
|
||||||
height: "23vw",
|
width: isMobile ? "80vw" : "29vw",
|
||||||
|
height: isMobile ? "52vw" : "23vw",
|
||||||
bgcolor: "transparent",
|
bgcolor: "transparent",
|
||||||
position: "relative",
|
position: "relative",
|
||||||
top: "-29vw",
|
top: isMobile ? "0vw" : "-29vw",
|
||||||
left: "56vw",
|
left: isMobile ? "50%" : "56vw",
|
||||||
|
transform: isMobile ? "translateX(-50%)" : "none",
|
||||||
borderRadius: "3vw",
|
borderRadius: "3vw",
|
||||||
border: "0.3vw solid #C27664",
|
border: "0.3vw solid #C27664",
|
||||||
}}
|
}}
|
||||||
@ -88,11 +90,11 @@ function DeliveryPage() {
|
|||||||
component="h2"
|
component="h2"
|
||||||
sx={{
|
sx={{
|
||||||
fontFamily: "Unbounded",
|
fontFamily: "Unbounded",
|
||||||
fontSize: "2vw",
|
fontSize: isMobile ? "5vw" : "2vw",
|
||||||
fontWeight: "bold",
|
fontWeight: "bold",
|
||||||
color: "#C27664",
|
color: "#C27664",
|
||||||
mt: "3vw",
|
mt: isMobile ? "5vw" : "3vw",
|
||||||
ml: "2.5vw",
|
ml: isMobile ? "4.5vw" : "2.5vw",
|
||||||
maxWidth: "80%",
|
maxWidth: "80%",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
@ -102,10 +104,10 @@ function DeliveryPage() {
|
|||||||
component="h2"
|
component="h2"
|
||||||
sx={{
|
sx={{
|
||||||
fontFamily: "Unbounded",
|
fontFamily: "Unbounded",
|
||||||
fontSize: "1.5vw",
|
fontSize: isMobile ? "4vw" : "1.5vw",
|
||||||
fontWeight: "light",
|
fontWeight: "light",
|
||||||
color: "#C27664",
|
color: "#C27664",
|
||||||
ml: "2.5vw",
|
ml: isMobile ? "4.5vw" : "2.5vw",
|
||||||
maxWidth: "60%",
|
maxWidth: "60%",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
@ -115,18 +117,18 @@ function DeliveryPage() {
|
|||||||
onClick={handleOpenFeedback}
|
onClick={handleOpenFeedback}
|
||||||
sx={{
|
sx={{
|
||||||
fontFamily: "Unbounded",
|
fontFamily: "Unbounded",
|
||||||
fontSize: "1.5vw",
|
fontSize: isMobile ? "3vw" : "1.5vw",
|
||||||
color: "white",
|
color: "white",
|
||||||
bgcolor: "#C27664",
|
bgcolor: "#C27664",
|
||||||
borderRadius: "3vw",
|
borderRadius: isMobile ? "5vw" : "3vw",
|
||||||
maxWidth: "60%",
|
maxWidth: "60%",
|
||||||
cursor: "pointer",
|
cursor: "pointer",
|
||||||
left: "50%",
|
left: "50%",
|
||||||
top: "70%",
|
top: isMobile ? "75%" : "70%",
|
||||||
position: "absolute",
|
position: "absolute",
|
||||||
transform: "translateX(-50%)",
|
transform: "translateX(-50%)",
|
||||||
padding: "1vw 3vw 1vw 3vw",
|
padding: isMobile ? "2vw 6vw 2vw 6vw" : "1vw 3vw 1vw 3vw",
|
||||||
width: "18vw",
|
width: isMobile ? "50vw" : "18vw",
|
||||||
textAlign: "center",
|
textAlign: "center",
|
||||||
"&:hover": {
|
"&:hover": {
|
||||||
bgcolor: "#945B4D",
|
bgcolor: "#945B4D",
|
||||||
|
|||||||
@ -4,13 +4,15 @@ import Feedback from "../components/Feedback";
|
|||||||
import car from "../../src/assets/icon/car.png";
|
import car from "../../src/assets/icon/car.png";
|
||||||
import { useResponsive } from "../theme/useResponsive";
|
import { useResponsive } from "../theme/useResponsive";
|
||||||
import TelegramIcon from "@mui/icons-material/Telegram";
|
import TelegramIcon from "@mui/icons-material/Telegram";
|
||||||
import VkIcon from "@mui/icons-material/Facebook";
|
import { FaVk } from "react-icons/fa";
|
||||||
import WhatsAppIcon from "@mui/icons-material/WhatsApp";
|
import WhatsAppIcon from "@mui/icons-material/WhatsApp";
|
||||||
import { scrollToAnchor } from "../utils/scrollUtils";
|
import { scrollToAnchor } from "../utils/scrollUtils";
|
||||||
import AboutUsPage from "./AboutUsPage";
|
import AboutUsPage from "./AboutUsPage";
|
||||||
import StagesPage from "./StagesPage";
|
import StagesPage from "./StagesPage";
|
||||||
import CarsPage from "./CarsPage";
|
import CarsPage from "./CarsPage";
|
||||||
import DeliveryPage from "./DeliveryPage";
|
import DeliveryPage from "./DeliveryPage";
|
||||||
|
import Divider from "../components/Divider";
|
||||||
|
import CalculatorPage from "./CalculatorPage";
|
||||||
|
|
||||||
function MainPage() {
|
function MainPage() {
|
||||||
const [feedbackOpen, setFeedbackOpen] = useState(false);
|
const [feedbackOpen, setFeedbackOpen] = useState(false);
|
||||||
@ -181,7 +183,7 @@ function MainPage() {
|
|||||||
"&:hover": { color: "#945B4D", borderColor: "#945B4D" },
|
"&:hover": { color: "#945B4D", borderColor: "#945B4D" },
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<VkIcon sx={{ fontSize: "3vw" }} />
|
<FaVk size={"3vw"} />
|
||||||
</IconButton>
|
</IconButton>
|
||||||
|
|
||||||
<IconButton
|
<IconButton
|
||||||
@ -217,9 +219,14 @@ function MainPage() {
|
|||||||
/>
|
/>
|
||||||
</Box>
|
</Box>
|
||||||
<AboutUsPage />
|
<AboutUsPage />
|
||||||
|
<Divider />
|
||||||
<StagesPage />
|
<StagesPage />
|
||||||
|
<Divider />
|
||||||
<CarsPage />
|
<CarsPage />
|
||||||
|
<Divider />
|
||||||
<DeliveryPage />
|
<DeliveryPage />
|
||||||
|
<Divider />
|
||||||
|
<CalculatorPage />
|
||||||
</Box>
|
</Box>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -85,7 +85,6 @@ function StagesPage() {
|
|||||||
padding: isMobile ? "10vw 5vw" : "5vw",
|
padding: isMobile ? "10vw 5vw" : "5vw",
|
||||||
minHeight: "100vh",
|
minHeight: "100vh",
|
||||||
scrollMarginTop: isMobile ? "15vw" : "10vw",
|
scrollMarginTop: isMobile ? "15vw" : "10vw",
|
||||||
position: "relative", // Добавляем позиционирование для родителя
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Box
|
<Box
|
||||||
@ -192,7 +191,7 @@ function StagesPage() {
|
|||||||
".slider-circle"
|
".slider-circle"
|
||||||
) as HTMLElement;
|
) as HTMLElement;
|
||||||
if (circle) {
|
if (circle) {
|
||||||
circle.style.left = "18.2vw";
|
circle.style.left = "61.5vw";
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
sx={{
|
sx={{
|
||||||
@ -214,7 +213,7 @@ function StagesPage() {
|
|||||||
boxShadow:
|
boxShadow:
|
||||||
"-0.5vw 0.5vw 2.5vw rgba(0, 0, 0, 0.4), inset 0.5vw 0.5vw 0.7vw rgba(255, 255, 255, 0.3)",
|
"-0.5vw 0.5vw 2.5vw rgba(0, 0, 0, 0.4), inset 0.5vw 0.5vw 0.7vw rgba(255, 255, 255, 0.3)",
|
||||||
"& .slider-circle": {
|
"& .slider-circle": {
|
||||||
left: "18.2vw",
|
left: "61.5vw",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
}}
|
}}
|
||||||
|
|||||||
Reference in New Issue
Block a user