diff --git a/src/pages/CalculatorPage.tsx b/src/pages/CalculatorPage.tsx
index b13bacc..3c7aa9a 100644
--- a/src/pages/CalculatorPage.tsx
+++ b/src/pages/CalculatorPage.tsx
@@ -12,6 +12,7 @@ import {
InputAdornment,
Collapse,
Paper,
+ Slide,
} from "@mui/material";
import { useResponsive } from "../theme/useResponsive";
import russia from "../assets/emoji/russia.png";
@@ -58,6 +59,8 @@ function CalculatorPage() {
totalWithCar: string;
} | null>(null);
+ const [slideIn, setSlideIn] = useState(false);
+
// Получение курсов валют при монтировании компонента
useEffect(() => {
const loadCurrencyRates = async () => {
@@ -268,6 +271,9 @@ function CalculatorPage() {
setCalculationResults(results);
+ // После расчетов установить флаг анимации
+ setSlideIn(true);
+
// Выводим результаты также в консоль для отладки
console.log({
original: {
@@ -331,11 +337,13 @@ function CalculatorPage() {
sx={{
display: "flex",
flexDirection: isMobile ? "column" : "row",
- justifyContent: calculationResults ? "center" : "space-between",
+ justifyContent: calculationResults ? "flex-start" : "space-between",
maxWidth: "90vw",
margin: "0 auto",
- gap: calculationResults ? "3vw" : "0",
- alignItems: isMobile ? "center" : "normal",
+ gap: "1vw",
+ alignItems: isMobile ? "center" : "flex-start",
+ position: "relative",
+ width: "100%", // Зафиксировать ширину
}}
>
{isMobile && (
@@ -433,7 +441,10 @@ function CalculatorPage() {
minWidth: "35vw",
borderRadius: isMobile ? "5vw" : "2vw",
padding: "3vw",
- border: "0.3vw solid #C27664",
+ border: isMobile ? "0.5vw solid #C27664" : "0.3vw solid #C27664",
+ boxShadow: isMobile
+ ? "0 0 1.5vw 1vw rgba(0, 0, 0, 0.2)"
+ : "0 0 1vw 0.5vw rgba(0, 0, 0, 0.2)",
}}
>
{/* Первая линия */}
@@ -453,55 +464,8 @@ function CalculatorPage() {
color: "#C27664",
}}
>
- Рассчитать для
+ Рассчитать стоимость
-
- setCountry("russia")}
- sx={{ cursor: "pointer", position: "relative" }}
- >
-
- 
-
- setCountry("belarus")}
- sx={{ cursor: "pointer", position: "relative" }}
- >
-
- 
-
-
@@ -640,7 +605,7 @@ function CalculatorPage() {
{isLoading
? "..."
: `(курс: ${
- currencyRates?.Valute?.USD?.Value?.toFixed(2) || "93.00"
+ currencyRates?.Valute?.USD?.Value?.toFixed(2) || "error"
})`}
@@ -852,7 +817,41 @@ function CalculatorPage() {
},
}}
/>
-
+ л.с.
+
+
+ =
+
+
+ {enginePower
+ ? `${(parseFloat(enginePower) * 1.35962).toFixed(
+ 1
+ )} кВт.`
+ : "0 кВт"}
+
+ {/*
-
+ */}
@@ -1003,15 +1002,14 @@ function CalculatorPage() {
textWrap: "nowrap",
}}
>
- {isMobile ? "Мощность ДВС vs ЭД" : "ДВС vs ЭД"}
+ {/* {isMobile ? "Мощность ДВС vs ЭД" : "ДВС vs ЭД"} */}
@@ -1032,7 +1030,7 @@ function CalculatorPage() {
label="ДВС > ЭД"
sx={{
"& .MuiFormControlLabel-label": {
- fontSize: isMobile ? "3vw" : "1.3vw",
+ fontSize: isMobile ? "3vw" : "2vw",
fontFamily: "Unbounded",
color: "#C27664",
},
@@ -1048,7 +1046,7 @@ function CalculatorPage() {
color: "#C27664",
"&.Mui-checked": { color: "#C27664" },
"& .MuiSvgIcon-root": {
- fontSize: isMobile ? "5vw" : "1.8vw",
+ fontSize: isMobile ? "5vw" : "2vw",
},
}}
/>
@@ -1056,7 +1054,7 @@ function CalculatorPage() {
label="ДВС < ЭД"
sx={{
"& .MuiFormControlLabel-label": {
- fontSize: isMobile ? "3vw" : "1.3vw",
+ fontSize: isMobile ? "3vw" : "2vw",
fontFamily: "Unbounded",
color: "#C27664",
},
@@ -1177,238 +1175,255 @@ function CalculatorPage() {
{/* Блок с результатами расчета */}
{calculationResults && (
-
+
-
- Результаты расчета:
-
+
+ Результаты расчета:
+
-
-
-
+
- Стоимость авто:
-
+
+ Стоимость авто:
+
+
+ {Number(calculationResults.priceInRub).toLocaleString(
+ "ru-RU"
+ )}{" "}
+ ₽
+
+
+
+
+
+ Таможенная пошлина:
+
+
+ {Number(calculationResults.customDuty).toLocaleString(
+ "ru-RU"
+ )}{" "}
+ ₽
+
+
+
+
+
+ Акциз:
+
+
+ {Number(calculationResults.exciseTax).toLocaleString(
+ "ru-RU"
+ )}{" "}
+ ₽
+
+
+
+
+
+ НДС:
+
+
+ {Number(calculationResults.vat).toLocaleString("ru-RU")} ₽
+
+
+
+
+
+ Утилизационный сбор:
+
+
+ {Number(calculationResults.utilityFee).toLocaleString(
+ "ru-RU"
+ )}{" "}
+ ₽
+
+
+
+
+
+
+
+
+
+ Всего таможенных платежей:
+
+
+
+
- {Number(calculationResults.priceInRub).toLocaleString(
- "ru-RU"
- )}{" "}
+ {Number(calculationResults.totalFees).toLocaleString("ru-RU")}{" "}
₽
-
+
- Таможенная пошлина:
-
-
- {Number(calculationResults.customDuty).toLocaleString(
- "ru-RU"
- )}{" "}
- ₽
+ Итоговая стоимость с авто:
-
-
+
- Акциз:
-
-
- {Number(calculationResults.exciseTax).toLocaleString(
- "ru-RU"
- )}{" "}
- ₽
-
-
-
-
-
- НДС:
-
-
- {Number(calculationResults.vat).toLocaleString("ru-RU")} ₽
-
-
-
-
-
- Утилизационный сбор:
-
-
- {Number(calculationResults.utilityFee).toLocaleString(
+ {Number(calculationResults.totalWithCar).toLocaleString(
"ru-RU"
)}{" "}
₽
-
-
-
-
-
-
-
- Всего таможенных платежей:
-
-
-
-
- {Number(calculationResults.totalFees).toLocaleString("ru-RU")}{" "}
- ₽
-
-
-
-
-
- Итоговая стоимость с авто:
-
-
-
-
- {Number(calculationResults.totalWithCar).toLocaleString(
- "ru-RU"
- )}{" "}
- ₽
-
-
-
-
+
+
+
)}
-
{/* Правая часть - описание */}
{!calculationResults && !isMobile && (
(window.innerWidth * vw) / 100;
// Рассчитать индекс предыдущей карточки
@@ -223,19 +223,20 @@ function CarsPage() {
const prevIndex = Math.max(0, currentIndex - 1);
// Прокрутить к предыдущей карточке
- if (container.children[prevIndex]) {
+ if (isMobile &&container.children[prevIndex]) {
container.children[prevIndex].scrollIntoView({
behavior: "smooth",
block: "nearest",
inline: "start",
});
+ }
- // Добавляем дополнительный сдвиг на 0.5vw для ПК версии
- if (!isMobile) {
- setTimeout(() => {
- container.scrollLeft -= vwToPx(0.5);
- }, 50);
- }
+ if (!isMobile && container.children[prevIndex]) {
+ const scrollOffset = prevIndex === 0 ? vwToPx(2) : 0;
+ container.scrollTo({
+ left: prevIndex * vwToPx(cardWidth + gap) - scrollOffset,
+ behavior: "smooth"
+ });
}
}
};
@@ -247,7 +248,7 @@ function CarsPage() {
const container = scrollContainerRef.current;
const scrollPosition = container.scrollLeft;
const cardWidth = isMobile ? 80 : 25;
- const gap = 2;
+ const gap = isMobile ? 2 : 4;
const vwToPx = (vw: number) => (window.innerWidth * vw) / 100;
// Рассчитать индекс следующей карточки
@@ -255,18 +256,20 @@ function CarsPage() {
const nextIndex = Math.min(cars.length - 1, currentIndex + 1);
// Прокрутить к следующей карточке
- if (container.children[nextIndex]) {
+ if (isMobile && container.children[nextIndex]) {
container.children[nextIndex].scrollIntoView({
behavior: "smooth",
block: "nearest",
inline: "start",
});
+ }
- if (!isMobile && nextIndex !== cars.length - 1) {
- setTimeout(() => {
- container.scrollLeft -= vwToPx(0.5);
- }, 50);
- }
+ if (!isMobile && container.children[nextIndex]) {
+ const scrollOffset = nextIndex === cars.length - 1 ? vwToPx(2) : 0;
+ container.scrollTo({
+ left: nextIndex * vwToPx(cardWidth + gap) + scrollOffset,
+ behavior: "smooth"
+ });
}
}
};
@@ -312,14 +315,14 @@ function CarsPage() {
ref={scrollContainerRef}
sx={{
display: "flex",
- gap: "2vw",
+ gap: isMobile ? "2vw" : "4vw",
overflowX: "auto",
scrollbarWidth: "none",
"&::-webkit-scrollbar": {
display: "none",
},
pb: "1vw",
- maxWidth: isMobile ? "81vw" : "53vw",
+ maxWidth: isMobile ? "81vw" : "58vw",
scrollBehavior: "smooth",
}}
>
@@ -329,9 +332,11 @@ function CarsPage() {
sx={{
width: isMobile ? "80vw" : "25vw",
minWidth: isMobile ? "80vw" : "25vw",
- marginLeft: index === 0 ? "0.5vw" : 0,
+ marginLeft: index === 0 ? isMobile ? "0vw" : "2vw" : "0vw",
+ // marginLeft: isMobile ? "1vw" : "2vw",
+ marginRight: index === cars.length - 1 ? isMobile ? "0vw" : "2vw" : "0vw",
bgcolor: "white",
- border: isMobile ? "1px solid #C27664" : "none",
+ border: isMobile ? "0.5vw solid #C27664" : "none",
borderRadius: "2vw",
overflow: "hidden",
boxShadow: isMobile
@@ -498,7 +503,7 @@ function CarsPage() {
>
-
+