newpravki #13
@ -1,4 +1,4 @@
|
||||
import React, { useState } from "react";
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { useCart } from "@/contexts/CartContext";
|
||||
import toast from "react-hot-toast";
|
||||
|
||||
@ -27,6 +27,11 @@ const BestPriceCard: React.FC<BestPriceCardProps> = ({
|
||||
const parsedStock = parseInt(stock.replace(/[^\d]/g, ""), 10);
|
||||
const maxCount = isNaN(parsedStock) ? undefined : parsedStock;
|
||||
const [count, setCount] = useState(1);
|
||||
const [inputValue, setInputValue] = useState("1");
|
||||
|
||||
useEffect(() => {
|
||||
setInputValue(count.toString());
|
||||
}, [count]);
|
||||
|
||||
const handleMinus = () => setCount(prev => Math.max(1, prev - 1));
|
||||
const handlePlus = () => {
|
||||
@ -38,7 +43,13 @@ const BestPriceCard: React.FC<BestPriceCardProps> = ({
|
||||
};
|
||||
|
||||
const handleInput = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
let value = parseInt(e.target.value, 10);
|
||||
const val = e.target.value;
|
||||
setInputValue(val);
|
||||
if (val === "") {
|
||||
// Не обновляем count, пока не будет blur
|
||||
return;
|
||||
}
|
||||
let value = parseInt(val, 10);
|
||||
if (isNaN(value) || value < 1) value = 1;
|
||||
if (maxCount !== undefined && value > maxCount) {
|
||||
toast.error(`Максимум ${maxCount} шт.`);
|
||||
@ -47,6 +58,13 @@ const BestPriceCard: React.FC<BestPriceCardProps> = ({
|
||||
setCount(value);
|
||||
};
|
||||
|
||||
const handleInputBlur = () => {
|
||||
if (inputValue === "") {
|
||||
setInputValue("1");
|
||||
setCount(1);
|
||||
}
|
||||
};
|
||||
|
||||
// Функция для парсинга цены из строки
|
||||
const parsePrice = (priceStr: string): number => {
|
||||
const cleanPrice = priceStr.replace(/[^\d.,]/g, '').replace(',', '.');
|
||||
@ -144,8 +162,9 @@ const BestPriceCard: React.FC<BestPriceCardProps> = ({
|
||||
type="number"
|
||||
min={1}
|
||||
max={maxCount}
|
||||
value={count}
|
||||
value={inputValue}
|
||||
onChange={handleInput}
|
||||
onBlur={handleInputBlur}
|
||||
className="text-block-26 w-full text-center outline-none"
|
||||
aria-label="Количество"
|
||||
/>
|
||||
|
||||
@ -38,160 +38,180 @@ const CartItem: React.FC<CartItemProps> = ({
|
||||
onRemove,
|
||||
isSummaryStep = false,
|
||||
itemNumber,
|
||||
}) => (
|
||||
<div className="w-layout-hflex cart-item">
|
||||
<div className="w-layout-hflex info-block-search-copy">
|
||||
{isSummaryStep ? (
|
||||
<div style={{ marginRight: 12, minWidth: 24, textAlign: 'center', fontWeight: 600, fontSize: 14 }}>{itemNumber}</div>
|
||||
) : (
|
||||
<div
|
||||
className={"div-block-7" + (selected ? " active" : "")}
|
||||
onClick={onSelect}
|
||||
style={{ marginRight: 12, cursor: 'pointer' }}
|
||||
>
|
||||
{selected && (
|
||||
<svg width="14" height="10" viewBox="0 0 14 10" fill="none">
|
||||
<path d="M2 5.5L6 9L12 2" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<div className="w-layout-hflex block-name">
|
||||
<h4 className="heading-9-copy">{name}</h4>
|
||||
<div
|
||||
className={
|
||||
"text-block-21-copy" +
|
||||
(isSummaryStep && itemNumber === 1 ? " border-t-0" : "")
|
||||
}
|
||||
style={
|
||||
isSummaryStep && itemNumber === 1
|
||||
? { borderTop: 'none' }
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
{description}
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-block-copy w-form">
|
||||
<form className="form-copy" onSubmit={e => e.preventDefault()}>
|
||||
<input
|
||||
className="text-field-copy w-input"
|
||||
maxLength={256}
|
||||
name="Search-5"
|
||||
data-name="Search 5"
|
||||
placeholder="Комментарий"
|
||||
type="text"
|
||||
id="Search-5"
|
||||
value={comment}
|
||||
onChange={e => onComment(e.target.value)}
|
||||
disabled={isSummaryStep}
|
||||
/>
|
||||
</form>
|
||||
<div className="success-message w-form-done">
|
||||
<div>Thank you! Your submission has been received!</div>
|
||||
</div>
|
||||
<div className="error-message w-form-fail">
|
||||
<div>Oops! Something went wrong while submitting the form.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-layout-hflex add-to-cart-block">
|
||||
<div className="w-layout-hflex flex-block-39-copy">
|
||||
<h4 className="delivery-cart-s1">{delivery}</h4>
|
||||
<div className="text-block-21-copy-copy">{deliveryDate}</div>
|
||||
</div>
|
||||
<div className="w-layout-hflex pcs-cart-s1">
|
||||
}) => {
|
||||
// --- Фикс для input: можно стереть, при blur пустое = 1 ---
|
||||
const [inputValue, setInputValue] = React.useState(count.toString());
|
||||
React.useEffect(() => {
|
||||
setInputValue(count.toString());
|
||||
}, [count]);
|
||||
|
||||
return (
|
||||
<div className="w-layout-hflex cart-item">
|
||||
<div className="w-layout-hflex info-block-search-copy">
|
||||
{isSummaryStep ? (
|
||||
<div className="text-block-26" style={{ fontWeight: 600, fontSize: 14 }}>{count} шт.</div>
|
||||
<div style={{ marginRight: 12, minWidth: 24, textAlign: 'center', fontWeight: 600, fontSize: 14 }}>{itemNumber}</div>
|
||||
) : (
|
||||
<>
|
||||
<div
|
||||
className="minus-plus"
|
||||
onClick={() => onCountChange && onCountChange(count - 1)}
|
||||
style={{ cursor: 'pointer' }}
|
||||
aria-label="Уменьшить количество"
|
||||
tabIndex={0}
|
||||
onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && onCountChange && onCountChange(count - 1)}
|
||||
role="button"
|
||||
>
|
||||
<div className="pluspcs w-embed">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M6 10.5V9.5H14V10.5H6Z" fill="currentColor"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div
|
||||
className={"div-block-7" + (selected ? " active" : "")}
|
||||
onClick={onSelect}
|
||||
style={{ marginRight: 12, cursor: 'pointer' }}
|
||||
>
|
||||
{selected && (
|
||||
<svg width="14" height="10" viewBox="0 0 14 10" fill="none">
|
||||
<path d="M2 5.5L6 9L12 2" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
)}
|
||||
</div>
|
||||
<div className="input-pcs">
|
||||
<input
|
||||
type="number"
|
||||
min={1}
|
||||
value={count}
|
||||
onChange={e => {
|
||||
const value = Math.max(1, parseInt(e.target.value, 10) || 1);
|
||||
onCountChange && onCountChange(value);
|
||||
}}
|
||||
className="text-block-26 w-full text-center outline-none"
|
||||
aria-label="Количество"
|
||||
style={{ width: 40 }}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className="minus-plus"
|
||||
onClick={() => onCountChange && onCountChange(count + 1)}
|
||||
style={{ cursor: 'pointer' }}
|
||||
aria-label="Увеличить количество"
|
||||
tabIndex={0}
|
||||
onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && onCountChange && onCountChange(count + 1)}
|
||||
role="button"
|
||||
>
|
||||
<div className="pluspcs w-embed">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M6 10.5V9.5H14V10.5H6ZM9.5 6H10.5V14H9.5V6Z" fill="currentColor"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div className="w-layout-hflex flex-block-39-copy-copy">
|
||||
<h4 className="price-in-cart-s1">{price}</h4>
|
||||
<div className="price-1-pcs-cart-s1">{pricePerItem}</div>
|
||||
</div>
|
||||
{!isSummaryStep && (
|
||||
<div className="w-layout-hflex control-element">
|
||||
<div className="favorite-icon w-embed" onClick={onFavorite} style={{ cursor: 'pointer', color: favorite ? '#e53935' : undefined }}>
|
||||
<svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M9 16.5L7.84 15.4929C3.72 11.93 1 9.57248 1 6.69619C1 4.33869 2.936 2.5 5.4 2.5C6.792 2.5 8.128 3.11798 9 4.08692C9.872 3.11798 11.208 2.5 12.6 2.5C15.064 2.5 17 4.33869 17 6.69619C17 9.57248 14.28 11.93 10.16 15.4929L9 16.5Z" fill={favorite ? "#e53935" : "currentColor"} />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="w-layout-hflex block-name">
|
||||
<h4 className="heading-9-copy">{name}</h4>
|
||||
<div
|
||||
className="bdel"
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
aria-label="Удалить из корзины"
|
||||
onClick={onRemove}
|
||||
onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && onRemove && onRemove()}
|
||||
style={{ display: 'inline-flex', cursor: 'pointer', transition: 'color 0.2s' }}
|
||||
onMouseEnter={e => {
|
||||
const path = e.currentTarget.querySelector('path');
|
||||
if (path) path.setAttribute('fill', '#ec1c24');
|
||||
}}
|
||||
onMouseLeave={e => {
|
||||
const path = e.currentTarget.querySelector('path');
|
||||
if (path) path.setAttribute('fill', '#D0D0D0');
|
||||
}}
|
||||
className={
|
||||
"text-block-21-copy" +
|
||||
(isSummaryStep && itemNumber === 1 ? " border-t-0" : "")
|
||||
}
|
||||
style={
|
||||
isSummaryStep && itemNumber === 1
|
||||
? { borderTop: 'none' }
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
{description}
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-block-copy w-form">
|
||||
<form className="form-copy" onSubmit={e => e.preventDefault()}>
|
||||
<input
|
||||
className="text-field-copy w-input"
|
||||
maxLength={256}
|
||||
name="Search-5"
|
||||
data-name="Search 5"
|
||||
placeholder="Комментарий"
|
||||
type="text"
|
||||
id="Search-5"
|
||||
value={comment}
|
||||
onChange={e => onComment(e.target.value)}
|
||||
disabled={isSummaryStep}
|
||||
/>
|
||||
</form>
|
||||
<div className="success-message w-form-done">
|
||||
<div>Thank you! Your submission has been received!</div>
|
||||
</div>
|
||||
<div className="error-message w-form-fail">
|
||||
<div>Oops! Something went wrong while submitting the form.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-layout-hflex add-to-cart-block">
|
||||
<div className="w-layout-hflex flex-block-39-copy">
|
||||
<h4 className="delivery-cart-s1">{delivery}</h4>
|
||||
<div className="text-block-21-copy-copy">{deliveryDate}</div>
|
||||
</div>
|
||||
<div className="w-layout-hflex pcs-cart-s1">
|
||||
{isSummaryStep ? (
|
||||
<div className="text-block-26" style={{ fontWeight: 600, fontSize: 14 }}>{count} шт.</div>
|
||||
) : (
|
||||
<>
|
||||
<div
|
||||
className="minus-plus"
|
||||
onClick={() => onCountChange && onCountChange(count - 1)}
|
||||
style={{ cursor: 'pointer' }}
|
||||
aria-label="Уменьшить количество"
|
||||
tabIndex={0}
|
||||
onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && onCountChange && onCountChange(count - 1)}
|
||||
role="button"
|
||||
>
|
||||
<div className="pluspcs w-embed">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M6 10.5V9.5H14V10.5H6Z" fill="currentColor"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div className="input-pcs">
|
||||
<input
|
||||
type="number"
|
||||
min={1}
|
||||
value={inputValue}
|
||||
onChange={e => {
|
||||
const val = e.target.value;
|
||||
setInputValue(val);
|
||||
if (val === "") {
|
||||
// Не обновляем count, пока не будет blur
|
||||
return;
|
||||
}
|
||||
const valueNum = Math.max(1, parseInt(val, 10) || 1);
|
||||
onCountChange && onCountChange(valueNum);
|
||||
}}
|
||||
onBlur={() => {
|
||||
if (inputValue === "") {
|
||||
setInputValue("1");
|
||||
onCountChange && onCountChange(1);
|
||||
}
|
||||
}}
|
||||
className="text-block-26 w-full text-center outline-none"
|
||||
aria-label="Количество"
|
||||
style={{ width: 40 }}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className="minus-plus"
|
||||
onClick={() => onCountChange && onCountChange(count + 1)}
|
||||
style={{ cursor: 'pointer' }}
|
||||
aria-label="Увеличить количество"
|
||||
tabIndex={0}
|
||||
onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && onCountChange && onCountChange(count + 1)}
|
||||
role="button"
|
||||
>
|
||||
<div className="pluspcs w-embed">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M6 10.5V9.5H14V10.5H6ZM9.5 6H10.5V14H9.5V6Z" fill="currentColor"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div className="w-layout-hflex flex-block-39-copy-copy">
|
||||
<h4 className="price-in-cart-s1">{price}</h4>
|
||||
<div className="price-1-pcs-cart-s1">{pricePerItem}</div>
|
||||
</div>
|
||||
{!isSummaryStep && (
|
||||
<div className="w-layout-hflex control-element">
|
||||
<div className="favorite-icon w-embed" onClick={onFavorite} style={{ cursor: 'pointer', color: favorite ? '#e53935' : undefined }}>
|
||||
<svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M4.625 17.5C4.14375 17.5 3.73192 17.3261 3.3895 16.9782C3.04708 16.6304 2.87558 16.2117 2.875 15.7222V4.16667H2V2.38889H6.375V1.5H11.625V2.38889H16V4.16667H15.125V15.7222C15.125 16.2111 14.9538 16.6298 14.6114 16.9782C14.269 17.3267 13.8568 17.5006 13.375 17.5H4.625ZM6.375 13.9444H8.125V5.94444H6.375V13.9444ZM9.875 13.9444H11.625V5.94444H9.875V13.9444Z"
|
||||
fill="#D0D0D0"
|
||||
style={{ transition: 'fill 0.2s' }}
|
||||
/>
|
||||
<path d="M9 16.5L7.84 15.4929C3.72 11.93 1 9.57248 1 6.69619C1 4.33869 2.936 2.5 5.4 2.5C6.792 2.5 8.128 3.11798 9 4.08692C9.872 3.11798 11.208 2.5 12.6 2.5C15.064 2.5 17 4.33869 17 6.69619C17 9.57248 14.28 11.93 10.16 15.4929L9 16.5Z" fill={favorite ? "#e53935" : "currentColor"} />
|
||||
</svg>
|
||||
</div>
|
||||
<div
|
||||
className="bdel"
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
aria-label="Удалить из корзины"
|
||||
onClick={onRemove}
|
||||
onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && onRemove && onRemove()}
|
||||
style={{ display: 'inline-flex', cursor: 'pointer', transition: 'color 0.2s' }}
|
||||
onMouseEnter={e => {
|
||||
const path = e.currentTarget.querySelector('path');
|
||||
if (path) path.setAttribute('fill', '#ec1c24');
|
||||
}}
|
||||
onMouseLeave={e => {
|
||||
const path = e.currentTarget.querySelector('path');
|
||||
if (path) path.setAttribute('fill', '#D0D0D0');
|
||||
}}
|
||||
>
|
||||
<svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M4.625 17.5C4.14375 17.5 3.73192 17.3261 3.3895 16.9782C3.04708 16.6304 2.87558 16.2117 2.875 15.7222V4.16667H2V2.38889H6.375V1.5H11.625V2.38889H16V4.16667H15.125V15.7222C15.125 16.2111 14.9538 16.6298 14.6114 16.9782C14.269 17.3267 13.8568 17.5006 13.375 17.5H4.625ZM6.375 13.9444H8.125V5.94444H6.375V13.9444ZM9.875 13.9444H11.625V5.94444H9.875V13.9444Z"
|
||||
fill="#D0D0D0"
|
||||
style={{ transition: 'fill 0.2s' }}
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
);
|
||||
};
|
||||
|
||||
export default CartItem;
|
||||
@ -1,4 +1,4 @@
|
||||
import React, { useState } from "react";
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { useCart } from "@/contexts/CartContext";
|
||||
import { useFavorites } from "@/contexts/FavoritesContext";
|
||||
import toast from "react-hot-toast";
|
||||
@ -52,8 +52,16 @@ const CoreProductCard: React.FC<CoreProductCardProps> = ({
|
||||
const [quantities, setQuantities] = useState<{ [key: number]: number }>(
|
||||
offers.reduce((acc, _, index) => ({ ...acc, [index]: 1 }), {})
|
||||
);
|
||||
const [inputValues, setInputValues] = useState<{ [key: number]: string }>(
|
||||
offers.reduce((acc, _, index) => ({ ...acc, [index]: "1" }), {})
|
||||
);
|
||||
const [quantityErrors, setQuantityErrors] = useState<{ [key: number]: string }>({});
|
||||
|
||||
useEffect(() => {
|
||||
setInputValues(offers.reduce((acc, _, index) => ({ ...acc, [index]: "1" }), {}));
|
||||
setQuantities(offers.reduce((acc, _, index) => ({ ...acc, [index]: 1 }), {}));
|
||||
}, [offers.length]);
|
||||
|
||||
const displayedOffers = offers.slice(0, visibleOffersCount);
|
||||
const hasMoreOffers = visibleOffersCount < offers.length;
|
||||
|
||||
@ -83,16 +91,35 @@ const CoreProductCard: React.FC<CoreProductCardProps> = ({
|
||||
return match ? parseInt(match[0]) : 0;
|
||||
};
|
||||
|
||||
const handleQuantityInput = (index: number, value: string) => {
|
||||
const offer = offers[index];
|
||||
const availableStock = parseStock(offer.pcs);
|
||||
let num = parseInt(value, 10);
|
||||
if (isNaN(num) || num < 1) num = 1;
|
||||
if (num > availableStock) {
|
||||
toast.error(`Максимум ${availableStock} шт.`);
|
||||
return;
|
||||
const handleInputChange = (idx: number, val: string) => {
|
||||
setInputValues(prev => ({ ...prev, [idx]: val }));
|
||||
if (val === "") return;
|
||||
const valueNum = Math.max(1, parseInt(val, 10) || 1);
|
||||
setQuantities(prev => ({ ...prev, [idx]: valueNum }));
|
||||
};
|
||||
|
||||
const handleInputBlur = (idx: number) => {
|
||||
if (inputValues[idx] === "") {
|
||||
setInputValues(prev => ({ ...prev, [idx]: "1" }));
|
||||
setQuantities(prev => ({ ...prev, [idx]: 1 }));
|
||||
}
|
||||
setQuantities(prev => ({ ...prev, [index]: num }));
|
||||
};
|
||||
|
||||
const handleMinus = (idx: number) => {
|
||||
setQuantities(prev => {
|
||||
const newVal = Math.max(1, (prev[idx] || 1) - 1);
|
||||
setInputValues(vals => ({ ...vals, [idx]: newVal.toString() }));
|
||||
return { ...prev, [idx]: newVal };
|
||||
});
|
||||
};
|
||||
|
||||
const handlePlus = (idx: number, maxCount?: number) => {
|
||||
setQuantities(prev => {
|
||||
let newVal = (prev[idx] || 1) + 1;
|
||||
if (maxCount !== undefined) newVal = Math.min(newVal, maxCount);
|
||||
setInputValues(vals => ({ ...vals, [idx]: newVal.toString() }));
|
||||
return { ...prev, [idx]: newVal };
|
||||
});
|
||||
};
|
||||
|
||||
const handleAddToCart = (offer: CoreProductCardOffer, index: number) => {
|
||||
@ -291,6 +318,7 @@ const CoreProductCard: React.FC<CoreProductCardProps> = ({
|
||||
<div className="w-layout-vflex product-list-search-s1">
|
||||
{displayedOffers.map((offer, idx) => {
|
||||
const isLast = idx === displayedOffers.length - 1;
|
||||
const maxCount = parseStock(offer.pcs);
|
||||
return (
|
||||
<div
|
||||
className="w-layout-hflex product-item-search-s1"
|
||||
@ -317,43 +345,48 @@ const CoreProductCard: React.FC<CoreProductCardProps> = ({
|
||||
<div className="w-layout-hflex add-to-cart-block-s1">
|
||||
<div className="w-layout-hflex flex-block-82">
|
||||
<div className="w-layout-hflex pcs-cart-s1">
|
||||
<button
|
||||
type="button"
|
||||
<div
|
||||
className="minus-plus"
|
||||
onClick={() => handleQuantityInput(idx, ((quantities[idx] || 1) - 1).toString())}
|
||||
onClick={() => handleMinus(idx)}
|
||||
style={{ cursor: 'pointer' }}
|
||||
aria-label="Уменьшить количество"
|
||||
tabIndex={0}
|
||||
onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && handleMinus(idx)}
|
||||
role="button"
|
||||
>
|
||||
<div className="pluspcs w-embed">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M6 10.5V9.5H14V10.5H6Z" fill="currentColor" />
|
||||
</svg>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div className="input-pcs">
|
||||
<input
|
||||
type="number"
|
||||
min={1}
|
||||
max={parseStock(offer.pcs)}
|
||||
value={quantities[idx] || 1}
|
||||
onChange={e => handleQuantityInput(idx, e.target.value)}
|
||||
max={maxCount}
|
||||
value={inputValues[idx]}
|
||||
onChange={e => handleInputChange(idx, e.target.value)}
|
||||
onBlur={() => handleInputBlur(idx)}
|
||||
className="text-block-26 w-full text-center outline-none"
|
||||
aria-label="Количество"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
<div
|
||||
className="minus-plus"
|
||||
onClick={() => handleQuantityInput(idx, ((quantities[idx] || 1) + 1).toString())}
|
||||
onClick={() => handlePlus(idx, maxCount)}
|
||||
style={{ cursor: 'pointer' }}
|
||||
aria-label="Увеличить количество"
|
||||
tabIndex={0}
|
||||
onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && handlePlus(idx, maxCount)}
|
||||
role="button"
|
||||
>
|
||||
<div className="pluspcs w-embed">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M6 10.5V9.5H14V10.5H6ZM9.5 6H10.5V14H9.5V6Z" fill="currentColor" />
|
||||
</svg>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
|
||||
@ -68,26 +68,26 @@ const VehicleSearchResults: React.FC<VehicleSearchResultsProps> = ({
|
||||
Найдено автомобилей: {results.length}
|
||||
</h3>
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
<div className="flex flex-wrap flex-1 gap-5 size-full max-md:max-w-full">
|
||||
{results.map((vehicle, index) => (
|
||||
<div
|
||||
key={`${vehicle.vehicleid}-${index}`}
|
||||
className="bg-white rounded-lg shadow-md border border-gray-200 p-4 hover:shadow-lg transition-shadow cursor-pointer"
|
||||
className="flex flex-col flex-1 shrink p-8 bg-white rounded-lg border border-solid basis-0 border-stone-300 max-w-[504px] md:min-w-[370px] sm:min-w-[340px] min-w-[200px] max-md:px-5 cursor-pointer transition-shadow hover:shadow-lg"
|
||||
onClick={() => handleSelectVehicle(vehicle)}
|
||||
>
|
||||
{/* Заголовок автомобиля */}
|
||||
<div className="mb-3">
|
||||
<h4 className="text-lg font-semibold text-blue-600 mb-1">
|
||||
<div className="">
|
||||
<h4 className="text-lg font-semibold text-red-600 mb-1 truncate">
|
||||
{vehicle.name || `${vehicle.brand} ${vehicle.model}`}
|
||||
</h4>
|
||||
<p className="text-sm text-gray-500">
|
||||
{/* <p className="text-sm text-gray-500 truncate">
|
||||
{vehicle.modification} ({vehicle.year})
|
||||
</p>
|
||||
</p> */}
|
||||
</div>
|
||||
|
||||
{/* Основные характеристики */}
|
||||
<div className="space-y-1 mb-4">
|
||||
<h5 className="text-sm font-semibold text-gray-700 mb-2">Основные характеристики</h5>
|
||||
<h5 className="text-base font-semibold text-gray-900 mb-2">Основные характеристики</h5>
|
||||
{renderAttribute('Марка', vehicle.brand)}
|
||||
{renderAttribute('Модель', vehicle.model)}
|
||||
{renderAttribute('Двигатель', vehicle.engine)}
|
||||
@ -96,7 +96,7 @@ const VehicleSearchResults: React.FC<VehicleSearchResultsProps> = ({
|
||||
{/* Все атрибуты из API */}
|
||||
{vehicle.attributes && vehicle.attributes.length > 0 && (
|
||||
<div className="space-y-1 mb-4">
|
||||
<h5 className="text-sm font-semibold text-gray-700 mb-2">Дополнительные характеристики</h5>
|
||||
<h5 className="text-base font-semibold text-gray-900 mb-2">Дополнительные характеристики</h5>
|
||||
{vehicle.attributes.map((attr, attrIndex) => (
|
||||
<div key={attrIndex} className="flex justify-between py-1 border-b border-gray-100">
|
||||
<span className="text-sm text-gray-600 font-medium">{attr.name || attr.key}:</span>
|
||||
@ -110,7 +110,7 @@ const VehicleSearchResults: React.FC<VehicleSearchResultsProps> = ({
|
||||
{(!vehicle.attributes || vehicle.attributes.length === 0) && (
|
||||
<>
|
||||
<div className="space-y-1 mb-4">
|
||||
<h5 className="text-sm font-semibold text-gray-700 mb-2">Дополнительные характеристики</h5>
|
||||
<h5 className="text-base font-semibold text-gray-900 mb-2">Дополнительные характеристики</h5>
|
||||
{renderAttribute('Год', vehicle.year)}
|
||||
{renderAttribute('Кузов', vehicle.bodytype)}
|
||||
{renderAttribute('Трансмиссия', vehicle.transmission)}
|
||||
@ -123,7 +123,7 @@ const VehicleSearchResults: React.FC<VehicleSearchResultsProps> = ({
|
||||
</div>
|
||||
|
||||
<div className="space-y-1 mb-4">
|
||||
<h5 className="text-sm font-semibold text-gray-700 mb-2">Технические характеристики</h5>
|
||||
<h5 className="text-base font-semibold text-gray-900 mb-2">Технические характеристики</h5>
|
||||
{renderAttribute('Информация о двигателе', vehicle.engine_info)}
|
||||
{renderAttribute('Номер двигателя', vehicle.engineno)}
|
||||
{renderAttribute('Дата производства', vehicle.date)}
|
||||
@ -133,7 +133,7 @@ const VehicleSearchResults: React.FC<VehicleSearchResultsProps> = ({
|
||||
</div>
|
||||
|
||||
<div className="space-y-1 mb-4">
|
||||
<h5 className="text-sm font-semibold text-gray-700 mb-2">Даты и периоды</h5>
|
||||
<h5 className="text-base font-semibold text-gray-900 mb-2">Даты и периоды</h5>
|
||||
{renderAttribute('Дата с', vehicle.datefrom)}
|
||||
{renderAttribute('Дата по', vehicle.dateto)}
|
||||
{renderAttribute('Модельный год с', vehicle.modelyearfrom)}
|
||||
@ -143,7 +143,7 @@ const VehicleSearchResults: React.FC<VehicleSearchResultsProps> = ({
|
||||
{/* Опции и описание */}
|
||||
{(vehicle.options || vehicle.description || vehicle.notes) && (
|
||||
<div className="space-y-1 mb-4">
|
||||
<h5 className="text-sm font-semibold text-gray-700 mb-2">Опции и описание</h5>
|
||||
<h5 className="text-base font-semibold text-gray-900 mb-2">Опции и описание</h5>
|
||||
{renderAttribute('Опции', vehicle.options)}
|
||||
{renderAttribute('Описание', vehicle.description)}
|
||||
{renderAttribute('Примечания', vehicle.notes)}
|
||||
@ -153,25 +153,7 @@ const VehicleSearchResults: React.FC<VehicleSearchResultsProps> = ({
|
||||
)}
|
||||
|
||||
{/* Системная информация */}
|
||||
<div className="mt-4 pt-3 border-t border-gray-200">
|
||||
<div className="text-xs text-gray-400 space-y-1">
|
||||
<div>ID: {vehicle.vehicleid}</div>
|
||||
{vehicle.catalog && <div>Каталог: {vehicle.catalog}</div>}
|
||||
{vehicle.ssd && (
|
||||
<div>SSD: {vehicle.ssd.length > 50 ? `${vehicle.ssd.substring(0, 50)}...` : vehicle.ssd}</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Debug информация (только в development) */}
|
||||
{process.env.NODE_ENV === 'development' && (
|
||||
<div className="mt-4 p-2 bg-gray-100 rounded text-xs">
|
||||
<div className="font-semibold text-gray-700 mb-1">Debug Info:</div>
|
||||
<pre className="text-gray-600 whitespace-pre-wrap">
|
||||
{JSON.stringify(vehicle, null, 2)}
|
||||
</pre>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@ -325,36 +325,36 @@ const WizardSearchForm: React.FC<WizardSearchFormProps> = ({
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Кнопка поиска автомобилей */}
|
||||
{!isLoading && canListVehicles && showSearchButton && (
|
||||
<div className="pt-4 border-t">
|
||||
{/* Информация о недостаточности параметров и кнопка поиска */}
|
||||
{!isLoading && wizardSteps.length > 0 && (
|
||||
<div className="flex flex-row gap-4 items-center w-full mx-auto max-sm:flex-col max-sm:items-stretch">
|
||||
<button
|
||||
onClick={() => {
|
||||
handleFindVehicles();
|
||||
setShowSearchButton(false);
|
||||
}}
|
||||
disabled={isLoading}
|
||||
className="w-full sm:w-auto px-8 py-3 bg-red-600 !text-white font-medium rounded-lg shadow-sm hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center"
|
||||
disabled={!canListVehicles || isLoading}
|
||||
className="w-full sm:w-auto px-8 py-3 bg-red-600 !text-white font-medium rounded-lg shadow-sm hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center max-sm:w-full"
|
||||
style={{ minWidth: 180 }}
|
||||
>
|
||||
<svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||||
</svg>
|
||||
Найти автомобили
|
||||
Найти
|
||||
</button>
|
||||
<div className="mt-3 text-sm text-gray-600">
|
||||
Определено параметров: {wizardSteps.filter(s => s.determined).length} из {wizardSteps.length}
|
||||
<div
|
||||
layer-name="Выберите больше параметров для поиска автомобилей"
|
||||
className="box-border inline-flex gap-5 items-center px-10 py-4 rounded-xl bg-slate-50 h-[52px] max-md:px-8 max-md:py-3.5 max-md:w-full max-md:h-auto max-md:max-w-[524px] max-md:min-h-[52px] max-sm:gap-3 max-sm:px-5 max-sm:py-3 max-sm:w-full max-sm:rounded-lg max-sm:justify-center"
|
||||
>
|
||||
<div>
|
||||
<img src="/images/info.svg" alt="info" style={{ width: 18, height: 20, flexShrink: 0 }} />
|
||||
</div>
|
||||
<div
|
||||
layer-name="Выберите больше параметров для поиска автомобилей"
|
||||
className="relative text-base font-medium leading-5 text-center text-gray-950 max-md:text-sm max-sm:text-sm max-sm:leading-4 max-sm:text-center"
|
||||
>
|
||||
Выберите больше параметров для поиска автомобилей
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Информация о недостаточности параметров */}
|
||||
{!isLoading && !canListVehicles && wizardSteps.length > 0 && (
|
||||
<div className="p-4 bg-blue-50 border border-blue-200 rounded-lg">
|
||||
<p className="text-blue-800 text-sm">
|
||||
Выберите больше параметров для поиска автомобилей
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -15,8 +15,10 @@ const DEFAULT_MAX = 32000;
|
||||
const clamp = (v: number, min: number, max: number) => Math.max(min, Math.min(v, max));
|
||||
|
||||
const FilterRange: React.FC<FilterRangeProps> = ({ title, min = DEFAULT_MIN, max = DEFAULT_MAX, isMobile = false, value = null, onChange }) => {
|
||||
const [from, setFrom] = useState(value ? value[0] : min);
|
||||
const [to, setTo] = useState(value ? value[1] : max);
|
||||
const [from, setFrom] = useState<string>(value ? String(value[0]) : String(min));
|
||||
const [to, setTo] = useState<string>(value ? String(value[1]) : String(max));
|
||||
const [confirmedFrom, setConfirmedFrom] = useState<number>(value ? value[0] : min);
|
||||
const [confirmedTo, setConfirmedTo] = useState<number>(value ? value[1] : max);
|
||||
const [dragging, setDragging] = useState<null | "from" | "to">(null);
|
||||
const [trackWidth, setTrackWidth] = useState(0);
|
||||
const [open, setOpen] = useState(true);
|
||||
@ -25,11 +27,15 @@ const FilterRange: React.FC<FilterRangeProps> = ({ title, min = DEFAULT_MIN, max
|
||||
// Обновляем локальное состояние при изменении внешнего значения
|
||||
useEffect(() => {
|
||||
if (value) {
|
||||
setFrom(value[0]);
|
||||
setTo(value[1]);
|
||||
setFrom(String(value[0]));
|
||||
setTo(String(value[1]));
|
||||
setConfirmedFrom(value[0]);
|
||||
setConfirmedTo(value[1]);
|
||||
} else {
|
||||
setFrom(min);
|
||||
setTo(max);
|
||||
setFrom(String(min));
|
||||
setTo(String(max));
|
||||
setConfirmedFrom(min);
|
||||
setConfirmedTo(max);
|
||||
}
|
||||
}, [value, min, max]);
|
||||
|
||||
@ -61,15 +67,15 @@ const FilterRange: React.FC<FilterRangeProps> = ({ title, min = DEFAULT_MIN, max
|
||||
x = clamp(x, 0, trackWidth);
|
||||
const value = clamp(pxToValue(x), min, max);
|
||||
if (dragging === "from") {
|
||||
setFrom(v => clamp(Math.min(value, to), min, to));
|
||||
setFrom(v => String(clamp(Math.min(value, Number(to)), min, Number(to))));
|
||||
} else {
|
||||
setTo(v => clamp(Math.max(value, from), from, max));
|
||||
setTo(v => String(clamp(Math.max(value, Number(from)), Number(from), max)));
|
||||
}
|
||||
};
|
||||
const onUp = () => {
|
||||
setDragging(null);
|
||||
if (onChange) {
|
||||
onChange([from, to]);
|
||||
onChange([Number(from), Number(to)]);
|
||||
}
|
||||
};
|
||||
window.addEventListener("mousemove", onMove);
|
||||
@ -82,25 +88,48 @@ const FilterRange: React.FC<FilterRangeProps> = ({ title, min = DEFAULT_MIN, max
|
||||
|
||||
// Input handlers
|
||||
const handleFromInput = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
let v = Number(e.target.value.replace(/\D/g, ""));
|
||||
if (isNaN(v)) v = min;
|
||||
setFrom(clamp(Math.min(v, to), min, to));
|
||||
let v = e.target.value.replace(/\D/g, "");
|
||||
setFrom(v);
|
||||
};
|
||||
const handleToInput = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
let v = Number(e.target.value.replace(/\D/g, ""));
|
||||
if (isNaN(v)) v = max;
|
||||
setTo(clamp(Math.max(v, from), from, max));
|
||||
let v = e.target.value.replace(/\D/g, "");
|
||||
setTo(v);
|
||||
};
|
||||
|
||||
const handleInputBlur = () => {
|
||||
if (onChange) {
|
||||
onChange([from, to]);
|
||||
const handleFromBlur = () => {
|
||||
let v = Number(from);
|
||||
if (isNaN(v) || v < min) v = min;
|
||||
// если больше max — оставлять как есть
|
||||
setFrom(String(v));
|
||||
if (onChange) onChange([v, to === "" ? max : Number(to)]);
|
||||
setConfirmedFrom(v);
|
||||
};
|
||||
|
||||
const handleToBlur = () => {
|
||||
let v = Number(to);
|
||||
if (isNaN(v) || v < min) v = min;
|
||||
if (v > max) v = max;
|
||||
setTo(String(v));
|
||||
if (onChange) onChange([from === "" ? min : Number(from), v]);
|
||||
setConfirmedTo(v);
|
||||
};
|
||||
|
||||
const handleFromKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
|
||||
if (e.key === "Enter") {
|
||||
handleFromBlur();
|
||||
(e.target as HTMLInputElement).blur();
|
||||
}
|
||||
};
|
||||
const handleToKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
|
||||
if (e.key === "Enter") {
|
||||
handleToBlur();
|
||||
(e.target as HTMLInputElement).blur();
|
||||
}
|
||||
};
|
||||
|
||||
// px позиции для точек
|
||||
const pxFrom = valueToPx(from);
|
||||
const pxTo = valueToPx(to);
|
||||
const pxFrom = valueToPx(dragging ? Number(from) : confirmedFrom);
|
||||
const pxTo = valueToPx(dragging ? Number(to) : confirmedTo);
|
||||
|
||||
// Мобильная версия - без dropdown
|
||||
if (isMobile) {
|
||||
@ -124,7 +153,8 @@ const FilterRange: React.FC<FilterRangeProps> = ({ title, min = DEFAULT_MIN, max
|
||||
id="from"
|
||||
value={from}
|
||||
onChange={handleFromInput}
|
||||
onBlur={handleInputBlur}
|
||||
onBlur={handleFromBlur}
|
||||
onKeyDown={handleFromKeyDown}
|
||||
style={{ padding: '8px 10px 8px 36px', fontSize: 16, width: '100%' }}
|
||||
/>
|
||||
</div>
|
||||
@ -139,7 +169,8 @@ const FilterRange: React.FC<FilterRangeProps> = ({ title, min = DEFAULT_MIN, max
|
||||
id="to"
|
||||
value={to}
|
||||
onChange={handleToInput}
|
||||
onBlur={handleInputBlur}
|
||||
onBlur={handleToBlur}
|
||||
onKeyDown={handleToKeyDown}
|
||||
style={{ padding: '8px 10px 8px 36px', fontSize: 16, width: '100%' }}
|
||||
/>
|
||||
</div>
|
||||
@ -214,7 +245,8 @@ const FilterRange: React.FC<FilterRangeProps> = ({ title, min = DEFAULT_MIN, max
|
||||
id="from"
|
||||
value={from}
|
||||
onChange={handleFromInput}
|
||||
onBlur={handleInputBlur}
|
||||
onBlur={handleFromBlur}
|
||||
onKeyDown={handleFromKeyDown}
|
||||
/>
|
||||
</div>
|
||||
<div className="div-block-5">
|
||||
@ -228,7 +260,8 @@ const FilterRange: React.FC<FilterRangeProps> = ({ title, min = DEFAULT_MIN, max
|
||||
id="to"
|
||||
value={to}
|
||||
onChange={handleToInput}
|
||||
onBlur={handleInputBlur}
|
||||
onBlur={handleToBlur}
|
||||
onKeyDown={handleToKeyDown}
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
43
src/components/index/BestPriceSection.tsx
Normal file
43
src/components/index/BestPriceSection.tsx
Normal file
@ -0,0 +1,43 @@
|
||||
import React from "react";
|
||||
|
||||
const BestPriceSection: React.FC = () => (
|
||||
<section className="main">
|
||||
<div className="w-layout-blockcontainer container w-container">
|
||||
<div className="w-layout-hflex flex-block-118">
|
||||
<div className="w-layout-vflex flex-block-119">
|
||||
<h1 className="heading-20">ЛУЧШАЯ ЦЕНА!</h1>
|
||||
<div className="text-block-58">Подборка лучших предложенийпо цене</div>
|
||||
<a href="#" className="button-24 w-button">Показать все</a>
|
||||
</div>
|
||||
<div className="w-layout-hflex flex-block-121">
|
||||
{[...Array(8)].map((_, i) => (
|
||||
<div className="w-layout-vflex bestpriceitem" key={i}>
|
||||
<div className="favcardcat">
|
||||
<div className="icon-setting w-embed"><svg width="currenWidth" height="currentHeight" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.5996 3.5C15.8107 3.5 17.5 5.1376 17.5 7.19629C17.5 8.46211 16.9057 9.65758 15.7451 11.0117C14.8712 12.0314 13.7092 13.1034 12.3096 14.3311L10.833 15.6143L10.832 15.6152L10 16.3369L9.16797 15.6152L9.16699 15.6143L7.69043 14.3311C6.29084 13.1034 5.12883 12.0314 4.25488 11.0117C3.09428 9.65758 2.50003 8.46211 2.5 7.19629C2.5 5.1376 4.18931 3.5 6.40039 3.5C7.6497 3.50012 8.85029 4.05779 9.62793 4.92188L10 5.33398L10.3721 4.92188C11.1497 4.05779 12.3503 3.50012 13.5996 3.5Z" fill="currentColor" stroke="currentColor"></path></svg></div>
|
||||
</div>
|
||||
<div className="imgitembp"><img width="auto" height="auto" alt="" src="images/162615.webp" loading="lazy" srcSet="images/162615-p-500.webp 500w, images/162615.webp 600w" sizes="(max-width: 600px) 100vw, 600px" className="image-5" />
|
||||
<div className="saletagbp">-35%</div>
|
||||
</div>
|
||||
<div className="div-block-3">
|
||||
<div className="w-layout-hflex pricecartbp">
|
||||
<div className="actualprice">от 17 087 ₽</div>
|
||||
<div className="oldpricebp">22 347 ₽</div>
|
||||
</div>
|
||||
<div className="w-layout-hflex flex-block-120">
|
||||
<div className="nameitembp">Аккумуляторная батарея TYUMEN BATTERY "STANDARD", 6CT-60L, 60</div>
|
||||
<a href="#" className="button-icon w-inline-block">
|
||||
<div className="div-block-26">
|
||||
<div className="icon-setting w-embed"><svg width="currentWidht" height="currentHeight" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.1998 22.2C8.8798 22.2 7.81184 23.28 7.81184 24.6C7.81184 25.92 8.8798 27 10.1998 27C11.5197 27 12.5997 25.92 12.5997 24.6C12.5997 23.28 11.5197 22.2 10.1998 22.2ZM3 3V5.4H5.39992L9.71977 14.508L8.09982 17.448C7.90783 17.784 7.79984 18.18 7.79984 18.6C7.79984 19.92 8.8798 21 10.1998 21H24.5993V18.6H10.7037C10.5357 18.6 10.4037 18.468 10.4037 18.3L10.4397 18.156L11.5197 16.2H20.4594C21.3594 16.2 22.1513 15.708 22.5593 14.964L26.8552 7.176C26.9542 6.99286 27.004 6.78718 26.9997 6.57904C26.9955 6.37089 26.9373 6.16741 26.8309 5.98847C26.7245 5.80952 26.5736 5.66124 26.3927 5.55809C26.2119 5.45495 26.0074 5.40048 25.7992 5.4H8.05183L6.92387 3H3ZM22.1993 22.2C20.8794 22.2 19.8114 23.28 19.8114 24.6C19.8114 25.92 20.8794 27 22.1993 27C23.5193 27 24.5993 25.92 24.5993 24.6C24.5993 23.28 23.5193 22.2 22.1993 22.2Z" fill="currentColor"></path></svg></div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
export default BestPriceSection;
|
||||
158
src/components/index/BrandSelectionSection.tsx
Normal file
158
src/components/index/BrandSelectionSection.tsx
Normal file
@ -0,0 +1,158 @@
|
||||
import React, { useState } from "react";
|
||||
import { useRouter } from "next/router";
|
||||
import { useQuery } from "@apollo/client";
|
||||
import { GET_LAXIMO_BRANDS } from "@/lib/graphql";
|
||||
import { LaximoBrand } from "@/types/laximo";
|
||||
|
||||
const tabs = [
|
||||
"Техническое обслуживание",
|
||||
"Легковые",
|
||||
"Грузовые",
|
||||
"Коммерческие",
|
||||
];
|
||||
|
||||
type Brand = { name: string; code?: string };
|
||||
|
||||
const BrandSelectionSection: React.FC = () => {
|
||||
const [activeTab, setActiveTab] = useState(0);
|
||||
const [selectedBrand, setSelectedBrand] = useState<string>("");
|
||||
const router = useRouter();
|
||||
|
||||
const { data, loading, error } = useQuery<{ laximoBrands: LaximoBrand[] }>(GET_LAXIMO_BRANDS, {
|
||||
errorPolicy: 'all'
|
||||
});
|
||||
|
||||
const staticBrands: Brand[] = [
|
||||
{ name: "Audi" },
|
||||
{ name: "BMW" },
|
||||
{ name: "Cadillac" },
|
||||
{ name: "Chevrolet" },
|
||||
{ name: "Citroen" },
|
||||
{ name: "Fiat" },
|
||||
{ name: "Mazda" }
|
||||
];
|
||||
|
||||
let brands: Brand[] = staticBrands;
|
||||
if (data?.laximoBrands && data.laximoBrands.length > 0) {
|
||||
brands = data.laximoBrands.map(brand => ({
|
||||
name: brand.name,
|
||||
code: brand.code
|
||||
}));
|
||||
} else if (error) {
|
||||
console.warn('Laximo API недоступен, используются статические данные:', error.message);
|
||||
}
|
||||
|
||||
const handleBrandClick = (brand: Brand) => {
|
||||
if (brand.code) {
|
||||
router.push(`/brands?selected=${brand.code}`);
|
||||
} else {
|
||||
console.warn('Brand code not available for', brand.name);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (selectedBrand) {
|
||||
const found = brands.find(b => b.code === selectedBrand || b.name === selectedBrand);
|
||||
if (found && found.code) {
|
||||
router.push(`/brands?selected=${found.code}`);
|
||||
return;
|
||||
}
|
||||
}
|
||||
router.push("/brands");
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<section>
|
||||
<div className="w-layout-blockcontainer container w-container">
|
||||
<div className="w-layout-vflex inbt">
|
||||
<h2 className="heading-4">Подбор по маркам</h2>
|
||||
<div className="text-center">Загрузка брендов...</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="main">
|
||||
<div className="w-layout-blockcontainer container w-container">
|
||||
<div className="w-layout-vflex inbt">
|
||||
<h2 className="heading-4">Подбор по маркам</h2>
|
||||
<div className="w-layout-hflex flex-block-6-copy">
|
||||
<div className="w-layout-hflex brandsortb">
|
||||
<div className="w-layout-hflex tabson">
|
||||
{tabs.map((tab, idx) => (
|
||||
<div
|
||||
className={activeTab === idx ? "tab_c tab_card-activ" : "tab_c tab_card"}
|
||||
key={idx}
|
||||
onClick={() => setActiveTab(idx)}
|
||||
style={{ cursor: "pointer" }}
|
||||
>
|
||||
{tab}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="w-layout-hflex brandsort">
|
||||
{[...Array(5)].map((_, colIdx) => (
|
||||
<div className="w-layout-vflex flex-block-26" key={colIdx}>
|
||||
{brands.slice(colIdx * Math.ceil(brands.length / 5), (colIdx + 1) * Math.ceil(brands.length / 5)).map((brand, idx) => (
|
||||
<button
|
||||
onClick={() => handleBrandClick(brand)}
|
||||
className="link-block-6 w-inline-block text-left"
|
||||
key={idx}
|
||||
style={{ background: 'none', border: 'none', padding: 0 }}
|
||||
>
|
||||
<div className="indexbrandblock">{brand.name}</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<button
|
||||
onClick={() => router.push('/brands')}
|
||||
className="w-layout-hflex flex-block-29 cursor-pointer hover:opacity-80 transition-opacity"
|
||||
style={{ background: 'none', border: 'none', padding: 0 }}
|
||||
>
|
||||
<div className="text-block-18">Все марки</div>
|
||||
<img src="/images/Arrow_right.svg" loading="lazy" alt="Стрелка вправо" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="w-layout-vflex flex-block-124">
|
||||
<h1 className="heading-21">ПОДБОР АВТОЗАПЧАСТЕЙ ПО МАРКЕ АВТО</h1>
|
||||
<div className="form-block-4 w-form">
|
||||
<form id="email-form" name="email-form" data-name="Email Form" method="post" data-wf-page-id="685be6dfd87db2e01cbdb7a2" data-wf-element-id="e673036c-0caf-d251-3b66-9ba9cb85064c" onSubmit={handleSubmit}>
|
||||
<select
|
||||
id="field-7"
|
||||
name="field-7"
|
||||
data-name="Field 7"
|
||||
className="select-copy w-select"
|
||||
value={selectedBrand}
|
||||
onChange={e => setSelectedBrand(e.target.value)}
|
||||
>
|
||||
<option value="">Марка</option>
|
||||
{brands.map((brand, idx) => (
|
||||
<option value={brand.code || brand.name} key={idx}>{brand.name}</option>
|
||||
))}
|
||||
</select>
|
||||
<div className="div-block-10-copy">
|
||||
<input type="submit" data-wait="Please wait..." className="button-3-copy w-button" value="Далее" />
|
||||
</div>
|
||||
</form>
|
||||
<div className="w-form-done">
|
||||
<div>Thank you! Your submission has been received!</div>
|
||||
</div>
|
||||
<div className="w-form-fail">
|
||||
<div>Oops! Something went wrong while submitting the form.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default BrandSelectionSection;
|
||||
39
src/components/index/CategoryNavSection.tsx
Normal file
39
src/components/index/CategoryNavSection.tsx
Normal file
@ -0,0 +1,39 @@
|
||||
import React from "react";
|
||||
|
||||
const CategoryNavSection: React.FC = () => (
|
||||
<section className="catnav">
|
||||
<div className="w-layout-blockcontainer batd w-container">
|
||||
<div className="w-layout-hflex flex-block-108-copy">
|
||||
<div className="ci1">
|
||||
<div className="text-block-54-copy">Детали для ТО</div>
|
||||
</div>
|
||||
<div className="ci2">
|
||||
<div className="text-block-54">Шины</div>
|
||||
</div>
|
||||
<div className="ci3">
|
||||
<div className="text-block-54">Диски</div>
|
||||
</div>
|
||||
<div className="ci4">
|
||||
<div className="text-block-54">Масла и жидкости</div>
|
||||
</div>
|
||||
<div className="ci5">
|
||||
<div className="text-block-54">Инструменты</div>
|
||||
</div>
|
||||
<div className="ci6">
|
||||
<div className="text-block-54">Автохимия</div>
|
||||
</div>
|
||||
<div className="ci7">
|
||||
<div className="text-block-54">Аксессуары</div>
|
||||
</div>
|
||||
<div className="ci8">
|
||||
<div className="text-block-54">Электрика</div>
|
||||
</div>
|
||||
<div className="ci9">
|
||||
<div className="text-block-54">АКБ</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
export default CategoryNavSection;
|
||||
36
src/components/index/IndexTopMenuNav.tsx
Normal file
36
src/components/index/IndexTopMenuNav.tsx
Normal file
@ -0,0 +1,36 @@
|
||||
import React from 'react';
|
||||
|
||||
const IndexTopMenuNav = () => (
|
||||
<section className="topmenub">
|
||||
<div className="w-layout-blockcontainer tb nav w-container">
|
||||
<div className="w-layout-hflex flex-block-107">
|
||||
<a href="#" className="link-block-8 w-inline-block">
|
||||
<div>О компании</div>
|
||||
</a>
|
||||
<a href="#" className="link-block-8 w-inline-block">
|
||||
<div>Оплата и доставка</div>
|
||||
</a>
|
||||
<a href="#" className="link-block-8 w-inline-block">
|
||||
<div>Гарантия и возврат</div>
|
||||
</a>
|
||||
<a href="#" className="link-block-8 w-inline-block">
|
||||
<div>Покупателям</div>
|
||||
</a>
|
||||
<a href="#" className="link-block-8 w-inline-block">
|
||||
<div>Оптовым клиентам</div>
|
||||
</a>
|
||||
<a href="#" className="link-block-8 w-inline-block">
|
||||
<div>Контакты</div>
|
||||
</a>
|
||||
<a href="#" className="link-block-8 green w-inline-block">
|
||||
<div>Новые поступления товаров</div>
|
||||
</a>
|
||||
<a href="#" className="link-block-8 orange w-inline-block">
|
||||
<div>Распродажа</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
export default IndexTopMenuNav;
|
||||
54
src/components/index/NewArrivalsSection.tsx
Normal file
54
src/components/index/NewArrivalsSection.tsx
Normal file
@ -0,0 +1,54 @@
|
||||
import React from "react";
|
||||
|
||||
const NewArrivalsSection: React.FC = () => (
|
||||
<section className="main">
|
||||
<div className="w-layout-blockcontainer container w-container">
|
||||
<div className="w-layout-vflex inbt">
|
||||
<div className="w-layout-hflex flex-block-31">
|
||||
<h2 className="heading-4">Новое поступление</h2>
|
||||
</div>
|
||||
<div className="w-layout-hflex core-product-search">
|
||||
{[...Array(8)].map((_, i) => (
|
||||
<div className="w-layout-vflex flex-block-15-copy" key={i}>
|
||||
<div className="favcardcat">
|
||||
<div className="icon-setting w-embed"><svg width="currenWidth" height="currentHeight" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.5996 3.5C15.8107 3.5 17.5 5.1376 17.5 7.19629C17.5 8.46211 16.9057 9.65758 15.7451 11.0117C14.8712 12.0314 13.7092 13.1034 12.3096 14.3311L10.833 15.6143L10.832 15.6152L10 16.3369L9.16797 15.6152L9.16699 15.6143L7.69043 14.3311C6.29084 13.1034 5.12883 12.0314 4.25488 11.0117C3.09428 9.65758 2.50003 8.46211 2.5 7.19629C2.5 5.1376 4.18931 3.5 6.40039 3.5C7.6497 3.50012 8.85029 4.05779 9.62793 4.92188L10 5.33398L10.3721 4.92188C11.1497 4.05779 12.3503 3.50012 13.5996 3.5Z" fill="currentColor" stroke="currentColor"></path></svg></div>
|
||||
</div>
|
||||
<div className="div-block-4">
|
||||
<img
|
||||
src="images/162615.webp"
|
||||
loading="lazy"
|
||||
width="auto"
|
||||
height="auto"
|
||||
alt="Новое поступление: Аккумуляторная батарея TYUMEN BATTERY"
|
||||
srcSet="images/162615-p-500.webp 500w, images/162615.webp 600w"
|
||||
sizes="(max-width: 600px) 100vw, 600px"
|
||||
className="image-5"
|
||||
/>
|
||||
<div className="text-block-7">-35%</div>
|
||||
</div>
|
||||
<div className="div-block-3">
|
||||
<div className="w-layout-hflex flex-block-16">
|
||||
<div className="text-block-8">от 17 087 ₽</div>
|
||||
<div className="text-block-9">22 347 ₽</div>
|
||||
</div>
|
||||
<div className="w-layout-hflex flex-block-122">
|
||||
<div className="w-layout-vflex">
|
||||
<div className="text-block-10">Аккумуляторная батарея TYUMEN BATTERY "STANDARD", 6CT-60L, 60</div>
|
||||
<div className="text-block-11">Borsehung</div>
|
||||
</div>
|
||||
<a href="#" className="button-icon w-inline-block">
|
||||
<div className="div-block-26">
|
||||
<div className="icon-setting w-embed"><svg width="currentWidht" height="currentHeight" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.1998 22.2C8.8798 22.2 7.81184 23.28 7.81184 24.6C7.81184 25.92 8.8798 27 10.1998 27C11.5197 27 12.5997 25.92 12.5997 24.6C12.5997 23.28 11.5197 22.2 10.1998 22.2ZM3 3V5.4H5.39992L9.71977 14.508L8.09982 17.448C7.90783 17.784 7.79984 18.18 7.79984 18.6C7.79984 19.92 8.8798 21 10.1998 21H24.5993V18.6H10.7037C10.5357 18.6 10.4037 18.468 10.4037 18.3L10.4397 18.156L11.5197 16.2H20.4594C21.3594 16.2 22.1513 15.708 22.5593 14.964L26.8552 7.176C26.9542 6.99286 27.004 6.78718 26.9997 6.57904C26.9955 6.37089 26.9373 6.16741 26.8309 5.98847C26.7245 5.80952 26.5736 5.66124 26.3927 5.55809C26.2119 5.45495 26.0074 5.40048 25.7992 5.4H8.05183L6.92387 3H3ZM22.1993 22.2C20.8794 22.2 19.8114 23.28 19.8114 24.6C19.8114 25.92 20.8794 27 22.1993 27C23.5193 27 24.5993 25.92 24.5993 24.6C24.5993 23.28 23.5193 22.2 22.1993 22.2Z" fill="currentColor"></path></svg></div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
export default NewArrivalsSection;
|
||||
@ -3,7 +3,7 @@ import NewsCard from "@/components/news/NewsCard";
|
||||
import Link from "next/link";
|
||||
|
||||
const NewsAndPromos = () => (
|
||||
<section>
|
||||
<section className="main">
|
||||
<div className="w-layout-blockcontainer container w-container">
|
||||
<div className="w-layout-vflex news-index-block">
|
||||
<div className="w-layout-hflex flex-block-31">
|
||||
|
||||
67
src/components/index/ProductOfDaySection.tsx
Normal file
67
src/components/index/ProductOfDaySection.tsx
Normal file
@ -0,0 +1,67 @@
|
||||
import React from "react";
|
||||
|
||||
const ProductOfDaySection: React.FC = () => (
|
||||
<section className="main">
|
||||
<div className="w-layout-blockcontainer batd w-container">
|
||||
<div className="w-layout-hflex flex-block-108">
|
||||
<div data-delay="4000" data-animation="slide" className="slider w-slider" data-autoplay="false" data-easing="ease" data-hide-arrows="false" data-disable-swipe="false" data-autoplay-limit="0" data-nav-spacing="3" data-duration="500" data-infinite="true">
|
||||
<div className="mask w-slider-mask">
|
||||
<div className="slide w-slide">
|
||||
<div className="div-block-128"></div>
|
||||
</div>
|
||||
<div className="w-slide"></div>
|
||||
<div className="w-slide"></div>
|
||||
</div>
|
||||
<div className="left-arrow w-slider-arrow-left">
|
||||
<div className="div-block-34">
|
||||
<div className="code-embed-14 w-embed"><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" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"></path>
|
||||
</svg></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="right-arrow w-slider-arrow-right">
|
||||
<div className="div-block-34 right">
|
||||
<div className="code-embed-14 w-embed"><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" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"></path>
|
||||
</svg></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="slide-nav w-slider-nav w-slider-nav-invert w-round"></div>
|
||||
</div>
|
||||
<div className="div-block-129">
|
||||
<div className="w-layout-hflex flex-block-109">
|
||||
<h1 className="heading-18">ТОВАРЫ ДНЯ</h1>
|
||||
<div className="saletag">-35%</div>
|
||||
</div>
|
||||
<div className="w-layout-hflex flex-block-110">
|
||||
<div className="w-layout-vflex flex-block-111">
|
||||
<div className="w-layout-hflex flex-block-16">
|
||||
<div className="text-block-8">от 17 087 ₽</div>
|
||||
<div className="text-block-9">22 347 ₽</div>
|
||||
</div>
|
||||
<div className="text-block-10">Аккумуляторная батарея TYUMEN BATTERY "STANDARD", 6CT-60L, 60</div>
|
||||
</div><img width="Auto" height="Auto" alt="" src="/images/162615.webp" loading="lazy" srcSet="/images/162615-p-500.webp 500w, /images/162615.webp 600w" sizes="(max-width: 600px) 100vw, 600px" className="image-5-copy" />
|
||||
</div>
|
||||
<div className="w-layout-hflex flex-block-125">
|
||||
<div className="div-block-134">
|
||||
<div className="code-embed-17 w-embed"><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" stroke="currentcolor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"></path>
|
||||
</svg></div>
|
||||
</div>
|
||||
<div className="div-block-134-copy">
|
||||
<div className="code-embed-17 w-embed"><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" stroke="currentcolor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"></path>
|
||||
</svg></div>
|
||||
</div>
|
||||
<div className="w-layout-hflex flex-block-126">
|
||||
<div className="div-block-135"></div>
|
||||
<div className="div-block-135"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
export default ProductOfDaySection;
|
||||
21
src/components/index/PromoImagesSection.tsx
Normal file
21
src/components/index/PromoImagesSection.tsx
Normal file
@ -0,0 +1,21 @@
|
||||
import React from "react";
|
||||
|
||||
const PromoImagesSection: React.FC = () => (
|
||||
<section className="main">
|
||||
<div className="w-layout-blockcontainer container w-container">
|
||||
<div className="w-layout-hflex flex-block-123">
|
||||
<div className="div-block-132">
|
||||
<img src="images/Group-602.png" loading="lazy" alt="Промо 1" />
|
||||
</div>
|
||||
<div className="div-block-132">
|
||||
<img src="images/Group-603.png" loading="lazy" alt="Промо 2" />
|
||||
</div>
|
||||
<div className="div-block-132">
|
||||
<img src="images/Group-604.png" loading="lazy" alt="Промо 3" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
export default PromoImagesSection;
|
||||
25
src/components/index/SupportVinSection.tsx
Normal file
25
src/components/index/SupportVinSection.tsx
Normal file
@ -0,0 +1,25 @@
|
||||
import React from "react";
|
||||
|
||||
const SupportVinSection: React.FC = () => (
|
||||
<section className="main">
|
||||
<div className="w-layout-blockcontainer container-copy w-container">
|
||||
<img
|
||||
src="images/support_img.png"
|
||||
loading="lazy"
|
||||
alt="Поддержка: помощь с VIN-запросом"
|
||||
className="image-27"
|
||||
/>
|
||||
<div className="div-block-11">
|
||||
<div className="w-layout-vflex flex-block-30">
|
||||
<h3 className="supportheading">МЫ ВСЕГДА РАДЫ ПОМОЧЬ</h3>
|
||||
<div className="text-block-19">
|
||||
Если вам нужна помощь с подбором автозапчастей, то воспользуйтесь формой VIN-запроса. Введите идентификационный номер (VIN) вашего автомобиля — и мы найдём нужную деталь.
|
||||
</div>
|
||||
</div>
|
||||
<a href="#" className="submit-button-copy w-button">Отправить VIN-запрос</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
export default SupportVinSection;
|
||||
44
src/components/index/TopSalesSection.tsx
Normal file
44
src/components/index/TopSalesSection.tsx
Normal file
@ -0,0 +1,44 @@
|
||||
import React from "react";
|
||||
|
||||
const TopSalesSection: React.FC = () => (
|
||||
<section className="main">
|
||||
<div className="w-layout-blockcontainer container w-container">
|
||||
<div className="w-layout-vflex inbt">
|
||||
<div className="w-layout-hflex flex-block-31">
|
||||
<h2 className="heading-4">Топ продаж</h2>
|
||||
</div>
|
||||
<div className="w-layout-hflex core-product-search">
|
||||
{[...Array(8)].map((_, i) => (
|
||||
<div className="w-layout-vflex flex-block-15-copy" key={i}>
|
||||
<div className="favcardcat">
|
||||
<div className="icon-setting w-embed"><svg width="currenWidth" height="currentHeight" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.5996 3.5C15.8107 3.5 17.5 5.1376 17.5 7.19629C17.5 8.46211 16.9057 9.65758 15.7451 11.0117C14.8712 12.0314 13.7092 13.1034 12.3096 14.3311L10.833 15.6143L10.832 15.6152L10 16.3369L9.16797 15.6152L9.16699 15.6143L7.69043 14.3311C6.29084 13.1034 5.12883 12.0314 4.25488 11.0117C3.09428 9.65758 2.50003 8.46211 2.5 7.19629C2.5 5.1376 4.18931 3.5 6.40039 3.5C7.6497 3.50012 8.85029 4.05779 9.62793 4.92188L10 5.33398L10.3721 4.92188C11.1497 4.05779 12.3503 3.50012 13.5996 3.5Z" fill="currentColor" stroke="currentColor"></path></svg></div>
|
||||
</div>
|
||||
<div className="div-block-4"><img src="images/162615.webp" loading="lazy" width="auto" height="auto" alt="" srcSet="images/162615-p-500.webp 500w, images/162615.webp 600w" sizes="(max-width: 600px) 100vw, 600px" className="image-5" />
|
||||
<div className="text-block-7">-35%</div>
|
||||
</div>
|
||||
<div className="div-block-3">
|
||||
<div className="w-layout-hflex flex-block-16">
|
||||
<div className="text-block-8">от 17 087 ₽</div>
|
||||
<div className="text-block-9">22 347 ₽</div>
|
||||
</div>
|
||||
<div className="w-layout-hflex flex-block-122">
|
||||
<div className="w-layout-vflex">
|
||||
<div className="text-block-10">Аккумуляторная батарея TYUMEN BATTERY "STANDARD", 6CT-60L, 60</div>
|
||||
<div className="text-block-11">Borsehung</div>
|
||||
</div>
|
||||
<a href="#" className="button-icon w-inline-block">
|
||||
<div className="div-block-26">
|
||||
<div className="icon-setting w-embed"><svg width="currentWidht" height="currentHeight" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.1998 22.2C8.8798 22.2 7.81184 23.28 7.81184 24.6C7.81184 25.92 8.8798 27 10.1998 27C11.5197 27 12.5997 25.92 12.5997 24.6C12.5997 23.28 11.5197 22.2 10.1998 22.2ZM3 3V5.4H5.39992L9.71977 14.508L8.09982 17.448C7.90783 17.784 7.79984 18.18 7.79984 18.6C7.79984 19.92 8.8798 21 10.1998 21H24.5993V18.6H10.7037C10.5357 18.6 10.4037 18.468 10.4037 18.3L10.4397 18.156L11.5197 16.2H20.4594C21.3594 16.2 22.1513 15.708 22.5593 14.964L26.8552 7.176C26.9542 6.99286 27.004 6.78718 26.9997 6.57904C26.9955 6.37089 26.9373 6.16741 26.8309 5.98847C26.7245 5.80952 26.5736 5.66124 26.3927 5.55809C26.2119 5.45495 26.0074 5.40048 25.7992 5.4H8.05183L6.92387 3H3ZM22.1993 22.2C20.8794 22.2 19.8114 23.28 19.8114 24.6C19.8114 25.92 20.8794 27 22.1993 27C23.5193 27 24.5993 25.92 24.5993 24.6C24.5993 23.28 23.5193 22.2 22.1993 22.2Z" fill="currentColor"></path></svg></div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
export default TopSalesSection;
|
||||
@ -137,10 +137,10 @@ const KnotIn: React.FC<KnotInProps> = ({ catalogCode, vehicleId, ssd, unitId, un
|
||||
/>
|
||||
{/* Точки/области */}
|
||||
{coordinates.map((coord: any, idx: number) => {
|
||||
const scaledX = coord.x * imageScale.x;
|
||||
const scaledY = coord.y * imageScale.y;
|
||||
const scaledWidth = coord.width * imageScale.x;
|
||||
const scaledHeight = coord.height * imageScale.y;
|
||||
// Кружки всегда 32x32px, центрируем по координате
|
||||
const size = 22;
|
||||
const scaledX = coord.x * imageScale.x - size / 2;
|
||||
const scaledY = coord.y * imageScale.y - size / 2;
|
||||
return (
|
||||
<div
|
||||
key={`coord-${unitId}-${idx}-${coord.x}-${coord.y}`}
|
||||
@ -149,19 +149,29 @@ const KnotIn: React.FC<KnotInProps> = ({ catalogCode, vehicleId, ssd, unitId, un
|
||||
onKeyDown={e => {
|
||||
if (e.key === 'Enter' || e.key === ' ') handlePointClick(coord.codeonimage);
|
||||
}}
|
||||
className="absolute flex items-center justify-center border-2 border-red-600 bg-white rounded-full cursor-pointer"
|
||||
className="absolute flex items-center justify-center cursor-pointer transition-colors"
|
||||
style={{
|
||||
left: scaledX,
|
||||
top: scaledY,
|
||||
width: scaledWidth,
|
||||
height: scaledHeight,
|
||||
width: size,
|
||||
height: size,
|
||||
background: '#B7CAE2',
|
||||
borderRadius: '50%',
|
||||
|
||||
pointerEvents: 'auto',
|
||||
}}
|
||||
title={coord.codeonimage}
|
||||
onClick={() => handlePointClick(coord.codeonimage)}
|
||||
onMouseEnter={e => {
|
||||
(e.currentTarget as HTMLDivElement).style.background = '#EC1C24';
|
||||
(e.currentTarget.querySelector('span') as HTMLSpanElement).style.color = '#fff';
|
||||
}}
|
||||
onMouseLeave={e => {
|
||||
(e.currentTarget as HTMLDivElement).style.background = '#B7CAE2';
|
||||
(e.currentTarget.querySelector('span') as HTMLSpanElement).style.color = '#000';
|
||||
}}
|
||||
>
|
||||
<span className="flex items-center justify-center w-full h-full text-black text-sm font-bold select-none pointer-events-none">
|
||||
<span className="flex items-center justify-center w-full h-full text-black text-sm font-bold select-none pointer-events-none" style={{color: '#000'}}>
|
||||
{coord.codeonimage}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@ -10,18 +10,14 @@ interface VinCategoryProps {
|
||||
activeTab?: 'uzly' | 'manufacturer';
|
||||
onQuickGroupSelect?: (group: any) => void;
|
||||
onCategoryClick?: (e?: React.MouseEvent) => void;
|
||||
openedPath?: string[];
|
||||
setOpenedPath?: (path: string[]) => void;
|
||||
}
|
||||
|
||||
const VinCategory: React.FC<VinCategoryProps> = ({ catalogCode, vehicleId, ssd, onNodeSelect, activeTab = 'uzly', onQuickGroupSelect, onCategoryClick }) => {
|
||||
const [selectedCategory, setSelectedCategory] = useState<any>(null);
|
||||
const VinCategory: React.FC<VinCategoryProps> = ({ catalogCode, vehicleId, ssd, onNodeSelect, activeTab = 'uzly', onQuickGroupSelect, onCategoryClick, openedPath = [], setOpenedPath = () => {} }) => {
|
||||
const [unitsByCategory, setUnitsByCategory] = useState<{ [key: string]: any[] }>({});
|
||||
const lastCategoryIdRef = useRef<string | null>(null);
|
||||
|
||||
// Сброс выбранной категории при смене вкладки
|
||||
useEffect(() => {
|
||||
setSelectedCategory(null);
|
||||
}, [activeTab]);
|
||||
|
||||
// Запрос для "Общие" (QuickGroups)
|
||||
const { data: quickGroupsData, loading: quickGroupsLoading, error: quickGroupsError } = useQuery(GET_LAXIMO_QUICK_GROUPS, {
|
||||
variables: { catalogCode: catalogCode || '', vehicleId: vehicleId || '', ssd: ssd || '' },
|
||||
@ -51,50 +47,41 @@ const VinCategory: React.FC<VinCategoryProps> = ({ catalogCode, vehicleId, ssd,
|
||||
}
|
||||
});
|
||||
|
||||
const categories = activeTab === 'uzly' ? (quickGroupsData?.laximoQuickGroups || []) : (categoriesData?.laximoCategories || []);
|
||||
// categories теперь зависят от activeTab
|
||||
let categories = activeTab === 'uzly' ? (quickGroupsData?.laximoQuickGroups || []) : (categoriesData?.laximoCategories || []);
|
||||
let selectedCategory: any = null;
|
||||
let currentLevel = 0;
|
||||
let currentList = categories;
|
||||
while (openedPath[currentLevel]) {
|
||||
const found = currentList.find((cat: any) => (cat.quickgroupid || cat.categoryid || cat.id) === openedPath[currentLevel]);
|
||||
if (!found) break;
|
||||
selectedCategory = found;
|
||||
currentList = found.children || [];
|
||||
currentLevel++;
|
||||
}
|
||||
|
||||
const loading = activeTab === 'uzly' ? quickGroupsLoading : categoriesLoading;
|
||||
const error = activeTab === 'uzly' ? quickGroupsError : categoriesError;
|
||||
|
||||
const handleBack = () => {
|
||||
setSelectedCategory(null);
|
||||
setOpenedPath(openedPath.slice(0, openedPath.length - 1));
|
||||
};
|
||||
|
||||
const handleCategoryClick = (category: any) => {
|
||||
// Если передан onCategoryClick, используем его
|
||||
const handleCategoryClick = (category: any, level: number) => {
|
||||
if (onCategoryClick) {
|
||||
onCategoryClick();
|
||||
return;
|
||||
}
|
||||
|
||||
if (activeTab === 'uzly') {
|
||||
// Логика для вкладки "Общие" (QuickGroups)
|
||||
if (category.children && category.children.length > 0) {
|
||||
setSelectedCategory(category);
|
||||
} else if (category.link && onQuickGroupSelect) {
|
||||
onQuickGroupSelect(category);
|
||||
} else if (onNodeSelect) {
|
||||
onNodeSelect(category);
|
||||
}
|
||||
} else {
|
||||
// Логика для вкладки "От производителя" (Categories)
|
||||
if (category.children && category.children.length > 0) {
|
||||
setSelectedCategory(category);
|
||||
if (category.children && category.children.length > 0) {
|
||||
if (openedPath[level] === (category.quickgroupid || category.categoryid || category.id)) {
|
||||
setOpenedPath(openedPath.slice(0, level));
|
||||
} else {
|
||||
// Если нет children, грузим units (подкатегории)
|
||||
const categoryId = category.categoryid || category.quickgroupid || category.id;
|
||||
if (!unitsByCategory[categoryId] && catalogCode && vehicleId) {
|
||||
lastCategoryIdRef.current = categoryId;
|
||||
getUnits({
|
||||
variables: {
|
||||
catalogCode,
|
||||
vehicleId,
|
||||
ssd: ssd || '',
|
||||
categoryId
|
||||
}
|
||||
});
|
||||
}
|
||||
setSelectedCategory(category);
|
||||
setOpenedPath([...openedPath.slice(0, level), (category.quickgroupid || category.categoryid || category.id)]);
|
||||
}
|
||||
} else if (category.link && onQuickGroupSelect) {
|
||||
onQuickGroupSelect(category);
|
||||
} else if (onNodeSelect) {
|
||||
onNodeSelect(category);
|
||||
}
|
||||
};
|
||||
|
||||
@ -106,7 +93,7 @@ const VinCategory: React.FC<VinCategoryProps> = ({ catalogCode, vehicleId, ssd,
|
||||
unitid: subcat.unitid || subcat.categoryid || subcat.quickgroupid || subcat.id
|
||||
});
|
||||
} else {
|
||||
handleCategoryClick(subcat);
|
||||
handleCategoryClick(subcat, 0);
|
||||
}
|
||||
};
|
||||
|
||||
@ -150,7 +137,7 @@ const VinCategory: React.FC<VinCategoryProps> = ({ catalogCode, vehicleId, ssd,
|
||||
<div
|
||||
className="div-block-131"
|
||||
key={cat.quickgroupid || cat.categoryid || cat.id || idx}
|
||||
onClick={() => handleCategoryClick(cat)}
|
||||
onClick={() => handleCategoryClick(cat, 0)}
|
||||
style={{ cursor: "pointer" }}
|
||||
>
|
||||
<div className="text-block-57">{cat.name}</div>
|
||||
@ -165,32 +152,37 @@ const VinCategory: React.FC<VinCategoryProps> = ({ catalogCode, vehicleId, ssd,
|
||||
) : (
|
||||
// Список подкатегорий
|
||||
<>
|
||||
{/* <div className="div-block-131" onClick={handleBack} style={{ cursor: "pointer", fontWeight: 500 }}>
|
||||
<div className="text-block-57">← Назад</div>
|
||||
<div className="w-embed">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="24" width="24" height="24" rx="12" transform="rotate(90 24 0)" fill="currentcolor"></rect>
|
||||
<path fillRule="evenodd" clipRule="evenodd" d="M10.9303 17L10 16.0825L14.1395 12L10 7.91747L10.9303 7L16 12L10.9303 17Z" fill="white"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div> */}
|
||||
{subcategories.length === 0 && <div style={{ color: "#888", padding: 8 }}>Нет подкатегорий</div>}
|
||||
{subcategories.map((subcat: any, idx: number) => (
|
||||
<div
|
||||
className="div-block-131"
|
||||
key={subcat.quickgroupid || subcat.categoryid || subcat.unitid || subcat.id || idx}
|
||||
onClick={() => handleSubcategoryClick(subcat)}
|
||||
style={{ cursor: "pointer" }}
|
||||
>
|
||||
<div className="text-block-57">{subcat.name}</div>
|
||||
<div className="w-embed">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="24" width="24" height="24" rx="12" transform="rotate(90 24 0)" fill="currentcolor"></rect>
|
||||
<path fillRule="evenodd" clipRule="evenodd" d="M10.9303 17L10 16.0825L14.1395 12L10 7.91747L10.9303 7L16 12L10.9303 17Z" fill="white"></path>
|
||||
</svg>
|
||||
{(() => {
|
||||
// Найти текущий уровень вложенности для selectedCategory
|
||||
let level = 0;
|
||||
let list = categories;
|
||||
while (openedPath[level] && list) {
|
||||
const found = list.find((cat: any) => (cat.quickgroupid || cat.categoryid || cat.id) === openedPath[level]);
|
||||
if (!found) break;
|
||||
if (found === selectedCategory) break;
|
||||
list = found.children || [];
|
||||
level++;
|
||||
}
|
||||
// Теперь level - это уровень selectedCategory, подкатегории будут на level+1
|
||||
const subcategories = selectedCategory.children || [];
|
||||
if (subcategories.length === 0) return <div style={{ color: "#888", padding: 8 }}>Нет подкатегорий</div>;
|
||||
return subcategories.map((subcat: any, idx: number) => (
|
||||
<div
|
||||
className="div-block-131"
|
||||
key={subcat.quickgroupid || subcat.categoryid || subcat.unitid || subcat.id || idx}
|
||||
onClick={() => handleCategoryClick(subcat, level + 1)}
|
||||
style={{ cursor: "pointer" }}
|
||||
>
|
||||
<div className="text-block-57">{subcat.name}</div>
|
||||
<div className="w-embed">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="24" width="24" height="24" rx="12" transform="rotate(90 24 0)" fill="currentcolor"></rect>
|
||||
<path fillRule="evenodd" clipRule="evenodd" d="M10.9303 17L10 16.0825L14.1395 12L10 7.91747L10.9303 7L16 12L10.9303 17Z" fill="white"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
));
|
||||
})()}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@ -19,6 +19,9 @@ interface VinLeftbarProps {
|
||||
onNodeSelect?: (node: any) => void;
|
||||
onActiveTabChange?: (tab: 'uzly' | 'manufacturer') => void;
|
||||
onQuickGroupSelect?: (group: any) => void;
|
||||
activeTab?: 'uzly' | 'manufacturer';
|
||||
openedPath?: string[];
|
||||
setOpenedPath?: (path: string[]) => void;
|
||||
}
|
||||
|
||||
interface QuickGroup {
|
||||
@ -28,13 +31,11 @@ interface QuickGroup {
|
||||
children?: QuickGroup[];
|
||||
}
|
||||
|
||||
const VinLeftbar: React.FC<VinLeftbarProps> = ({ vehicleInfo, onSearchResults, onNodeSelect, onActiveTabChange, onQuickGroupSelect }) => {
|
||||
const VinLeftbar: React.FC<VinLeftbarProps> = ({ vehicleInfo, onSearchResults, onNodeSelect, onActiveTabChange, onQuickGroupSelect, activeTab: activeTabProp, openedPath = [], setOpenedPath = () => {} }) => {
|
||||
const catalogCode = vehicleInfo?.catalog || '';
|
||||
const vehicleId = vehicleInfo?.vehicleid || '';
|
||||
const ssd = vehicleInfo?.ssd || '';
|
||||
const [openIndex, setOpenIndex] = useState<number | null>(null);
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [activeTab, setActiveTab] = useState<'uzly' | 'manufacturer'>('uzly');
|
||||
const [executeSearch, { data, loading, error }] = useLazyQuery(GET_LAXIMO_FULLTEXT_SEARCH, { errorPolicy: 'all' });
|
||||
|
||||
const { data: categoriesData, loading: categoriesLoading, error: categoriesError } = useQuery(GET_LAXIMO_CATEGORIES, {
|
||||
@ -58,11 +59,11 @@ const VinLeftbar: React.FC<VinLeftbarProps> = ({ vehicleInfo, onSearchResults, o
|
||||
|
||||
const lastCategoryIdRef = React.useRef<string | null>(null);
|
||||
|
||||
const handleToggle = (idx: number, categoryId: string) => {
|
||||
setOpenIndex(openIndex === idx ? null : idx);
|
||||
if (openIndex !== idx && !unitsByCategory[categoryId]) {
|
||||
lastCategoryIdRef.current = categoryId;
|
||||
getUnits({ variables: { catalogCode, vehicleId, ssd, categoryId } });
|
||||
const handleToggle = (categoryId: string, level: number) => {
|
||||
if (openedPath[level] === categoryId) {
|
||||
setOpenedPath(openedPath.slice(0, level));
|
||||
} else {
|
||||
setOpenedPath([...openedPath.slice(0, level), categoryId]);
|
||||
}
|
||||
};
|
||||
|
||||
@ -117,26 +118,11 @@ const VinLeftbar: React.FC<VinLeftbarProps> = ({ vehicleInfo, onSearchResults, o
|
||||
});
|
||||
const quickGroups = quickGroupsData?.laximoQuickGroups || [];
|
||||
|
||||
const [expandedQuickGroup, setExpandedQuickGroup] = useState<string | null>(null);
|
||||
const [expandedSubQuickGroup, setExpandedSubQuickGroup] = useState<string | null>(null);
|
||||
|
||||
const handleQuickGroupToggle = (groupId: string) => {
|
||||
setExpandedQuickGroup(prev => (prev === groupId ? null : groupId));
|
||||
setExpandedSubQuickGroup(null);
|
||||
};
|
||||
|
||||
const handleSubQuickGroupToggle = (groupId: string) => {
|
||||
setExpandedSubQuickGroup(prev => (prev === groupId ? null : groupId));
|
||||
};
|
||||
|
||||
const handleQuickGroupClick = (group: any) => {
|
||||
if (group.link) {
|
||||
// Передаем выбранную группу в родительский компонент для отображения справа
|
||||
if (onQuickGroupSelect) {
|
||||
onQuickGroupSelect(group);
|
||||
}
|
||||
const handleQuickGroupToggle = (groupId: string, level: number) => {
|
||||
if (openedPath[level] === groupId) {
|
||||
setOpenedPath(openedPath.slice(0, level));
|
||||
} else {
|
||||
handleQuickGroupToggle(group.quickgroupid);
|
||||
setOpenedPath([...openedPath.slice(0, level), groupId]);
|
||||
}
|
||||
};
|
||||
|
||||
@ -207,12 +193,6 @@ const VinLeftbar: React.FC<VinLeftbarProps> = ({ vehicleInfo, onSearchResults, o
|
||||
|
||||
const fulltextResults = fulltextData?.laximoFulltextSearch?.details || [];
|
||||
|
||||
useEffect(() => {
|
||||
if (onActiveTabChange) {
|
||||
onActiveTabChange(activeTab);
|
||||
}
|
||||
}, [activeTab]);
|
||||
|
||||
// Если нет данных о транспортном средстве, показываем заглушку
|
||||
if (!vehicleInfo) {
|
||||
return (
|
||||
@ -281,18 +261,15 @@ const VinLeftbar: React.FC<VinLeftbarProps> = ({ vehicleInfo, onSearchResults, o
|
||||
className={
|
||||
searchQuery
|
||||
? 'button-23 w-button'
|
||||
: activeTab === 'uzly'
|
||||
: activeTabProp === 'uzly'
|
||||
? 'button-3 w-button'
|
||||
: 'button-23 w-button'
|
||||
}
|
||||
onClick={e => {
|
||||
e.preventDefault();
|
||||
if (searchQuery) setSearchQuery('');
|
||||
setActiveTab('uzly');
|
||||
// Очищаем выбранную группу при смене таба
|
||||
if (onQuickGroupSelect) {
|
||||
onQuickGroupSelect(null);
|
||||
}
|
||||
if (onActiveTabChange) onActiveTabChange('uzly');
|
||||
if (onQuickGroupSelect) onQuickGroupSelect(null);
|
||||
}}
|
||||
>
|
||||
Узлы
|
||||
@ -302,25 +279,22 @@ const VinLeftbar: React.FC<VinLeftbarProps> = ({ vehicleInfo, onSearchResults, o
|
||||
className={
|
||||
searchQuery
|
||||
? 'button-23 w-button'
|
||||
: activeTab === 'manufacturer'
|
||||
: activeTabProp === 'manufacturer'
|
||||
? 'button-3 w-button'
|
||||
: 'button-23 w-button'
|
||||
}
|
||||
onClick={e => {
|
||||
e.preventDefault();
|
||||
if (searchQuery) setSearchQuery('');
|
||||
setActiveTab('manufacturer');
|
||||
// Очищаем выбранную группу при смене таба
|
||||
if (onQuickGroupSelect) {
|
||||
onQuickGroupSelect(null);
|
||||
}
|
||||
if (onActiveTabChange) onActiveTabChange('manufacturer');
|
||||
if (onQuickGroupSelect) onQuickGroupSelect(null);
|
||||
}}
|
||||
>
|
||||
От производителя
|
||||
</a>
|
||||
</div>
|
||||
{/* Tab content start */}
|
||||
{activeTab === 'uzly' ? (
|
||||
{activeTabProp === 'uzly' ? (
|
||||
// Общие (QuickGroups - бывшие "От производителя")
|
||||
quickGroupsLoading ? (
|
||||
<div style={{ padding: 16, textAlign: 'center' }}>Загружаем группы быстрого поиска...</div>
|
||||
@ -330,7 +304,7 @@ const VinLeftbar: React.FC<VinLeftbarProps> = ({ vehicleInfo, onSearchResults, o
|
||||
<>
|
||||
{(quickGroups as QuickGroup[]).map((group: QuickGroup) => {
|
||||
const hasChildren = group.children && group.children.length > 0;
|
||||
const isOpen = expandedQuickGroup === group.quickgroupid;
|
||||
const isOpen = openedPath.includes(group.quickgroupid);
|
||||
|
||||
if (!hasChildren) {
|
||||
return (
|
||||
@ -340,7 +314,7 @@ const VinLeftbar: React.FC<VinLeftbarProps> = ({ vehicleInfo, onSearchResults, o
|
||||
className="dropdown-link-3 w-dropdown-link"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
handleQuickGroupClick(group);
|
||||
handleQuickGroupToggle(group.quickgroupid, 0);
|
||||
}}
|
||||
>
|
||||
{group.name}
|
||||
@ -357,7 +331,10 @@ const VinLeftbar: React.FC<VinLeftbarProps> = ({ vehicleInfo, onSearchResults, o
|
||||
>
|
||||
<div
|
||||
className={`dropdown-toggle-3 w-dropdown-toggle${isOpen ? " w--open active" : ""}`}
|
||||
onClick={() => handleQuickGroupToggle(group.quickgroupid)}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
handleQuickGroupToggle(group.quickgroupid, 0);
|
||||
}}
|
||||
style={{ cursor: "pointer" }}
|
||||
>
|
||||
<div className="w-icon-dropdown-toggle"></div>
|
||||
@ -366,7 +343,7 @@ const VinLeftbar: React.FC<VinLeftbarProps> = ({ vehicleInfo, onSearchResults, o
|
||||
<nav className={`dropdown-list-4 w-dropdown-list${isOpen ? " w--open" : ""}`}>
|
||||
{group.children?.map((child: QuickGroup) => {
|
||||
const hasSubChildren = child.children && child.children.length > 0;
|
||||
const isChildOpen = expandedSubQuickGroup === child.quickgroupid;
|
||||
const isChildOpen = openedPath.includes(child.quickgroupid);
|
||||
|
||||
if (!hasSubChildren) {
|
||||
return (
|
||||
@ -376,7 +353,7 @@ const VinLeftbar: React.FC<VinLeftbarProps> = ({ vehicleInfo, onSearchResults, o
|
||||
className="dropdown-link-3 w-dropdown-link"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
handleQuickGroupClick(child);
|
||||
handleQuickGroupToggle(child.quickgroupid, 1);
|
||||
}}
|
||||
>
|
||||
{child.name}
|
||||
@ -393,7 +370,10 @@ const VinLeftbar: React.FC<VinLeftbarProps> = ({ vehicleInfo, onSearchResults, o
|
||||
>
|
||||
<div
|
||||
className={`dropdown-toggle-card w-dropdown-toggle pl-0${isChildOpen ? " w--open active" : ""}`}
|
||||
onClick={() => handleSubQuickGroupToggle(child.quickgroupid)}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
handleQuickGroupToggle(child.quickgroupid, 2);
|
||||
}}
|
||||
style={{ cursor: "pointer" }}
|
||||
>
|
||||
<div className="w-icon-dropdown-toggle"></div>
|
||||
@ -407,7 +387,7 @@ const VinLeftbar: React.FC<VinLeftbarProps> = ({ vehicleInfo, onSearchResults, o
|
||||
className="dropdown-link-3 w-dropdown-link"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
handleQuickGroupClick(subChild);
|
||||
handleQuickGroupToggle(subChild.quickgroupid, 3);
|
||||
}}
|
||||
>
|
||||
{subChild.name}
|
||||
@ -434,7 +414,7 @@ const VinLeftbar: React.FC<VinLeftbarProps> = ({ vehicleInfo, onSearchResults, o
|
||||
) : (
|
||||
<>
|
||||
{categories.map((category: any, idx: number) => {
|
||||
const isOpen = openIndex === idx;
|
||||
const isOpen = openedPath.includes(category.quickgroupid);
|
||||
const subcategories = category.children && category.children.length > 0
|
||||
? category.children
|
||||
: unitsByCategory[category.quickgroupid] || [];
|
||||
@ -447,7 +427,10 @@ const VinLeftbar: React.FC<VinLeftbarProps> = ({ vehicleInfo, onSearchResults, o
|
||||
>
|
||||
<div
|
||||
className={`dropdown-toggle-3 w-dropdown-toggle${isOpen ? " w--open" : ""}`}
|
||||
onClick={() => handleToggle(idx, category.quickgroupid)}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
handleToggle(category.quickgroupid, 0);
|
||||
}}
|
||||
style={{ cursor: "pointer" }}
|
||||
>
|
||||
<div className="w-icon-dropdown-toggle"></div>
|
||||
|
||||
44
src/pages/home-new.tsx
Normal file
44
src/pages/home-new.tsx
Normal file
@ -0,0 +1,44 @@
|
||||
import React from 'react';
|
||||
import Head from 'next/head';
|
||||
import CatalogSubscribe from "@/components/CatalogSubscribe";
|
||||
import MobileMenuBottomSection from "@/components/MobileMenuBottomSection";
|
||||
import NewsAndPromos from "@/components/index/NewsAndPromos";
|
||||
import Footer from "@/components/Footer";
|
||||
import IndexTopMenuNav from "@/components/index/IndexTopMenuNav";
|
||||
import ProductOfDaySection from "@/components/index/ProductOfDaySection";
|
||||
import CategoryNavSection from "@/components/index/CategoryNavSection";
|
||||
import BrandSelectionSection from "@/components/index/BrandSelectionSection";
|
||||
import BestPriceSection from "@/components/index/BestPriceSection";
|
||||
import TopSalesSection from "@/components/index/TopSalesSection";
|
||||
import PromoImagesSection from "@/components/index/PromoImagesSection";
|
||||
import NewArrivalsSection from '@/components/index/NewArrivalsSection';
|
||||
import SupportVinSection from '@/components/index/SupportVinSection';
|
||||
|
||||
export default function HomeNew () {
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>Home New</title>
|
||||
<link href="https://fonts.googleapis.com" rel="preconnect" />
|
||||
<link href="https://fonts.gstatic.com" rel="preconnect" crossOrigin="anonymous" />
|
||||
<link href="images/favicon.png" rel="shortcut icon" type="image/x-icon" />
|
||||
<link href="images/webclip.png" rel="apple-touch-icon" />
|
||||
</Head>
|
||||
<IndexTopMenuNav />
|
||||
<ProductOfDaySection />
|
||||
<CategoryNavSection />
|
||||
<BrandSelectionSection />
|
||||
<BestPriceSection />
|
||||
<TopSalesSection />
|
||||
<PromoImagesSection />
|
||||
<NewArrivalsSection />
|
||||
<SupportVinSection />
|
||||
<NewsAndPromos />
|
||||
<section className="section-3">
|
||||
<CatalogSubscribe />
|
||||
</section>
|
||||
<Footer />
|
||||
<MobileMenuBottomSection />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -58,6 +58,7 @@ const VehicleDetailsPage = () => {
|
||||
const [showKnot, setShowKnot] = useState(false);
|
||||
const [foundParts, setFoundParts] = useState<any[]>([]);
|
||||
const [activeTab, setActiveTab] = useState<'uzly' | 'manufacturer'>('uzly');
|
||||
const [openedPath, setOpenedPath] = useState<string[]>([]);
|
||||
const [searchState, setSearchState] = useState<{
|
||||
loading: boolean;
|
||||
error: any;
|
||||
@ -329,6 +330,9 @@ const VehicleDetailsPage = () => {
|
||||
onNodeSelect={setSelectedNode}
|
||||
onActiveTabChange={(tab) => setActiveTab(tab)}
|
||||
onQuickGroupSelect={setSelectedQuickGroup}
|
||||
activeTab={activeTab}
|
||||
openedPath={openedPath}
|
||||
setOpenedPath={setOpenedPath}
|
||||
/>
|
||||
{searchState.isSearching ? (
|
||||
<div className="knot-parts">
|
||||
@ -399,6 +403,8 @@ const VehicleDetailsPage = () => {
|
||||
onNodeSelect={setSelectedNode}
|
||||
activeTab={activeTab}
|
||||
onQuickGroupSelect={setSelectedQuickGroup}
|
||||
openedPath={openedPath}
|
||||
setOpenedPath={setOpenedPath}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
|
||||
@ -469,7 +469,13 @@ input#VinSearchInput {
|
||||
|
||||
|
||||
.dropdown-toggle-card {
|
||||
align-self: stretch;
|
||||
margin-bottom: 5px;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
padding: 6px 15px;
|
||||
padding-left: 0 !important;
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
.dropdown-link-3 {
|
||||
@ -482,7 +488,7 @@ input#VinSearchInput {
|
||||
|
||||
.dropdown-toggle-3.active, .dropdown-toggle-card.active {
|
||||
background-color: var(--background);
|
||||
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.dropdown-toggle-3.active {
|
||||
@ -490,3 +496,227 @@ input#VinSearchInput {
|
||||
|
||||
}
|
||||
|
||||
|
||||
.news-index-block-copy {
|
||||
grid-column-gap: 20px;
|
||||
grid-row-gap: 20px;
|
||||
flex: 1;
|
||||
max-width: 100%;
|
||||
margin-top: 0;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
.news-index-block {
|
||||
grid-column-gap: 40px;
|
||||
grid-row-gap: 40px;
|
||||
flex: 1;
|
||||
max-width: 100%;
|
||||
margin-bottom: 100px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
.news-index-block {
|
||||
grid-column-gap: 20px;
|
||||
grid-row-gap: 20px;
|
||||
}
|
||||
.inbt, .news-index-block-copy {
|
||||
grid-column-gap: 20px;
|
||||
grid-row-gap: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.news-index-block-copy {
|
||||
grid-column-gap: 20px;
|
||||
grid-row-gap: 20px;
|
||||
flex: 1;
|
||||
max-width: 100%;
|
||||
margin-top: 0;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
.bottom_head {
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 479px) {
|
||||
.bottom_head {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom_head {
|
||||
background-color: var(--back);
|
||||
flex-flow: column;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin-top: -15px;
|
||||
padding-left: 60px;
|
||||
padding-right: 60px;
|
||||
display: flex;
|
||||
}
|
||||
body {
|
||||
background-color: var(--background);
|
||||
--_fonts---font-family: Onest, sans-serif;
|
||||
--_fonts---color--dark-blue: #0d336c;
|
||||
--_fonts---font-size--core: 14px;
|
||||
--_fonts---font-size--small-font-size: 14px;
|
||||
--_fonts---color--black: #000;
|
||||
--_fonts---font-size--bigger: 18px;
|
||||
--_fonts---color--white: white;
|
||||
--_fonts---color--light-blue-grey: #8e9aac;
|
||||
--_fonts---h1: 36px;
|
||||
--_fonts---color--light-blue: #b7cae2;
|
||||
--_fonts---color--grey: #747474;
|
||||
--_fonts---font-size--heading-3: 24px;
|
||||
--_fonts---font-size--heading-2: 30px;
|
||||
--_fonts---color--green: #4db45e;
|
||||
--_fonts---font-size--supersmall: 12px;
|
||||
font-family: Onest, sans-serif;
|
||||
}
|
||||
|
||||
|
||||
.menu-button.w--open {
|
||||
z-index: 2000;
|
||||
background-color: var(--red);
|
||||
color: var(--white);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 50px;
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
left: auto;
|
||||
}
|
||||
.heading-7 {
|
||||
z-index: 999;
|
||||
color: var(--_fonts---color--black);
|
||||
font-size: var(--_fonts---font-size--heading-3);
|
||||
width: 200px;
|
||||
margin-top: 30px;
|
||||
margin-bottom: 0;
|
||||
margin-left: 30px;
|
||||
line-height: 130%;
|
||||
position: absolute;
|
||||
}
|
||||
.heading-7-white {
|
||||
z-index: 999;
|
||||
color: var(--_fonts---color--white);
|
||||
font-size: var(--_fonts---font-size--heading-3);
|
||||
width: 200px;
|
||||
margin-top: 30px;
|
||||
margin-bottom: 0;
|
||||
margin-left: 30px;
|
||||
line-height: 130%;
|
||||
position: absolute;
|
||||
}
|
||||
.mobile-menu-buttom-section {
|
||||
z-index: 1900;
|
||||
background-color: var(--white);
|
||||
display: none;
|
||||
position: fixed;
|
||||
inset: auto 0% 0%;
|
||||
}
|
||||
|
||||
.nav-menu-3 {
|
||||
z-index: 1900;
|
||||
background-color: #0000;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: none;
|
||||
position: relative;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
.dropdown-toggle-2 {
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.dropdown-toggle-2.w--open {
|
||||
z-index: 999998;
|
||||
}
|
||||
|
||||
.div-block-28 {
|
||||
background-color: var(--background);
|
||||
height: auto;
|
||||
margin-top: 60px;
|
||||
padding-bottom: 60px;
|
||||
padding-left: 60px;
|
||||
position: relative;
|
||||
bottom: auto;
|
||||
left: 0%;
|
||||
right: 0%;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 991px) {
|
||||
.nav-menu-2 {
|
||||
float: none;
|
||||
flex-flow: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
display: block;
|
||||
position: relative;
|
||||
top: 20px;
|
||||
left: -30px;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.div-block-28 {
|
||||
padding-left: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.heading-8-copy {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
|
||||
.flex-block-108 , .flex-block-108-copy, .w-layout-hflex.flex-block-121, .core-product-search{
|
||||
overflow-x: scroll;
|
||||
overflow-y: hidden;
|
||||
|
||||
|
||||
}
|
||||
/* .flex-block-108-copy::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.flex-block-121::-webkit-scrollbar {
|
||||
display: none;
|
||||
} */
|
||||
|
||||
|
||||
.flex-block-108 , .flex-block-108-copy, .w-layout-hflex.flex-block-121, .core-product-search {
|
||||
overflow-x: scroll;
|
||||
|
||||
overflow-y: hidden;
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
.flex-block-108::-webkit-scrollbar, .flex-block-108-copy::-webkit-scrollbar, .w-layout-hflex.flex-block-121::-webkit-scrollbar, .core-product-search::-webkit-scrollbar {
|
||||
display: none; /* Chrome, Safari */
|
||||
}
|
||||
|
||||
|
||||
.flex-block-44 {
|
||||
max-width: 33%;
|
||||
}
|
||||
|
||||
.text-block-21 {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.flex-block-45 {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.flex-block-39 {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.heading-9-copy {
|
||||
min-width: 100px;
|
||||
|
||||
}
|
||||
@ -3,7 +3,7 @@
|
||||
--back: #0d336c;
|
||||
--_fonts---font-family: Onest, sans-serif;
|
||||
--_fonts---color--dark-blue: #0d336c;
|
||||
--_fonts---font-size--core: 14px;
|
||||
--_fonts---font-size--core: 16px;
|
||||
--_fonts---font-size--small-font-size: 14px;
|
||||
--_fonts---color--black: #000;
|
||||
--_fonts---font-size--bigger: 18px;
|
||||
@ -17,7 +17,6 @@
|
||||
--_button---dark_blue: #0d336c;
|
||||
--_fonts---color--white: white;
|
||||
--_button---hover-dark_blue: #00245b;
|
||||
--_button---black: #000;
|
||||
--_button---color: white;
|
||||
--_round---big-20: 20px;
|
||||
--_fonts---color--light-blue-grey: #8e9aac;
|
||||
@ -34,6 +33,7 @@
|
||||
--_fonts---font-size--heading-2: 30px;
|
||||
--light-grey: #ececec;
|
||||
--_button---light-blue: #e6edf6;
|
||||
--_button---black: #000;
|
||||
--_fonts---color--green: #4db45e;
|
||||
--_fonts---font-size--supersmall: 12px;
|
||||
--light-blue: #dae5ef;
|
||||
@ -787,8 +787,6 @@
|
||||
.w-layout-blockcontainer {
|
||||
max-width: 728px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
@ -796,8 +794,6 @@
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.w-commerce-commercelayoutcontainer {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
@ -828,8 +824,8 @@
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background);
|
||||
--_fonts---font-family: Onest, sans-serif;
|
||||
color: #333;
|
||||
font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
@ -937,7 +933,7 @@ body {
|
||||
.flex-block {
|
||||
grid-column-gap: 15px;
|
||||
grid-row-gap: 15px;
|
||||
display: flex;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.flex-block-2 {
|
||||
@ -968,14 +964,14 @@ body {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.bottom_head {
|
||||
.topmenuh {
|
||||
background-color: var(--back);
|
||||
flex-flow: column;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin-top: -15px;
|
||||
margin-top: 0;
|
||||
padding-left: 60px;
|
||||
padding-right: 60px;
|
||||
display: flex;
|
||||
@ -995,7 +991,9 @@ body {
|
||||
background-color: #fff;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 12px 16px 13px;
|
||||
width: 50px;
|
||||
height: 44px;
|
||||
padding: 13px 12px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@ -1005,7 +1003,7 @@ body {
|
||||
}
|
||||
|
||||
.menu-button.w--open {
|
||||
z-index: 2000;
|
||||
z-index: 9999999;
|
||||
background-color: var(--red);
|
||||
color: var(--white);
|
||||
justify-content: center;
|
||||
@ -1114,6 +1112,7 @@ body {
|
||||
cursor: pointer;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
height: 44px;
|
||||
padding: 6px 15px;
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
@ -1142,18 +1141,22 @@ body {
|
||||
.left-arrow {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-left: -40px;
|
||||
margin-left: 0;
|
||||
padding-left: 40px;
|
||||
display: flex;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.left-arrow:hover {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.icon-2 {
|
||||
color: var(--_button---black);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin: auto;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
@ -1168,28 +1171,28 @@ body {
|
||||
background-color: var(--back);
|
||||
border: 1px #000;
|
||||
flex: 1;
|
||||
min-width: 100%;
|
||||
max-width: 100%;
|
||||
height: 480px;
|
||||
height: 220px;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.flex-block-5 {
|
||||
grid-column-gap: 40px;
|
||||
grid-row-gap: 40px;
|
||||
grid-column-gap: 20px;
|
||||
grid-row-gap: 20px;
|
||||
flex: 1;
|
||||
max-width: 100%;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.flex-block-6 {
|
||||
grid-column-gap: 20px;
|
||||
grid-row-gap: 20px;
|
||||
flex-flow: wrap;
|
||||
grid-template: ". ."
|
||||
". ."
|
||||
"Area Area"
|
||||
/ 1fr 1fr;
|
||||
grid-template: "."
|
||||
"."
|
||||
/ 1fr 1fr 1fr 1fr;
|
||||
grid-auto-columns: 1fr;
|
||||
align-self: stretch;
|
||||
display: grid;
|
||||
@ -1514,7 +1517,7 @@ body {
|
||||
padding: 5px;
|
||||
font-weight: 600;
|
||||
position: relative;
|
||||
top: -45px;
|
||||
top: -35px;
|
||||
}
|
||||
|
||||
.text-block-8 {
|
||||
@ -1557,7 +1560,7 @@ body {
|
||||
box-sizing: content-box;
|
||||
object-fit: contain;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
height: 180px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@ -1885,9 +1888,11 @@ body {
|
||||
.flex-block-24 {
|
||||
grid-column-gap: 40px;
|
||||
grid-row-gap: 40px;
|
||||
border-radius: var(--_round---big-20);
|
||||
background-color: var(--white);
|
||||
flex-flow: column;
|
||||
flex: 1;
|
||||
padding-top: 30px;
|
||||
padding: 30px 40px;
|
||||
}
|
||||
|
||||
.flex-block-25 {
|
||||
@ -1901,9 +1906,13 @@ body {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.link-block-6:hover {
|
||||
color: var(--_button---primary);
|
||||
}
|
||||
|
||||
.flex-block-26 {
|
||||
grid-column-gap: 26px;
|
||||
grid-row-gap: 26px;
|
||||
grid-column-gap: 22px;
|
||||
grid-row-gap: 22px;
|
||||
flex: 1;
|
||||
min-width: 140px;
|
||||
}
|
||||
@ -1942,8 +1951,8 @@ body {
|
||||
border-radius: var(--_round---supersmall-4);
|
||||
background-color: var(--white);
|
||||
color: var(--_fonts---color--grey);
|
||||
height: 52px;
|
||||
margin-bottom: 18px;
|
||||
height: 46px;
|
||||
margin-bottom: 12px;
|
||||
padding: 12px 24px;
|
||||
}
|
||||
|
||||
@ -2009,7 +2018,7 @@ body {
|
||||
align-self: stretch;
|
||||
align-items: center;
|
||||
max-width: 100%;
|
||||
padding: 30px 40px;
|
||||
padding: 60px 40px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@ -2031,7 +2040,7 @@ body {
|
||||
.flex-block-30 {
|
||||
grid-column-gap: 10px;
|
||||
grid-row-gap: 10px;
|
||||
max-width: 840px;
|
||||
max-width: 540px;
|
||||
}
|
||||
|
||||
.flex-block-31 {
|
||||
@ -2046,22 +2055,23 @@ body {
|
||||
flex: 1;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
min-width: 480px;
|
||||
height: 260px;
|
||||
min-width: 240px;
|
||||
height: 140px;
|
||||
padding-top: 0;
|
||||
padding-left: 0;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.div-block-12.small {
|
||||
min-width: 300px;
|
||||
min-width: 240px;
|
||||
}
|
||||
|
||||
.heading-7 {
|
||||
z-index: 999;
|
||||
color: var(--_fonts---color--black);
|
||||
font-size: var(--_fonts---font-size--heading-3);
|
||||
width: 200px;
|
||||
font-size: var(--_fonts---font-size--bigger);
|
||||
width: 160px;
|
||||
margin-top: 30px;
|
||||
margin-bottom: 0;
|
||||
margin-left: 30px;
|
||||
@ -2088,13 +2098,15 @@ body {
|
||||
}
|
||||
|
||||
.heading_news {
|
||||
font-size: var(--_fonts---font-size--heading-3);
|
||||
font-size: var(--_fonts---font-size--bigger);
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
line-height: 130%;
|
||||
}
|
||||
|
||||
.text-block-20 {
|
||||
color: var(--_fonts---color--grey);
|
||||
font-size: var(--_fonts---font-size--small-font-size);
|
||||
}
|
||||
|
||||
.div-block-13 {
|
||||
@ -2158,12 +2170,18 @@ body {
|
||||
|
||||
.slide-nav {
|
||||
margin-bottom: -55px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.right-arrow {
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
margin-right: -40px;
|
||||
margin-right: 0;
|
||||
padding-right: 40px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.right-arrow:hover {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@ -2465,7 +2483,7 @@ body {
|
||||
|
||||
.delivery-time-search {
|
||||
font-size: var(--_fonts---font-size--core);
|
||||
width: 160px;
|
||||
width: 120px;
|
||||
max-height: 40px;
|
||||
overflow: hidden;
|
||||
}
|
||||
@ -2478,7 +2496,7 @@ body {
|
||||
}
|
||||
|
||||
.price.opencard {
|
||||
width: 170px;
|
||||
width: 70px;
|
||||
}
|
||||
|
||||
.add-to-cart-block {
|
||||
@ -2619,7 +2637,7 @@ body {
|
||||
color: var(--_fonts---color--black);
|
||||
font-size: var(--_fonts---font-size--core);
|
||||
text-align: left;
|
||||
width: 200px;
|
||||
width: 60px;
|
||||
max-height: 40px;
|
||||
overflow: hidden;
|
||||
}
|
||||
@ -2848,7 +2866,6 @@ body {
|
||||
flex-flow: column;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
|
||||
}
|
||||
|
||||
.text-field-copy {
|
||||
@ -2867,7 +2884,7 @@ body {
|
||||
color: var(--_fonts---color--black);
|
||||
font-size: var(--_fonts---font-size--bigger);
|
||||
text-align: right;
|
||||
|
||||
width: 100px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
font-weight: 700;
|
||||
@ -3115,7 +3132,6 @@ body {
|
||||
}
|
||||
|
||||
.block-name {
|
||||
max-width: 300px;
|
||||
flex-flow: column;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
@ -3149,7 +3165,7 @@ body {
|
||||
.sort-item-brand {
|
||||
color: var(--_fonts---color--light-blue-grey);
|
||||
font-size: var(--_fonts---font-size--small-font-size);
|
||||
width: 120px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.sort-item-brand.first {
|
||||
@ -3201,7 +3217,7 @@ body {
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
padding-left: 10px;
|
||||
padding-right: 15px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.flex-block-62 {
|
||||
@ -3609,7 +3625,7 @@ body {
|
||||
}
|
||||
|
||||
.code-embed-5 {
|
||||
width: 30px;
|
||||
width: 26px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
@ -3914,7 +3930,6 @@ body {
|
||||
font-size: var(--_fonts---font-size--small-font-size);
|
||||
height: 20px;
|
||||
margin-top: 0;
|
||||
max-width: 100%;
|
||||
margin-bottom: 0;
|
||||
font-weight: 700;
|
||||
}
|
||||
@ -3997,7 +4012,7 @@ body {
|
||||
}
|
||||
|
||||
.mobile-menu-buttom-section {
|
||||
z-index: 1900;
|
||||
z-index: 9999999;
|
||||
background-color: var(--white);
|
||||
display: none;
|
||||
position: fixed;
|
||||
@ -4031,7 +4046,6 @@ body {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
.button-for-mobile-menu-block:hover {
|
||||
background-color: var(--_button---hover-dark_blue);
|
||||
}
|
||||
@ -4108,7 +4122,7 @@ body {
|
||||
margin-top: 60px;
|
||||
padding-bottom: 60px;
|
||||
padding-left: 60px;
|
||||
position: relative;
|
||||
position: absolute;
|
||||
bottom: auto;
|
||||
left: 0%;
|
||||
right: 0%;
|
||||
@ -4222,12 +4236,12 @@ body {
|
||||
}
|
||||
|
||||
.nav-menu-3 {
|
||||
z-index: 1900;
|
||||
z-index: 99999999;
|
||||
background-color: #0000;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: none;
|
||||
position: relative;
|
||||
position: absolute;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
@ -4337,7 +4351,7 @@ body {
|
||||
color: var(--_fonts---color--black);
|
||||
font-size: var(--_fonts---font-size--bigger);
|
||||
text-align: right;
|
||||
max-width: 200px;
|
||||
max-width: 100px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
font-weight: 700;
|
||||
@ -4587,7 +4601,6 @@ body {
|
||||
justify-content: flex-start;
|
||||
align-self: auto;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 80px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@ -4875,9 +4888,10 @@ body {
|
||||
flex: 0 auto;
|
||||
justify-content: space-between;
|
||||
align-self: stretch;
|
||||
align-items: flex-start;
|
||||
align-items: center;
|
||||
margin: -20px;
|
||||
padding: 20px 20px 40px;
|
||||
padding: 20px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mask {
|
||||
@ -4887,14 +4901,25 @@ body {
|
||||
.div-block-34 {
|
||||
border: 1px solid var(--light-blue);
|
||||
background-color: var(--white);
|
||||
opacity: 0;
|
||||
color: var(--back);
|
||||
border-radius: 100px;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
position: absolute;
|
||||
flex: none;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.div-block-34:hover {
|
||||
background-color: var(--_button---primary);
|
||||
color: var(--white);
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
.div-block-34.right {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.heading-17 {
|
||||
@ -5015,9 +5040,10 @@ body {
|
||||
flex: 1;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
min-width: 480px;
|
||||
height: 260px;
|
||||
min-width: 240px;
|
||||
height: 140px;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.div-block-12-copy.small {
|
||||
@ -5030,8 +5056,9 @@ body {
|
||||
flex: 1;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
height: 260px;
|
||||
height: 140px;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.div-block-123.small {
|
||||
@ -5041,7 +5068,7 @@ body {
|
||||
.heading-7-white {
|
||||
z-index: 999;
|
||||
color: var(--_fonts---color--white);
|
||||
font-size: var(--_fonts---font-size--heading-3);
|
||||
font-size: var(--_fonts---font-size--bigger);
|
||||
width: 200px;
|
||||
margin-top: 30px;
|
||||
margin-bottom: 0;
|
||||
@ -5070,18 +5097,28 @@ body {
|
||||
background-image: none;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
min-width: 340px;
|
||||
min-width: 240px;
|
||||
height: 140px;
|
||||
padding-top: 0;
|
||||
padding-left: 0;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.image-22 {
|
||||
box-sizing: border-box;
|
||||
object-fit: contain;
|
||||
object-position: 100% 100%;
|
||||
max-width: 80%;
|
||||
height: 100%;
|
||||
margin-left: auto;
|
||||
margin-right: 0;
|
||||
display: block;
|
||||
position: relative;
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.section-5 {
|
||||
@ -5206,11 +5243,12 @@ body {
|
||||
}
|
||||
|
||||
.news-index-block {
|
||||
grid-column-gap: 40px;
|
||||
grid-row-gap: 40px;
|
||||
grid-column-gap: 20px;
|
||||
grid-row-gap: 20px;
|
||||
flex: 1;
|
||||
max-width: 100%;
|
||||
margin-bottom: 100px;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.section-6 {
|
||||
@ -5286,6 +5324,7 @@ body {
|
||||
}
|
||||
|
||||
.div-block-127 {
|
||||
border: 1px solid var(--_icon---light-blue-grey);
|
||||
color: var(--_icon---light-blue-grey);
|
||||
border-radius: 50px;
|
||||
flex: none;
|
||||
@ -5299,7 +5338,7 @@ body {
|
||||
}
|
||||
|
||||
.div-block-127:hover {
|
||||
|
||||
border-color: var(--_button---primary);
|
||||
color: var(--_button---primary);
|
||||
}
|
||||
|
||||
@ -5364,8 +5403,9 @@ body {
|
||||
}
|
||||
|
||||
.favcardcat {
|
||||
border: 1px none var(--_icon---light-blue-grey);
|
||||
background-color: var(--white);
|
||||
color: var(--_icon---light-blue-grey);
|
||||
color: var(--_fonts---color--white);
|
||||
border-radius: 50px;
|
||||
flex: none;
|
||||
justify-content: center;
|
||||
@ -5380,6 +5420,7 @@ body {
|
||||
}
|
||||
|
||||
.favcardcat:hover {
|
||||
border-color: var(--_button---primary);
|
||||
color: var(--_button---primary);
|
||||
}
|
||||
|
||||
@ -5387,6 +5428,1118 @@ body {
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.tabson {
|
||||
grid-column-gap: 20px;
|
||||
grid-row-gap: 20px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.code-embed-14 {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.code-embed-15 {
|
||||
margin-top: 20px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.topnav {
|
||||
background-color: #0000;
|
||||
flex-flow: column;
|
||||
margin-left: 220px;
|
||||
margin-right: 0;
|
||||
display: block;
|
||||
position: static;
|
||||
}
|
||||
|
||||
.searcj {
|
||||
border-radius: var(--_round---small-8);
|
||||
flex: 1;
|
||||
align-self: stretch;
|
||||
height: 44px;
|
||||
margin-bottom: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.searcj.big {
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.topmenub {
|
||||
flex-flow: column;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin-top: 0;
|
||||
padding-left: 60px;
|
||||
padding-right: 60px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.tb {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
min-width: auto;
|
||||
max-width: 1580px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-top: 40px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.tb.nav {
|
||||
height: auto;
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
.tb.info {
|
||||
width: 100%;
|
||||
padding-top: 30px;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
.tb.subscribe {
|
||||
padding-top: 40px;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
.tb.footer {
|
||||
background-color: var(--back);
|
||||
padding-top: 50px;
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
|
||||
.link-block-8 {
|
||||
border-radius: var(--_round---supersmall-4);
|
||||
background-color: var(--white);
|
||||
color: #000;
|
||||
font-size: var(--_fonts---font-size--core);
|
||||
flex: none;
|
||||
padding: 4px 8px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.link-block-8.green {
|
||||
background-color: var(--green);
|
||||
color: var(--_fonts---color--white);
|
||||
}
|
||||
|
||||
.link-block-8.orange {
|
||||
color: var(--_fonts---color--white);
|
||||
background-color: #ff5f00;
|
||||
}
|
||||
|
||||
.flex-block-107 {
|
||||
grid-column-gap: 10px;
|
||||
grid-row-gap: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.batd {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
min-width: auto;
|
||||
max-width: 1580px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.batd.nav {
|
||||
height: auto;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.batd.info {
|
||||
width: 100%;
|
||||
padding-top: 30px;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
.batd.subscribe {
|
||||
padding-top: 40px;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
.batd.footer {
|
||||
background-color: var(--back);
|
||||
padding-top: 50px;
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
|
||||
.div-block-128 {
|
||||
background-image: url('/images/bannertop.jpg');
|
||||
background-position: 0%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.div-block-129 {
|
||||
border-radius: var(--_round---big-20);
|
||||
background-color: var(--white);
|
||||
flex-flow: column;
|
||||
flex: none;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
width: 330px;
|
||||
height: 220px;
|
||||
padding: 30px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.flex-block-108 {
|
||||
grid-column-gap: 18px;
|
||||
grid-row-gap: 18px;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
.heading-18 {
|
||||
font-size: var(--_fonts---font-size--core);
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.flex-block-109 {
|
||||
grid-column-gap: 16px;
|
||||
grid-row-gap: 16px;
|
||||
flex: 0 auto;
|
||||
grid-template-rows: auto auto;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-auto-columns: 1fr;
|
||||
justify-content: space-between;
|
||||
align-self: stretch;
|
||||
align-items: center;
|
||||
height: 30px;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.saletag {
|
||||
border-radius: var(--_round---small-8);
|
||||
background-color: var(--green);
|
||||
color: var(--_fonts---color--white);
|
||||
padding: 4px 5px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.flex-block-110 {
|
||||
justify-content: flex-start;
|
||||
align-self: stretch;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.flex-block-111 {
|
||||
grid-column-gap: 6px;
|
||||
grid-row-gap: 6px;
|
||||
}
|
||||
|
||||
.arbd {
|
||||
border: 1px solid var(--light-blue);
|
||||
background-color: var(--white);
|
||||
opacity: 0;
|
||||
color: var(--back);
|
||||
border-radius: 100px;
|
||||
flex: none;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.arbd:hover {
|
||||
background-color: var(--_button---primary);
|
||||
color: var(--white);
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
.arbd.right {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.catnav {
|
||||
flex-flow: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding-top: 40px;
|
||||
padding-left: 60px;
|
||||
padding-right: 60px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.ci1 {
|
||||
border-radius: var(--_round---big-20);
|
||||
background-color: var(--white);
|
||||
background-image: url('/images/catalog_item.png');
|
||||
background-position: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: auto;
|
||||
flex: 1;
|
||||
min-width: 160px;
|
||||
height: 180px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.text-block-54 {
|
||||
color: var(--_fonts---color--black);
|
||||
flex: 1;
|
||||
padding-top: 20px;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
font-weight: 700;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.image-25 {
|
||||
margin: auto 0 0 auto;
|
||||
display: block;
|
||||
position: relative;
|
||||
bottom: 0;
|
||||
right: 36px;
|
||||
}
|
||||
|
||||
.text-block-55 {
|
||||
color: var(--_fonts---color--light-blue-grey);
|
||||
}
|
||||
|
||||
.flex-block-112 {
|
||||
grid-column-gap: 10px;
|
||||
grid-row-gap: 10px;
|
||||
color: var(--red);
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.flex-block-113 {
|
||||
border-radius: var(--_round---big-20);
|
||||
background-color: var(--white);
|
||||
flex: 0 auto;
|
||||
align-self: stretch;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.button-3 {
|
||||
border-radius: var(--_button---round-12px);
|
||||
background-color: var(--_button---primary);
|
||||
flex: none;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 10px 15px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.button-3:hover {
|
||||
background-color: var(--_button---hover-red);
|
||||
}
|
||||
|
||||
.button-23 {
|
||||
border-radius: var(--_button---round-12px);
|
||||
background-color: var(--_button---light-blue);
|
||||
color: var(--_fonts---color--black);
|
||||
flex: none;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 10px 25px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.button-23:hover {
|
||||
background-color: var(--_button---primary);
|
||||
color: var(--_fonts---color--white);
|
||||
}
|
||||
|
||||
.flex-block-114 {
|
||||
grid-column-gap: 10px;
|
||||
grid-row-gap: 10px;
|
||||
align-self: stretch;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.dropdown-4 {
|
||||
flex-flow: column;
|
||||
justify-content: space-between;
|
||||
align-self: stretch;
|
||||
align-items: center;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.dropdown-toggle-3 {
|
||||
border-top-right-radius: var(--_round---normal);
|
||||
border-bottom-right-radius: var(--_round---normal);
|
||||
border-left: 2px solid #0000;
|
||||
flex: 1;
|
||||
align-self: stretch;
|
||||
margin-bottom: 5px;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
padding: 6px 15px;
|
||||
}
|
||||
|
||||
.dropdown-toggle-3:hover {
|
||||
border-left: 2px solid var(--red);
|
||||
}
|
||||
|
||||
.dropdown-toggle-3:active {
|
||||
background-color: var(--background);
|
||||
}
|
||||
|
||||
.dropdown-list-4 {
|
||||
background-color: #0000;
|
||||
flex: 1;
|
||||
align-self: stretch;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 10px;
|
||||
padding-left: 25px;
|
||||
display: none;
|
||||
position: static;
|
||||
top: 40px;
|
||||
}
|
||||
|
||||
.dropdown-link-3 {
|
||||
color: var(--_fonts---color--black);
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
.dropdown-link-3:hover {
|
||||
color: var(--red);
|
||||
}
|
||||
|
||||
.text-block-56 {
|
||||
color: var(--_fonts---color--black);
|
||||
}
|
||||
|
||||
.div-block-131 {
|
||||
border-radius: var(--_round---big-20);
|
||||
background-color: var(--white);
|
||||
color: var(--red);
|
||||
flex-flow: column;
|
||||
flex: 1;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
min-width: 230px;
|
||||
min-height: 180px;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.div-block-131:hover {
|
||||
background-color: var(--light-blue);
|
||||
color: var(--_button---hover-red);
|
||||
}
|
||||
|
||||
.text-block-57 {
|
||||
color: var(--_fonts---color--black);
|
||||
font-size: var(--_fonts---font-size--core);
|
||||
word-break: break-all;
|
||||
-webkit-hyphens: auto;
|
||||
hyphens: auto;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.vinleftbar {
|
||||
grid-column-gap: 20px;
|
||||
grid-row-gap: 20px;
|
||||
flex: none;
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
.container-vin {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
min-width: auto;
|
||||
max-width: 1580px;
|
||||
margin-bottom: 60px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-top: 40px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.container-vin.nav {
|
||||
height: auto;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.container-vin.info {
|
||||
width: 100%;
|
||||
padding-top: 30px;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
.container-vin.subscribe {
|
||||
padding-top: 40px;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
.container-vin.footer {
|
||||
background-color: var(--back);
|
||||
padding-top: 50px;
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
|
||||
.knot-img {
|
||||
grid-column-gap: 20px;
|
||||
grid-row-gap: 20px;
|
||||
border-radius: var(--_round---big-20);
|
||||
background-color: var(--white);
|
||||
color: var(--black);
|
||||
flex-flow: column;
|
||||
flex: 1;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
min-width: 320px;
|
||||
min-height: 180px;
|
||||
padding: 40px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.knotinfo {
|
||||
border-radius: var(--_round---big-20);
|
||||
background-color: var(--white);
|
||||
color: var(--red);
|
||||
flex-flow: column;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
max-width: 240px;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.heading-19 {
|
||||
color: var(--_fonts---color--black);
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
line-height: 36px;
|
||||
}
|
||||
|
||||
.partsname {
|
||||
flex: 1;
|
||||
max-width: 240px;
|
||||
max-height: 40px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.oemnuber {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.flex-block-115 {
|
||||
grid-column-gap: 15px;
|
||||
grid-row-gap: 15px;
|
||||
justify-content: space-between;
|
||||
align-self: stretch;
|
||||
align-items: flex-start;
|
||||
margin-left: -20px;
|
||||
margin-right: -20px;
|
||||
padding: 5px 20px;
|
||||
}
|
||||
|
||||
.showallparts {
|
||||
border-radius: var(--_button---round-12px);
|
||||
background-color: var(--_button---light-blue);
|
||||
color: var(--_fonts---color--black);
|
||||
flex: none;
|
||||
justify-content: center;
|
||||
align-self: stretch;
|
||||
align-items: center;
|
||||
padding: 10px 25px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.showallparts:hover {
|
||||
background-color: var(--_button---primary);
|
||||
color: var(--_fonts---color--white);
|
||||
}
|
||||
|
||||
.image-26 {
|
||||
object-fit: contain;
|
||||
flex: 0 auto;
|
||||
align-self: auto;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.knotin {
|
||||
border-radius: var(--_round---big-20);
|
||||
background-color: var(--white);
|
||||
color: var(--red);
|
||||
flex-flow: column;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
max-width: 480px;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.knot-parts {
|
||||
grid-column-gap: 5px;
|
||||
grid-row-gap: 5px;
|
||||
border-radius: var(--_round---big-20);
|
||||
background-color: var(--white);
|
||||
color: var(--black);
|
||||
flex-flow: column;
|
||||
flex: 1;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
min-width: 320px;
|
||||
min-height: 180px;
|
||||
padding: 40px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.nuberlist {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 20px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.knotlistitem {
|
||||
grid-column-gap: 15px;
|
||||
grid-row-gap: 15px;
|
||||
justify-content: space-between;
|
||||
align-self: stretch;
|
||||
align-items: center;
|
||||
margin-left: -20px;
|
||||
margin-right: -20px;
|
||||
padding: 5px 20px;
|
||||
}
|
||||
|
||||
.code-embed-16 {
|
||||
color: var(--_fonts---color--light-blue-grey);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.code-embed-16:hover {
|
||||
color: var(--_button---primary);
|
||||
}
|
||||
|
||||
.flex-block-116 {
|
||||
grid-column-gap: 15px;
|
||||
grid-row-gap: 15px;
|
||||
}
|
||||
|
||||
.flex-block-117 {
|
||||
grid-column-gap: 15px;
|
||||
grid-row-gap: 15px;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.brandsort {
|
||||
grid-column-gap: 20px;
|
||||
grid-row-gap: 20px;
|
||||
flex-flow: wrap;
|
||||
align-self: stretch;
|
||||
height: 148px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.brandsortb {
|
||||
grid-column-gap: 30px;
|
||||
grid-row-gap: 30px;
|
||||
border-radius: var(--_round---big-20);
|
||||
background-color: var(--white);
|
||||
flex-flow: column;
|
||||
flex: 1;
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.flex-block-118 {
|
||||
grid-column-gap: 40px;
|
||||
grid-row-gap: 40px;
|
||||
border-radius: var(--_round---big-20);
|
||||
background-image: url('/images/Group-601.png'), linear-gradient(13deg, #0d336c, #182334);
|
||||
background-position: 100px, 0 0;
|
||||
background-repeat: no-repeat, repeat;
|
||||
background-size: cover, auto;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
.heading-20 {
|
||||
color: var(--_fonts---color--white);
|
||||
font-size: var(--_fonts---h1);
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.text-block-58 {
|
||||
color: var(--_fonts---color--white);
|
||||
font-size: var(--_fonts---font-size--core);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.button-24 {
|
||||
border-radius: var(--_round---normal);
|
||||
background-color: var(--_button---color);
|
||||
color: var(--_fonts---color--black);
|
||||
padding: 14px 30px;
|
||||
}
|
||||
|
||||
.button-24:hover {
|
||||
background-color: var(--_button---primary);
|
||||
color: var(--_fonts---color--white);
|
||||
}
|
||||
|
||||
.flex-block-119 {
|
||||
grid-column-gap: 20px;
|
||||
grid-row-gap: 20px;
|
||||
width: 560px;
|
||||
}
|
||||
|
||||
.bestpriceitem {
|
||||
grid-column-gap: 10px;
|
||||
grid-row-gap: 10px;
|
||||
border-radius: var(--_round---normal);
|
||||
background-color: var(--white);
|
||||
flex: 1;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
min-width: 196px;
|
||||
max-width: 196px;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.bestpriceitem:hover {
|
||||
box-shadow: 0 0 15px #0000004d;
|
||||
}
|
||||
|
||||
.bestpriceitem.end {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pricecartbp {
|
||||
grid-column-gap: 10px;
|
||||
grid-row-gap: 10px;
|
||||
}
|
||||
|
||||
.actualprice {
|
||||
font-size: var(--_fonts---font-size--bigger);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.oldpricebp {
|
||||
color: var(--_fonts---color--light-blue-grey);
|
||||
font-size: var(--_fonts---font-size--supersmall);
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.flex-block-120 {
|
||||
justify-content: flex-start;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.nameitembp {
|
||||
flex: 0 auto;
|
||||
align-self: auto;
|
||||
max-height: 60px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.saletagbp {
|
||||
border-radius: var(--_round---small-8);
|
||||
background-color: var(--green);
|
||||
color: var(--_fonts---color--white);
|
||||
font-size: var(--_fonts---font-size--supersmall);
|
||||
padding: 3px 5px;
|
||||
font-weight: 600;
|
||||
position: relative;
|
||||
top: -30px;
|
||||
}
|
||||
|
||||
.imgitembp {
|
||||
flex-flow: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
max-height: 160px;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.flex-block-121 {
|
||||
grid-column-gap: 20px;
|
||||
grid-row-gap: 20px;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
.flex-block-122 {
|
||||
justify-content: flex-start;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.inbt {
|
||||
grid-column-gap: 20px;
|
||||
grid-row-gap: 20px;
|
||||
flex: 1;
|
||||
max-width: 100%;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.div-block-132 {
|
||||
border-radius: var(--_round---big-20);
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.flex-block-123 {
|
||||
grid-column-gap: 40px;
|
||||
grid-row-gap: 40px;
|
||||
}
|
||||
|
||||
.submit-button-copy {
|
||||
border-radius: var(--_round---normal);
|
||||
background-color: var(--_button---primary);
|
||||
font-size: var(--_fonts---font-size--bigger);
|
||||
padding: 16px 30px;
|
||||
}
|
||||
|
||||
.submit-button-copy.fill {
|
||||
font-size: var(--_fonts---font-size--core);
|
||||
justify-content: center;
|
||||
align-self: stretch;
|
||||
align-items: center;
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.supportheading {
|
||||
color: var(--_fonts---color--white);
|
||||
font-size: var(--_fonts---h1);
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
line-height: 120%;
|
||||
}
|
||||
|
||||
.div-block-133 {
|
||||
box-sizing: content-box;
|
||||
object-fit: contain;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.text-block-54-copy {
|
||||
color: var(--_fonts---color--black);
|
||||
flex: 1;
|
||||
padding-top: 20px;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.ci2 {
|
||||
border-radius: var(--_round---big-20);
|
||||
background-color: var(--white);
|
||||
background-image: url('/images/catalog_item2.png');
|
||||
background-position: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: auto;
|
||||
flex: 1;
|
||||
min-width: 160px;
|
||||
height: 180px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.ci3 {
|
||||
border-radius: var(--_round---big-20);
|
||||
background-color: var(--white);
|
||||
background-image: url('/images/catalog_item3.png');
|
||||
background-position: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: auto;
|
||||
flex: 1;
|
||||
min-width: 160px;
|
||||
height: 180px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.ci4 {
|
||||
border-radius: var(--_round---big-20);
|
||||
background-color: var(--white);
|
||||
background-image: url('/images/catalog_item4.png');
|
||||
background-position: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: auto;
|
||||
flex: 1;
|
||||
min-width: 160px;
|
||||
height: 180px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.ci5 {
|
||||
border-radius: var(--_round---big-20);
|
||||
background-color: var(--white);
|
||||
background-image: url('/images/catalog_item5.png');
|
||||
background-position: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: auto;
|
||||
flex: 1;
|
||||
min-width: 160px;
|
||||
height: 180px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.ci6 {
|
||||
border-radius: var(--_round---big-20);
|
||||
background-color: var(--white);
|
||||
background-image: url('/images/catalog_item6.png');
|
||||
background-position: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: auto;
|
||||
flex: 1;
|
||||
min-width: 160px;
|
||||
height: 180px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.ci7 {
|
||||
border-radius: var(--_round---big-20);
|
||||
background-color: var(--white);
|
||||
background-image: url('/images/catalog_item7.png');
|
||||
background-position: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: auto;
|
||||
flex: 1;
|
||||
min-width: 160px;
|
||||
height: 180px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.ci8 {
|
||||
border-radius: var(--_round---big-20);
|
||||
background-color: var(--white);
|
||||
background-image: url('/images/catalog_item8.png');
|
||||
background-position: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: auto;
|
||||
flex: 1;
|
||||
min-width: 160px;
|
||||
height: 180px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.ci9 {
|
||||
border-radius: var(--_round---big-20);
|
||||
background-color: var(--white);
|
||||
background-image: url('/images/catalog_item9.png');
|
||||
background-position: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: auto;
|
||||
flex: 1;
|
||||
min-width: 160px;
|
||||
height: 180px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.image-5-copy {
|
||||
box-sizing: content-box;
|
||||
object-fit: contain;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.flex-block-124 {
|
||||
grid-column-gap: 30px;
|
||||
grid-row-gap: 30px;
|
||||
border-radius: var(--_round---big-20);
|
||||
background-image: url('/images/carvin.png'), linear-gradient(45deg, #1b283b, #0d336c);
|
||||
background-position: 150px, 0 0;
|
||||
background-repeat: no-repeat, repeat;
|
||||
background-size: auto, auto;
|
||||
justify-content: center;
|
||||
align-self: stretch;
|
||||
align-items: flex-start;
|
||||
width: 440px;
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
.heading-21 {
|
||||
color: var(--_fonts---color--white);
|
||||
flex: 0 auto;
|
||||
align-self: stretch;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
font-size: 24px;
|
||||
line-height: 34px;
|
||||
}
|
||||
|
||||
.button-3-copy {
|
||||
border-radius: var(--_button---round-12px);
|
||||
background-color: var(--_button---primary);
|
||||
flex: none;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 12px 25px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.button-3-copy:hover {
|
||||
background-color: var(--_button---hover-red);
|
||||
}
|
||||
|
||||
.select-copy {
|
||||
border: 1px solid var(--grey);
|
||||
border-radius: var(--_round---supersmall-4);
|
||||
background-color: var(--white);
|
||||
color: var(--_fonts---color--grey);
|
||||
width: 180px;
|
||||
height: 46px;
|
||||
margin-bottom: 0;
|
||||
padding: 12px 24px;
|
||||
}
|
||||
|
||||
.div-block-10-copy {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.image-27 {
|
||||
width: 160px;
|
||||
margin-bottom: -232px;
|
||||
margin-left: 600px;
|
||||
}
|
||||
|
||||
.news-index-block-copy {
|
||||
grid-column-gap: 20px;
|
||||
grid-row-gap: 20px;
|
||||
flex: 1;
|
||||
max-width: 100%;
|
||||
margin-top: 0;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.container-copy {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
min-width: auto;
|
||||
max-width: 1580px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-top: 20px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.container-copy.nav {
|
||||
height: auto;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.container-copy.info {
|
||||
width: 100%;
|
||||
padding-top: 30px;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
.container-copy.subscribe {
|
||||
padding-top: 40px;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
.container-copy.footer {
|
||||
background-color: var(--back);
|
||||
padding-top: 50px;
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
|
||||
.div-block-134 {
|
||||
border: 1px solid var(--_fonts---color--light-blue);
|
||||
color: var(--_fonts---color--black);
|
||||
border-radius: 40px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
display: flex;
|
||||
transform: rotate(0);
|
||||
}
|
||||
|
||||
.div-block-134:hover {
|
||||
background-color: var(--red);
|
||||
color: var(--white);
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
.code-embed-17 {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.div-block-134-copy {
|
||||
border: 1px solid var(--_fonts---color--light-blue);
|
||||
color: var(--_fonts---color--black);
|
||||
border-radius: 40px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
display: flex;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.div-block-134-copy:hover {
|
||||
background-color: var(--red);
|
||||
color: var(--white);
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
.flex-block-125 {
|
||||
grid-column-gap: 10px;
|
||||
grid-row-gap: 10px;
|
||||
}
|
||||
|
||||
.div-block-135 {
|
||||
background-color: var(--light-blue);
|
||||
border-radius: 40px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
.div-block-135:hover {
|
||||
background-color: var(--red);
|
||||
}
|
||||
|
||||
.flex-block-126 {
|
||||
grid-column-gap: 4px;
|
||||
grid-row-gap: 4px;
|
||||
justify-content: flex-start;
|
||||
align-self: stretch;
|
||||
align-items: center;
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
.flex-block-108-copy {
|
||||
grid-column-gap: 18px;
|
||||
grid-row-gap: 18px;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1440px) {
|
||||
.body {
|
||||
--_fonts---font-family: Onest, sans-serif;
|
||||
@ -5434,10 +6587,10 @@ body {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
/*
|
||||
.bottom_head {
|
||||
|
||||
.topmenuh {
|
||||
margin-top: 0;
|
||||
} */
|
||||
}
|
||||
|
||||
.flex-block-4 {
|
||||
grid-column-gap: 40px;
|
||||
@ -5527,7 +6680,7 @@ body {
|
||||
}
|
||||
|
||||
.flex-block-39-copy {
|
||||
width: 150px;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.cart-ditail {
|
||||
@ -5587,8 +6740,6 @@ body {
|
||||
background-color: var(--white);
|
||||
}
|
||||
|
||||
|
||||
|
||||
.button-for-mobile-menu-block {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
@ -5690,9 +6841,13 @@ body {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
/* .bottom_head {
|
||||
.topmenub {
|
||||
margin-top: 0;
|
||||
} */
|
||||
}
|
||||
|
||||
.ci1:hover {
|
||||
background-color: var(--light-blue);
|
||||
}
|
||||
|
||||
.vinleftbar {
|
||||
width: 320px;
|
||||
@ -5711,18 +6866,32 @@ body {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.flex-block-118 {
|
||||
grid-column-gap: 0px;
|
||||
grid-row-gap: 0px;
|
||||
}
|
||||
|
||||
.heading-20 {
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
.flex-block-119 {
|
||||
width: 520px;
|
||||
width: 480px;
|
||||
}
|
||||
|
||||
.bestpriceitem.end {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.flex-block-121 {
|
||||
grid-column-gap: 15px;
|
||||
grid-row-gap: 15px;
|
||||
}
|
||||
|
||||
.ci2:hover, .ci3:hover, .ci4:hover, .ci5:hover, .ci6:hover, .ci7:hover, .ci8:hover, .ci9:hover {
|
||||
background-color: var(--light-blue);
|
||||
}
|
||||
|
||||
.flex-block-124 {
|
||||
width: 540px;
|
||||
}
|
||||
@ -6092,7 +7261,7 @@ body {
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
.top_head, .bottom_head {
|
||||
.top_head, .topmenuh {
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
}
|
||||
@ -6107,6 +7276,7 @@ body {
|
||||
}
|
||||
|
||||
.slider {
|
||||
align-self: stretch;
|
||||
height: auto;
|
||||
display: flex;
|
||||
}
|
||||
@ -6204,6 +7374,8 @@ body {
|
||||
flex-flow: column;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
padding-top: 40px;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
.div-block-12, .div-block-12.small {
|
||||
@ -6888,11 +8060,15 @@ body {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.topnav {
|
||||
margin-left: 0;
|
||||
.code-embed-15 {
|
||||
width: 160px;
|
||||
}
|
||||
|
||||
.bottom_head {
|
||||
.topnav {
|
||||
margin-left: 190px;
|
||||
}
|
||||
|
||||
.topmenub {
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
}
|
||||
@ -6917,6 +8093,10 @@ body {
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
.div-block-128 {
|
||||
background-position: 0%;
|
||||
}
|
||||
|
||||
.catnav {
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
@ -6945,10 +8125,19 @@ body {
|
||||
flex-flow: row;
|
||||
}
|
||||
|
||||
.supportheading {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.image-5-copy {
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.image-27 {
|
||||
margin-bottom: -280px;
|
||||
margin-left: 530px;
|
||||
}
|
||||
|
||||
.container-copy, .container-copy.nav, .container-copy.info {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
@ -7180,6 +8369,10 @@ body {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.flex-block-26 {
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.container2 {
|
||||
padding: 20px 30px;
|
||||
}
|
||||
@ -7339,7 +8532,7 @@ body {
|
||||
}
|
||||
|
||||
.flex-block-39-copy {
|
||||
width: 150px;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.heading-9-copy-copy {
|
||||
@ -7468,43 +8661,31 @@ body {
|
||||
}
|
||||
|
||||
.flex-block-78 {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.flex-block-81 {
|
||||
grid-column-gap: 5px;
|
||||
grid-row-gap: 5px;
|
||||
flex-flow: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.core-product-copy {
|
||||
flex-flow: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.core-product-search-copy {
|
||||
flex-flow: row;
|
||||
align-self: stretch;
|
||||
max-width: 100%;
|
||||
height: 340px;
|
||||
display: flex;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
.raiting-copy, .pcs-copy {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.item-recommend-copy {
|
||||
display: block;
|
||||
.flex-block-80 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.flex-block-83 {
|
||||
flex-flow: column;
|
||||
.flex-block-81 {
|
||||
justify-content: space-between;
|
||||
align-self: stretch;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.flex-block-82 {
|
||||
grid-column-gap: 30px;
|
||||
grid-row-gap: 30px;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.sort-item-brand-copy {
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.flex-block-84 {
|
||||
@ -7518,38 +8699,23 @@ body {
|
||||
.flex-block-85 {
|
||||
grid-column-gap: 5px;
|
||||
grid-row-gap: 5px;
|
||||
border-radius: var(--_round---small-8);
|
||||
border-radius: var(--_round---normal);
|
||||
background-color: var(--white);
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
padding: 8px 12px;
|
||||
padding: 10px 20px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.code-embed-9 {
|
||||
color: var(--_button---primary);
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.image-15 {
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
.code-embed-10 {
|
||||
color: var(--white);
|
||||
width: 12px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.flex-block-86 {
|
||||
grid-column-gap: 5px;
|
||||
grid-row-gap: 5px;
|
||||
border-radius: var(--_round---small-8);
|
||||
background-color: var(--_button---hover-dark_blue);
|
||||
.flex-block-77-copy {
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
.flex-block-18-copy-copy {
|
||||
@ -7558,16 +8724,15 @@ body {
|
||||
flex-flow: column;
|
||||
}
|
||||
|
||||
.link-block-4-copy {
|
||||
flex: 0 auto;
|
||||
}
|
||||
|
||||
.heading-8-copy {
|
||||
color: var(--_fonts---color--light-blue-grey);
|
||||
font-size: var(--_fonts---font-size--small-font-size);
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
align-self: stretch;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dropdown-2 {
|
||||
@ -7575,41 +8740,18 @@ body {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.dropdown-list-2 {
|
||||
background-color: var(--white);
|
||||
box-shadow: 0 2px 5px #0003;
|
||||
}
|
||||
|
||||
.dropdown-list-2.w--open {
|
||||
border-radius: var(--_round---small-8);
|
||||
}
|
||||
|
||||
.heading-9-copy {
|
||||
margin-top: 0;
|
||||
font-size: var(--_fonts---font-size--bigger);
|
||||
}
|
||||
|
||||
.info-block-search-copy {
|
||||
grid-column-gap: 10px;
|
||||
grid-row-gap: 10px;
|
||||
flex-flow: column;
|
||||
justify-content: space-between;
|
||||
align-self: stretch;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.heading-9-copy-copy {
|
||||
font-size: var(--_fonts---font-size--small-font-size);
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.section-2 {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mobile-block {
|
||||
flex: 0 auto;
|
||||
width: auto;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.flex-block-87 {
|
||||
@ -7619,23 +8761,24 @@ body {
|
||||
}
|
||||
|
||||
.mobile-menu-bottom {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
box-shadow: 0 0 5px #0003;
|
||||
}
|
||||
|
||||
.mobile-menu-bottom.nav, .mobile-menu-bottom.info {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
.mobile-menu-bottom.info {
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.mobile-menu-bottom.subscribe, .mobile-menu-bottom.footer {
|
||||
padding: 40px 15px;
|
||||
.mobile-menu-buttom-section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.name-mobile-menu-item {
|
||||
display: block;
|
||||
color: var(--black);
|
||||
font-size: var(--_fonts---font-size--small-font-size);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.button-for-mobile-menu-block {
|
||||
@ -7651,13 +8794,26 @@ body {
|
||||
background-color: var(--_button---light-blue);
|
||||
}
|
||||
|
||||
.section-3 {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
.icon_favorite {
|
||||
color: var(--_button---light-blue-grey);
|
||||
}
|
||||
|
||||
.nav-menu-3 {
|
||||
display: none;
|
||||
.block-for-moble-menu-icon {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.div-block-25 {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.info-satus {
|
||||
background-color: var(--green);
|
||||
color: var(--_fonts---color--white);
|
||||
font-size: 10px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.flex-block-93 {
|
||||
@ -7666,15 +8822,13 @@ body {
|
||||
}
|
||||
|
||||
.sort-list-card {
|
||||
grid-column-gap: 0px;
|
||||
grid-row-gap: 0px;
|
||||
padding-left: 18px;
|
||||
padding-right: 18px;
|
||||
padding-right: 30px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.flex-block-49-copy {
|
||||
grid-column-gap: 28px;
|
||||
grid-row-gap: 28px;
|
||||
grid-column-gap: 30px;
|
||||
grid-row-gap: 30px;
|
||||
}
|
||||
|
||||
.price-in-cart-s1 {
|
||||
@ -7871,6 +9025,18 @@ body {
|
||||
padding-bottom: 90px;
|
||||
}
|
||||
|
||||
.div-block-129 {
|
||||
justify-content: flex-start;
|
||||
align-self: stretch;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.flex-block-108 {
|
||||
flex-flow: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.container-vin {
|
||||
padding-top: 20px;
|
||||
}
|
||||
@ -7884,7 +9050,24 @@ body {
|
||||
padding-bottom: 90px;
|
||||
}
|
||||
|
||||
.inbt, .news-index-block-copy {
|
||||
.inbt {
|
||||
grid-column-gap: 20px;
|
||||
grid-row-gap: 20px;
|
||||
}
|
||||
|
||||
.flex-block-123 {
|
||||
flex-flow: column;
|
||||
}
|
||||
|
||||
.flex-block-124 {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.image-27 {
|
||||
margin-left: 330px;
|
||||
}
|
||||
|
||||
.news-index-block-copy {
|
||||
grid-column-gap: 20px;
|
||||
grid-row-gap: 20px;
|
||||
}
|
||||
@ -7901,10 +9084,6 @@ body {
|
||||
.container-copy.footer {
|
||||
padding-bottom: 90px;
|
||||
}
|
||||
|
||||
.mobile-menu-buttom-section {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 479px) {
|
||||
@ -7974,7 +9153,7 @@ body {
|
||||
grid-row-gap: 15px;
|
||||
}
|
||||
|
||||
.top_head, .bottom_head {
|
||||
.top_head, .topmenuh {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
@ -8248,7 +9427,7 @@ body {
|
||||
}
|
||||
|
||||
.heading_news {
|
||||
line-height: 28px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.text-block-20 {
|
||||
@ -8780,6 +9959,10 @@ body {
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.icon-setting {
|
||||
border: 0 #000;
|
||||
}
|
||||
|
||||
.section-3 {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
@ -9145,17 +10328,22 @@ body {
|
||||
}
|
||||
|
||||
.favcardcat {
|
||||
border-style: none;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.code-embed-15 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.topnav {
|
||||
margin-left: 0;
|
||||
top: 58px;
|
||||
}
|
||||
|
||||
.bottom_head {
|
||||
.topmenub {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
@ -9218,6 +10406,17 @@ body {
|
||||
padding: 40px 0 90px;
|
||||
}
|
||||
|
||||
.div-block-129 {
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.flex-block-109 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.saletag {
|
||||
padding-top: 3px;
|
||||
padding-bottom: 3px;
|
||||
@ -9225,6 +10424,15 @@ body {
|
||||
top: -15px;
|
||||
}
|
||||
|
||||
.flex-block-110 {
|
||||
grid-column-gap: 10px;
|
||||
grid-row-gap: 10px;
|
||||
flex-flow: column-reverse;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.catnav {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
@ -9351,16 +10559,17 @@ body {
|
||||
}
|
||||
|
||||
.submit-button-copy {
|
||||
align-self: stretch;
|
||||
padding: 15px 30px;
|
||||
align-self: auto;
|
||||
padding: 15px 25px;
|
||||
}
|
||||
|
||||
.supportheading {
|
||||
font-size: var(--_fonts---font-size--heading-2);
|
||||
width: 220px;
|
||||
}
|
||||
|
||||
.image-5-copy {
|
||||
width: 100%;
|
||||
width: 60%;
|
||||
height: 100%;
|
||||
min-height: auto;
|
||||
}
|
||||
@ -9369,6 +10578,10 @@ body {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.image-27 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.container-copy {
|
||||
max-width: 100%;
|
||||
margin-left: 0;
|
||||
@ -9399,20 +10612,10 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
#w-node-bc394713-4b8e-44e3-8ddf-3edc1c31a743-3b3232bc {
|
||||
#w-node-_5428604d-3026-96c9-8306-ab3c3dd9acb7-3b3232bc {
|
||||
justify-self: stretch;
|
||||
}
|
||||
|
||||
#w-node-_8908a890-8c8f-e12c-999f-08d5da3bcc01-3b3232bc {
|
||||
grid-area: Area;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1920px) {
|
||||
#w-node-_8908a890-8c8f-e12c-999f-08d5da3bcc01-3b3232bc {
|
||||
grid-area: Area;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 991px) {
|
||||
#w-node-_2eb32dc9-d3cb-cbbb-db81-4205d4e11f12-659ca3b9 {
|
||||
grid-area: span 1 / span 3 / span 1 / span 3;
|
||||
@ -9423,818 +10626,6 @@ body {
|
||||
#w-node-_35f55517-cbe0-9ee3-13bb-a3ed00029bba-00029ba8, #w-node-_35f55517-cbe0-9ee3-13bb-a3ed00029bc7-00029ba8 {
|
||||
justify-self: stretch;
|
||||
}
|
||||
.button-for-mobile-menu-block {
|
||||
grid-column-gap: 0px;
|
||||
grid-row-gap: 0px;
|
||||
width: 60px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.flex-block-113 {
|
||||
border-radius: var(--_round---big-20);
|
||||
background-color: var(--white);
|
||||
flex: 0 auto;
|
||||
align-self: stretch;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.button-3 {
|
||||
border-radius: var(--_button---round-12px);
|
||||
background-color: var(--_button---primary);
|
||||
flex: none;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 10px 15px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.button-3:hover {
|
||||
background-color: var(--_button---hover-red);
|
||||
}
|
||||
|
||||
.button-23 {
|
||||
border-radius: var(--_button---round-12px);
|
||||
background-color: var(--_button---light-blue);
|
||||
color: var(--_fonts---color--black);
|
||||
flex: none;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 10px 25px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.button-23:hover {
|
||||
background-color: var(--_button---primary);
|
||||
color: var(--_fonts---color--white);
|
||||
}
|
||||
|
||||
.flex-block-114 {
|
||||
grid-column-gap: 10px;
|
||||
grid-row-gap: 10px;
|
||||
align-self: stretch;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.dropdown-4 {
|
||||
flex-flow: column;
|
||||
justify-content: space-between;
|
||||
align-self: stretch;
|
||||
align-items: center;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.dropdown-toggle-3, .dropdown-toggle-card {
|
||||
border-top-right-radius: var(--_round---normal);
|
||||
border-bottom-right-radius: var(--_round---normal);
|
||||
border-left: 2px solid #0000;
|
||||
flex: 1;
|
||||
align-self: stretch;
|
||||
margin-bottom: 5px;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
padding: 6px 15px;
|
||||
}
|
||||
|
||||
.dropdown-toggle-3:hover {
|
||||
border-left: 2px solid var(--red);
|
||||
}
|
||||
|
||||
.dropdown-toggle-3:active {
|
||||
background-color: var(--background);
|
||||
}
|
||||
|
||||
.dropdown-list-4 {
|
||||
background-color: #0000;
|
||||
flex: 1;
|
||||
align-self: stretch;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 10px;
|
||||
padding-left: 25px;
|
||||
display: none;
|
||||
position: static;
|
||||
top: 40px;
|
||||
}
|
||||
|
||||
.dropdown-link-3 {
|
||||
color: var(--_fonts---color--black);
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
.dropdown-link-3:hover {
|
||||
color: var(--red);
|
||||
}
|
||||
|
||||
.text-block-56 {
|
||||
color: var(--_fonts---color--black);
|
||||
}
|
||||
|
||||
.div-block-131 {
|
||||
border-radius: var(--_round---big-20);
|
||||
background-color: var(--white);
|
||||
color: var(--red);
|
||||
flex-flow: column;
|
||||
flex: 1;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
min-width: 230px;
|
||||
min-height: 180px;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.div-block-131:hover {
|
||||
background-color: var(--light-blue);
|
||||
color: var(--_button---hover-red);
|
||||
}
|
||||
|
||||
.text-block-57 {
|
||||
color: var(--_fonts---color--black);
|
||||
font-size: var(--_fonts---font-size--core);
|
||||
word-break: break-all;
|
||||
-webkit-hyphens: auto;
|
||||
hyphens: auto;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.vinleftbar {
|
||||
grid-column-gap: 20px;
|
||||
grid-row-gap: 20px;
|
||||
flex: none;
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
.container-vin {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
min-width: auto;
|
||||
max-width: 1580px;
|
||||
margin-bottom: 60px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-top: 40px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.container-vin.nav {
|
||||
height: auto;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.container-vin.info {
|
||||
width: 100%;
|
||||
padding-top: 30px;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
.container-vin.subscribe {
|
||||
padding-top: 40px;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
.container-vin.footer {
|
||||
background-color: var(--back);
|
||||
padding-top: 50px;
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
|
||||
.knot-img {
|
||||
grid-column-gap: 20px;
|
||||
grid-row-gap: 20px;
|
||||
border-radius: var(--_round---big-20);
|
||||
background-color: var(--white);
|
||||
color: var(--black);
|
||||
flex-flow: column;
|
||||
flex: 1;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
min-width: 320px;
|
||||
min-height: 180px;
|
||||
padding: 40px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.knotinfo {
|
||||
border-radius: var(--_round---big-20);
|
||||
background-color: var(--white);
|
||||
color: var(--red);
|
||||
flex-flow: column;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
max-width: 240px;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.heading-19 {
|
||||
color: var(--_fonts---color--black);
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
line-height: 36px;
|
||||
}
|
||||
|
||||
.partsname {
|
||||
flex: 1;
|
||||
max-width: 240px;
|
||||
max-height: 40px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.oemnuber {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.flex-block-115 {
|
||||
grid-column-gap: 15px;
|
||||
grid-row-gap: 15px;
|
||||
justify-content: space-between;
|
||||
align-self: stretch;
|
||||
align-items: flex-start;
|
||||
margin-left: -20px;
|
||||
margin-right: -20px;
|
||||
padding: 5px 20px;
|
||||
}
|
||||
|
||||
.showallparts {
|
||||
border-radius: var(--_button---round-12px);
|
||||
background-color: var(--_button---light-blue);
|
||||
color: var(--_fonts---color--black);
|
||||
flex: none;
|
||||
justify-content: center;
|
||||
align-self: stretch;
|
||||
align-items: center;
|
||||
padding: 10px 25px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.showallparts:hover {
|
||||
background-color: var(--_button---primary);
|
||||
color: var(--_fonts---color--white);
|
||||
}
|
||||
|
||||
.image-26 {
|
||||
object-fit: contain;
|
||||
flex: 0 auto;
|
||||
align-self: auto;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.knotin {
|
||||
border-radius: var(--_round---big-20);
|
||||
background-color: var(--white);
|
||||
color: var(--red);
|
||||
flex-flow: column;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
max-width: 480px;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.knot-parts {
|
||||
grid-column-gap: 5px;
|
||||
grid-row-gap: 5px;
|
||||
border-radius: var(--_round---big-20);
|
||||
background-color: var(--white);
|
||||
color: var(--black);
|
||||
flex-flow: column;
|
||||
flex: 1;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
min-width: 320px;
|
||||
min-height: 180px;
|
||||
padding: 40px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.nuberlist {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 20px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.knotlistitem {
|
||||
grid-column-gap: 15px;
|
||||
grid-row-gap: 15px;
|
||||
justify-content: space-between;
|
||||
align-self: stretch;
|
||||
align-items: center;
|
||||
margin-left: -20px;
|
||||
margin-right: -20px;
|
||||
padding: 5px 20px;
|
||||
}
|
||||
|
||||
.code-embed-16 {
|
||||
color: var(--_fonts---color--light-blue-grey);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.code-embed-16:hover {
|
||||
color: var(--_button---primary);
|
||||
}
|
||||
|
||||
.flex-block-116 {
|
||||
grid-column-gap: 15px;
|
||||
grid-row-gap: 15px;
|
||||
}
|
||||
|
||||
.flex-block-117 {
|
||||
grid-column-gap: 15px;
|
||||
grid-row-gap: 15px;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.brandsort {
|
||||
grid-column-gap: 20px;
|
||||
grid-row-gap: 20px;
|
||||
flex-flow: wrap;
|
||||
align-self: stretch;
|
||||
height: 148px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.brandsortb {
|
||||
grid-column-gap: 30px;
|
||||
grid-row-gap: 30px;
|
||||
border-radius: var(--_round---big-20);
|
||||
background-color: var(--white);
|
||||
flex-flow: column;
|
||||
flex: 1;
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.flex-block-118 {
|
||||
grid-column-gap: 40px;
|
||||
grid-row-gap: 40px;
|
||||
border-radius: var(--_round---big-20);
|
||||
background-image: url('/images/Group-601.png'), linear-gradient(13deg, #0d336c, #182334);
|
||||
background-position: 100px, 0 0;
|
||||
background-repeat: no-repeat, repeat;
|
||||
background-size: cover, auto;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
.heading-20 {
|
||||
color: var(--_fonts---color--white);
|
||||
font-size: var(--_fonts---h1);
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.text-block-58 {
|
||||
color: var(--_fonts---color--white);
|
||||
font-size: var(--_fonts---font-size--core);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.button-24 {
|
||||
border-radius: var(--_round---normal);
|
||||
background-color: var(--_button---color);
|
||||
color: var(--_fonts---color--black);
|
||||
padding: 14px 30px;
|
||||
}
|
||||
|
||||
.button-24:hover {
|
||||
background-color: var(--_button---primary);
|
||||
color: var(--_fonts---color--white);
|
||||
}
|
||||
|
||||
.flex-block-119 {
|
||||
grid-column-gap: 20px;
|
||||
grid-row-gap: 20px;
|
||||
width: 560px;
|
||||
}
|
||||
|
||||
.bestpriceitem {
|
||||
grid-column-gap: 10px;
|
||||
grid-row-gap: 10px;
|
||||
border-radius: var(--_round---normal);
|
||||
background-color: var(--white);
|
||||
flex: 1;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
min-width: 196px;
|
||||
max-width: 196px;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.bestpriceitem:hover {
|
||||
box-shadow: 0 0 15px #0000004d;
|
||||
}
|
||||
|
||||
.bestpriceitem.end {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pricecartbp {
|
||||
grid-column-gap: 10px;
|
||||
grid-row-gap: 10px;
|
||||
}
|
||||
|
||||
.actualprice {
|
||||
font-size: var(--_fonts---font-size--bigger);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.oldpricebp {
|
||||
color: var(--_fonts---color--light-blue-grey);
|
||||
font-size: var(--_fonts---font-size--supersmall);
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.flex-block-120 {
|
||||
justify-content: flex-start;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.nameitembp {
|
||||
flex: 0 auto;
|
||||
align-self: auto;
|
||||
max-height: 60px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.saletagbp {
|
||||
border-radius: var(--_round---small-8);
|
||||
background-color: var(--green);
|
||||
color: var(--_fonts---color--white);
|
||||
font-size: var(--_fonts---font-size--supersmall);
|
||||
padding: 3px 5px;
|
||||
font-weight: 600;
|
||||
position: relative;
|
||||
top: -30px;
|
||||
}
|
||||
|
||||
.imgitembp {
|
||||
flex-flow: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
max-height: 160px;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.flex-block-121 {
|
||||
grid-column-gap: 20px;
|
||||
grid-row-gap: 20px;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
.flex-block-122 {
|
||||
justify-content: flex-start;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.inbt {
|
||||
grid-column-gap: 20px;
|
||||
grid-row-gap: 20px;
|
||||
flex: 1;
|
||||
max-width: 100%;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.div-block-132 {
|
||||
border-radius: var(--_round---big-20);
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.flex-block-123 {
|
||||
grid-column-gap: 40px;
|
||||
grid-row-gap: 40px;
|
||||
}
|
||||
|
||||
.submit-button-copy {
|
||||
border-radius: var(--_round---normal);
|
||||
background-color: var(--_button---primary);
|
||||
font-size: var(--_fonts---font-size--bigger);
|
||||
padding: 16px 30px;
|
||||
}
|
||||
|
||||
.submit-button-copy.fill {
|
||||
font-size: var(--_fonts---font-size--core);
|
||||
justify-content: center;
|
||||
align-self: stretch;
|
||||
align-items: center;
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.supportheading {
|
||||
color: var(--_fonts---color--white);
|
||||
font-size: var(--_fonts---h1);
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
line-height: 120%;
|
||||
}
|
||||
|
||||
.div-block-133 {
|
||||
box-sizing: content-box;
|
||||
object-fit: contain;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.text-block-54-copy {
|
||||
color: var(--_fonts---color--black);
|
||||
flex: 1;
|
||||
padding-top: 20px;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.ci2 {
|
||||
border-radius: var(--_round---big-20);
|
||||
background-color: var(--white);
|
||||
background-image: url('/images/catalog_item2.png');
|
||||
background-position: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: auto;
|
||||
flex: 1;
|
||||
min-width: 160px;
|
||||
height: 180px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.ci3 {
|
||||
border-radius: var(--_round---big-20);
|
||||
background-color: var(--white);
|
||||
background-image: url('/images/catalog_item3.png');
|
||||
background-position: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: auto;
|
||||
flex: 1;
|
||||
min-width: 160px;
|
||||
height: 180px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.ci4 {
|
||||
border-radius: var(--_round---big-20);
|
||||
background-color: var(--white);
|
||||
background-image: url('/images/catalog_item4.png');
|
||||
background-position: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: auto;
|
||||
flex: 1;
|
||||
min-width: 160px;
|
||||
height: 180px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.ci5 {
|
||||
border-radius: var(--_round---big-20);
|
||||
background-color: var(--white);
|
||||
background-image: url('/images/catalog_item5.png');
|
||||
background-position: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: auto;
|
||||
flex: 1;
|
||||
min-width: 160px;
|
||||
height: 180px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.ci6 {
|
||||
border-radius: var(--_round---big-20);
|
||||
background-color: var(--white);
|
||||
background-image: url('/images/catalog_item6.png');
|
||||
background-position: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: auto;
|
||||
flex: 1;
|
||||
min-width: 160px;
|
||||
height: 180px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.ci7 {
|
||||
border-radius: var(--_round---big-20);
|
||||
background-color: var(--white);
|
||||
background-image: url('/images/catalog_item7.png');
|
||||
background-position: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: auto;
|
||||
flex: 1;
|
||||
min-width: 160px;
|
||||
height: 180px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.ci8 {
|
||||
border-radius: var(--_round---big-20);
|
||||
background-color: var(--white);
|
||||
background-image: url('/images/catalog_item8.png');
|
||||
background-position: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: auto;
|
||||
flex: 1;
|
||||
min-width: 160px;
|
||||
height: 180px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.ci9 {
|
||||
border-radius: var(--_round---big-20);
|
||||
background-color: var(--white);
|
||||
background-image: url('/images/catalog_item9.png');
|
||||
background-position: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: auto;
|
||||
flex: 1;
|
||||
min-width: 160px;
|
||||
height: 180px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.image-5-copy {
|
||||
box-sizing: content-box;
|
||||
object-fit: contain;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.flex-block-124 {
|
||||
grid-column-gap: 30px;
|
||||
grid-row-gap: 30px;
|
||||
border-radius: var(--_round---big-20);
|
||||
/* background-image: url('/images/carvin.png'), linear-gradient(45deg, #1b283b, #0d336c);
|
||||
background-position: 150px, 0 0; */
|
||||
background-repeat: no-repeat, repeat;
|
||||
background-size: auto, auto;
|
||||
justify-content: center;
|
||||
align-self: stretch;
|
||||
align-items: flex-start;
|
||||
width: 440px;
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
.heading-21 {
|
||||
color: var(--_fonts---color--white);
|
||||
flex: 0 auto;
|
||||
align-self: stretch;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
font-size: 24px;
|
||||
line-height: 34px;
|
||||
}
|
||||
|
||||
.button-3-copy {
|
||||
border-radius: var(--_button---round-12px);
|
||||
background-color: var(--_button---primary);
|
||||
flex: none;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 12px 25px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.button-3-copy:hover {
|
||||
background-color: var(--_button---hover-red);
|
||||
}
|
||||
|
||||
.select-copy {
|
||||
border: 1px solid var(--grey);
|
||||
border-radius: var(--_round---supersmall-4);
|
||||
background-color: var(--white);
|
||||
color: var(--_fonts---color--grey);
|
||||
width: 180px;
|
||||
height: 46px;
|
||||
margin-bottom: 0;
|
||||
padding: 12px 24px;
|
||||
}
|
||||
|
||||
.div-block-10-copy {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.image-27 {
|
||||
width: 160px;
|
||||
margin-bottom: -232px;
|
||||
margin-left: 600px;
|
||||
}
|
||||
|
||||
.news-index-block-copy {
|
||||
grid-column-gap: 20px;
|
||||
grid-row-gap: 20px;
|
||||
flex: 1;
|
||||
max-width: 100%;
|
||||
margin-top: 0;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.container-copy {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
min-width: auto;
|
||||
max-width: 1580px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-top: 20px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.container-copy.nav {
|
||||
height: auto;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.container-copy.info {
|
||||
width: 100%;
|
||||
padding-top: 30px;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
.container-copy.subscribe {
|
||||
padding-top: 40px;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
.container-copy.footer {
|
||||
background-color: var(--back);
|
||||
padding-top: 50px;
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
|
||||
.div-block-134 {
|
||||
border: 1px solid var(--_fonts---color--light-blue);
|
||||
color: var(--_fonts---color--black);
|
||||
border-radius: 40px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
display: flex;
|
||||
transform: rotate(0);
|
||||
}
|
||||
|
||||
.div-block-134:hover {
|
||||
background-color: var(--red);
|
||||
color: var(--white);
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
.code-embed-17 {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.div-block-134-copy {
|
||||
border: 1px solid var(--_fonts---color--light-blue);
|
||||
color: var(--_fonts---color--black);
|
||||
border-radius: 40px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
display: flex;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.div-block-134-copy:hover {
|
||||
background-color: var(--red);
|
||||
color: var(--white);
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
.flex-block-125 {
|
||||
grid-column-gap: 10px;
|
||||
grid-row-gap: 10px;
|
||||
}
|
||||
|
||||
.div-block-135 {
|
||||
background-color: var(--light-blue);
|
||||
border-radius: 40px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
.div-block-135:hover {
|
||||
background-color: var(--red);
|
||||
}
|
||||
|
||||
.flex-block-126 {
|
||||
grid-column-gap: 4px;
|
||||
grid-row-gap: 4px;
|
||||
justify-content: flex-start;
|
||||
align-self: stretch;
|
||||
align-items: center;
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user