wip produtoras/id page

This commit is contained in:
María
2025-09-09 16:28:25 +02:00
parent d7c0a76c7b
commit dab9fd1fe6
12 changed files with 203 additions and 265 deletions

View File

@@ -1,16 +1,4 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 23 28" enable-background="new 0 0 23 28" xml:space="preserve">
<g>
<g>
<path fill="#374493" d="M19.146,4.192c-2.035-2.057-4.746-3.19-7.634-3.19h-0.012C5.684,0.882,0.582,6.036,0.702,11.887
c0.152,4.131,4.101,9.377,7.176,13.408C8.781,26.38,10.097,27,11.511,27c1.463,0,2.822-0.664,3.727-1.82
c2.281-2.853,7.207-9.715,7.059-13.293C22.297,8.978,21.178,6.245,19.146,4.192L19.146,4.192z M13.653,23.923
c-1.043,1.384-3.237,1.387-4.28,0.002c-4.17-5.343-6.653-9.794-6.653-12.039c0-4.882,3.938-8.853,8.779-8.853h0.012
c4.834,0,8.767,3.972,8.767,8.853C20.279,14.156,17.864,18.543,13.653,23.923L13.653,23.923z M11.556,16.184
c-2.365,0-4.289-1.936-4.289-4.316c0.236-5.726,8.343-5.724,8.577,0C15.845,14.248,13.921,16.184,11.556,16.184z M11.556,9.583
c-1.252,0-2.27,1.025-2.27,2.285c0.125,3.031,4.417,3.03,4.541,0C13.827,10.608,12.808,9.583,11.556,9.583z"/>
</g>
</g>
<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20.5 10C20.5 14.993 14.961 20.193 13.101 21.799C12.9277 21.9293 12.7168 21.9998 12.5 21.9998C12.2832 21.9998 12.0723 21.9293 11.899 21.799C10.039 20.193 4.5 14.993 4.5 10C4.5 7.87827 5.34285 5.84344 6.84315 4.34315C8.34344 2.84285 10.3783 2 12.5 2C14.6217 2 16.6566 2.84285 18.1569 4.34315C19.6571 5.84344 20.5 7.87827 20.5 10Z" stroke="#143E8C" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12.5 13C14.1569 13 15.5 11.6569 15.5 10C15.5 8.34315 14.1569 7 12.5 7C10.8431 7 9.5 8.34315 9.5 10C9.5 11.6569 10.8431 13 12.5 13Z" stroke="#143E8C" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 716 B

View File

@@ -1,11 +1,3 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 26 20" enable-background="new 0 0 26 20" xml:space="preserve">
<g>
<path fill="#374493" d="M22.413,0.824H3.587c-1.505,0-2.73,1.173-2.73,2.614v13.123c0,1.442,1.225,2.614,2.73,2.614h18.827
c1.505,0,2.73-1.173,2.73-2.614V3.439C25.144,1.997,23.919,0.824,22.413,0.824z M21.828,2.91L13,10.385L4.172,2.91H21.828z
M23.059,16.561c0,0.287-0.296,0.529-0.646,0.529H3.587c-0.35,0-0.646-0.242-0.646-0.529V4.743l8.844,7.466
c0.139,0.118,0.316,0.182,0.496,0.182h1.439c0.18,0,0.356-0.065,0.495-0.182l8.845-7.466V16.561z"/>
</g>
<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M22.5 7L13.53 12.7C13.2213 12.8934 12.8643 12.996 12.5 12.996C12.1357 12.996 11.7787 12.8934 11.47 12.7L2.5 7M4.5 4H20.5C21.6046 4 22.5 4.89543 22.5 6V18C22.5 19.1046 21.6046 20 20.5 20H4.5C3.39543 20 2.5 19.1046 2.5 18V6C2.5 4.89543 3.39543 4 4.5 4Z" stroke="#143E8C" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Before

Width:  |  Height:  |  Size: 800 B

After

Width:  |  Height:  |  Size: 430 B

