исправил отображение картинок в карточках товара

This commit is contained in:
Joe_Peach committed 2026-07-15 18:38:44 +03:00
1 parent 6b12d6a0cc
commit c6abc64239
2 files changed
+48 -6

No files matched your search

+43 -2
View File
@@ -44,7 +44,6 @@
background: linear-gradient(135deg, rgba(247, 251, 255, 0.9), transparent 42%); background: linear-gradient(135deg, rgba(247, 251, 255, 0.9), transparent 42%);
} }
.card img,
.categoryImg, .categoryImg,
.img { .img {
position: relative; position: relative;
@@ -57,6 +56,33 @@
object-fit: contain; object-fit: contain;
} }
.productCard {
min-height: 0;
padding: 0;
justify-content: flex-start;
}
.productImageFrame {
position: relative;
z-index: 1;
width: 100%;
overflow: hidden;
aspect-ratio: 1 / 1;
background: #f5f7fa;
}
.productImage {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.28s ease;
}
.productCard:hover .productImage {
transform: scale(1.04);
}
.cardContent { .cardContent {
position: relative; position: relative;
z-index: 1; z-index: 1;
@@ -66,6 +92,12 @@
justify-content: space-between; justify-content: space-between;
} }
.productCard .cardContent {
min-height: 86px;
padding: 16px 18px 18px;
align-items: center;
}
.name, .name,
.categoryName { .categoryName {
position: relative; position: relative;
@@ -290,13 +322,22 @@ button:disabled {
padding: 18px; padding: 18px;
} }
.card img,
.categoryImg, .categoryImg,
.img { .img {
height: 128px; height: 128px;
max-width: 150px; max-width: 150px;
} }
.productCard {
min-height: 0;
padding: 0;
}
.productCard .cardContent {
min-height: 76px;
padding: 14px 16px 16px;
}
.name, .name,
.categoryName { .categoryName {
font-size: 14px; font-size: 14px;
+5 -4
View File
@@ -18,11 +18,12 @@ const ProductCard: React.FC<Props> = ({ product }) => {
return ( return (
<div <div
className={styles.card} className={`${styles.card} ${styles.productCard}`}
onClick={() => onSelect(product.id)} onClick={() => onSelect(product.id)}
> >
<div className={styles.productImageFrame}>
<img src={product.images[0]} alt={product.name} /> <img className={styles.productImage} src={product.images[0]} alt={product.name} />
</div>
<div className={styles.cardContent}> <div className={styles.cardContent}>
<p className={styles.name}>{product.name}</p> <p className={styles.name}>{product.name}</p>
<button className={styles.plus}>+</button> <button className={styles.plus}>+</button>
@@ -31,4 +32,4 @@ const ProductCard: React.FC<Props> = ({ product }) => {
); );
}; };
export default ProductCard; export default ProductCard;