83 lines
2.7 KiB
HTML
83 lines
2.7 KiB
HTML
<div class="row">
|
|
<div class="col-lg-5 col-md-5 col-sm-12 col-xs-12 q-mt-sm">
|
|
<div class="q-pr-md" v-if="product.images && product.images[0]">
|
|
<q-carousel
|
|
swipeable
|
|
animated
|
|
v-model="slide"
|
|
thumbnails
|
|
infinite
|
|
arrows
|
|
transition-prev="slide-right"
|
|
transition-next="slide-left"
|
|
navigation-icon="radio_button_unchecked"
|
|
control-type="regular"
|
|
control-color="secondary"
|
|
control-text-color="white"
|
|
>
|
|
<q-carousel-slide
|
|
v-for="(img, i) in product.images"
|
|
:name="i + 1"
|
|
:key="i"
|
|
:img-src="img"
|
|
></q-carousel-slide>
|
|
</q-carousel>
|
|
|
|
</div>
|
|
<div v-else class="q-pr-md">
|
|
<q-img src="/nostrmarket/static/images/placeholder.png" :ratio="16/9"></q-img>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-7 col-md-7 col-sm-12 col-xs-12 q-mt-sm">
|
|
<q-card>
|
|
<q-card-section>
|
|
<div class="row">
|
|
<div
|
|
class="col-12"
|
|
:class="$q.platform.is.desktop ? '' : 'q-px-md'"
|
|
>
|
|
<div class="text-subtitle1 q-mt-sm q-pt-xs">{{ product.name }}</div>
|
|
<div v-if="product.categories" class="text-subtitle1">
|
|
<q-chip v-for="(cat, i) in product.categories" :key="i" dense
|
|
>{{cat}}</q-chip
|
|
>
|
|
</div>
|
|
<div class="q-mt-sm text-weight-bold">{{ product.description }}</div>
|
|
<div>
|
|
<span v-if="product.currency == 'sat'">
|
|
<span class="text-h6">{{ product.price }} sats</span
|
|
><span class="q-ml-sm text-grey-6"
|
|
>BTC {{ (product.price / 1e8).toFixed(8) }}</span
|
|
>
|
|
</span>
|
|
<span v-else>
|
|
<span class="text-h6">{{ product.formatedPrice }}</span>
|
|
</span>
|
|
<span
|
|
class="q-ml-md text-caption text-green-8 text-weight-bolder q-mt-md"
|
|
>{{ product.quantity > 0 ? `In stock. ${product.quantity} left.` : 'Out of stock.' }}</span
|
|
>
|
|
</div>
|
|
<div class="q-mt-md">
|
|
<q-btn
|
|
class="q-mt-md"
|
|
color="primary"
|
|
rounded
|
|
icon="shopping_cart"
|
|
label="Add to cart"
|
|
@click="$emit('add-to-cart', product)"
|
|
/>
|
|
<!-- <q-btn
|
|
class="q-mt-md q-ml-md"
|
|
color="primary"
|
|
icon="share"
|
|
label="Share"
|
|
/> -->
|
|
</div>
|
|
</div>
|
|
<!-- RATING TO BE DONE -->
|
|
</div>
|
|
</q-card-section>
|
|
</q-card>
|
|
</div>
|
|
</div>
|