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, InputAdornment,
Collapse, Collapse,
Paper, Paper,
Slide,
} from "@mui/material"; } from "@mui/material";
import { useResponsive } from "../theme/useResponsive"; import { useResponsive } from "../theme/useResponsive";
import russia from "../assets/emoji/russia.png"; import russia from "../assets/emoji/russia.png";
@ -58,6 +59,8 @@ function CalculatorPage() {
totalWithCar: string; totalWithCar: string;
} | null>(null); } | null>(null);
const [slideIn, setSlideIn] = useState(false);
// Получение курсов валют при монтировании компонента // Получение курсов валют при монтировании компонента
useEffect(() => { useEffect(() => {
const loadCurrencyRates = async () => { const loadCurrencyRates = async () => {
@ -268,6 +271,9 @@ function CalculatorPage() {
setCalculationResults(results); setCalculationResults(results);
// После расчетов установить флаг анимации
setSlideIn(true);
// Выводим результаты также в консоль для отладки // Выводим результаты также в консоль для отладки
console.log({ console.log({
original: { original: {
@ -331,11 +337,13 @@ function CalculatorPage() {
sx={{ sx={{
display: "flex", display: "flex",
flexDirection: isMobile ? "column" : "row", flexDirection: isMobile ? "column" : "row",
justifyContent: calculationResults ? "center" : "space-between", justifyContent: calculationResults ? "flex-start" : "space-between",
maxWidth: "90vw", maxWidth: "90vw",
margin: "0 auto", margin: "0 auto",
gap: calculationResults ? "3vw" : "0", gap: "1vw",
alignItems: isMobile ? "center" : "normal", alignItems: isMobile ? "center" : "flex-start",
position: "relative",
width: "100%", // Зафиксировать ширину
}} }}
> >
{isMobile && ( {isMobile && (
@ -433,7 +441,10 @@ function CalculatorPage() {
minWidth: "35vw", minWidth: "35vw",
borderRadius: isMobile ? "5vw" : "2vw", borderRadius: isMobile ? "5vw" : "2vw",
padding: "3vw", 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", color: "#C27664",
}} }}
> >
Рассчитать для Рассчитать стоимость
</Typography> </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>
<Box <Box
@ -509,7 +473,8 @@ function CalculatorPage() {
mb: isMobile ? "1.5vw" : "0.5vw", mb: isMobile ? "1.5vw" : "0.5vw",
mt: isMobile ? "1.5vw" : "0.5vw", mt: isMobile ? "1.5vw" : "0.5vw",
bgcolor: "#CDCDCD", bgcolor: "#CDCDCD",
height: "0.1vw", height: isMobile ? "0.3vw" : "0.1vw",
borderRadius: "1vw",
}} }}
/> />
@ -640,7 +605,7 @@ function CalculatorPage() {
{isLoading {isLoading
? "..." ? "..."
: `(курс: ${ : `(курс: ${
currencyRates?.Valute?.USD?.Value?.toFixed(2) || "93.00" currencyRates?.Valute?.USD?.Value?.toFixed(2) || "error"
})`} })`}
</MenuItem> </MenuItem>
<MenuItem value="EUR Евро"> <MenuItem value="EUR Евро">
@ -649,7 +614,7 @@ function CalculatorPage() {
? "..." ? "..."
: `(курс: ${ : `(курс: ${
currencyRates?.Valute?.EUR?.Value?.toFixed(2) || currencyRates?.Valute?.EUR?.Value?.toFixed(2) ||
"101.00" "error"
})`} })`}
</MenuItem> </MenuItem>
<MenuItem value="CNY Юань"> <MenuItem value="CNY Юань">
@ -657,7 +622,7 @@ function CalculatorPage() {
{isLoading {isLoading
? "..." ? "..."
: `(курс: ${ : `(курс: ${
currencyRates?.Valute?.CNY?.Value?.toFixed(2) || "12.80" currencyRates?.Valute?.CNY?.Value?.toFixed(2) || "error"
})`} })`}
</MenuItem> </MenuItem>
<MenuItem value="RUB Рубль">RUB Рубль</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={{ sx={{
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
@ -906,7 +905,7 @@ function CalculatorPage() {
}, },
}} }}
/> />
</Box> </Box> */}
</Box> </Box>
</Collapse> </Collapse>
@ -1003,15 +1002,14 @@ function CalculatorPage() {
textWrap: "nowrap", textWrap: "nowrap",
}} }}
> >
{isMobile ? "Мощность ДВС vs ЭД" : "ДВС vs ЭД"} {/* {isMobile ? "Мощность ДВС vs ЭД" : "ДВС vs ЭД"} */}
</Typography> </Typography>
<Box <Box
sx={{ sx={{
display: "flex", display: "flex",
flexWrap: "nowrap", flexWrap: "nowrap",
textWrap: "nowrap", textWrap: "nowrap",
ml: isMobile ? "0vw" : "2vw", mt: isMobile ? "-2vw" : "-1vw",
mt: isMobile ? "-2vw" : "0vw",
}} }}
> >
<FormControlLabel <FormControlLabel
@ -1024,7 +1022,7 @@ function CalculatorPage() {
color: "#C27664", color: "#C27664",
"&.Mui-checked": { color: "#C27664" }, "&.Mui-checked": { color: "#C27664" },
"& .MuiSvgIcon-root": { "& .MuiSvgIcon-root": {
fontSize: isMobile ? "5vw" : "1.8vw", fontSize: isMobile ? "5vw" : "2vw",
}, },
}} }}
/> />
@ -1032,7 +1030,7 @@ function CalculatorPage() {
label="ДВС > ЭД" label="ДВС > ЭД"
sx={{ sx={{
"& .MuiFormControlLabel-label": { "& .MuiFormControlLabel-label": {
fontSize: isMobile ? "3vw" : "1.3vw", fontSize: isMobile ? "3vw" : "2vw",
fontFamily: "Unbounded", fontFamily: "Unbounded",
color: "#C27664", color: "#C27664",
}, },
@ -1048,7 +1046,7 @@ function CalculatorPage() {
color: "#C27664", color: "#C27664",
"&.Mui-checked": { color: "#C27664" }, "&.Mui-checked": { color: "#C27664" },
"& .MuiSvgIcon-root": { "& .MuiSvgIcon-root": {
fontSize: isMobile ? "5vw" : "1.8vw", fontSize: isMobile ? "5vw" : "2vw",
}, },
}} }}
/> />
@ -1056,7 +1054,7 @@ function CalculatorPage() {
label="ДВС < ЭД" label="ДВС < ЭД"
sx={{ sx={{
"& .MuiFormControlLabel-label": { "& .MuiFormControlLabel-label": {
fontSize: isMobile ? "3vw" : "1.3vw", fontSize: isMobile ? "3vw" : "2vw",
fontFamily: "Unbounded", fontFamily: "Unbounded",
color: "#C27664", color: "#C27664",
}, },
@ -1177,238 +1175,255 @@ function CalculatorPage() {
</Box> </Box>
{/* Блок с результатами расчета */} {/* Блок с результатами расчета */}
{calculationResults && ( {calculationResults && (
<Paper <Box
id="calculator-results" sx={{
elevation={3} position: isMobile ? "relative" : "absolute", // Абсолютное позиционирование для десктопа
sx={{ left: isMobile ? "auto" : "calc(40% + 10vw)",
ml: isMobile ? "0vw" : "2vw", top: isMobile ? "auto" : 0,
p: "2vw", width: isMobile ? "auto" : "40%",
borderRadius: isMobile ? "5vw" : "2vw", zIndex: 0,
border: "0.3vw solid #C27664", }}
// width: isMobile ? "82%" : "85%", >
}} <Slide
direction="right"
in={slideIn && !!calculationResults}
mountOnEnter
unmountOnExit
timeout={800}
> >
<Typography <Paper
variant="h5" id="calculator-results"
elevation={3}
sx={{ sx={{
fontFamily: "Unbounded", p: "3vw",
fontSize: isMobile ? "4vw" : "2vw", borderRadius: isMobile ? "5vw" : "2vw",
color: "#C27664", border: isMobile ? "0.5vw solid #C27664" : "0.3vw solid #C27664",
mb: "1.5vw", 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>
<Box <Box>
sx={{ <Box
display: "flex",
flexDirection: "row",
alignItems: "center",
gap: "1vw",
}}
>
<Typography
sx={{ sx={{
fontFamily: "Unbounded", display: "flex",
fontSize: isMobile ? "3.2vw" : "1.2vw", 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 <Typography
sx={{ sx={{
fontFamily: "Unbounded", 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", fontWeight: "bold",
}} }}
> >
{Number(calculationResults.priceInRub).toLocaleString( {Number(calculationResults.totalFees).toLocaleString("ru-RU")}{" "}
"ru-RU"
)}{" "}
₽ ₽
</Typography> </Typography>
</Box> </Box>
<Box <Box>
sx={{
display: "flex",
flexDirection: "row",
alignItems: "center",
gap: "1vw",
}}
>
<Typography <Typography
sx={{ sx={{
fontFamily: "Unbounded", 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> </Typography>
</Box> </Box>
<Box>
<Box
sx={{
display: "flex",
flexDirection: "row",
alignItems: "center",
gap: "1vw",
}}
>
<Typography <Typography
sx={{ sx={{
fontFamily: "Unbounded", 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", fontWeight: "bold",
}} }}
> >
{Number(calculationResults.exciseTax).toLocaleString( {Number(calculationResults.totalWithCar).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(
"ru-RU" "ru-RU"
)}{" "} )}{" "}
₽ ₽
</Typography> </Typography>
</Box> </Box>
</Box> </Box>
</Paper>
<Box> </Slide>
<Box sx={{ borderTop: "1px solid #C27664", my: "1vw" }} /> </Box>
</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>
)} )}
{/* Правая часть - описание */} {/* Правая часть - описание */}
{!calculationResults && !isMobile && ( {!calculationResults && !isMobile && (
<Box <Box

45
src/pages/CarsPage.tsx
View File

@ -215,7 +215,7 @@ function CarsPage() {
const container = scrollContainerRef.current; const container = scrollContainerRef.current;
const scrollPosition = container.scrollLeft; const scrollPosition = container.scrollLeft;
const cardWidth = isMobile ? 80 : 25; const cardWidth = isMobile ? 80 : 25;
const gap = 2; const gap = isMobile ? 2 : 4;
const vwToPx = (vw: number) => (window.innerWidth * vw) / 100; const vwToPx = (vw: number) => (window.innerWidth * vw) / 100;
// Рассчитать индекс предыдущей карточки // Рассчитать индекс предыдущей карточки
@ -223,19 +223,20 @@ function CarsPage() {
const prevIndex = Math.max(0, currentIndex - 1); const prevIndex = Math.max(0, currentIndex - 1);
// Прокрутить к предыдущей карточке // Прокрутить к предыдущей карточке
if (container.children[prevIndex]) { if (isMobile &&container.children[prevIndex]) {
container.children[prevIndex].scrollIntoView({ container.children[prevIndex].scrollIntoView({
behavior: "smooth", behavior: "smooth",
block: "nearest", block: "nearest",
inline: "start", inline: "start",
}); });
}
// Добавляем дополнительный сдвиг на 0.5vw для ПК версии if (!isMobile && container.children[prevIndex]) {
if (!isMobile) { const scrollOffset = prevIndex === 0 ? vwToPx(2) : 0;
setTimeout(() => { container.scrollTo({
container.scrollLeft -= vwToPx(0.5); left: prevIndex * vwToPx(cardWidth + gap) - scrollOffset,
}, 50); behavior: "smooth"
} });
} }
} }
}; };
@ -247,7 +248,7 @@ function CarsPage() {
const container = scrollContainerRef.current; const container = scrollContainerRef.current;
const scrollPosition = container.scrollLeft; const scrollPosition = container.scrollLeft;
const cardWidth = isMobile ? 80 : 25; const cardWidth = isMobile ? 80 : 25;
const gap = 2; const gap = isMobile ? 2 : 4;
const vwToPx = (vw: number) => (window.innerWidth * vw) / 100; const vwToPx = (vw: number) => (window.innerWidth * vw) / 100;
// Рассчитать индекс следующей карточки // Рассчитать индекс следующей карточки
@ -255,18 +256,20 @@ function CarsPage() {
const nextIndex = Math.min(cars.length - 1, currentIndex + 1); const nextIndex = Math.min(cars.length - 1, currentIndex + 1);
// Прокрутить к следующей карточке // Прокрутить к следующей карточке
if (container.children[nextIndex]) { if (isMobile && container.children[nextIndex]) {
container.children[nextIndex].scrollIntoView({ container.children[nextIndex].scrollIntoView({
behavior: "smooth", behavior: "smooth",
block: "nearest", block: "nearest",
inline: "start", inline: "start",
}); });
}
if (!isMobile && nextIndex !== cars.length - 1) { if (!isMobile && container.children[nextIndex]) {
setTimeout(() => { const scrollOffset = nextIndex === cars.length - 1 ? vwToPx(2) : 0;
container.scrollLeft -= vwToPx(0.5); container.scrollTo({
}, 50); left: nextIndex * vwToPx(cardWidth + gap) + scrollOffset,
} behavior: "smooth"
});
} }
} }
}; };
@ -312,14 +315,14 @@ function CarsPage() {
ref={scrollContainerRef} ref={scrollContainerRef}
sx={{ sx={{
display: "flex", display: "flex",
gap: "2vw", gap: isMobile ? "2vw" : "4vw",
overflowX: "auto", overflowX: "auto",
scrollbarWidth: "none", scrollbarWidth: "none",
"&::-webkit-scrollbar": { "&::-webkit-scrollbar": {
display: "none", display: "none",
}, },
pb: "1vw", pb: "1vw",
maxWidth: isMobile ? "81vw" : "53vw", maxWidth: isMobile ? "81vw" : "58vw",
scrollBehavior: "smooth", scrollBehavior: "smooth",
}} }}
> >
@ -329,9 +332,11 @@ function CarsPage() {
sx={{ sx={{
width: isMobile ? "80vw" : "25vw", width: isMobile ? "80vw" : "25vw",
minWidth: 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", bgcolor: "white",
border: isMobile ? "1px solid #C27664" : "none", border: isMobile ? "0.5vw solid #C27664" : "none",
borderRadius: "2vw", borderRadius: "2vw",
overflow: "hidden", overflow: "hidden",
boxShadow: isMobile boxShadow: isMobile
@ -498,7 +503,7 @@ function CarsPage() {
> >
<Box <Box
component="a" component="a"
href="https://t.me/your_telegram_channel" href="https://t.me/autobrocn"
target="_blank" target="_blank"
sx={{ sx={{
bgcolor: "#C27664", bgcolor: "#C27664",

3
src/pages/MainPage.tsx
View File

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

2
src/utils/scrollUtils.ts
View File

@ -12,7 +12,7 @@ export const scrollToAnchor = (
const element = document.querySelector(anchor); const element = document.querySelector(anchor);
if (element) { if (element) {
// Получаем высоту хедера (в соответствии с размерами в Header.tsx) // Получаем высоту хедера (в соответствии с размерами в 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; const elementPosition = element.getBoundingClientRect().top + window.scrollY;