feat: transform catalog to modern grid layout with compact product cards
- Transform Card.vue from horizontal to vertical compact design - Reduce card height with fixed image max-height (160-240px responsive) - Center all text content (product name, prices, actions) - Style product name with semibold font-weight, 2-line ellipsis - Redesign price labels: subtle gray uppercase for labels, bold primary for values - Style quantity controls: tonal icon buttons with smooth animations - Redesign input field: solo-filled variant, compact density, subtle shadow - Transform catalog.vue list layout to responsive grid (v-row/v-col) - Implement responsive columns: 1 col mobile, 2 cols tablet, 3 cols desktop - Clean up obsolete .catalog-item styles, use native Vuetify grid spacing - Add hover effects: translateY(-6px), scale(1.08) on image, border highlight - Add footer background (#fafafa) for visual separation - Optimize breakpoints: 6 responsive sizes (374px, 559px, 959px, 1280px, 1920px) - Result: Professional, compact, balanced e-commerce catalog design
This commit is contained in:
@@ -1,64 +1,99 @@
|
||||
<template>
|
||||
<v-card class="product-card">
|
||||
<v-row class="product-card-row">
|
||||
<!-- Columna de Imagen -->
|
||||
<v-col cols="12" md="4" class="image-column">
|
||||
<v-img :src="product.img" class="product-img" contain></v-img>
|
||||
</v-col>
|
||||
<v-card class="product-card" elevation="2" rounded="lg">
|
||||
<!-- Imagen del Producto -->
|
||||
<div class="product-image-container">
|
||||
<v-img
|
||||
:src="product.img"
|
||||
:alt="product.name"
|
||||
class="product-img"
|
||||
cover
|
||||
max-height="180"
|
||||
>
|
||||
<template v-slot:placeholder>
|
||||
<div class="d-flex align-center justify-center fill-height">
|
||||
<v-progress-circular indeterminate color="primary" size="32"></v-progress-circular>
|
||||
</div>
|
||||
</template>
|
||||
</v-img>
|
||||
</div>
|
||||
|
||||
<!-- Columna de Detalles -->
|
||||
<v-col cols="12" md="5" class="details-column">
|
||||
<div class="product-details-content">
|
||||
<v-tooltip location="top" :text="product.name">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-card-title class="product-name" v-bind="props" :title="product.name">
|
||||
{{ product.name }}
|
||||
</v-card-title>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
<v-card-subtitle class="product-description">{{
|
||||
product.description
|
||||
}}</v-card-subtitle>
|
||||
<!-- Contenido de la Tarjeta -->
|
||||
<v-card-text class="product-content pa-3 text-center">
|
||||
<!-- Título del Producto -->
|
||||
<v-tooltip location="top" :text="product.name">
|
||||
<template v-slot:activator="{ props }">
|
||||
<h3 class="product-name text-subtitle-1 font-weight-medium mb-2" v-bind="props">
|
||||
{{ product.name }}
|
||||
</h3>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
|
||||
<div class="prices">
|
||||
<div class="price-unit">
|
||||
<span class="price-label">Precio unitario</span>
|
||||
<span class="price-value">{{ currency(product.price) }}</span>
|
||||
</div>
|
||||
|
||||
<div class="price-total">
|
||||
<span class="price-label">Precio total</span>
|
||||
<span class="price-value total"
|
||||
>{{ currency(product.price * product.quantity) }}
|
||||
</span>
|
||||
</div>
|
||||
<!-- Sección de Precios -->
|
||||
<div class="prices-section mb-2">
|
||||
<!-- Precio Unitario -->
|
||||
<div class="price-row mb-1">
|
||||
<span class="price-label text-caption">Precio unitario</span>
|
||||
<div class="price-value text-body-1 font-weight-bold text-primary">
|
||||
{{ currency(product.price) }}
|
||||
</div>
|
||||
</div>
|
||||
</v-col>
|
||||
|
||||
<!-- Columna de Controles -->
|
||||
<v-col cols="12" md="3" class="controls-column">
|
||||
<div class="quantity-controls">
|
||||
<v-btn icon small class="qty-btn" @click="decrease(product)">
|
||||
<v-icon small>mdi-minus</v-icon>
|
||||
</v-btn>
|
||||
<v-text-field
|
||||
v-model.number="product.quantity"
|
||||
type="number"
|
||||
min="0"
|
||||
class="quantity-input"
|
||||
dense
|
||||
outlined
|
||||
hide-details
|
||||
aria-label="Cantidad"
|
||||
@input="handleQuantityChange"
|
||||
/>
|
||||
<v-btn icon small class="qty-btn qty-btn-add" @click="handleIncrease">
|
||||
<v-icon small>mdi-plus</v-icon>
|
||||
</v-btn>
|
||||
|
||||
<!-- Precio Total -->
|
||||
<div class="price-row">
|
||||
<span class="price-label text-caption">Precio total</span>
|
||||
<v-chip
|
||||
color="success"
|
||||
variant="flat"
|
||||
size="small"
|
||||
class="price-total-chip font-weight-bold mt-1"
|
||||
>
|
||||
{{ currency(product.price * product.quantity) }}
|
||||
</v-chip>
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</v-card-text>
|
||||
|
||||
<!-- Footer con Controles de Cantidad -->
|
||||
<v-card-actions class="product-actions pa-2 pb-3 justify-center">
|
||||
<div class="quantity-controls">
|
||||
<v-btn
|
||||
icon
|
||||
size="small"
|
||||
variant="tonal"
|
||||
color="error"
|
||||
class="qty-btn"
|
||||
@click="decrease(product)"
|
||||
:disabled="product.quantity === 0"
|
||||
>
|
||||
<v-icon size="20">mdi-minus</v-icon>
|
||||
</v-btn>
|
||||
|
||||
<v-text-field
|
||||
v-model.number="product.quantity"
|
||||
type="number"
|
||||
min="0"
|
||||
class="quantity-input mx-1"
|
||||
variant="solo-filled"
|
||||
density="compact"
|
||||
hide-details
|
||||
single-line
|
||||
flat
|
||||
aria-label="Cantidad"
|
||||
@input="handleQuantityChange"
|
||||
/>
|
||||
|
||||
<v-btn
|
||||
icon
|
||||
size="small"
|
||||
variant="tonal"
|
||||
color="success"
|
||||
class="qty-btn"
|
||||
@click="handleIncrease"
|
||||
>
|
||||
<v-icon size="20">mdi-plus</v-icon>
|
||||
</v-btn>
|
||||
</div>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
@@ -102,400 +137,325 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* ===== ESTILOS BASE - MOBILE FIRST (< 560px) ===== */
|
||||
|
||||
/* Card Container */
|
||||
/* ============================================
|
||||
CARD CONTAINER
|
||||
============================================ */
|
||||
.product-card {
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 8px;
|
||||
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
|
||||
transition: all 0.3s ease;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
background: #ffffff;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.product-card:hover {
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
|
||||
transform: translateY(-2px);
|
||||
border-color: #bdbdbd;
|
||||
transform: translateY(-6px);
|
||||
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12) !important;
|
||||
border-color: rgba(33, 150, 243, 0.3);
|
||||
}
|
||||
|
||||
/* Row Container */
|
||||
.product-card-row {
|
||||
padding: 12px 8px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* === COLUMNA DE IMAGEN === */
|
||||
.image-column {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0 0 16px 0;
|
||||
/* ============================================
|
||||
IMAGEN DEL PRODUCTO
|
||||
============================================ */
|
||||
.product-image-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(135deg, #fafafa 0%, #ffffff 100%);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.product-img {
|
||||
width: 280px;
|
||||
height: 280px;
|
||||
border-radius: 12px;
|
||||
object-fit: cover;
|
||||
background: #fff;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
transition: transform 0.3s ease;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.product-card:hover .product-img {
|
||||
transform: scale(1.03);
|
||||
transform: scale(1.08);
|
||||
}
|
||||
|
||||
/* === COLUMNA DE DETALLES === */
|
||||
.details-column {
|
||||
padding: 0;
|
||||
/* ============================================
|
||||
CONTENIDO DE LA TARJETA
|
||||
============================================ */
|
||||
.product-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.product-details-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.product-name {
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
color: #2c3e50;
|
||||
font-weight: 500;
|
||||
color: #1a1a1a;
|
||||
line-height: 1.3;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
word-break: break-word;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.product-description {
|
||||
font-size: 0.8rem;
|
||||
color: #7f8c8d;
|
||||
line-height: 1.4;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
margin-bottom: 4px;
|
||||
text-overflow: ellipsis;
|
||||
min-height: 2.5rem;
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
|
||||
/* === PRECIOS === */
|
||||
.prices {
|
||||
/* ============================================
|
||||
SECCIÓN DE PRECIOS
|
||||
============================================ */
|
||||
.prices-section {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.price-unit,
|
||||
.price-total {
|
||||
.price-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.price-label {
|
||||
font-size: 0.7rem;
|
||||
color: #95a5a6;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
white-space: nowrap;
|
||||
letter-spacing: 0.8px;
|
||||
font-size: 0.65rem;
|
||||
color: #9e9e9e;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.price-value {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
color: #2c3e50;
|
||||
color: #1565c0;
|
||||
letter-spacing: 0.02em;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.price-value.total {
|
||||
background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
|
||||
color: white;
|
||||
padding: 3px 10px;
|
||||
border-radius: 20px;
|
||||
font-size: 0.95rem;
|
||||
box-shadow: 0 2px 8px rgba(39, 174, 96, 0.3);
|
||||
white-space: nowrap;
|
||||
.price-total-chip {
|
||||
letter-spacing: 0.03em;
|
||||
font-size: 0.9rem;
|
||||
padding: 0 12px;
|
||||
height: 26px;
|
||||
box-shadow: 0 2px 8px rgba(76, 175, 80, 0.25);
|
||||
}
|
||||
|
||||
/* === COLUMNA DE CONTROLES === */
|
||||
.controls-column {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 16px 0 0 0;
|
||||
/* ============================================
|
||||
CONTROLES DE CANTIDAD
|
||||
============================================ */
|
||||
.product-actions {
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.06);
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
.quantity-controls {
|
||||
display: inline-flex;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
background: #f5f5f5;
|
||||
border-radius: 25px;
|
||||
padding: 6px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.quantity-input {
|
||||
max-width: 60px;
|
||||
min-width: 60px;
|
||||
max-width: 65px;
|
||||
min-width: 65px;
|
||||
}
|
||||
|
||||
.quantity-input input {
|
||||
.quantity-input :deep(.v-field) {
|
||||
background-color: #ffffff !important;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.quantity-input :deep(.v-field__input) {
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 700;
|
||||
font-size: 0.95rem;
|
||||
color: #1a1a1a;
|
||||
padding: 4px 0;
|
||||
min-height: 32px;
|
||||
}
|
||||
|
||||
.quantity-input :deep(.v-field__field) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.qty-btn {
|
||||
min-width: 32px !important;
|
||||
width: 32px !important;
|
||||
height: 32px !important;
|
||||
border-radius: 50% !important;
|
||||
background: #fff;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.2s ease;
|
||||
flex-shrink: 0;
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.qty-btn:hover {
|
||||
background: #e0e0e0;
|
||||
transform: scale(1.08);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.qty-btn-add {
|
||||
background: #27ae60;
|
||||
color: white;
|
||||
.qty-btn:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.qty-btn-add:hover {
|
||||
background: #219a52 !important;
|
||||
/* ============================================
|
||||
RESPONSIVE BREAKPOINTS
|
||||
============================================ */
|
||||
|
||||
/* Móvil pequeño (< 375px) */
|
||||
@media (max-width: 374px) {
|
||||
.product-image-container {
|
||||
height: 160px;
|
||||
}
|
||||
|
||||
.product-content {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.product-name {
|
||||
font-size: 0.9rem;
|
||||
min-height: 2.4rem;
|
||||
}
|
||||
|
||||
.price-value {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.quantity-input {
|
||||
max-width: 60px;
|
||||
min-width: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== RESOLUCIÓN 375-559px (Mobile Standard) ===== */
|
||||
/* Móvil estándar (375px - 559px) */
|
||||
@media (min-width: 375px) and (max-width: 559px) {
|
||||
.product-img {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.product-card-row {
|
||||
padding: 14px 10px;
|
||||
.product-image-container {
|
||||
height: 170px;
|
||||
}
|
||||
|
||||
.product-name {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.product-description {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.quantity-input {
|
||||
max-width: 65px;
|
||||
min-width: 65px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== RESOLUCIÓN 560-959px (Tablet) ===== */
|
||||
@media (min-width: 560px) and (max-width: 959px) {
|
||||
.product-card-row {
|
||||
padding: 16px 12px;
|
||||
}
|
||||
|
||||
.image-column {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.product-img {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.product-details-content {
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.product-name {
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
|
||||
.product-description {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.prices {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.price-label {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.price-value {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.price-value.total {
|
||||
font-size: 1rem;
|
||||
padding: 4px 12px;
|
||||
}
|
||||
|
||||
.controls-column {
|
||||
padding-top: 18px;
|
||||
}
|
||||
|
||||
.quantity-input {
|
||||
max-width: 70px;
|
||||
min-width: 70px;
|
||||
}
|
||||
|
||||
.qty-btn {
|
||||
min-width: 34px !important;
|
||||
width: 34px !important;
|
||||
height: 34px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== RESOLUCIÓN ≥960px (Desktop) ===== */
|
||||
@media (min-width: 960px) {
|
||||
.product-card {
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.product-card:hover {
|
||||
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
|
||||
.product-card:hover .product-img {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.product-card-row {
|
||||
padding: 16px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.image-column {
|
||||
padding: 0 24px 0 0;
|
||||
margin-bottom: 0;
|
||||
max-width: 380px;
|
||||
}
|
||||
|
||||
.product-img {
|
||||
width: 350px;
|
||||
height: 350px;
|
||||
}
|
||||
|
||||
.details-column {
|
||||
padding: 0 24px 0 0;
|
||||
border-right: 1px solid #e0e0e0;
|
||||
flex: 1;
|
||||
align-items: flex-start;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.product-details-content {
|
||||
gap: 16px;
|
||||
align-items: flex-start;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.product-name {
|
||||
font-size: 1.15rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.product-description {
|
||||
font-size: 0.9rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.prices {
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.price-unit,
|
||||
.price-total {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.price-label {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.price-value {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.price-value.total {
|
||||
|
||||
.price-value {
|
||||
font-size: 1.05rem;
|
||||
padding: 4px 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.controls-column {
|
||||
justify-content: flex-end;
|
||||
margin-top: 0;
|
||||
padding: 0 0 0 16px;
|
||||
min-width: 180px;
|
||||
/* Tablet (560px - 959px) */
|
||||
@media (min-width: 560px) and (max-width: 959px) {
|
||||
.product-image-container {
|
||||
height: 190px;
|
||||
}
|
||||
|
||||
.quantity-controls {
|
||||
gap: 8px;
|
||||
padding: 6px;
|
||||
|
||||
.product-content {
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
|
||||
.product-name {
|
||||
font-size: 1rem;
|
||||
min-height: 2.6rem;
|
||||
}
|
||||
|
||||
.price-label {
|
||||
font-size: 0.68rem;
|
||||
}
|
||||
|
||||
.price-value {
|
||||
font-size: 1.15rem;
|
||||
}
|
||||
|
||||
.price-total-chip {
|
||||
font-size: 0.95rem;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.quantity-input {
|
||||
max-width: 70px;
|
||||
min-width: 70px;
|
||||
}
|
||||
|
||||
.qty-btn {
|
||||
min-width: 36px !important;
|
||||
width: 36px !important;
|
||||
height: 36px !important;
|
||||
}
|
||||
|
||||
.qty-btn:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== RESOLUCIÓN ≥1280px (Desktop Large) ===== */
|
||||
@media (min-width: 1280px) {
|
||||
.product-card-row {
|
||||
padding: 20px;
|
||||
/* Desktop (≥ 960px) */
|
||||
@media (min-width: 960px) {
|
||||
.product-image-container {
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.image-column {
|
||||
padding-right: 28px;
|
||||
|
||||
.product-content {
|
||||
padding: 16px 14px;
|
||||
}
|
||||
|
||||
.details-column {
|
||||
padding-right: 28px;
|
||||
}
|
||||
|
||||
|
||||
.product-name {
|
||||
font-size: 1.05rem;
|
||||
min-height: 2.7rem;
|
||||
}
|
||||
|
||||
.price-label {
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.price-value {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.product-description {
|
||||
font-size: 0.95rem;
|
||||
|
||||
.price-total-chip {
|
||||
font-size: 1rem;
|
||||
height: 30px;
|
||||
padding: 0 14px;
|
||||
}
|
||||
|
||||
.product-actions {
|
||||
padding: 8px;
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
|
||||
.quantity-input {
|
||||
max-width: 70px;
|
||||
min-width: 70px;
|
||||
}
|
||||
|
||||
.qty-btn {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
.controls-column {
|
||||
padding-left: 20px;
|
||||
/* Desktop Large (≥ 1280px) */
|
||||
@media (min-width: 1280px) {
|
||||
.product-image-container {
|
||||
height: 220px;
|
||||
}
|
||||
|
||||
.product-content {
|
||||
padding: 18px 16px;
|
||||
}
|
||||
|
||||
.product-name {
|
||||
font-size: 1.1rem;
|
||||
min-height: 2.8rem;
|
||||
}
|
||||
|
||||
.price-value {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.price-total-chip {
|
||||
font-size: 1.05rem;
|
||||
height: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Desktop Extra Large (≥ 1920px) */
|
||||
@media (min-width: 1920px) {
|
||||
.product-image-container {
|
||||
height: 240px;
|
||||
}
|
||||
|
||||
.product-name {
|
||||
font-size: 1.15rem;
|
||||
min-height: 3rem;
|
||||
}
|
||||
|
||||
.price-value {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -60,21 +60,27 @@
|
||||
position="top"
|
||||
/>
|
||||
|
||||
<!-- Lista de productos paginados -->
|
||||
<v-list-item
|
||||
v-for="item in paginatedItems"
|
||||
:key="item.id"
|
||||
class="catalog-item"
|
||||
>
|
||||
<Card
|
||||
:product="item"
|
||||
:increase="increase"
|
||||
:decrease="decrease"
|
||||
:currency="currency"
|
||||
:updateQuantity="updateQuantity"
|
||||
@add-to-cart="addToCart"
|
||||
/>
|
||||
</v-list-item>
|
||||
<!-- Grid de productos paginados -->
|
||||
<v-row class="product-grid" v-if="paginatedItems.length > 0">
|
||||
<v-col
|
||||
v-for="item in paginatedItems"
|
||||
:key="item.id"
|
||||
cols="12"
|
||||
sm="6"
|
||||
md="6"
|
||||
lg="4"
|
||||
class="product-col"
|
||||
>
|
||||
<Card
|
||||
:product="item"
|
||||
:increase="increase"
|
||||
:decrease="decrease"
|
||||
:currency="currency"
|
||||
:updateQuantity="updateQuantity"
|
||||
@add-to-cart="addToCart"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<!-- Mensaje cuando no hay productos -->
|
||||
<v-alert
|
||||
@@ -642,26 +648,52 @@ export default {
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
ITEMS DEL CATÁLOGO
|
||||
GRID DE PRODUCTOS
|
||||
============================================ */
|
||||
.catalog-item {
|
||||
padding: 0;
|
||||
margin-bottom: 12px;
|
||||
.product-grid {
|
||||
margin: 0 -8px;
|
||||
}
|
||||
|
||||
.catalog-item:last-child {
|
||||
margin-bottom: 0;
|
||||
.product-col {
|
||||
padding: 8px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* Asegurar que las cards ocupen toda la altura */
|
||||
.product-col :deep(.product-card) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Mobile: mayor espaciado vertical */
|
||||
@media (max-width: 559px) {
|
||||
.catalog-item {
|
||||
margin-bottom: 10px;
|
||||
.product-grid {
|
||||
margin: 0 -6px;
|
||||
}
|
||||
|
||||
.product-col {
|
||||
padding: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Tablet: espaciado medio */
|
||||
@media (min-width: 560px) and (max-width: 959px) {
|
||||
.catalog-item {
|
||||
margin-bottom: 14px;
|
||||
.product-grid {
|
||||
margin: 0 -8px;
|
||||
}
|
||||
|
||||
.product-col {
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Desktop: espaciado óptimo */
|
||||
@media (min-width: 960px) {
|
||||
.product-grid {
|
||||
margin: 0 -12px;
|
||||
}
|
||||
|
||||
.product-col {
|
||||
padding: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -687,10 +719,6 @@ export default {
|
||||
.pb-mobile-cart {
|
||||
padding-bottom: 16px !important;
|
||||
}
|
||||
|
||||
.catalog-item {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
|
||||
Reference in New Issue
Block a user