Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | 3x 3x 6x 3x | <template>
<div class="row">
<div class="wrap-img d-flex col-3 position-relative px-2">
<span
v-if="quantity"
class="
position-absolute
d-flex
justify-content-center
align-items-center
p-2
"
>{{ quantity }}</span
>
<PreloaderImage :image="product.image[0].url" />
</div>
<div class="col-6 d-flex align-items-center px-2">
<p class="text-ellipsis m-0">{{ product.title }}</p>
</div>
<div class="col-3 d-flex justify-content-end align-items-center px-2">
<p class="m-0 text-nowrap pr-2">$ {{ product.price | formatNumber }}</p>
</div>
</div>
</template>
<script>
import "~/utils/filters";
import PreloaderImage from "~/components/common/PreloaderImage.vue";
export default {
name: "ProductCard",
props: {
product: Object,
quantity: Number,
},
components: { PreloaderImage },
};
</script>
<style scoped>
.wrap-img > span {
top: -0.8rem;
right: -0.5rem;
width: 2rem;
height: 2rem;
background-color: #e4e5e7;
border-radius: 50%;
}
</style> |