исправил отображение картинок в карточках товара
This commit is contained in:
1 parent
6b12d6a0cc
commit
c6abc64239
2 files changed
+48
-6
No files matched your search
@@ -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;
|
||||||
|
|||||||
@@ -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;
|
||||||
Reference in new issue
Block a user