View File

@@ -1,16 +1,3 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 20 31" enable-background="new 0 0 20 31" xml:space="preserve">
<g>
<g>
<path fill="#374493" d="M17.223,1H2.777C1.793,1,0.998,1.797,0.998,2.782v25.436C0.998,29.201,1.793,30,2.777,30h14.446
c0.984,0,1.779-0.799,1.779-1.782V2.782C19.002,1.797,18.207,1,17.223,1z M16.969,26.915c0,0.474-0.385,0.859-0.858,0.859H3.89
c-0.475,0-0.858-0.384-0.858-0.859V4.085c0-0.472,0.383-0.857,0.858-0.857H16.11c0.473,0,0.858,0.384,0.858,0.857V26.915z"/>
<path fill="#374493" d="M11.883,4.805h-3.56c-0.492,0-0.889,0.399-0.889,0.891S7.83,6.587,8.323,6.587h3.56
c0.491,0,0.889-0.399,0.889-0.891S12.374,4.805,11.883,4.805z"/>
<path fill="#374493" d="M10.103,23.021c-0.984,0-1.78,0.796-1.78,1.781c0,0.983,0.796,1.779,1.78,1.779
c0.984,0,1.78-0.796,1.78-1.779C11.883,23.817,11.087,23.021,10.103,23.021z"/>
</g>
</g>
<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M22.5004 8.0001V2.0001M22.5004 2.0001H16.5004M22.5004 2.0001L16.5004 8.0001M22.5004 16.9201V19.9201C22.5016 20.1986 22.4445 20.4743 22.3329 20.7294C22.2214 20.9846 22.0577 21.2137 21.8525 21.402C21.6473 21.5902 21.405 21.7336 21.1412 21.8228C20.8773 21.912 20.5978 21.9452 20.3204 21.9201C17.2433 21.5857 14.2874 20.5342 11.6904 18.8501C9.27425 17.3148 7.22576 15.2663 5.69042 12.8501C4.0004 10.2413 2.94866 7.27109 2.62042 4.1801C2.59543 3.90356 2.6283 3.62486 2.71692 3.36172C2.80555 3.09859 2.94799 2.85679 3.13519 2.65172C3.32238 2.44665 3.55023 2.28281 3.80421 2.17062C4.0582 2.05843 4.33276 2.00036 4.61042 2.0001H7.61042C8.09573 1.99532 8.56621 2.16718 8.93418 2.48363C9.30215 2.80008 9.5425 3.23954 9.61042 3.7201C9.73704 4.68016 9.97187 5.62282 10.3104 6.5301C10.445 6.88802 10.4741 7.27701 10.3943 7.65098C10.3146 8.02494 10.1293 8.36821 9.86042 8.6401L8.59042 9.9101C10.014 12.4136 12.0869 14.4865 14.5904 15.9101L15.8604 14.6401C16.1323 14.3712 16.4756 14.1859 16.8495 14.1062C17.2235 14.0264 17.6125 14.0556 17.9704 14.1901C18.8777 14.5286 19.8204 14.7635 20.7804 14.8901C21.2662 14.9586 21.7098 15.2033 22.027 15.5776C22.3441 15.9519 22.5126 16.4297 22.5004 16.9201Z" stroke="#143E8C" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

