Las cards de productos ahora son boxes en lista

This commit is contained in:
Rodrigo 2024-08-27 22:51:31 -03:00
parent 11d18ad4a5
commit 758c425f91
1 changed files with 18 additions and 25 deletions

View File

@ -1,30 +1,23 @@
<template>
<div v-show="visible" class="container">
<div v-show="visible" class="container is-max-desktop">
<div class="columns is-multiline is-mobile">
<div v-for="(producto,i) in productos" :key="i" class="block column is-one-quarter-desktop is-one-third-tablet is-half-mobile">
<div @click.capture="seleccionarProducto(producto)" class="card" style="height:100%">
<div class="card-image">
<figure class="image is-4by3">
<img v-bind:src="producto.imagen ? producto.imagen : 'https://bulma.io/images/placeholders/1280x960.png'">
</figure>
<figure v-show="producto.nacional" class="image icono is-32x32">
<img src="/assets/uruguay.png">
</figure>
<figure v-show="producto.economia_solidaria" class="image icono is-32x32">
<img src="/assets/solidaria.png">
</figure>
</div>
<div class="card-content">
<div class="media">
<div class="media-content">
<p class="title is-6" v-text="producto.nombre"></p>
<p class="subtitle is-7" v-text="producto.proveedor"></p>
<p class="subtitle is-7">$<span v-text="producto.precio"></span></p>
<p class="subtitle has-text-right is-7" v-if="producto.cantidad != 0"><span v-text="producto.cantidad"></span> en chismosa</p>
</div>
</div>
</div>
</div><!-- END CARD -->
<div v-for="(producto,i) in productos" :key="i" class="block column is-full">
<div @click.capture="seleccionarProducto(producto)" class="box" style="height:100%">
<div class="columns">
<div class="column is-half">
<p class="title is-6">
{{ producto.nombre }}
<img v-show="producto.nacional" height="20px" width="20px" src="/assets/uruguay.png" />
<img v-show="producto.economia_solidaria" height="20px" width="20px" src="/assets/solidaria.png">
</p>
<p class="subtitle is-7" v-text="producto.proveedor"></p>
</div>
<div class="column is-half has-text-right">
<p class="has-text-weight-bold has-text-primary">$<span v-text="producto.precio"></span></p>
<p class="subtitle is-7" v-if="producto.cantidad != 0">{{ producto.cantidad }} en chismosa</p>
</div>
</div>
</div><!-- END BOX -->
</div><!-- END BLOCK COLUMN -->
</div><!-- END COLUMNS -->
</div><!-- END CONTAINER -->