исправил отображение картинок в карточках товара
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%);
|
||||
}
|
||||
|
||||
.card img,
|
||||
.categoryImg,
|
||||
.img {
|
||||
position: relative;
|
||||
@@ -57,6 +56,33 @@
|
||||
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 {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
@@ -66,6 +92,12 @@
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.productCard .cardContent {
|
||||
min-height: 86px;
|
||||
padding: 16px 18px 18px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.name,
|
||||
.categoryName {
|
||||
position: relative;
|
||||
@@ -290,13 +322,22 @@ button:disabled {
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.card img,
|
||||
.categoryImg,
|
||||
.img {
|
||||
height: 128px;
|
||||
max-width: 150px;
|
||||
}
|
||||
|
||||
.productCard {
|
||||
min-height: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.productCard .cardContent {
|
||||
min-height: 76px;
|
||||
padding: 14px 16px 16px;
|
||||
}
|
||||
|
||||
.name,
|
||||
.categoryName {
|
||||
font-size: 14px;
|
||||
|
||||
@@ -18,11 +18,12 @@ const ProductCard: React.FC<Props> = ({ product }) => {
|
||||
|
||||
return (
|
||||
<div
|
||||
className={styles.card}
|
||||
className={`${styles.card} ${styles.productCard}`}
|
||||
onClick={() => onSelect(product.id)}
|
||||
>
|
||||
|
||||
<img src={product.images[0]} alt={product.name} />
|
||||
<div className={styles.productImageFrame}>
|
||||
<img className={styles.productImage} src={product.images[0]} alt={product.name} />
|
||||
</div>
|
||||
<div className={styles.cardContent}>
|
||||
<p className={styles.name}>{product.name}</p>
|
||||
<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