@@ -1,23 +1,3 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 31 27" enable-background="new 0 0 31 27" xml:space="preserve">
<g>
<path fill="#FF666E" d="M19.356,21.186c0-2.121-1.727-3.841-3.858-3.841c-2.131,0-3.859,1.719-3.859,3.84c0,0,0,0,0,0.001v3.85
c0,0.533,0.434,0.965,0.969,0.965l0,0h5.788c0.535,0,0.969-0.432,0.969-0.965v-3.85H19.356z M15.498,19.265
c1.065,0,1.929,0.86,1.929,1.92v2.894h-3.858v-2.894C13.568,20.125,14.432,19.265,15.498,19.265z"/>
<path fill="#FF666E" d="M29.989,10.881l-0.906-4.246v-2.75C29.083,2.292,27.786,1,26.185,1l0,0H4.873
C3.273,1,1.975,2.292,1.975,3.885v2.777l-0.969,4.219c-0.008,0.069-0.008,0.138,0,0.207c0.001,0.986,0.343,1.941,0.969,2.705v9.322
C1.975,24.708,3.273,26,4.873,26h0h3.867c0.533-0.051,0.923-0.523,0.871-1.053c-0.045-0.459-0.41-0.822-0.871-0.867H4.873
c-0.535,0-0.969-0.432-0.969-0.965v-7.934c0.464,0.173,0.954,0.264,1.449,0.27c1.318-0.006,2.562-0.61,3.378-1.641
c1.46,1.86,4.158,2.189,6.026,0.736c0.276-0.214,0.524-0.462,0.74-0.736c1.46,1.86,4.158,2.189,6.026,0.736
c0.276-0.214,0.524-0.462,0.74-0.736c1.133,1.461,3.091,2.016,4.827,1.37v7.934c0,0.533-0.434,0.965-0.969,0.965h-3.858
c-0.533,0.051-0.923,0.523-0.871,1.053c0.045,0.459,0.41,0.822,0.871,0.867h3.867c1.601,0,2.898-1.292,2.898-2.885v0v-9.331
c0.626-0.764,0.968-1.719,0.969-2.705C30.002,11.013,29.999,10.947,29.989,10.881z M5.353,13.495
c-1.298,0.001-2.365-1.017-2.418-2.308l0.788-3.462h4.049v3.39C7.757,12.434,6.678,13.496,5.353,13.495z M12.119,13.495
c-1.325,0-2.403-1.061-2.418-2.38v-3.39h4.827v3.39C14.514,12.431,13.441,13.491,12.119,13.495z M18.885,13.495
c-1.325,0-2.403-1.061-2.418-2.38v-3.39h4.827v3.39C21.279,12.431,20.206,13.491,18.885,13.495z M22.263,5.805H3.904v-1.92
c0-0.533,0.434-0.965,0.969-0.965h21.248c0.535,0,0.969,0.432,0.969,0.965v1.92H22.263z M25.642,13.495
c-1.325,0-2.403-1.061-2.418-2.38v-3.39h4.049l0.77,3.462C27.989,12.471,26.932,13.487,25.642,13.495L25.642,13.495z"/>
</g>
<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.5 6L6.5 2H18.5L21.5 6M3.5 6V20C3.5 20.5304 3.71071 21.0391 4.08579 21.4142C4.46086 21.7893 4.96957 22 5.5 22H19.5C20.0304 22 20.5391 21.7893 20.9142 21.4142C21.2893 21.0391 21.5 20.5304 21.5 20V6M3.5 6H21.5M16.5 10C16.5 11.0609 16.0786 12.0783 15.3284 12.8284C14.5783 13.5786 13.5609 14 12.5 14C11.4391 14 10.4217 13.5786 9.67157 12.8284C8.92143 12.0783 8.5 11.0609 8.5 10" stroke="#143E8C" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Before

Width:  |  Height:  |  Size: 2.1 KiB

After

Width:  |  Height:  |  Size: 555 B

View File

