<script>
import Layout from "../../layouts/main";
import PageHeader from "@/components/page-header";
/**
* Product Detail Component
*/
export default {
components: {
Layout,
PageHeader
},
data() {
return {
title: "Product Detail",
items: [
{
text: "Ecommerce"
},
{
text: "Product Detail",
active: true
}
]
};
},
methods: {
/**
* Selected image shows
*/
imageShow(event) {
const image = event.target.src;
const expandImg = document.getElementById("expandedImg");
expandImg.src = image;
}
}
};
</script>
<template>
<Layout>
<PageHeader :title="title" :items="items" />
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-xl-5">
<div class="product-detail">
<div class="row">
<div class="col-3">
<div
class="nav flex-column nav-pills"
id="v-pills-tab"
role="tablist"
aria-orientation="vertical"
>
<a
class="nav-link"
id="product-1-tab"
data-toggle="pill"
@click="imageShow($event)"
role="tab"
>
<img
src="@/assets/images/product/img-1.png"
alt
class="img-fluid mx-auto d-block tab-img rounded"
/>
</a>
<a
class="nav-link"
id="product-2-tab"
data-toggle="pill"
@click="imageShow($event)"
role="tab"
>
<img
src="@/assets/images/product/img-5.png"
alt
class="img-fluid mx-auto d-block tab-img rounded"
/>
</a>
<a
class="nav-link"
id="product-3-tab"
data-toggle="pill"
@click="imageShow($event)"
role="tab"
>
<img
src="@/assets/images/product/img-3.png"
alt
class="img-fluid mx-auto d-block tab-img rounded"
/>
</a>
<a
class="nav-link"
id="product-4-tab"
data-toggle="pill"
@click="imageShow($event)"
role="tab"
>
<img
src="@/assets/images/product/img-4.png"
alt
class="img-fluid mx-auto d-block tab-img rounded"
/>
</a>
</div>
</div>
<div class="col-md-8 col-9">
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade show active" id="product-1" role="tabpanel">
<div class="product-img">
<img
id="expandedImg"
src="@/assets/images/product/img-1.png"
alt
class="img-fluid mx-auto d-block"
/>
</div>
</div>
</div>
<div class="row text-center mt-2">
<div class="col-sm-6">
<button
type="button"
class="btn btn-primary btn-block waves-effect waves-light mt-2 mr-1"
>
<i class="mdi mdi-cart mr-2"></i> Add to cart
</button>
</div>
<div class="col-sm-6">
<button
type="button"
class="btn btn-light btn-block waves-effect mt-2 waves-light"
>
<i class="mdi mdi-shopping mr-2"></i>Buy now
</button>
</div>
</div>
</div>
</div>
</div>
<!-- end product img -->
</div>
<div class="col-xl-7">
<div class="mt-4 mt-xl-3">
<a href="#" class="text-primary">T-shirt</a>
<h5 class="mt-1 mb-3">Full sleeve Blue color t-shirt</h5>
<div class="d-inline-flex">
<div class="text-muted mr-3">
<span class="mdi mdi-star text-warning"></span>
<span class="mdi mdi-star text-warning"></span>
<span class="mdi mdi-star text-warning"></span>
<span class="mdi mdi-star text-warning"></span>
<span class="mdi mdi-star"></span>
</div>
<div class="text-muted">( 132 )</div>
</div>
<h5 class="mt-2">
<del class="text-muted mr-2">$252</del>$240
<span class="text-danger font-size-12 ml-2">25 % Off</span>
</h5>
<p
class="mt-3"
>To achieve this, it would be necessary to have uniform pronunciation</p>
<hr class="my-4" />
<div class="row">
<div class="col-md-6">
<div>
<h5 class="font-size-14">
<i class="mdi mdi-location"></i> Delivery location
</h5>
<div class="form-inline">
<div class="input-group mb-3">
<input
type="text"
class="form-control"
placeholder="Enter Delivery pincode "
/>
<div class="input-group-append">
<button class="btn btn-light" type="button">Check</button>
</div>
</div>
</div>
<h5 class="font-size-14">Specification :</h5>
<ul class="list-unstyled product-desc-list">
<li>
<i class="mdi mdi-circle-medium mr-1 align-middle"></i> Full Sleeve
</li>
<li>
<i class="mdi mdi-circle-medium mr-1 align-middle"></i> Cotton
</li>
<li>
<i class="mdi mdi-circle-medium mr-1 align-middle"></i> All Sizes available
</li>
<li>
<i class="mdi mdi-circle-medium mr-1 align-middle"></i> 4 Different Color
</li>
</ul>
</div>
</div>
<div>
<h5 class="font-size-14">Services :</h5>
<ul class="list-unstyled product-desc-list">
<li>
<i class="mdi mdi-sync text-primary mr-1 align-middle font-size-16"></i> 10 Days Replacement
</li>
<li>
<i
class="mdi mdi-currency-usd-circle text-primary mr-1 align-middle font-size-16"
></i> Cash on Delivery available
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="product-color mt-3">
<h5 class="font-size-14">Color :</h5>
<a href="#" class="active">
<div class="product-color-item">
<img src="@/assets/images/product/img-1.png" alt class="avatar-md" />
</div>
<p>Blue</p>
</a>
<a href="#">
<div class="product-color-item">
<img src="@/assets/images/product/img-5.png" alt class="avatar-md" />
</div>
<p>Cyan</p>
</a>
<a href="#">
<div class="product-color-item">
<img src="@/assets/images/product/img-3.png" alt class="avatar-md" />
</div>
<p>Green</p>
</a>
</div>
</div>
<div class="col-md-6">
<div class="product-color mt-3">
<h5 class="font-size-14">Size :</h5>
<a href="#" class="active">
<div class="product-color-item">
<div class="avatar-xs">
<span class="avatar-title bg-transparent text-body">S</span>
</div>
</div>
</a>
<a href="#">
<div class="product-color-item">
<div class="avatar-xs">
<span class="avatar-title bg-transparent text-body">M</span>
</div>
</div>
</a>
<a href="#">
<div class="product-color-item">
<div class="avatar-xs">
<span class="avatar-title bg-transparent text-body">L</span>
</div>
</div>
</a>
<a href="#">
<div class="product-color-item">
<div class="avatar-xs">
<span class="avatar-title bg-transparent text-body">XL</span>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end row -->
<div class="mt-4">
<h5 class="font-size-14 mb-3">Product description:</h5>
<div class="product-desc">
<b-tabs class="nav-tabs-custom" content-class="border border-top-0 p-4">
<b-tab title="Description">
<div>
<p>If several languages coalesce, the grammar of the resulting language is more simple and regular than that of the individual</p>
<p>To achieve this, it would be necessary to have uniform grammar, pronunciation and more common several languages coalesce, the grammar of the resulting.</p>
<p>It will be as simple as occidental in fact.</p>
<div>
<p class="mb-2">
<i class="mdi mdi-circle-medium mr-1 align-middle"></i> If several languages coalesce
</p>
<p class="mb-2">
<i class="mdi mdi-circle-medium mr-1 align-middle"></i> To an English person, it will seem like simplified
</p>
<p class="mb-0">
<i class="mdi mdi-circle-medium mr-1 align-middle"></i> These cases are perfectly simple.
</p>
</div>
</div>
</b-tab>
<b-tab title="Specifications">
<div class="table-responsive">
<table class="table table-nowrap mb-0">
<tbody>
<tr>
<th scope="row" style="width: 400px;">Category</th>
<td>T-Shirt</td>
</tr>
<tr>
<th scope="row">Brand</th>
<td>Jack & Jones</td>
</tr>
<tr>
<th scope="row">Color</th>
<td>Blue</td>
</tr>
<tr>
<th scope="row">Material</th>
<td>Cotton</td>
</tr>
<tr>
<th scope="row">Weight</th>
<td>140 G</td>
</tr>
</tbody>
</table>
</div>
</b-tab>
</b-tabs>
</div>
</div>
<div class="mt-4">
<h5 class="font-size-14">Reviews :</h5>
<div class="d-inline-flex mb-3">
<div class="text-muted mr-3">
<span class="mdi mdi-star text-warning"></span>
<span class="mdi mdi-star text-warning"></span>
<span class="mdi mdi-star text-warning"></span>
<span class="mdi mdi-star text-warning"></span>
<span class="mdi mdi-star"></span>
</div>
<div class="text-muted">( 132 customer Review)</div>
</div>
<div class="border p-4 rounded">
<div class="media border-bottom pb-3">
<div class="media-body">
<p
class="text-muted mb-2"
>To an English person, it will seem like simplified English, as a skeptical Cambridge</p>
<h5 class="font-size-15 mb-3">James</h5>
<ul class="list-inline product-review-link mb-0">
<li class="list-inline-item">
<a href="#">
<i class="mdi mdi-thumb-up align-middle mr-1"></i> Like
</a>
</li>
<li class="list-inline-item">
<a href="#">
<i class="mdi mdi-message-text align-middle mr-1"></i> Comment
</a>
</li>
</ul>
</div>
<p class="float-sm-right font-size-12">11 Feb, 2020</p>
</div>
<div class="media border-bottom py-3">
<div class="media-body">
<p
class="text-muted mb-2"
>Everyone realizes why a new common language would be desirable</p>
<h5 class="font-size-15 mb-3">David</h5>
<ul class="list-inline product-review-link mb-0">
<li class="list-inline-item">
<a href="#">
<i class="mdi mdi-thumb-up align-middle mr-1"></i> Like
</a>
</li>
<li class="list-inline-item">
<a href="#">
<i class="mdi mdi-message-text align-middle mr-1"></i> Comment
</a>
</li>
</ul>
</div>
<p class="float-sm-right font-size-12">22 Jan, 2020</p>
</div>
<div class="media py-3">
<div class="media-body">
<p
class="text-muted mb-2"
>If several languages coalesce, the grammar of the resulting</p>
<h5 class="font-size-15 mb-3">Scott</h5>
<ul class="list-inline product-review-link mb-0">
<li class="list-inline-item">
<a href="#">
<i class="mdi mdi-thumb-up align-middle mr-1"></i> Like
</a>
</li>
<li class="list-inline-item">
<a href="#">
<i class="mdi mdi-message-text align-middle mr-1"></i> Comment
</a>
</li>
</ul>
</div>
<p class="float-sm-right font-size-12">04 Jan, 2020</p>
</div>
</div>
</div>
</div>
</div>
<!-- end card -->
</div>
</div>
<!-- end row -->
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-md-4">
<div class="media">
<div class="avatar-sm mr-3">
<span class="avatar-title bg-light rounded-circle text-primary font-size-24">
<i class="ri-checkbox-circle-line"></i>
</span>
</div>
<div class="media-body align-self-center overflow-hidden">
<h5>Free Shipping</h5>
<p class="text-muted mb-0">Sed ut perspiciatis unde</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="media mt-4 mt-md-0">
<div class="avatar-sm mr-3">
<span class="avatar-title bg-light rounded-circle text-primary font-size-24">
<i class="ri-exchange-line"></i>
</span>
</div>
<div class="media-body align-self-center overflow-hidden">
<h5>Easy Return</h5>
<p class="text-muted mb-0">Neque porro quisquam est</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="media mt-4 mt-md-0">
<div class="avatar-sm mr-3">
<span class="avatar-title bg-light rounded-circle text-primary font-size-24">
<i class="ri-money-dollar-circle-line"></i>
</span>
</div>
<div class="media-body align-self-center overflow-hidden">
<h5>Cash on Delivery</h5>
<p class="text-muted mb-0">Ut enim ad minima quis</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end row -->
</Layout>
</template>
