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

minor fix / add animate on result-calculate

Browse Source
This commit is contained in:
aurinex
2025-07-11 00:08:29 +05:00
parent b33dc15343
commit 643960cadb
4 changed files with 301 additions and 280 deletions
Download Patch File Download Diff File Expand all files Collapse all files

531
src/pages/CalculatorPage.tsx
View File

@ -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",
}}
>
Рассчитать для
Рассчитать стоимость
</Typography>
<Box
sx={{
display: "flex",
gap: "1vw",
mt: "1vw",
// position: "absolute",
// top: "0vw",
// right: isMobile ? "10vw" : "5vw",
}}
>
<Box
onClick={() => setCountry("russia")}
sx={{ cursor: "pointer", position: "relative" }}
>
<Radio
checked={country === "russia"}
sx={{ position: "absolute", opacity: 0 }}
/>
<img
src={russia}
alt="Россия"
style={{
width: isMobile ? "10vw" : "3.5vw",
height: isMobile ? "9vw" : "3vw",
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: isMobile ? "10vw" : "3.5vw",
height: isMobile ? "9vw" : "3vw",
opacity: country === "belarus" ? 1 : 0.5,
}}
/>
</Box>
</Box>
</Box>
<Box
@ -509,7 +473,8 @@ function CalculatorPage() {
mb: isMobile ? "1.5vw" : "0.5vw",
mt: isMobile ? "1.5vw" : "0.5vw",
bgcolor: "#CDCDCD",
height: "0.1vw",
height: isMobile ? "0.3vw" : "0.1vw",
borderRadius: "1vw",
}}
/>
@ -640,7 +605,7 @@ function CalculatorPage() {
{isLoading
? "..."
: `(курс: ${
currencyRates?.Valute?.USD?.Value?.toFixed(2) || "93.00"
currencyRates?.Valute?.USD?.Value?.toFixed(2) || "error"
})`}
</MenuItem>
<MenuItem value="EUR Евро">
@ -649,7 +614,7 @@ function CalculatorPage() {
? "..."
: `(курс: ${
currencyRates?.Valute?.EUR?.Value?.toFixed(2) ||
"101.00"
"error"
})`}
</MenuItem>
<MenuItem value="CNY Юань">
@ -657,7 +622,7 @@ function CalculatorPage() {
{isLoading
? "..."
: `(курс: ${
currencyRates?.Valute?.CNY?.Value?.toFixed(2) || "12.80"
currencyRates?.Valute?.CNY?.Value?.toFixed(2) || "error"
})`}
</MenuItem>
<MenuItem value="RUB Рубль">RUB Рубль</MenuItem>
@ -852,7 +817,41 @@ function CalculatorPage() {
},
}}
/>
<Box
<Typography
sx={{
fontFamily: "Unbounded",
fontSize: isMobile ? "3vw" : "2vw",
color: "#C27664",
textWrap: "nowrap",
}}
>
л.с.
</Typography>
<Typography
sx={{
fontFamily: "Unbounded",
fontSize: isMobile ? "3vw" : "2vw",
color: "#C27664",
textWrap: "nowrap",
}}
>
=
</Typography>
<Typography
sx={{
fontFamily: "Unbounded",
fontSize: isMobile ? "3vw" : "2vw",
color: "#C27664",
textWrap: "nowrap",
}}
>
{enginePower
? `${(parseFloat(enginePower) * 1.35962).toFixed(
1
)} кВт.`
: "0 кВт"}
</Typography>
{/* <Box
sx={{
display: "flex",
alignItems: "center",
@ -906,7 +905,7 @@ function CalculatorPage() {
},
}}
/>
</Box>
</Box> */}
</Box>
</Collapse>
@ -1003,15 +1002,14 @@ function CalculatorPage() {
textWrap: "nowrap",
}}
>
{isMobile ? "Мощность ДВС vs ЭД" : "ДВС vs ЭД"}
{/* {isMobile ? "Мощность ДВС vs ЭД" : "ДВС vs ЭД"} */}
</Typography>
<Box
sx={{
display: "flex",
flexWrap: "nowrap",
textWrap: "nowrap",
ml: isMobile ? "0vw" : "2vw",
mt: isMobile ? "-2vw" : "0vw",
mt: isMobile ? "-2vw" : "-1vw",
}}
>
<FormControlLabel
@ -1024,7 +1022,7 @@ function CalculatorPage() {
color: "#C27664",
"&.Mui-checked": { color: "#C27664" },
"& .MuiSvgIcon-root": {
fontSize: isMobile ? "5vw" : "1.8vw",
fontSize: isMobile ? "5vw" : "2vw",
},
}}
/>
@ -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() {
</Box>
{/* Блок с результатами расчета */}
{calculationResults && (
<Paper
id="calculator-results"
elevation={3}
sx={{
ml: isMobile ? "0vw" : "2vw",
p: "2vw",
borderRadius: isMobile ? "5vw" : "2vw",
border: "0.3vw solid #C27664",
// width: isMobile ? "82%" : "85%",
}}
<Box
sx={{
position: isMobile ? "relative" : "absolute", // Абсолютное позиционирование для десктопа
left: isMobile ? "auto" : "calc(40% + 10vw)",
top: isMobile ? "auto" : 0,
width: isMobile ? "auto" : "40%",
zIndex: 0,
}}
>
<Slide
direction="right"
in={slideIn && !!calculationResults}
mountOnEnter
unmountOnExit
timeout={800}
>
<Typography
variant="h5"
<Paper
id="calculator-results"
elevation={3}
sx={{
fontFamily: "Unbounded",
fontSize: isMobile ? "4vw" : "2vw",
color: "#C27664",
mb: "1.5vw",
p: "3vw",
borderRadius: isMobile ? "5vw" : "2vw",
border: isMobile ? "0.5vw solid #C27664" : "0.3vw solid #C27664",
mt: isMobile ? "5vw" : "0",
//transform: "translateX(0)",
}}
>
Результаты расчета:
</Typography>
<Typography
variant="h5"
sx={{
fontFamily: "Unbounded",
fontSize: isMobile ? "4vw" : "2vw",
color: "#C27664",
mb: "1.5vw",
}}
>
Результаты расчета:
</Typography>
<Box>
<Box>
<Box
sx={{
display: "flex",
flexDirection: "row",
alignItems: "center",
gap: "1vw",
}}
>
<Typography
<Box>
<Box
sx={{
fontFamily: "Unbounded",
fontSize: isMobile ? "3.2vw" : "1.2vw",
display: "flex",
flexDirection: "row",
alignItems: "center",
gap: "1vw",
}}
>
Стоимость авто:
</Typography>
<Typography
sx={{
fontFamily: "Unbounded",
fontSize: isMobile ? "3vw" : "1.2vw",
}}
>
Стоимость авто:
</Typography>
<Typography
sx={{
fontFamily: "Unbounded",
fontSize: isMobile ? "3vw" : "1.2vw",
fontWeight: "bold",
}}
>
{Number(calculationResults.priceInRub).toLocaleString(
"ru-RU"
)}{" "}
₽
</Typography>
</Box>
<Box
sx={{
display: "flex",
flexDirection: "row",
alignItems: "center",
gap: "1vw",
}}
>
<Typography
sx={{
fontFamily: "Unbounded",
fontSize: isMobile ? "3vw" : "1.2vw",
}}
>
Таможенная пошлина:
</Typography>
<Typography
sx={{
fontFamily: "Unbounded",
fontSize: isMobile ? "3vw" : "1.2vw",
fontWeight: "bold",
}}
>
{Number(calculationResults.customDuty).toLocaleString(
"ru-RU"
)}{" "}
₽
</Typography>
</Box>
<Box
sx={{
display: "flex",
flexDirection: "row",
alignItems: "center",
gap: "1vw",
}}
>
<Typography
sx={{
fontFamily: "Unbounded",
fontSize: isMobile ? "3vw" : "1.2vw",
}}
>
Акциз:
</Typography>
<Typography
sx={{
fontFamily: "Unbounded",
fontSize: isMobile ? "3vw" : "1.2vw",
fontWeight: "bold",
}}
>
{Number(calculationResults.exciseTax).toLocaleString(
"ru-RU"
)}{" "}
₽
</Typography>
</Box>
<Box
sx={{
display: "flex",
flexDirection: "row",
alignItems: "center",
gap: "1vw",
}}
>
<Typography
sx={{
fontFamily: "Unbounded",
fontSize: isMobile ? "3vw" : "1.2vw",
}}
>
НДС:
</Typography>
<Typography
sx={{
fontFamily: "Unbounded",
fontSize: isMobile ? "3.2vw" : "1.2vw",
fontWeight: "bold",
}}
>
{Number(calculationResults.vat).toLocaleString("ru-RU")} ₽
</Typography>
</Box>
<Box
sx={{
display: "flex",
flexDirection: "row",
alignItems: "center",
gap: "1vw",
}}
>
<Typography
sx={{
fontFamily: "Unbounded",
fontSize: isMobile ? "3vw" : "1.2vw",
}}
>
Утилизационный сбор:
</Typography>
<Typography
sx={{
fontFamily: "Unbounded",
fontSize: isMobile ? "3.2vw" : "1.2vw",
fontWeight: "bold",
}}
>
{Number(calculationResults.utilityFee).toLocaleString(
"ru-RU"
)}{" "}
₽
</Typography>
</Box>
</Box>
<Box>
<Box sx={{ borderTop: "1px solid #C27664", my: "1vw" }} />
</Box>
<Box>
<Typography
sx={{
fontFamily: "Unbounded",
fontSize: isMobile ? "3.2vw" : "1.2vw",
fontSize: isMobile ? "3vw" : "1.5vw",
color: "#C27664",
}}
>
Всего таможенных платежей:
</Typography>
</Box>
<Box>
<Typography
sx={{
fontFamily: "Unbounded",
fontSize: isMobile ? "3vw" : "1.5vw",
color: "#C27664",
fontWeight: "bold",
}}
>
{Number(calculationResults.priceInRub).toLocaleString(
"ru-RU"
)}{" "}
{Number(calculationResults.totalFees).toLocaleString("ru-RU")}{" "}
₽
</Typography>
</Box>
<Box
sx={{
display: "flex",
flexDirection: "row",
alignItems: "center",
gap: "1vw",
}}
>
<Box>
<Typography
sx={{
fontFamily: "Unbounded",
fontSize: isMobile ? "3.2vw" : "1.2vw",
fontSize: isMobile ? "3vw" : "1.5vw",
color: "#C27664",
}}
>
Таможенная пошлина:
</Typography>
<Typography
sx={{
fontFamily: "Unbounded",
fontSize: isMobile ? "3.2vw" : "1.2vw",
fontWeight: "bold",
}}
>
{Number(calculationResults.customDuty).toLocaleString(
"ru-RU"
)}{" "}
₽
Итоговая стоимость с авто:
</Typography>
</Box>
<Box
sx={{
display: "flex",
flexDirection: "row",
alignItems: "center",
gap: "1vw",
}}
>
<Box>
<Typography
sx={{
fontFamily: "Unbounded",
fontSize: isMobile ? "3.2vw" : "1.2vw",
}}
>
Акциз:
</Typography>
<Typography
sx={{
fontFamily: "Unbounded",
fontSize: isMobile ? "3.2vw" : "1.2vw",
fontSize: isMobile ? "3vw" : "1.5vw",
color: "#C27664",
fontWeight: "bold",
}}
>
{Number(calculationResults.exciseTax).toLocaleString(
"ru-RU"
)}{" "}
₽
</Typography>
</Box>
<Box
sx={{
display: "flex",
flexDirection: "row",
alignItems: "center",
gap: "1vw",
}}
>
<Typography
sx={{
fontFamily: "Unbounded",
fontSize: isMobile ? "3.2vw" : "1.2vw",
}}
>
НДС:
</Typography>
<Typography
sx={{
fontFamily: "Unbounded",
fontSize: isMobile ? "3.2vw" : "1.2vw",
fontWeight: "bold",
}}
>
{Number(calculationResults.vat).toLocaleString("ru-RU")} ₽
</Typography>
</Box>
<Box
sx={{
display: "flex",
flexDirection: "row",
alignItems: "center",
gap: "1vw",
}}
>
<Typography
sx={{
fontFamily: "Unbounded",
fontSize: isMobile ? "3.2vw" : "1.2vw",
}}
>
Утилизационный сбор:
</Typography>
<Typography
sx={{
fontFamily: "Unbounded",
fontSize: isMobile ? "3.2vw" : "1.2vw",
fontWeight: "bold",
}}
>
{Number(calculationResults.utilityFee).toLocaleString(
{Number(calculationResults.totalWithCar).toLocaleString(
"ru-RU"
)}{" "}
₽
</Typography>
</Box>
</Box>
<Box>
<Box sx={{ borderTop: "1px solid #C27664", my: "1vw" }} />
</Box>
<Box>
<Typography
sx={{
fontFamily: "Unbounded",
fontSize: isMobile ? "3.2vw" : "1.5vw",
color: "#C27664",
}}
>
Всего таможенных платежей:
</Typography>
</Box>
<Box>
<Typography
sx={{
fontFamily: "Unbounded",
fontSize: isMobile ? "3.2vw" : "1.5vw",
color: "#C27664",
fontWeight: "bold",
}}
>
{Number(calculationResults.totalFees).toLocaleString("ru-RU")}{" "}
₽
</Typography>
</Box>
<Box>
<Typography
sx={{
fontFamily: "Unbounded",
fontSize: isMobile ? "3.2vw" : "1.5vw",
color: "#C27664",
}}
>
Итоговая стоимость с авто:
</Typography>
</Box>
<Box>
<Typography
sx={{
fontFamily: "Unbounded",
fontSize: isMobile ? "3.2vw" : "1.5vw",
color: "#C27664",
fontWeight: "bold",
}}
>
{Number(calculationResults.totalWithCar).toLocaleString(
"ru-RU"
)}{" "}
₽
</Typography>
</Box>
</Box>
</Paper>
</Paper>
</Slide>
</Box>
)}
{/* Правая часть - описание */}
{!calculationResults && !isMobile && (
<Box

45
src/pages/CarsPage.tsx
View File

@ -215,7 +215,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;
// Рассчитать индекс предыдущей карточки
@ -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() {
>
<Box
component="a"
href="https://t.me/your_telegram_channel"
href="https://t.me/autobrocn"
target="_blank"
sx={{
bgcolor: "#C27664",

3
src/pages/MainPage.tsx
View File

@ -181,9 +181,10 @@ function MainPage() {
width: "3vw",
height: "3vw",
"&:hover": { color: "#945B4D", borderColor: "#945B4D" },
padding: "0.2vw",
}}
>
<FaVk size={"3vw"} />
<FaVk size={"5vw"} />
</IconButton>
<IconButton

2
src/utils/scrollUtils.ts
View File

@ -12,7 +12,7 @@ export const scrollToAnchor = (
const element = document.querySelector(anchor);
if (element) {
// Получаем высоту хедера (в соответствии с размерами в Header.tsx)
const headerHeight = isMobile ? window.innerWidth * 0.15 : window.innerWidth * 0.05; // 15vw или 10vw
const headerHeight = isMobile ? window.innerWidth * 0.15 : window.innerWidth * 0.1; // 15vw или 10vw
// Получаем позицию элемента относительно верха страницы
const elementPosition = element.getBoundingClientRect().top + window.scrollY;