@@ -1,61 +1,3 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 29 29" enable-background="new 0 0 29 29" xml:space="preserve">
<g>
<g>
<path fill="#FF666E" d="M25.505,6.707c0-0.009-0.001-0.017-0.003-0.026c-0.034-0.048-0.075-0.09-0.11-0.137
c-0.252-0.343-0.519-0.674-0.801-0.992c-0.077-0.087-0.154-0.173-0.233-0.258c-0.29-0.311-0.594-0.607-0.913-0.888
c-0.059-0.052-0.114-0.106-0.173-0.157c-0.785-0.672-1.644-1.252-2.56-1.728c-0.037-0.019-0.075-0.036-0.113-0.055
c-0.408-0.207-0.827-0.394-1.254-0.559c-0.096-0.035-0.184-0.068-0.276-0.096c-0.38-0.137-0.766-0.257-1.158-0.36
c-0.116-0.031-0.232-0.063-0.349-0.09c-0.386-0.09-0.772-0.158-1.166-0.214c-0.12-0.017-0.237-0.041-0.358-0.055
c-1.016-0.123-2.044-0.123-3.06,0c-0.121,0.014-0.238,0.038-0.358,0.055c-0.395,0.056-0.784,0.124-1.166,0.214
c-0.118,0.027-0.233,0.059-0.349,0.09c-0.394,0.103-0.78,0.223-1.158,0.36C9.851,1.844,9.764,1.877,9.672,1.908
C9.245,2.072,8.826,2.259,8.418,2.466C8.38,2.485,8.342,2.502,8.305,2.521C7.385,2.997,6.524,3.577,5.736,4.25
C5.677,4.301,5.622,4.355,5.564,4.407C5.242,4.69,4.938,4.986,4.651,5.295C4.572,5.38,4.495,5.466,4.418,5.553
C4.135,5.87,3.868,6.2,3.617,6.544c-0.035,0.047-0.076,0.089-0.11,0.137C3.503,6.69,3.499,6.698,3.495,6.707
c-3.327,4.662-3.327,10.923,0,15.585c0.003,0.009,0.007,0.018,0.012,0.026c0.034,0.048,0.075,0.09,0.11,0.137
c0.251,0.343,0.518,0.674,0.801,0.992c0.077,0.087,0.154,0.173,0.233,0.258c0.291,0.311,0.595,0.607,0.913,0.888
c0.059,0.052,0.114,0.106,0.173,0.157c0.785,0.672,1.644,1.252,2.56,1.728c0.037,0.019,0.075,0.036,0.113,0.055
c0.408,0.207,0.827,0.394,1.254,0.559c0.096,0.035,0.184,0.068,0.276,0.096c0.38,0.137,0.766,0.257,1.158,0.36
c0.116,0.031,0.232,0.063,0.349,0.09c0.386,0.09,0.772,0.158,1.166,0.214c0.12,0.017,0.237,0.041,0.358,0.055
c1.016,0.123,2.044,0.123,3.06,0c0.121-0.014,0.238-0.038,0.358-0.055c0.395-0.056,0.784-0.124,1.166-0.214
c0.118-0.027,0.233-0.059,0.349-0.09c0.395-0.103,0.781-0.223,1.158-0.36c0.096-0.033,0.184-0.066,0.276-0.096
c0.427-0.165,0.846-0.351,1.254-0.559c0.038-0.019,0.076-0.036,0.113-0.055c0.917-0.476,1.776-1.056,2.56-1.728
c0.059-0.051,0.114-0.105,0.173-0.157c0.322-0.282,0.626-0.578,0.913-0.888c0.079-0.085,0.156-0.171,0.233-0.258
c0.282-0.318,0.549-0.648,0.801-0.992c0.035-0.047,0.076-0.089,0.11-0.137c0.004-0.008,0.008-0.017,0.012-0.026
C28.832,17.63,28.832,11.37,25.505,6.707z M24.404,8.532c0.923,1.519,1.48,3.232,1.627,5.003h-5.778
c-0.071-1.149-0.252-2.289-0.54-3.404C21.345,9.826,22.925,9.287,24.404,8.532z M16.959,3.192c0.054,0.013,0.106,0.03,0.16,0.042
c0.345,0.081,0.688,0.174,1.023,0.289c0.051,0.017,0.101,0.038,0.151,0.056c0.332,0.116,0.659,0.244,0.979,0.386
c0.056,0.026,0.111,0.055,0.167,0.081c0.307,0.146,0.606,0.304,0.899,0.474l0.193,0.117c0.278,0.17,0.548,0.351,0.81,0.545
c0.068,0.049,0.135,0.096,0.202,0.15c0.257,0.193,0.504,0.4,0.739,0.62c0.062,0.056,0.125,0.111,0.186,0.169
c0.247,0.234,0.482,0.482,0.71,0.739c0.029,0.034,0.06,0.065,0.089,0.096c-1.306,0.622-2.69,1.067-4.114,1.321
c-0.66-1.814-1.531-3.543-2.597-5.153C16.69,3.149,16.827,3.163,16.959,3.192z M10.681,13.535
c0.076-1.044,0.254-2.077,0.531-3.087c1.093,0.13,2.193,0.194,3.293,0.193c1.102,0,2.202-0.066,3.296-0.198
c0.276,1.011,0.453,2.046,0.528,3.091H10.681z M18.329,15.465c-0.076,1.044-0.254,2.077-0.531,3.087
c-1.093-0.13-2.193-0.194-3.293-0.193c-1.102-0.001-2.202,0.063-3.296,0.193c-0.276-1.009-0.453-2.043-0.528-3.087H18.329z
M14.505,3.554c1.098,1.556,2.001,3.24,2.688,5.016c-0.893,0.095-1.79,0.142-2.688,0.143c-0.897-0.001-1.793-0.049-2.686-0.144
C12.508,6.795,13.41,5.111,14.505,3.554z M5.833,6.859C6.06,6.602,6.296,6.354,6.543,6.12c0.061-0.058,0.124-0.113,0.186-0.169
c0.238-0.217,0.484-0.423,0.739-0.62C7.534,5.28,7.602,5.234,7.669,5.18c0.262-0.193,0.532-0.375,0.81-0.545l0.193-0.117
C8.965,4.348,9.265,4.19,9.572,4.045C9.628,4.019,9.683,3.99,9.739,3.964c0.32-0.145,0.647-0.273,0.979-0.386
c0.05-0.018,0.096-0.039,0.151-0.056c0.335-0.112,0.675-0.204,1.023-0.289c0.054-0.013,0.106-0.03,0.161-0.041
c0.132-0.029,0.269-0.042,0.403-0.067c-1.066,1.61-1.938,3.34-2.598,5.154C8.434,8.024,7.05,7.58,5.744,6.957
C5.773,6.923,5.804,6.893,5.833,6.859z M4.606,8.532c1.479,0.755,3.058,1.294,4.69,1.599c-0.288,1.115-0.469,2.255-0.539,3.404
H2.979C3.126,11.764,3.683,10.052,4.606,8.532z M4.606,20.468c-0.923-1.519-1.48-3.232-1.627-5.003h5.778
c0.071,1.149,0.252,2.289,0.54,3.404C7.665,19.174,6.085,19.713,4.606,20.468z M12.051,25.809c-0.054-0.013-0.106-0.03-0.16-0.042
c-0.345-0.081-0.688-0.174-1.023-0.289c-0.051-0.017-0.101-0.038-0.151-0.056c-0.332-0.116-0.659-0.244-0.979-0.386
c-0.056-0.026-0.111-0.055-0.167-0.081c-0.307-0.146-0.606-0.304-0.899-0.474l-0.193-0.117c-0.278-0.17-0.548-0.351-0.81-0.545
c-0.068-0.049-0.135-0.096-0.202-0.15c-0.257-0.193-0.504-0.4-0.739-0.62c-0.062-0.056-0.125-0.111-0.186-0.169
c-0.247-0.234-0.482-0.482-0.71-0.739c-0.029-0.034-0.06-0.065-0.089-0.096c1.306-0.622,2.69-1.067,4.114-1.321
c0.66,1.814,1.531,3.543,2.597,5.153C12.32,25.851,12.183,25.838,12.051,25.809z M14.505,25.446
c-1.098-1.556-2.001-3.24-2.688-5.016c1.786-0.192,3.588-0.192,5.375,0l-0.001,0.001C16.502,22.205,15.6,23.889,14.505,25.446z
M23.177,22.141c-0.227,0.257-0.463,0.504-0.71,0.739c-0.061,0.058-0.124,0.113-0.186,0.169c-0.238,0.217-0.484,0.424-0.739,0.62
c-0.067,0.051-0.134,0.101-0.202,0.15c-0.262,0.193-0.532,0.375-0.81,0.545l-0.193,0.117c-0.292,0.17-0.592,0.328-0.899,0.474
c-0.056,0.026-0.111,0.055-0.167,0.081c-0.32,0.145-0.647,0.273-0.979,0.386c-0.05,0.018-0.096,0.039-0.151,0.056
c-0.335,0.112-0.675,0.204-1.023,0.289c-0.054,0.013-0.106,0.03-0.161,0.041c-0.132,0.029-0.269,0.042-0.403,0.067
c1.065-1.609,1.937-3.339,2.597-5.153c1.424,0.255,2.808,0.699,4.114,1.321C23.237,22.077,23.206,22.108,23.177,22.141z
M24.404,20.468c-1.479-0.755-3.058-1.294-4.69-1.599c0.288-1.115,0.469-2.255,0.539-3.404h5.778
C25.884,17.236,25.326,18.949,24.404,20.468z"/>
</g>
</g>
<svg width="21" height="22" viewBox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20.5 11C20.5 16.5228 16.0228 21 10.5 21M20.5 11C20.5 5.47715 16.0228 1 10.5 1M20.5 11H0.5M10.5 21C4.97715 21 0.5 16.5228 0.5 11M10.5 21C7.93223 18.3038 6.5 14.7233 6.5 11C6.5 7.27674 7.93223 3.69615 10.5 1M10.5 21C13.0678 18.3038 14.5 14.7233 14.5 11C14.5 7.27674 13.0678 3.69615 10.5 1M0.5 11C0.5 5.47715 4.97715 1 10.5 1" stroke="#143E8C" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Before

