Compare commits
6 Commits
da45c4c1f7
...
cb79ad6d45
| Author | SHA1 | Date | |
|---|---|---|---|
| cb79ad6d45 | |||
| 38c1d8c17c | |||
| 398a4cf79d | |||
| 6970867f7b | |||
| 196a5e2068 | |||
| 619590adcc |
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<v-app-bar color="primary" prominent>
|
||||
<v-app-bar color="primary" prominent app>
|
||||
<v-app-bar-nav-icon variant="text" @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
|
||||
<v-toolbar-title>Menu</v-toolbar-title>
|
||||
<v-spacer></v-spacer>
|
||||
|
||||
@@ -1,64 +1,107 @@
|
||||
<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="300"
|
||||
aspect-ratio="1"
|
||||
>
|
||||
<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">
|
||||
<!-- 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 }">
|
||||
<v-card-title class="product-name" v-bind="props" :title="product.name">
|
||||
<h3
|
||||
class="product-name text-subtitle-1 font-weight-medium mb-2"
|
||||
v-bind="props"
|
||||
>
|
||||
{{ product.name }}
|
||||
</v-card-title>
|
||||
</h3>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
<v-card-subtitle class="product-description">{{
|
||||
product.description
|
||||
}}</v-card-subtitle>
|
||||
|
||||
<div class="prices">
|
||||
<div class="price-unit">
|
||||
<span class="price-label">Precio unitario</span>
|
||||
<span class="price-value">{{ currency(product.price) }}</span>
|
||||
<!-- 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>
|
||||
|
||||
<div class="price-total">
|
||||
<span class="price-label">Precio total</span>
|
||||
<span class="price-value total"
|
||||
>{{ currency(product.price * product.quantity) }}
|
||||
</span>
|
||||
<!-- 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>
|
||||
</div>
|
||||
</div>
|
||||
</v-col>
|
||||
</v-card-text>
|
||||
|
||||
<!-- Columna de Controles -->
|
||||
<v-col cols="12" md="3" class="controls-column">
|
||||
<!-- Footer con Controles de Cantidad -->
|
||||
<v-card-actions class="product-actions pa-2 pb-3 justify-center">
|
||||
<div class="quantity-controls">
|
||||
<v-btn icon small class="qty-btn" @click="decrease(product)">
|
||||
<v-icon small>mdi-minus</v-icon>
|
||||
<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"
|
||||
dense
|
||||
outlined
|
||||
class="quantity-input mx-1"
|
||||
variant="solo-filled"
|
||||
density="compact"
|
||||
hide-details
|
||||
single-line
|
||||
flat
|
||||
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
|
||||
icon
|
||||
size="small"
|
||||
variant="tonal"
|
||||
color="success"
|
||||
class="qty-btn"
|
||||
@click="handleIncrease"
|
||||
>
|
||||
<v-icon size="20">mdi-plus</v-icon>
|
||||
</v-btn>
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
@@ -102,400 +145,454 @@ 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: 100%;
|
||||
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;
|
||||
}
|
||||
|
||||
.quantity-input input {
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.qty-btn:hover {
|
||||
background: #e0e0e0;
|
||||
transform: scale(1.08);
|
||||
}
|
||||
|
||||
.qty-btn-add {
|
||||
background: #27ae60;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.qty-btn-add:hover {
|
||||
background: #219a52 !important;
|
||||
}
|
||||
|
||||
/* ===== RESOLUCIÓN 375-559px (Mobile Standard) ===== */
|
||||
@media (min-width: 375px) and (max-width: 559px) {
|
||||
.product-img {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.product-card-row {
|
||||
padding: 14px 10px;
|
||||
}
|
||||
|
||||
.product-name {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.product-description {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.quantity-input {
|
||||
max-width: 65px;
|
||||
min-width: 65px;
|
||||
}
|
||||
|
||||
.quantity-input :deep(.v-field) {
|
||||
background-color: #ffffff !important;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
/* ===== 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 {
|
||||
.quantity-input :deep(.v-field__input) {
|
||||
text-align: center;
|
||||
font-weight: 700;
|
||||
font-size: 0.95rem;
|
||||
color: #1a1a1a;
|
||||
padding: 4px 0;
|
||||
min-height: 32px;
|
||||
}
|
||||
|
||||
.price-value.total {
|
||||
font-size: 1.05rem;
|
||||
padding: 4px 12px;
|
||||
}
|
||||
|
||||
.controls-column {
|
||||
justify-content: flex-end;
|
||||
margin-top: 0;
|
||||
padding: 0 0 0 16px;
|
||||
min-width: 180px;
|
||||
}
|
||||
|
||||
.quantity-controls {
|
||||
gap: 8px;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.quantity-input {
|
||||
max-width: 70px;
|
||||
min-width: 70px;
|
||||
.quantity-input :deep(.v-field__field) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.qty-btn {
|
||||
min-width: 36px !important;
|
||||
width: 36px !important;
|
||||
height: 36px !important;
|
||||
flex-shrink: 0;
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.qty-btn:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.qty-btn:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
/* ===== RESOLUCIÓN ≥1280px (Desktop Large) ===== */
|
||||
@media (min-width: 1280px) {
|
||||
.product-card-row {
|
||||
padding: 20px;
|
||||
}
|
||||
/* ============================================
|
||||
RESPONSIVE BREAKPOINTS
|
||||
============================================ */
|
||||
|
||||
.image-column {
|
||||
padding-right: 28px;
|
||||
}
|
||||
|
||||
.details-column {
|
||||
padding-right: 28px;
|
||||
/* Móvil pequeño (< 375px) */
|
||||
@media (max-width: 374px) {
|
||||
.product-content {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.product-name {
|
||||
font-size: 1.2rem;
|
||||
font-size: 0.9rem;
|
||||
min-height: 2.4rem;
|
||||
}
|
||||
|
||||
.product-description {
|
||||
.price-value {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.quantity-input {
|
||||
max-width: 60px;
|
||||
min-width: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Móvil estándar (375px - 559px) */
|
||||
@media (min-width: 375px) and (max-width: 559px) {
|
||||
.product-name {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.controls-column {
|
||||
padding-left: 20px;
|
||||
.price-value {
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Tablet (560px - 959px) */
|
||||
@media (min-width: 560px) and (max-width: 959px) {
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
/* Desktop (≥ 960px) */
|
||||
@media (min-width: 960px) {
|
||||
.product-content {
|
||||
padding: 16px 14px;
|
||||
}
|
||||
|
||||
.product-name {
|
||||
font-size: 1.05rem;
|
||||
min-height: 2.7rem;
|
||||
}
|
||||
|
||||
.price-label {
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.price-value {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
/* Desktop Large (≥ 1280px) */
|
||||
@media (min-width: 1280px) {
|
||||
.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-name {
|
||||
font-size: 1.15rem;
|
||||
min-height: 3rem;
|
||||
}
|
||||
|
||||
.price-value {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.product-content {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.product-name {
|
||||
font-size: 0.8rem;
|
||||
min-height: 1.9rem;
|
||||
}
|
||||
|
||||
.price-value {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.quantity-input {
|
||||
max-width: 50px;
|
||||
min-width: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Móvil estándar (375px - 559px) */
|
||||
@media (min-width: 375px) and (max-width: 559px) {
|
||||
.product-image-container {
|
||||
height: 140px;
|
||||
}
|
||||
|
||||
.product-name {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.price-value {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Tablet (560px - 959px) */
|
||||
@media (min-width: 560px) and (max-width: 959px) {
|
||||
.product-image-container {
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.product-content {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.product-name {
|
||||
font-size: 0.9rem;
|
||||
min-height: 2.1rem;
|
||||
}
|
||||
|
||||
.price-label {
|
||||
font-size: 0.62rem;
|
||||
}
|
||||
|
||||
.price-value {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.price-total-chip {
|
||||
font-size: 0.8rem;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.quantity-input {
|
||||
max-width: 58px;
|
||||
min-width: 58px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Desktop (≥ 960px) */
|
||||
@media (min-width: 960px) {
|
||||
.product-image-container {
|
||||
height: 160px;
|
||||
}
|
||||
|
||||
.product-content {
|
||||
padding: 12px 10px;
|
||||
}
|
||||
|
||||
.product-name {
|
||||
font-size: 0.95rem;
|
||||
min-height: 2.2rem;
|
||||
}
|
||||
|
||||
.price-label {
|
||||
font-size: 0.63rem;
|
||||
}
|
||||
|
||||
.price-value {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.price-total-chip {
|
||||
font-size: 0.85rem;
|
||||
height: 25px;
|
||||
padding: 0 11px;
|
||||
}
|
||||
|
||||
.product-actions {
|
||||
padding: 6px;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.quantity-input {
|
||||
max-width: 58px;
|
||||
min-width: 58px;
|
||||
}
|
||||
|
||||
.qty-btn {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Desktop Large (≥ 1280px) */
|
||||
@media (min-width: 1280px) {
|
||||
.product-image-container {
|
||||
height: 170px;
|
||||
}
|
||||
|
||||
.product-content {
|
||||
padding: 14px 12px;
|
||||
}
|
||||
|
||||
.product-name {
|
||||
font-size: 2rem;
|
||||
min-height: 2.4rem;
|
||||
}
|
||||
|
||||
.price-value {
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
|
||||
.price-total-chip {
|
||||
font-size: 0.9rem;
|
||||
height: 26px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Desktop Extra Large (≥ 1920px) */
|
||||
@media (min-width: 1920px) {
|
||||
.product-image-container {
|
||||
height: 180px;
|
||||
}
|
||||
|
||||
.product-name {
|
||||
font-size: 1.05rem;
|
||||
min-height: 2.5rem;
|
||||
}
|
||||
|
||||
.price-value {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
<v-card-title
|
||||
class="d-flex align-center cart-title"
|
||||
:class="{ 'cart-header-mobile': isMobile, 'cart-header-desktop': !isMobile }"
|
||||
>
|
||||
@click="isMobile && $emit('toggle-collapse')">
|
||||
<!-- Icono del carrito - SIEMPRE VISIBLE -->
|
||||
<v-icon class="mr-2">mdi-cart</v-icon>
|
||||
|
||||
|
||||
@@ -8,16 +8,30 @@
|
||||
></div>
|
||||
|
||||
<v-row>
|
||||
<v-col cols="12" md="9" lg="7" :class="{ 'pb-mobile-cart': isMobile }">
|
||||
<v-sheet class="page-header d-flex align-center pa-3 pa-sm-4 pa-md-6 mb-3 mb-sm-4 rounded-lg">
|
||||
<v-icon size="28" color="white" class="mr-2 d-sm-none">mdi-store</v-icon>
|
||||
<v-icon size="36" color="white" class="mr-3 d-none d-sm-inline">mdi-store</v-icon>
|
||||
<div class="d-flex flex-column flex-sm-row align-start align-sm-center w-100 ga-2 ga-sm-4">
|
||||
<div class="flex-shrink-0">
|
||||
<h1 class="text-h6 text-sm-h5 text-md-h4 font-weight-bold text-white mb-0">Catálogo</h1>
|
||||
<p class="text-body-2 text-white text-medium-emphasis mb-0">Explora y agrega productos a tu compra</p>
|
||||
<v-col cols="12" md="10" lg="9" :class="{ 'pb-mobile-cart': isMobile }">
|
||||
<v-sheet
|
||||
class="page-header d-flex align-center pa-3 pa-sm-4 pa-md-6 mb-3 mb-sm-4 rounded-lg"
|
||||
>
|
||||
<v-icon size="28" color="primary" class="mr-2 d-sm-none flex-shrink-0"
|
||||
>mdi-store</v-icon
|
||||
>
|
||||
<v-icon size="36" color="primary" class="mr-3 d-none d-sm-inline flex-shrink-0"
|
||||
>mdi-store</v-icon
|
||||
>
|
||||
<div
|
||||
class="d-flex flex-column flex-sm-row align-start align-sm-center w-100 ga-2 ga-sm-4"
|
||||
>
|
||||
<div class="flex-shrink-0 d-none d-sm-block">
|
||||
<h1
|
||||
class="text-h6 text-sm-h5 text-md-h4 font-weight-bold text-primary mb-0"
|
||||
>
|
||||
Catálogo
|
||||
</h1>
|
||||
<p class="text-body-2 text-medium-emphasis mb-0">
|
||||
Explora y agrega productos a tu compra
|
||||
</p>
|
||||
</div>
|
||||
<v-spacer></v-spacer>
|
||||
<v-spacer class="d-none d-sm-flex"></v-spacer>
|
||||
<v-text-field
|
||||
v-model="searchQuery"
|
||||
prepend-inner-icon="mdi-magnify"
|
||||
@@ -27,7 +41,7 @@
|
||||
clearable
|
||||
hide-details
|
||||
single-line
|
||||
class="search-field"
|
||||
class="search-field flex-grow-1 flex-sm-grow-0"
|
||||
/>
|
||||
</div>
|
||||
</v-sheet>
|
||||
@@ -46,11 +60,16 @@
|
||||
position="top"
|
||||
/>
|
||||
|
||||
<!-- Lista de productos paginados -->
|
||||
<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"
|
||||
class="catalog-item"
|
||||
cols="12"
|
||||
sm="6"
|
||||
md="6"
|
||||
lg="4"
|
||||
class="product-col"
|
||||
>
|
||||
<Card
|
||||
:product="item"
|
||||
@@ -60,7 +79,8 @@
|
||||
:updateQuantity="updateQuantity"
|
||||
@add-to-cart="addToCart"
|
||||
/>
|
||||
</v-list-item>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<!-- Mensaje cuando no hay productos -->
|
||||
<v-alert
|
||||
@@ -95,10 +115,10 @@
|
||||
/>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" md="3" lg="5">
|
||||
<v-col cols="12" md="2" lg="3">
|
||||
<div
|
||||
class="cart-sidebar"
|
||||
:class="{ collapsed: cartCollapsed && isMobile }"
|
||||
:class="{ 'cart-is-collapsed': cartCollapsed && isMobile }"
|
||||
>
|
||||
<Cart
|
||||
:cart-items="cartItems"
|
||||
@@ -357,7 +377,7 @@ export default {
|
||||
quantity: 0,
|
||||
img:
|
||||
product.img ||
|
||||
`https://picsum.photos/300/200?random=${product.id}`,
|
||||
`https://picsum.photos/600/600?random=${product.id}`,
|
||||
}));
|
||||
})
|
||||
.catch((error) => {
|
||||
@@ -509,19 +529,25 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* ============================================
|
||||
CABECERA STICKY CON BÚSQUEDA
|
||||
============================================ */
|
||||
.page-header {
|
||||
position: sticky;
|
||||
top: 80px;
|
||||
z-index: 10;
|
||||
background: linear-gradient(135deg, #1565C0 0%, #0D47A1 100%) !important;
|
||||
color: white !important;
|
||||
z-index: 5;
|
||||
background: white !important;
|
||||
color: #1565c0 !important;
|
||||
overflow: visible;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
|
||||
}
|
||||
|
||||
/* Mobile: Header sticky compensating for NavBar height, z-index menor que el cart */
|
||||
@media (max-width: 959px) {
|
||||
.page-header {
|
||||
top: 0;
|
||||
top: 64px;
|
||||
border-radius: 0 !important;
|
||||
z-index: 900;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -531,22 +557,35 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.page-header .search-field {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
/* Estilos profundos para el campo de búsqueda de Vuetify */
|
||||
.page-header :deep(.v-field) {
|
||||
background-color: #f5f5f5 !important;
|
||||
border-radius: 8px;
|
||||
transition: background 0.2s;
|
||||
width: 100%;
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.page-header .search-field:hover,
|
||||
.page-header .search-field:focus-within {
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
.page-header :deep(.v-field:hover),
|
||||
.page-header :deep(.v-field--focused) {
|
||||
background-color: #e0e0e0 !important;
|
||||
}
|
||||
|
||||
.page-header :deep(.v-field__input) {
|
||||
color: #1565c0 !important;
|
||||
}
|
||||
|
||||
.page-header :deep(.v-field__input::placeholder) {
|
||||
color: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
|
||||
@media (max-width: 559px) {
|
||||
.page-header .search-field :deep(.v-field__input) {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.page-header .search-field {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 560px) {
|
||||
@@ -563,13 +602,114 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
CARRITO FLOTANTE (MOBILE FIRST)
|
||||
============================================ */
|
||||
.cart-sidebar {
|
||||
--footer-height: 40px;
|
||||
position: fixed;
|
||||
bottom: var(--footer-height);
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
|
||||
border-radius: 16px 16px 0 0;
|
||||
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
/* Cuando está colapsado en mobile, solo muestra el header (60px) */
|
||||
.cart-sidebar.cart-is-collapsed {
|
||||
transform: translateY(calc(100% - 60px));
|
||||
}
|
||||
|
||||
.cart-backdrop {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 999;
|
||||
animation: fadeIn 0.2s ease-out;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Espacio inferior para evitar que productos queden ocultos bajo el cart */
|
||||
.pb-mobile-cart {
|
||||
padding-bottom: 100px !important;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
GRID DE PRODUCTOS
|
||||
============================================ */
|
||||
.product-grid {
|
||||
margin: 0 -8px;
|
||||
}
|
||||
|
||||
.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) {
|
||||
.product-grid {
|
||||
margin: 0 -6px;
|
||||
}
|
||||
|
||||
.product-col {
|
||||
padding: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Tablet: espaciado medio */
|
||||
@media (min-width: 560px) and (max-width: 959px) {
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
DISEÑO DESKTOP (>= 960px)
|
||||
============================================ */
|
||||
@media (min-width: 960px) {
|
||||
.cart-sidebar {
|
||||
position: sticky;
|
||||
top: 80px;
|
||||
z-index: auto;
|
||||
max-height: calc(100vh - 100px);
|
||||
overflow-y: visible;
|
||||
top: 96px;
|
||||
z-index: 1;
|
||||
max-height: calc(100vh - 120px);
|
||||
overflow-y: auto;
|
||||
box-shadow: none;
|
||||
border-radius: 12px;
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
.cart-backdrop {
|
||||
@@ -579,24 +719,11 @@ export default {
|
||||
.pb-mobile-cart {
|
||||
padding-bottom: 16px !important;
|
||||
}
|
||||
|
||||
.catalog-item {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 559px) {
|
||||
.catalog-item {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 560px) and (max-width: 959px) {
|
||||
.catalog-item {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
MODALES
|
||||
============================================ */
|
||||
.product-list-scroll {
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
|
||||
Reference in New Issue
Block a user