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"
|
||||
sx={{
|
||||
fontFamily: "Unbounded",
|
||||
fontSize: isMobile ? "10vw" : "4vw",
|
||||
fontSize: isMobile ? "6vw" : "4vw",
|
||||
fontWeight: "bold",
|
||||
marginBottom: "1vw",
|
||||
maxWidth: "50vw",
|
||||
maxWidth: isMobile ? "auto" :"50vw",
|
||||
}}
|
||||
>
|
||||
Мы доставляем автомобили из{" "}
|
||||
<span style={{ color: "#C27664" }}>США, Китая и Кореи</span>
|
||||
</Typography>
|
||||
<Box sx={{ display: "flex", gap: "2vw" }}>
|
||||
<Box sx={{ display: "flex", gap: "2vw", justifyContent: isMobile ? "center" : "none" }}>
|
||||
<img
|
||||
src={usa}
|
||||
alt="usa"
|
||||
style={{ width: "10vw", height: "9vw", pointerEvents: "none" }}
|
||||
style={{ width: isMobile ? "20vw" : "10vw", height: isMobile ? "19vw" : "9vw", pointerEvents: "none" }}
|
||||
/>
|
||||
<img
|
||||
src={china}
|
||||
alt="china"
|
||||
style={{ width: "10vw", height: "9vw", pointerEvents: "none" }}
|
||||
style={{ width: isMobile ? "20vw" : "10vw", height: isMobile ? "19vw" : "9vw", pointerEvents: "none" }}
|
||||
/>
|
||||
<img
|
||||
src={korea}
|
||||
alt="korea"
|
||||
style={{ width: "10vw", height: "9vw", pointerEvents: "none" }}
|
||||
style={{ width: isMobile ? "20vw" : "10vw", height: isMobile ? "19vw" : "9vw", pointerEvents: "none" }}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
maxWidth: "80vw",
|
||||
width: "29vw",
|
||||
height: "23vw",
|
||||
mt: isMobile ? "5vw" : "0vw",
|
||||
width: isMobile ? "80vw" : "29vw",
|
||||
height: isMobile ? "52vw" : "23vw",
|
||||
bgcolor: "transparent",
|
||||
position: "relative",
|
||||
top: "-29vw",
|
||||
left: "56vw",
|
||||
top: isMobile ? "0vw" : "-29vw",
|
||||
left: isMobile ? "50%" : "56vw",
|
||||
transform: isMobile ? "translateX(-50%)" : "none",
|
||||
borderRadius: "3vw",
|
||||
border: "0.3vw solid #C27664",
|
||||
}}
|
||||
@ -88,11 +90,11 @@ function DeliveryPage() {
|
||||
component="h2"
|
||||
sx={{
|
||||
fontFamily: "Unbounded",
|
||||
fontSize: "2vw",
|
||||
fontSize: isMobile ? "5vw" : "2vw",
|
||||
fontWeight: "bold",
|
||||
color: "#C27664",
|
||||
mt: "3vw",
|
||||
ml: "2.5vw",
|
||||
mt: isMobile ? "5vw" : "3vw",
|
||||
ml: isMobile ? "4.5vw" : "2.5vw",
|
||||
maxWidth: "80%",
|
||||
}}
|
||||
>
|
||||
@ -102,10 +104,10 @@ function DeliveryPage() {
|
||||
component="h2"
|
||||
sx={{
|
||||
fontFamily: "Unbounded",
|
||||
fontSize: "1.5vw",
|
||||
fontSize: isMobile ? "4vw" : "1.5vw",
|
||||
fontWeight: "light",
|
||||
color: "#C27664",
|
||||
ml: "2.5vw",
|
||||
ml: isMobile ? "4.5vw" : "2.5vw",
|
||||
maxWidth: "60%",
|
||||
}}
|
||||
>
|
||||
@ -115,18 +117,18 @@ function DeliveryPage() {
|
||||
onClick={handleOpenFeedback}
|
||||
sx={{
|
||||
fontFamily: "Unbounded",
|
||||
fontSize: "1.5vw",
|
||||
fontSize: isMobile ? "3vw" : "1.5vw",
|
||||
color: "white",
|
||||
bgcolor: "#C27664",
|
||||
borderRadius: "3vw",
|
||||
borderRadius: isMobile ? "5vw" : "3vw",
|
||||
maxWidth: "60%",
|
||||
cursor: "pointer",
|
||||
left: "50%",
|
||||
top: "70%",
|
||||
top: isMobile ? "75%" : "70%",
|
||||
position: "absolute",
|
||||
transform: "translateX(-50%)",
|
||||
padding: "1vw 3vw 1vw 3vw",
|
||||
width: "18vw",
|
||||
padding: isMobile ? "2vw 6vw 2vw 6vw" : "1vw 3vw 1vw 3vw",
|
||||
width: isMobile ? "50vw" : "18vw",
|
||||
textAlign: "center",
|
||||
"&:hover": {
|
||||
bgcolor: "#945B4D",
|
||||
|
||||
@ -4,13 +4,15 @@ import Feedback from "../components/Feedback";
|
||||
import car from "../../src/assets/icon/car.png";
|
||||
import { useResponsive } from "../theme/useResponsive";
|
||||
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 { scrollToAnchor } from "../utils/scrollUtils";
|
||||
import AboutUsPage from "./AboutUsPage";
|
||||
import StagesPage from "./StagesPage";
|
||||
import CarsPage from "./CarsPage";
|
||||
import DeliveryPage from "./DeliveryPage";
|
||||
import Divider from "../components/Divider";
|
||||
import CalculatorPage from "./CalculatorPage";
|
||||
|
||||
function MainPage() {
|
||||
const [feedbackOpen, setFeedbackOpen] = useState(false);
|
||||
@ -181,7 +183,7 @@ function MainPage() {
|
||||
"&:hover": { color: "#945B4D", borderColor: "#945B4D" },
|
||||
}}
|
||||
>
|
||||
<VkIcon sx={{ fontSize: "3vw" }} />
|
||||
<FaVk size={"3vw"} />
|
||||
</IconButton>
|
||||
|
||||
<IconButton
|
||||
@ -217,9 +219,14 @@ function MainPage() {
|
||||
/>
|
||||
</Box>
|
||||
<AboutUsPage />
|
||||
<Divider />
|
||||
<StagesPage />
|
||||
<Divider />
|
||||
<CarsPage />
|
||||
<Divider />
|
||||
<DeliveryPage />
|
||||
<Divider />
|
||||
<CalculatorPage />
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
@ -85,7 +85,6 @@ function StagesPage() {
|
||||
padding: isMobile ? "10vw 5vw" : "5vw",
|
||||
minHeight: "100vh",
|
||||
scrollMarginTop: isMobile ? "15vw" : "10vw",
|
||||
position: "relative", // Добавляем позиционирование для родителя
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
@ -192,7 +191,7 @@ function StagesPage() {
|
||||
".slider-circle"
|
||||
) as HTMLElement;
|
||||
if (circle) {
|
||||
circle.style.left = "18.2vw";
|
||||
circle.style.left = "61.5vw";
|
||||
}
|
||||
}}
|
||||
sx={{
|
||||
@ -214,7 +213,7 @@ function StagesPage() {
|
||||
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)",
|
||||
"& .slider-circle": {
|
||||
left: "18.2vw",
|
||||
left: "61.5vw",
|
||||
},
|
||||
},
|
||||
}}
|
||||
|
||||
Reference in New Issue
Block a user