Width:  |  Height:  |  Size: 6.0 KiB

After

Width:  |  Height:  |  Size: 503 B

View File

@@ -152,7 +152,8 @@ export default {
transition: all 0.2s ease;
&:hover {
background: #f3f4f6;
background: $color-button;
color: white;
}
}
}

View File

@@ -128,7 +128,7 @@ export default {
methods: {
getProductImg(product) {
if (product && product.image) return product.image
return `@/assets/img/latienda-product-default.svg`
return `@/assets/img/consumo-default.png`
},
},
}

View File

@@ -11,7 +11,7 @@
<img
v-else
class="image"
src="@/assets/img/latienda-product-default.svg"
src="@/assets/img/consumo-default.png"
:alt="product.name"
/>
</div>

View File

@@ -161,7 +161,7 @@ export default {
getProductImg(product) {
if (product && product.image)
return product.image
return `@/assets/img/latienda-product-default.svg`
return `@/assets/img/consumo-default.png`
},
tagRoute(tag) {
return `/busqueda?tags=${tag}`

View File

@@ -174,7 +174,7 @@ export default {
},
getImgUrl(image) {
if (image) return image
return `@/assets/img/latienda-product-default.svg`
return `@/assets/img/consumo-default.png`
},
redirectToLogin() {
this.$router.push({

View File

@@ -15,7 +15,7 @@
<img
v-else
class="image-default"
src="@/assets/img/latienda-product-default.svg"
src="@/assets/img/consumo-default.png"
alt=""
/>
<h3>{{ product.name }}</h3>

View File

@@ -1,13 +1,33 @@
<template>
<div class="container">
<div class="row c-description">
<div class="col-md-4">
<div class="content">
<div class="c-description">
<div class="c-image-links">
<div class="c-image-container">
<img v-if="coop?.logo" :src="coop?.logo" alt="" />
<img v-else src="@/assets/img/latienda-product-default.svg" alt="" />
<img v-else src="@/assets/img/consumo-default.png" alt="" />
</div>
<BButton
v-if="coop?.shop_link"
class="div-link"
align="center"
:href="coop?.shop_link"
target="_blank"
>
<img class="div-link-img" src="@/assets/img/latienda-tienda.svg" />
<span>COMPRA EN SU TIENDA</span>
</BButton>
<BButton
v-if="coop?.web_link"
class="div-link"
align="center"
:href="coop?.web_link"
target="_blank"
>
<img class="div-link-img" src="@/assets/img/latienda-web.svg" />
<span>CONOCE MÁS SU PROYECTO</span>
</BButton>
</div>
<div class="col-md-6">
<div class="c-text">
<h1 class="coop-name">{{ coop?.company_name }}</h1>
<p class="coop-text">
{{ coop?.description }}
@@ -19,63 +39,38 @@
:to="tagRoute(n)"
class="tag_container"
>
<img class="tag_img" src="@/assets/img/latienda-tag.svg" />
<span>{{ n }}</span>
</NuxtLink>
</div>
</div>
</div>
<div class="row coop-links">
<div class="col-md-4">
<BButton
v-if="coop?.shop_link"
class="div-link"
align="center"
:href="coop?.shop_link"
target="_blank"
>
<img class="div-link-img" src="@/assets/img/latienda-tienda.svg" />
<span>Tienda online</span>
</BButton>
<BButton
v-if="coop?.web_link"
class="div-link"
align="center"
:href="coop?.web_link"
target="_blank"
>
<img class="div-link-img" src="@/assets/img/latienda-web.svg" />
<span>Página web</span>
</BButton>
</div>
<div class="col-md-4">
<div v-if="coop?.mobile || coop?.phone" class="div-action tel">
<img
class="div-action-img"
src="@/assets/img/latienda-telefono.svg"
/>
<span
>{{ coop?.phone }} <br />
{{ coop?.mobile }}</span
>
</div>
<div v-if="coop?.email" class="div-action mail">
<img class="div-action-img" src="@/assets/img/latienda-email.svg" />
<span>{{ coop?.email }}</span>
</div>
</div>
<div class="col-md-4">
<div v-if="coop?.address" class="div-action address">
<img class="div-action-img" src="@/assets/img/latienda-casa.svg" />
<span>{{ coop?.address }}</span>
</div>
<div v-if="coop?.city" class="div-action location">
<img
class="div-action-img"
src="@/assets/img/latienda-ubicacion.svg"
/>
<span>{{ coop?.city }}</span>
</div>
<div class="coop-links">
<div v-if="coop?.address" class="div-action address">
<img class="div-action-img" src="@/assets/img/latienda-casa.svg" />
<span>{{ coop?.address }}</span>
</div>
<div v-if="coop?.mobile || coop?.phone" class="div-action tel">
<img
class="div-action-img"
src="@/assets/img/latienda-telefono.svg"
/>
<span
>{{ coop?.phone }} <br />
{{ coop?.mobile }}</span
>
</div>
<div v-if="coop?.email" class="div-action mail">
<img class="div-action-img" src="@/assets/img/latienda-email.svg" />
<span>{{ coop?.email }}</span>
</div>
<!-- <div v-if="coop?.city" class="div-action location">
<img
class="div-action-img"
src="@/assets/img/latienda-ubicacion.svg"
/>
<span>{{ coop?.city }}</span>
</div> -->
</div>
</div>
</div>
<div class="row">
@@ -125,7 +120,7 @@ import { mapState } from 'pinia'
export default {
setup(){
definePageMeta({
layout: 'main',
layout: 'default',
})
},
//TODO: implement head() method
@@ -264,132 +259,185 @@ export default {
}
</script>
<style lang="scss" scoped>
<!-- <style lang="scss" scoped>
//global classes for Bootstrap styling
ul.nav > li.nav-item {
font-weight: bolder;
:hover {
color: $color-navy;
color: $color-consumo-base;
}
.active {
border-top: 4px solid $color-navy;
color: $color-navy;
}
}
</style>
</style> -->
<style lang="scss" scoped>
.container {
margin-top: 80px;
margin-bottom: 80px;
@include mobile {
padding: 0.4em 2em;
}
.content {
// margin-top: 80px;
// margin-bottom: 80px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.c-description {
margin-top: 40px;
margin-bottom: 40px;
display: flex;
flex-direction: row;
align-items: start;
justify-content: start;
gap: 4rem;
width: 100%;
padding: 4rem 4rem;
border-radius: var(--rounded-3xl, 24px);
background: linear-gradient(
180deg,
$color-consumo-base-extra-light 0%,
$color-bg-light 100%
);
@include tablet {
gap: 1rem;
}
@include mobile {
margin-bottom: 0;
flex-direction: column;
gap: 1rem;
margin-top: 5rem;
padding: 2rem 1rem;
}
.c-image-links {
display: flex;
flex-direction: column;
width: auto;
gap: 1.5rem;
@include mobile {
flex-direction: column;
margin-right: 0;
}
.div-link:hover {
background-color: white;
transition: all 0.2s ease;
}
.div-link {
display: flex;
justify-content: center;
align-items: center;
gap: 0.7rem;
width: 100%;
border: 1px solid $color-button;
border-radius: 5px;
background-color: transparent;
font-weight: $bold;
padding: 15px 0;
.div-link-img {
width: 20px;
}
span {
color: $color-button;
}
}
}
}
.coop-links {
margin-bottom: 40px;
display: flex;
flex-direction: column;
gap: 8px;
width: 100%;
.div-action {
display: flex;
justify-content: flex-start;
flex-direction: row;
align-items: center;
justify-content: start;
padding-left: 8px;
overflow: hidden;
.img-tel {
width: 16px;
}
background-color: transparent;
font-size: $m;
}
.div-link-img,
.div-action-img {
width: 20px;
width: 24px;
height: 24px;
margin-right: 8px;
}
.div-action-img {
margin-left: 5px;
}
}
.c-image-container {
height: 100%;
width: 100%;
height: 300px;
width: 300px;
display: flex;
flex-direction: column;
gap: 1rem;
align-items: center;
justify-content: center;
background-color: white;
border-radius: 16px;
img {
width: 100%;
height: auto;
object-fit: cover;
height: 100%;
object-fit: contain;
}
@include mobile {
width: 200px;
height: 200px;
margin: 0 auto;
}
}
.coop-name {
font-size: $xl;
color: $color-navy;
text-transform: capitalize;
}
.coop-text {
margin-top: 8px;
font-family: $font-secondary;
font-size: $s;
color: $color-greytext;
}
.c-text {
flex: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
@include mobile {
margin-top: 2rem;
}
.div-link:hover {
box-shadow: 0 4px 16px rgba(99, 99, 99, 0.2);
transition: all 0.2s ease;
}
.div-link {
width: 100%;
border: 3px solid $color-orange;
border-radius: 5px;
background-color: $color-light;
font-weight: $bold;
padding: 15px 0;
margin-bottom: 5px;
span {
color: $color-orange;
.coop-name {
font-size: $h2;
font-weight: $bold;
text-transform: capitalize;
}
.coop-text {
margin-top: 8px;
font-size: $m;
width: 80%;
@include tablet {
width: 100%;
}
@include mobile {
width: 100%;
}
}
.div-action {
width: 100%;
background-color: $color-grey-nav;
border: none;
color: $color-greytext;
font-family: $font-secondary;
font-size: $s;
padding: 20px 0;
margin-bottom: 5px;
}
.tag_container {
margin: 5px 6px 0 0;
border: 2px solid $color-greylayout;
border-radius: 5px;
padding: 6px 10px;
display: inline-block;
font-family: $font-secondary;
font-size: $xs;
color: $color-greytext;
.tags_container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: start;
gap: 8px;
.tag_img {
width: 18px;
.tag_container {
margin: 5px 6px 0 0;
border-radius: 1rem;
padding: 8px;
display: inline-block;
font-family: $font-secondary;
font-size: $xs;
background-color: white;
color: #4B4B4B;
text-align: center;
text-transform: uppercase;
text-decoration: none;
}
}