BivekiGroup/protekauto-frontend
4
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix1207

Browse Source
This commit is contained in:
egortriston
2025-07-12 18:21:09 +03:00
parent 791152a862
commit cebe3a10ac
9 changed files with 264 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/images/resource2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

86
src/components/BottomHead.tsx
View File

@ -227,33 +227,54 @@ const BottomHead = ({ menuOpen, onClose }: { menuOpen: boolean; onClose: () => v
<span>{mobileCategory.label}</span> <span>{mobileCategory.label}</span>
</div> </div>
<div className="mobile-subcategories"> <div className="mobile-subcategories">
{mobileCategory.links.map((link: string, linkIndex: number) => ( {mobileCategory.links.length === 1 ? (
<div
className="mobile-subcategory"
onClick={() => {
let subcategoryId = `${mobileCategory.catalogId}_0`;
if (mobileCategory.groups) {
for (const group of mobileCategory.groups) {
if (group.subgroups && group.subgroups.length > 0) {
const foundSubgroup = group.subgroups.find((subgroup: any) => subgroup.name === mobileCategory.links[0]);
if (foundSubgroup) {
subcategoryId = foundSubgroup.id;
break;
}
} else if (group.name === mobileCategory.links[0]) {
subcategoryId = group.id;
break;
}
}
}
const activeCatalog = catalogsData?.partsIndexCategoriesWithGroups?.[tabData.findIndex(tab => tab === mobileCategory)];
const catalogId = activeCatalog?.id || 'fallback';
handleCategoryClick(catalogId, mobileCategory.links[0], subcategoryId);
}}
style={{ cursor: "pointer" }}
>
Показать все
</div>
) : (
mobileCategory.links.map((link: string, linkIndex: number) => (
<div <div
className="mobile-subcategory" className="mobile-subcategory"
key={link} key={link}
onClick={() => { onClick={() => {
// Ищем соответствующую подгруппу по названию
let subcategoryId = `${mobileCategory.catalogId}_${linkIndex}`; let subcategoryId = `${mobileCategory.catalogId}_${linkIndex}`;
if (mobileCategory.groups) { if (mobileCategory.groups) {
for (const group of mobileCategory.groups) { for (const group of mobileCategory.groups) {
// Проверяем в подгруппах
if (group.subgroups && group.subgroups.length > 0) { if (group.subgroups && group.subgroups.length > 0) {
const foundSubgroup = group.subgroups.find((subgroup: any) => subgroup.name === link); const foundSubgroup = group.subgroups.find((subgroup: any) => subgroup.name === link);
if (foundSubgroup) { if (foundSubgroup) {
subcategoryId = foundSubgroup.id; subcategoryId = foundSubgroup.id;
break; break;
} }
} } else if (group.name === link) {
// Если нет подгрупп, проверяем саму группу
else if (group.name === link) {
subcategoryId = group.id; subcategoryId = group.id;
break; break;
} }
} }
} }
// Получаем catalogId из данных
const activeCatalog = catalogsData?.partsIndexCategoriesWithGroups?.[tabData.findIndex(tab => tab === mobileCategory)]; const activeCatalog = catalogsData?.partsIndexCategoriesWithGroups?.[tabData.findIndex(tab => tab === mobileCategory)];
const catalogId = activeCatalog?.id || 'fallback'; const catalogId = activeCatalog?.id || 'fallback';
handleCategoryClick(catalogId, link, subcategoryId); handleCategoryClick(catalogId, link, subcategoryId);
@ -261,7 +282,8 @@ const BottomHead = ({ menuOpen, onClose }: { menuOpen: boolean; onClose: () => v
> >
{link} {link}
</div> </div>
))} ))
)}
</div> </div>
</div> </div>
) : ( ) : (
@ -443,30 +465,51 @@ const BottomHead = ({ menuOpen, onClose }: { menuOpen: boolean; onClose: () => v
<h3 className="heading-16">{tab.heading}</h3> <h3 className="heading-16">{tab.heading}</h3>
<div className="w-layout-hflex flex-block-92"> <div className="w-layout-hflex flex-block-92">
<div className="w-layout-vflex flex-block-91"> <div className="w-layout-vflex flex-block-91">
{tab.links.map((link, linkIndex) => { {tab.links.length === 1 ? (
<div
className="link-2"
onClick={() => {
const catalog = catalogsData?.partsIndexCategoriesWithGroups?.[idx]; const catalog = catalogsData?.partsIndexCategoriesWithGroups?.[idx];
let subcategoryId = `fallback_${idx}_0`;
// Ищем соответствующую подгруппу по названию if (catalog?.groups) {
let subcategoryId = `fallback_${idx}_${linkIndex}`; for (const group of catalog.groups) {
if (group.subgroups && group.subgroups.length > 0) {
const foundSubgroup = group.subgroups.find((subgroup: any) => subgroup.name === tab.links[0]);
if (foundSubgroup) {
subcategoryId = foundSubgroup.id;
break;
}
} else if (group.name === tab.links[0]) {
subcategoryId = group.id;
break;
}
}
}
const catalogId = catalog?.id || 'fallback';
handleCategoryClick(catalogId, tab.links[0], subcategoryId);
}}
style={{ cursor: "pointer" }}
>
Показать все
</div>
) : (
tab.links.map((link: string, linkIndex: number) => {
const catalog = catalogsData?.partsIndexCategoriesWithGroups?.[idx];
let subcategoryId = `fallback_${idx}_${linkIndex}`;
if (catalog?.groups) { if (catalog?.groups) {
for (const group of catalog.groups) { for (const group of catalog.groups) {
// Проверяем в подгруппах
if (group.subgroups && group.subgroups.length > 0) { if (group.subgroups && group.subgroups.length > 0) {
const foundSubgroup = group.subgroups.find((subgroup: any) => subgroup.name === link); const foundSubgroup = group.subgroups.find((subgroup: any) => subgroup.name === link);
if (foundSubgroup) { if (foundSubgroup) {
subcategoryId = foundSubgroup.id; subcategoryId = foundSubgroup.id;
break; break;
} }
} } else if (group.name === link) {
// Если нет подгрупп, проверяем саму группу
else if (group.name === link) {
subcategoryId = group.id; subcategoryId = group.id;
break; break;
} }
} }
} }
return ( return (
<div <div
className="link-2" className="link-2"
@ -480,7 +523,8 @@ const BottomHead = ({ menuOpen, onClose }: { menuOpen: boolean; onClose: () => v
{link} {link}
</div> </div>
); );
})} })
)}
</div> </div>
<div className="w-layout-vflex flex-block-91-copy"> <div className="w-layout-vflex flex-block-91-copy">
<img src="https://d3e54v103j8qbb.cloudfront.net/plugins/Basic/assets/placeholder.60f9b1840c.svg" loading="lazy" alt="" className="image-17" /> <img src="https://d3e54v103j8qbb.cloudfront.net/plugins/Basic/assets/placeholder.60f9b1840c.svg" loading="lazy" alt="" className="image-17" />

42
src/components/CatalogSubscribe.tsx
View File

@ -1,10 +1,16 @@
import React from "react"; import React, { useState } from "react";
const CatalogSubscribe: React.FC = () => ( const CatalogSubscribe: React.FC = () => (
<div className="w-layout-blockcontainer container subscribe w-container"> <div className="w-layout-blockcontainer container subscribe w-container">
<div className="w-layout-hflex flex-block-18"> <div className="w-layout-hflex flex-block-18">
<img
src="/images/resource2.png"
alt="Ресурс 2"
className="mt-[-18px]"
/>
<div className="div-block-9"> <div className="div-block-9">
<h3 className="heading-3 sub">Подпишитесь на новостную рассылку</h3> {/* <h3 className="heading-3 sub">Подпишитесь на новостную рассылку</h3> */}
<div className="text-block-14">Оставайтесь в курсе акций, <br />новинок и специальных предложений</div> <div className="text-block-14">Оставайтесь в курсе акций, <br />новинок и специальных предложений</div>
</div> </div>
<div className="form-block-3 w-form"> <div className="form-block-3 w-form">
@ -13,6 +19,38 @@ const CatalogSubscribe: React.FC = () => (
<input type="submit" className="submit-button-copy w-button" value="Подписаться" /> <input type="submit" className="submit-button-copy w-button" value="Подписаться" />
</form> </form>
</div> </div>
<div className="flex flex-row items-center mt-2">
{/* Кастомный чекбокс без input/label */}
{(() => {
const [checked, setChecked] = useState(false);
return (
<>
<div
className={`h-[24px] w-[24px] border border-[#8893A1] rounded-sm mr-4 flex-shrink-0 flex items-center justify-center cursor-pointer transition-colors duration-150 ${checked ? 'bg-[#EC1C24]' : 'bg-transparent'}`}
onClick={() => setChecked(v => !v)}
role="checkbox"
aria-checked={checked}
tabIndex={0}
onKeyDown={e => { if (e.key === ' ' || e.key === 'Enter') setChecked(v => !v); }}
>
<svg
className={`w-5 h-5 text-white transition-opacity duration-150 ${checked ? 'opacity-100' : 'opacity-0'}`}
fill="none"
stroke="currentColor"
strokeWidth="2"
viewBox="0 0 24 24"
>
<path d="M5 13l4 4L19 7" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</div>
<span className="text-[#8893A1] text-[12px] leading-snug select-none">
Я даю свое согласие на обработку персональных данных<br />
и соглашаюсь с условиями <a href="/privacy-policy" className="underline hover:text-[#6c7684]">Политики конфиденциальности</a>
</span>
</>
);
})()}
</div>
</div> </div>
</div> </div>
); );

2
src/components/Header.tsx
View File

@ -385,7 +385,7 @@ const Header: React.FC<HeaderProps> = ({ onOpenAuthModal = () => console.log('Au
<section className="bottom_head"> <section className="bottom_head">
<div className="w-layout-blockcontainer container nav w-container"> <div className="w-layout-blockcontainer container nav w-container">
<div className="w-layout-hflex flex-block-93"> <div className="w-layout-hflex flex-block-93">
<Link href="/" className="code-embed-15 w-embed" style={{ display: 'block', cursor: 'pointer' }}> <Link href="/" className="code-embed-15 w-embed protekauto-logo" style={{ display: 'block', cursor: 'pointer'}}>
<svg width="190" height="72" viewBox="0 0 190 72" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="190" height="72" viewBox="0 0 190 72" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M138.377 29.5883V23.1172H112.878V29.5883H138.377Z" fill="white"></path> <path d="M138.377 29.5883V23.1172H112.878V29.5883H138.377Z" fill="white"></path>
<path d="M107.423 18.1195C109.21 18.1195 110.658 16.6709 110.658 14.884C110.658 13.097 109.21 11.6484 107.423 11.6484L88.395 11.6484C86.6082 11.6484 85.1596 13.097 85.1596 14.884C85.1596 16.6709 86.6082 18.1195 88.395 18.1195H107.423Z" fill="white"></path> <path d="M107.423 18.1195C109.21 18.1195 110.658 16.6709 110.658 14.884C110.658 13.097 109.21 11.6484 107.423 11.6484L88.395 11.6484C86.6082 11.6484 85.1596 13.097 85.1596 14.884C85.1596 16.6709 86.6082 18.1195 88.395 18.1195H107.423Z" fill="white"></path>

2
src/components/index/BrandSelectionSection.tsx
View File

@ -147,7 +147,7 @@ const BrandSelectionSection: React.FC = () => {
</svg> </svg>
</Combobox.Button> </Combobox.Button>
<Combobox.Options <Combobox.Options
className="absolute left-0 top-full z-10 bg-white border-x border-b border-stone-300 rounded-b-lg shadow-lg w-full max-h-60 overflow-auto scrollbar-none" className="absolute left-0 top-full z-100 bg-white border-x border-b border-stone-300 rounded-b-lg shadow-lg w-full max-h-60 overflow-auto scrollbar-none"
style={{ scrollbarWidth: 'none' }} style={{ scrollbarWidth: 'none' }}
data-hide-scrollbar data-hide-scrollbar
> >

48
src/components/profile/ProfileGarageMain.tsx
View File

@ -247,63 +247,65 @@ const ProfileGarageMain = () => {
</button> </button>
</div> </div>
</div> </div>
</div> {/* Расширенная информация об автомобиле — вложена внутрь карточки */}
<div
{/* Расширенная информация об автомобиле */} className={
{expandedVehicle === vehicle.id && ( `overflow-hidden transition-all duration-300 rounded-lg flex flex-col gap-4` +
<div className="mt-4 px-5 py-4 bg-white rounded-lg border border-gray-200"> (expandedVehicle === vehicle.id ? ' py-4 max-h-[1000px] opacity-100 mt-4' : ' max-h-0 opacity-0 pointer-events-none')
}
>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 text-sm"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 text-sm">
{vehicle.brand && ( {vehicle.brand && (
<div> <div>
<span className="font-medium text-gray-700">Бренд:</span> <div className="font-bold text-gray-950">Бренд</div>
<span className="ml-2 text-gray-900">{vehicle.brand}</span> <div className="mt-1.5 text-gray-600">{vehicle.brand}</div>
</div> </div>
)} )}
{vehicle.model && ( {vehicle.model && (
<div> <div>
<span className="font-medium text-gray-700">Модель:</span> <div className="font-bold text-gray-950">Модель</div>
<span className="ml-2 text-gray-900">{vehicle.model}</span> <div className="mt-1.5 text-gray-600">{vehicle.model}</div>
</div> </div>
)} )}
{vehicle.modification && ( {vehicle.modification && (
<div> <div>
<span className="font-medium text-gray-700">Модификация:</span> <div className="font-bold text-gray-950">Модификация</div>
<span className="ml-2 text-gray-900">{vehicle.modification}</span> <div className="mt-1.5 text-gray-600">{vehicle.modification}</div>
</div> </div>
)} )}
{vehicle.year && ( {vehicle.year && (
<div> <div>
<span className="font-medium text-gray-700">Год:</span> <div className="font-bold text-gray-950">Год</div>
<span className="ml-2 text-gray-900">{vehicle.year}</span> <div className="mt-1.5 text-gray-600">{vehicle.year}</div>
</div> </div>
)} )}
{vehicle.frame && ( {vehicle.frame && (
<div> <div>
<span className="font-medium text-gray-700">Номер кузова:</span> <div className="font-bold text-gray-950">Номер кузова</div>
<span className="ml-2 text-gray-900">{vehicle.frame}</span> <div className="mt-1.5 text-gray-600">{vehicle.frame}</div>
</div> </div>
)} )}
{vehicle.licensePlate && ( {vehicle.licensePlate && (
<div> <div>
<span className="font-medium text-gray-700">Госномер:</span> <div className="font-bold text-gray-950">Госномер</div>
<span className="ml-2 text-gray-900">{vehicle.licensePlate}</span> <div className="mt-1.5 text-gray-600">{vehicle.licensePlate}</div>
</div> </div>
)} )}
{vehicle.mileage && ( {vehicle.mileage && (
<div> <div>
<span className="font-medium text-gray-700">Пробег:</span> <div className="font-bold text-gray-950">Пробег</div>
<span className="ml-2 text-gray-900">{vehicle.mileage.toLocaleString()} км</span> <div className="mt-1.5 text-gray-600">{vehicle.mileage.toLocaleString()} км</div>
</div> </div>
)} )}
<div> <div>
<span className="font-medium text-gray-700">Добавлен:</span> <div className="font-bold text-gray-950">Добавлен</div>
<span className="ml-2 text-gray-900"> <div className="mt-1.5 text-gray-600">
{new Date(vehicle.createdAt).toLocaleDateString('ru-RU')} {new Date(vehicle.createdAt).toLocaleDateString('ru-RU')}
</span>
</div> </div>
</div> </div>
</div> </div>
)} </div>
</div>
</div> </div>
))} ))}
{!showAddCar && ( {!showAddCar && (

40
src/components/vin/VinQuick.tsx
View File

@ -45,6 +45,8 @@ const VinQuick: React.FC<VinQuickProps> = ({ quickGroup, catalogCode, vehicleId,
} }
}; };
const [shownCounts, setShownCounts] = useState<{ [unitid: string]: number }>({});
return ( return (
<div className="w-full"> <div className="w-full">
{/* <button onClick={onBack} className="mb-4 px-4 py-2 bg-gray-200 rounded self-start">Назад</button> */} {/* <button onClick={onBack} className="mb-4 px-4 py-2 bg-gray-200 rounded self-start">Назад</button> */}
@ -71,16 +73,48 @@ const VinQuick: React.FC<VinQuickProps> = ({ quickGroup, catalogCode, vehicleId,
</div> </div>
<div className="knot-img"> <div className="knot-img">
<h1 className="heading-19">{unit.name}</h1> <h1 className="heading-19">{unit.name}</h1>
{(() => {
{unit.details && unit.details.length > 0 && unit.details.map((detail: any, index: number) => ( const details = unit.details || [];
const total = details.length;
const shownCount = shownCounts[unit.unitid] ?? 3;
return (
<>
{details.slice(0, shownCount).map((detail: any, index: number) => (
<div className="w-layout-hflex flex-block-115" key={`${unit.unitid}-${detail.detailid || index}`}> <div className="w-layout-hflex flex-block-115" key={`${unit.unitid}-${detail.detailid || index}`}>
<div className="oemnuber">{detail.oem}</div> <div className="oemnuber">{detail.oem}</div>
<div className="partsname">{detail.name}</div> <div className="partsname">{detail.name}</div>
<a href="#" className="button-3 w-button" onClick={e => { e.preventDefault(); handleDetailClick(detail); }}>Показать цены</a> <a href="#" className="button-3 w-button" onClick={e => { e.preventDefault(); handleDetailClick(detail); }}>Показать цены</a>
</div> </div>
))} ))}
{total > 3 && shownCount < total && (
<div className="flex gap-2 mt-2 w-full">
{shownCount + 3 < total && (
<button
className="expand-btn"
onClick={() => setShownCounts(prev => ({ ...prev, [unit.unitid]: shownCount + 3 }))}
style={{ border: '1px solid #EC1C24', borderRadius: 8, background: '#fff', color: '#222', padding: '6px 18px', minWidth: 180 }}
>
Развернуть
<svg width="16" height="16" viewBox="0 0 16 16" style={{ display: 'inline', verticalAlign: 'middle', marginLeft: 4 }}>
<path d="M4 6l4 4 4-4" stroke="#222" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
</button>
)}
<button
className="showall-btn"
onClick={() => setShownCounts(prev => ({ ...prev, [unit.unitid]: total }))}
style={{ background: '#e9eef5', borderRadius: 8, color: '#222', padding: '6px 18px', border: 'none'}}
>
Показать все
</button>
</div>
)}
{shownCount >= total && (
<a href="#" className="showallparts w-button" onClick={e => { e.preventDefault(); handleUnitClick(unit); }}>Подробнее</a> <a href="#" className="showallparts w-button" onClick={e => { e.preventDefault(); handleUnitClick(unit); }}>Подробнее</a>
)}
</>
);
})()}
</div> </div>
</div> </div>
)) ))

65
src/styles/my.css
View File

@ -30,7 +30,7 @@
} }
.bottom_head{ .bottom_head{
z-index: 60; z-index: 3000;
} }
.top_head{ .top_head{
@ -618,12 +618,48 @@ body {
font-size: 28px; font-size: 28px;
} }
.form-block-4,
.flex-block-124,
.flex-block-6-copy
{
overflow: visible !important;
}
a.link-block.w-inline-block, a.link-block.w-inline-block,
a.link-block-2.w-inline-block { a.link-block-2.w-inline-block {
font-size: 12px; font-size: 12px;
} }
.core-product-search.carousel-scroll {
display: flex;
flex-wrap: nowrap; /* Не переносить строки */
gap: 16px; /* Отступ между карточками, если нужно */
}
.subscribe{
padding-top: 10px !important;
padding-bottom: 10px !important;
}
.text-block-14, .div-block-9{
width: 350px !important;
max-width: 350px !important;
min-width: 350px !important;
}
@media screen and (max-width: 1920px) {
.text-block-14, .div-block-9{
width: 350px !important;
}
}
.flex-block-18{
row-gap: 40px !important;
}
.menu-button.w--open { .menu-button.w--open {
z-index: 2000; z-index: 2000;
@ -631,10 +667,9 @@ a.link-block-2.w-inline-block {
color: var(--white); color: var(--white);
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 50px; width: 50px;
padding-top: 15px; height: 44px;
padding-bottom: 15px; padding: 13px 12px;
left: auto;
} }
.heading-7 { .heading-7 {
z-index: 999; z-index: 999;
@ -671,15 +706,25 @@ a.link-block-2.w-inline-block {
overflow: hidden; overflow: hidden;
} }
.flex-block-14-copy-copy{
margin-bottom: 20px !important;
}
.showall-btn {
width: 100%;
}
.showall-btn:hover {
background: #ec1c24 !important;
color: #fff !important;
}
@media screen and (max-width: 991px) { @media screen and (max-width: 991px) {
.flex-block-108, .flex-block-14-copy-copy { .flex-block-108, .flex-block-14-copy-copy {
flex-flow: column; flex-flow: column;
justify-content: space-between; justify-content: space-between;
} }
.flex-block-14-copy-copy{
align-items: center;
}
} }
@media screen and (max-width: 991px) { @media screen and (max-width: 991px) {
@ -994,3 +1039,7 @@ a.link-block-2.w-inline-block {
} }
} }
.protekauto-logo {
position: fixed;
z-index: 3000;
}

7
src/styles/protekproject.webflow.css
View File

@ -1008,10 +1008,9 @@ body {
color: var(--white); color: var(--white);
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 50px; width: 50px;
padding-top: 15px; height: 44px;
padding-bottom: 15px; padding: 13px 12px;
left: auto;
} }
.menu-button.w--open:hover { .menu-button.w--open:hover {