Compare commits
1 Commits
5fd2cf1b8c
...
fix1707
| Author | SHA1 | Date | |
|---|---|---|---|
| 27d378154f |
BIN
public/images/noimage.png
Normal file
BIN
public/images/noimage.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.5 KiB |
@ -312,9 +312,9 @@ const CoreProductCard: React.FC<CoreProductCardProps> = ({
|
||||
<img src="/images/info.svg" loading="lazy" alt="info" className="image-9" />
|
||||
</div>
|
||||
<div className="w-layout-vflex flex-block-50">
|
||||
<div className="w-layout-hflex flex-block-79">
|
||||
<h3 className="heading-10 name">{brand}</h3>
|
||||
<h3 className="heading-10">{article}</h3>
|
||||
<div className="flex flex-row flex-nowrap items-center gap-2">
|
||||
<h3 className="heading-10 name" style={{marginRight: 8}}>{brand}</h3>
|
||||
<h3 className="heading-10" style={{marginRight: 8}}>{article}</h3>
|
||||
<div
|
||||
className="favorite-icon w-embed"
|
||||
onClick={handleFavoriteClick}
|
||||
@ -328,7 +328,7 @@ const CoreProductCard: React.FC<CoreProductCardProps> = ({
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-block-21">{name}</div>
|
||||
<div className="text-block-21 mt-1">{name}</div>
|
||||
</div>
|
||||
</div>
|
||||
{image && (
|
||||
|
||||
@ -115,7 +115,7 @@ const Footer = () => (
|
||||
<button className="bg-[#23407A] rounded-lg py-2 px-6 font-medium mt-1 mb-2">Напиши нам</button>
|
||||
</div>
|
||||
{/* Центр: меню */}
|
||||
<div className="hidden md:flex flex-1 flex-wrap gap-10 justify-center min-w-[400px]">
|
||||
<div className="hidden md:flex flex-1 flex-wrap gap-30 justify-center min-w-[400px]">
|
||||
<div className="flex flex-col gap-3 min-w-[150px]">
|
||||
<div className="link">Подбор по марке авто</div>
|
||||
<a href="#" className="link">Поиск по VIN</a>
|
||||
@ -178,7 +178,7 @@ const Footer = () => (
|
||||
|
||||
</a>
|
||||
</div>
|
||||
<div className="flex flex-col items-center md:flex-row md:items-start md:justify-center flex-1 flex-wrap gap-4 md:gap-20 md:mt-6 md:min-w-[400px]">
|
||||
<div className="flex flex-col items-center md:flex-row md:items-start md:justify-center flex-1 flex-wrap gap-4 md:gap-37 md:mt-6 md:min-w-[400px]">
|
||||
<a href="#" className=" hover:underline text-xs opacity-70 text-center md:w-auto md:text-left">Политика конфиденциальности</a>
|
||||
|
||||
<a href="#" className=" hover:underline text-xs opacity-70 text-center md:w-auto md:text-left">Согласие на обработку персональных данных</a>
|
||||
|
||||
@ -111,12 +111,62 @@ const BestPriceSection: React.FC = () => {
|
||||
<div className="text-block-58">Подборка лучших предложенийпо цене</div>
|
||||
<a href="#" className="button-24 w-button">Показать все</a>
|
||||
</div>
|
||||
<div className="carousel-row">
|
||||
<div className="carousel-row" style={{ position: 'relative' }}>
|
||||
{/* Стили для стрелок как в ProductOfDayBanner, но без абсолютного позиционирования */}
|
||||
<style>{`
|
||||
.carousel-arrow {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: none;
|
||||
background: none;
|
||||
padding: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 1;
|
||||
transition: opacity 0.2s;
|
||||
cursor: pointer;
|
||||
margin: 0 8px;
|
||||
}
|
||||
.carousel-arrow-left {}
|
||||
.carousel-arrow-right {}
|
||||
.carousel-arrow .arrow-circle {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255,255,255,0.85);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.carousel-arrow:hover .arrow-circle,
|
||||
.carousel-arrow:focus .arrow-circle {
|
||||
background: #ec1c24;
|
||||
}
|
||||
.carousel-arrow .arrow-svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: block;
|
||||
transition: stroke 0.2s;
|
||||
stroke: #222;
|
||||
}
|
||||
.carousel-arrow:hover .arrow-svg,
|
||||
.carousel-arrow:focus .arrow-svg {
|
||||
stroke: #fff;
|
||||
}
|
||||
.carousel-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
`}</style>
|
||||
<button className="carousel-arrow carousel-arrow-left" onClick={scrollLeft} aria-label="Прокрутить влево">
|
||||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="16" cy="16" r="16" fill="#F3F4F6"/>
|
||||
<path d="M19.5 24L12.5 16L19.5 8" stroke="#222" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
<span className="arrow-circle">
|
||||
<svg className="arrow-svg" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16.6673 10H3.33398M3.33398 10L8.33398 5M3.33398 10L8.33398 15" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
<div className="w-layout-hflex flex-block-121 carousel-scroll" ref={scrollRef}>
|
||||
{bestPriceItems.map((item, i) => (
|
||||
@ -124,10 +174,11 @@ const BestPriceSection: React.FC = () => {
|
||||
))}
|
||||
</div>
|
||||
<button className="carousel-arrow carousel-arrow-right" onClick={scrollRight} aria-label="Прокрутить вправо">
|
||||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="16" cy="16" r="16" fill="#F3F4F6"/>
|
||||
<path d="M12.5 8L19.5 16L12.5 24" stroke="#222" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
<span className="arrow-circle">
|
||||
<svg className="arrow-svg" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M3.33398 10H16.6673M16.6673 10L11.6673 5M16.6673 10L11.6673 15" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -84,16 +84,66 @@ const NewArrivalsSection: React.FC = () => {
|
||||
<h2 className="heading-4">Новое поступление</h2>
|
||||
</div>
|
||||
<div className="carousel-row">
|
||||
{/* Стили для стрелок как в BestPriceSection и TopSalesSection */}
|
||||
<style>{`
|
||||
.carousel-arrow {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: none;
|
||||
background: none;
|
||||
padding: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 1;
|
||||
transition: opacity 0.2s;
|
||||
cursor: pointer;
|
||||
margin: 0 8px;
|
||||
}
|
||||
.carousel-arrow-left {}
|
||||
.carousel-arrow-right {}
|
||||
.carousel-arrow .arrow-circle {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255,255,255,0.85);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.carousel-arrow:hover .arrow-circle,
|
||||
.carousel-arrow:focus .arrow-circle {
|
||||
background: #ec1c24;
|
||||
}
|
||||
.carousel-arrow .arrow-svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: block;
|
||||
transition: stroke 0.2s;
|
||||
stroke: #222;
|
||||
}
|
||||
.carousel-arrow:hover .arrow-svg,
|
||||
.carousel-arrow:focus .arrow-svg {
|
||||
stroke: #fff;
|
||||
}
|
||||
.carousel-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
`}</style>
|
||||
<button
|
||||
className="carousel-arrow carousel-arrow-left"
|
||||
onClick={scrollLeft}
|
||||
aria-label="Прокрутить влево"
|
||||
style={{ cursor: 'pointer' }}
|
||||
>
|
||||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="16" cy="16" r="16" fill="#F3F4F6"/>
|
||||
<path d="M19.5 24L12.5 16L19.5 8" stroke="#222" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
<span className="arrow-circle">
|
||||
<svg className="arrow-svg" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16.6673 10H3.33398M3.33398 10L8.33398 5M3.33398 10L8.33398 15" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<div className="w-layout-hflex core-product-search carousel-scroll" ref={scrollRef}>
|
||||
@ -149,10 +199,11 @@ const NewArrivalsSection: React.FC = () => {
|
||||
aria-label="Прокрутить вправо"
|
||||
style={{ cursor: 'pointer' }}
|
||||
>
|
||||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="16" cy="16" r="16" fill="#F3F4F6"/>
|
||||
<path d="M12.5 8L19.5 16L12.5 24" stroke="#222" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
<span className="arrow-circle">
|
||||
<svg className="arrow-svg" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M3.33398 10H16.6673M16.6673 10L11.6673 5M16.6673 10L11.6673 15" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -32,11 +32,61 @@ const NewsAndPromos = () => {
|
||||
</div>
|
||||
</div>
|
||||
<div className="carousel-row">
|
||||
{/* Стили для стрелок как в других секциях */}
|
||||
<style>{`
|
||||
.carousel-arrow {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: none;
|
||||
background: none;
|
||||
padding: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 1;
|
||||
transition: opacity 0.2s;
|
||||
cursor: pointer;
|
||||
margin: 0 8px;
|
||||
}
|
||||
.carousel-arrow-left {}
|
||||
.carousel-arrow-right {}
|
||||
.carousel-arrow .arrow-circle {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255,255,255,0.85);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.carousel-arrow:hover .arrow-circle,
|
||||
.carousel-arrow:focus .arrow-circle {
|
||||
background: #ec1c24;
|
||||
}
|
||||
.carousel-arrow .arrow-svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: block;
|
||||
transition: stroke 0.2s;
|
||||
stroke: #222;
|
||||
}
|
||||
.carousel-arrow:hover .arrow-svg,
|
||||
.carousel-arrow:focus .arrow-svg {
|
||||
stroke: #fff;
|
||||
}
|
||||
.carousel-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
`}</style>
|
||||
<button className="carousel-arrow carousel-arrow-left" onClick={scrollLeft} aria-label="Прокрутить влево">
|
||||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="16" cy="16" r="16" fill="#F3F4F6"/>
|
||||
<path d="M19.5 24L12.5 16L19.5 8" stroke="#222" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
<span className="arrow-circle">
|
||||
<svg className="arrow-svg" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16.6673 10H3.33398M3.33398 10L8.33398 5M3.33398 10L8.33398 15" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
<div className="w-layout-hflex flex-block-6-copy-copy carousel-scroll" ref={scrollRef}>
|
||||
<NewsCard
|
||||
@ -69,10 +119,11 @@ const NewsAndPromos = () => {
|
||||
/>
|
||||
</div>
|
||||
<button className="carousel-arrow carousel-arrow-right" onClick={scrollRight} aria-label="Прокрутить вправо">
|
||||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="16" cy="16" r="16" fill="#F3F4F6"/>
|
||||
<path d="M12.5 8L19.5 16L12.5 24" stroke="#222" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
<span className="arrow-circle">
|
||||
<svg className="arrow-svg" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M3.33398 10H16.6673M16.6673 10L11.6673 5M16.6673 10L11.6673 15" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -110,8 +110,13 @@ const ProductOfDaySection: React.FC = () => {
|
||||
};
|
||||
}
|
||||
|
||||
return null;
|
||||
// Если нет ни одной картинки, возвращаем noimage.png
|
||||
return {
|
||||
url: '/images/noimage.png',
|
||||
alt: product.name,
|
||||
source: 'noimage'
|
||||
};
|
||||
};
|
||||
|
||||
// Обработчики для навигации по товарам дня
|
||||
const handlePrevSlide = (e: React.MouseEvent) => {
|
||||
@ -209,6 +214,11 @@ const ProductOfDaySection: React.FC = () => {
|
||||
Parts Index
|
||||
</div>
|
||||
)}
|
||||
{productImage.source === 'noimage' && (
|
||||
<div className="absolute bottom-0 right-0 bg-gray-400 text-white text-xs px-2 py-1 rounded-tl">
|
||||
Нет изображения
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@ -143,11 +143,61 @@ const TopSalesSection: React.FC = () => {
|
||||
<h2 className="heading-4">Топ продаж</h2>
|
||||
</div>
|
||||
<div className="carousel-row">
|
||||
{/* Стили для стрелок как в BestPriceSection */}
|
||||
<style>{`
|
||||
.carousel-arrow {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: none;
|
||||
background: none;
|
||||
padding: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 1;
|
||||
transition: opacity 0.2s;
|
||||
cursor: pointer;
|
||||
margin: 0 8px;
|
||||
}
|
||||
.carousel-arrow-left {}
|
||||
.carousel-arrow-right {}
|
||||
.carousel-arrow .arrow-circle {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255,255,255,0.85);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.carousel-arrow:hover .arrow-circle,
|
||||
.carousel-arrow:focus .arrow-circle {
|
||||
background: #ec1c24;
|
||||
}
|
||||
.carousel-arrow .arrow-svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: block;
|
||||
transition: stroke 0.2s;
|
||||
stroke: #222;
|
||||
}
|
||||
.carousel-arrow:hover .arrow-svg,
|
||||
.carousel-arrow:focus .arrow-svg {
|
||||
stroke: #fff;
|
||||
}
|
||||
.carousel-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
`}</style>
|
||||
<button className="carousel-arrow carousel-arrow-left" onClick={scrollLeft} aria-label="Прокрутить влево">
|
||||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="16" cy="16" r="16" fill="#F3F4F6"/>
|
||||
<path d="M19.5 24L12.5 16L19.5 8" stroke="#222" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
<span className="arrow-circle">
|
||||
<svg className="arrow-svg" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16.6673 10H3.33398M3.33398 10L8.33398 5M3.33398 10L8.33398 15" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
<div className="w-layout-hflex core-product-search carousel-scroll" ref={scrollRef}>
|
||||
{activeTopSalesProducts.map((item: TopSalesProductData) => {
|
||||
@ -177,10 +227,11 @@ const TopSalesSection: React.FC = () => {
|
||||
})}
|
||||
</div>
|
||||
<button className="carousel-arrow carousel-arrow-right" onClick={scrollRight} aria-label="Прокрутить вправо">
|
||||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="16" cy="16" r="16" fill="#F3F4F6"/>
|
||||
<path d="M12.5 8L19.5 16L12.5 24" stroke="#222" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
<span className="arrow-circle">
|
||||
<svg className="arrow-svg" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M3.33398 10H16.6673M16.6673 10L11.6673 5M16.6673 10L11.6673 15" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -19,6 +19,7 @@ interface VehicleAttributesTooltipProps {
|
||||
const VehicleAttributesTooltip: React.FC<VehicleAttributesTooltipProps> = ({
|
||||
show,
|
||||
position,
|
||||
vehicleName,
|
||||
vehicleAttributes,
|
||||
onMouseEnter,
|
||||
onMouseLeave,
|
||||
@ -27,7 +28,7 @@ const VehicleAttributesTooltip: React.FC<VehicleAttributesTooltipProps> = ({
|
||||
if (!show) return null;
|
||||
return (
|
||||
<div
|
||||
className="flex overflow-hidden flex-col items-center px-8 py-8 bg-slate-50 shadow-[0px_0px_20px_rgba(0,0,0,0.15)] rounded-2xl w-[450px] min-h-[365px] max-w-full fixed z-[9999]"
|
||||
className="flex overflow-hidden flex-col items-center px-8 py-8 bg-slate-50 shadow-[0px_0px_20px_rgba(0,0,0,0.15)] rounded-2xl w-[450px] max-w-full fixed z-[9999]"
|
||||
style={{
|
||||
left: `${position.x + 120}px`,
|
||||
top: `${position.y}px`,
|
||||
@ -45,16 +46,33 @@ const VehicleAttributesTooltip: React.FC<VehicleAttributesTooltipProps> = ({
|
||||
/>
|
||||
)}
|
||||
<div className="flex relative flex-col w-full">
|
||||
{vehicleAttributes.map((attr, idx) => (
|
||||
<div key={idx} className="flex gap-5 items-center mt-2 w-full whitespace-nowrap first:mt-0">
|
||||
<div className="self-stretch my-auto text-gray-400 w-[150px] truncate">
|
||||
{attr.name}
|
||||
</div>
|
||||
<div className="self-stretch my-auto font-medium text-black truncate">
|
||||
{attr.value}
|
||||
{/* Заголовок */}
|
||||
{vehicleName && (
|
||||
<div className="font-semibold text-lg text-black mb-3 truncate">{vehicleName}</div>
|
||||
)}
|
||||
{/* Список характеристик или сообщение */}
|
||||
{vehicleAttributes.length > 0 ? (
|
||||
vehicleAttributes.map((attr, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="grid grid-cols-[150px_1fr] gap-x-5 items-start mt-2 w-full first:mt-0"
|
||||
>
|
||||
<div className="text-gray-400 break-words whitespace-normal text-left">
|
||||
{attr.name}
|
||||
</div>
|
||||
<div
|
||||
className="font-medium text-black break-words whitespace-normal text-left justify-self-start"
|
||||
style={{ textAlign: 'left' }}
|
||||
>
|
||||
{attr.value}
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<div className="flex flex-col items-center justify-center w-full py-8">
|
||||
<div className="text-gray-400 mb-2">Дополнительная информация недоступна</div>
|
||||
</div>
|
||||
))}
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -88,21 +88,19 @@ const VinQuick: React.FC<VinQuickProps> = ({ quickGroup, catalogCode, vehicleId,
|
||||
))}
|
||||
{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="expand-btn"
|
||||
onClick={() => setShownCounts(prev => ({ ...prev, [unit.unitid]: total }))}
|
||||
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 }))}
|
||||
onClick={() => handleUnitClick(unit)}
|
||||
style={{ background: '#e9eef5', borderRadius: 8, color: '#222', padding: '6px 18px', border: 'none'}}
|
||||
>
|
||||
Показать все
|
||||
|
||||
@ -491,7 +491,6 @@ input#VinSearchInput {
|
||||
line-height: 1.4em;
|
||||
}
|
||||
|
||||
.heading-9-copy,
|
||||
.text-block-21-copy {
|
||||
width: 250px;
|
||||
overflow: hidden;
|
||||
@ -939,12 +938,11 @@ a.link-block-2.w-inline-block {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.heading-9-copy {
|
||||
min-width: 100px;
|
||||
|
||||
.flex-block-36 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
.flex-block-15-copy {
|
||||
width: 232px!important;
|
||||
min-width: 232px!important;
|
||||
@ -1194,3 +1192,84 @@ a.link-block-2.w-inline-block {
|
||||
box-shadow: 0 8px 32px rgba(44,62,80,0.10), 0 1.5px 4px rgba(44,62,80,0.08) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.pricecartbp {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 4px; /* или другой нужный вам отступ */
|
||||
}
|
||||
|
||||
.bestpriceitem {
|
||||
height: 279px;
|
||||
}
|
||||
|
||||
|
||||
.flex-block-49 {
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.pcs-search-s1,
|
||||
.sort-item.first {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.pcs-search-s1,
|
||||
.sort-item.first {
|
||||
width: 60px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 479px) {
|
||||
.pcs-search-s1,
|
||||
.sort-item.first {
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.w-layout-vflex.flex-block-36 {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 24px;
|
||||
justify-content: flex-start;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.w-layout-vflex.flex-block-44 {
|
||||
flex: 1 1 calc(33.333% - 16px);
|
||||
max-width: calc(33.333% - 16px);
|
||||
min-width: 0;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.w-layout-vflex.flex-block-44 {
|
||||
flex: 1 1 calc(50% - 12px);
|
||||
max-width: calc(50% - 12px);
|
||||
}
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.w-layout-vflex.flex-block-44 {
|
||||
flex: 1 1 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.w-layout-vflex.flex-block-36 {
|
||||
flex-wrap: nowrap;
|
||||
overflow-x: auto;
|
||||
gap: 12px;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.w-layout-vflex.flex-block-44 {
|
||||
min-width: 160px;
|
||||
max-width: 160px;
|
||||
flex: 0 0 160px;
|
||||
}
|
||||
.heading-9-copy {
|
||||
text-align: left !important;
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user