134 lines
6.3 KiB
Vue
134 lines
6.3 KiB
Vue
|
<template>
|
|||
|
|
<section class="shop__area pb-65">
|
|||
|
|
<div class="shop__top grey-bg-6 pt-100 pb-90">
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-xl-6 col-lg-6">
|
|||
|
|
<div class="product__modal-box d-flex">
|
|||
|
|
<div class="product__modal-nav mr-20">
|
|||
|
|
<nav>
|
|||
|
|
<div class="nav nav-tabs" id="product-details" role="tablist">
|
|||
|
|
<button
|
|||
|
|
v-for="(img, i) in item.related_images"
|
|||
|
|
:key="i"
|
|||
|
|
:class="`nav-item nav-link ${ img === active_img ? 'active' : '' }`"
|
|||
|
|
@click="handleActiveImg(img)"
|
|||
|
|
style="margin-bottom: 5px;"
|
|||
|
|
>
|
|||
|
|
<div class="product__nav-img w-img">
|
|||
|
|
<img
|
|||
|
|
:src="img"
|
|||
|
|
alt="image"
|
|||
|
|
style="width: 95px; height: 120px;object-fit: cover;"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</nav>
|
|||
|
|
</div>
|
|||
|
|
<div class="tab-content mb-20" id="product-detailsContent">
|
|||
|
|
<div class="product__modal-img product__thumb w-img">
|
|||
|
|
<img :src="active_img" alt="product_img">
|
|||
|
|
<div class="product__sale ">
|
|||
|
|
<span class="new">new</span>
|
|||
|
|
<span class="percent">-16%</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-xl-6 col-lg-6">
|
|||
|
|
<product-details-content :item="item" :style_2="true"/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="shop__bottom">
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-xl-12">
|
|||
|
|
<div class="product__details-tab">
|
|||
|
|
<div class="product__details-tab-nav text-center mb-45">
|
|||
|
|
<nav>
|
|||
|
|
<div class="nav nav-tabs justify-content-start justify-content-sm-center" id="pro-details" role="tablist">
|
|||
|
|
<a class="nav-item nav-link active" id="des-tab" data-bs-toggle="tab" href="#des" role="tab" aria-controls="des" aria-selected="true">Description</a>
|
|||
|
|
<a class="nav-item nav-link" id="add-tab" data-bs-toggle="tab" href="#add" role="tab" aria-controls="add" aria-selected="false">Additional Information</a>
|
|||
|
|
<a class="nav-item nav-link" id="review-tab" data-bs-toggle="tab" href="#review" role="tab" aria-controls="review" aria-selected="false">Reviews (4)</a>
|
|||
|
|
</div>
|
|||
|
|
</nav>
|
|||
|
|
</div>
|
|||
|
|
<div class="tab-content" id="pro-detailsContent">
|
|||
|
|
<div class="tab-pane fade show active" id="des" role="tabpanel">
|
|||
|
|
<div class="product__details-des">
|
|||
|
|
<p>{{item.details.details_text}}</p>
|
|||
|
|
|
|||
|
|
<div class="product__details-des-list mb-20">
|
|||
|
|
<ul>
|
|||
|
|
<li v-for="(list,i) in item.details.details_list" :key="i">
|
|||
|
|
<span>{{list}}</span>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
<p>{{item.details.details_text_2}}</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="tab-pane fade" id="add" role="tabpanel">
|
|||
|
|
<div class="product__details-add">
|
|||
|
|
<ul>
|
|||
|
|
<li><span>Weight</span></li>
|
|||
|
|
<li><span>.25 KG</span></li>
|
|||
|
|
<li><span>Dimention</span></li>
|
|||
|
|
<li><span>62 × 56 × 12 cm</span></li>
|
|||
|
|
<li><span>Size</span></li>
|
|||
|
|
<li><span>XL, XXL, LG, SM, MD</span></li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="tab-pane fade" id="review" role="tabpanel">
|
|||
|
|
<product-details-review :item="item"/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- related products start -->
|
|||
|
|
<related-products :item="item"/>
|
|||
|
|
<!-- related products end -->
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script lang="ts">
|
|||
|
|
import { defineComponent,PropType } from 'vue';
|
|||
|
|
import ProductType from '~~/types/productType';
|
|||
|
|
import ProductDetailsContent from './ProductDetailsContent.vue';
|
|||
|
|
import ProductDetailsReview from './ProductDetailsReview.vue';
|
|||
|
|
import RelatedProducts from './RelatedProducts.vue';
|
|||
|
|
|
|||
|
|
export default defineComponent({
|
|||
|
|
components: { ProductDetailsContent, ProductDetailsReview, RelatedProducts },
|
|||
|
|
props:{
|
|||
|
|
item:{
|
|||
|
|
type:Object as PropType<ProductType>,
|
|||
|
|
default:{},
|
|||
|
|
required:true
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
data () {
|
|||
|
|
return {
|
|||
|
|
active_img:this.item.img
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods:{
|
|||
|
|
handleActiveImg(img:string){
|
|||
|
|
this.active_img = img
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
setup () {
|
|||
|
|
return {}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
</script>
|