Skip to content

K
kiaisoft_tuananh_nuxt
Commit a91a949e authored by Le Dinh Trung's avatar Le Dinh Trung
Browse files
Options

deatail

parent b3a1bf6a
Show whitespace changes
Inline Side-by-side
Showing with 370 additions and 0 deletions
pages/home-page/products/index.vue 0 → 100644
View file @ a91a949e
<template>
<v-container>
<!-- Full-width images with number text -->
<div class="sub-container">
<div class="gallery-product">
<div>
<div class="mySlides">
<div class="numbertext">
1 / 4
</div>
<img src="https://cdn.vuetifyjs.com/images/cards/sunshine.jpg" style="width:100%; height: 100%;">
</div>
<div class="mySlides">
<div class="numbertext">
2 / 4
</div>
<img src="https://cdn.vuetifyjs.com/images/cards/docks.jpg" style="width:100%; height: 100%;">
</div>
<div class="mySlides">
<div class="numbertext">
3 / 4
</div>
<img src="https://cdn.vuetifyjs.com/images/cards/hotel.jpg" style="width:100%; height: 100%;">
</div>
<div class="mySlides">
<div class="numbertext">
4 / 4
</div>
<img src="https://cdn.vuetifyjs.com/images/cards/sunshine.jpg" style="width:100%; height: 100%;">
</div>
<!-- Next and previous buttons -->
<a class="prev" @click="plusSlides(-1)">&#10094;</a>
<a class="next" @click="plusSlides(1)">&#10095;</a>
</div>
<!-- Thumbnail images -->
<div class="c2">
<div class="column">
<img class="demo cursor" src="https://cdn.vuetifyjs.com/images/cards/sunshine.jpg" style="width:100%; height: 100%;" alt="The Woods" @click="currentSlide(1)">
</div>
<div class="column">
<img class="demo cursor" src="https://cdn.vuetifyjs.com/images/cards/docks.jpg" style="width:100%; height: 100%;" alt="Cinque Terre" @click="currentSlide(2)">
</div>
<div class="column">
<img class="demo cursor" src="https://cdn.vuetifyjs.com/images/cards/hotel.jpg" style="width:100%; height: 100%;" alt="Mountains and fjords" @click="currentSlide(3)">
</div>
<div class="column">
<img class="demo cursor" src="https://cdn.vuetifyjs.com/images/cards/sunshine.jpg" style="width:100%; height: 100%;" alt="Northern Lights" @click="currentSlide(4)">
</div>
</div>
</div>
<div class="detail-product">
<v-col>
<v-row class="flex-row align-center justify-space-between mt-2">
<v-card-title class="modal-title" style="margin-left:-20px;color:#222;font-weight:700;font-size: 1.9rem">
MACBOOK PRO 1
</v-card-title>
</v-row>
<v-row class="flex-row align-center">
<h3 class="mr-4">
Price:
</h3>
<v-card-title style="color: #d26e4b;font-weight: 700;line-height: 1;">
100$
</v-card-title>
</v-row>
<v-card-text class="descrip">
Sed egestas, ante et vulputate volutpat,
</v-card-text>
<v-row class="flex-row align-center">
<h3 class="mr-4">
Color:
</h3>
<v-col cols="12" sm="6" md="4">
<v-select
label="Color"
:items="['Red', 'Blue', 'White', 'Brown', 'Yellow', 'Violet']"
/>
</v-col>
</v-row>
<v-row class="flex-row align-center">
<h3 class="mr-4">
Size:
</h3>
<v-col cols="12" sm="6" md="4">
<v-select
label="Color"
:items="['Red', 'Blue', 'White', 'Brown', 'Yellow', 'Violet']"
/>
</v-col>
</v-row>
<v-row class="mt-7">
<v-divider :thickness="2" />
</v-row>
<v-row cols="12" md="2" class="flex-row align-center">
<h3 class="mr-4">
Quantity
</h3>
<v-col md="2">
<v-text-field
type="number"
/>
</v-col>
<v-btn color="primary" dense>
Add to card (+)
</v-btn>
<v-btn
plain
>
<v-icon large>
mdi-heart-outline
</v-icon>
</v-btn>
</v-row>
<v-row class="mb-1">
<v-divider :thickness="2" />
</v-row>
<v-row>
<v-icon class="mx-2">
mdi-twitter
</v-icon>
<v-icon class="mx-2">
mdi-facebook
</v-icon>
<v-icon class="mx-2">
mdi-instagram
</v-icon>
</v-row>
</v-col>
</div>
</div>
<v-row class="d-flex justify-center mt-10">
<h2>
RELATED PRODUCT
</h2>
</v-row>
<v-row class="pt-5 pb-5">
<v-col
v-for="(item, i) in items"
:key="i"
cols="12"
md="3"
>
<v-hover
v-slot="{ hover }"
:elevation="hover ? 12 : 2"
:class="{ 'on-hover': hover }"
>
<v-card
:elevation="hover ? 16 : 2"
:class="{ 'on-hover': hover }"
class="mx-auto pa-2 ma-3"
max-width="280"
link
>
<div>
<v-img
:src="item.images"
height="250px"
cover
/>
</div>
<v-card-title class="d-flex justify-center">
{{ item.name }}
</v-card-title>
<v-card-subtitle class="d-flex justify-center">
{{ item.price }}
</v-card-subtitle>
</v-card>
</v-hover>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
layout: 'user',
data: () => {
return {
product: [],
slideIndex: 1,
items: [
{
images: 'https://cdn.vuetifyjs.com/images/cards/docks.jpg',
price: '100$',
name: 'xiaomi x99'
},
{
images: 'https://cdn.vuetifyjs.com/images/cards/docks.jpg',
price: '100$',
name: 'xiaomi x99'
},
{
images: 'https://cdn.vuetifyjs.com/images/cards/docks.jpg',
price: '100$',
name: 'xiaomi x99'
},
{
images: 'https://cdn.vuetifyjs.com/images/cards/docks.jpg',
price: '100$',
name: 'xiaomi x99'
}
]
}
},
mounted () {
this.showSlides(1)
},
created () {
this.getProduct()
},
methods: {
async getProduct () {
const resp = await this.$axios.get(`/products/detail/${this.$route.params.id}`, {
headers: {
Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
}
})
.then(response => (this.product = response.data))
.catch(function (error) {
console.log(error)
})
console.log(resp)
},
// css gallery function
plusSlides (n) {
this.showSlides(this.slideIndex += n)
},
currentSlide (n) {
this.showSlides(this.slideIndex = n)
},
showSlides (n) {
let i
const slides = document.getElementsByClassName('mySlides')
const dots = document.getElementsByClassName('demo')
if (n > slides.length) { this.slideIndex = 1 }
if (n < 1) { this.slideIndex = slides.length }
for (i = 0; i < slides.length; i++) {
slides[i].style.display = 'none'
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(' active', '')
}
slides[this.slideIndex - 1].style.display = 'block'
dots[this.slideIndex - 1].className += ' active'
}
}
}
</script>
<style scope>
* {
box-sizing: border-box;
}
/* Position the image container (needed to position the left and right arrows) */
.container {
position: relative;
}
/* Hide the images by default */
.mySlides {
display: none;
height:100%;
max-width:543,41px;
max-height:461,6px;
}
/* Add a pointer when hovering over the thumbnail images */
.cursor {
cursor: pointer;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 40%;
width: auto;
padding: 16px;
color: white;
font-weight: bold;
font-size: 20px;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 12px 12px;
position: absolute;
top: 0;
}
/* Container for image text */
.caption-container {
text-align: center;
background-color: #222;
padding: 2px 16px;
color: white;
}
.row:after {
content: "";
display: table;
clear: both;
}
/* Six columns side by side */
.column {
float: left;
width: 100%;
height: 25%;
max-width:109px;
max-height:122px;
}
/* Add a transparency effect for thumnbail images */
.demo {
opacity: 0.6;
}
.active,
.demo:hover {
opacity: 1;
}
.gallery-product {
margin-top: 40px;
display: flex;
flex-direction: row-reverse;
gap: 5px;
justify-content: flex-end;
}
.c2 {
display: flex;
flex-direction: column;
margin-right: 20px;
max-width: 91px;
gap: 10px;
}
.sub-container {
display: flex;
flex-direction: row;
gap: 20px;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment